:root { color-scheme: dark; --bg:#07111f; --card:rgba(255,255,255,.08); --card-border:rgba(255,255,255,.16); --text:#eef6ff; --muted:#9fb2c8; --brand:#66e3ff; --brand2:#8b5cf6; --ok:#45f0a2; --warn:#ffd166; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; background:radial-gradient(circle at 15% 15%,rgba(102,227,255,.25),transparent 32%),radial-gradient(circle at 85% 10%,rgba(139,92,246,.28),transparent 28%),linear-gradient(135deg,#07111f,#101827 55%,#090e18); color:var(--text); }
a { color:inherit; text-decoration:none; }
.page { width:min(1080px,calc(100% - 36px)); margin:0 auto; padding:34px 0 80px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; padding:14px 18px; border:1px solid var(--card-border); border-radius:999px; background:rgba(255,255,255,.06); backdrop-filter:blur(18px); }
.topbar div { display:flex; gap:18px; color:var(--muted); }
.hero { padding:56px; border:1px solid var(--card-border); border-radius:32px; background:rgba(255,255,255,.07); box-shadow:0 24px 80px rgba(0,0,0,.35); backdrop-filter:blur(18px); }
.eyebrow { margin:0; color:var(--brand); letter-spacing:.22em; text-transform:uppercase; font-weight:800; }
h1 { margin:12px 0; font-size:clamp(38px,7vw,82px); line-height:1; }
.subtitle { color:var(--muted); font-size:22px; max-width:760px; line-height:1.65; }
.actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.actions.compact { margin-top:12px; }
.btn { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border:1px solid var(--card-border); border-radius:999px; color:var(--text); background:rgba(255,255,255,.08); font:inherit; }
.btn.primary { border:0; color:#06101f; font-weight:900; background:linear-gradient(90deg,var(--brand),#a7f3d0); }
.cards,.grid { display:grid; gap:18px; }
.cards { grid-template-columns:repeat(3,1fr); margin-top:22px; }
.grid.four { grid-template-columns:repeat(4,1fr); }
.grid.two { grid-template-columns:repeat(2,1fr); }
.card,.metric { padding:26px; border:1px solid var(--card-border); border-radius:24px; background:var(--card); box-shadow:0 14px 40px rgba(0,0,0,.18); }
.card h2 { margin:0 0 10px; }
.card p,.metric p { color:var(--muted); line-height:1.7; }
.metric span { display:block; font-size:32px; font-weight:900; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0; }
.stats div { padding:20px; border-radius:22px; background:rgba(0,0,0,.22); border:1px solid var(--card-border); }
.stats span { font-size:28px; font-weight:900; color:var(--brand); }
.stats p { margin:6px 0 0; color:var(--muted); }
code { display:block; margin-top:16px; padding:12px; border-radius:14px; color:#b7f7ff; background:rgba(0,0,0,.28); overflow-wrap:anywhere; }
.dashboard { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }
.sidebar { padding:28px; border-right:1px solid var(--card-border); background:rgba(4,9,18,.72); backdrop-filter:blur(18px); }
.sidebar h2 { margin:0 0 28px; }
.sidebar a { display:block; margin:10px 0; padding:13px 15px; border-radius:14px; color:var(--muted); }
.sidebar a.active,.sidebar a:hover { color:var(--text); background:rgba(102,227,255,.13); }
.sidebar.admin a.active,.sidebar.admin a:hover { background:rgba(139,92,246,.18); }
.content { padding:34px; max-width:1180px; width:100%; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.panel-head h1 { font-size:44px; margin-bottom:0; }
.progress { height:12px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.progress i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--brand2)); }
table { width:100%; border-collapse:collapse; overflow:hidden; }
th,td { padding:15px; text-align:left; border-bottom:1px solid rgba(255,255,255,.1); color:var(--muted); }
th { color:var(--text); }
.ok { color:var(--ok); }
.warn { color:var(--warn); }
.health { list-style:none; padding:0; margin:14px 0 0; }
.health li { display:flex; align-items:center; gap:10px; padding:10px 0; color:var(--muted); }
.health b { width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 16px var(--ok); }
.health span { margin-left:auto; }
.toast { position:fixed; right:24px; bottom:24px; transform:translateY(18px); opacity:0; padding:14px 18px; border-radius:16px; border:1px solid var(--card-border); background:#102033; box-shadow:0 18px 45px rgba(0,0,0,.35); transition:.22s ease; }
.toast.show { opacity:1; transform:translateY(0); }
@media (max-width:900px) { .cards,.grid.four,.grid.two,.stats { grid-template-columns:1fr; } .dashboard { grid-template-columns:1fr; } .sidebar { position:static; border-right:0; border-bottom:1px solid var(--card-border); } .panel-head,.topbar { align-items:flex-start; flex-direction:column; } .hero { padding:34px; } }