/* ==================== CSS RESET & VARIABLES ==================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg-1:#F7FAFF;--bg-2:#F1F6FF;--bg-3:#EDF4FF;
  --blue-1:#2563EB;--blue-2:#3B82F6;--blue-3:#60A5FA;--blue-4:#38BDF8;
  --purple-1:#A78BFA;--purple-2:#C4B5FD;--pink-1:#F0ABFC;
  --text-1:#1E293B;--text-2:#475569;--text-3:#94A3B8;--text-4:#CBD5E1;
  --glass-bg:rgba(255,255,255,0.65);--glass-border:rgba(255,255,255,0.8);
  --shadow:0 4px 24px rgba(37,99,235,0.08);
  --radius:16px;--radius-sm:10px;--radius-lg:24px;
  --font-cn:"PingFang SC","Microsoft YaHei","Alibaba PuHuiTi",sans-serif;
  --font-en:"SF Pro","Inter","Arial",sans-serif;
  --max-w:430px;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-cn);
  background:var(--bg-3);
  color:var(--text-1);
  line-height:1.6;
  display:flex;
  justify-content:center;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
#app{
  width:100%;max-width:var(--max-w);
  background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 50%,var(--bg-3) 100%);
  min-height:100vh;position:relative;overflow-x:hidden;
  box-shadow:0 0 40px rgba(37,99,235,0.06);
}
/* ==================== PAGE SYSTEM ==================== */
.page{display:none;min-height:100vh;flex-direction:column;align-items:center;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);}
.page.active{display:flex;animation:pageIn .4s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page-inner{width:100%;padding:0 20px;max-width:400px;margin:0 auto}
/* ==================== TYPOGRAPHY ==================== */
.eyebrow{font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--blue-1);text-transform:uppercase}
h1.display{font-family:var(--font-en);font-size:32px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.subtitle{font-size:17px;color:var(--text-2);line-height:1.5}
.muted{color:var(--text-3);font-size:13px}
.tiny{font-size:12px;color:var(--text-3)}
/* ==================== BUTTONS ==================== */
.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:14px 24px;
  border:none;border-radius:var(--radius);
  font-size:16px;font-weight:600;font-family:var(--font-cn);
  cursor:pointer;transition:all .2s ease;
  background:linear-gradient(135deg,var(--blue-1),var(--blue-2));
  color:#fff;box-shadow:0 4px 16px rgba(37,99,235,0.25);
}
.btn:active{transform:scale(.97)}
.btn-ghost{background:var(--glass-bg);color:var(--blue-1);border:1.5px solid rgba(37,99,235,0.2);box-shadow:none}
.btn-lg{min-height:56px;font-size:17px}
.btn-sm{min-height:44px;font-size:14px;padding:10px 18px}
.btn:disabled{opacity:.6;pointer-events:none}
/* ==================== GLASS CARD ==================== */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
/* ==================== MUSIC TOGGLE ==================== */
#music-toggle{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:9999;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(37,99,235,0.15);background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s ease;box-shadow:0 2px 8px rgba(37,99,235,0.08)}
#music-toggle:active{transform:scale(.9)}
#music-toggle svg{width:16px;height:16px;fill:var(--blue-1);opacity:.7}
#music-toggle.playing svg{opacity:1;animation:musicPulse 2s ease-in-out infinite}
#music-toggle .mt-bars{display:flex;gap:2px;align-items:flex-end;height:12px}
#music-toggle .mt-bars span{width:2.5px;background:var(--blue-1);border-radius:1px;opacity:.7}
#music-toggle.playing .mt-bars span{animation:barDance .8s ease-in-out infinite}
#music-toggle.playing .mt-bars span:nth-child(1){animation-delay:0s}
#music-toggle.playing .mt-bars span:nth-child(2){animation-delay:.2s}
#music-toggle.playing .mt-bars span:nth-child(3){animation-delay:.4s}
@keyframes musicPulse{0%,100%{box-shadow:0 2px 8px rgba(37,99,235,0.08)}50%{box-shadow:0 2px 16px rgba(37,99,235,0.2)}}
@keyframes barDance{0%,100%{height:4px}50%{height:12px}}
/* ==================== COVER PAGE ==================== */
#page-cover{justify-content:space-between;padding-top:40px}
#cover-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cover-content{position:relative;z-index:1;width:100%;text-align:center;padding:0 24px}
.neural-heart{width:180px;height:160px;margin:0 auto 16px;position:relative}
.neural-heart svg{width:100%;height:100%}
.nh-node{fill:var(--blue-2);opacity:.8;animation:nodePulse 2.5s ease-in-out infinite}
.nh-edge{stroke:var(--blue-3);stroke-width:.5;opacity:.3;animation:edgeFlow 3s ease-in-out infinite}
.nh-node.purple{fill:var(--purple-1)}
.nh-node.cyan{fill:var(--blue-4)}
@keyframes nodePulse{0%,100%{opacity:.4;r:3}50%{opacity:1;r:5}}
@keyframes edgeFlow{0%,100%{opacity:.15}50%{opacity:.4}}
.cover-title{font-family:var(--font-en);font-size:30px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,var(--blue-1),var(--purple-1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.cover-cn{font-size:18px;color:var(--blue-1);font-weight:600;margin-bottom:20px}
.cover-tagline{font-size:16px;color:var(--text-2);line-height:1.6;margin-bottom:8px}
.cover-quote{font-size:14px;color:var(--text-3);min-height:22px;margin-bottom:28px;transition:opacity .3s}
.cover-btn-wrap{padding:0 24px 12px}
.cover-footer{position:relative;z-index:1;text-align:center;padding-bottom:20px}
.cover-footer .eyebrow{font-size:10px;color:var(--text-3);letter-spacing:.2em}
.cover-loading{display:none;font-size:14px;color:var(--blue-2);text-align:center}
.cover-loading.show{display:block;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ==================== INTRO PAGE ==================== */
#page-intro{justify-content:center;padding:40px 24px}
.intro-lab{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--blue-1);text-align:center;margin-bottom:24px}
.intro-body{font-size:16px;color:var(--text-2);line-height:1.8;margin-bottom:20px}
.intro-body strong{color:var(--text-1)}
.intro-note{font-size:14px;color:var(--blue-2);margin-bottom:12px;text-align:center}
.intro-fun{font-size:13px;color:var(--text-3);text-align:center;margin-bottom:32px}
/* ==================== STAGE INTRO ==================== */
#page-stage-intro{justify-content:center;padding:40px 24px}
.si-stage{font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--blue-3);font-weight:600}
.si-title{font-size:24px;font-weight:700;color:var(--text-1);margin:8px 0 4px}
.si-cn{font-size:16px;color:var(--blue-1);margin-bottom:20px}
.si-desc{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:12px}
.si-science{font-size:14px;color:var(--blue-2);background:rgba(37,99,235,0.06);padding:12px 16px;border-radius:12px;margin-bottom:16px;line-height:1.6}
.si-science b{color:var(--blue-1)}
.si-quote{font-size:14px;color:var(--text-3);font-style:italic;margin-bottom:32px}
/* ==================== QUESTION PAGE ==================== */
#page-question{padding-top:0}
.q-header{width:100%;padding:16px 20px 0;display:flex;align-items:center;gap:12px}
.q-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;font-size:18px;color:var(--text-2);flex-shrink:0}
.q-counter{font-family:var(--font-en);font-size:13px;font-weight:600;color:var(--text-3)}
.q-counter span{color:var(--blue-1);font-size:15px}
.q-stage-tag{font-family:var(--font-en);font-size:10px;letter-spacing:.15em;color:var(--blue-3);font-weight:600;margin-left:auto}
.q-progress{width:100%;height:3px;background:rgba(37,99,235,0.08);margin:12px 0;overflow:hidden;border-radius:2px}
.q-progress-bar{height:100%;background:linear-gradient(90deg,var(--blue-1),var(--blue-3));border-radius:2px;transition:width .4s ease}
.q-body{flex:1;width:100%;padding:8px 20px 24px;display:flex;flex-direction:column}
.q-pre-card{background:rgba(37,99,235,0.05);border:1px solid rgba(37,99,235,0.1);border-radius:14px;padding:16px;margin-bottom:16px}
.q-pre-line{font-size:14px;color:var(--text-2);line-height:2}
.q-pre-line.done{color:var(--blue-2)}
.q-pre-line.done::after{content:' ✓';color:var(--blue-1)}
.q-pre-status{font-size:13px;color:var(--text-3);margin-top:8px}
.q-pre-intro{font-size:14px;color:var(--blue-1);margin-top:12px;line-height:1.6}
.q-question{font-size:20px;font-weight:600;color:var(--text-1);line-height:1.5;margin-bottom:20px}
.q-answers{display:flex;flex-direction:column;gap:10px}
.q-answer{
  display:flex;align-items:center;min-height:56px;padding:16px 18px;
  background:rgba(255,255,255,0.5);border:1.5px solid rgba(37,99,235,0.12);
  border-radius:14px;font-size:15px;color:var(--text-1);line-height:1.45;
  cursor:pointer;transition:all .25s ease;position:relative;overflow:hidden;
}
.q-answer:active{transform:scale(.98)}
.q-answer.selected{border-color:var(--blue-1);background:rgba(37,99,235,0.06);box-shadow:0 0 0 3px rgba(37,99,235,0.08)}
.q-answer .qa-letter{display:inline-flex;width:24px;height:24px;border-radius:50%;background:rgba(37,99,235,0.08);color:var(--blue-1);font-size:12px;font-weight:700;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0;font-family:var(--font-en)}
.q-answer.selected .qa-letter{background:var(--blue-1);color:#fff}
.q-answer .qa-text{flex:1}
.q-answer::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,0.15),transparent 70%);opacity:0;transition:opacity .3s}
.q-answer.flash::after{opacity:1;animation:flashFade .3s ease}
@keyframes flashFade{0%{opacity:1}100%{opacity:0}}
.q-funfact{font-size:13px;color:var(--text-3);margin-top:16px;text-align:center;font-style:italic}
/* Q7 Context Animation */
.ctx-anim{margin-bottom:20px}
.ctx-step{font-size:16px;color:var(--text-2);text-align:center;padding:12px;opacity:0;transform:translateY(10px);transition:all .4s}
.ctx-step.show{opacity:1;transform:translateY(0)}
.ctx-step.literal{color:var(--text-3)}
.ctx-step.thinking{color:var(--blue-2);font-size:14px}
.ctx-step.real{color:var(--blue-1);font-weight:600}
.ctx-quote{font-size:14px;color:var(--text-3);text-align:center;font-style:italic;margin:12px 0}
.ctx-science{font-size:14px;color:var(--text-2);background:rgba(37,99,235,0.05);padding:14px 16px;border-radius:12px;line-height:1.7;margin-bottom:16px}
.ctx-science b{color:var(--blue-1)}
/* ==================== STAGE COMPLETE ==================== */
#page-stage-complete{justify-content:center;padding:40px 24px;text-align:center}
.sc-badge{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--blue-1);margin-bottom:16px}
.sc-title{font-size:22px;font-weight:700;margin-bottom:24px}
.sc-flow{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.sc-flow-item{font-family:var(--font-en);font-size:14px;color:var(--blue-2);opacity:0;animation:flowIn .4s forwards}
.sc-flow-item .cn{font-family:var(--font-cn);font-size:13px;color:var(--text-3);margin-left:8px}
@keyframes flowIn{to{opacity:1}}
.sc-science{font-size:14px;color:var(--blue-2);margin-bottom:8px}
.sc-fun{font-size:13px;color:var(--text-3);margin-bottom:32px;font-style:italic}
/* ==================== TRAINING PAGE ==================== */
#page-training{justify-content:center;padding:40px 24px;text-align:center;background:linear-gradient(180deg,#F7FAFF,rgba(237,244,255,0.8))}
.train-title{font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--blue-3);font-weight:600;margin-bottom:8px}
.train-cn{font-size:22px;font-weight:700;margin-bottom:32px}
.train-panel{width:100%;background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow)}
.tp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.tp-engine{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--blue-1)}
.tp-ver{font-family:var(--font-en);font-size:11px;color:var(--text-3)}
.tp-epoch-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.tp-epoch-label{font-size:13px;color:var(--text-2)}
.tp-epoch-val{font-family:var(--font-en);font-size:18px;font-weight:700;color:var(--blue-1)}
.tp-epoch-bar{width:100%;height:4px;background:rgba(37,99,235,0.08);border-radius:2px;overflow:hidden;margin-bottom:20px}
.tp-epoch-fill{height:100%;background:linear-gradient(90deg,var(--blue-1),var(--blue-3));border-radius:2px;transition:width .3s}
.tp-status{font-size:14px;color:var(--text-2);margin-bottom:16px;min-height:22px;transition:opacity .3s}
.tp-features{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.tp-feature{display:flex;align-items:center;gap:10px;font-size:13px}
.tp-feature-dot{width:8px;height:8px;border-radius:50%;background:var(--text-4);transition:all .3s}
.tp-feature.active .tp-feature-dot{background:var(--blue-1);box-shadow:0 0 8px rgba(37,99,235,0.4)}
.tp-feature.active .tp-feature-text{color:var(--blue-1)}
.tp-feature-text{color:var(--text-3);transition:color .3s}
.tp-feature-en{font-family:var(--font-en);font-size:11px;color:var(--text-4);margin-left:auto}
.tp-loss-section{margin-top:20px;padding-top:16px;border-top:1px solid rgba(37,99,235,0.08)}
.tp-loss-label{font-size:13px;color:var(--text-2);margin-bottom:4px}
.tp-loss-en{font-family:var(--font-en);font-size:11px;color:var(--text-3);margin-bottom:8px}
.tp-loss-val{font-family:var(--font-en);font-size:28px;font-weight:800;color:var(--blue-1);transition:all .4s}
.tp-loss-explain{font-size:13px;color:var(--text-3);line-height:1.6;margin-top:8px;min-height:40px}
.tp-loss-quote{font-size:14px;color:var(--blue-2);font-style:italic;margin-top:8px}
.train-converged{display:none;margin-top:24px}
.train-converged.show{display:block;animation:fadeIn .5s}
.tc-badge{font-family:var(--font-en);font-size:14px;font-weight:700;letter-spacing:.15em;color:var(--blue-1)}
.tc-cn{font-size:18px;font-weight:600;margin:8px 0}
.tc-explain{font-size:13px;color:var(--text-3);line-height:1.6}
.tc-fun{font-size:15px;color:var(--text-1);margin-top:12px;font-weight:500}
/* ==================== RANKING PAGE ==================== */
#page-ranking{justify-content:center;padding:40px 24px}
.rank-title{font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--blue-3);font-weight:600;text-align:center;margin-bottom:8px}
.rank-cn{font-size:22px;font-weight:700;text-align:center;margin-bottom:32px}
.rank-list{display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:24px}
.rank-item{display:flex;align-items:center;padding:18px 20px;background:var(--glass-bg);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius);opacity:0;transform:translateY(20px);transition:all .5s}
.rank-item.show{opacity:1;transform:translateY(0)}
.rank-num{font-family:var(--font-en);font-size:24px;font-weight:800;color:var(--text-4);width:40px;flex-shrink:0}
.rank-item:nth-child(1) .rank-num{color:var(--blue-1)}
.rank-info{flex:1;min-width:0}
.rank-name{font-size:15px;font-weight:700;color:var(--text-1);letter-spacing:.02em}
.rank-name .rank-en{font-family:var(--font-en);font-size:11px;font-weight:500;color:var(--text-3);margin-left:6px;letter-spacing:.05em}
.rank-keys{font-size:12px;color:var(--text-3);margin-top:2px}
.rank-score{font-family:var(--font-en);font-size:20px;font-weight:700;color:var(--blue-1);margin-left:12px}
.rank-fun{font-size:13px;color:var(--text-3);text-align:center;margin-bottom:24px;font-style:italic}
/* ==================== RESULT PAGE ==================== */
#page-result{padding:0}
.result-hero{width:100%;padding:48px 24px 24px;text-align:center;background:linear-gradient(180deg,rgba(37,99,235,0.04),transparent)}
.rh-eyebrow{font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--blue-3);font-weight:600}
.rh-top-match{font-family:var(--font-en);font-size:10px;letter-spacing:.15em;color:var(--text-3);margin-top:4px}
.rh-model-id{font-family:var(--font-en);font-size:28px;font-weight:800;letter-spacing:-.01em;background:linear-gradient(135deg,var(--blue-1),var(--purple-1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:12px 0 4px}
.rh-cn-name{font-size:22px;font-weight:700;color:var(--text-1);margin-bottom:4px}
.rh-algo-cn{font-size:14px;color:var(--text-2);margin-bottom:16px}
.rh-algo-cn span{color:var(--blue-1);font-weight:600}
.rh-meta{display:flex;justify-content:center;gap:24px;margin-bottom:24px}
.rh-meta-item{text-align:center}
.rh-meta-label{font-family:var(--font-en);font-size:10px;letter-spacing:.1em;color:var(--text-3)}
.rh-meta-val{font-family:var(--font-en);font-size:16px;font-weight:700;color:var(--blue-1);margin-top:2px}
.rh-radar-wrap{width:100%;display:flex;justify-content:center;margin-bottom:8px}
.rh-radar-wrap canvas{max-width:320px}
.result-section{width:100%;padding:24px;max-width:400px;margin:0 auto}
.rs-label{font-family:var(--font-en);font-size:10px;letter-spacing:.15em;color:var(--blue-3);font-weight:600;margin-bottom:8px}
.rs-desc{font-size:16px;color:var(--text-2);line-height:1.8;margin-bottom:20px}
.rs-science{background:rgba(37,99,235,0.05);border-radius:14px;padding:16px;margin-bottom:20px}
.rs-science-text{font-size:14px;color:var(--text-2);line-height:1.7}
.rs-science-text b{color:var(--blue-1)}
.rs-quote{font-size:18px;font-weight:600;color:var(--text-1);line-height:1.5;text-align:center;padding:20px 0;border-top:1px solid rgba(37,99,235,0.08);border-bottom:1px solid rgba(37,99,235,0.08);margin-bottom:20px}
.rs-fun{font-size:13px;color:var(--text-3);text-align:center;margin-bottom:20px;font-style:italic}
.rs-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.rs-tag{padding:6px 14px;background:rgba(37,99,235,0.06);border-radius:20px;font-size:13px;color:var(--blue-1);font-weight:500}
.rs-visual-tree{background:rgba(37,99,235,0.04);border-radius:14px;padding:16px;margin-bottom:20px}
.rs-vt-node{font-size:14px;color:var(--text-2);padding:6px 0;border-bottom:1px dashed rgba(37,99,235,0.1)}
.rs-vt-node:last-child{border-bottom:none;color:var(--blue-1);font-weight:600}
.rs-vt-node::before{content:'→ ';color:var(--text-4)}
.rs-vt-node:last-child::before{content:'✓ ';color:var(--blue-1)}
.rs-visual-update{background:rgba(37,99,235,0.04);border-radius:14px;padding:16px;margin-bottom:20px}
.rs-vu-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px;color:var(--text-2)}
.rs-vu-bar{width:60px;height:6px;background:rgba(37,99,235,0.08);border-radius:3px;overflow:hidden}
.rs-vu-fill{height:100%;background:linear-gradient(90deg,var(--blue-2),var(--blue-3));border-radius:3px;transition:width .8s}
.rs-learn{background:linear-gradient(135deg,rgba(37,99,235,0.06),rgba(167,139,250,0.06));border-radius:var(--radius);padding:20px;margin-bottom:24px}
.rs-learn-title{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:8px}
.rs-learn-title .en{font-family:var(--font-en);font-size:11px;color:var(--blue-3);display:block;margin-bottom:4px;letter-spacing:.1em}
.rs-learn-text{font-size:14px;color:var(--text-2);line-height:1.7}
.rs-learn-foot{font-size:13px;color:var(--blue-2);margin-top:12px;padding-top:12px;border-top:1px solid rgba(37,99,235,0.08)}
.result-actions{padding:0 24px 32px;display:flex;flex-direction:column;gap:10px}
.result-debug-trigger{position:fixed;bottom:20px;right:20px;font-size:11px;color:var(--text-4);padding:4px 10px;background:var(--glass-bg);border-radius:8px;border:1px solid var(--glass-border);cursor:pointer;z-index:50;opacity:.6}
/* ==================== DIAGNOSTICS ==================== */
.diag-section{padding:24px;max-width:400px;margin:0 auto;width:100%}
.diag-title{font-size:18px;font-weight:700;margin-bottom:4px}
.diag-sub{font-size:13px;color:var(--text-3);margin-bottom:20px}
.diag-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.diag-q{font-size:15px;font-weight:600;color:var(--text-1);margin-bottom:8px}
.diag-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.diag-val{font-family:var(--font-en);font-size:28px;font-weight:800;color:var(--blue-1)}
.diag-status{font-size:13px;color:var(--blue-2);font-weight:600}
.diag-explain{font-size:14px;color:var(--text-2);line-height:1.6;margin-top:8px}
.diag-science{font-size:13px;color:var(--blue-2);background:rgba(37,99,235,0.05);padding:10px 14px;border-radius:10px;margin-top:10px;line-height:1.6}
.diag-science b{color:var(--blue-1)}
.diag-quote{font-size:14px;color:var(--text-3);font-style:italic;margin-top:8px}
.diag-hallu-demo{background:rgba(37,99,235,0.04);border-radius:10px;padding:12px;margin:10px 0;font-size:14px;color:var(--text-2)}
.diag-hallu-demo .input{color:var(--text-3)}
.diag-hallu-demo .output{color:var(--text-1);margin-top:6px}
.diag-hallu-demo .stable{color:var(--blue-2);margin-top:6px;font-size:13px}
/* ==================== SHARE PAGE ==================== */
#page-share{padding:32px 24px;justify-content:center}
#page-share .eyebrow{margin-bottom:20px}
.share-preview{width:100%;max-width:360px;margin:0 auto 28px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 32px rgba(37,99,235,0.12)}
.share-preview canvas{width:100%;display:block}
.share-text{font-size:14px;color:var(--text-2);text-align:center;padding:0 16px;margin-bottom:24px;line-height:1.7}
.share-actions{display:flex;flex-direction:column;gap:12px;padding:0 16px}
/* ==================== MERGE PAGE ==================== */
#page-merge{padding:40px 24px;justify-content:center;text-align:center}
.merge-title{font-family:var(--font-en);font-size:13px;letter-spacing:.2em;color:var(--blue-3);font-weight:600;margin-bottom:8px}
.merge-cn{font-size:18px;font-weight:600;color:var(--text-1);margin-bottom:32px;line-height:1.5}
.merge-models{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:32px}
.merge-model{flex:1;max-width:140px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:16px 12px}
.merge-model .mm-name{font-family:var(--font-en);font-size:11px;font-weight:700;color:var(--blue-1);letter-spacing:.05em}
.merge-model .mm-cn{font-size:13px;color:var(--text-2);margin-top:4px}
.merge-model .mm-id{font-family:var(--font-en);font-size:10px;color:var(--text-3);margin-top:4px}
.merge-model canvas{width:100%;margin-top:8px}
.merge-x{font-size:24px;color:var(--text-4);font-weight:300}
.merge-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin:0 auto}
.merge-invite-code{font-family:var(--font-en);font-size:16px;font-weight:700;color:var(--blue-1);text-align:center;padding:12px;background:rgba(37,99,235,0.05);border-radius:12px;margin-bottom:16px}
/* ==================== COUPLE PAGE ==================== */
#page-couple{padding:24px}
.couple-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px}
.couple-loading-text{font-size:15px;color:var(--blue-2);transition:opacity .3s}
.couple-result{text-align:center}
.cr-header{font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--blue-3);font-weight:600;margin-bottom:4px}
.cr-title{font-size:20px;font-weight:700;margin-bottom:24px}
.cr-models{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:24px}
.cr-model{padding:10px 14px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;font-size:12px}
.cr-model .name{font-family:var(--font-en);font-weight:700;color:var(--blue-1);font-size:13px}
.cr-model .cn{color:var(--text-3);margin-top:2px}
.cr-x{color:var(--text-4)}
.cr-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.cr-score-item{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:14px;text-align:center}
.cr-score-label{font-size:12px;color:var(--text-3);margin-bottom:4px}
.cr-score-val{font-family:var(--font-en);font-size:22px;font-weight:700;color:var(--blue-1)}
.cr-overall{background:linear-gradient(135deg,rgba(37,99,235,0.08),rgba(167,139,250,0.08));border-radius:var(--radius);padding:20px;margin-bottom:20px}
.cr-overall-label{font-size:13px;color:var(--text-2);margin-bottom:4px}
.cr-overall-val{font-family:var(--font-en);font-size:36px;font-weight:800;color:var(--blue-1)}
.cr-quote{font-size:15px;color:var(--text-1);line-height:1.6;margin-bottom:24px}
/* ==================== TRUTH REVEAL ==================== */
#page-truth{padding:40px 24px;justify-content:center;text-align:center}
.truth-step{opacity:0;transform:translateY(12px);transition:all .6s;margin-bottom:24px}
.truth-step.show{opacity:1;transform:translateY(0)}
.ts-surprise{font-family:var(--font-en);font-size:28px;font-weight:800;color:var(--blue-1);letter-spacing:.02em}
.ts-reveal{font-size:17px;color:var(--text-2);line-height:1.7}
.ts-but{font-size:20px;font-weight:700;color:var(--blue-1)}
.ts-concepts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0}
.ts-concept{padding:6px 12px;background:rgba(37,99,235,0.06);border-radius:8px;font-size:13px;color:var(--blue-1);font-weight:500;opacity:0;animation:conceptIn .3s forwards}
@keyframes conceptIn{to{opacity:1}}
.ts-pipeline{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.ts-pipe-item{font-size:13px;color:var(--text-2)}
.ts-pipe-item .en{font-family:var(--font-en);font-weight:700;color:var(--blue-1);font-size:12px;letter-spacing:.05em}
.ts-pipe-item .cn{color:var(--text-3);margin-left:4px}
.ts-nocode{font-size:16px;color:var(--text-1);line-height:1.7}
.ts-big1{font-size:20px;font-weight:700;color:var(--text-1);line-height:1.5}
.ts-big1 .alt{color:var(--blue-1)}
.ts-romance{font-size:16px;color:var(--text-2);line-height:1.7}
.ts-key{font-size:17px;font-weight:600;color:var(--text-1);line-height:1.6}
.ts-ult{font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--blue-1),var(--purple-1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:16px 0}
/* ==================== COURSE PAGE ==================== */
#page-course{padding:40px 24px;justify-content:center;text-align:center}
.course-eyebrow{font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--blue-3);font-weight:600}
.course-title{font-family:var(--font-en);font-size:22px;font-weight:800;color:var(--text-1);margin:8px 0 4px;letter-spacing:-.01em}
.course-cn{font-size:16px;color:var(--text-2);margin-bottom:28px}
.course-path{display:flex;flex-direction:column;gap:0;margin-bottom:28px}
.cp-item{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;font-size:14px}
.cp-item .en{font-family:var(--font-en);font-weight:700;color:var(--blue-1);font-size:13px;min-width:120px;text-align:left}
.cp-item .cn{color:var(--text-2);font-size:13px}
.cp-arrow{text-align:center;color:var(--text-4);font-size:12px;line-height:1}
.course-recap{font-size:14px;color:var(--text-3);line-height:1.7;margin-bottom:20px}
.course-recap b{color:var(--blue-1)}
.course-main-text{font-size:16px;color:var(--text-1);line-height:1.7;margin-bottom:24px}
.course-fun{font-size:14px;color:var(--blue-2);margin-bottom:24px;font-style:italic;min-height:22px}
.course-ctas{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.course-retrain{font-size:13px;color:var(--text-3);text-decoration:underline;cursor:pointer;margin-top:8px}
/* ==================== SECRET PAGE ==================== */
#page-secret{padding:40px 24px;justify-content:center;text-align:center}
.secret-title{font-family:var(--font-en);font-size:14px;font-weight:700;letter-spacing:.15em;color:var(--purple-1);margin-bottom:32px}
.secret-dialog{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.sd-item{text-align:left;opacity:0;transform:translateY(8px);animation:sdIn .5s forwards}
@keyframes sdIn{to{opacity:1;transform:translateY(0)}}
.sd-ai{font-size:14px;color:var(--text-3)}
.sd-ai::before{content:'AI: ';font-family:var(--font-en);font-weight:700;color:var(--purple-1)}
.sd-sys{font-size:15px;color:var(--text-1);font-weight:500}
.sd-sys::before{content:'系统: ';font-family:var(--font-en);font-weight:700;color:var(--blue-1)}
.secret-final{font-size:16px;color:var(--blue-1);font-weight:600;line-height:1.6;margin-bottom:32px}
/* ==================== ATTENTION EGG ==================== */
.attn-egg{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(37,99,235,0.95);color:#fff;padding:14px 24px;border-radius:14px;font-size:14px;z-index:100;box-shadow:0 8px 24px rgba(37,99,235,0.3);animation:eggIn .4s}
.attn-egg .sub{font-size:12px;opacity:.85;margin-top:4px}
@keyframes eggIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
/* ==================== DEBUG CONSOLE ==================== */
.debug-overlay{position:fixed;inset:0;background:rgba(247,250,255,0.95);backdrop-filter:blur(8px);z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.debug-overlay.show{display:flex}
.debug-box{width:100%;max-width:340px;background:#fff;border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:24px;box-shadow:0 8px 32px rgba(37,99,235,0.12)}
.db-title{font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--blue-1);margin-bottom:16px}
.db-row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;border-bottom:1px solid rgba(37,99,235,0.06)}
.db-row .label{color:var(--text-2)}
.db-row .val{color:var(--blue-1);font-weight:600}
.db-issue{font-size:13px;color:var(--text-3);margin:12px 0;padding:8px;background:rgba(37,99,235,0.04);border-radius:8px}
.db-fix-msg{font-size:14px;color:var(--text-1);margin:12px 0;line-height:1.6}
.db-close{position:absolute;top:16px;right:20px;font-size:24px;color:var(--text-3);cursor:pointer}
/* ==================== CONSULT QR OVERLAY ==================== */
.consult-overlay{position:fixed;inset:0;background:rgba(20,30,60,0.55);backdrop-filter:blur(6px);z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.consult-overlay.show{display:flex;animation:fadeIn .3s}
.consult-box{width:100%;max-width:320px;background:#fff;border-radius:var(--radius-lg);padding:32px 28px 28px;box-shadow:0 12px 48px rgba(37,99,235,0.2);position:relative;text-align:center}
.consult-close{position:absolute;top:12px;right:16px;font-size:22px;color:var(--text-3);cursor:pointer;line-height:1;transition:color .2s}
.consult-close:hover{color:var(--text-1)}
.consult-eyebrow{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--blue-1);margin-bottom:8px}
.consult-title{font-size:22px;font-weight:700;color:var(--text-1);margin-bottom:8px}
.consult-subtitle{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:24px}
.consult-qr-wrap{width:200px;height:200px;margin:0 auto 16px;border-radius:12px;overflow:hidden;border:1px solid rgba(37,99,235,0.1)}
.consult-qr{width:100%;height:100%;object-fit:cover;display:block}
.consult-note{font-size:14px;font-weight:600;color:var(--text-1);margin-bottom:6px}
.consult-tip{font-size:12px;color:var(--text-3);line-height:1.5}
/* ==================== UTILITIES ==================== */
.hidden{display:none!important}
.spacer{flex:1}
.fade-in{animation:fadeIn .4s}
.pulse{animation:pulseAnim 2s infinite}
@keyframes pulseAnim{0%,100%{opacity:1}50%{opacity:.6}}
.text-center{text-align:center}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}