:root{--g:#0f766e;--g2:#115e59;--bg:#f1f5f4;--card:#fff;--tx:#0f172a;--mut:#64748b;--bd:#e2e8f0;--warn:#b45309;--ok:#15803d;--bad:#b91c1c;--blue:#1d4ed8}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);-webkit-text-size-adjust:100%}
.hidden{display:none!important}
.wrap{max-width:480px;margin:0 auto;padding:16px 16px 80px}
header.top{background:var(--g);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px}
header.top h1{font-size:1.05rem;margin:0}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px;margin:12px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h2{font-size:1rem;margin:0 0 8px}
.input,select.input{width:100%;font:inherit;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--tx)}
.input:focus{outline:2px solid var(--g);border-color:var(--g)}
.btn{display:inline-block;font:inherit;font-weight:600;border:0;border-radius:10px;padding:12px 16px;background:var(--g);color:#fff;cursor:pointer;text-align:center;text-decoration:none}
.btn:active{background:var(--g2)}.btn.block{display:block;width:100%}
.btn.sec{background:#e2e8f0;color:var(--tx)}.btn.warn{background:var(--warn)}.btn.blue{background:var(--blue)}.btn.bad{background:var(--bad)}
.btn.sm{padding:7px 12px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:default}
.muted{color:var(--mut);font-size:.9rem}
.err{color:var(--bad);margin:8px 0 0;font-size:.95rem}
.ok-card{background:#ecfdf5;border-color:#6ee7b7}
.ok-card h2{color:var(--ok);font-size:1.15rem}
.warn-card{background:#fffbeb;border-color:#fcd34d}
.big{font-size:2.4rem;font-weight:800;line-height:1}
.bar{height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:10px 0}
.bar>i{display:block;height:100%;background:var(--g);transition:width .4s}
.grid13{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.grid13 span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#e2e8f0;color:var(--mut);font-weight:700;font-size:.9rem}
.grid13 span.on{background:var(--g);color:#fff}.grid13 span.cur{outline:2px solid var(--warn);outline-offset:1px}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.82rem;font-weight:700;background:#e2e8f0;color:#334155}
.badge.INTERESTED{background:#fef3c7;color:#92400e}.badge.PAID{background:#dbeafe;color:#1e40af}.badge.DELIVERED{background:#dcfce7;color:#166534}
.install{position:fixed;left:12px;right:12px;bottom:12px;background:#0f172a;color:#fff;border-radius:14px;padding:14px;z-index:20;display:flex;gap:10px;align-items:center}
.install p{margin:0;flex:1;font-size:.9rem}
.tabs{display:flex;background:#fff;border-bottom:1px solid var(--bd);position:sticky;top:50px;z-index:4}
.tabs button{flex:1;font:inherit;font-weight:600;padding:12px;border:0;background:none;border-bottom:3px solid transparent;color:var(--mut)}
.tabs button.on{color:var(--g);border-color:var(--g)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:inherit;padding:8px 12px;border-radius:99px;border:1px solid #cbd5e1;background:#fff}
.chips button.on{background:var(--g);color:#fff;border-color:var(--g)}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}
.person{border-top:1px solid var(--bd);padding:12px 0}.person:first-child{border:0}
.person b{display:block}
.overlay{position:fixed;inset:0;background:var(--bg);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.overlay .card{width:100%;max-width:360px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 16px;border-radius:99px;z-index:60;font-size:.9rem}
.live{display:inline-block;width:9px;height:9px;border-radius:50%;background:#94a3b8;margin-right:6px}.live.on{background:#4ade80}

/* Desktop */
.dsk{display:flex;min-height:100vh}
.side{width:230px;background:#0f172a;color:#cbd5e1;padding:18px 12px;flex:none}
.side h1{color:#fff;font-size:1.05rem;margin:0 8px 18px}
.side a{display:block;color:inherit;text-decoration:none;padding:10px 12px;border-radius:8px;cursor:pointer;margin-bottom:2px}
.side a.on,.side a:hover{background:#1e293b;color:#fff}
.main{flex:1;padding:24px;min-width:0}
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.metric{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:16px}
.metric small{color:var(--mut);display:block}.metric b{font-size:2rem}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar .input{width:auto;min-width:240px}
table.t{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--bd);border-radius:12px;font-size:.92rem}
table.t th,table.t td{padding:8px 10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:middle}
table.t th{background:#f8fafc;position:sticky;top:0}
.sq{display:inline-flex;gap:2px}
.sq button{width:22px;height:22px;border:1px solid #cbd5e1;background:#fff;border-radius:4px;font-size:.68rem;padding:0;cursor:pointer;color:var(--mut)}
.sq button.on{background:var(--g);border-color:var(--g);color:#fff}
.name-in{border:1px solid transparent;background:transparent;font:inherit;padding:5px 6px;width:100%;min-width:140px;border-radius:6px}
.name-in:hover,.name-in:focus{border-color:#cbd5e1;background:#fff}
.qrbox{max-width:420px}.qrbox svg{width:100%;height:auto;display:block}
.printonly{display:none}
@media (max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media print{
  body{background:#fff}.side,.toolbar,.noprint,.metrics,.tabs,header.top{display:none!important}
  .main{padding:0}.printonly{display:block}
  table.t{font-size:10px}table.t th{position:static}.sq button{width:14px;height:14px;font-size:8px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .name-in{border:0}tr{break-inside:avoid}
  .poster{text-align:center}.poster svg{width:70%}
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0b1210;--card:#16211e;--tx:#e6efec;--mut:#94a3b8;--bd:#2a3a36}
  .input,select.input,.chips button,.tabs{background:#0f1a17;color:var(--tx);border-color:var(--bd)}
  .btn.sec{background:#2a3a36;color:var(--tx)}.grid13 span{background:#22302c}
  .ok-card{background:#0d2a20;border-color:#14532d}.warn-card{background:#2a2410;border-color:#713f12}
  .metric,table.t{background:var(--card)}table.t th{background:#0f1a17}.sq button,.name-in:hover,.name-in:focus{background:#0f1a17;color:var(--tx)}
  .badge{background:#2a3a36;color:var(--tx)}
}
@media print{:root{--tx:#000;--bd:#999}}
a{color:var(--g)}.name-in{color:inherit}.toolbar .input{min-width:180px}
@media (prefers-color-scheme:dark){a{color:#5eead4}.install{border:1px solid #334155}}
@media print{a{color:#000}}
.sq button.cur{outline:2px solid var(--warn);outline-offset:1px}
@page{size:A4 portrait;margin:10mm}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dsk{display:block}.tw{overflow:visible!important}
  table.t{table-layout:fixed;width:100%;font-size:9px}
  table.t th,table.t td{padding:3px 2px;word-break:break-word}
  table.t th:nth-child(1){width:84px}table.t th:nth-child(3){width:34px}table.t th:nth-child(4){width:200px}table.t th:nth-child(5){width:150px}
  .sq{gap:1px;flex-wrap:nowrap}
  .sq button{width:14px;height:14px;font-size:7px;border-color:#555}
  .sq button.cur{outline:1.5px solid #000;outline-offset:0}
  .name-in,select.input{appearance:none;-webkit-appearance:none;border:0;padding:0;background:none;color:#000;font-size:9px;min-width:0;width:100%}
}