/* MAlbert read-only shell — follows the dashboard's design tokens
   (index.html: --accent #0f6fec, --bg #f6f6f7, radius 10px, subtle shadows,
   status color families). Clean and fast. */
:root {
  --accent-light:#f0f6ff; --accent:#0f6fec; --bg-hover:#ebebed; --bg-subtle:#f1f1f3;
  --bg:#f6f6f7; --blue-border:#99c6fd; --blue:#0f6fec; --border-strong:#c9c9cf;
  --border:#e3e3e7; --green-border:#95c9b4; --green-light:#f1faf7; --green:#008060;
  --orange-border:#f5c896; --orange-light:#fff6e8; --orange:#b5620a;
  --purple-border:#c9a9f5; --purple-light:#f6f0fd; --purple:#6c3fa9; --radius:10px;
  --red-border:#ffd2c8; --red-light:#fff4f2; --red:#d72c0d;
  --shadow-sm:0 1px 0 rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.04);
  --shadow:0 2px 4px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  --shadow-md:0 4px 8px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
  --text-faint:#9b9b9b; --text-mid:#3d3d3d; --text-muted:#6b6b6b; --text:#1a1a1a;
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.hidden { display:none !important; }

/* Header */
header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:10px 20px; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm); }
.logo { font-weight:700; font-size:15px; letter-spacing:-.2px; }
.logo small { color:var(--text-faint); font-weight:500; }
.livebadge { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted);
  background:var(--bg-subtle); border:1px solid var(--border); border-radius:20px; padding:3px 10px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--text-faint); }
.dot.on { background:var(--green); box-shadow:0 0 0 3px var(--green-light); }
.dot.flash { animation:flash .9s ease; }
@keyframes flash { 0%{box-shadow:0 0 0 0 var(--accent);} 100%{box-shadow:0 0 0 10px transparent;} }
.spacer { flex:1; }
.usermenu { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); }
.btn { font:inherit; font-size:13px; font-weight:500; padding:6px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border-strong); background:#fff; color:var(--text); }
.btn:hover { background:var(--bg-hover); }
.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover { background:#0c5fd0; text-decoration:none; }
.btn.ghost { border-color:transparent; background:transparent; color:var(--text-muted); }

/* Nav */
nav.top { display:flex; gap:4px; padding:8px 20px 0; background:#fff; border-bottom:1px solid var(--border); }
nav.top button { font:inherit; font-weight:600; font-size:13px; padding:8px 14px; border:none; background:none;
  color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; }
nav.top button.active { color:var(--accent); border-bottom-color:var(--accent); }

main { padding:20px; max-width:1200px; margin:0 auto; }
.muted { color:var(--text-muted); } .faint { color:var(--text-faint); }

/* Stat cards */
.stats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.stat { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px;
  min-width:120px; cursor:pointer; box-shadow:var(--shadow-sm); }
.stat:hover { box-shadow:var(--shadow); }
.stat.active { border-color:var(--accent); background:var(--accent-light); }
.stat .n { font-size:20px; font-weight:700; }
.stat .l { font-size:11px; color:var(--text-muted); }

/* Tables */
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--bg-subtle); position:sticky; top:0; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:var(--accent-light); }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
.tablewrap { overflow-x:auto; }
tfoot td { font-weight:700; background:var(--bg-subtle); border-top:2px solid var(--border-strong); }

/* Status pill */
.pill { display:inline-block; font-size:11px; padding:2px 8px; border-radius:6px; font-weight:600;
  background:var(--bg-subtle); color:var(--text-mid); border:1px solid var(--border); }
.pill.blue{background:var(--blue-light);color:var(--blue);border-color:var(--blue-border);}
.pill.green{background:var(--green-light);color:var(--green);border-color:var(--green-border);}
.pill.orange{background:var(--orange-light);color:var(--orange);border-color:var(--orange-border);}
.pill.red{background:var(--red-light);color:var(--red);border-color:var(--red-border);}
.pill.purple{background:var(--purple-light);color:var(--purple);border-color:var(--purple-border);}

/* Slide-in panel */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:30; }
.panel { position:fixed; top:0; right:0; height:100%; width:min(520px,94vw); background:#fff; z-index:31;
  box-shadow:var(--shadow-md); overflow-y:auto; transform:translateX(100%); transition:transform .18s ease; }
.panel.open { transform:none; }
.panel .phead { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border); padding:16px 20px; display:flex; align-items:flex-start; gap:12px; }
.panel .phead h2 { margin:0; font-size:18px; }
.panel .pbody { padding:16px 20px 40px; }
.section { margin:18px 0; }
.section h3 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:0 0 8px; }
.grid2 { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; }
.grid2 dt { color:var(--text-muted); } .grid2 dd { margin:0; font-weight:500; }
.track { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-subtle); border-radius:8px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.readonly-note { font-size:12px; color:var(--text-faint); font-style:italic; }
.links a { display:inline-block; margin-right:12px; }

/* Auth gate */
#gate { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.authcard { width:min(400px,92vw); background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:28px; }
.authcard h1 { font-size:20px; margin:0 0 4px; } .authcard p { color:var(--text-muted); margin:0 0 18px; }
.authcard input { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--border-strong); border-radius:8px; margin-bottom:10px; }
.authcard .btn { width:100%; margin-bottom:8px; justify-content:center; text-align:center; }
.msg { font-size:13px; padding:8px 10px; border-radius:8px; margin-top:8px; }
.msg.err { background:var(--red-light); color:var(--red); } .msg.ok { background:var(--green-light); color:var(--green); }
.divider { text-align:center; color:var(--text-faint); font-size:12px; margin:12px 0; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff;
  padding:10px 16px; border-radius:8px; font-size:13px; z-index:60; box-shadow:var(--shadow-md); max-width:min(560px,92vw); }
.toast.ok { background:var(--green); }
.toast.warn { background:var(--orange); }
.toast.err { background:var(--red); }
button[disabled] { opacity:.5; cursor:not-allowed; }