/* Nova · AI 工作台 — self-contained theme (no external fonts/CDN). */
:root{
  --bg-0:#05060a; --bg-1:#0a0e17; --bg-2:#111726;
  --panel:rgba(18,24,38,.68); --panel-brd:rgba(120,160,255,.14); --stroke:rgba(255,255,255,.08);
  --text-0:#eaf0ff; --text-1:#9fb0d0; --text-2:#63769a;
  --accent:#38e1ff; --accent-2:#a06bff; --accent-3:#ff5db1;
  --ok:#37f0a8; --warn:#ffcb5e; --danger:#ff5a6a;
  --grad-brand:linear-gradient(120deg,#38e1ff 0%,#a06bff 55%,#ff5db1 100%);
  --glow:0 0 24px rgba(56,225,255,.35);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --pill:999px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg-0:#eef2fb; --bg-1:#f5f8ff; --bg-2:#ffffff;
  --panel:rgba(255,255,255,.78); --panel-brd:rgba(70,110,200,.18); --stroke:rgba(10,20,40,.08);
  --text-0:#0b1020; --text-1:#41506e; --text-2:#7688a8;
  --glow:0 0 20px rgba(56,150,255,.22);
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg-0:#eef2fb; --bg-1:#f5f8ff; --bg-2:#ffffff;
    --panel:rgba(255,255,255,.78); --panel-brd:rgba(70,110,200,.18); --stroke:rgba(10,20,40,.08);
    --text-0:#0b1020; --text-1:#41506e; --text-2:#7688a8; color-scheme:light;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:var(--bg-1); color:var(--text-0); line-height:1.6; font-size:15px;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Consolas,"Noto Sans Mono",monospace; font-variant-numeric:tabular-nums}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:none}
h1,h2,h3{line-height:1.2; margin:.2em 0 .5em}
h1{font-size:1.7rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px; width:100%}
.muted{color:var(--text-1)} .small{font-size:.82rem} .center{text-align:center}

/* background decor */
.bg-decor{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(60vw 40vw at 12% -8%, rgba(56,225,255,.14), transparent 60%),
    radial-gradient(50vw 40vw at 100% 8%, rgba(160,107,255,.15), transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
}
.bg-decor::after{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--stroke) 1px,transparent 1px),linear-gradient(90deg,var(--stroke) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(circle at 50% 0%,#000,transparent 78%);
}

/* topbar */
.topbar{position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg-1) 72%,transparent); border-bottom:1px solid var(--stroke)}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:60px; gap:14px}
.brand{display:flex; align-items:baseline; gap:8px; color:var(--text-0); font-weight:700}
.brand-mark{color:var(--accent); font-size:1.2rem; text-shadow:var(--glow)}
.brand-name{font-size:1.15rem; letter-spacing:.5px; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-sub{font-size:.72rem; color:var(--text-2); letter-spacing:2px}
.topnav{display:flex; align-items:center; gap:16px}
.topnav a{color:var(--text-1); font-size:.92rem}
.topnav a:hover,.topnav a.active{color:var(--text-0)}
.theme-toggle{background:none; border:1px solid var(--stroke); color:var(--text-1); width:34px; height:34px; border-radius:var(--pill); cursor:pointer; font-size:1rem}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent)}
.usermenu{display:flex; align-items:center; gap:8px}
.usermenu-name{font-size:.88rem; color:var(--text-1)}
.inline{display:inline}

/* sections & glass */
.section{margin:34px 0}
.section.narrow{max-width:760px; margin-left:auto; margin-right:auto}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px}
.section-head h2{margin:0; position:relative; padding-left:14px}
.section-head h2::before{content:""; position:absolute; left:0; top:.1em; bottom:.1em; width:4px; border-radius:4px; background:var(--grad-brand)}
.more{color:var(--text-1); font-size:.86rem}
.glass{background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--r-lg); box-shadow:var(--shadow); backdrop-filter:blur(14px)}
.pad{padding:22px}
.glass.pad+.glass.pad{margin-top:18px}

/* hero */
.hero{margin:26px 0; padding:40px; display:grid; grid-template-columns:1.4fr .8fr; gap:20px; align-items:center; overflow:hidden; position:relative}
.hero-title{font-size:2.4rem; margin:0 0 8px}
.grad-text{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{color:var(--text-1); margin:0 0 22px; font-size:1.02rem}
.searchbar{display:flex; gap:8px; background:var(--bg-2); border:1px solid var(--panel-brd); border-radius:var(--pill); padding:6px; box-shadow:var(--glow)}
.searchbar select{background:transparent; border:none; color:var(--text-1); padding:0 8px; border-right:1px solid var(--stroke); outline:none; font-size:.9rem}
.searchbar input{flex:1; background:transparent; border:none; color:var(--text-0); outline:none; font-size:1rem; padding:8px}
.hero-orb{position:relative; height:180px}
.hero-orb span{position:absolute; border-radius:50%; filter:blur(2px); opacity:.85; animation:float 7s var(--ease) infinite alternate}
.hero-orb span:nth-child(1){width:120px;height:120px; right:30px; top:20px; background:radial-gradient(circle at 30% 30%,#38e1ff,transparent 70%)}
.hero-orb span:nth-child(2){width:90px;height:90px; right:110px; top:70px; background:radial-gradient(circle at 30% 30%,#a06bff,transparent 70%); animation-delay:1s}
.hero-orb span:nth-child(3){width:60px;height:60px; right:20px; top:110px; background:radial-gradient(circle at 30% 30%,#ff5db1,transparent 70%); animation-delay:2s}
@keyframes float{to{transform:translateY(-16px)}}
@media (prefers-reduced-motion: reduce){.hero-orb span{animation:none}}

/* news */
.news-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.news-card{padding:16px; display:block; color:var(--text-0); transition:transform .18s var(--ease),border-color .18s}
.news-card:hover{transform:translateY(-3px); border-color:var(--accent)}
.news-card h3{margin:8px 0 6px; font-size:.98rem}
.news-meta{display:flex; justify-content:space-between; align-items:center; font-size:.75rem}
.pill{display:inline-block; padding:2px 9px; border-radius:var(--pill); background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-size:.72rem; border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.news-list{display:flex; flex-direction:column; gap:12px}
.news-row{display:flex; justify-content:space-between; gap:16px; padding:16px; color:var(--text-0)}
.news-row:hover{border-color:var(--accent-2)}
.news-row-main h3{margin:0 0 4px}
.news-row-meta{display:flex; flex-direction:column; align-items:flex-end; gap:6px; white-space:nowrap; font-size:.78rem}

/* nav */
.cat-anchors{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.anchor-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--pill); background:var(--panel); border:1px solid var(--panel-brd); color:var(--text-1); font-size:.82rem}
.anchor-pill:hover{color:var(--accent); border-color:var(--accent)}
.anchor-pill .ic{width:15px;height:15px}
.nav-cat{margin:22px 0; scroll-margin-top:78px}
.cat-title{display:flex; align-items:center; gap:8px; font-size:1.08rem; margin-bottom:12px}
.cat-title .ic{width:20px;height:20px; color:var(--accent)}
.link-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.link-card{display:flex; align-items:center; gap:12px; padding:12px 14px; color:var(--text-0); transition:transform .16s var(--ease),border-color .16s,box-shadow .16s}
.link-card:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--glow)}
.monogram{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-weight:700; font-size:1.05rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent-2) 30%,transparent)); color:var(--text-0)}
.link-text{display:flex; flex-direction:column; min-width:0}
.link-name{font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.link-desc{font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.badge{font-size:.62rem; padding:1px 6px; border-radius:var(--pill); background:var(--accent-3); color:#fff; vertical-align:middle}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid transparent; border-radius:var(--r-sm); padding:9px 16px; font-size:.9rem; cursor:pointer; font-family:inherit; transition:filter .15s,transform .1s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad-brand); color:#05060a; font-weight:600; box-shadow:var(--glow)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent; border-color:var(--panel-brd); color:var(--text-0)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-danger{background:transparent; border-color:color-mix(in srgb,var(--danger) 55%,transparent); color:var(--danger)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 14%,transparent)}
.btn-sm{padding:6px 11px; font-size:.82rem}
.btn-block{width:100%}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* forms */
.stack{display:flex; flex-direction:column; gap:14px}
.stack label,.grid-form label{display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--text-1)}
input,select,textarea{font-family:inherit; font-size:.92rem; color:var(--text-0); background:var(--bg-2); border:1px solid var(--panel-brd); border-radius:var(--r-sm); padding:10px 12px; outline:none; width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
input[readonly]{color:var(--text-1)}
.check{flex-direction:row!important; align-items:center; gap:8px}
.check input{width:auto}
.grid-form{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-form button{grid-column:1/-1; justify-self:start}
.grid-form .wide{grid-column:1/-1}
.filter-bar{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap}
.summary-btn{cursor:pointer; font-weight:600; color:var(--accent)}
.mt{margin-top:14px}

/* auth */
.auth-card{max-width:400px; margin:40px auto; text-align:left}
.auth-brand{font-size:1.2rem; font-weight:700; margin-bottom:6px}
.auth-brand .brand-mark{color:var(--accent)}
.center-card{max-width:460px; margin:40px auto}
.err-status{font-size:3rem; font-weight:800; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}

/* alerts */
.alert{padding:12px 14px; border-radius:var(--r-sm); margin:12px 0; font-size:.9rem; border:1px solid}
.alert-error{background:color-mix(in srgb,var(--danger) 12%,transparent); border-color:color-mix(in srgb,var(--danger) 40%,transparent); color:var(--danger)}
.alert-ok{background:color-mix(in srgb,var(--ok) 12%,transparent); border-color:color-mix(in srgb,var(--ok) 40%,transparent); color:var(--ok)}
.alert-info{background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:color-mix(in srgb,var(--accent) 34%,transparent); color:var(--accent)}

/* app shell */
.app-shell{display:grid; grid-template-columns:210px 1fr; gap:20px; margin:26px 0}
.sidebar{padding:14px; height:max-content; position:sticky; top:78px}
.sidebar nav{display:flex; flex-direction:column; gap:4px}
.sidebar a{color:var(--text-1); padding:9px 12px; border-radius:var(--r-sm); font-size:.9rem}
.sidebar a:hover{background:var(--bg-2); color:var(--text-0)}
.sidebar a.active{background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent)}
.sidebar a.hl{color:var(--accent-2); margin-top:8px; border-top:1px solid var(--stroke); border-radius:0; padding-top:12px}
.app-main{min-width:0}
.crumb{margin-bottom:6px; font-size:.85rem}

/* stat cards */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px}
.stat-card{padding:18px}
.stat-label{font-size:.8rem; color:var(--text-1)}
.stat-num{font-size:1.4rem; font-weight:700; margin:6px 0; font-variant-numeric:tabular-nums}
.usagebar{height:8px; border-radius:var(--pill); background:var(--bg-2); overflow:hidden; margin:8px 0}
.usagebar span{display:block; height:100%; background:var(--grad-brand); border-radius:var(--pill); transition:width .4s var(--ease)}
.usagebar span.warn{background:linear-gradient(90deg,var(--accent),var(--warn))}
.usagebar span.over{background:linear-gradient(90deg,var(--warn),var(--danger))}

/* tables */
.table{width:100%; border-collapse:collapse; font-size:.88rem}
.table th{text-align:left; color:var(--text-2); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--stroke); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px}
.table td{padding:9px 10px; border-bottom:1px solid var(--stroke); vertical-align:middle}
.table tr:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.row-bad td{color:var(--danger)}
.pill-active{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 34%,transparent)}
.pill-suspended,.pill-revoked{background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 34%,transparent)}

/* misc */
.copyfield{display:flex; gap:8px; align-items:center}
.copyfield input{flex:1}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0}
.action-grid{display:flex; flex-wrap:wrap; gap:8px}
.action-grid form{display:inline}
.narrow-card{max-width:520px}
.sub-layout{display:grid; grid-template-columns:1fr 280px; gap:18px}
.qr-card{text-align:center}
.qr-card img{border-radius:var(--r-md); background:#fff; padding:8px}
.format-list{display:flex; flex-direction:column; gap:8px; margin:8px 0}
.format-row{display:flex; align-items:center; gap:8px}
.format-name{flex:none; width:170px; font-size:.85rem; color:var(--text-1)}
.node-info{display:flex; align-items:center; gap:10px; margin-top:14px}
.diff{list-style:none; padding:0; font-family:ui-monospace,monospace; font-size:.9rem}
.diff li{padding:3px 0}
.diff-add{color:var(--ok)} .diff-chg{color:var(--warn)} .diff-del{color:var(--danger)}
.chip-list{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--pill); background:var(--bg-2); border:1px solid var(--panel-brd); font-size:.82rem}
.chip-off{opacity:.5}
.chip-x{background:none; border:none; color:var(--text-2); cursor:pointer; font-size:1rem; line-height:1; padding:0}
.chip-x:hover{color:var(--danger)}
.bullet{color:var(--text-1); padding-left:20px} .bullet li{margin:6px 0}
.clamp-1{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.clamp-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ic{display:inline-block; vertical-align:middle}
code{font-family:ui-monospace,monospace; background:var(--bg-2); padding:1px 6px; border-radius:5px; font-size:.85em}

/* footer */
.site-footer{border-top:1px solid var(--stroke); margin-top:50px; padding:22px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--text-1); font-size:.85rem; flex-wrap:wrap}
.footer-nav{display:flex; gap:16px}
.footer-nav a{color:var(--text-1)}
.footer-nav a:hover{color:var(--accent)}

/* responsive */
@media (max-width:1000px){
  .news-grid,.link-grid{grid-template-columns:repeat(2,1fr)}
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:static}
  .sidebar nav{flex-direction:row; flex-wrap:wrap}
  .two-col,.sub-layout{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .grid-form{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr} .hero-orb{display:none}
}
@media (max-width:600px){
  .news-grid{grid-template-columns:1fr}
  .brand-sub{display:none}
  .topnav{gap:10px} .topnav a{font-size:.85rem}
  .hero{padding:24px} .hero-title{font-size:1.8rem}
  .grid-form{grid-template-columns:1fr}
  .format-name{width:120px}
}