:root{
  --bg:#0a1420; --bg2:#0f2030; --card:#12283a; --line:#1e3a52;
  --ink:#dbe7f0; --muted:#8aa5b8; --faint:#5f7d93;
  --accent:#2dd4bf; --accent-2:#38bdf8; --danger:#f87171; --ok:#34d399; --warn:#f5b14c;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);color:var(--ink);background:
  radial-gradient(120% 60% at 50% -10%, #123049 0%, transparent 55%), var(--bg);
  min-height:100dvh;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
.wrap{max-width:820px;margin:0 auto;padding:18px 16px 96px}

/* top bar */
.topbar{display:flex;align-items:center;gap:12px;padding:6px 2px 18px}
.brand{display:flex;align-items:center;gap:9px;font-weight:750;letter-spacing:-.01em;font-size:20px}
.brand .mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;color:#04252a;font-size:15px}
.spacer{flex:1}
.who{font-size:12px;color:var(--muted)}
.btn{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:8px 13px;cursor:pointer}
.btn.primary{background:var(--accent);color:#04252a;border:none}
.btn.ghost{background:transparent}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* section label */
.sec{display:flex;align-items:center;gap:10px;margin:22px 2px 12px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:700}
.sec .count{margin-left:auto;background:var(--accent);color:#04252a;border-radius:999px;padding:1px 9px;font-size:11px;letter-spacing:0}

/* launcher grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:16px;min-height:104px;transition:transform .08s ease,border-color .2s}
.tile:active{transform:scale(.98)}
.tile:hover{border-color:var(--accent)}
.tile .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;background:#0b1a28}
.tile .lbl{font-weight:650;font-size:14.5px;line-height:1.2}
.tile .sub{font-size:11.5px;color:var(--muted)}
.tile .ext{position:absolute;top:14px;right:14px;color:var(--faint);font-size:13px}

/* action cards (approvals inbox) */
.action{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-bottom:12px}
.action .thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;background:#0b1a28;flex:none}
.action .body{min-width:0;flex:1}
.action .badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;color:#04252a;margin-bottom:5px}
.action .cap{font-size:13px;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.action .meta{font-size:11px;color:var(--muted);margin-top:4px}
.action .acts{display:flex;flex-direction:column;gap:8px;flex:none}
.iconbtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#0b1a28;color:var(--ink);
  font-size:17px;cursor:pointer;display:grid;place-items:center}
.iconbtn.ok{color:var(--ok)} .iconbtn.no{color:var(--danger)}

/* empty / notice */
.notice{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6}

/* bottom nav (PWA) */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:rgba(9,18,28,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);padding:4px 12px;border-radius:10px}
.tabbar a.on{color:var(--accent)}
.tabbar a .ti{font-size:19px}
.tabbar a .dot{position:absolute;transform:translate(12px,-4px);width:8px;height:8px;border-radius:50%;background:var(--danger)}

/* login */
.authwrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.authcard{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
.authcard h1{margin:14px 0 4px;font-size:22px}
.authcard p.sub{margin:0 0 20px;color:var(--muted);font-size:13.5px}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;font-weight:600}
input{width:100%;background:#0b1a28;border:1px solid var(--line);border-radius:10px;padding:12px 13px;color:var(--ink);font-size:15px;font-family:var(--sans)}
input:focus{outline:none;border-color:var(--accent)}
.err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:#fca5a5;font-size:12.5px;padding:9px 12px;border-radius:9px;margin-top:14px}
.full{width:100%;margin-top:18px;padding:13px;font-size:15px}