:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f8fafc; background: #111827; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 5% 5%, #293b67, transparent 35%), #111827; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; border-radius: .7rem; padding: .75rem 1rem; background: #60a5fa; color: #08111f; font-weight: 700; }
button:hover { background: #93c5fd; }
input { width: 100%; margin-top: .4rem; padding: .75rem; border: 1px solid #475569; border-radius: .55rem; background: #0f172a; color: inherit; }
label { display: block; margin: .9rem 0; font-size: .9rem; font-weight: 600; }
.shell { max-width: 1080px; margin: auto; padding: 2rem 1.25rem; }
.card { padding: 2rem; border: 1px solid #334155; border-radius: 1rem; background: #172033dd; box-shadow: 0 20px 50px #0004; }
.login-card { max-width: 450px; margin: 10vh auto; }
.eyebrow { color: #93c5fd; font-size: .75rem; font-weight: 800; letter-spacing: .13em; margin: 0 0 .4rem; }
h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.muted, .empty { color: #cbd5e1; }
.error { min-height: 1.2em; color: #fda4af; font-size: .9rem; }
.topbar, .toolbar, .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.toolbar { margin: 2rem 0; }
.toolbar input { margin: 0; max-width: 420px; }
.secondary, .icon { background: #334155; color: #f8fafc; }
.icon { padding: .15rem .55rem; font-size: 1.4rem; }
.categories { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.category { padding: 1.2rem; border: 1px solid #334155; border-radius: 1rem; background: #172033cc; }
.category h2 { margin: 0 0 .8rem; font-size: 1rem; }
.link-list { display: grid; gap: .65rem; }
.link { display: flex; align-items: center; gap: .7rem; color: #e0f2fe; text-decoration: none; padding: .75rem; border-radius: .6rem; background: #26334b; }
.link:hover { background: #334a70; }
.link-icon { font-size: 1.2rem; }
dialog { width: min(94vw, 430px); border: 1px solid #475569; border-radius: 1rem; padding: 1.25rem; color: #f8fafc; background: #172033; }
dialog::backdrop { background: #0009; }
@media (max-width: 600px) { .toolbar { align-items: stretch; flex-direction: column; } .toolbar input { max-width: none; } }