:root { --pri:#0d6efd; --bg:#f4f6f9; --card:#fff; --ok:#198754; --warn:#fd7e14; --err:#dc3545; --muted:#6c757d; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:#1a1a1a; }
.screen { min-height:100dvh; display:flex; flex-direction:column; }
.hidden { display:none !important; }
.muted { color:var(--muted); font-size:13px; }
.err { color:var(--err); margin-top:8px; font-size:14px; min-height:18px; }

/* Login */
.login-box { margin:auto; padding:28px; width:min(360px,90vw); background:var(--card); border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.08); text-align:center; }
.login-box h1 { margin:0 0 4px; font-size:26px; }
.login-box input { width:100%; padding:13px; margin-top:12px; border:1px solid #ddd; border-radius:10px; font-size:16px; }

button { font-size:16px; border:none; border-radius:10px; padding:13px 16px; cursor:pointer; }
.primary { background:var(--pri); color:#fff; }
.primary:active { filter:brightness(.92); }
.ghost { background:transparent; font-size:20px; padding:6px 10px; }
.wide { width:100%; }
.big { font-size:19px; padding:18px; font-weight:600; }

/* Topbar */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--card); position:sticky; top:0; box-shadow:0 1px 6px rgba(0,0,0,.06); z-index:5; }
.period { font-weight:600; font-size:15px; }
.progress { width:160px; max-width:48vw; height:7px; background:#e9ecef; border-radius:4px; margin:5px 0; overflow:hidden; }
#progressBar { height:100%; width:0; background:var(--ok); transition:width .3s; }
.topbar-actions { display:flex; align-items:center; gap:4px; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--err); display:inline-block; }
.dot.online { background:var(--ok); }
.badge { position:absolute; transform:translate(8px,-14px); background:var(--warn); color:#fff; font-size:11px; border-radius:9px; padding:0 5px; }
#syncBtn { position:relative; }

/* Toolbar */
.toolbar { padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
#search { padding:11px; border:1px solid #ddd; border-radius:10px; font-size:15px; }

/* List */
.list { padding:0 14px 30px; overflow-y:auto; }
.group-title { font-weight:700; margin:16px 4px 6px; color:#333; }
.row { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:12px; padding:12px 14px; margin-bottom:8px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.row.done { opacity:.62; }
.row .ic { font-size:22px; }
.row .body { flex:1; min-width:0; }
.row .t { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .s { font-size:13px; color:var(--muted); }
.row .st { font-size:20px; }
.chip { font-size:11px; padding:1px 7px; border-radius:8px; background:#eef; color:#446; margin-left:6px; }
.chip.common { background:#fde9d6; color:#8a4b14; }

/* Card overlay */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; z-index:20; }
.card { background:var(--card); width:100%; border-radius:18px 18px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); position:relative; max-height:92dvh; overflow-y:auto; animation:up .2s ease; }
@keyframes up { from{transform:translateY(40px);opacity:.5} to{transform:none;opacity:1} }
.card-close { position:absolute; right:14px; top:12px; background:none; font-size:22px; color:var(--muted); }
.card-id { font-size:13px; color:var(--muted); }
.card-tenant { font-size:20px; font-weight:700; margin:2px 0; }
.card-meta { color:var(--muted); font-size:14px; margin-bottom:14px; }
.fld { display:block; margin-bottom:12px; }
.fld span { display:block; font-size:13px; color:var(--muted); margin-bottom:4px; }
.fld input { width:100%; padding:13px; border:1px solid #ddd; border-radius:10px; font-size:18px; }
.fld input:disabled { background:#f3f3f3; color:#555; }
.hint { font-size:14px; color:var(--ok); min-height:20px; margin:-4px 0 8px; }
.warn { background:#fff3e6; color:#8a4b14; border:1px solid #ffd9ad; border-radius:10px; padding:10px; font-size:14px; margin-bottom:12px; }
.photo-btn { display:inline-block; background:#eef2f7; padding:11px 16px; border-radius:10px; margin-bottom:6px; cursor:pointer; }
.photo-status { font-size:13px; min-height:18px; margin-bottom:8px; }
.photo-status.ok { color:var(--ok); } .photo-status.bad { color:var(--err); } .photo-status.warn { color:var(--warn); }
.order-fld input { max-width:120px; }
.btn-row { display:flex; gap:10px; align-items:center; }
.danger { background:#fdecea; color:var(--err); border:1px solid #f5c6c2; white-space:nowrap; }
.danger:active { filter:brightness(.95); }

/* QR */
#qrreader { width:100%; max-width:520px; margin:10px auto; }

/* Toast */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#222; color:#fff; padding:12px 18px; border-radius:24px; font-size:14px; z-index:50; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.toast.ok { background:var(--ok); } .toast.err { background:var(--err); }