:root{
  --bg:#07131e;
  --bg2:#0c1c2b;
  --panel:#0d1f31;
  --panel2:#12283d;
  --line:rgba(132,191,255,.14);
  --text:#eaf4ff;
  --muted:#91a8c0;
  --teal:#57e2c1;
  --cyan:#58b2ff;
  --amber:#f2a75a;
  --rose:#ff8e8e;
  --shadow:0 18px 40px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
   radial-gradient(circle at 15% 12%, rgba(88,178,255,.10), transparent 18%),
   radial-gradient(circle at 86% 24%, rgba(87,226,193,.08), transparent 18%),
   linear-gradient(180deg,#07131e,#081827 34%,#0b1825 100%);
  min-height:100vh;
}
body:before{
 content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;
 background-image:
  linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
 background-size:32px 32px;
 mask-image:radial-gradient(circle at 40% 30%, black, transparent 82%);
}
a{color:inherit;text-decoration:none}
.shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.side{
  position:sticky;top:0;height:100vh;padding:26px 22px;border-right:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(6,14,22,.95),rgba(8,18,29,.88));backdrop-filter:blur(16px);
}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.mark{width:48px;height:48px;border-radius:16px;background:conic-gradient(from 220deg,var(--teal),var(--cyan),var(--amber),var(--teal));position:relative;box-shadow:0 12px 28px rgba(0,0,0,.25)}
.mark:after{content:"";position:absolute;inset:10px;border-radius:12px;background:#08131f;border:1px solid rgba(255,255,255,.25)}
.brand h1{margin:0;font-size:18px}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.5}
.menu{display:grid;gap:10px;margin:22px 0 28px}
.menu a,.mini-links a{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.menu a:hover,.mini-links a:hover{background:rgba(255,255,255,.06)}
.menu a.active{background:linear-gradient(90deg,rgba(88,178,255,.16),rgba(87,226,193,.10));border-color:rgba(88,178,255,.28)}
.tagbox,.footbox,.data-pill,.mini-card,.feature-line,.tool-mini,.work-card,.info-card,.article,.data-row,.note-card,.tool-frame,.summary-card,.legal-card,.flow-strip{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.tagbox{padding:18px;border-radius:18px}
.tagbox h3{margin:0 0 8px;font-size:15px}
.tagbox p,.footbox p,.info-card p,.article p,.mini-card p,.feature-line p,.work-card p,.note-card p,.legal-card p,.summary-card p{margin:0;color:var(--muted);line-height:1.75}
.footbox{position:absolute;left:22px;right:22px;bottom:20px;padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02))}
.footbox strong{display:block;margin-bottom:8px}
.content{padding:24px 26px 34px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.crumbs{display:flex;gap:12px;color:var(--muted);font-size:14px}
.search{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:999px;min-width:300px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text)}
.hero{display:grid;grid-template-columns:1.25fr .92fr;gap:18px;margin-bottom:18px}
.hero-main{padding:28px;border-radius:30px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(87,226,193,.08),rgba(88,178,255,.08) 30%,rgba(242,167,90,.05));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.hero-main:before{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(circle at 14% 16%, rgba(87,226,193,.20), transparent 18%),
 linear-gradient(160deg, transparent 0 34%, rgba(255,255,255,.04) 34% 35%, transparent 35% 100%),
 linear-gradient(0deg, transparent 0 68%, rgba(255,255,255,.04) 68% 69%, transparent 69% 100%);
 opacity:.85}
.kicker{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);font-size:12px;color:#c8def3;letter-spacing:.12em}
.hero h2{font-size:clamp(36px,5vw,72px);line-height:1.02;letter-spacing:-.04em;margin:18px 0 16px;max-width:760px}
.hero h2 span{color:var(--amber)}
.hero .lede{max-width:760px;font-size:18px;color:#d6e3ef;line-height:1.8}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:16px;font-weight:700;border:1px solid rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(90deg,var(--cyan),var(--teal));color:#082032;border:none}
.btn.soft{background:rgba(255,255,255,.04)}
.data-pills{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.data-pill{border-radius:18px;padding:16px 18px;min-width:140px}
.data-pill strong{display:block;font-size:26px;margin-bottom:4px}
.data-pill span{font-size:13px;color:var(--muted)}
.hero-side{display:grid;grid-template-rows:auto auto 1fr;gap:18px}
.mini-card{padding:18px;border-radius:24px}
.mini-card h3{margin:0 0 10px;font-size:20px}
.mapgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tool-mini{padding:16px;border-radius:18px}
.tool-mini h4{margin:0 0 8px;font-size:16px}
.tool-mini p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.flow{margin:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.flow-strip{padding:22px;border-radius:26px}
.flow-strip h3,.work-card h3,.info-card h3,.article h3,.note-card h3,.tool-frame h3,.summary-card h3,.legal-card h3{margin:0 0 10px;font-size:24px}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work-card,.article,.info-card,.note-card,.tool-frame,.summary-card,.legal-card{padding:22px;border-radius:24px}
.feature-line{padding:16px 18px;border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.feature-line strong{font-size:16px}
.feature-stack{display:grid;gap:12px}
.input,select,textarea{width:100%;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--text);outline:none}
textarea{min-height:130px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.output{padding:16px;border-radius:16px;background:rgba(0,0,0,.2);border:1px dashed rgba(255,255,255,.12);white-space:pre-wrap;color:#d8e7f5;line-height:1.75;min-height:72px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.table th{color:#c8def3;font-weight:700;font-size:14px}
.table td{color:#dfe9f5}
.footer{margin-top:18px;padding-top:8px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer a{color:#d9f1ff}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mobile-toggle{display:none}
@media (max-width:1200px){
  .hero,.flow,.row,.note-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:relative;height:auto;padding-bottom:90px}
  .footbox{position:static;margin-top:18px}
  .content{padding:18px}
  .search{min-width:0;width:100%}
  .topbar{flex-direction:column;align-items:flex-start}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .row{grid-template-columns:1fr}
  .data-pills{display:grid;grid-template-columns:1fr 1fr}
  .hero-main,.mini-card,.work-card,.article,.info-card,.note-card,.tool-frame,.summary-card,.legal-card,.flow-strip{padding:18px;border-radius:20px}
  .hero h2{font-size:40px}
}