:root{
  --bg:#14171c; --surface:#1d222a; --surface-2:#2a313b; --line:#343c48;
  --text:#e6e9ee; --muted:#9aa4b2; --accent:#4f8cff; --accent-ink:#0b1020;
  --ok:#3fb86f; --warn:#e0a43a; --err:#ef5b5b;
  --nav-h:56px; --pad:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
.shell{display:flex;flex-direction:column-reverse;height:100%;
  padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;flex:none;background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.nav a{flex:1;min-height:var(--nav-h);display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:12px;color:var(--muted);text-decoration:none;
  border-top:3px solid transparent;padding:0 2px}
.nav a[aria-current="page"]{color:var(--text);border-top-color:var(--accent);font-weight:600}
.view{flex:1;overflow-y:auto;padding:var(--pad);max-width:900px;width:100%;margin:0 auto;outline:none}
h1{font-size:1.5rem;margin:.2rem 0 1rem;font-weight:650}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:10px;
  padding:24px;color:var(--muted)}
.empty strong{color:var(--text);display:block;margin-bottom:4px}
.row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row span:first-child{color:var(--muted)}
.card{background:var(--surface);border-radius:10px;padding:4px 16px;margin-bottom:16px}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;
  min-height:44px;padding:0 18px;font:inherit;font-weight:600;cursor:pointer}
.btn.secondary{background:var(--surface-2);color:var(--text)}
.btn:focus-visible,.nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.85rem;
  border:1px solid currentColor}
.tag.ok{color:var(--ok)} .tag.warn{color:var(--warn)} .tag.err{color:var(--err)}
.banner{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:10;
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.banner[hidden]{display:none}
@media (min-width:760px){
  .shell{flex-direction:row}
  .nav{flex-direction:column;width:200px;border-top:0;border-right:1px solid var(--line);
    padding:12px 0}
  .nav a{justify-content:flex-start;padding:0 20px;font-size:15px;min-height:46px;
    border-top:0;border-left:3px solid transparent}
  .nav a[aria-current="page"]{border-left-color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}