:root{
  --green:#1f7a3d; --green-d:#155c2c;
  --ink:#16231b; --muted:#6b7d72; --line:#dbe5dd; --bg:#f3f7f3; --card:#fff;
  --pink:#e8736f; --purple:#9b59b6; --red:#c0392b;
  --pink-bg:#fdecec; --purple-bg:#f4ecf7; --red-bg:#fae9e7;
  --tap:64px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);
  -webkit-text-size-adjust:100%}
.hidden{display:none!important}
.screen{min-height:100%;display:flex;flex-direction:column}

/* login */
.login-card{max-width:420px;margin:8vh auto;text-align:center}
.brand{font-size:30px;margin:0 0 18px;color:var(--green);font-weight:800;letter-spacing:-.5px}
.brand span{color:var(--ink);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin:14px}
.fld{display:block;text-align:left;font-weight:600;color:var(--muted);margin:14px 0}
.fld select,.fld input{display:block;width:100%;margin-top:6px;padding:14px;font-size:20px;
  border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);min-height:var(--tap)}
button{font:inherit;cursor:pointer;border:none;border-radius:12px}
.primary{background:var(--green);color:#fff;font-weight:700;padding:14px 18px;min-height:var(--tap)}
.primary:active{background:var(--green-d)}
.primary.big{width:100%;font-size:20px;margin-top:10px}
.ghost{background:transparent;color:var(--green);font-weight:700;padding:10px 14px}
.err{color:var(--red);font-weight:600;min-height:1.2em;margin:10px 0 0}
.muted{color:var(--muted)}
.center{text-align:center}

/* topbar */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 14px;background:var(--green);color:#fff}
.topbar strong{font-size:18px}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-right{display:flex;align-items:center;gap:10px}
.tag{background:rgba(255,255,255,.22);padding:3px 9px;border-radius:999px;font-size:13px;font-weight:700}
.topbar .primary{background:#fff;color:var(--green);padding:10px 14px;min-height:48px}
.topbar .ghost{color:#fff}
.savestate{font-size:13px;opacity:.9}
.savestate.saving{opacity:1}
.savestate.offline{color:#ffe08a;font-weight:700}

/* tabs */
.tabs{position:sticky;top:54px;z-index:4;display:flex;gap:6px;padding:8px 10px;background:var(--bg);
  overflow-x:auto;border-bottom:1px solid var(--line)}
.tab{white-space:nowrap;background:#e7efe8;color:var(--ink);border-radius:999px;padding:10px 16px;
  font-weight:700;min-height:48px}
.tab.active{background:var(--green);color:#fff}
.tab .badge{display:inline-block;margin-left:6px;font-size:12px;background:rgba(0,0,0,.12);border-radius:999px;
  padding:1px 7px}
.tab.active .badge{background:rgba(255,255,255,.25)}

/* search + progress */
.searchrow{display:flex;align-items:center;gap:10px;padding:8px 12px}
.searchrow input{flex:1;padding:12px;font-size:17px;border:2px solid var(--line);border-radius:12px;min-height:52px}
.progress{font-weight:700;color:var(--muted);white-space:nowrap}

/* list */
.list{flex:1;padding:4px 10px 90px}
.item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-left:6px solid var(--line);border-radius:14px;padding:12px;margin:8px 0}
.item .info{flex:1;min-width:0}
.item .name{font-weight:700;font-size:18px;overflow-wrap:anywhere}
.item .pack{display:inline-block;font-size:13px;font-weight:700;color:var(--green-d);
  background:#e7efe8;border-radius:6px;padding:1px 7px;margin-top:3px}
.item .meta{color:var(--muted);font-size:14px;margin-top:3px}
.item .last{font-variant-numeric:tabular-nums}
.item input.qty{width:120px;text-align:center;font-size:24px;font-weight:800;padding:10px;
  border:2px solid var(--line);border-radius:12px;min-height:var(--tap)}
.item input.qty:focus{outline:none;border-color:var(--green)}
.item.filled{border-left-color:var(--green)}
.item.warn-pink{border-left-color:var(--pink);background:var(--pink-bg)}
.item.warn-purple{border-left-color:var(--purple);background:var(--purple-bg)}
.item.warn-red{border-left-color:var(--red);background:var(--red-bg)}
.swing{font-size:13px;font-weight:700;margin-top:3px}
.swing.pink{color:var(--pink)} .swing.purple{color:var(--purple)} .swing.red{color:var(--red)}

/* session picker */
.session-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:#fff;border:2px solid var(--line);border-radius:14px;padding:18px;margin:10px 0;
  min-height:72px;text-align:left}
.session-btn:active{border-color:var(--green)}
.s-label{font-size:19px;font-weight:700;color:var(--ink)}
.s-status{font-size:14px;font-weight:700;color:var(--muted)}
.s-status.submitted{color:#8a6d00}
.s-status.committed{color:var(--green)}
#toPick{font-size:26px;line-height:1;color:#fff;padding:4px 10px}

/* review */
#reviewSummary .big-n{font-size:34px;font-weight:800;color:var(--green)}
.warnlist{margin:10px 0;padding:10px;border:1px solid var(--red);background:var(--red-bg);border-radius:12px}
.warnlist h4{margin:0 0 6px;color:var(--red)}
.warnlist .row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:14px}

/* done */
.bigcheck{width:84px;height:84px;border-radius:50%;background:var(--green);color:#fff;font-size:48px;
  display:flex;align-items:center;justify-content:center;margin:6px auto 12px}