/* REIF shared page skin — the "skin" only. Each page supplies its own specialized layout/bones. */
* { box-sizing:border-box; margin:0; padding:0; }
:root {
  --ink:#0a5376; --ink-soft:#355465; --muted:#6f97a8; --accent:#818cf8;
  --bubble:linear-gradient(180deg,#ffffff,#eef7fb); --bb:#cfe7f2; --sh:0 10px 24px rgba(8,71,103,.10);
  --good:#10b981; --warn:#f59e0b; --bad:#ef4444;
}
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; color:#fff; width:1520px; min-height:1000px; -webkit-font-smoothing:antialiased;
  background: radial-gradient(circle at 14% -8%, rgba(129,140,248,.26), transparent 40%), radial-gradient(circle at 80% 0%, rgba(34,211,238,.16), transparent 38%), linear-gradient(180deg,#0d0e10 0%,#0a0b0d 55%,#070809 100%); }
.app { display:flex; min-height:1000px; }
/* left icon rail (matches live index.html) */
.rail { width:64px; background:#fff; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:2px; flex-shrink:0; }
.rail a { width:52px; padding:8px 0; border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:3px; color:#64748b; font-size:9px; font-weight:600; text-decoration:none; }
.rail a:hover { background:#f1f5f9; color:var(--ink); }
.rail a.active { background:#2563eb; color:#fff; }
.rail a svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.rail .sep { width:28px; height:1px; background:#e2e8f0; margin:6px 0; }
/* dark glass app-rail (new canonical) */
.app-rail { position:fixed; left:0; top:0; bottom:0; width:64px; background:rgba(10,11,13,0.82); border-right:1px solid rgba(255,255,255,0.12); z-index:200; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:2px; backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); box-shadow:4px 0 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); }
.app-rail a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:52px; padding:8px 0; border-radius:12px; color:#c4cbd5; text-decoration:none; font-size:9px; font-weight:600; letter-spacing:.2px; transition:all .15s ease; }
.app-rail a svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.app-rail a:hover { background:rgba(255,255,255,0.12); color:#ffffff; }
.app-rail a.active { background:rgba(129,140,248,0.30); color:#a5b4fc; box-shadow:inset 0 0 0 1px rgba(129,140,248,0.45); }
.app-rail .rail-sep { width:28px; height:1px; background:rgba(255,255,255,0.14); margin:6px 0; }
/* optional sub-nav */
.subnav { width:210px; padding:24px 14px; border-right:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); flex-shrink:0; }
.subnav-title { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 8px 12px; }
.snav { display:flex; flex-direction:column; gap:5px; }
.snav a { display:flex; align-items:center; gap:11px; padding:12px; border-radius:12px; color:#aebecb; font-size:14px; font-weight:700; text-decoration:none; }
.snav a svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; }
.snav a.active { background:linear-gradient(135deg,rgba(129,140,248,.22),rgba(34,211,238,.12)); color:#fff; border:1px solid rgba(129,140,248,.4); }
.snav a:hover:not(.active) { background:rgba(255,255,255,.05); color:#fff; }
/* main */
.main { flex:1; padding:26px 32px 50px; min-width:0; }
.eyebrow { color:var(--accent); letter-spacing:.18em; text-transform:uppercase; font-size:12px; font-weight:700; }
.htop { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
h1 { font-size:38px; font-weight:800; letter-spacing:-.02em; margin:7px 0 4px; }
.sub { color:#aab8c6; font-size:14px; max-width:680px; }
.btn { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800; padding:11px 16px; border-radius:12px; background:linear-gradient(135deg,#818cf8,#22d3ee); color:#0b1020; border:none; cursor:pointer; white-space:nowrap; }
.btn.ghost { background:rgba(255,255,255,.06); color:#cdd9e4; border:1px solid rgba(255,255,255,.14); }
/* summary tiles */
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 8px; }
.sum { background:var(--bubble); border:1px solid var(--bb); border-radius:18px; padding:18px 20px; box-shadow:var(--sh); }
.sum .lab { color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.sum .val { color:var(--ink); font-size:34px; font-weight:800; letter-spacing:-.02em; margin-top:8px; line-height:1; }
.sum .val.good { color:var(--good); } .sum .val.bad { color:var(--bad); }
.sum .meta { color:var(--ink-soft); font-size:12.5px; font-weight:600; margin-top:8px; }
/* section header */
.sec-title { display:flex; align-items:center; gap:12px; margin:26px 0 13px; }
.sec-title .t { font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#c7d4e0; }
.sec-title .ln { flex:1; height:1px; background:rgba(255,255,255,.12); }
.sec-title .cnt { font-size:12px; color:var(--muted); font-weight:600; }
/* generic card + grid */
.grid { display:grid; gap:14px; }
.card { background:var(--bubble); border:1px solid var(--bb); border-radius:18px; padding:16px 17px; box-shadow:var(--sh); }
.card.click { cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.card.click:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(8,71,103,.16); }
/* status pills */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; padding:5px 10px; border-radius:999px; white-space:nowrap; }
.pill.good { background:rgba(16,185,129,.12); color:#0a7d52; border:1px solid rgba(16,185,129,.32); }
.pill.warn { background:rgba(245,158,11,.12); color:#9a6a00; border:1px solid rgba(245,158,11,.32); }
.pill.bad  { background:rgba(239,68,68,.12);  color:#b3261e; border:1px solid rgba(239,68,68,.32); }
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot.good{background:var(--good);} .dot.warn{background:var(--warn);} .dot.bad{background:var(--bad);}
.foot { margin-top:18px; color:#6b7c8c; font-size:12px; }
.ink { color:var(--ink); } .muted { color:var(--muted); }
a.plain { text-decoration:none; color:inherit; }