:root{
  --bg:#0F172A;
  --bg-2:#1E293B;
  --card:#16213a;
  --text:#E2E8F0;
  --muted:#94A3B8;
  --accent:#F59E0B;
  --accent-2:#FBBF24;
  --danger:#EF4444;
  --ok:#22C55E;
  --border:#2A3B5C;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#app, #login{ min-height:100vh; display:flex; flex-direction:column; }
.hidden{ display:none !important; }

/* ---------- login ---------- */
#login{ align-items:center; justify-content:center; padding:24px; gap:20px; text-align:center; }
#login .logo{ font-size:2.2rem; font-weight:800; letter-spacing:-1px; }
#login .logo span{ color:var(--accent); }
#login .tagline{ color:var(--muted); font-size:.95rem; }
#login form{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:280px; }
#login input{
  font-size:1.4rem; text-align:center; letter-spacing:6px; padding:14px;
  border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-2); color:var(--text);
}
#login-error{ color:var(--danger); font-size:.85rem; min-height:1.2em; }

/* ---------- shared ---------- */
button{
  font:inherit; cursor:pointer; border:none; border-radius:10px;
  background:var(--accent); color:#0F172A; font-weight:700; padding:12px 18px;
}
button.secondary{ background:var(--bg-2); color:var(--text); border:1px solid var(--border); }
button.danger{ background:var(--danger); color:#fff; }
button.link{ background:none; color:var(--accent); font-weight:600; padding:6px; }
input, select, textarea{
  font:inherit; padding:12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-2); color:var(--text); width:100%;
}
label{ font-size:.8rem; color:var(--muted); display:block; margin-bottom:4px; }
.field{ margin-bottom:14px; }
.row{ display:flex; gap:10px; }
.row > *{ flex:1; }

/* ---------- header / nav ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:var(--bg-2); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:5;
}
header .logo{ font-weight:800; font-size:1.15rem; }
header .logo span{ color:var(--accent); }

main{ flex:1; padding:16px; padding-bottom:90px; overflow-y:auto; }

nav.tabbar{
  position:fixed; bottom:0; left:0; right:0; display:flex;
  background:var(--bg-2); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
nav.tabbar button{
  flex:1; background:none; color:var(--muted); font-weight:600; border-radius:0;
  padding:14px 8px; font-size:.85rem;
}
nav.tabbar button.active{ color:var(--accent); }

/* ---------- cards ---------- */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin-bottom:12px;
}
.card h3{ margin-bottom:4px; }
.card .meta{ color:var(--muted); font-size:.85rem; }
.card-actions{ display:flex; gap:8px; margin-top:10px; }
.empty{ color:var(--muted); text-align:center; padding:40px 20px; }

.fab-row{ display:flex; justify-content:flex-end; margin-bottom:14px; }

.section-title{
  color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  margin:18px 0 8px;
}
.section-title:first-child{ margin-top:0; }

.chip{
  display:inline-block; font-size:.7rem; padding:2px 8px; border-radius:20px;
  background:var(--bg); color:var(--accent-2); border:1px solid var(--border); text-transform:capitalize;
}

.result-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.result-table th, .result-table td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--border); font-size:.9rem; }
.result-table th{ color:var(--muted); font-weight:600; font-size:.75rem; text-transform:uppercase; }
.result-table td.qty{ font-weight:700; color:var(--accent-2); white-space:nowrap; }
.result-table td.detail{ color:var(--muted); font-size:.8rem; }

.back-btn{ background:none; color:var(--muted); padding:4px; margin-bottom:10px; }

.checklist{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; max-height:260px; overflow-y:auto; }
.checklist label{
  display:flex; align-items:center; gap:10px; color:var(--text); font-size:.9rem;
  background:var(--bg-2); padding:10px; border-radius:10px; border:1px solid var(--border);
}
.checklist input[type=checkbox]{ width:auto; }

/* ---------- modal ---------- */
#modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-end;
  justify-content:center; z-index:20;
}
#modal-overlay.hidden{ display:none; }
#modal-box{
  background:var(--bg-2); width:100%; max-width:520px; border-radius:20px 20px 0 0;
  padding:20px; max-height:88vh; overflow-y:auto;
}
@media (min-width:600px){
  #modal-overlay{ align-items:center; }
  #modal-box{ border-radius:20px; }
}
#modal-box h2{ margin-bottom:16px; font-size:1.15rem; }
.modal-actions{ display:flex; gap:10px; margin-top:6px; }
.modal-actions button{ flex:1; }

.toast{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  background:var(--ok); color:#0F172A; font-weight:700; padding:10px 18px; border-radius:10px; z-index:50;
}
.toast.error{ background:var(--danger); color:#fff; }