:root { color-scheme: light; --bg:#f4f1ea; --ink:#1c1915; --muted:#6b645c; --line:#e4ddd2; --card:#fffdf8; --accent:#0f6e56; --accent-ink:#fff; --danger:#9f2d2d; --brand-1:#818cf8; --brand-2:#6366f1; --brand-3:#a855f7; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.55 "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); }
code { font-family: ui-monospace, Consolas, monospace; font-size:13px; background:#f3eee6; padding:1px 6px; border-radius:4px; }
.shell { display:flex; min-height:100vh; }
.side { width:220px; background:#1c1915; color:#f4f1ea; padding:22px 14px; flex:none; }
.brand { font-weight:700; letter-spacing:.04em; padding:4px 10px 18px; }
.side nav { display:flex; flex-direction:column; gap:4px; }
.nav-link {
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  color:#e7e0d6; text-decoration:none; padding:9px 12px; border-radius:8px;
  background:transparent; border:0; font:inherit; font-size:14.5px; cursor:pointer; text-align:left;
}
.nav-link:hover { background:#34302b; color:#fff; }
.nav-link.is-on { background:#34302b; color:#fff; }
.nav-link--parent { color:#e7e0d6; }
.nav-group.is-open > .nav-link--parent { color:#fff; background:#2a2722; }
.nav-caret { width:15px; height:15px; flex:none; opacity:.7; transition:transform .18s ease; }
.nav-group.is-open .nav-caret { transform:rotate(180deg); opacity:1; }
.nav-group { display:flex; flex-direction:column; gap:2px; }
.nav-sub { display:none; flex-direction:column; gap:2px; padding:2px 0 4px; }
.nav-group.is-open > .nav-sub { display:flex; }
.nav-link--sub { padding-left:22px; font-size:13.5px; color:#cfc6ba; }
.nav-link--sub.is-on { color:#fff; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; background:linear-gradient(180deg, #f7f4ee 0%, #f3efe7 240px); }
.top {
  position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:14px 28px; background:rgba(255,253,248,.86); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
}
.top__title { min-width:0; display:flex; align-items:center; gap:16px; }
.top__logo { display:flex; color:#1c1915; }
.top__logo svg { height:44px; width:auto; display:block; }
.top__rule { width:1px; height:26px; background:#e7e0d6; flex:none; }
.top h1 { margin:0; font-size:18px; font-weight:650; letter-spacing:.04em; color:#3a342c; }
.usermenu { position:relative; flex:none; }
.usermenu__btn {
  display:flex; align-items:center; gap:10px; height:48px; padding:4px 12px 4px 4px;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); cursor:pointer;
  box-shadow:0 8px 20px -16px rgba(28,25,21,.6);
}
.usermenu__btn:hover, .usermenu:focus-within .usermenu__btn { border-color:#d9cfc2; background:#fffdf8; }
.avatar {
  display:grid; place-items:center; width:40px; height:40px; border-radius:999px; color:#fff; font-weight:700;
  background:linear-gradient(135deg, #818cf8 0%, #6366f1 48%, #a855f7 100%);
}
.usermenu__meta { display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-align:left; }
.usermenu__meta b { font-size:13.5px; font-weight:650; }
.usermenu__meta span { font-size:11.5px; color:var(--muted); }
.caret { width:16px; height:16px; color:#8a8176; transition:transform .16s ease; }
.usermenu:focus-within .caret { transform:rotate(180deg); }
.userdrop {
  display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:210px; padding:8px;
  background:#fffdf8; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 40px -24px rgba(28,25,21,.55);
}
.usermenu:focus-within .userdrop { display:block; }
.userdrop__who { padding:8px 10px 10px; color:var(--muted); font-size:12.5px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.userdrop__who b { color:var(--ink); font-weight:650; }
.userdrop a { display:block; padding:8px 10px; border-radius:8px; color:#9f2d2d; text-decoration:none; font-size:13.5px; }
.userdrop a:hover { background:#fde8e8; }
.content { padding:22px 28px 48px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.card, .panel, table, .form, .login { background:var(--card); border:1px solid var(--line); border-radius:12px; }
.card { padding:16px; }
.card b { display:block; font-size:22px; }
.card span, .muted { color:var(--muted); }
.panel { padding:16px 18px; }
.panel h2 { margin:0 0 8px; font-size:16px; }
.toolbar { display:flex; gap:10px; align-items:center; margin:0 0 12px; }
table { width:100%; border-collapse:collapse; overflow:hidden; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; color:var(--muted); font-weight:600; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size:12px; word-break:break-all; }
.ops { display:flex; gap:10px; align-items:center; white-space:nowrap; }
.ops form { margin:0; }
.btn, button.btn { background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:8px 14px; text-decoration:none; display:inline-block; cursor:pointer; }
.btn.danger { background:var(--danger); }
button.link { background:none; border:0; color:var(--danger); cursor:pointer; padding:0; }
.form, .inline { display:flex; flex-direction:column; gap:12px; padding:16px; max-width:720px; }
.inline { flex-direction:row; flex-wrap:wrap; align-items:center; max-width:none; padding:0 0 12px; background:transparent; border:0; }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
input, select, textarea { font:inherit; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; }
label.check { flex-direction:row; align-items:center; color:var(--ink); gap:8px; }
.checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 12px; padding:4px 0; }
.checks label { color:var(--ink); }
.flash { padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.flash.ok { background:#e5f6ef; color:#0f6e56; }
.flash.err, .warn { background:#fde8e8; color:var(--danger); }
.warn { padding:10px 12px; border-radius:8px; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tabs a { text-decoration:none; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink); }
.tabs a.is-on { background:#1c1915; color:#fff; border-color:#1c1915; }
.pager { display:flex; gap:6px; margin:12px 0; }
.pager a { text-decoration:none; min-width:32px; text-align:center; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.pager a.is-on { background:#1c1915; color:#fff; }
.login-body {
  margin:0; min-height:100vh;
  --brand-1:#818cf8; --brand-2:#6366f1; --brand-3:#a855f7;
  --background:#0a0a0e; --foreground:#e9e9f0; --muted-foreground:#8d8d9c;
  --warning:#fbbf24; --border:#222230; --input:#262630; --ring:#6366f1;
  font-family:"Inter","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--background); color:var(--foreground);
}
.auth { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }
.auth__aside {
  position:relative; overflow:auto; color:#fafafa; padding:48px 60px;
  display:flex; flex-direction:column; justify-content:space-between; gap:36px;
  background:
    radial-gradient(80% 80% at 75% 15%, rgba(129,140,248,.30), transparent 55%),
    radial-gradient(70% 70% at 15% 95%, rgba(168,85,247,.26), transparent 55%),
    linear-gradient(160deg, #14141c 0%, #0a0a0e 60%, #050507 100%);
}
.auth__aside::after {
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent 80%);
  mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent 80%);
}
.auth__brand, .auth__pitch, .auth__features { position:relative; z-index:1; }
.auth__logo { display:inline-flex; color:#fff; }
.auth__logo svg { height:50px; width:auto; display:block; }
.auth__logo--card { display:none; margin-bottom:22px; color:var(--foreground); }
.auth__pitch h1 { font-size:34px; font-weight:720; letter-spacing:-.03em; line-height:1.22; margin:0 0 16px; }
.auth__pitch p { color:#c3c3cf; font-size:15px; max-width:460px; margin:0; line-height:1.7; }
.auth__features { display:flex; flex-direction:column; gap:15px; }
.auth__feature { display:flex; align-items:center; gap:13px; font-size:14px; color:#e4e4ef; }
.auth__feature .tick {
  display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:9px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); color:var(--brand-1);
}
.auth__feature .tick svg { width:15px; height:15px; }
.auth__main { display:grid; place-items:center; padding:32px; background:var(--background); }
.auth__card { width:100%; max-width:390px; }
.auth__head { margin-bottom:28px; }
.auth__head h2 { margin:0 0 7px; font-size:25px; font-weight:700; letter-spacing:-.02em; }
.auth__head p { margin:0; color:var(--muted-foreground); font-size:14px; line-height:1.6; }
.auth-alert {
  display:flex; gap:11px; margin-bottom:18px; padding:14px 16px; border-radius:10px;
  border:1px solid rgba(251,191,36,.35); background:rgba(251,191,36,.08); font-size:13px;
}
.auth-alert svg { width:18px; height:18px; flex:none; margin-top:1px; color:var(--warning); }
.auth-alert__title { font-weight:620; margin-bottom:2px; }
.auth-form { display:flex; flex-direction:column; gap:19px; }
.auth-field { display:flex; flex-direction:column; gap:7px; }
.auth-field label { font-size:13px; font-weight:560; color:var(--foreground); }
.auth-input { position:relative; display:flex; align-items:center; }
.auth-input span { position:absolute; left:13px; color:var(--muted-foreground); pointer-events:none; display:flex; }
.auth-input svg { width:16px; height:16px; }
.auth-input input {
  width:100%; height:40px; padding:0 13px 0 38px; font:inherit; font-size:13.5px; color:var(--foreground);
  background:#1c1c24; border:1px solid #2d2d3c; border-radius:10px;
}
.auth-input input::placeholder { color:var(--muted-foreground); }
.auth-input input:focus { outline:none; border-color:var(--ring); box-shadow:0 0 0 3px rgba(99,102,241,.28); }
.auth-btn {
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:40px;
  border:0; border-radius:10px; cursor:pointer; color:#fff; font:inherit; font-size:13.5px; font-weight:600;
  background:linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 48%, var(--brand-3) 100%);
  box-shadow:0 8px 22px -10px rgba(99,102,241,.8);
}
.auth-btn svg { width:16px; height:16px; }
.auth-btn:hover { filter:brightness(1.08); }
.auth__alt { margin-top:24px; text-align:center; font-size:12.5px; color:var(--muted-foreground); }
@media (max-width:920px) {
  .auth { grid-template-columns:1fr; }
  .auth__aside { display:none; }
  .auth__logo--card { display:inline-flex; }
}
.dash-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:14px; }
.dash-stat { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.dash-stat span { display:block; color:var(--muted); font-size:13px; }
.dash-stat strong { display:block; margin-top:6px; font-size:28px; letter-spacing:-.03em; line-height:1.15; }
.dash-stat em { display:block; margin-top:6px; color:var(--muted); font-style:normal; font-size:12.5px; }
.dash-filter { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin:0 0 14px; }
.dash-filter label { font-size:12px; }
.dash-filter input { min-width:150px; }
.dash-filter a { text-decoration:none; color:var(--ink); border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 12px; font-size:13px; }
.dash-filter a.is-on { background:#1c1915; color:#fff; border-color:#1c1915; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.wave { background:#14141c; color:#e9e9f0; border:1px solid #2a2a36; border-radius:16px; padding:16px 16px 10px; }
.wave__head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.wave__head h2 { margin:0; font-size:16px; font-weight:650; }
.wave__head p { margin:6px 0 0; color:#9b9bab; font-size:12.5px; line-height:1.6; max-width:520px; }
.wave__legend, .donut-legend { display:flex; flex-wrap:wrap; gap:10px 14px; }
.wave__legend span, .donut-legend span { display:inline-flex; align-items:center; gap:6px; color:#c8c8d4; font-size:12.5px; }
.swatch { width:10px; height:10px; border-radius:2px; flex:none; }
.wave__plot { position:relative; height:280px; }
.wave__plot svg { width:100%; height:100%; display:block; }
.wave__tip {
  position:absolute; z-index:2; pointer-events:none; min-width:120px;
  background:#0e0e14; color:#f4f4f8; border:1px solid #343446; border-radius:10px;
  padding:8px 10px; font-size:12px; line-height:1.55; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.wave__tip b { display:block; margin-bottom:2px; font-size:12px; }
.wave--donut { margin-bottom:8px; }
.donut-wrap { display:grid; grid-template-columns:280px 1fr; gap:8px 28px; align-items:center; min-height:280px; }
.donut { position:relative; width:240px; height:240px; margin:10px auto; }
.donut svg { width:100%; height:100%; }
.donut__center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.donut__center strong { font-size:32px; letter-spacing:-.03em; line-height:1; }
.donut__center span { margin-top:4px; color:#9b9bab; font-size:12.5px; }
.donut-legend { flex-direction:column; align-content:center; gap:8px; }
.donut-legend b { font-weight:600; color:#f4f4f8; }
.donut-empty { color:#9b9bab; font-size:13px; padding:28px 8px; }
@media (max-width: 980px) {
  .dash-stats, .dash-grid, .donut-wrap { grid-template-columns:1fr; }
}
.install { width:min(520px, 100%); }
@media (max-width: 800px) {
  .shell { flex-direction:column; }
  .side { width:auto; }
  .side nav { flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .nav-group { min-width:160px; }
  .nav-link { width:auto; }
  .top, .content { padding-left:18px; padding-right:18px; }
  .usermenu__meta { display:none; }
}