/* ==========================================================================
   人物图鉴 ATLAS · 共享主题
   深墨 + 鎏金 · 博物馆档案风格
   ========================================================================== */

:root{
  --bg-0:#0B0910;
  --bg-1:#151024;
  --bg-2:#1D1630;

  --ink:#F3EDE0;
  --ink-2:#C9C0AE;
  --ink-3:#8E8574;
  --ink-4:#5F5849;

  --gold:#D4AF37;
  --gold-lt:#F2DC96;
  --gold-dk:#8A6B1C;

  --jade:#3FA98A;
  --cinnabar:#C24B3E;

  --line:rgba(212,175,55,.16);
  --line-2:rgba(212,175,55,.30);
  --glass:rgba(255,255,255,.042);
  --glass-2:rgba(255,255,255,.068);

  --radius:20px;
  --radius-sm:14px;
  --shadow:0 18px 50px rgba(0,0,0,.45);

  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --serif:Georgia,"Times New Roman","Songti SC","STSong",serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg-0);
  position:relative;
  overflow-x:hidden;
}

/* 背景：径向光晕 + 细颗粒 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 620px at 12% -6%, rgba(212,175,55,.13), transparent 62%),
    radial-gradient(760px 560px at 92% 4%, rgba(120,84,190,.16), transparent 60%),
    radial-gradient(700px 700px at 50% 108%, rgba(63,169,138,.10), transparent 62%),
    linear-gradient(168deg,var(--bg-0) 0%,var(--bg-1) 46%,var(--bg-2) 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

button,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
a{color:inherit;text-decoration:none}

.hidden{display:none!important}

/* ---------------------------------- 布局 --------------------------------- */
.shell{width:100%;max-width:760px;margin:0 auto;padding:26px 18px 72px}
.shell.wide{max-width:1060px}

/* ---------------------------------- 卡片 --------------------------------- */
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.card{padding:26px 24px;margin-bottom:18px}

/* ---------------------------------- 文字 --------------------------------- */
.eyebrow{
  font-size:12px;letter-spacing:.34em;font-weight:700;
  color:var(--gold);text-transform:uppercase;
}
.display{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.3;
  margin:0;
}
.gold-text{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold) 45%,var(--gold-dk));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.dim{color:var(--ink-3);font-size:14px;line-height:1.8}
.rule{
  height:1px;border:0;margin:20px 0;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}

/* --------------------------------- 徽记 --------------------------------- */
.seal{
  width:60px;height:60px;border-radius:16px;
  display:grid;place-items:center;
  font-size:28px;
  background:linear-gradient(140deg,rgba(212,175,55,.24),rgba(212,175,55,.05));
  border:1px solid var(--line-2);
  box-shadow:0 10px 30px rgba(212,175,55,.14), inset 0 1px 0 rgba(255,255,255,.10);
}

/* --------------------------------- 按钮 --------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--radius-sm);
  padding:15px 22px;font-weight:700;font-size:15px;letter-spacing:.06em;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  width:100%;
}
.btn:focus-visible,.choice:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.btn-primary{
  color:#1A1405;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold) 52%,#B8912B);
  box-shadow:0 12px 30px rgba(212,175,55,.26);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(212,175,55,.34)}
.btn-primary[disabled]{opacity:.32;cursor:not-allowed;transform:none;box-shadow:none}

.btn-ghost{
  background:var(--glass);border-color:var(--line);
  color:var(--ink-2);
}
.btn-ghost:hover{border-color:var(--line-2);color:var(--ink);transform:translateY(-2px)}

.btn-row{display:grid;gap:10px;margin-top:22px}
@media(min-width:560px){.btn-row.two{grid-template-columns:1fr 1fr}}

/* ------------------------------- 门禁 ----------------------------------
   全站统一访问码（见 assets/tests.js 的 accessCode）。
   门禁 DOM 由 common.js 的 mountGate() 自动注入，测试页无需手写标记。
   配色走 --gate-* 变量，各测试主题可以覆写成自己的色调
   （例如 theme-yayi.css 把它改成冷紫）。 */
:root{
  --gate-glow:rgba(212,175,55,.13);
  --gate-accent:var(--gold);
  --gate-accent-lt:var(--gold-lt);
  --gate-mark-bg:linear-gradient(140deg,rgba(212,175,55,.28),rgba(212,175,55,.06));
  --gate-focus:rgba(212,175,55,.14);
}

.gate{
  position:fixed;inset:0;z-index:90;
  display:grid;place-items:center;padding:22px;
  background:radial-gradient(700px 500px at 50% 0%,var(--gate-glow),transparent 60%),rgba(9,7,13,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.gate-card{
  width:min(440px,100%);text-align:center;
  padding:34px 28px 28px;
  background:var(--glass-2);
  border:1px solid var(--line-2);
  border-radius:26px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.gate-mark{
  width:66px;height:66px;margin:0 auto 20px;border-radius:18px;
  display:grid;place-items:center;font-size:30px;
  background:var(--gate-mark-bg);
  border:1px solid var(--line-2);
}
.gate-card h1{font-size:24px;font-weight:800;letter-spacing:.12em;margin:10px 0 10px}
.gate-card p{color:var(--ink-3);font-size:13px;line-height:1.8;margin-bottom:0}
.gate-card .eyebrow{color:var(--gate-accent)}

.code-input{
  display:block;width:100%;margin:24px 0 6px;padding:16px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:rgba(0,0,0,.34);
  text-align:center;font-size:30px;font-weight:700;
  letter-spacing:14px;text-indent:14px;
  color:var(--gate-accent-lt);outline:0;
  transition:border-color .18s, box-shadow .18s;
}
.code-input::placeholder{color:var(--ink-4);letter-spacing:14px}
.code-input:focus{border-color:var(--gate-accent);box-shadow:0 0 0 4px var(--gate-focus)}

.code-error{
  min-height:20px;margin:8px 0 14px;font-size:13px;
  color:var(--cinnabar);opacity:0;transition:opacity .2s;
}
.code-error.show{opacity:1}

/* 锁定态：隐藏正文，避免内容在遮罩下方透出或可被选中/滚动 */
body.atlas-locked{overflow:hidden}
body.atlas-locked .shell{visibility:hidden}

/* ------------------------------- 门户首页 ------------------------------- */
.hub-head{text-align:center;padding:22px 0 30px}
.hub-head .seal{margin:0 auto 20px}
.hub-title{font-size:34px;font-weight:800;letter-spacing:.18em;margin:0 0 12px}
.hub-sub{font-size:12px;letter-spacing:.42em;color:var(--gold);font-weight:700;margin-bottom:16px}
.hub-lead{color:var(--ink-3);font-size:14px;line-height:1.9;max-width:520px;margin:0 auto}

.hub-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.hub-grid{grid-template-columns:1fr 1fr}}

.test-card{
  position:relative;display:flex;flex-direction:column;
  padding:24px 22px;border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--line);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  overflow:hidden;
}
.test-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 200px at 100% 0%,rgba(212,175,55,.10),transparent 70%);
  opacity:0;transition:opacity .22s;
}
.test-card.live:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.test-card.live:hover::after{opacity:1}
.test-card.locked{opacity:.5}

.tc-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.tc-emoji{
  width:52px;height:52px;flex:0 0 52px;border-radius:14px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(140deg,rgba(212,175,55,.22),rgba(212,175,55,.05));
  border:1px solid var(--line);
}
.tc-title{font-size:19px;font-weight:800;letter-spacing:.06em;margin:0 0 5px}
.tc-kicker{font-size:11px;letter-spacing:.2em;color:var(--gold);font-weight:700}

.tc-desc{color:var(--ink-3);font-size:13px;line-height:1.8;margin:0 0 18px;flex:1}

.tc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{
  font-size:11px;letter-spacing:.08em;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-3);
}

.tc-cta{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold);
}
.tc-cta .arrow{transition:transform .18s}
.test-card.live:hover .tc-cta .arrow{transform:translateX(5px)}

.tc-soon{font-size:12px;letter-spacing:.16em;color:var(--ink-4);font-weight:700}

.hub-foot{text-align:center;color:var(--ink-4);font-size:12px;line-height:1.9;margin-top:34px}

/* -------------------------------- 测试页 -------------------------------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;margin-bottom:20px;border-radius:var(--radius-sm);
  background:var(--glass);border:1px solid var(--line);
}
.topbar .back{font-size:13px;color:var(--ink-3);letter-spacing:.08em;white-space:nowrap;transition:color .16s}
.topbar .back:hover{color:var(--gold)}
.topbar .tb-title{font-size:14px;font-weight:700;letter-spacing:.1em;margin-left:auto;color:var(--ink-2)}

.hero{padding:30px 24px 26px;text-align:center;margin-bottom:18px}
.hero .seal{margin:0 auto 20px}
.hero h1{font-size:29px;font-weight:800;letter-spacing:.06em;line-height:1.4;margin:0 0 12px}
.hero-sub{font-size:11px;letter-spacing:.4em;color:var(--gold);font-weight:700;margin-bottom:20px}
.hero-lead{color:var(--ink-3);font-size:14.5px;line-height:1.95;margin:0 auto 24px;max-width:520px}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.stat{
  padding:16px 12px;border-radius:var(--radius-sm);text-align:center;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
}
.stat b{display:block;font-size:17px;font-weight:800;color:var(--gold-lt);margin-bottom:5px;letter-spacing:.06em}
.stat span{font-size:11.5px;color:var(--ink-4);letter-spacing:.06em}

.note-box{
  text-align:left;padding:16px 18px;border-radius:var(--radius-sm);margin-bottom:22px;
  background:rgba(212,175,55,.055);
  border-left:2px solid var(--gold);
  color:var(--ink-2);font-size:13px;line-height:1.85;
}
.note-box b{color:var(--gold-lt);display:block;margin-bottom:5px;letter-spacing:.08em}

/* -------------------------------- 选择题 -------------------------------- */
.q-head{padding:16px 20px;border-radius:var(--radius-sm);margin-bottom:16px;background:var(--glass);border:1px solid var(--line)}
.q-meta{display:flex;align-items:center;gap:12px;margin-bottom:11px;font-size:12.5px}
.q-cat{color:var(--gold);font-weight:700;letter-spacing:.06em}
.q-count{margin-left:auto;color:var(--ink-4);font-variant-numeric:tabular-nums}
.q-pct{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.q-track{height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.q-fill{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt));
  transition:width .42s cubic-bezier(.4,0,.2,1);
}

.q-body{padding:30px 26px 24px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);min-height:540px}
.q-kicker{font-size:12px;letter-spacing:.22em;color:var(--gold);font-weight:700;margin-bottom:14px}
.q-text{font-size:21px;font-weight:800;line-height:1.62;letter-spacing:.02em;margin:0 0 26px}

.opts{display:flex;flex-direction:column;gap:11px}
.choice{
  display:flex;align-items:center;gap:15px;width:100%;
  padding:17px 18px;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.028);
  transition:border-color .16s,background .16s,transform .16s;
}
.choice:hover{border-color:var(--line-2);background:rgba(212,175,55,.055);transform:translateX(4px)}
.choice.selected{
  border-color:var(--gold);background:rgba(212,175,55,.11);
  box-shadow:0 0 0 1px rgba(212,175,55,.35), 0 8px 26px rgba(212,175,55,.10);
}
.choice .mark{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:700;
  border:1px solid var(--line-2);color:var(--ink-4);
  transition:all .16s;
}
.choice.selected .mark{background:var(--gold);border-color:var(--gold);color:#1A1405}
.choice strong{display:block;font-size:15.5px;font-weight:600;line-height:1.6}
.choice small{display:block;margin-top:5px;font-size:12px;color:var(--ink-4);letter-spacing:.04em}

.q-foot{display:flex;align-items:center;gap:12px;margin-top:26px}
.nav-btn{
  padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink-3);transition:all .16s;white-space:nowrap;
}
.nav-btn:hover:not([disabled]){border-color:var(--line-2);color:var(--ink)}
.nav-btn[disabled]{opacity:.3;cursor:not-allowed}
.q-hint{flex:1;text-align:center;font-size:11.5px;color:var(--ink-4);line-height:1.5;transition:color .2s}
.q-hint.on{color:var(--gold)}

/* -------------------------------- 结果页 -------------------------------- */
.result-hero{padding:34px 26px 28px;text-align:center;border-radius:var(--radius);margin-bottom:18px;position:relative;overflow:hidden}
.result-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(480px 260px at 50% 0%,rgba(212,175,55,.16),transparent 68%);
}
.rh-sub{position:relative;font-size:12px;letter-spacing:.34em;color:var(--gold);font-weight:700;margin-bottom:20px}
.rh-icon{position:relative;font-size:40px;margin-bottom:8px;filter:drop-shadow(0 6px 18px rgba(212,175,55,.3))}
.rh-score{
  position:relative;font-family:var(--serif);
  font-size:76px;font-weight:700;line-height:1.02;letter-spacing:-.02em;
  margin-bottom:6px;
}
.rh-name{position:relative;font-size:36px;font-weight:800;letter-spacing:.14em;margin:12px 0 10px}
.rh-title{position:relative;font-size:14px;color:var(--ink-3);letter-spacing:.1em;margin-bottom:20px}
.tags{position:relative;display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.tag{
  padding:7px 15px;border-radius:99px;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  color:var(--gold-lt);background:rgba(212,175,55,.10);border:1px solid var(--line-2);
}
.chip-dim{
  position:relative;display:inline-block;margin-top:16px;padding:8px 18px;border-radius:99px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-2);
}
.voice{
  position:relative;margin-top:22px;padding:18px 20px;border-radius:var(--radius-sm);text-align:left;
  background:rgba(0,0,0,.24);border:1px solid var(--line);
}
.voice-label{display:block;font-size:12px;letter-spacing:.2em;color:var(--gold);font-weight:700;margin-bottom:9px}
.voice p{margin:0;font-size:16px;line-height:1.9;color:var(--ink-2)}

.sec{padding:24px;border-radius:var(--radius);margin-bottom:18px;background:var(--glass);border:1px solid var(--line)}
.sec-title{
  display:flex;align-items:center;gap:12px;
  font-size:16px;font-weight:800;letter-spacing:.1em;margin-bottom:20px;color:var(--ink);
}
.sec-title .num{
  font-family:var(--serif);font-size:13px;color:var(--gold);
  padding:3px 9px;border-radius:7px;background:rgba(212,175,55,.12);border:1px solid var(--line);
}
.bio{font-size:16px;line-height:2;color:var(--ink-2)}

/* 雷达图 */
.radar-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
#radar{width:100%;max-width:340px;height:auto;display:block}
.dim-list{width:100%;display:flex;flex-direction:column;gap:11px}
.dim-row{display:grid;grid-template-columns:52px 1fr 34px;align-items:center;gap:12px;font-size:13px;color:var(--ink-3)}
.dim-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.dim-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt))}
.dim-row b{text-align:right;color:var(--gold-lt);font-variant-numeric:tabular-nums;font-size:13px}

.cols{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.cols{grid-template-columns:repeat(3,1fr)}}
.tile{
  padding:18px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.028);border:1px solid var(--line);
  font-size:14.5px;line-height:1.9;color:var(--ink-2);
}
.tile b{display:block;font-size:14px;color:var(--gold-lt);margin-bottom:9px;letter-spacing:.06em}

.tile.wide{grid-column:1/-1}

/* -------------------------------- 弹层 ---------------------------------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);
  width:max-content;max-width:min(520px,calc(100% - 32px));
  padding:13px 20px;border-radius:14px;text-align:center;font-size:13.5px;line-height:1.65;
  background:rgba(28,22,14,.96);border:1px solid var(--line-2);color:var(--ink);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:.26s;z-index:120;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.modal{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-start;justify-content:center;padding:18px;background:rgba(6,5,9,.82);overflow:auto;backdrop-filter:blur(6px)}
.modal-panel{width:min(620px,100%);margin:auto;padding:18px;border-radius:22px;background:#15111F;border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.modal-head h2{margin:0;font-size:18px;letter-spacing:.08em}
.modal-close{width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:22px;color:var(--ink-3);line-height:1}
.modal-close:hover{color:var(--ink);border-color:var(--line-2)}
.modal-tip{margin:0 2px 14px;color:var(--ink-3);font-size:13px;line-height:1.75}
.modal-img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}

.footnote{text-align:center;color:var(--ink-4);font-size:12px;line-height:1.9;margin-top:22px}

@media(max-width:480px){
  .shell{padding:18px 13px 60px}
  .card,.q-body,.sec{padding:22px 17px}
  .hub-title{font-size:28px;letter-spacing:.12em}
  .hero h1{font-size:24px}
  .q-body{min-height:600px}
  .q-text{font-size:19px}
  .rh-score{font-size:62px}
  .rh-name{font-size:30px;letter-spacing:.1em}
  .choice{padding:15px 14px}
  .nav-btn{padding:11px 14px;font-size:13px}
  .q-hint{font-size:10.5px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}