/* ==========================================================================
   识星 · 星空学习台  —  深空玻璃风格（纯离线，无外部字体/图片）
   ========================================================================== */

:root{
  /* 底色与层次 */
  --bg:#05070d;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --panel:rgba(9,13,22,.74);
  --panel-solid:rgba(11,15,25,.94);
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  /* 文字 */
  --text:#e9edfa;
  --text-2:#a4aec8;
  --dim:#6d789a;
  /* 强调色 */
  --accent:#5b8cff;
  --accent-2:#7ee0ff;
  --gold:#ffcc66;
  --ok:#54d6a0;
  --bad:#ff7a86;
  /* 形状 */
  --r-sm:8px; --r:11px; --r-lg:16px;
  --sh:0 10px 34px rgba(0,0,0,.5);
  --blur:saturate(1.25) blur(16px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  font-size:13.5px; line-height:1.6; color:var(--text);
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(46,74,150,.34) 0%, transparent 62%),
    radial-gradient(900px 560px at 102% -4%, rgba(86,44,150,.26) 0%, transparent 58%),
    radial-gradient(700px 700px at 82% 108%, rgba(16,86,120,.20) 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(91,140,255,.36)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border:3px solid transparent;background-clip:content-box;border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:content-box}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
:focus-visible{outline:2px solid rgba(120,160,255,.75);outline-offset:2px}
.hidden{display:none !important}
svg{width:16px;height:16px;display:block;flex:none}

/* ============================ 顶栏 ============================ */
header{
  height:54px; display:flex; align-items:center; gap:18px; padding:0 16px;
  border-bottom:1px solid var(--line);
  background:rgba(6,9,16,.72); backdrop-filter:var(--blur);
  position:relative; z-index:20;
}
.brand{display:flex; align-items:center; gap:9px; min-width:132px}
.brand .mark{width:22px;height:22px;color:var(--accent-2);filter:drop-shadow(0 0 7px rgba(126,224,255,.5))}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-size:15px;font-weight:650;letter-spacing:.18em}
.brand-txt span{font-size:8.5px;letter-spacing:.22em;color:var(--dim)}

#tabs{
  display:inline-flex; gap:2px; padding:3px;
  background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:999px;
}
#tabs button{
  appearance:none; border:0; background:transparent; color:var(--text-2);
  font:inherit; font-size:12.5px; padding:6px 17px; border-radius:999px; cursor:pointer;
  transition:color .16s, background .16s;
}
#tabs button:hover{color:var(--text); background:rgba(255,255,255,.05)}
#tabs button.on{
  color:#fff; background:linear-gradient(180deg, rgba(91,140,255,.42), rgba(91,140,255,.22));
  box-shadow:inset 0 0 0 1px rgba(130,168,255,.5), 0 2px 10px rgba(50,90,220,.25);
}
#hstat{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:11.5px; color:var(--dim); white-space:nowrap}
#hstat b{color:var(--text-2); font-weight:500}
#hstat .sep{width:1px;height:12px;background:var(--line-2)}

/* ============================ 主体 / 页签 ============================ */
main{position:relative; height:calc(100% - 54px)}
.tab{position:absolute; inset:0; display:none; flex-direction:column; min-height:0}
.tab.on{display:flex}

/* ============================ 工具条 ============================ */
#toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 4px;
  padding:9px 14px; border-bottom:1px solid var(--line);
  background:rgba(8,11,19,.55); backdrop-filter:var(--blur);
}
.tgroup{display:flex; align-items:center; gap:6px; min-height:28px}
#toolbar .tgroup + .tgroup{padding-left:12px; border-left:1px solid var(--line)}
.tg-ico{display:grid; place-items:center; color:var(--dim); margin-right:2px}
.tg-ico svg{width:14px;height:14px}

select,input[type=number],input[type=datetime-local],input[type=text]{
  appearance:none; font:inherit; font-size:12.5px; color:var(--text);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:9px; padding:5px 9px; min-width:0; transition:border-color .15s, background .15s;
}
select{
  padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93b8' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 7px center; background-size:12px;
}
select:hover,input:hover{background-color:rgba(255,255,255,.075)}
select:focus,input:focus{outline:none; border-color:rgba(120,160,255,.6); background-color:rgba(91,140,255,.10)}
#city{max-width:132px}
#lat{width:74px} #lon{width:78px} #dt{width:184px} #speed{min-width:88px}
select option{background:#111726; color:var(--text)}

/* chip 开关 */
.ck{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:12px; color:var(--text-2);
  padding:4px 11px; border-radius:999px; border:1px solid transparent;
  transition:color .15s, background .15s, border-color .15s;
}
.ck:hover{color:var(--text); background:rgba(255,255,255,.05)}
.ck input{position:absolute;opacity:0;width:0;height:0;margin:0}
.ck::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.35; transition:opacity .15s, box-shadow .15s;
}
.ck:has(input:checked){
  color:#eaf0ff; background:rgba(91,140,255,.16); border-color:rgba(120,160,255,.4);
}
.ck:has(input:checked)::before{opacity:1; background:var(--accent-2); box-shadow:0 0 7px rgba(126,224,255,.8)}

.iconbtn{
  display:grid; place-items:center; width:28px; height:28px; padding:0;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:9px;
  color:var(--text-2); cursor:pointer; transition:.15s;
}
.iconbtn:hover{color:#fff; background:rgba(91,140,255,.2); border-color:rgba(120,160,255,.45)}
.iconbtn svg{width:13px;height:13px}

/* ============================ 星图 ============================ */
#chartwrap{position:relative; flex:1; min-height:0; overflow:hidden; background:#04060b}
#sky{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none}
#sky:active{cursor:grabbing}

#tooltip{
  position:absolute; display:none; pointer-events:none; z-index:8;
  padding:4px 9px; font-size:12px; white-space:nowrap;
  background:var(--panel-solid); border:1px solid var(--line-2); border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}

#zoomdock{
  position:absolute; right:14px; bottom:14px; z-index:7;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:13px; box-shadow:var(--sh);
}
#zoomdock button{
  width:40px; height:36px; display:grid; place-items:center;
  background:transparent; border:0; border-top:1px solid var(--line);
  color:var(--text-2); cursor:pointer; transition:.14s;
}
#zoomdock button:first-child{border-top:0}
#zoomdock button:hover{color:#fff; background:rgba(91,140,255,.2)}
#zoomdock svg{width:15px;height:15px}

#legend{
  position:absolute; left:14px; bottom:14px; z-index:7;
  max-width:min(660px, calc(100% - 84px));
  padding:9px 13px 10px; font-size:11.5px; line-height:1.75; color:var(--text-2);
  background:var(--panel); backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh);
}
#legend .lg-hd{
  display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:11px; letter-spacing:.06em; color:var(--dim); margin-bottom:5px;
}
#legend .lg-hd:hover{color:var(--text-2)}
#legend .lg-hd svg{width:12px;height:12px;transition:transform .18s}
#legend.collapsed .lg-hd{margin-bottom:0}
#legend.collapsed .lg-hd svg{transform:rotate(-90deg)}
#legend.collapsed .lg-body{display:none}
#legend b{color:#c3cbe6; font-weight:500}
#legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin:0 4px 0 9px;vertical-align:middle}
#legend i:first-child{margin-left:0}
#legend .hintline{
  margin-top:7px; padding-top:7px; border-top:1px solid var(--line);
  color:var(--dim); font-size:11px; line-height:1.7;
}

#viewhud{
  position:absolute; left:14px; top:14px; z-index:7;
  display:flex; align-items:center; gap:2px;
  padding:6px 12px; font-size:11.5px; color:var(--text-2);
  background:var(--panel); backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--sh);
  pointer-events:none; font-variant-numeric:tabular-nums;
}
#viewhud b{color:#dbe3ff; font-weight:600}
#viewhud .sep{display:inline-block; width:1px; height:10px; margin:0 8px; background:var(--line-2)}

#toast{
  position:absolute; left:50%; top:16px; transform:translateX(-50%); z-index:9;
  display:none; max-width:min(560px, calc(100% - 40px));
  padding:8px 18px; font-size:12.5px; text-align:center;
  background:rgba(9,13,22,.9); backdrop-filter:var(--blur);
  border:1px solid var(--line-2); border-radius:999px; box-shadow:var(--sh);
  animation:toastIn .22s ease-out;
}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,-8px)}to{opacity:1; transform:translate(-50%,0)}}

/* 信息面板 */
#infopanel{
  position:absolute; top:14px; right:14px; bottom:14px; width:352px; z-index:10;
  padding:20px 20px 22px; overflow-y:auto;
  background:var(--panel); backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh);
  animation:panelIn .2s ease-out;
}
@keyframes panelIn{from{opacity:0; transform:translateX(10px)}to{opacity:1; transform:none}}
#closeinfo{
  position:absolute; top:12px; right:12px; width:28px; height:28px;
  display:grid; place-items:center; padding:0;
  background:transparent; border:0; border-radius:8px; color:var(--dim); cursor:pointer;
}
#closeinfo:hover{color:#fff; background:rgba(255,255,255,.08)}
#closeinfo svg{width:14px;height:14px}
#infocontent h3{margin:0 44px 3px 0; font-size:17.5px; font-weight:650; letter-spacing:.01em}
#infocontent .sub{color:var(--text-2); font-size:11.5px; margin-bottom:12px}
#infocontent .badge{display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:600; margin-bottom:6px}
#infocontent table{width:100%; border-collapse:collapse; font-size:12.5px; margin:10px 0 4px}
#infocontent tr{border-bottom:1px solid rgba(255,255,255,.055)}
#infocontent tr:last-child{border-bottom:0}
#infocontent td{padding:7px 0; vertical-align:top}
#infocontent td:first-child{color:var(--dim); width:80px; padding-right:10px}
#infocontent td:last-child{text-align:right; color:var(--text)}
#infocontent .tip{color:var(--dim); font-size:11.5px; margin:12px 0 4px}

.note{
  margin:12px 0; padding:9px 13px;
  font-size:12.5px; line-height:1.75; color:#e4dcc2;
  background:rgba(255,204,102,.075);
  border-left:2px solid rgba(255,204,102,.5); border-radius:0 9px 9px 0;
}
.btnrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:15px}
.btnrow button{
  flex:1 1 auto; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  padding:9px 12px; border:0; border-radius:10px; color:#fff;
  background:linear-gradient(180deg,#6086ff,#4a6ee0);
  box-shadow:0 4px 14px rgba(70,110,220,.3); transition:filter .15s, transform .15s;
}
.btnrow button:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btnrow button + button{
  background:rgba(255,255,255,.06); color:var(--text); box-shadow:none;
  border:1px solid var(--line);
}

/* ============================ 图鉴 ============================ */
.subtabs,.quiz-modes{
  display:inline-flex; gap:2px; padding:3px; margin:13px 14px 0; align-self:flex-start;
  background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:999px;
}
.subtabs button,.quiz-modes button{
  appearance:none; border:0; background:transparent; color:var(--text-2);
  font:inherit; font-size:12.5px; padding:5px 16px; border-radius:999px; cursor:pointer;
  transition:color .16s, background .16s; white-space:nowrap;
}
.subtabs button:hover,.quiz-modes button:hover{color:var(--text); background:rgba(255,255,255,.05)}
.subtabs button.on,.quiz-modes button.on{
  color:#fff; background:linear-gradient(180deg, rgba(91,140,255,.42), rgba(91,140,255,.22));
  box-shadow:inset 0 0 0 1px rgba(130,168,255,.5);
}

.atlas-body{
  flex:1; min-height:0; display:grid; grid-template-columns:336px minmax(0,1fr);
  gap:13px; padding:13px 14px 14px;
}
#atlas-list{
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
#atlas-list .search{
  margin:11px 11px 7px; padding:8px 12px 8px 32px; font-size:12.5px;
  background-color:rgba(255,255,255,.04);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d789a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m15.6 15.6 4 4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:11px center; background-size:14px;
  border-radius:10px;
}
.atlas-count{padding:0 14px 7px; font-size:11px; color:var(--dim); letter-spacing:.03em}
#rows{flex:1; min-height:0; overflow-y:auto; padding:0 7px 9px}
.row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 10px;
  padding:8px 11px; border-radius:11px; cursor:pointer;
  border:1px solid transparent; transition:background .14s, border-color .14s;
}
.row:hover{background:rgba(255,255,255,.05)}
.row.sel{background:rgba(91,140,255,.14); border-color:rgba(120,160,255,.34)}
.row .r1{font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .r2{font-size:11px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .rm{
  grid-row:1 / span 2; grid-column:2; align-self:center;
  font-size:11.5px; color:var(--gold); font-variant-numeric:tabular-nums; opacity:.85;
}
.empty{padding:34px 22px; color:var(--dim); font-size:12.5px; text-align:center; line-height:1.9}

#atlas-detail{
  min-height:0; overflow-y:auto; padding:22px 24px 26px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
#atlas-detail h3{margin:0 0 3px; font-size:19px; font-weight:650}
#atlas-detail .sub{color:var(--text-2); font-size:11.5px; margin-bottom:14px}
#atlas-detail table{width:100%; border-collapse:collapse; font-size:12.5px; margin:8px 0}
#atlas-detail tr{border-bottom:1px solid rgba(255,255,255,.055)}
#atlas-detail tr:last-child{border-bottom:0}
#atlas-detail td{padding:8px 0; vertical-align:top}
#atlas-detail td:first-child{color:var(--dim); width:88px; padding-right:12px}
#atlas-detail td:last-child{text-align:right}
#atlas-detail .tip{color:var(--dim); font-size:11.5px; margin:13px 0 5px}
#atlas-detail .badge{display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:600}
#atlas-detail .btnrow{max-width:340px}
#concanvas{
  display:block; width:100%; max-width:430px; height:auto; margin:2px 0 16px;
  background:radial-gradient(circle at 50% 45%, rgba(91,140,255,.07), rgba(255,255,255,.015) 70%);
  border:1px solid var(--line); border-radius:13px;
}

/* 深空天体照片 */
.photo{margin:0 0 16px; background:#05070d; border:1px solid var(--line); border-radius:13px; overflow:hidden}
.photo .photo-open{display:block; line-height:0; background:#05070d}
.photo picture{display:block}
.photo img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in; transition:filter .18s}
.photo img:hover{filter:brightness(1.08)}
.photo.wide img{aspect-ratio:auto; max-height:300px; object-fit:contain}
.photo figcaption{padding:8px 12px 9px; font-size:10.5px; line-height:1.65; color:var(--dim)}
.photo .ph-title{display:block; color:var(--text-2)}
.photo .ph-credit{display:block; color:var(--dim)}
.photo figcaption a{color:var(--accent-2); text-decoration:none; border-bottom:1px solid rgba(126,224,255,.3)}
.photo.compact{margin:0 0 13px}
.photo.compact img{aspect-ratio:16/9}
.photo.compact.wide img{aspect-ratio:auto; max-height:170px}
.photo.compact figcaption{font-size:10px; padding:6px 10px 7px}

#lightbox{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:26px; background:rgba(3,5,10,.95); backdrop-filter:blur(4px)}
#lightbox img{max-width:min(94vw,1400px); max-height:80vh; width:auto; height:auto; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.65)}
#lbcap{max-width:900px; text-align:center; font-size:12px; line-height:1.7; color:var(--text-2)}
#lbcap a{color:var(--accent-2); text-decoration:none}
#lbclose{position:absolute; top:16px; right:18px; width:38px; height:38px; display:grid; place-items:center; padding:0; background:rgba(255,255,255,.06); border:1px solid var(--line-2); border-radius:50%; color:var(--text); cursor:pointer}
#lbclose:hover{background:rgba(255,255,255,.13)}
#lbclose svg{width:16px;height:16px}

/* ============================ 测验 ============================ */
.quiz-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-right:14px}
.quiz-head .quiz-modes{margin-right:0}
#quiz-stats{margin-left:auto; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
#quiz-stats .stat{
  display:flex; align-items:baseline; gap:5px;
  padding:5px 11px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line);
  font-size:11px; color:var(--dim);
}
#quiz-stats .stat b{font-size:14px; font-weight:650; color:var(--text); font-variant-numeric:tabular-nums}
#quiz-stats .stat.acc b{color:var(--accent-2)}
#quiz-stats .stat.hot b{color:var(--gold)}

#quiz-body{
  flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 384px;
  gap:13px; padding:13px 14px 14px;
}
#quiz-stage{
  container-type:size; position:relative; min-height:0;
  display:grid; place-items:center; overflow:hidden;
  background:#04060b;
  border:1px solid var(--line); border-radius:var(--r-lg);
}
#quizsky{width:min(100%,58vh); aspect-ratio:1; display:block; cursor:crosshair; touch-action:none; border-radius:14px}
@container (min-width:1px){#quizsky{width:min(100cqw - 4px, 100cqh - 4px)}}

#quiz-rail{
  display:flex; flex-direction:column; gap:13px; min-height:0; overflow-y:auto;
  padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
#quiz-question{font-size:14.5px; line-height:1.75}
#quiz-question b{color:var(--gold); font-size:18px; letter-spacing:.02em}
/* 认亮星模式的提示卡 */
.quiz-hint{
  display:flex; flex-direction:column; gap:2px; padding:14px 16px;
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:13px;
}
.quiz-hint .qh-row{display:flex; align-items:baseline; justify-content:space-between; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05)}
.quiz-hint .qh-row:last-of-type{border-bottom:0}
.quiz-hint .qh-row span{font-size:11.5px; color:var(--dim)}
.quiz-hint .qh-row b{font-size:13px; color:var(--text); font-weight:600; text-align:right}
.quiz-hint .qh-note{
  margin-top:9px; padding:9px 11px; font-size:12px; line-height:1.7; color:#e4dcc2;
  background:rgba(255,204,102,.07); border-left:2px solid rgba(255,204,102,.45); border-radius:0 8px 8px 0;
}
.quiz-hint .qh-tip{margin-top:11px; font-size:11.5px; line-height:1.7; color:var(--dim)}
#quiz-options{display:flex; flex-direction:column; gap:8px}
#quiz-options button{
  text-align:left; cursor:pointer; font:inherit; font-size:13.5px; color:var(--text);
  padding:11px 15px; border-radius:12px;
  background:rgba(255,255,255,.045); border:1px solid var(--line);
  transition:background .15s, border-color .15s, transform .15s, color .15s;
}
#quiz-options button:hover{background:rgba(91,140,255,.16); border-color:rgba(120,160,255,.45); transform:translateX(3px)}
#quiz-options button.ok{background:rgba(84,214,160,.16); border-color:rgba(84,214,160,.5); color:#c9f7e4}
#quiz-options button.bad{background:rgba(255,122,134,.14); border-color:rgba(255,122,134,.45); color:#ffd5d9}
#quiz-options button:disabled{cursor:default; transform:none}
#quiz-feedback{font-size:13.5px; line-height:1.7}
#quiz-feedback .note{margin:9px 0 0}
#quiz-next,.btn-primary{
  align-self:flex-end; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:#fff;
  padding:10px 22px; border:0; border-radius:11px;
  background:linear-gradient(180deg,#6086ff,#4a6ee0); box-shadow:0 4px 16px rgba(70,110,220,.32);
  transition:filter .15s, transform .15s;
}
#quiz-next:hover,.btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px)}
#quiz-feedback:empty,#quiz-options:empty{display:none}

/* ============================ 关于 ============================ */
#tab-about{overflow-y:auto}
.about{width:100%; max-width:880px; margin:0 auto; padding:26px 24px 70px; font-size:13.5px; line-height:1.8; color:var(--text-2)}
.about .hero{
  padding:22px 24px; margin-bottom:8px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(91,140,255,.14), rgba(126,224,255,.06) 55%, transparent);
  border:1px solid var(--line);
}
.about .hero h2{margin:0 0 6px; font-size:22px; color:#fff; letter-spacing:.02em}
.about .hero p{margin:0; font-size:13px; color:var(--text-2)}
.about .chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.about .chips span{
  padding:4px 11px; border-radius:999px; font-size:11px; color:var(--text-2);
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.about h2{margin:0 0 8px; font-size:20px; color:#fff}
.about h3{
  margin:28px 0 12px; padding-left:11px; font-size:15px; color:#fff; font-weight:650;
  border-left:2px solid var(--accent);
}
.about p{margin:10px 0}
.about b,.about strong{color:#fff; font-weight:600}
.about a{color:var(--accent-2); text-decoration:none; border-bottom:1px solid rgba(126,224,255,.35)}
.about a:hover{border-bottom-color:var(--accent-2)}
.about table{width:100%; border-collapse:collapse; font-size:12.5px; margin:12px 0}
.about th{
  text-align:left; font-weight:500; font-size:11px; letter-spacing:.06em; color:var(--dim);
  padding:7px 12px; border-bottom:1px solid var(--line-2);
}
.about td{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:top}
.about tr:last-child td{border-bottom:0}
.about tbody tr:hover td,.about tr:hover td{background:rgba(255,255,255,.02)}
.about td:first-child{color:var(--text); white-space:nowrap; padding-right:18px}
.about ul{margin:8px 0; padding-left:20px}
.about li{margin:5px 0}
.about code{
  font-family:ui-monospace,Consolas,monospace; font-size:12px;
  background:rgba(255,255,255,.07); padding:1px 6px; border-radius:6px; color:var(--text);
}
.about .note{margin:14px 0}
.about .tip{color:var(--dim); font-size:12px; margin-top:22px}

/* ============================ 自适应 ============================ */
@media (max-width:1120px){
  #hstat{display:none}
  #quiz-body{grid-template-columns:minmax(0,1fr) 330px}
}
@media (max-width:940px){
  .atlas-body{grid-template-columns:minmax(0,1fr); grid-template-rows:38% minmax(0,1fr); padding:13px}
  #quiz-body{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; padding:13px}
  #quiz-rail{max-height:44vh}
  #infopanel{width:min(352px, calc(100% - 28px))}
  #legend{max-width:calc(100% - 84px)}
}
@media (max-width:680px){
  .brand-txt span{display:none}
  #tabs button{padding:6px 12px}
  #legend{display:none}
}