/* SPDX-License-Identifier: GPL-3.0-or-later */

/* ---------- Design tokens ---------- */
:root{
  --bg:#eef3f1; --surface:#ffffff; --surface-2:#f7faf9; --surface-3:#f1f6f3;
  --ink:#143229; --muted:#657772; --faint:#93a39d;
  --green:#0f8466; --green-ink:#0b6b53; --green-soft:#e7f4ed; --green-line:#cfe7db;
  --border:#e1eae5; --border-strong:#d3e0da;
  --red:#c14a40; --red-soft:#fcecea; --red-line:#f1d2cd;
  --amber:#9a6a12; --blue:#4c6b9e; --blue-soft:#edf2fd;
  --feature-bg:#143229; --feature-ink:#ffffff; --feature-sub:#a9c6bb;
  --ring:#86cbb5;
  --shadow-sm:0 1px 3px rgba(18,40,32,.07);
  --shadow-md:0 6px 24px rgba(18,40,32,.08);
  --shadow-lg:0 24px 70px rgba(16,40,32,.22);
  --radius:14px; --radius-sm:9px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1412; --surface:#151f1c; --surface-2:#1a2521; --surface-3:#1f2b27;
    --ink:#e7efec; --muted:#9bada6; --faint:#6f817b;
    --green:#3fbd91; --green-ink:#5fcfa6; --green-soft:#153029; --green-line:#214539;
    --border:#263430; --border-strong:#31443e;
    --red:#ef8378; --red-soft:#331f1d; --red-line:#4a2c28;
    --amber:#e0b35e; --blue:#8fb0e6; --blue-soft:#1b2740;
    --feature-bg:#0b6b53; --feature-ink:#ffffff; --feature-sub:#bfe4d6;
    --ring:#3fbd91;
    --shadow-sm:0 1px 3px rgba(0,0,0,.4);
    --shadow-md:0 6px 24px rgba(0,0,0,.4);
    --shadow-lg:0 24px 70px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0d1412; --surface:#151f1c; --surface-2:#1a2521; --surface-3:#1f2b27;
  --ink:#e7efec; --muted:#9bada6; --faint:#6f817b;
  --green:#3fbd91; --green-ink:#5fcfa6; --green-soft:#153029; --green-line:#214539;
  --border:#263430; --border-strong:#31443e;
  --red:#ef8378; --red-soft:#331f1d; --red-line:#4a2c28;
  --amber:#e0b35e; --blue:#8fb0e6; --blue-soft:#1b2740;
  --feature-bg:#0b6b53; --feature-ink:#ffffff; --feature-sub:#bfe4d6;
  --ring:#3fbd91;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 6px 24px rgba(0,0,0,.4);
  --shadow-lg:0 24px 70px rgba(0,0,0,.6);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
button,input,select,textarea{font:inherit;color:var(--ink)}
button{cursor:pointer;border:0;border-radius:var(--radius-sm);padding:11px 16px;transition:background .15s,border-color .15s,color .15s,filter .15s,box-shadow .15s}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[data-filter]:focus-visible,.nav:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
button:not(:disabled):hover{filter:brightness(1.04)}
[hidden]{display:none!important}
h1,h2,h3,p{margin-top:0}
h1{font-size:30px;letter-spacing:-1px;margin-bottom:10px;font-weight:650}
h2{font-size:21px;margin-bottom:15px}
small{font-size:12px}
.subtle,.footnote,.hint{color:var(--muted);line-height:1.7}
.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:700;color:var(--green);margin-bottom:15px}

/* ---------- Buttons ---------- */
.primary{background:var(--green);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(15,132,102,.3)}
.primary:not(:disabled):hover{filter:brightness(1.07)}
.secondary{background:var(--surface);border:1px solid var(--border-strong);color:var(--ink)}
.secondary:not(:disabled):hover{background:var(--surface-3);filter:none}
.quiet{background:transparent;color:var(--muted);padding-left:0}
.quiet:hover{color:var(--ink);filter:none}
.full{width:100%;margin-top:18px}
.primary.danger-btn{background:var(--red);box-shadow:0 1px 2px rgba(193,74,64,.3)}
.icon{background:transparent;font-size:24px;padding:0 5px;color:var(--muted);line-height:1}
.icon:hover{color:var(--ink);filter:none}

/* ---------- Theme toggle ---------- */
.theme-toggle{width:40px;height:40px;padding:0;border-radius:11px;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink);font-size:17px;display:grid;place-items:center}
.theme-toggle:hover{background:var(--surface-3);filter:none}
.theme-toggle::before{content:"☾"}
:root[data-theme="dark"] .theme-toggle::before{content:"☀"}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle::before{content:"☀"}}
.theme-toggle.wide{width:100%;height:auto;padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;gap:8px;margin-bottom:18px;color:var(--muted)}
.theme-toggle.wide::after{content:"深色模式"}
:root[data-theme="dark"] .theme-toggle.wide::after{content:"浅色模式"}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle.wide::after{content:"浅色模式"}}
#theme-toggle-login{position:absolute;top:22px;right:22px}

/* ---------- Form controls ---------- */
label{display:block;margin:18px 0 9px;font-size:13px;font-weight:600}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s,background .25s}
input:focus,select:focus,textarea:focus{border-color:var(--green)}
textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.8}
input::placeholder{color:var(--faint)}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}

/* ---------- Sidebar ---------- */
aside{position:fixed;inset:0 auto 0 0;width:234px;background:var(--surface);border-right:1px solid var(--border);padding:34px 22px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{font-size:18px}
.brand small{display:block;font-weight:400;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:6px}
.brandmark{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:var(--green);color:#fff;font-size:38px;box-shadow:0 8px 22px rgba(15,132,102,.28)}
.brandmark.small{width:42px;height:42px;border-radius:13px;font-size:28px;box-shadow:none}
nav{margin-top:52px;display:grid;gap:8px}
.nav{text-align:left;background:transparent;color:var(--muted);font-size:14px;padding:13px 18px}
.nav:hover{background:var(--surface-3);color:var(--ink);filter:none}
.nav.active{background:var(--green-soft);color:var(--green-ink);font-weight:650}
.aside-bottom{margin-top:auto;font-size:12px;padding:20px 2px 0;border-top:1px solid var(--border);color:var(--muted)}
.aside-bottom p{margin:10px 0}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px}

/* ---------- Main ---------- */
main{margin-left:234px;padding:46px 42px;max-width:1700px}
header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}
.header-actions{display:flex;gap:10px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:25px 0}
.stats article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm)}
.stats article span{color:var(--muted);font-size:12px}
.stats strong{display:block;font-size:34px;font-weight:600;margin:14px 0 8px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stats small{color:var(--faint);font-size:11px}
.stats article.feature{background:var(--feature-bg);color:var(--feature-ink);border-color:var(--feature-bg)}
.stats article.feature span,.stats article.feature small{color:var(--feature-sub)}

/* ---------- Panel ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.toolbar{padding:20px 22px;display:flex;justify-content:space-between;gap:15px;align-items:center;border-bottom:1px solid var(--border)}
.filters{background:var(--surface-3);padding:4px;border-radius:var(--radius-sm);display:flex;gap:2px}
.filters button{padding:8px 13px;background:transparent;color:var(--muted);white-space:nowrap;font-size:12px;border-radius:7px}
.filters button:hover{color:var(--ink);filter:none}
.filters .selected{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:600}
.toolbar input{max-width:260px;padding:10px 12px;font-size:12px}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}
th{font-weight:600;font-size:11px;letter-spacing:.3px;color:var(--muted);background:var(--surface-2);padding:13px 22px;border-bottom:1px solid var(--border)}
td{padding:17px 22px;border-bottom:1px solid var(--border);font-size:12px;line-height:1.7;vertical-align:middle}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.device strong{display:block}
.device small.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2px}
.device small.faint{color:var(--faint)}
td strong{font-weight:600}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-3);padding:3px 6px;border-radius:5px;font-size:12px;color:var(--ink)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:600;background:var(--surface-3);color:var(--muted);border:1px solid var(--border)}
.badge.active{background:var(--green-soft);color:var(--green-ink);border-color:var(--green-line)}
.badge.new{background:var(--blue-soft);color:var(--blue);border-color:transparent}
.badge.ended{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}

/* ---------- Row actions ---------- */
.row-actions{display:flex;gap:7px;align-items:center}
.act-btn{background:transparent;border:1px solid var(--border-strong);color:var(--muted);padding:6px 8px;border-radius:8px;font-size:13px;line-height:1}
.act-btn:hover{background:var(--surface-3);color:var(--ink);filter:none}
.act-btn.danger:hover{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
td select{font-size:12px;width:112px;padding:7px 26px 7px 10px;border-radius:8px}

.panel footer{padding:15px 22px;color:var(--muted);font-size:11px;background:var(--surface-2)}
.hint{font-size:11px;margin-top:17px}
.panel-heading{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.panel-heading h2{margin:0}

/* ---------- Prose ---------- */
.prose{padding:36px;max-width:850px;line-height:1.9;box-shadow:var(--shadow-sm)}
.prose h3{margin-top:30px}
.prose ol{padding-left:22px}
.prose li{padding-bottom:14px;color:var(--muted)}

/* ---------- Empty ---------- */
.empty{text-align:center;padding:65px 20px;color:var(--muted)}
.empty span{display:block;font-size:42px;color:var(--green);opacity:.55;margin-bottom:14px}
.empty h3{font-weight:600;font-size:16px;color:var(--ink)}
.empty p{font-size:12px}

/* ---------- Login ---------- */
.login{position:relative;max-width:420px;margin:11vh auto;padding:25px}
.login .brandmark{margin-bottom:36px}
.login h1{font-size:31px}
.login form{margin:32px 0}
.login .primary{width:100%;margin-top:22px;display:flex;justify-content:space-between;align-items:center}
.footnote{font-size:11px;border-top:1px solid var(--border);padding-top:20px}
.error{color:var(--red);font-size:12px;margin-top:15px;min-height:20px}

/* ---------- Dialogs ---------- */
dialog{border:1px solid var(--border);border-radius:18px;width:min(520px,94vw);padding:30px;color:var(--ink);background:var(--surface);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(10,24,19,.5);backdrop-filter:blur(4px)}
.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.dialog-heading .eyebrow{margin-bottom:8px}
.dialog-heading h2{margin-bottom:0}
.dialog-actions{display:flex;gap:10px;margin-top:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.callout{background:var(--green-soft);color:var(--green-ink);font-size:12px;line-height:1.6;padding:14px;border-radius:var(--radius-sm);margin-top:22px;border:1px solid var(--green-line)}
.callout.warn{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}

/* ---------- Toast ---------- */
#toast{position:fixed;right:24px;top:20px;z-index:50;background:var(--ink);color:var(--bg);border-radius:11px;padding:15px 22px;max-width:90vw;box-shadow:var(--shadow-md);font-size:13px;font-weight:500}
.error-toast{background:var(--red)!important;color:#fff!important}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  aside{width:196px;padding:25px 15px}
  main{margin-left:196px;padding:30px 22px}
  .stats{gap:10px}
  .stats article{padding:18px}
  .toolbar{flex-wrap:wrap}
  .toolbar input{max-width:none}
  td,th{padding-left:16px;padding-right:16px}
}
@media(max-width:720px){
  aside{position:static;width:auto;border-right:0;border-bottom:1px solid var(--border);padding:16px 20px}
  .brand strong{font-size:16px}
  nav{margin-top:16px;display:flex;gap:6px}
  .nav{font-size:12px;flex:1;padding:10px;text-align:center}
  .aside-bottom{display:none}
  main{margin:0;padding:22px 16px}
  header{align-items:flex-start;flex-direction:column}
  h1{font-size:25px}
  .header-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats strong{font-size:29px}
  .toolbar{padding:14px}
  .filters{width:100%;justify-content:space-between}
  .filters button{padding:8px;flex:1}
  .login{margin-top:7vh}
  .prose{padding:24px}
  .form-grid{gap:8px}
  .panel-heading{padding:18px 20px}
}

#mobile-logout,#theme-toggle-mobile,.mobile-table-hint{display:none}
@media(max-width:720px){
  #mobile-logout,#theme-toggle-mobile{display:grid}
  #mobile-logout{display:block}
  .mobile-table-hint{display:block;margin:0;padding:0 16px 14px;font-size:11px;color:var(--muted)}
}