@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #07070b;
  --bg-2: #11111b;
  --bg-3: #050508;
  --ink: #fff7ed;
  --muted: rgba(255, 247, 237, 0.74);
  --dim: rgba(255, 247, 237, 0.48);
  --line: rgba(255, 247, 237, 0.14);
  --accent: #d6a84f;
  --accent-2: #fff2b8;
  --accent-3: #7b5a20;
  --accent-soft: rgba(214, 168, 79, 0.24);
  --card: rgba(18, 17, 24, 0.80);
  --card-strong: rgba(25, 23, 31, 0.95);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.50);
  --motif: "IMMORTAL / FATE";
  --texture-a: rgba(214, 168, 79, .18);
  --texture-b: rgba(255, 242, 184, .12);
  --radius: 30px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, "Noto Serif SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 8%, var(--texture-a), transparent 34%),
    radial-gradient(circle at 88% 16%, var(--texture-b), transparent 30%),
    radial-gradient(circle at 50% 110%, rgba(255, 255, 255, 0.07), transparent 44%),
    linear-gradient(140deg, var(--bg) 0%, var(--bg-2) 54%, var(--bg-3) 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(115deg, transparent 0 36%, color-mix(in srgb, var(--accent) 16%, transparent) 36.5% 37%, transparent 37.5% 100%),
    radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--accent-2) 22%, transparent) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 68%, color-mix(in srgb, var(--accent) 24%, transparent) 0 1px, transparent 1.8px);
  background-size: auto, 82px 82px, 110px 110px;
}
body[data-theme="qinche"] {
  --bg: #050407; --bg-2: #15070d; --bg-3: #030305;
  --accent:#d9193f; --accent-2:#f3c7a2; --accent-3:#7a1028;
  --accent-soft:rgba(217,25,63,.26); --texture-a:rgba(217,25,63,.22); --texture-b:rgba(216,216,224,.10);
  --motif:"CRIMSON / N109";
}
body[data-theme="lishen"] {
  --bg:#06101a; --bg-2:#0c1b2a; --bg-3:#03080d;
  --accent:#86c7ff; --accent-2:#edf8ff; --accent-3:#5a82aa;
  --accent-soft:rgba(134,199,255,.20); --texture-a:rgba(134,199,255,.18); --texture-b:rgba(237,248,255,.12);
  --motif:"SNOW / SILVER";
}
body[data-theme="qiyu"] {
  --bg:#03151c; --bg-2:#10233b; --bg-3:#080615;
  --accent:#2bc9d9; --accent-2:#ff7f9c; --accent-3:#7b61ff;
  --accent-soft:rgba(43,201,217,.24); --texture-a:rgba(43,201,217,.20); --texture-b:rgba(255,127,156,.17);
  --motif:"SEA / COLOR";
}
body[data-theme="shenxinghui"] {
  --bg:#060817; --bg-2:#111739; --bg-3:#03040d;
  --accent:#b7b5ff; --accent-2:#ffe8a6; --accent-3:#6f8cff;
  --accent-soft:rgba(183,181,255,.22); --texture-a:rgba(183,181,255,.20); --texture-b:rgba(255,232,166,.14);
  --motif:"STAR / RETURN";
}
body[data-theme="xiayizhou"] {
  --bg:#07101a; --bg-2:#1c2230; --bg-3:#080606;
  --accent:#f0a64a; --accent-2:#8fd3ff; --accent-3:#d35a5f;
  --accent-soft:rgba(240,166,74,.24); --texture-a:rgba(240,166,74,.18); --texture-b:rgba(143,211,255,.14);
  --motif:"SKY / REUNION";
}
body[data-theme="qinche"]::before { background:
  linear-gradient(122deg, transparent 0 38%, rgba(217,25,63,.16) 38.3% 39%, transparent 39.4% 100%),
  radial-gradient(circle at 20% 18%, rgba(243,199,162,.18) 0 1px, transparent 1.8px),
  radial-gradient(circle at 78% 70%, rgba(217,25,63,.24) 0 1px, transparent 1.8px); background-size:auto, 96px 96px, 120px 120px; }
body[data-theme="lishen"]::before { background:
  linear-gradient(135deg, transparent 0 40%, rgba(237,248,255,.10) 40.2% 40.8%, transparent 41% 100%),
  radial-gradient(circle at 22% 20%, rgba(237,248,255,.34) 0 1px, transparent 2px),
  radial-gradient(circle at 70% 72%, rgba(134,199,255,.22) 0 1px, transparent 2px); background-size:auto, 72px 72px, 128px 128px; }
body[data-theme="qiyu"]::before { background:
  radial-gradient(ellipse at 15% 18%, rgba(43,201,217,.18), transparent 30%),
  radial-gradient(ellipse at 84% 26%, rgba(255,127,156,.16), transparent 28%),
  repeating-radial-gradient(ellipse at 50% 120%, transparent 0 28px, rgba(43,201,217,.08) 30px 32px); }
body[data-theme="shenxinghui"]::before { background:
  radial-gradient(circle at 18% 16%, rgba(255,232,166,.28) 0 1px, transparent 2px),
  radial-gradient(circle at 62% 28%, rgba(183,181,255,.28) 0 1px, transparent 2px),
  radial-gradient(circle at 82% 74%, rgba(255,255,255,.18) 0 1px, transparent 2px),
  linear-gradient(115deg, transparent 0 45%, rgba(183,181,255,.10) 45.2% 45.8%, transparent 46% 100%); background-size:96px 96px, 140px 140px, 118px 118px, auto; }
body[data-theme="xiayizhou"]::before { background:
  linear-gradient(150deg, transparent 0 42%, rgba(143,211,255,.12) 42.2% 42.8%, transparent 43% 100%),
  radial-gradient(circle at 18% 22%, rgba(240,166,74,.18), transparent 26%),
  radial-gradient(circle at 80% 72%, rgba(143,211,255,.16), transparent 30%); }

button, input { font: inherit; }
button { min-height: 46px; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset: 3px; }

.noise {
  pointer-events:none; position:fixed; inset:0; z-index:0; opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow { position: fixed; border-radius: 999px; filter: blur(80px); opacity: .42; pointer-events: none; z-index: 0; }
.glow-a { width: 42vw; height: 42vw; min-width: 280px; min-height: 280px; left: -12vw; top: 6vh; background: var(--accent); }
.glow-b { width: 38vw; height: 38vw; min-width: 240px; min-height: 240px; right: -10vw; bottom: 12vh; background: var(--accent-2); opacity: .25; }

.app-shell { position: relative; z-index: 2; }
.screen { display:none; min-height:100vh; width:100%; padding:24px; }
.screen-active { display:block; }
.hero-screen { position:relative; place-items:center; padding:48px 20px; }
.hero-screen.screen-active { display:grid; }
.glass-card {
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)), var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}
.hero-card { width:min(920px,100%); border-radius:34px; padding:clamp(28px,6vw,62px); position:relative; overflow:hidden; }
.hero-card::before, .question-card::before, .result-card::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent) top/100% 1px no-repeat,
    radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 38%);
}
.hero-card::after, .result-card::after {
  content: var(--motif);
  position: absolute;
  right: clamp(18px, 4vw, 46px);
  top: clamp(18px, 4vw, 38px);
  pointer-events: none;
  color: color-mix(in srgb, var(--accent-2) 52%, transparent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: .72;
}
.eyebrow { margin:0; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; }
.eyebrow.small { color:var(--accent-2); letter-spacing:.2em; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:800px; margin:16px 0 18px; font-family:"Noto Serif SC", serif; font-size:clamp(42px,9vw,88px); line-height:1.02; letter-spacing:-.055em; text-shadow:0 0 28px var(--accent-soft); }
.hero-lead { max-width:700px; color:var(--muted); font-size:clamp(16px,2vw,20px); line-height:1.75; }
.test-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:26px 0 12px; }
.test-tab { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.055); color:var(--muted); padding:12px 10px; min-height:54px; font-weight:800; touch-action:manipulation; }
.test-tab::before { content:""; position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 62%); transition:opacity .2s ease; }
.test-tab:hover::before, .test-tab.active::before { opacity:1; }
.test-tab.active { border-color: color-mix(in srgb, var(--accent) 72%, white 8%); color:white; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), rgba(255,255,255,.06)); box-shadow:0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent); }
.test-tab:nth-child(1) { --tab-accent:#d9193f; }
.test-tab:nth-child(2) { --tab-accent:#86c7ff; }
.test-tab:nth-child(3) { --tab-accent:#2bc9d9; }
.test-tab:nth-child(4) { --tab-accent:#b7b5ff; }
.test-tab:nth-child(5) { --tab-accent:#f0a64a; }
.tag-row { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.tag-row span, .pill { display:inline-flex; align-items:center; min-height:34px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.055); color:var(--muted); padding:7px 13px; font-size:13px; }
.tag-row span:first-child, .pill { border-color:color-mix(in srgb, var(--accent) 42%, transparent); background:color-mix(in srgb, var(--accent) 13%, rgba(255,255,255,.045)); color:color-mix(in srgb, var(--accent-2) 80%, white); }
.access-panel { border:1px solid var(--line); border-radius:26px; background:rgba(6,8,12,.5); padding:20px; }
.access-head { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.panel-kicker { margin:0 0 6px; color:var(--accent-2); font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.panel-desc { margin-bottom:0; color:var(--muted); line-height:1.65; }
.warning-box { margin:16px 0 0; border:1px solid color-mix(in srgb, var(--accent) 46%, transparent); border-radius:20px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255,255,255,.035)); padding:14px 16px; }
.warning-box strong { color:#fff; font-size:15px; }
.warning-box p { margin:7px 0 0; color:var(--muted); line-height:1.55; font-size:14px; }
.input-label { display:block; margin:18px 0 8px; color:var(--dim); font-size:13px; }
.access-form { display:grid; grid-template-columns:1fr auto; gap:12px; }
.code-input { min-height:56px; width:100%; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(255,255,255,.08); color:var(--ink); padding:0 16px; text-transform:uppercase; }
.code-input::placeholder { color:rgba(255,255,255,.34); }
.primary-btn,.ghost-btn,.option-btn { border-radius:18px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.primary-btn { border:0; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 74%, white), color-mix(in srgb, var(--accent) 62%, black)); color:white; padding:0 22px; font-weight:900; box-shadow:0 16px 34px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.24); letter-spacing:.02em; }
.primary-btn:hover { transform:translateY(-1px); box-shadow:0 20px 40px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.28); }
.primary-btn:active, .ghost-btn:active, .option-btn:active, .test-tab:active { transform:scale(.985); }
.ghost-btn { border:1px solid var(--line); background:rgba(255,255,255,.045); color:var(--ink); padding:0 18px; }
.ghost-btn:hover { border-color:color-mix(in srgb, var(--accent) 55%, white 0%); background:rgba(255,255,255,.075); }
button:disabled { opacity:.42; cursor:not-allowed; transform:none!important; }
.form-message { min-height:22px; margin:12px 0 0; color:var(--accent-2); line-height:1.5; }
.form-message.error { color:#ff9da7; }
.center { text-align:center; }
.disclaimer { margin:18px 0 0; color:var(--dim); font-size:13px; line-height:1.65; }
.quiz-screen { max-width:980px; margin:0 auto; padding-top:32px; }
.quiz-topbar { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:18px; }
.phase-text { color:var(--muted); margin:8px 0 0; }
.counter { border:1px solid var(--line); border-radius:999px; padding:9px 14px; color:var(--accent-2); font-weight:800; }
.progress-wrap { height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:20px; }
.progress-bar { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .25s ease; }
.question-card { position:relative; overflow:hidden; border-radius:30px; padding:clamp(22px,5vw,42px); }
.scene-label { color:var(--accent-2); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px; }
.question-card h2 { font-family:"Noto Serif SC", serif; font-size:clamp(25px,4vw,42px); line-height:1.25; margin-bottom:24px; }
.option-list { display:grid; gap:14px; }
.option-btn { position:relative; overflow:hidden; width:100%; text-align:left; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.04)); color:var(--ink); padding:18px 18px 18px 20px; }
.option-btn::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--accent), var(--accent-2)); opacity:.55; }
@media (hover:hover) { .option-btn:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--accent) 52%, white 0%); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.08)), rgba(255,255,255,.06)); } }
.option-title { display:block; font-weight:850; margin-bottom:7px; }
.option-desc { display:block; color:var(--muted); line-height:1.6; font-size:14px; }
.option-picked { border-color:color-mix(in srgb, var(--accent) 65%, white 5%)!important; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.08)), color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.04)))!important; box-shadow:0 0 20px color-mix(in srgb, var(--accent) 25%, transparent); }
.option-btn::before { transition:opacity .15s ease; }
.option-picked::before { opacity:1; }
.quiz-actions,.result-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:22px 0; }
.result-screen { max-width:960px; margin:0 auto; padding-top:32px; }
.result-card { position:relative; overflow:hidden; border-radius:34px; padding:clamp(24px,5vw,48px); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(16,16,22,.95)); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); box-shadow:var(--shadow); }
.result-hero { border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:22px; }
.serial { margin:12px 0 8px; color:var(--dim); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.result-hero h2 { margin:0 0 10px; font-family:"Noto Serif SC", serif; font-size:clamp(36px,8vw,72px); letter-spacing:-.05em; }
.result-subtitle { color:var(--muted); line-height:1.75; font-size:18px; }
.score-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0 28px; }
.score-item { border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.045); padding:13px; }
.score-item strong { display:block; color:var(--accent-2); margin-bottom:6px; font-size:13px; }
.score-bar { height:8px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.score-bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.result-section { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.result-section h3 { display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:12px; }
.result-section h3 span { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--accent); color:#fff; font-size:13px; }
.result-section p,.result-section li { color:var(--muted); line-height:1.8; }
.result-section ul { padding-left:20px; margin:0; }
.keyword-list { display:flex; flex-wrap:wrap; gap:9px; }
.keyword-chip { display:inline-flex; align-items:center; min-height:32px; border:1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius:999px; padding:6px 11px; color:color-mix(in srgb, var(--accent-2) 78%, white); background:color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.045)); font-size:13px; font-weight:800; }
.keyword-section h3 span { background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; }
.strength-section h3 span { background:color-mix(in srgb, var(--accent) 72%, black); }
.quote-section { border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:22px; padding:18px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255,255,255,.035)); }
.quote-section h3 { color:color-mix(in srgb, var(--accent-2) 86%, white); }
.quote-section h3 span { background:var(--accent-2); color:#22170d; }
.quote-section p { margin-bottom:0; color:#fff7ed; font-family:"Noto Serif SC", serif; font-size:20px; line-height:1.7; }
.risk-section h3 span { background:#e96c7c; }
.action-section h3 span { background:var(--accent-2); color:#21180c; }

@media (max-width: 760px) {
  body::before { opacity:.30; }
  .glow { filter:blur(58px); opacity:.34; }
  .glow-a { width:72vw; height:72vw; left:-36vw; top:2vh; }
  .glow-b { width:68vw; height:68vw; right:-34vw; bottom:6vh; opacity:.20; }
  .screen { min-height:100dvh; padding:14px; padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)); }
  .hero-screen { align-items:start; padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(22px, env(safe-area-inset-bottom)); }
  .hero-card { width:100%; padding:22px 15px 18px; border-radius:24px; }
  .hero-card::after, .result-card::after { display:none; }
  .eyebrow { font-size:10px; letter-spacing:.20em; }
  h1 { margin:12px 0 12px; font-size:clamp(31px, 10.4vw, 46px); line-height:1.08; letter-spacing:-.045em; text-shadow:0 0 20px var(--accent-soft); }
  .hero-lead { font-size:15px; line-height:1.62; margin-bottom:0; }
  .test-tabs { display:flex; grid-template-columns:none; gap:8px; margin:18px -2px 10px; overflow-x:auto; overscroll-behavior-x:contain; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .test-tabs::-webkit-scrollbar { display:none; }
  .test-tab { flex:0 0 auto; min-width:72px; min-height:46px; border-radius:999px; padding:9px 13px; font-size:14px; scroll-snap-align:start; }
  .tag-row { gap:8px; margin:14px 0 16px; }
  .tag-row span, .pill { min-height:30px; padding:6px 10px; font-size:12px; }
  .access-panel { border-radius:22px; padding:15px; }
  .access-head,.quiz-topbar { flex-direction:column; gap:10px; }
  .panel-kicker { font-size:10px; margin-bottom:4px; }
  .panel-desc { font-size:14px; line-height:1.55; }
  .warning-box { margin-top:12px; border-radius:16px; padding:12px; }
  .warning-box strong { font-size:14px; }
  .warning-box p { font-size:13px; line-height:1.48; margin-top:6px; }
  .input-label { margin-top:14px; }
  .access-form { grid-template-columns:1fr; gap:10px; }
  .code-input { min-height:52px; border-radius:16px; font-size:16px; }
  .primary-btn,.ghost-btn { min-height:50px; border-radius:16px; }
  .disclaimer { margin-top:14px; font-size:12px; line-height:1.55; }
  .quiz-screen,.result-screen { padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(26px, env(safe-area-inset-bottom)); }
  .quiz-topbar { margin-bottom:14px; }
  .phase-text { font-size:14px; line-height:1.55; }
  .counter { align-self:flex-start; padding:7px 12px; font-size:13px; }
  .progress-wrap { height:8px; margin-bottom:14px; }
  .question-card { border-radius:24px; padding:20px 15px; }
  .scene-label { font-size:11px; letter-spacing:.13em; }
  .question-card h2 { font-size:clamp(23px, 6.6vw, 31px); line-height:1.32; margin-bottom:18px; }
  .option-list { gap:11px; }
  .option-btn { min-height:72px; border-radius:17px; padding:15px 15px 15px 17px; }
  .option-title { font-size:15px; line-height:1.35; margin-bottom:5px; }
  .option-desc { font-size:13px; line-height:1.5; }
  .quiz-actions,.result-actions { align-items:stretch; gap:10px; margin:16px 0 6px; }
  .result-actions button,.quiz-actions button { width:100%; }
  .result-card { border-radius:24px; padding:21px 15px; }
  .result-hero { padding-bottom:18px; margin-bottom:18px; }
  .serial { font-size:12px; line-height:1.45; }
  .result-hero h2 { font-size:clamp(32px, 9vw, 48px); line-height:1.08; }
  .result-subtitle { font-size:15px; line-height:1.65; }
  .score-grid { grid-template-columns:repeat(2,1fr); gap:8px; margin:14px 0 20px; }
  .score-item { border-radius:15px; padding:11px; }
  .score-item strong { font-size:12px; }
  .result-section { padding-top:16px; margin-top:16px; }
  .result-section h3 { font-size:16px; margin-bottom:9px; }
  .result-section h3 span { width:25px; height:25px; font-size:12px; }
  .result-section p,.result-section li { font-size:14px; line-height:1.75; }
  .keyword-list { gap:7px; }
  .keyword-chip { min-height:30px; padding:5px 9px; font-size:12px; }
  .quote-section { border-radius:18px; padding:14px; }
  .quote-section p { font-size:17px; line-height:1.65; }
}

@media (max-width: 420px) {
  .screen { padding:12px; }
  .hero-card { padding:20px 13px 16px; border-radius:22px; }
  h1 { font-size:clamp(29px, 10.8vw, 40px); }
  .hero-lead { font-size:14px; }
  .test-tab { min-width:68px; padding-inline:12px; }
  .tag-row span:nth-child(4) { display:none; }
  .access-panel { padding:13px; }
  .warning-box p { font-size:12.5px; }
  .question-card h2 { font-size:clamp(22px, 6.8vw, 28px); }
  .option-btn { min-height:70px; padding:14px 14px 14px 16px; }
  .score-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

/* === INK WASH PALETTE OVERRIDE · copied from provided tokens === */
:root {
  color-scheme: light;
  --background: rgb(233, 228, 216);
  --foreground: rgb(30, 30, 30);
  --card-token: rgb(244, 239, 228);
  --primary-token: rgb(46, 46, 46);
  --primary-foreground-token: rgb(230, 228, 215);
  --secondary-token: rgb(216, 210, 196);
  --muted-token: rgb(207, 200, 184);
  --muted-foreground-token: rgb(94, 90, 82);
  --accent-token: rgb(230, 228, 215);
  --border-token: rgb(210, 203, 187);
  --chart-red: rgb(242, 106, 75);
  --chart-dark: rgb(30, 30, 30);
  --chart-mid: rgb(94, 90, 82);
  --chart-soft: rgb(168, 159, 143);
  --chart-pale: rgb(207, 200, 184);
  --bg: rgb(233, 228, 216);
  --bg-2: rgb(227, 221, 207);
  --bg-3: rgb(216, 210, 196);
  --ink: rgb(30, 30, 30);
  --muted: rgba(30, 30, 30, .72);
  --dim: rgba(94, 90, 82, .82);
  --line: rgb(210, 203, 187);
  --accent: rgb(46, 46, 46);
  --accent-2: rgb(94, 90, 82);
  --accent-3: rgb(242, 106, 75);
  --accent-soft: rgba(30, 30, 30, .08);
  --jade: rgb(94, 90, 82);
  --jade-soft: rgba(94, 90, 82, .10);
  --card: rgba(244, 239, 228, .92);
  --card-strong: rgb(244, 239, 228);
  --paper: rgba(244, 239, 228, .94);
  --paper-strong: rgb(244, 239, 228);
  --shadow: 0px 4px 10px 0px rgba(0,0,0,.10), 0px 1px 2px -1px rgba(0,0,0,.10);
  --motif: "INK WASH / CELESTIAL FILE";
}

html { background: var(--background); }
body {
  color: var(--foreground);
  letter-spacing: .01em;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(30,30,30,.055), transparent 34%),
    radial-gradient(ellipse at 88% 18%, rgba(94,90,82,.06), transparent 32%),
    radial-gradient(ellipse at 52% 108%, rgba(168,159,143,.15), transparent 44%),
    linear-gradient(135deg, rgb(233,228,216) 0%, rgb(227,221,207) 54%, rgb(216,210,196) 100%);
}
body::before {
  opacity:.42;
  background:
    radial-gradient(ellipse at 12% 24%, rgba(30,30,30,.08), transparent 30%),
    radial-gradient(ellipse at 86% 16%, rgba(94,90,82,.06), transparent 32%),
    radial-gradient(ellipse at 64% 76%, rgba(30,30,30,.055), transparent 36%),
    repeating-linear-gradient(0deg, rgba(30,30,30,.018) 0 1px, transparent 1px 8px);
}
body::after {
  opacity:.20;
  background:
    radial-gradient(ellipse at 18% 76%, transparent 0 36%, rgba(30,30,30,.075) 37%, transparent 45%),
    radial-gradient(ellipse at 78% 80%, transparent 0 30%, rgba(94,90,82,.075) 31%, transparent 42%);
}
.noise { opacity:.10; mix-blend-mode:multiply; }
.glow { display:none; }

.glass-card,
.question-card,
.result-card,
.access-panel,
.warning-box,
.score-item,
.result-section:not(.quote-section),
.option-btn,
.test-tab,
.code-input {
  border-color: var(--border-token)!important;
  background: rgba(244,239,228,.92)!important;
  box-shadow: var(--shadow)!important;
  backdrop-filter: none!important;
}
.hero-card::before,
.question-card::before,
.result-card::before {
  background:
    linear-gradient(90deg, transparent, rgba(30,30,30,.20), transparent) top/100% 1px no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(30,30,30,.045), transparent 42%)!important;
}
.hero-card::after,
.result-card::after {
  color: rgba(94,90,82,.42)!important;
  text-shadow:none!important;
}
.eyebrow,
.panel-kicker,
.scene-label,
.counter,
.form-message {
  color: var(--muted-foreground-token)!important;
  text-shadow:none!important;
}
h1,
.result-hero h2,
.question-card h2,
.option-title,
.result-section h3,
.warning-box strong {
  color: var(--foreground)!important;
  text-shadow:none!important;
}
h1::before {
  border-color: var(--border-token)!important;
  background: var(--accent-token)!important;
  color: var(--primary-token)!important;
  border-radius: .5rem!important;
}
.hero-lead,
.panel-desc,
.result-subtitle,
.phase-text,
.result-section p,
.result-section li,
.option-desc,
.disclaimer {
  color: var(--muted-foreground-token)!important;
}
.tag-row span,
.pill,
.keyword-chip,
.keyword-list span {
  border-color: var(--border-token)!important;
  background: var(--accent-token)!important;
  color: var(--primary-token)!important;
  box-shadow:none!important;
}
.primary-btn {
  color: var(--primary-foreground-token)!important;
  background: var(--primary-token)!important;
  border:1px solid var(--primary-token)!important;
  box-shadow: var(--shadow-sm, 0 4px 10px rgba(0,0,0,.10))!important;
}
.ghost-btn {
  color: var(--secondary-foreground, rgb(46,46,46))!important;
  background: var(--secondary-token)!important;
  border-color: var(--border-token)!important;
}
.test-tab.active,
.option-picked,
.ghost-btn:hover {
  border-color: var(--primary-token)!important;
  background: var(--accent-token)!important;
  box-shadow: var(--shadow)!important;
}
.progress-wrap,
.score-track {
  background: var(--muted-token)!important;
  border-color: var(--border-token)!important;
}
.progress-bar,
.score-track i {
  background: linear-gradient(90deg, var(--chart-dark), var(--chart-mid), var(--chart-soft))!important;
  box-shadow:none!important;
}
.option-btn::before {
  background: var(--primary-token)!important;
  opacity:.82!important;
}
.offer-section,
.position-section,
.passive-section {
  border-color: var(--border-token)!important;
  background: rgb(244,239,228)!important;
}
.result-section h3 span,
.offer-section h3 span,
.position-section h3 span,
.passive-section h3 span,
.action-section h3 span,
.risk-section h3 span {
  background: var(--primary-token)!important;
  color: var(--primary-foreground-token)!important;
  box-shadow:none!important;
}
.quote-section {
  border-color: var(--border-token)!important;
  background: rgb(230,228,215)!important;
}
.quote-section h3 { color: var(--foreground)!important; }
.quote-section p { color: var(--foreground)!important; text-shadow:none!important; }
.score-top { color: var(--muted-foreground-token)!important; }
.score-top b { color: var(--foreground)!important; }
.code-input { color: var(--foreground)!important; }
.code-input::placeholder { color: rgba(94,90,82,.72)!important; }

@media (hover:hover) {
  .option-btn:hover {
    border-color: var(--primary-token)!important;
    background: rgb(230,228,215)!important;
  }
}

/* === INK WASH CHINESE STYLE v1 === */
:root {
  color-scheme: light;
  --bg: #f5efdf;
  --bg-2: #eee4cf;
  --bg-3: #ded0b2;
  --ink: #241d16;
  --muted: rgba(36, 29, 22, 0.74);
  --dim: rgba(36, 29, 22, 0.50);
  --line: rgba(82, 62, 38, 0.18);
  --accent: #9b6a32;
  --accent-2: #3f5f52;
  --accent-3: #9f3d2f;
  --accent-soft: rgba(155, 106, 50, 0.14);
  --jade: #3f5f52;
  --jade-soft: rgba(63, 95, 82, 0.12);
  --card: rgba(255, 252, 242, 0.78);
  --card-strong: rgba(255, 252, 242, 0.94);
  --paper: rgba(255, 252, 242, 0.78);
  --paper-strong: rgba(255, 252, 242, 0.96);
  --shadow: 0 24px 70px rgba(68, 48, 25, 0.16), 0 4px 18px rgba(68, 48, 25, 0.08);
  --motif: "水墨仙籍 · 本命仙位";
}

html { background:#f5efdf; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(70, 92, 82, .18), transparent 34%),
    radial-gradient(ellipse at 88% 22%, rgba(155, 106, 50, .12), transparent 32%),
    radial-gradient(ellipse at 58% 110%, rgba(50, 45, 36, .10), transparent 42%),
    linear-gradient(135deg, #f8f1df 0%, #efe4cf 48%, #e0d2b5 100%);
}
body::before {
  opacity:.52;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(35, 42, 38, .15), transparent 28%),
    radial-gradient(ellipse at 84% 16%, rgba(35, 42, 38, .10), transparent 34%),
    radial-gradient(ellipse at 68% 76%, rgba(35, 42, 38, .12), transparent 32%),
    linear-gradient(115deg, transparent 0 42%, rgba(123, 92, 49, .09) 42.2% 42.8%, transparent 43% 100%),
    repeating-linear-gradient(0deg, rgba(36,29,22,.025) 0 1px, transparent 1px 7px);
  background-size:auto, auto, auto, auto, auto;
  filter: blur(.2px);
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.30;
  background:
    radial-gradient(ellipse at 18% 74%, transparent 0 35%, rgba(36,29,22,.10) 36%, transparent 44%),
    radial-gradient(ellipse at 78% 78%, transparent 0 30%, rgba(63,95,82,.12) 31%, transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 34%);
}

.noise { opacity:.13; mix-blend-mode:multiply; }
.glow { filter: blur(70px); opacity:.16; }
.glow-a { background:#4f6358; }
.glow-b { background:#b78b49; }

.glass-card,
.question-card,
.result-card {
  border:1px solid rgba(82, 62, 38, .22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,252,242,.72)),
    radial-gradient(ellipse at 50% 0%, rgba(155,106,50,.10), transparent 42%),
    rgba(255,252,242,.78);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(10px) saturate(1.02);
}
.hero-card,
.question-card,
.result-card { border-radius:28px; }
.hero-card::before,
.question-card::before,
.result-card::before {
  background:
    linear-gradient(90deg, transparent, rgba(82,62,38,.24), transparent) top/100% 1px no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(155,106,50,.12), transparent 42%);
}
.hero-card::after,
.result-card::after {
  color: rgba(63, 54, 39, .40);
  text-shadow:none;
  font-family:"Noto Serif SC", serif;
  letter-spacing:.18em;
}

.eyebrow,
.panel-kicker,
.scene-label {
  color:#6c4930;
  text-shadow:none;
}
h1,
.result-hero h2,
.question-card h2 {
  color:#211a13;
  font-family:"Noto Serif SC", serif;
  text-shadow:none;
  letter-spacing:-.035em;
}
h1::before {
  content:"水墨仙籍 · 本命仙位";
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 14px;
  padding:7px 12px;
  border:1px solid rgba(159,61,47,.28);
  border-radius:4px 14px 4px 14px;
  background:rgba(159,61,47,.08);
  color:#8c3027;
  font-family:"Noto Serif SC", serif;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}
.hero-lead,
.panel-desc,
.result-subtitle,
.phase-text,
.result-section p,
.result-section li,
.option-desc {
  color:rgba(36,29,22,.74);
}

.tag-row span,
.pill,
.keyword-chip,
.keyword-list span {
  border:1px solid rgba(82,62,38,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(246,238,220,.58));
  color:#5b3f27;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.keyword-list span {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  border-radius:999px;
  padding:6px 11px;
  font-size:13px;
  font-weight:800;
}
.tag-row span:first-child,
.pill {
  border-color:rgba(159,61,47,.25);
  background:rgba(159,61,47,.08);
  color:#8c3027;
}

.access-panel,
.warning-box,
.score-item,
.result-section:not(.quote-section) {
  border:1px solid rgba(82,62,38,.17);
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,252,242,.66)),
    rgba(255,252,242,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56);
}
.warning-box {
  border-color:rgba(63,95,82,.22);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(63,95,82,.11), transparent 44%),
    rgba(255,252,242,.66);
}
.warning-box strong { color:#241d16; }

.primary-btn {
  color:#fffaf0;
  background:
    linear-gradient(180deg, #9f3d2f 0%, #843327 58%, #5d241c 100%);
  border:1px solid rgba(159,61,47,.42);
  box-shadow:0 14px 30px rgba(159,61,47,.18), inset 0 1px 0 rgba(255,255,255,.24);
}
.ghost-btn {
  color:#2b2118;
  border-color:rgba(82,62,38,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,252,242,.60));
}
.ghost-btn:hover,
.test-tab.active,
.option-picked {
  border-color:rgba(159,61,47,.38)!important;
  box-shadow:0 10px 26px rgba(90,63,34,.12), inset 0 1px 0 rgba(255,255,255,.62);
}

.test-tabs { grid-template-columns:1fr; max-width:220px; }
.test-tab {
  border-radius:999px;
  color:#5b3f27;
  background:linear-gradient(180deg, rgba(255,255,255,.48), rgba(246,238,220,.66));
}
.test-tab.active {
  color:#8c3027;
  background:rgba(159,61,47,.08);
}

.progress-wrap {
  background:rgba(82,62,38,.10);
  border:1px solid rgba(82,62,38,.14);
}
.progress-bar {
  background:linear-gradient(90deg, #3f5f52, #9b6a32, #9f3d2f);
  box-shadow:none;
}
.counter {
  border-color:rgba(82,62,38,.20);
  color:#6c4930;
  background:rgba(255,252,242,.64);
}

.option-btn {
  border-color:rgba(82,62,38,.18);
  background:
    linear-gradient(90deg, rgba(63,95,82,.07), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,252,242,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.option-btn::before {
  width:4px;
  background:linear-gradient(180deg, #3f5f52, #9b6a32, #9f3d2f);
  opacity:.65;
}
.option-title { color:#241d16; }
@media (hover:hover) {
  .option-btn:hover {
    border-color:rgba(159,61,47,.32);
    background:
      linear-gradient(90deg, rgba(159,61,47,.07), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,252,242,.72));
  }
}
.option-picked {
  background:
    linear-gradient(90deg, rgba(159,61,47,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,245,230,.76))!important;
}

.result-card {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(155,106,50,.12), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,252,242,.78)),
    rgba(255,252,242,.82);
}
.result-hero { border-bottom-color:rgba(82,62,38,.18); }
.serial { color:rgba(36,29,22,.45); }
.result-section {
  border-top:1px solid rgba(82,62,38,.14);
  border-radius:20px;
  padding:18px;
  margin-top:16px;
}
.result-section h3 { color:#241d16; }
.result-section h3 span {
  background:linear-gradient(180deg, #9f3d2f, #773027);
  color:#fffaf0;
  box-shadow:none;
}
.offer-section,
.position-section,
.passive-section {
  border-color:rgba(63,95,82,.22)!important;
  background:
    linear-gradient(135deg, rgba(63,95,82,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,252,242,.68))!important;
}
.offer-section h3 span,
.position-section h3 span,
.passive-section h3 span {
  background:linear-gradient(180deg, #3f5f52, #2d493f);
  color:#fffaf0;
}
.quote-section {
  border-color:rgba(159,61,47,.28);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(159,61,47,.10), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,245,230,.70));
}
.quote-section h3 { color:#8c3027; }
.quote-section h3 span { background:#9f3d2f; color:#fffaf0; }
.quote-section p {
  color:#211a13;
  text-shadow:none;
}
.risk-section h3 span { background:linear-gradient(180deg,#9f6a54,#704635); color:#fffaf0; }
.action-section h3 span { background:linear-gradient(180deg,#9b6a32,#6b4826); color:#fffaf0; }

.score-top { display:flex; justify-content:space-between; gap:10px; color:rgba(36,29,22,.70); font-size:13px; margin-bottom:9px; }
.score-top b { color:#8c3027; }
.score-track { height:8px; border-radius:999px; overflow:hidden; background:rgba(82,62,38,.12); }
.score-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3f5f52,#9b6a32,#9f3d2f); box-shadow:none; }

.code-input {
  border-color:rgba(82,62,38,.18);
  background:rgba(255,252,242,.72);
  color:#241d16;
}
.code-input::placeholder { color:rgba(36,29,22,.36); }
.form-message { color:#6c4930; }
.disclaimer { color:rgba(36,29,22,.48); }

@media (max-width: 760px) {
  body::after { opacity:.22; }
  .hero-card,.question-card,.result-card { border-radius:22px; }
  h1::before { font-size:11px; padding:6px 9px; margin-bottom:10px; }
  .test-tabs { max-width:none; }
  .result-section { padding:14px; border-radius:17px; }
}

/* === XIANXIA VISUAL SYSTEM v1 === */
:root {
  --bg: #050711;
  --bg-2: #0b1020;
  --bg-3: #020308;
  --ink: #fff8df;
  --muted: rgba(255, 248, 223, 0.78);
  --dim: rgba(255, 248, 223, 0.52);
  --line: rgba(236, 206, 128, 0.20);
  --accent: #d8ad55;
  --accent-2: #fff0b8;
  --accent-3: #73d4c7;
  --accent-soft: rgba(216, 173, 85, 0.22);
  --jade: #8ee6d5;
  --jade-soft: rgba(142, 230, 213, 0.16);
  --paper: rgba(26, 22, 38, 0.82);
  --paper-strong: rgba(33, 28, 44, 0.96);
  --card: rgba(13, 15, 28, 0.76);
  --card-strong: rgba(16, 18, 34, 0.96);
  --shadow: 0 34px 110px rgba(0, 0, 0, 0.58), 0 0 38px rgba(216, 173, 85, 0.10);
  --motif: "CELESTIAL / JADE SLIP";
}

html { background:#020308; }
body {
  background:
    radial-gradient(circle at 18% 8%, rgba(216, 173, 85, .18), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(142, 230, 213, .13), transparent 32%),
    radial-gradient(circle at 50% 104%, rgba(104, 65, 170, .18), transparent 42%),
    linear-gradient(145deg, #050711 0%, #0b1020 48%, #020308 100%);
}
body::before {
  opacity: .50;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,240,184,.36) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 28%, rgba(142,230,213,.28) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 74%, rgba(255,255,255,.18) 0 1px, transparent 1.8px),
    repeating-linear-gradient(135deg, transparent 0 34px, rgba(216,173,85,.045) 35px 36px, transparent 37px 72px),
    radial-gradient(ellipse at 50% 112%, rgba(216,173,85,.10), transparent 46%);
  background-size: 118px 118px, 156px 156px, 96px 96px, auto, auto;
}
body::after {
  content:"";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events:none;
  opacity:.24;
  background:
    radial-gradient(ellipse at 18% 72%, transparent 0 34%, rgba(255,255,255,.11) 35%, transparent 43%),
    radial-gradient(ellipse at 76% 82%, transparent 0 28%, rgba(142,230,213,.10) 29%, transparent 39%),
    radial-gradient(ellipse at 50% 8%, rgba(255,240,184,.08), transparent 42%);
  filter: blur(.2px);
}

.noise { opacity:.08; mix-blend-mode: screen; }
.glow { filter: blur(96px); }
.glow-a { background: #d8ad55; opacity:.32; }
.glow-b { background: #73d4c7; opacity:.20; }

.glass-card,
.result-card,
.access-panel,
.question-card,
.score-item,
.result-section,
.option-btn,
.test-tab,
.quote-section {
  position: relative;
}
.glass-card,
.question-card,
.result-card {
  border: 1px solid rgba(236, 206, 128, .26);
  background:
    linear-gradient(180deg, rgba(255, 248, 223, .085), rgba(255, 248, 223, .028)),
    radial-gradient(circle at 50% 0%, rgba(216,173,85,.15), transparent 44%),
    rgba(9, 11, 24, .82);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(24px) saturate(1.08);
}
.hero-card,
.question-card,
.result-card {
  border-radius: 32px;
}
.hero-card::before,
.question-card::before,
.result-card::before {
  background:
    linear-gradient(90deg, transparent, rgba(255,240,184,.42), transparent) top/100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(142,230,213,.20), transparent) bottom/100% 1px no-repeat,
    radial-gradient(circle at 50% 0%, rgba(216,173,85,.20), transparent 42%);
}
.hero-card::after,
.result-card::after {
  color: rgba(255, 240, 184, .58);
  text-shadow: 0 0 18px rgba(216,173,85,.24);
}

.eyebrow,
.panel-kicker,
.scene-label {
  color: var(--jade);
  text-shadow: 0 0 18px rgba(142,230,213,.18);
}
h1,
.result-hero h2,
.question-card h2 {
  font-family: "Noto Serif SC", serif;
  letter-spacing: -.035em;
  text-shadow: 0 0 24px rgba(216,173,85,.22), 0 1px 0 rgba(0,0,0,.5);
}
h1::before {
  content:"天庭玉简 · 本命仙位";
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 14px;
  padding:7px 12px;
  border:1px solid rgba(216,173,85,.28);
  border-radius:999px;
  background:rgba(216,173,85,.08);
  color:var(--accent-2);
  font-family:Inter, system-ui, sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hero-lead,
.panel-desc,
.result-subtitle,
.phase-text,
.result-section p,
.result-section li,
.option-desc {
  color: rgba(255, 248, 223, .78);
}

.tag-row span,
.pill,
.keyword-chip,
.keyword-list span {
  border:1px solid rgba(216,173,85,.28);
  background:
    linear-gradient(180deg, rgba(216,173,85,.13), rgba(255,255,255,.035));
  color: color-mix(in srgb, var(--accent-2) 86%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.keyword-list span {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  border-radius:999px;
  padding:6px 11px;
  font-size:13px;
  font-weight:800;
}

.access-panel,
.warning-box,
.score-item,
.result-section:not(.quote-section) {
  border:1px solid rgba(236,206,128,.20);
  background:
    linear-gradient(180deg, rgba(255,248,223,.055), rgba(255,248,223,.024)),
    rgba(6,8,18,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.access-panel { border-radius:26px; }
.warning-box {
  border-color: rgba(142,230,213,.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(142,230,213,.14), transparent 44%),
    rgba(8, 13, 24, .62);
}

.primary-btn {
  color:#201503;
  background:
    linear-gradient(180deg, #fff2b8 0%, #d8ad55 54%, #9c6d24 100%);
  box-shadow:0 16px 38px rgba(216,173,85,.24), inset 0 1px 0 rgba(255,255,255,.48);
  border:1px solid rgba(255,240,184,.48);
}
.ghost-btn {
  color:var(--ink);
  border-color:rgba(236,206,128,.24);
  background:linear-gradient(180deg, rgba(255,248,223,.065), rgba(255,248,223,.025));
}
.ghost-btn:hover,
.test-tab.active,
.option-picked {
  border-color:rgba(255,240,184,.50)!important;
  box-shadow:0 0 28px rgba(216,173,85,.20), inset 0 1px 0 rgba(255,255,255,.08);
}

.test-tabs { grid-template-columns:1fr; max-width:220px; }
.test-tab {
  border-radius:999px;
  color:var(--accent-2);
  background:linear-gradient(180deg, rgba(216,173,85,.14), rgba(255,255,255,.035));
}

.progress-wrap {
  background:rgba(255,248,223,.09);
  border:1px solid rgba(236,206,128,.16);
}
.progress-bar {
  background:linear-gradient(90deg, #73d4c7, #d8ad55, #fff2b8);
  box-shadow:0 0 18px rgba(216,173,85,.35);
}
.counter {
  border-color:rgba(236,206,128,.24);
  color:var(--accent-2);
  background:rgba(216,173,85,.08);
}

.option-btn {
  border-color:rgba(236,206,128,.20);
  background:
    linear-gradient(90deg, rgba(142,230,213,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,248,223,.065), rgba(255,248,223,.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.option-btn::before {
  width:4px;
  background:linear-gradient(180deg, var(--jade), var(--accent-2), var(--accent));
  opacity:.75;
}
.option-title { color:#fff8df; }
@media (hover:hover) {
  .option-btn:hover {
    border-color:rgba(255,240,184,.44);
    background:
      linear-gradient(90deg, rgba(142,230,213,.13), transparent 34%),
      linear-gradient(180deg, rgba(216,173,85,.15), rgba(255,255,255,.04));
  }
}

.result-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(216,173,85,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,248,223,.075), rgba(255,248,223,.025)),
    rgba(7, 9, 21, .94);
}
.result-hero {
  border-bottom-color:rgba(236,206,128,.22);
}
.result-section {
  border-top:1px solid rgba(236,206,128,.20);
  border-radius:20px;
  padding:18px;
  margin-top:16px;
}
.result-section h3 {
  color:#fff7df;
}
.result-section h3 span {
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  color:#211608;
  box-shadow:0 0 16px rgba(216,173,85,.24);
}
.offer-section,
.position-section,
.passive-section {
  border-color:rgba(142,230,213,.24)!important;
  background:
    linear-gradient(135deg, rgba(142,230,213,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,248,223,.065), rgba(255,255,255,.025))!important;
}
.offer-section h3 span,
.position-section h3 span,
.passive-section h3 span {
  background:linear-gradient(180deg, #bff7ec, #73d4c7);
  color:#06211e;
}
.quote-section {
  border-color:rgba(255,240,184,.36);
  background:
    radial-gradient(circle at 100% 0%, rgba(216,173,85,.18), transparent 44%),
    linear-gradient(180deg, rgba(216,173,85,.13), rgba(255,255,255,.035));
}
.quote-section p {
  color:#fff7df;
  text-shadow:0 0 18px rgba(216,173,85,.18);
}
.risk-section h3 span { background:linear-gradient(180deg,#e9a3a3,#b86161); color:#fff; }
.action-section h3 span { background:linear-gradient(180deg,#fff2b8,#d8ad55); color:#211608; }

.score-item {
  border-radius:18px;
}
.score-top { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px; margin-bottom:9px; }
.score-top b { color:var(--accent-2); }
.score-track { height:8px; border-radius:999px; overflow:hidden; background:rgba(255,248,223,.10); }
.score-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--jade),var(--accent-2)); box-shadow:0 0 14px rgba(142,230,213,.25); }

@media (max-width: 760px) {
  body::after { opacity:.18; }
  .hero-card,.question-card,.result-card { border-radius:24px; }
  h1::before { font-size:10px; padding:6px 10px; margin-bottom:10px; }
  .test-tabs { max-width:none; }
  .result-section { padding:14px; border-radius:18px; }
}

/* FINAL PALETTE LOCK: user-provided ink wash tokens */
:root {
  color-scheme: light;
  --bg: rgb(233, 228, 216) !important;
  --bg-2: rgb(227, 221, 207) !important;
  --bg-3: rgb(216, 210, 196) !important;
  --ink: rgb(30, 30, 30) !important;
  --muted: rgb(94, 90, 82) !important;
  --dim: rgb(94, 90, 82) !important;
  --line: rgb(210, 203, 187) !important;
  --accent: rgb(46, 46, 46) !important;
  --accent-2: rgb(94, 90, 82) !important;
  --accent-3: rgb(242, 106, 75) !important;
  --accent-soft: rgba(30, 30, 30, .08) !important;
  --jade: rgb(94, 90, 82) !important;
  --card: rgba(244, 239, 228, .94) !important;
  --card-strong: rgb(244, 239, 228) !important;
  --shadow: 0px 4px 10px 0px rgba(0,0,0,.10), 0px 1px 2px -1px rgba(0,0,0,.10) !important;
}
html { background: rgb(233, 228, 216) !important; }
body {
  color: rgb(30,30,30) !important;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(30,30,30,.055), transparent 34%),
    radial-gradient(ellipse at 88% 18%, rgba(94,90,82,.06), transparent 32%),
    radial-gradient(ellipse at 52% 108%, rgba(168,159,143,.15), transparent 44%),
    linear-gradient(135deg, rgb(233,228,216) 0%, rgb(227,221,207) 54%, rgb(216,210,196) 100%) !important;
}
body::before {
  opacity:.34 !important;
  background:
    radial-gradient(ellipse at 12% 24%, rgba(30,30,30,.08), transparent 30%),
    radial-gradient(ellipse at 86% 16%, rgba(94,90,82,.06), transparent 32%),
    radial-gradient(ellipse at 64% 76%, rgba(30,30,30,.055), transparent 36%),
    repeating-linear-gradient(0deg, rgba(30,30,30,.018) 0 1px, transparent 1px 8px) !important;
}
body::after { opacity:.16 !important; background: radial-gradient(ellipse at 22% 78%, transparent 0 36%, rgba(30,30,30,.07) 37%, transparent 45%) !important; }
.glow { display:none !important; }
.glass-card,
.question-card,
.result-card,
.access-panel,
.warning-box,
.score-item,
.result-section:not(.quote-section),
.option-btn,
.test-tab,
.code-input {
  border-color: rgb(210,203,187) !important;
  background: rgb(244,239,228) !important;
  box-shadow: 0px 4px 10px 0px rgba(0,0,0,.10), 0px 1px 2px -1px rgba(0,0,0,.10) !important;
  backdrop-filter: none !important;
}
.hero-card::before,
.question-card::before,
.result-card::before {
  background: linear-gradient(90deg, transparent, rgba(30,30,30,.18), transparent) top/100% 1px no-repeat !important;
}
.hero-card::after,
.result-card::after { color: rgba(94,90,82,.42) !important; text-shadow:none !important; }
.eyebrow,
.panel-kicker,
.scene-label,
.counter,
.form-message { color: rgb(94,90,82) !important; text-shadow:none !important; }
h1,
.result-hero h2,
.question-card h2,
.option-title,
.result-section h3,
.warning-box strong { color: rgb(30,30,30) !important; text-shadow:none !important; }
h1::before {
  border-color: rgb(210,203,187) !important;
  background: rgb(230,228,215) !important;
  color: rgb(46,46,46) !important;
  border-radius:.5rem !important;
}
.hero-lead,
.panel-desc,
.result-subtitle,
.phase-text,
.result-section p,
.result-section li,
.option-desc,
.disclaimer { color: rgb(94,90,82) !important; }
.tag-row span,
.pill,
.keyword-chip,
.keyword-list span {
  border-color: rgb(210,203,187) !important;
  background: rgb(230,228,215) !important;
  color: rgb(46,46,46) !important;
  box-shadow:none !important;
}
.primary-btn {
  color: rgb(230,228,215) !important;
  background: rgb(46,46,46) !important;
  border:1px solid rgb(46,46,46) !important;
  box-shadow:0px 4px 10px 0px rgba(0,0,0,.10) !important;
}
.ghost-btn {
  color: rgb(46,46,46) !important;
  background: rgb(216,210,196) !important;
  border-color: rgb(210,203,187) !important;
}
.test-tab.active,
.option-picked,
.ghost-btn:hover {
  border-color: rgb(46,46,46) !important;
  background: rgb(230,228,215) !important;
  box-shadow:0px 4px 10px 0px rgba(0,0,0,.10) !important;
}
.progress-wrap,
.score-track { background: rgb(207,200,184) !important; border-color: rgb(210,203,187) !important; }
.progress-bar,
.score-track i { background: linear-gradient(90deg, rgb(30,30,30), rgb(94,90,82), rgb(168,159,143)) !important; box-shadow:none !important; }
.option-btn::before { background: rgb(46,46,46) !important; opacity:.82 !important; }
.offer-section,
.position-section,
.passive-section { border-color: rgb(210,203,187) !important; background: rgb(244,239,228) !important; }
.result-section h3 span,
.offer-section h3 span,
.position-section h3 span,
.passive-section h3 span,
.action-section h3 span,
.risk-section h3 span {
  background: rgb(46,46,46) !important;
  color: rgb(230,228,215) !important;
  box-shadow:none !important;
}
.quote-section {
  border-color: rgb(210,203,187) !important;
  background: rgb(230,228,215) !important;
}
.quote-section h3,
.quote-section p { color: rgb(30,30,30) !important; text-shadow:none !important; }
.score-top { color: rgb(94,90,82) !important; }
.score-top b { color: rgb(30,30,30) !important; }
.code-input { color: rgb(30,30,30) !important; }
.code-input::placeholder { color: rgba(94,90,82,.72) !important; }
@media (hover:hover) { .option-btn:hover { border-color: rgb(46,46,46) !important; background: rgb(230,228,215) !important; } }