:root {
    --wood: #4a9e5c; --fire: #d94040; --earth: #c49a2a;
    --metal: #8e8e8e; --water: #3a7abf;
    --bg: #0d1b2e; --card: #0f2035; --text: #e8e8e8;
    --accent: #20c49a; --border: #1a3050;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

  .container { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
  h1 { text-align: center; font-size: 1.6rem; letter-spacing: 0.3em; margin-bottom: 8px; }
  .subtitle { text-align: center; font-size: 0.85rem; color: #888; margin-bottom: 24px; }

  /* 入力フォーム */
  .form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
  .form label { font-size: 0.75rem; color: #aaa; display: block; margin-bottom: 2px; }
  .form input, .form select { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 1rem; width: 100px; text-align: center; }
  .form select { width: 140px; }
  .form input:focus, .form select:focus { outline: none; border-color: var(--accent); }
  .btn { background: var(--accent); color: #fff; border: none; padding: 10px 28px; border-radius: 8px; font-size: 1rem; cursor: pointer; align-self: flex-end; transition: opacity 0.2s; }
  .btn:hover { opacity: 0.85; }

  /* 流派設定パネル */
  .settings { background: var(--card); border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; }
  .settings summary { cursor: pointer; font-size: 0.9rem; color: var(--accent); }
  .settings summary::-webkit-details-marker { color: var(--accent); }
  .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 12px; }
  .setting-item label { font-size: 0.75rem; color: #aaa; display: block; margin-bottom: 4px; }
  .setting-item select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 0.85rem; width: 100%; }
  .setting-item select:focus { outline: none; border-color: var(--accent); }
  .setting-hint { font-size: 0.7rem; color: #666; margin-top: 3px; }

  /* 命式テーブル */
  .meishiki { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
  .meishiki .cell { background: var(--card); padding: 14px 8px; text-align: center; font-size: 1.05rem; }
  .meishiki .header { background: #0f3460; font-size: 0.8rem; color: #aaa; padding: 10px 8px; }
  .meishiki .label { background: #0f3460; font-size: 0.8rem; color: #aaa; padding: 14px 8px; text-align: right; }
  .meishiki .stem { font-size: 1.4rem; font-weight: bold; }
  .meishiki .branch { font-size: 1.4rem; }
  .meishiki .god { font-size: 0.75rem; color: #aaa; margin-top: 2px; }
  .meishiki .daymaster { border: 2px solid var(--accent); }

  .elem-木 { color: var(--wood); } .elem-火 { color: var(--fire); }
  .elem-土 { color: var(--earth); } .elem-金 { color: var(--metal); }
  .elem-水 { color: var(--water); }

  /* セクション */
  .section { background: var(--card); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
  .section h2 { font-size: 0.95rem; color: #d4a94a; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; border-bottom: 1px solid #1a1a2e; }
  .row:last-child { border-bottom: none; }
  .row .key { color: #aaa; }

  /* 五行バー */
  .bar-container { margin: 8px 0; }
  .bar-label { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 2px; }
  .bar-track { height: 8px; background: #111; border-radius: 4px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

  /* 流派比較 */
  .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  .compare .school { background: var(--card); border-radius: 12px; padding: 16px; }
  .compare .school h3 { font-size: 0.85rem; color: var(--accent); margin-bottom: 10px; }
  .compare .badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; margin: 4px 0 8px; }
  .badge-strong { background: #d9404022; color: #e96060; border: 1px solid #d9404044; }
  .badge-weak { background: #3a7abf22; color: #6aabdf; border: 1px solid #3a7abf44; }
  .school-detail { font-size: 0.8rem; color: #aaa; line-height: 1.6; }
  .school-detail .god-elem { font-weight: bold; font-size: 1rem; }

  /* 大運 */
  .taiun-scroll { overflow-x: auto; padding-bottom: 8px; }
  .taiun-table { display: flex; gap: 1px; min-width: max-content; }
  .taiun-col { background: var(--card); border-radius: 8px; padding: 10px 14px; text-align: center; min-width: 56px; }
  .taiun-col.active { border: 1px solid var(--accent); }
  .taiun-age { font-size: 0.7rem; color: #aaa; margin-bottom: 4px; }
  .taiun-stem { font-size: 1.1rem; font-weight: bold; }
  .taiun-branch { font-size: 1.1rem; }
  .taiun-god { font-size: 0.65rem; color: #888; margin-top: 3px; }

  /* 九星気学 詳細セクション */
  .kyusei-detail { background: var(--card); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
  .kyusei-detail h2 { font-size: 0.95rem; color: #d4a94a; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }

  .kyusei-stars-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .kyusei-star-chip { background: var(--bg); border-radius: 10px; padding: 10px 14px; text-align: center; flex: 1; min-width: 80px; }
  .kyusei-star-chip .ksc-label { font-size: 0.68rem; color: #888; margin-bottom: 4px; }
  .kyusei-star-chip .ksc-name { font-size: 0.88rem; font-weight: bold; }
  .kyusei-star-chip .ksc-emoji { font-size: 1.1rem; }

  .kyusei-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .compass-wrap { }
  .compass-title { font-size: 0.78rem; color: #aaa; margin-bottom: 6px; }
  .compass-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 195px; }
  .compass-cell { border-radius: 6px; padding: 6px 4px; text-align: center; border: 1px solid #222; cursor: default; transition: filter 0.15s; }
  .compass-cell:hover { filter: brightness(1.3); }
  .compass-cell .cc-dir { font-size: 0.6rem; color: #888; }
  .compass-cell .cc-star { font-size: 0.72rem; font-weight: bold; }
  .compass-cell .cc-badge { font-size: 0.58rem; margin-top: 2px; border-radius: 3px; padding: 1px 3px; display: inline-block; }
  .compass-cell.center { background: #1a1a3a; }
  .compass-cell.daikichi { background: #0f2e0f; border-color: #3a7a3a; }
  .compass-cell.daikichi .cc-badge { background: #3a7a3a; color: #afffaf; }
  .compass-cell.kichi { background: #0f1e0f; border-color: #2a5a2a; }
  .compass-cell.kichi .cc-badge { background: #2a4a2a; color: #8fdf8f; }
  .compass-cell.gokoku { background: #2e0a0a; border-color: #8a2020; }
  .compass-cell.gokoku .cc-badge { background: #8a2020; color: #ffafaf; }
  .compass-cell.ankensatsu { background: #1e0f0a; border-color: #6a3010; }
  .compass-cell.ankensatsu .cc-badge { background: #5a2808; color: #ffcfa0; }
  .compass-cell.honmei_satsu { background: #1e0a1e; border-color: #6a1a6a; }
  .compass-cell.honmei_satsu .cc-badge { background: #5a1a5a; color: #ffaff0; }
  .compass-cell.neutral { background: #111122; border-color: #222; }

  .fortune-type-legend { margin-top: 8px; }
  .ftl-row { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: #aaa; margin-bottom: 3px; }
  .ftl-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

  .kyusei-info-list { font-size: 0.82rem; }
  .kil-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #1a1a2e; }
  .kil-row:last-child { border-bottom: none; }
  .kil-key { color: #aaa; }
  .kil-val { font-weight: bold; }
  .kil-note { font-size: 0.72rem; color: #666; margin-top: 2px; }

  /* 時運 */
  .jiun-list { display: flex; flex-direction: column; gap: 8px; }
  .jiun-row { display: grid; grid-template-columns: 3em 7em 1fr; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: 8px; }
  .jiun-period { font-size: 0.72rem; color: #aaa; text-align: center; }
  .jiun-keyword { font-size: 0.88rem; font-weight: bold; letter-spacing: 0.03em; }
  .jiun-desc { font-size: 0.76rem; color: #bbb; line-height: 1.5; }

  /* 鑑定後アクションボタン */
  .post-reading-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
  .action-btn { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid #2a3a50; background: #0f2035; cursor: pointer; text-align: left; transition: all 0.2s; }
  .action-btn:hover { border-color: var(--accent); background: #0f2a40; }
  .action-btn .ab-icon { font-size: 1.4rem; flex-shrink: 0; }
  .action-btn .ab-text { flex: 1; }
  .action-btn .ab-title { font-size: 0.9rem; font-weight: bold; color: #e8e8e8; }
  .action-btn .ab-sub { font-size: 0.72rem; color: #888; margin-top: 2px; }

  /* 相性チェック */
  .compat-check { background: var(--card); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
  .compat-check h3 { font-size: 0.95rem; color: #d4a94a; margin-bottom: 6px; }
  .compat-check-sub { font-size: 0.75rem; color: #666; margin-bottom: 16px; line-height: 1.5; }
  .compat-input-row { display: grid; grid-template-columns: 1fr 60px 50px 50px; gap: 8px; margin-bottom: 12px; align-items: end; }
  .compat-input-row input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; }
  .compat-input-row input:focus { outline: none; border-color: var(--accent); }
  .compat-input-row label { font-size: 0.68rem; color: #aaa; display: block; margin-bottom: 3px; }
  .compat-result { margin-top: 14px; padding: 14px; background: var(--bg); border-radius: 12px; display: none; }
  .compat-result.show { display: block; }
  .compat-result-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .compat-result-stone { font-size: 1.1rem; font-weight: bold; }
  .compat-result-rank { font-size: 0.8rem; padding: 4px 12px; border-radius: 20px; font-weight: bold; }
  .rank-kango { background: #3a2a0a; color: #d4a94a; border: 1px solid #6a4a10; }
  .rank-seisho { background: #0a2a1a; color: #6abe80; border: 1px solid #2a6a40; }
  .rank-dogogyou { background: #0a1a3a; color: #6aabd4; border: 1px solid #2a4a7a; }
  .rank-other { background: #1a1a2a; color: #888; border: 1px solid #333; }
  .compat-result-desc { font-size: 0.82rem; color: #ccc; line-height: 1.7; }

  /* diff表示 */
  .diff-section { background: var(--card); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
  .diff-section h2 { font-size: 0.95rem; color: #d4a94a; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  .diff-row { display: flex; gap: 12px; padding: 8px 0; font-size: 0.85rem; border-bottom: 1px solid #1a1a2e; align-items: center; }
  .diff-row:last-child { border-bottom: none; }
  .diff-label { color: #aaa; min-width: 100px; }
  .diff-val { padding: 3px 10px; border-radius: 6px; }
  .diff-match { background: #4a9e5c22; color: #6abe80; }
  .diff-mismatch { background: #d9404022; color: #e96060; }
  .diff-arrow { color: #555; }

  /* どうぶつ占い */
  .animal-card { background: var(--card); border-radius: 16px; padding: 24px; margin-bottom: 16px; text-align: center; position: relative; overflow: hidden; }
  .animal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
  .animal-emoji { font-size: 3.5rem; margin-bottom: 8px; line-height: 1; }
  .animal-name { font-size: 1.4rem; font-weight: bold; margin-bottom: 4px; }
  .animal-color { font-size: 0.8rem; margin-bottom: 12px; }
  .animal-color .color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
  .animal-desc { font-size: 0.85rem; color: #bbb; line-height: 1.7; text-align: left; margin-bottom: 14px; }
  .animal-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; text-align: left; }
  .animal-traits .trait-box { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
  .animal-traits .trait-box h5 { font-size: 0.72rem; font-weight: bold; margin-bottom: 6px; letter-spacing: 0.05em; }
  .animal-traits .trait-box.plus h5 { color: #6abe80; }
  .animal-traits .trait-box.minus h5 { color: #e96060; }
  .animal-traits ul { list-style: none; padding: 0; margin: 0; }
  .animal-traits ul li { font-size: 0.78rem; color: #ccc; line-height: 1.6; padding-left: 1em; position: relative; }
  .animal-traits ul li::before { content: '・'; position: absolute; left: 0; }
  .animal-traits .trait-box.plus ul li::before { color: #6abe80; }
  .animal-traits .trait-box.minus ul li::before { color: #e96060; }
  .animal-meta { display: flex; justify-content: center; gap: 20px; margin-top: 14px; font-size: 0.8rem; color: #888; }
  .animal-meta span { background: var(--bg); padding: 4px 12px; border-radius: 12px; }
  .animal-compat { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
  .animal-compat h4 { font-size: 0.8rem; color: var(--accent); margin-bottom: 8px; }
  .compat-section { border-left: 3px solid #333; padding: 8px 10px; margin-bottom: 10px; background: var(--bg); border-radius: 0 8px 8px 0; text-align: left; }
  .compat-sec-label { font-size: 0.7rem; color: #aaa; margin-bottom: 4px; letter-spacing: 0.05em; }
  .compat-sec-stones { font-size: 0.88rem; font-weight: bold; margin-bottom: 4px; letter-spacing: 0.03em; }
  .compat-sec-desc { font-size: 0.77rem; color: #bbb; line-height: 1.6; }

  /* 総合占いグリッド */
  .multi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
  .multi-card { background: var(--card); border-radius: 12px; padding: 16px; text-align: center; }
  .multi-card .mc-icon { font-size: 2rem; margin-bottom: 6px; }
  .multi-card .mc-system { font-size: 0.7rem; color: #888; margin-bottom: 4px; }
  .multi-card .mc-name { font-size: 1.15rem; font-weight: bold; margin-bottom: 6px; }
  .multi-card .mc-desc { font-size: 0.78rem; color: #bbb; line-height: 1.6; text-align: left; }
  .multi-card .mc-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
  .multi-card .mc-tag { font-size: 0.7rem; background: var(--bg); padding: 3px 10px; border-radius: 10px; color: #aaa; }

  .hidden { display: none; }

  @media (max-width: 600px) {
    .multi-grid { grid-template-columns: 1fr; }
    .compare { grid-template-columns: 1fr; }
    .form input { width: 70px; }
    .settings-grid { grid-template-columns: 1fr; }
  }

  /* ====== AI鑑定セクション ====== */
  .ai-section { background: linear-gradient(135deg, #0a1828 0%, #0d1020 100%); border-radius: 16px; padding: 24px; margin-bottom: 16px; border: 1px solid #1a3050; }
  .ai-section-title { font-size: 1.1rem; font-weight: bold; color: #d4a94a; margin-bottom: 6px; letter-spacing: 0.05em; }
  .ai-section-sub { font-size: 0.8rem; color: #888; margin-bottom: 20px; }

  .ai-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 0.75rem; color: #666; flex-wrap: wrap; }
  .ai-step { background: #1a1a3a; border-radius: 20px; padding: 4px 12px; color: #aaa; }
  .ai-step.active { background: #3a2a6a; color: #c0a0ff; border: 1px solid #6040aa; }

  .concern-label { font-size: 0.85rem; color: #aaa; margin-bottom: 10px; font-weight: bold; }
  .concern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
  .concern-btn { background: #1a1a3a; border: 1px solid #333; color: #ccc; border-radius: 10px; padding: 12px 14px; cursor: pointer; text-align: left; font-size: 0.85rem; transition: all 0.2s; }
  .concern-btn:hover { border-color: #6040aa; background: #221a40; }
  .concern-btn.selected { border-color: #c0a0ff; background: #2a1a50; color: #e0d0ff; }
  .concern-btn .cb-icon { font-size: 1.2rem; margin-bottom: 4px; display: block; }
  .concern-btn .cb-name { font-weight: bold; font-size: 0.85rem; display: block; }
  .concern-btn .cb-desc { font-size: 0.7rem; color: #888; margin-top: 2px; display: block; }
  .concern-btn.selected .cb-desc { color: #aaa; }

  .concern-free { width: 100%; background: #111; border: 1px solid #333; color: #ddd; border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; resize: vertical; min-height: 60px; margin-bottom: 16px; font-family: inherit; }
  .concern-free:focus { outline: none; border-color: #6040aa; }
  .concern-free::placeholder { color: #555; }

  .palm-section { background: #0f0f20; border-radius: 10px; padding: 14px; margin-bottom: 16px; border: 1px dashed #333; }
  .palm-section-label { font-size: 0.85rem; color: #aaa; margin-bottom: 4px; font-weight: bold; }
  .palm-section-hint { font-size: 0.75rem; color: #666; margin-bottom: 10px; line-height: 1.5; }

  .palm-hand-toggle { display: flex; gap: 6px; margin-bottom: 10px; }
  .hand-btn { flex: 1; background: #1a1a3a; border: 1px solid #333; color: #888; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 0.78rem; text-align: center; transition: all 0.2s; line-height: 1.4; }
  .hand-btn.active { border-color: #c0a0ff; background: #2a1a50; color: #e0d0ff; }
  .hand-btn .hb-main { font-weight: bold; font-size: 0.82rem; }
  .hand-btn .hb-sub { font-size: 0.7rem; margin-top: 2px; }

  .palm-upload-btn { display: inline-flex; align-items: center; gap: 8px; background: #1a1a3a; border: 1px solid #444; color: #bbb; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
  .palm-upload-btn:hover { border-color: #6040aa; color: #ddd; }
  .palm-upload-btn input { display: none; }
  #palm-preview { margin-top: 10px; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  #palm-preview img { max-width: 110px; max-height: 110px; border-radius: 8px; border: 1px solid #444; object-fit: cover; }
  .palm-clear { font-size: 0.75rem; color: var(--accent); cursor: pointer; margin-left: 4px; }


  .api-key-note { font-size: 0.72rem; color: #555; margin-bottom: 4px; }
  .api-key-row { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
  .api-key-row input { flex: 1; background: #111; border: 1px solid #333; color: #ddd; border-radius: 8px; padding: 8px 12px; font-size: 0.82rem; font-family: monospace; }
  .api-key-row input:focus { outline: none; border-color: #6040aa; }

  .ai-submit-btn { width: 100%; background: linear-gradient(135deg, #20c49a, #1a9a7a); color: #fff; border: none; padding: 14px; border-radius: 10px; font-size: 1rem; cursor: pointer; letter-spacing: 0.05em; transition: opacity 0.2s; margin-bottom: 0; }
  .ai-submit-btn:hover { opacity: 0.88; }
  .ai-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .ai-compare-btn { width: 100%; background: transparent; color: #9070cc; border: 1px solid #5040a0; padding: 10px; border-radius: 10px; font-size: 0.85rem; cursor: pointer; letter-spacing: 0.05em; transition: all 0.2s; margin-top: 8px; }
  .ai-compare-btn:hover { background: rgba(90,60,160,0.15); }
  .ai-compare-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .compare-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }
  @media(max-width:700px) { .compare-grid { grid-template-columns: 1fr; } }
  .compare-card { background: #1a1030; border: 1px solid #4030a0; border-radius: 12px; padding: 16px; }
  .compare-card-label { font-size: 0.7rem; color: #7060a0; letter-spacing: 0.1em; margin-bottom: 4px; text-transform: uppercase; }
  .compare-card-name { font-size: 1rem; font-weight: bold; color: #c0a0ff; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #3020a0; }
  .compare-card-body { font-size: 0.88rem; color: #e0d0ff; line-height: 1.75; white-space: pre-wrap; }

  .ai-loading { text-align: center; padding: 32px 0; color: #c0a0ff; font-size: 1rem; }
  .ai-loading .dots span { display: inline-block; animation: blink 1.4s infinite; }
  .ai-loading .dots span:nth-child(2) { animation-delay: 0.2s; }
  .ai-loading .dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes blink { 0%,80%,100%{opacity:0} 40%{opacity:1} }

  .ai-result-box { margin-top: 20px; border-radius: 12px; overflow: hidden; border: 1px solid #2a2a5a; }
  .ai-reading-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #1a1240; border-bottom: 1px solid #2a2a5a; }
  .ai-reading-icon { font-size: 2.2rem; line-height: 1; }
  .ai-reading-title { font-size: 1rem; font-weight: bold; color: #e0d0ff; }
  .ai-reading-sub { font-size: 0.75rem; color: #888; margin-top: 2px; }
  .ai-reading-label { font-size: 0.72rem; color: #6040aa; font-weight: bold; letter-spacing: 0.1em; padding: 10px 20px 0; }
  .ai-reading-text { font-size: 0.88rem; color: #d0c8e8; line-height: 1.85; padding: 12px 20px 16px; }

  .paywall-section { position: relative; }
  .paywall-content { filter: blur(3px); user-select: none; pointer-events: none; }
  .paywall-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(to bottom, transparent 0%, #0f0f1e 60%); border-radius: 0 0 12px 12px; }
  .paywall-gate-inner { text-align: center; padding: 16px; }
  .paywall-icon { font-size: 1.8rem; margin-bottom: 8px; }
  .paywall-msg { color: #ccc; font-size: 0.9rem; margin-bottom: 4px; }
  .paywall-msg2 { color: #888; font-size: 0.78rem; margin-bottom: 16px; }
  .paywall-btn { background: linear-gradient(135deg, #20c49a, #1a9a7a); color: #fff; border: none; padding: 12px 28px; border-radius: 10px; font-size: 0.95rem; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }
  .paywall-btn:hover { opacity: 0.88; }
  .paywall-unlocked .paywall-content { filter: none; pointer-events: auto; }
  .paywall-unlocked .paywall-gate { display: none; }

  .ai-error { color: var(--accent); background: #1a0a0a; border-radius: 8px; padding: 12px 16px; font-size: 0.85rem; }

  @media (max-width: 600px) {
    .concern-grid { grid-template-columns: 1fr; }
    .ai-steps { font-size: 0.7rem; }
  }
/* ---- ウィザード全体 ---- */
#wizard {
  position: fixed; inset: 0; z-index: 1000;
  background: #0d1b2e;
  display: flex; flex-direction: column;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  overflow-y: auto;
}
#wizard.wiz-hidden { display: none; }

/* プログレスバー */
.wiz-progress {
  position: sticky; top: 0; z-index: 10;
  height: 4px; background: #1a2d42;
}
.wiz-progress-fill {
  height: 100%; background: #20c49a;
  transition: width 0.4s ease;
}

/* ヘッダー (戻る + ステップ番号) */
.wiz-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 0;
  color: #aaa; font-size: 0.85rem;
}
.wiz-back-btn {
  background: none; border: none; color: #aaa;
  font-size: 1.4rem; cursor: pointer; padding: 4px 8px;
  border-radius: 8px; transition: background 0.2s;
  line-height: 1;
}
.wiz-back-btn:hover { background: #1a2d42; }
.wiz-step-label { margin-left: auto; color: #555; }

/* ステップコンテナ */
.wiz-step {
  display: none;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 60px);
  padding: 32px 20px 48px;
  text-align: center;
  position: relative;
}
.wiz-step.active { display: flex; }

/* 見出し */
.wiz-title {
  font-size: 2rem; font-weight: bold;
  color: #d4a94a; letter-spacing: 0.05em;
  margin-bottom: 12px; line-height: 1.3;
}
.wiz-sub {
  color: #8899aa; font-size: 0.9rem;
  margin-bottom: 32px; line-height: 1.6;
}

/* メインCTAボタン */
.wiz-btn-primary {
  background: #20c49a; color: #0d1b2e;
  border: none; border-radius: 12px;
  padding: 16px 40px; font-size: 1.05rem;
  font-weight: bold; cursor: pointer;
  transition: opacity 0.2s; width: 100%; max-width: 320px;
  margin-top: 20px;
}
.wiz-btn-primary:hover { opacity: 0.88; }
.wiz-btn-secondary {
  background: transparent; color: #20c49a;
  border: 1.5px solid #20c49a; border-radius: 12px;
  padding: 16px 20px; font-size: 0.95rem;
  font-weight: bold; cursor: pointer;
  transition: opacity 0.2s; width: 100%; max-width: 320px;
  margin-top: 20px;
}
.wiz-btn-secondary:hover { opacity: 0.8; }

/* テキストリンク */
.wiz-link {
  color: #20c49a; font-size: 0.88rem;
  background: none; border: none; cursor: pointer;
  text-decoration: underline; margin-top: 12px;
}

/* 性別カード */
.wiz-gender-cards {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 320px;
}
.wiz-gender-card {
  background: #1a2d42; border: 2px solid transparent;
  border-radius: 14px; padding: 18px 24px;
  font-size: 1.1rem; cursor: pointer; text-align: left;
  color: #e0e0e0; transition: all 0.2s;
  display: flex; align-items: center; gap: 14px;
}
.wiz-gender-card:hover, .wiz-gender-card.selected {
  border-color: #20c49a; background: #1e3a50;
}
.wiz-gender-icon { font-size: 1.6rem; }

/* スクロールピッカー */
.wiz-picker-row {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 28px;
}
.wiz-picker-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.wiz-picker-label {
  font-size: 0.75rem; color: #667788;
}
.wiz-picker {
  position: relative;
  width: 80px; height: 168px;
  overflow: hidden;
  border-radius: 12px;
  background: #1a2d42;
}
.wiz-picker::before, .wiz-picker::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 2;
  height: 60px; pointer-events: none;
}
.wiz-picker::before {
  top: 0;
  background: linear-gradient(to bottom, #1a2d42 0%, transparent 100%);
}
.wiz-picker::after {
  bottom: 0;
  background: linear-gradient(to top, #1a2d42 0%, transparent 100%);
}
.wiz-picker-highlight {
  position: absolute; top: 50%; left: 0; right: 0;
  height: 48px; transform: translateY(-50%);
  border-top: 1px solid #20c49a;
  border-bottom: 1px solid #20c49a;
  pointer-events: none; z-index: 1;
  border-radius: 4px;
}
.wiz-picker-list {
  overflow-y: scroll; height: 100%;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 60px 0;
}
.wiz-picker-list::-webkit-scrollbar { display: none; }
.wiz-picker-item {
  height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #8899aa;
  scroll-snap-align: center;
  cursor: pointer; user-select: none;
  transition: color 0.15s;
}
.wiz-picker-item.selected {
  color: #e0e0e0; font-weight: bold; font-size: 1.1rem;
}

/* 相談カード (縦リスト) */
.wiz-concern-list {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 360px;
}
.wiz-concern-card {
  background: #1a2d42; border: 2px solid transparent;
  border-radius: 14px; padding: 16px 20px;
  cursor: pointer; text-align: left;
  color: #e0e0e0; transition: all 0.2s;
  display: flex; align-items: center; gap: 14px;
}
.wiz-concern-card:hover, .wiz-concern-card.selected {
  border-color: #20c49a; background: #1e3a50;
}
.wiz-concern-icon { font-size: 1.5rem; flex-shrink: 0; }
.wiz-concern-name { font-weight: bold; font-size: 0.95rem; }
.wiz-concern-desc { font-size: 0.78rem; color: #8899aa; margin-top: 2px; }

/* テキスト入力 */
.wiz-textarea {
  width: 100%; max-width: 360px;
  background: #1a2d42; border: 1px solid #2a4060;
  color: #e0e0e0; border-radius: 10px;
  padding: 14px 16px; font-size: 0.92rem;
  resize: vertical; min-height: 110px;
  font-family: inherit; margin-bottom: 8px;
}
.wiz-textarea:focus { outline: none; border-color: #20c49a; }
.wiz-textarea::placeholder { color: #445566; }
.wiz-hint { font-size: 0.82rem; color: #8899aa; margin-bottom: 16px; }

/* ローディングアニメ */
.wiz-loading-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.wiz-avatar {
  font-size: 4rem; animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.wiz-bubble {
  background: #1a2d42; border-radius: 16px;
  padding: 16px 20px; max-width: 280px;
  color: #d4a94a; font-size: 1rem; line-height: 1.6;
  position: relative;
}
.wiz-bubble::before {
  content: '';
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #1a2d42;
}
.wiz-dots span {
  display: inline-block; animation: blink 1.4s infinite;
  color: #20c49a; font-size: 1.4rem;
}
.wiz-dots span:nth-child(2) { animation-delay: 0.2s; }
.wiz-dots span:nth-child(3) { animation-delay: 0.4s; }

/* 動物出現 */
.wiz-animal-reveal {
  background: #1a2d42; border: 2px solid #20c49a;
  border-radius: 16px; padding: 24px; max-width: 280px;
  text-align: center; animation: fadeIn 0.6s ease;
}
@keyframes fadeIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
.wiz-animal-emoji { font-size: 3.5rem; margin-bottom: 8px; }
.wiz-animal-name { font-size: 1.3rem; font-weight: bold; color: #d4a94a; }

/* 手相アップロード */
.wiz-upload-area {
  border: 2px dashed #2a4060; border-radius: 14px;
  padding: 28px; max-width: 320px; width: 100%;
  text-align: center; cursor: pointer;
  transition: border-color 0.2s;
}
.wiz-upload-area:hover { border-color: #20c49a; }
.wiz-upload-icon { font-size: 2.5rem; margin-bottom: 8px; }
.wiz-upload-hint { font-size: 0.82rem; color: #8899aa; margin-top: 8px; }
#wiz-palm-preview { margin-top: 14px; }
#wiz-palm-preview img {
  max-width: 150px; border-radius: 10px;
  border: 1px solid #20c49a;
}

/* APIキー入力 */
.wiz-api-row {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; max-width: 360px; margin-top: 16px;
}
.wiz-api-label { font-size: 0.75rem; color: #556677; text-align: left; }
.wiz-api-input {
  background: #1a2d42; border: 1px solid #2a4060;
  color: #ddd; border-radius: 8px;
  padding: 10px 14px; font-size: 0.82rem;
  font-family: monospace;
}
.wiz-api-input:focus { outline: none; border-color: #20c49a; }

/* Step10 結果ページ */
#main-result { display: none; }
#main-result.show { display: block; }

/* ========== 鑑定中アニメーション ========== */
.fortune-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px 24px;
  width: 100%;
}

/* 上部ステータステキスト */
.fortune-status {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e8dfc8;
  text-align: center;
  letter-spacing: 0.03em;
  min-height: 2em;
}
#fortune-status-text, #paid-status-text {
  display: inline-block;
  transition: opacity 0.3s ease;
}

/* 中央ビジュアル */
.fortune-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fortune-orb {
  font-size: 5rem;
  animation: orbPulse 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 24px #9966ff88);
}
@keyframes orbPulse {
  0%,100% { transform: translateY(0);   filter: drop-shadow(0 0 16px #9966ff66); }
  50%      { transform: translateY(-8px); filter: drop-shadow(0 0 32px #cc99ffaa); }
}

/* 下部: 鑑定項目 */
.fortune-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.fortune-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 0.9rem;
  color: #c0b8d8;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fortune-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 有料鑑定用（コンパクト版） */
.fortune-loading--inline {
  gap: 20px;
  padding: 24px 16px;
}
.fortune-loading--inline .fortune-status {
  font-size: 1rem;
}
.fortune-loading--inline .fortune-items {
  max-width: 100%;
}