:root { --ink:#0e1214; --muted:#6b7280; --line:#e5e7eb; --teal:#163A4A; --accent:#F29A2E; --card:#fff; --bg:#f7fafc; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:0; color:var(--ink); background:var(--bg); }
header { position: sticky; top:0; z-index: 50; background: linear-gradient(180deg, #174355, #143c4d 60%); color:#fff; padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.brand { font-weight:800; font-size:20px; letter-spacing:.4px;}
.brand .accent{ color:var(--accent); }
.meta { opacity:.95; font-size:14px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn { background:#fff; color:var(--teal); border:1px solid var(--line); padding:.5rem .75rem; border-radius:10px; font-weight:700; text-decoration:none; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.btn:hover { filter:brightness(0.98); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.bar { height:4px; background: var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.card h2 { margin:0; padding:.85rem 1rem; border-bottom:1px solid var(--line); font-size:1.05rem; background:#fff; position: sticky; top:0; z-index:5; }
.pad { padding: .9rem 1rem; }
.badges { display:flex; gap:.5rem; flex-wrap:wrap; }
.badge { border:1px solid var(--line); border-radius:999px; padding:.2rem .6rem; font-size:.85rem; color:var(--muted); background:#fff; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Toast */
.toast { position: fixed; right: 16px; top: 16px; background: #0f172a; color: #fff; padding: .6rem .8rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: .28s; z-index: 9999; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast .ok { background:#16a34a; display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:8px; }

/* Back to top */
#toTop { position: fixed; right: 18px; bottom: 18px; display:none; padding:.6rem .8rem; border-radius:999px; border:0; background:#111827; color:#fff; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.2); }
#toTop.show { display:block; }