:root {
      --ink: #102033;
      --muted: #68778a;
      --paper: #fffaf2;
      --card: rgba(255, 255, 255, 0.9);
      --line: rgba(16, 32, 51, 0.11);
      --orange: #ff781f;
      --orange-2: #ffb13b;
      --teal: #20a78d;
      --blue: #4d77ff;
      --violet: #8a63ff;
      --shadow: 0 24px 70px rgba(14, 28, 48, 0.16);
      --soft-shadow: 0 12px 36px rgba(14, 28, 48, 0.1);
      --radius: 24px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at 8% 0%, rgba(255, 177, 59, 0.55), transparent 31rem),
        radial-gradient(circle at 100% 12%, rgba(77, 119, 255, 0.34), transparent 32rem),
        linear-gradient(145deg, #07111f 0%, #0f2137 43%, #182f48 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.14;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
      mix-blend-mode: soft-light;
    }

    button { font: inherit; }

    .app {
      position: relative;
      z-index: 1;
      width: min(100%, 760px);
      min-height: 100dvh;
      margin: 0 auto;
      padding: 18px 16px 30px;
    }

    .screen { display: none; }
    .screen.active { display: block; animation: rise .48s cubic-bezier(.2,.8,.2,1) both; }

    @keyframes rise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: rgba(255,255,255,.9);
      padding: 3px 2px 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .03em;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--orange), var(--orange-2));
      box-shadow: 0 8px 24px rgba(255,120,31,.35);
    }

    .top-note {
      font-size: 12px;
      color: rgba(255,255,255,.62);
      text-align: right;
    }

    .hero {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 30px;
      padding: 28px 22px 24px;
      color: white;
      background:
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045)),
        radial-gradient(circle at 80% 2%, rgba(255,177,59,.44), transparent 18rem);
      box-shadow: 0 28px 80px rgba(0,0,0,.24);
      backdrop-filter: blur(18px);
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 210px;
      height: 210px;
      right: -65px;
      bottom: -118px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 32%, #ffe6a7, var(--orange) 50%, rgba(255,120,31,.05) 72%);
      opacity: .9;
      filter: blur(.3px);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.1);
      color: #fee4bd;
      padding: 7px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .06em;
    }

    .hero h1 {
      position: relative;
      margin: 17px 0 11px;
      max-width: 580px;
      font-size: clamp(34px, 10vw, 64px);
      line-height: 1.03;
      letter-spacing: -.055em;
    }

    .hero h1 span {
      color: #ffd18a;
      text-shadow: 0 0 34px rgba(255,177,59,.35);
    }

    .hero p {
      position: relative;
      max-width: 570px;
      margin: 0;
      color: rgba(255,255,255,.76);
      font-size: 15px;
      line-height: 1.8;
    }

    .hero-stats {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 22px;
    }

    .stat {
      padding: 11px 8px;
      text-align: center;
      border-radius: 16px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.12);
    }

    .stat b { display: block; font-size: 16px; margin-bottom: 3px; }
    .stat small { color: rgba(255,255,255,.58); font-size: 11px; }

    .primary-btn,
    .secondary-btn,
    .ghost-btn {
      appearance: none;
      border: 0;
      cursor: pointer;
      border-radius: 16px;
      padding: 15px 18px;
      font-weight: 850;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .primary-btn {
      width: 100%;
      margin-top: 20px;
      color: #25180c;
      background: linear-gradient(135deg, #ffd47b, var(--orange));
      box-shadow: 0 14px 32px rgba(255,120,31,.34);
    }

    .primary-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(255,120,31,.42); }
    .primary-btn:active { transform: translateY(0) scale(.99); }

    .secondary-btn {
      background: #102033;
      color: white;
      box-shadow: 0 10px 24px rgba(16,32,51,.18);
    }

    .ghost-btn {
      background: rgba(16,32,51,.06);
      color: var(--ink);
      border: 1px solid var(--line);
    }

    .mini-note {
      position: relative;
      margin-top: 12px;
      color: rgba(255,255,255,.54);
      font-size: 11px;
      line-height: 1.65;
    }

    .panel {
      background: var(--card);
      border: 1px solid rgba(255,255,255,.58);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(20px);
    }

    .quiz-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 18px 0;
      color: white;
    }

    .quiz-top .brand { color: white; }
    .quiz-top .step { font-size: 12px; color: rgba(255,255,255,.66); font-weight: 800; }

    .progress-wrap {
      margin: 14px 4px 14px;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.16);
    }

    .progress-bar {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #ffd36b, var(--orange), #ff4f8b);
      box-shadow: 0 0 18px rgba(255,120,31,.55);
      transition: width .32s ease;
    }

    .question-card { padding: 22px 18px 20px; }

    .question-label {
      color: var(--orange);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .question-title {
      margin: 10px 0 7px;
      font-size: clamp(22px, 6vw, 30px);
      line-height: 1.32;
      letter-spacing: -.03em;
    }

    .question-hint {
      margin: 0 0 17px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .options {
      display: grid;
      gap: 11px;
    }

    .option {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 13px;
      text-align: left;
      padding: 15px 14px;
      color: var(--ink);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.68);
      border-radius: 17px;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .option:hover {
      transform: translateX(3px);
      border-color: rgba(255,120,31,.45);
      background: #fff;
      box-shadow: var(--soft-shadow);
    }

    .option.selected {
      border-color: var(--orange);
      background: #fff4e7;
      box-shadow: 0 12px 30px rgba(255,120,31,.16);
    }

    .option-letter {
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #edf2f8;
      color: #58708d;
      font-size: 13px;
      font-weight: 900;
      transition: all .16s ease;
    }

    .option.selected .option-letter {
      background: var(--orange);
      color: white;
      box-shadow: 0 7px 18px rgba(255,120,31,.28);
    }

    .option-text { font-size: 14px; line-height: 1.5; font-weight: 700; }

    .quiz-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 17px;
      padding-top: 15px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }

    .back-btn {
      border: 0;
      background: transparent;
      color: #52708f;
      cursor: pointer;
      padding: 6px 0;
      font-weight: 800;
    }

    .back-btn:disabled { opacity: .28; cursor: default; }

    .result-hero {
      position: relative;
      overflow: hidden;
      padding: 26px 20px 22px;
      color: white;
      border-radius: 28px;
      background:
        radial-gradient(circle at 85% 0%, rgba(255,210,115,.62), transparent 16rem),
        linear-gradient(145deg, #0c1d31, #193d57 70%, #1a5a62);
      box-shadow: 0 28px 74px rgba(0,0,0,.28);
    }

    .result-hero::after {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      right: -42px;
      bottom: -85px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff1bd, var(--orange) 60%, transparent 72%);
      opacity: .75;
    }

    .result-kicker { color: #ffd08a; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
    .result-title { position: relative; margin: 9px 0 7px; font-size: clamp(31px, 9vw, 54px); line-height: 1.04; letter-spacing: -.05em; }
    .result-time { color: #ffd99e; font-size: 16px; font-weight: 900; }
    .result-tagline { position: relative; margin: 14px 0 0; color: rgba(255,255,255,.78); line-height: 1.75; font-size: 14px; }

    .content-stack { display: grid; gap: 14px; margin-top: 14px; }

    .result-card {
      padding: 18px;
      background: var(--card);
      border: 1px solid rgba(255,255,255,.6);
      border-radius: 21px;
      box-shadow: var(--soft-shadow);
    }

    .result-card h2 {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 11px;
      font-size: 17px;
    }

    .result-card p { margin: 0; color: #53657a; font-size: 14px; line-height: 1.8; }

    .metrics { display: grid; gap: 13px; }

    .metric-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: 800;
    }

    .metric-head span:last-child { color: var(--muted); }

    .metric-track {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #e9eef4;
    }

    .metric-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--orange), #ffcf63);
      transition: width .7s cubic-bezier(.2,.8,.2,1);
    }

    .metric:nth-child(2) .metric-fill { background: linear-gradient(90deg, var(--blue), #72a0ff); }
    .metric:nth-child(3) .metric-fill { background: linear-gradient(90deg, var(--teal), #55d7ba); }
    .metric:nth-child(4) .metric-fill { background: linear-gradient(90deg, var(--violet), #b38dff); }

    .action-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .action-list li {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: start;
      color: #40536a;
      font-size: 14px;
      line-height: 1.62;
    }

    .action-list li b {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: #fff0dd;
      color: var(--orange);
      font-size: 12px;
    }

    .share-card {
      padding: 19px;
      color: white;
      background: linear-gradient(145deg, #0c1d31, #1d4b55);
      border-radius: 21px;
      box-shadow: 0 18px 46px rgba(12,29,49,.24);
    }

    .share-card p { color: rgba(255,255,255,.76); line-height: 1.8; }
    .share-card strong { color: #ffd18d; }

    .button-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 16px;
    }

    .button-row .primary-btn { margin: 0; }

    .disclaimer {
      margin: 16px 5px 0;
      color: rgba(255,255,255,.64);
      font-size: 11px;
      line-height: 1.7;
      text-align: center;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 22px;
      z-index: 10;
      transform: translate(-50%, 18px);
      opacity: 0;
      pointer-events: none;
      padding: 11px 16px;
      color: white;
      background: rgba(9, 23, 39, .92);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
      font-size: 12px;
      transition: all .25s ease;
    }

    .toast.show { opacity: 1; transform: translate(-50%, 0); }

    .timeline-grid { position: relative; display: grid; gap: 14px; margin-top: 16px; }
    .timeline-grid::before { content: ""; position: absolute; left: 29px; top: 22px; bottom: 22px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, var(--orange), rgba(255,120,31,.08)); }
    .timeline-item { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 13px 13px 13px 10px; border-radius: 16px; background: rgba(16,32,51,.045); border: 1px solid var(--line); }
    .timeline-item > strong { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff0dd; color: var(--orange); font-size: 12px; box-shadow: 0 6px 14px rgba(255,120,31,.16); }
    .timeline-label { font-weight: 900; color: var(--ink); margin-bottom: 3px; }
    .timeline-text { color: var(--muted); font-size: 13px; line-height: 1.6; }
    .path-good { border-left: 4px solid var(--teal); }
    .path-risk { border-left: 4px solid var(--orange); }

    .analysis-panel { min-height: calc(100dvh - 52px); display: grid; place-items: center; text-align: center; padding: 30px 20px; color: white; border-radius: 30px; background: radial-gradient(circle at 50% 34%, rgba(255,188,82,.24), transparent 18rem), linear-gradient(145deg, #0b1b2d, #17354c 68%, #1b5a5a); box-shadow: 0 30px 80px rgba(0,0,0,.28); overflow: hidden; }
    .analysis-inner { position: relative; z-index: 1; width: 100%; max-width: 560px; }
    .analysis-orb { width: 132px; height: 132px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3c4, #ff9d32 48%, #e55d2b 68%, rgba(229,93,43,.08) 70%); box-shadow: 0 0 0 14px rgba(255,177,59,.08), 0 0 60px rgba(255,177,59,.28); animation: breathe 2.2s ease-in-out infinite; }
    .analysis-orb::before { content: "↗"; font-size: 46px; color: #fff8e5; font-weight: 900; filter: drop-shadow(0 4px 10px rgba(80,25,0,.2)); }
    .analysis-kicker { color: #ffd28b; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
    .analysis-title { margin: 10px 0 8px; font-size: clamp(25px, 7vw, 38px); line-height: 1.2; letter-spacing: -.03em; }
    .analysis-sub { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.75; }
    .analysis-progress { height: 7px; margin: 24px 0 17px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.14); }
    .analysis-progress > div { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd36b, var(--orange), #ff5b8b); transition: width .5s ease; }
    .analysis-steps { display: grid; gap: 9px; text-align: left; }
    .analysis-step { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; color: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); transition: all .3s ease; }
    .analysis-step::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: rgba(255,255,255,.22); transition: all .3s ease; }
    .analysis-step.active { color: white; border-color: rgba(255,211,107,.38); background: rgba(255,255,255,.1); transform: translateX(4px); }
    .analysis-step.active::before { background: #ffd36b; box-shadow: 0 0 12px rgba(255,211,107,.65); }
    .analysis-step.done { color: rgba(255,255,255,.72); }
    .analysis-step.done::before { background: var(--teal); }
    .analysis-note { margin: 20px 0 0; color: rgba(255,255,255,.46); font-size: 11px; line-height: 1.7; }

    .radar-wrap { display: grid; place-items: center; padding: 5px 0 2px; }
    .radar-chart { width: min(100%, 350px); height: auto; overflow: visible; }
    .radar-grid { fill: none; stroke: rgba(16,32,51,.12); stroke-width: 1; }
    .radar-axis { stroke: rgba(16,32,51,.1); stroke-width: 1; }
    .radar-shape { fill: rgba(255,120,31,.18); stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; }
    .radar-dot { fill: var(--orange); }
    .radar-label { fill: #53657a; font-size: 11px; font-weight: 800; }
    .map-flow { display: grid; gap: 9px; margin-top: 14px; }
    .map-node { position: relative; padding: 13px 14px 13px 46px; border-radius: 16px; background: rgba(16,32,51,.045); border: 1px solid var(--line); }
    .map-node::before { content: attr(data-index); position: absolute; left: 13px; top: 13px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9px; background: #fff0dd; color: var(--orange); font-size: 11px; font-weight: 900; }
    .map-node strong { display: block; margin-bottom: 3px; font-size: 13px; }
    .map-node span { color: var(--muted); font-size: 12px; line-height: 1.55; }
    .structure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
    .structure-card { padding: 13px; border-radius: 16px; background: rgba(16,32,51,.045); border: 1px solid var(--line); }
    .structure-card small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
    .structure-card b { display: block; font-size: 13px; line-height: 1.5; }
    .tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
    .tag { padding: 7px 10px; border-radius: 999px; color: #7a4a13; background: #fff0dd; font-size: 12px; font-weight: 800; }

    @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

    @media (max-width: 540px) {\n      .top-note { display: none; }\n      .hero { padding-top: 24px; }\n    }\n\n    @media (min-width: 680px) {
      .app { padding-top: 24px; }
      .hero { padding: 38px 34px 31px; }
      .quiz-top { padding: 22px 22px 0; }
      .question-card { padding: 26px 24px 23px; }
      .result-hero { padding: 34px 30px 29px; }
      .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .content-grid .result-card { margin: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }
      .chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 12px; color: #53657a; font-size: 12px; font-weight: 800; }
    .chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .chart-legend i { width: 18px; height: 4px; border-radius: 999px; display: inline-block; }
    .chart-line-stable { fill: none; stroke: #28a88f; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
    .chart-line-mid { fill: none; stroke: #d4a62a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
    .chart-line-high { fill: none; stroke: #7b61ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 6; }
    .chart-dot-stable { fill: #28a88f; }
    .chart-dot-mid { fill: #d4a62a; }
    .chart-dot-high { fill: #7b61ff; }


    html { -webkit-text-size-adjust: 100%; }
    img, svg, video { max-width: 100%; }
    button, .option, .result-card, .result-hero, .hero, .wealth-box { min-width: 0; }
    .hero h1, .result-title, .question-title, .result-time, .option-text, .wealth-amount, .map-node, .structure-card { overflow-wrap: anywhere; }
    @media (max-width: 420px) {
      .app { padding-top: 12px; padding-bottom: 24px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
      .topbar { padding-bottom: 12px; }
      .brand { font-size: 13px; }
      .brand-mark { width: 31px; height: 31px; border-radius: 11px; }
      .hero { padding: 22px 16px 20px; border-radius: 24px; }
      .hero h1 { font-size: clamp(30px, 9.7vw, 43px); line-height: 1.06; }
      .hero p { font-size: 13.5px; line-height: 1.72; }
      .hero-stats { gap: 7px; margin-top: 18px; }
      .stat { padding: 9px 5px; border-radius: 13px; }
      .stat b { font-size: 14px; }
      .stat small { font-size: 10px; line-height: 1.25; }
      .primary-btn, .secondary-btn, .ghost-btn { padding: 14px 14px; border-radius: 14px; }
      .question-card { padding: 18px 14px 16px; border-radius: 20px; }
      .question-label { font-size: 11px; }
      .question-title { font-size: clamp(20px, 6.5vw, 26px); line-height: 1.35; }
      .question-hint { font-size: 12.5px; line-height: 1.6; }
      .options { gap: 9px; }
      .option { padding: 13px 11px; gap: 10px; border-radius: 14px; }
      .option-letter { flex-basis: 30px; width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
      .option-text { font-size: 13px; line-height: 1.48; }
      .quiz-footer { font-size: 11px; }
      .analysis-panel { min-height: calc(100dvh - 28px); padding: 24px 14px; border-radius: 24px; }
      .analysis-orb { width: 105px; height: 105px; margin-bottom: 20px; }
      .analysis-title { font-size: clamp(23px, 7.2vw, 31px); }
      .analysis-step { padding: 10px 11px; font-size: 12px; }
      .result-hero { padding: 22px 16px 20px; border-radius: 24px; }
      .result-title { font-size: clamp(27px, 9.2vw, 41px); line-height: 1.08; }
      .result-time { font-size: 12.5px; line-height: 1.55; }
      .result-tagline { font-size: 13px; line-height: 1.65; }
      .wealth-box { padding: 14px; gap: 6px 10px; }
      .wealth-label { font-size: 12px; }
      .wealth-amount { font-size: clamp(28px, 9.2vw, 42px); }
      .content-stack { gap: 11px; }
      .result-card { padding: 15px; border-radius: 18px; }
      .result-card h2 { font-size: 16px; margin-bottom: 9px; }
      .result-card p { font-size: 13px; line-height: 1.7; }
      .metrics { gap: 11px; }
      .metric-head { font-size: 12px; }
      .radar-chart { max-width: 300px; }
      .timeline-grid { gap: 10px; }
      .timeline-item { grid-template-columns: 26px 1fr; gap: 9px; padding: 11px 10px; border-radius: 14px; }
      .timeline-item > strong { width: 26px; height: 26px; font-size: 11px; }
      .timeline-label { font-size: 12.5px; }
      .timeline-text { font-size: 12px; }
      .map-node { padding: 12px 12px 12px 42px; border-radius: 14px; }
      .map-node::before { left: 11px; top: 12px; }
      .structure-grid { grid-template-columns: 1fr; gap: 9px; }
      .structure-card { padding: 12px; border-radius: 14px; }
      .button-row { grid-template-columns: 1fr; }
      .chart-legend { gap: 8px 10px; font-size: 11px; }
      .disclaimer { margin-top: 13px; font-size: 10px; }
    }
    @media (max-width: 340px) {
      .app { padding-left: max(9px, env(safe-area-inset-left)); padding-right: max(9px, env(safe-area-inset-right)); }
      .hero, .result-hero { padding-left: 14px; padding-right: 14px; }
      .hero h1 { font-size: 29px; }
      .result-title { font-size: 26px; }
      .question-title { font-size: 20px; }
      .option { padding: 12px 9px; }
      .option-text { font-size: 12.5px; }
      .wealth-amount { font-size: 27px; }
      .result-card { padding: 13px; }
    }
  
/* 授权码验证页 */
.auth-panel { max-width: 520px; margin: 32px auto; padding: 30px 24px; text-align: center; }
.auth-symbol { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; color: #7a4a13; font-size: 28px; font-weight: 900; background: linear-gradient(135deg, #ffe4a5, #ffb13b); box-shadow: 0 12px 28px rgba(255,120,31,.22); }
.auth-kicker { color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.auth-title { margin: 9px 0 8px; color: var(--ink); font-size: clamp(26px, 7vw, 38px); letter-spacing: -.035em; }
.auth-desc { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.auth-input { width: 100%; border: 1px solid var(--line); border-radius: 15px; padding: 15px 16px; color: var(--ink); background: #fff; font-size: 18px; font-weight: 900; text-align: center; letter-spacing: .12em; text-transform: uppercase; outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
.auth-input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,120,31,.12); }
.auth-btn { margin-top: 13px; }
.auth-message { min-height: 20px; margin: 11px 0 0; color: #b33424; font-size: 12px; font-weight: 800; }
@media (max-width: 420px) { .auth-panel { margin: 18px auto; padding: 24px 17px; border-radius: 20px; } .auth-input { padding: 13px 12px; font-size: 16px; } }