:root{--bg:#f4f6fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--primary:#4f46e5;--primary2:#6366f1;--border:#e5e7eb;--ok:#16a34a;--bad:#dc2626;--warn:#d97706}
[data-theme=dark]{--bg:#0f172a;--card:#1e293b;--text:#e5e7eb;--muted:#94a3b8;--border:#334155}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
a{color:var(--primary);text-decoration:none;font-weight:600;transition:opacity .15s}
a:hover{opacity:.8}
a:not(.btn):not(.fab):not(.avatar):not(.chip):not([class]){display:inline-block}
.sidebar{width:230px;background:var(--card);border-right:1px solid var(--border);padding:18px 12px;position:sticky;top:0;height:100vh;flex-shrink:0}
.brand{font-weight:800;font-size:18px;margin-bottom:20px;padding:0 8px}.brand span{color:var(--primary)}
.sidebar nav a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text);margin-bottom:4px}
.sidebar nav a:hover{background:var(--bg)}.sidebar nav a.active{background:var(--primary);color:#fff}
.sidebar nav a.logout{color:var(--bad);margin-top:14px}
.content{flex:1;padding:26px;max-width:1100px;margin:auto;width:100%}
.auth-wrap{margin:auto;width:100%;max-width:420px;padding:20px}
h1{margin:0 0 18px;font-size:26px}h2{font-size:18px;margin:0 0 12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:18px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stat{font-size:32px;font-weight:800;color:var(--primary)}.muted{color:var(--muted);font-size:14px}
label{display:block;font-size:14px;margin:10px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
textarea{min-height:110px;resize:vertical}
.btn{display:inline-block;padding:9px 16px;border:0;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer;text-decoration:none;font:inherit;margin-top:12px}
.btn:hover{background:var(--primary2)}.btn.sm{padding:5px 10px;margin:0;font-size:13px}
.btn.red{background:var(--bad)}.btn.green{background:var(--ok)}.btn.gray{background:var(--muted)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:top}
.badge{padding:2px 9px;border-radius:99px;font-size:12px;color:#fff;background:var(--warn)}
.badge.done{background:var(--ok)}.badge.late{background:var(--bad)}
.flash{padding:12px;border-radius:8px;margin-bottom:16px;background:#dcfce7;color:#166534}
.flash.err{background:#fee2e2;color:#991b1b}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1;min-width:140px}
.inline{display:inline}.progress{background:var(--border);border-radius:99px;height:12px;overflow:hidden}
.progress div{height:100%;background:var(--primary)}
.ai-out{white-space:pre-wrap;line-height:1.6}
.bars{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:10px}
.bars .b{flex:1;text-align:center;font-size:12px}.bars .b i{display:block;background:var(--primary);border-radius:6px 6px 0 0;margin-bottom:4px;min-height:2px}
.tt{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.toast{position:fixed;right:18px;bottom:18px;background:var(--primary);color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 4px 14px #0004;max-width:300px}
.appbar,.bottomnav,.overlay,.fab{display:none}
.card{overflow-wrap:anywhere}
html{-webkit-tap-highlight-color:transparent}
@media(max-width:760px){
  :root{--nav-h:64px}
  body.app{display:block;font-size:15px;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);overscroll-behavior-y:contain}
  .appbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;padding:calc(12px + env(safe-area-inset-top)) 16px 14px;
    border-radius:0 0 22px 22px;box-shadow:0 4px 16px #4f46e555;margin-bottom:6px}
  .appbar-title{font-size:20px;font-weight:700}
  .avatar{width:38px;height:38px;border-radius:50%;background:#ffffff33;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none;border:2px solid #ffffff66}
  .content{padding:14px 14px 8px}
  .content>h1{display:none}
  .card{padding:16px;margin-bottom:14px;border:0;border-radius:18px;box-shadow:0 2px 10px #0000000d}
  [data-theme=dark] .card{box-shadow:none;border:1px solid var(--border)}
  .grid,.tt{grid-template-columns:1fr;gap:0}
  .grid:has(> .card .stat){grid-template-columns:1fr 1fr;gap:12px}
  .grid:has(> .card .stat) .card{margin-bottom:0}
  .grid:has(> .card .stat){margin-bottom:14px}
  .stat{font-size:28px}
  h2{font-size:17px}
  .row>*{min-width:100%}
  input,select,textarea{font-size:16px;padding:13px;border-radius:12px}
  .btn{padding:13px 16px;border-radius:12px}
  .btn:not(.sm){width:100%;text-align:center}
  .btn.sm{padding:9px 14px;margin:2px 4px 2px 0;border-radius:10px}
  table,tbody,tr,td{display:block;width:100%}
  tr:has(th){display:none}
  tr{border:0;border-radius:14px;padding:10px 12px;margin-bottom:10px;background:var(--bg)}
  td{border:0;padding:4px 0;font-size:15px}
  .bars{gap:5px}.bars .b{font-size:10px}
  .flash{border-radius:14px}
  .toast{left:12px;right:12px;max-width:none;bottom:calc(var(--nav-h) + 16px)}
  /* bottom navigation */
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--border);box-shadow:0 -4px 16px #0000000f}
  .bottomnav a,.bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;background:none;border:0;font-family:inherit;cursor:pointer;padding:0}
  .bottomnav svg{width:24px;height:24px}
  .bottomnav .active{color:var(--primary)}
  .bottomnav .active svg{background:#4f46e51f;border-radius:14px;padding:4px 14px;width:52px;height:30px;box-sizing:border-box}
  /* More drawer = bottom sheet */
  .sidebar{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;max-height:80vh;z-index:60;border:0;
    border-radius:24px 24px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .28s ease;overflow-y:auto}
  .sidebar.open{transform:none;box-shadow:0 -8px 30px #0006}
  .sidebar::before{content:"";display:block;width:42px;height:5px;border-radius:9px;background:var(--border);margin:0 auto 12px}
  .brand{display:none}
  .sidebar nav a{padding:15px 14px;font-size:16px;border-radius:14px}
  .overlay.show{display:block;position:fixed;inset:0;background:#0006;z-index:50}
  /* floating add button */
  .fab{display:flex;align-items:center;justify-content:center;position:fixed;right:18px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
    width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-size:32px;line-height:1;
    text-decoration:none;box-shadow:0 6px 18px #4f46e588;z-index:35}
  .auth-wrap{padding:16px}
  html{scroll-behavior:smooth}
  [id=addform]{scroll-margin-top:90px}
}

/* ---- polish ---- */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px #4f46e533}
.btn{font-weight:600;transition:transform .1s,background .15s,box-shadow .15s;box-shadow:0 2px 6px #4f46e533}
.btn:active{transform:scale(.97)}
.btn.sm{box-shadow:none}
.btn.gray{background:#64748b}
.btn:hover{opacity:1}
.card>a:last-child:not(.btn){margin-top:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:7px 16px;border-radius:99px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:600}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.sidebar nav a{font-weight:500}
.sidebar nav a.active{font-weight:600;box-shadow:0 4px 12px #4f46e544}
.grid .card{margin-bottom:0}.grid{margin-bottom:18px}
.grid:has(> .card .stat){grid-template-columns:repeat(4,1fr)}
.stat{line-height:1.1;margin-top:4px}
.card h2{font-weight:700}
@media(hover:hover) and (min-width:761px){table tr:hover td{background:#4f46e50a}}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.badge{font-weight:600}
.muted a{font-weight:700}
summary{cursor:pointer;padding:8px 0}
details{border-bottom:1px solid var(--border)}
.auth-wrap .card{padding:26px;border-radius:18px;box-shadow:0 10px 30px #4f46e522}
.auth-wrap h1{text-align:center}
.auth-wrap .muted{text-align:center}
body.auth{background:linear-gradient(160deg,#eef2ff,#f5f3ff 60%,#fdf2f8);align-items:center}
[data-theme=dark] body.auth{background:var(--bg)}
.progress{height:10px}
.progress div{background:linear-gradient(90deg,#4f46e5,#7c3aed);border-radius:99px}
@media(max-width:760px){
  .grid:has(> .card .stat){grid-template-columns:1fr 1fr}
  .grid{margin-bottom:0}.grid .card{margin-bottom:14px}
  .grid:has(> .card .stat) .card{margin-bottom:0}
  .grid:has(> .card .stat){margin-bottom:14px}
  .chip{padding:9px 18px}
}