:root{
    --teal:#2f7d91; --teal-dark:#172e3b; --green:#2e7d4f; --amber:#b06a2c;
    --bg:#eef2f4; --card:#ffffff; --line:#dce4e8; --muted:#6b7680; --ink:#15242d;
    --tk:#2f7d91; --dry:#b06a2c; --red:#c0392b;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:#cdd8dd; color:var(--ink);
    display:flex; justify-content:center; min-height:100vh;
  }
  /* Phone frame (am Desktop sichtbar, am Handy full-bleed) */
  .phone{
    width:100%; max-width:430px; background:var(--bg); min-height:100vh;
    position:relative; display:flex; flex-direction:column;
    box-shadow:0 0 40px rgba(0,0,0,.25);
  }
  header{
    background:var(--teal); color:#fff; padding:14px 16px 12px;
    position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
  }
  header .back{font-size:22px; cursor:pointer; width:26px; line-height:1; opacity:.95}
  header .ttl{font-size:17px; font-weight:650; flex:1; line-height:1.15}
  header .sub{font-size:12px; opacity:.85; font-weight:400}
  .scroll{flex:1; overflow-y:auto; padding:12px 12px 90px}
  .card{
    background:var(--card); border-radius:14px; padding:13px 14px; margin-bottom:10px;
    box-shadow:0 1px 3px rgba(20,40,50,.08); border:1px solid var(--line);
  }
  .card.tap{cursor:pointer; transition:transform .05s}
  .card.tap:active{transform:scale(.992)}
  .row{display:flex; align-items:center; gap:10px}
  .spacer{flex:1}
  .muted{color:var(--muted)}
  .small{font-size:12px}
  .tiny{font-size:11px}
  .bold{font-weight:650}
  .pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
    padding:3px 8px; border-radius:999px; line-height:1.4}
  .pill.green{background:#e4f3ea; color:#1f6b41}
  .pill.red{background:#fae6e3; color:#b3362a}
  .pill.grey{background:#eef1f3; color:#6b7680}
  .pill.tk{background:#e3eff2; color:#236478}
  .pill.dry{background:#f4e9dd; color:#8a4f1c}
  .pill.blue{background:#e6eef7; color:#2c5aa0}
  .pill.amber{background:#fdf0dd; color:#9a6512}
  .goods.tap{cursor:pointer; align-items:center}
  .goods .check{font-size:19px; width:24px}
  .chip{font-size:11px; padding:2px 7px; border-radius:8px; font-weight:600}
  /* color band left edge */
  .band{position:relative; overflow:hidden}
  .band::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px}
  .band.tk::before{background:var(--tk)}
  .band.dry::before{background:linear-gradient(var(--tk) 50%, var(--dry) 50%)}
  .seq{width:26px; height:26px; border-radius:50%; background:var(--teal-dark); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0}
  .seq.done{background:var(--green)}
  .seq.fail{background:var(--red)}
  .progress{height:6px; background:#e6ecef; border-radius:4px; overflow:hidden; margin-top:8px; display:flex}
  .progress i{display:block; height:100%}
  .btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    padding:13px; border-radius:12px; border:none; font-size:15px; font-weight:650; cursor:pointer; margin-top:8px}
  .btn.primary{background:var(--teal); color:#fff}
  .btn.green{background:var(--green); color:#fff}
  .btn.red{background:var(--red); color:#fff}
  .btn.ghost{background:#eef2f4; color:var(--ink); border:1px solid var(--line)}
  .btn.sm{padding:9px; font-size:13px; border-radius:10px; margin-top:0}
  .reorder{display:flex; flex-direction:column; gap:2px}
  .reorder button{width:30px; height:24px; border:1px solid var(--line); background:#fff; border-radius:7px;
    font-size:13px; cursor:pointer; color:var(--teal); line-height:1}
  .seg{display:flex; background:#e6ecef; border-radius:10px; padding:3px; margin:0 0 12px}
  .seg button{flex:1; border:none; background:transparent; padding:8px; border-radius:8px; font-size:13px;
    font-weight:600; color:var(--muted); cursor:pointer}
  .seg button.on{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.1)}
  .map{height:200px; border-radius:14px; background:
    linear-gradient(135deg,#dce8ec,#cdddE3); position:relative; overflow:hidden; border:1px solid var(--line)}
  .map .road{position:absolute; background:#fff; opacity:.7}
  .dot{position:absolute; width:18px; height:18px; border-radius:50%; background:var(--teal);
    border:3px solid #fff; box-shadow:0 0 0 3px rgba(47,125,145,.3); transform:translate(-50%,-50%)}
  .stopdot{position:absolute; width:10px; height:10px; border-radius:50%; background:var(--teal-dark);
    border:2px solid #fff; transform:translate(-50%,-50%)}
  .stopdot.me{background:var(--amber); width:14px; height:14px}
  .toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:#15242d; color:#fff;
    padding:11px 18px; border-radius:12px; font-size:13px; font-weight:600; opacity:0; transition:opacity .2s;
    z-index:50; pointer-events:none; max-width:90%}
  .toast.show{opacity:.96}
  .divider{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;
    margin:14px 4px 6px}
  .goods{display:flex; gap:8px; padding:7px 0; border-bottom:1px solid #f0f3f4}
  .goods:last-child{border-bottom:none}
  .qty{font-weight:700; color:var(--teal); min-width:30px}
  .demoNote{background:#fff7e6; border:1px solid #f0d999; color:#7a5a12; font-size:11px;
    padding:7px 10px; border-radius:10px; margin-bottom:10px; line-height:1.4}
  .statusline{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
  .tabbar{position:absolute; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line);
    display:flex; padding:6px 0 calc(6px + env(safe-area-inset-bottom)); z-index:20}
  .tabbar button{flex:1; border:none; background:none; font-size:10px; color:var(--muted); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px; font-weight:600}
  .tabbar button.on{color:var(--teal)}
  .tabbar .ic{font-size:19px}
  /* Swipe */
  .swipewrap{position:relative; margin-bottom:10px; border-radius:14px; overflow:hidden}
  .swipewrap .card{margin-bottom:0; position:relative; z-index:1; background:#fff; will-change:transform}
  .swipehint{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    font-weight:700; color:#fff; font-size:15px; z-index:0}
  .swipehint.show{display:flex}
  .swipehint.green{background:var(--green)}
  .swipehint.red{background:var(--red)}
  .swipehint.right{justify-content:flex-start; padding-left:20px}
  .swipehint.bottom{align-items:flex-end; padding-bottom:16px}
  .swipetip{font-size:11px; color:var(--muted); background:#fff; border:1px dashed var(--line);
    border-radius:10px; padding:7px 10px; margin-bottom:8px; text-align:center}
  /* Bottom sheet */
  .sheet-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:flex-end; z-index:60}
  .sheet-overlay.show{display:flex}
  .sheet{background:#fff; width:100%; max-width:430px; margin:0 auto; border-radius:20px 20px 0 0;
    padding:10px 16px calc(18px + env(safe-area-inset-bottom)); animation:up .2s ease}
  .sheet .grip{width:38px; height:5px; background:#d4dde1; border-radius:3px; margin:4px auto 14px}
  @keyframes up{from{transform:translateY(40px)}to{transform:translateY(0)}}

/* Login + App-Shell (Stufe 2) */
#login{position:absolute; inset:0; background:linear-gradient(160deg,#2f7d91,#172e3b); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; z-index:80}
#login .logo{font-size:40px; margin-bottom:6px}
#login h2{color:#fff; margin:0 0 4px; font-size:22px}
#login p{color:#cfe0e5; margin:0 0 22px; font-size:13px}
#login input{width:100%; max-width:280px; padding:13px; border:0; border-radius:12px; margin-bottom:10px; font-size:16px; text-align:center}
#login button{width:100%; max-width:280px; padding:14px; border:0; border-radius:12px; background:#fff; color:#2f7d91; font-weight:700; font-size:16px; cursor:pointer}
#login .err{color:#ffd9d4; font-size:13px; min-height:18px; margin-top:10px}
#login .hint{color:#9fc3cd; font-size:11px; margin-top:18px}
.hidden{display:none !important}