:root{
  --bg:#0b1020; --fg:#e8ebf1; --muted:#aab3c5; --card:#121833; --card2:#0f1530;
  --blue:#2f6df0; --green:#2eb67d; --indigo:#6754ff; --amber:#f59e0b; --rose:#f43f5e; --cyan:#06b6d4; --violet:#8b5cf6;
  --ring: rgba(255,255,255,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#060b1a, #0b1020);color:var(--fg);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
.container{max-width:1100px;margin-inline:auto;padding:24px}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid #1b2344;background:#0b1020;position:sticky;top:0}
.brand{font-weight:700;letter-spacing:.3px}
.nav{display:flex;gap:12px;align-items:center}
.hi{opacity:.75}
.btn,.btn-link{background:#1a2347;color:#e8ebf1;padding:8px 12px;border-radius:10px;border:1px solid #2a3569;text-decoration:none}
.btn:hover{background:#223062}
.btn-link{background:transparent;border:none;padding:0;cursor:pointer;color:#9fb5ff;text-decoration:underline}
.messages{margin:0 0 12px 0;padding:0;list-style:none}
.messages li{background:#12204d;padding:8px 10px;border-radius:8px;border:1px solid #253571}

.h1{font-size:28px;margin:12px 0 18px}
.h2{font-size:18px;margin:22px 0 12px;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:16px}
.grid-compact{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.grid-compact{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid,.grid-compact{grid-template-columns:1fr}}

.tile{display:block;background:var(--card);border:1px solid #1c2750;border-radius:14px;padding:16px;text-decoration:none;color:inherit;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.tile:hover{outline:2px solid var(--ring)}
.tile-top{display:flex;align-items:center;justify-content:space-between}
.tile-title{font-size:14px;color:var(--muted)}
.tile-value{font-size:32px;font-weight:700;margin-top:8px}
.icon{width:22px;height:22px;opacity:.7}

.card{display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid #1c2750;border-radius:14px;padding:14px;text-decoration:none;color:inherit}
.card:hover{outline:2px solid var(--ring)}
.card-dot{width:10px;height:10px;border-radius:999px}
.card-title{font-weight:600}
.card-desc{font-size:13px;color:var(--muted)}

/* accents */
.tile-blue{border-color:color-mix(in oklab, var(--blue), #000 60%)}
.tile-green{border-color:color-mix(in oklab, var(--green), #000 60%)}
.tile-indigo{border-color:color-mix(in oklab, var(--indigo), #000 60%)}
.tile-amber{border-color:color-mix(in oklab, var(--amber), #000 60%)}
.card-rose{border-color:color-mix(in oklab, var(--rose), #000 60%)}
.card-cyan{border-color:color-mix(in oklab, var(--cyan), #000 60%)}
.card-violet{border-color:color-mix(in oklab, var(--violet), #000 60%)}
.card-rose .card-dot{background:var(--rose)}
.card-cyan .card-dot{background:var(--cyan)}
.card-violet .card-dot{background:var(--violet)}