*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { overflow-x: hidden; }
  body { overflow-x: hidden; max-width: 100vw; }
  @media (max-width: 900px) { html { font-size: 17px; } }
  @media (max-width: 480px) { html { font-size: 16px; } }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', 'Inter', sans-serif;
    -webkit-text-size-adjust: 100%;
    background: #edf2f9;
    background-image:
      radial-gradient(ellipse 90% 50% at 10% 0%, rgba(160,190,240,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 70% 40% at 90% 100%, rgba(120,190,210,0.14) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 50% 50%, rgba(100,150,220,0.08) 0%, transparent 70%);
    color: #dce6f0;
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
  }

  /* ── HEADER ── */
  header {
    background: linear-gradient(160deg, #080c14 0%, #0e1824 35%, #142030 65%, #18283c 100%);
    color: white;
    padding: 40px 40px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 2px 0 rgba(74,140,200,0.12);
  }
  header::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 1.5px 1.5px, rgba(100,170,240,0.05) 1px, transparent 0),
      radial-gradient(ellipse 50% 40% at 20% 30%, rgba(80,140,220,0.06) 0%, transparent 70%),
      radial-gradient(ellipse 40% 50% at 80% 70%, rgba(80,200,180,0.04) 0%, transparent 70%);
    background-size: 28px 28px, 100% 100%, 100% 100%;
    pointer-events: none;
  }
  header::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent 5%, rgba(74,130,188,0.4) 25%, rgba(100,200,210,0.7) 50%, rgba(74,170,130,0.4) 75%, transparent 95%);
  }
  .brand-logo {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.35em; text-transform: uppercase;
    color: rgba(120,180,220,0.5); margin-bottom: 10px; position: relative;
  }
  .brand-logo span {
    display: inline-block; width: 28px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100,180,220,0.4), transparent);
    vertical-align: middle; margin: 0 10px;
  }
  header h1 {
    font-size: 1.55rem; font-weight: 300; letter-spacing: 0.18em;
    position: relative;
    text-shadow: 0 2px 16px rgba(60,120,180,0.2);
    background: linear-gradient(135deg, #e8f2ff 0%, #d0e8f8 40%, #b8e8dc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
  }
  .brand-cn {
    font-size: 0.88rem; font-weight: 500; letter-spacing: 0.22em;
    color: rgba(180,210,230,0.55); position: relative; margin-top: 2px;
  }
  header .brand-tagline {
    margin-top: 12px; font-size: 0.82rem;
    color: rgba(160,190,210,0.45); position: relative; letter-spacing: 0.06em;
    font-weight: 400;
  }
  header .brand-credit {
    margin-top: 14px; font-size: 0.75rem;
    color: rgba(140,170,200,0.3); position: relative; letter-spacing: 0.12em;
    font-weight: 500;
  }
  header .brand-credit .credit-name {
    color: rgba(168,208,232,0.5); letter-spacing: 0.08em;
  }

  /* ── BRAND GLOW ANIMATION ── */
  @keyframes subtleGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
  }
  header h1::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 50%; transform: translateX(-50%);
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160,220,210,0.6), transparent);
    animation: subtleGlow 4s ease-in-out infinite;
  }

  /* ── LAYOUT ── */
  .container { display: flex; gap: 22px; padding: 26px 22px; max-width: 1320px; margin: 0 auto; }
  .sidebar {
    width: 308px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 22px; align-self: flex-start;
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .main { flex: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

  /* ── PANEL ── */
  .panel {
    background: rgba(24,28,38,0.97);
    border-radius: 18px;
    padding: 18px 18px 16px;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.2),
      0 4px 16px rgba(0,0,0,0.25),
      0 0 0 1px rgba(60,90,130,0.22);
    border: none;
    transition: box-shadow 0.2s;
  }
  .panel:hover {
    box-shadow:
      0 1px 2px rgba(0,0,0,0.22),
      0 6px 24px rgba(0,0,0,0.3),
      0 0 0 1px rgba(70,120,180,0.32),
      0 0 16px rgba(60,110,170,0.08);
  }
  .panel-title {
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: #8ec0e0; margin-bottom: 14px;
    display: flex; align-items: center; gap: 7px;
  }
  .panel-title::before {
    content: '';
    display: inline-block; width: 3px; height: 15px;
    background: linear-gradient(180deg, #4a8fc0, #60c8b8);
    border-radius: 2px; flex-shrink: 0;
    box-shadow: 0 0 6px rgba(74,143,192,0.2);
  }

  /* ── PANEL TOGGLE ── */
  .panel-toggle-btn {
    margin-left: auto; background: rgba(60,90,130,0.15);
    border: 1px solid rgba(60,90,130,0.3); border-radius: 6px;
    color: #6a9ac0; font-size: 0.85rem; width: 32px; height: 28px;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
  }
  .panel-toggle-btn:hover { background: rgba(60,90,130,0.3); color: #a0c8e0; }

  /* ── INFO TOOLTIP ── */
  .info-tip-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(78,140,200,0.15); border: 1px solid rgba(78,140,200,0.35);
    color: #6aacda; font-size: 0.65rem; font-weight: 700;
    cursor: pointer; flex-shrink: 0; transition: all 0.2s;
    line-height: 1; padding: 0; font-family: inherit;
    position: relative; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .info-tip-btn:hover, .info-tip-btn.active {
    background: rgba(78,140,200,0.3); border-color: #6aacda;
    color: #a0d4f0;
  }
  .info-tip-bubble {
    display: none; position: absolute; z-index: 100;
    left: 50%; transform: translateX(-50%); top: calc(100% + 8px);
    width: max(240px, min(320px, 80vw));
    padding: 12px 14px; border-radius: 10px;
    background: linear-gradient(135deg, #141e30, #1a2840);
    border: 1px solid #2a4868; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    font-size: 0.82rem; font-weight: 400; color: #b0c8e0;
    line-height: 1.65; letter-spacing: 0; text-transform: none;
    white-space: normal; text-align: left;
  }
  .info-tip-bubble::before {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 6px solid #2a4868;
  }
  .info-tip-bubble.show { display: block; }
  .info-tip-bubble .tip-title {
    font-size: 0.78rem; font-weight: 700; color: #8ec0e0;
    margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
  }
  .info-tip-bubble .tip-close {
    position: absolute; top: 6px; right: 8px;
    background: none; border: none; color: #5a7898; font-size: 1rem;
    cursor: pointer; padding: 2px 4px; line-height: 1;
  }
  @media (max-width: 900px) {
    .info-tip-bubble {
      position: fixed; left: 4vw !important; right: 4vw !important;
      top: auto !important; bottom: 80px;
      transform: none; width: auto; max-width: none;
      box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
    }
    .info-tip-bubble::before { display: none; }
  }

  /* ── STEP ACCORDION ── */
  .step-section { margin-bottom: 6px; }
  .step-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; user-select: none;
    background: linear-gradient(135deg, #101824, #162030);
    border: 1px solid #1e3040; border-radius: 12px;
    transition: all 0.2s;
  }
  .step-header:hover { border-color: #2a5070; background: linear-gradient(135deg, #142030, #1a2840); }
  .step-header.open { border-color: #2a5878; border-radius: 12px 12px 0 0; background: linear-gradient(135deg, #101c2c, #182840); }
  .step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: #1a3048; border: 1.5px solid #2a5878;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; color: #60a8d0; flex-shrink: 0;
  }
  .step-header.open .step-num { background: #1a4060; border-color: #4a90c0; color: #80d0f0; }
  .step-title { font-size: 0.85rem; font-weight: 700; color: #90b8d0; flex: 1; }
  .step-header.open .step-title { color: #b0d8f0; }
  .step-badge {
    font-size: 0.68rem; padding: 2px 8px; border-radius: 10px;
    background: #1a2838; color: #507090; border: 1px solid #2a3848;
  }
  .step-header.open .step-badge { background: #1a3048; color: #60a8c0; border-color: #2a5070; }
  .step-arrow {
    font-size: 1.1rem; color: #507090; transition: transform 0.25s;
    margin-left: auto; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: rgba(40,60,90,0.2);
    flex-shrink: 0;
  }
  .step-header.open .step-arrow { transform: rotate(180deg); color: #80c0e0; }
  /* Step 完成狀態 */
  .step-header.step-done .step-num { background: #0d4030; border-color: #2ecc71; color: #2ecc71; }
  .step-header.step-done .step-title { color: #6dd5a0; }
  .step-header.step-done .step-badge { background: #0d3028; color: #2ecc71; border-color: #1a5040; }
  .step-body {
    overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, padding 0.2s;
    max-height: 0; opacity: 0; padding: 0 0;
    border: 1px solid transparent; border-top: none;
  }
  .step-body.open {
    max-height: 5000px; opacity: 1; padding: 4px 0 0;
    border-color: #1e3040; border-radius: 0 0 12px 12px;
    background: #0e1520;
  }
  .step-hint {
    font-size: 0.78rem; color: #5a7a90; padding: 0 14px 8px;
    line-height: 1.5;
  }
  .step-body.open .step-hint { display: block; }
  .step-body:not(.open) .step-hint { display: none; }
  .step-skip-btn {
    display: block; width: 100%; margin-top: 14px; padding: 9px 0;
    background: linear-gradient(135deg, #1a2538, #1e2d42); border: 1px dashed #2a4a68;
    border-radius: 10px; color: #5a90b8; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; text-align: center; transition: all 0.2s;
  }
  .step-skip-btn:hover { background: #1e3048; color: #7ab8e0; border-color: #3a6888; }

  /* ── FIELDS & SELECT ── */
  .field { margin-bottom: 10px; }
  .field label {
    display: block; font-size: 0.85rem; font-weight: 700;
    color: #82b4d4; margin-bottom: 5px; letter-spacing: 0.01em;
  }
  select {
    width: 100%; padding: 10px 34px 10px 13px; border-radius: 11px;
    border: 1.5px solid #2a3848;
    background: #181e2c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a8fc0' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
    font-size: 0.93rem; color: #dce6f0; cursor: pointer;
    appearance: none; transition: border-color 0.15s, box-shadow 0.15s;
  }
  select:hover { border-color: #3a6898; }
  select:focus {
    outline: none; border-color: #4a8fc0;
    box-shadow: 0 0 0 3px rgba(74,143,192,0.18);
    background-color: #1e2838;
  }

  /* ── ARROWS ── */
  .arrows-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .arrow-field label {
    font-size: 0.82rem; font-weight: 700; color: #82b4d4;
    display: block; margin-bottom: 5px; letter-spacing: 0.01em;
  }
  .arrow-toggle {
    display: flex; border-radius: 10px; overflow: hidden;
    border: 1.5px solid #2a3848; background: #181e2c;
  }
  .arrow-toggle button {
    flex: 1; padding: 9px 0; border: none; cursor: pointer;
    font-size: 0.87rem; font-weight: 700; transition: all 0.18s;
    background: transparent; color: #7a9aba; letter-spacing: 0.01em;
  }
  .arrow-toggle button.active {
    background: linear-gradient(135deg, #1e3050, #2a4068);
    color: #b0d4f0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  }
  .arrow-toggle button:first-child { border-right: 1.5px solid #2a3848; }

  /* ── CHANNELS ── */
  .channels-grid {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 250px; overflow-y: auto; padding-right: 2px;
  }
  .ability-group {}
  .ability-group-title {
    font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 6px;
    margin-bottom: 6px; display: inline-block;
  }
  .ability-group-title.影響力型 { background: #2a2010; color: #c4a060; }
  .ability-group-title.創造型   { background: #101828; color: #6090c0; }
  .ability-group-title.突破型   { background: #281020; color: #c060a0; }
  .ability-group-title.策略型   { background: #102018; color: #50a870; }
  .ability-group-title.情緒型   { background: #182028; color: #8090b8; }
  .channel-checks { display: flex; flex-wrap: wrap; gap: 4px; }
  .channel-chip {
    padding: 8px 12px; border-radius: 20px; cursor: pointer;
    font-size: 0.82rem; font-weight: 600;
    border: 1.5px solid #363840;
    background: #252830; color: #9aa0b4;
    transition: all 0.14s;
    user-select: none; min-height: 40px;
    display: inline-flex; align-items: center;
  }
  .channel-chip:hover { border-color: #6a7888; color: #bcc4d4; background: #2e3240; }
  .channel-chip input { display: none; }
  .channel-chip.checked.影響力型 { background: #2a2010; border-color: #9a7040; color: #d4b070; font-weight: 700; }
  .channel-chip.checked.創造型   { background: #101828; border-color: #3868a0; color: #78a8d8; font-weight: 700; }
  .channel-chip.checked.突破型   { background: #281020; border-color: #a03870; color: #d878b8; font-weight: 700; }
  .channel-chip.checked.策略型   { background: #102018; border-color: #387858; color: #68c090; font-weight: 700; }
  .channel-chip.checked.情緒型   { background: #182028; border-color: #585888; color: #98a8d0; font-weight: 700; }

  /* ── RESET BUTTON ── */
  .btn-reset {
    width: 100%; padding: 11px; border-radius: 12px;
    background: linear-gradient(135deg, #182030, #1e2840);
    color: #70aad0; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: all 0.18s; letter-spacing: 0.02em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    border: 1px solid #2a3a58;
  }
  .btn-reset:hover {
    background: linear-gradient(135deg, #1e2c40, #263850);
    box-shadow: 0 2px 8px rgba(40,90,160,0.2);
    transform: translateY(-1px);
    color: #7aaad4;
  }
  .btn-reset:active { transform: translateY(0); }

  /* ── OUTPUT CARDS ── */
  .output-card {
    background: #18202e; border-radius: 20px; overflow: hidden;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.3),
      0 6px 24px rgba(0,0,0,0.4),
      0 0 0 1px rgba(50,80,130,0.25);
    border: none;
    animation: fadeIn 0.32s cubic-bezier(0.34,1.14,0.64,1);
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  .card-header {
    padding: 16px 22px;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
  }
  .card-header::after {
    content: '';
    position: absolute; right: -20px; top: -20px;
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
  }
  .card-icon {
    font-size: 1.35rem;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.15); border-radius: 12px;
    flex-shrink: 0; backdrop-filter: blur(4px);
  }
  .card-title { font-size: 1.1rem; font-weight: 800; color: white; letter-spacing: 0.01em; }
  .card-subtitle { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-top: 2px; }
  .card-body { padding: 22px 24px; overflow-wrap: anywhere; word-wrap: break-word; }
  .card-body p, .card-body div, .card-body span { overflow-wrap: anywhere; word-wrap: break-word; }
  .output-card { max-width: 100%; overflow: hidden; }

  /* Card header gradients — dark base with subtle color tints */
  .header-type      { background: linear-gradient(135deg, #141a2e 0%, #1e2844 60%, #263460 100%); border-bottom: 1px solid rgba(80,120,200,0.2); }
  .header-authority { background: linear-gradient(135deg, #18142e 0%, #241e44 60%, #302858 100%); border-bottom: 1px solid rgba(120,80,200,0.2); }
  .header-role      { background: linear-gradient(135deg, #121c32 0%, #1a2a4a 60%, #223662 100%); border-bottom: 1px solid rgba(60,110,200,0.2); }
  .header-definition{ background: linear-gradient(135deg, #10202a 0%, #163040 60%, #1c3c50 100%); border-bottom: 1px solid rgba(40,130,180,0.2); }
  .header-variable  { background: linear-gradient(135deg, #101e20 0%, #162c2e 60%, #1e3836 100%); border-bottom: 1px solid rgba(40,150,140,0.2); }
  .header-phs       { background: linear-gradient(135deg, #101e18 0%, #162c20 60%, #1e3828 100%); border-bottom: 1px solid rgba(40,160,100,0.2); }
  .header-channels  { background: linear-gradient(135deg, #201a10 0%, #302618 60%, #3c3020 100%); border-bottom: 1px solid rgba(180,130,40,0.2); }
  .header-cross     { background: linear-gradient(135deg, #18102a 0%, #261840 60%, #342050 100%); border-bottom: 1px solid rgba(160,90,230,0.25); }
  .header-nodes     { background: linear-gradient(135deg, #0c1824 0%, #102030 60%, #143040 100%); border-bottom: 1px solid rgba(40,160,200,0.25); }

  /* number input — matches select style */
  input[type=number] {
    width: 100%; padding: 10px 13px; border-radius: 11px;
    border: 1.5px solid #2a3848; background: #181e2c;
    color: #dce6f0; font-size: 0.93rem; font-family: inherit;
    -moz-appearance: textfield; outline: none;
    transition: border-color 0.2s;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
  input[type=number]:focus { border-color: #4a7aaa; }
  input[type=number]::placeholder { color: #3a4858; }

  /* cross gate row */
  .gate-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 13px; border-radius: 12px;
    background: #181e2c; margin-bottom: 8px;
    border: 1px solid #252e40;
  }
  .gate-badge {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 800; flex-shrink: 0;
    border: 1.5px solid;
  }
  .gate-badge-num { font-size: 0.76rem; font-weight: 700; margin-top: 1px; opacity: 0.8; }

  /* ── INFO BLOCKS ── */
  .info-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 20px;
    font-size: 0.88rem; font-weight: 700;
  }
  .tag-strategy { background: linear-gradient(135deg, #162030, #1e2c44); color: #90c8f0; border: 1px solid rgba(74,143,200,0.3); }
  .tag-nonself  { background: linear-gradient(135deg, #28201a, #342a1e); color: #e0b880; border: 1px solid rgba(200,160,60,0.3); }
  .tag-percent  { background: linear-gradient(135deg, #162820, #1e3428); color: #80d8a8; border: 1px solid rgba(60,180,110,0.3); }

  .section-label {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.13em;
    text-transform: uppercase; color: #70b0d4; margin: 18px 0 10px;
    display: flex; align-items: center; gap: 8px;
  }
  .section-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(74,143,192,0.35), transparent);
  }
  .trait-list { display: flex; flex-direction: column; gap: 7px; }
  .trait-item {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 0.93rem; line-height: 1.65; color: #c4ccdc;
    min-width: 0;
  }
  .trait-item > span { flex: 1; min-width: 0; overflow-wrap: anywhere; word-wrap: break-word; }
  .trait-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, #3a7aaa, #5aaac8);
    flex-shrink: 0; margin-top: 6px;
  }
  .advice-box {
    background: linear-gradient(135deg, #16202e, #1c2838);
    border-left: 3px solid #3a7aaa;
    border-radius: 0 12px 12px 0; padding: 14px 18px;
    font-size: 0.93rem; line-height: 1.7; color: #c4d8e8;
    margin-top: 12px;
    overflow-wrap: anywhere; word-wrap: break-word;
  }
  .decision-steps { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
  .step {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 0.93rem; line-height: 1.65; color: #c4ccdc;
    min-width: 0;
  }
  .step > span { flex: 1; min-width: 0; overflow-wrap: anywhere; word-wrap: break-word; }
  .step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, #1e3858, #2a5080);
    color: #a0c8e8; font-size: 0.72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(40,80,140,0.35);
  }

  /* ── VARIABLE ── */
  .animal-display {
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
    background: linear-gradient(135deg, #202430, #252a38);
    border-radius: 14px; padding: 14px 16px;
    border: 1px solid #363a4a;
  }
  .animal-emoji { font-size: 2.6rem; }
  .animal-name { font-size: 1.2rem; font-weight: 800; color: #e8ecf4; }
  .animal-alias { font-size: 0.87rem; color: #9aaac0; margin-top: 3px; font-weight: 500; }
  .arrow-display { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
  .arrow-badge {
    padding: 6px 14px; border-radius: 20px; font-size: 0.86rem; font-weight: 700;
    background: linear-gradient(135deg, #252838, #2e3248); color: #bcc6d6;
  }

  /* ── PHS HELP ── */
  .phs-help-btn {
    width: 100%; padding: 10px 14px; margin-bottom: 12px;
    border: 1.5px solid #363a4a; border-radius: 11px;
    background: linear-gradient(135deg, #202430, #252a38);
    color: #9aa6b8; font-size: 0.87rem; font-weight: 700;
    cursor: pointer; text-align: left;
    display: flex; justify-content: space-between; align-items: center;
    transition: all 0.15s;
  }
  .phs-help-btn:hover { background: linear-gradient(135deg, #252a38, #2e3248); border-color: #6a7888; }
  .phs-help-box {
    display: none; background: #202430; border-radius: 12px;
    padding: 14px 15px; margin-bottom: 14px;
    border: 1.5px solid #363a4a; font-size: 0.86rem; line-height: 1.65; color: #c0c8d8;
    overflow-wrap: anywhere; word-wrap: break-word;
  }
  .phs-help-box.open { display: block; }
  .phs-num-demo {
    background: #252830; border-radius: 10px; padding: 10px 12px;
    margin: 8px 0; border: 1px solid #363a4a;
    font-family: monospace; font-size: 0.8rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
  .phs-num-row { display: flex; gap: 3px; margin-top: 5px; }
  .phs-num-cell {
    flex: 1; text-align: center; padding: 5px 2px; border-radius: 7px;
    font-size: 0.78rem; font-weight: 800;
  }
  .phs-num-label { color: #8a94a8; font-size: 0.75rem; text-align: center; margin-top: 2px; }
  .phs-help-tip {
    background: linear-gradient(135deg, #2a2418, #302c1e);
    border-left: 3px solid #8a7040;
    border-radius: 0 9px 9px 0; padding: 10px 13px; margin-top: 10px;
    font-size: 0.84rem; line-height: 1.58; color: #d4b880;
  }
  .phs-help-link {
    background: linear-gradient(135deg, #182820, #1e3028);
    border-left: 3px solid #2a7050;
    border-radius: 0 9px 9px 0; padding: 10px 13px; margin-top: 8px;
    font-size: 0.84rem; line-height: 1.58; color: #78d0a0;
  }

  /* ── PHS ── */
  .phs-section-label {
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: #90a0b4; margin-bottom: 8px;
  }
  .phs-result {
    background: linear-gradient(135deg, #182820, #1e3028);
    border-radius: 14px; padding: 16px; margin-top: 8px;
    border: 1px solid rgba(42,112,80,0.25);
  }
  .phs-type { font-size: 1.15rem; font-weight: 800; color: #78d0a0; margin-bottom: 6px; }
  .phs-desc { font-size: 0.93rem; line-height: 1.7; color: #c4ccdc; overflow-wrap: anywhere; word-wrap: break-word; }
  .phs-sub-section {
    background: #222530; border-radius: 14px; padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid #363a4a;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
  .phs-sub-title {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 8px;
  }
  .phs-sub-title.det { color: #4aaa80; }
  .phs-sub-title.cog { color: #4a90b8; }
  .phs-sub-title.env { color: #7a8898; }
  .phs-variant-badge {
    display: inline-block; padding: 4px 12px; border-radius: 14px;
    font-size: 0.84rem; font-weight: 800; margin-bottom: 8px;
  }
  .phs-feature-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
  .phs-feature-item {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 0.9rem; line-height: 1.6; color: #c4ccdc;
    min-width: 0;
  }
  .phs-feature-item > span { flex: 1; min-width: 0; overflow-wrap: anywhere; word-wrap: break-word; }
  .phs-feature-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #2a7050, #4aaa80);
    flex-shrink: 0; margin-top: 6px;
  }
  .phs-insight {
    background: linear-gradient(135deg, #2a2418, #302c1e);
    border-left: 3px solid #8a7040;
    border-radius: 0 10px 10px 0; padding: 12px 15px;
    font-size: 0.9rem; line-height: 1.6; color: #d4b880; margin-top: 10px;
    overflow-wrap: anywhere; word-wrap: break-word;
  }
  .phs-mode-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 14px; font-size: 0.84rem; font-weight: 800;
    margin-bottom: 8px;
  }
  .mode-active  { background: linear-gradient(135deg, #1c2838, #222e44); color: #7aaad4; }
  .mode-passive { background: linear-gradient(135deg, #281c30, #302038); color: #c070a0; }
  .env-feature-dot { background: linear-gradient(135deg, #5a6878, #7a8898); }

  /* ── CHANNELS RESULT ── */
  .ability-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .ability-bar-row { display: flex; align-items: center; gap: 10px; }
  .ability-bar-label { width: 72px; font-size: 0.85rem; font-weight: 700; color: #a0a6b8; }
  .ability-bar-track {
    flex: 1; height: 9px; background: #2a2d38; border-radius: 10px; overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
  }
  .ability-bar-fill { height: 100%; border-radius: 10px; transition: width 0.5s cubic-bezier(0.34,1.14,0.64,1); }
  .bar-影響力型 { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
  .bar-創造型   { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
  .bar-突破型   { background: linear-gradient(90deg, #f472b6, #ec4899); }
  .bar-策略型   { background: linear-gradient(90deg, #34d399, #10b981); }
  .bar-情緒型   { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
  .ability-bar-count { font-size: 0.87rem; font-weight: 800; color: #a0a8ba; width: 18px; }
  .channel-list-selected { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

  /* ── CENTERS BODYGRAPH ── */
  .centers-svg-wrap {
    background: linear-gradient(135deg, #14182a, #1a2038);
    border-radius: 14px; padding: 10px 8px 8px;
    margin-bottom: 8px;
    border: 1px solid #2a3858;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), 0 0 0 0 rgba(74,143,192,0);
  }
  .centers-svg { display:block; width:92%; max-width:210px; margin:0 auto; }
  .center-shape { cursor:pointer; transition:fill 0.2s, stroke 0.2s, filter 0.15s; }
  .center-shape:hover { filter: brightness(1.12) drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
  .center-lbl { font-size:8px; font-weight:700; fill:#8090a0; pointer-events:none; text-anchor:middle; dominant-baseline:middle; }
  .center-lbl.w { fill:#fff; }
  .centers-hint { font-size:0.78rem; color:#60aed4; text-align:center; margin:4px 0 0; letter-spacing:0.03em; }
  /* Centers output card */
  .center-card-row { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid #2a2d38; min-width:0; }
  .center-card-row > div:last-child { min-width:0; overflow-wrap:anywhere; }
  .center-card-row:last-child { border-bottom:none; padding-bottom:0; }
  .center-dot { width:40px; min-width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:800; text-align:center; line-height:1.2; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
  .center-dot.undef { background:#2e3240; color:#6a7080; box-shadow:none; }
  .center-info-name { font-size:0.95rem; font-weight:800; color:#e4e8f0; }
  .center-info-role { font-size:0.78rem; color:#7a8498; margin-bottom:4px; font-weight:500; }
  .center-info-body { font-size:0.88rem; color:#c4ccdc; line-height:1.6; overflow-wrap:anywhere; word-wrap:break-word; }
  .center-tip { font-size:0.82rem; color:#8ac0e0; background:linear-gradient(135deg,#141e2e,#1a2a3e); border-radius:8px; padding:8px 12px; margin-top:7px; line-height:1.55; border-left:2px solid #3a6898; overflow-wrap:anywhere; word-wrap:break-word; }

  /* ── EMPTY STATE ── */
  .empty-state { text-align: center; padding: 50px 20px; }
  .empty-icon { font-size: 3.8rem; margin-bottom: 14px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); opacity: 0.7; }
  .empty-text { font-size: 1.05rem; color: #6a7a8a; font-weight: 500; letter-spacing: 0.02em; }

  /* ── WELCOME GUIDE ── */
  .welcome-guide {
    max-width: 560px; margin: 28px auto 0; text-align: left;
  }
  .welcome-divider {
    width: 40px; height: 1px; margin: 0 auto 24px;
    background: linear-gradient(90deg, transparent, rgba(100,180,220,0.35), transparent);
  }
  .welcome-section {
    margin-bottom: 20px;
  }
  .welcome-section-title {
    font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: #4a7a98; margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
  }
  .welcome-section-title::before {
    content: ''; display: inline-block; width: 10px; height: 1px;
    background: rgba(70,120,160,0.5); flex-shrink: 0;
  }
  .welcome-body {
    font-size: 0.92rem; line-height: 1.78; color: #5a6a7a;
    padding-left: 18px;
  }
  .welcome-body strong { color: #3a6080; font-weight: 700; }
  .welcome-modes {
    display: flex; gap: 10px; margin-top: 12px;
  }
  .welcome-mode-card {
    flex: 1; padding: 14px 16px; border-radius: 14px;
    border: 1px solid #2a3444;
    background: rgba(20,26,36,0.92);
    backdrop-filter: blur(4px);
  }
  .welcome-mode-card .mode-icon { font-size: 1.3rem; margin-bottom: 6px; }
  .welcome-mode-card .mode-name {
    font-size: 0.88rem; font-weight: 800; margin-bottom: 6px;
    letter-spacing: 0.04em;
  }
  .welcome-mode-card .mode-desc {
    font-size: 0.86rem; line-height: 1.65; color: #a8b8c8;
  }
  .welcome-mode-card.mode-high { border-color: #2a4030; }
  .welcome-mode-card.mode-high .mode-name { color: #80c860; }
  .welcome-mode-card.mode-shadow { border-color: #3a2840; }
  .welcome-mode-card.mode-shadow .mode-name { color: #b080d8; }
  .welcome-start-hint {
    text-align: center; margin-top: 20px;
    font-size: 0.85rem; color: #4a6878; letter-spacing: 0.04em;
  }
  .welcome-start-hint .arrow-hint {
    display: inline-block; margin-left: 4px;
    animation: subtleGlow 3s ease-in-out infinite;
    color: #5a90b0;
  }
  .welcome-start-hint .mobile-hint { display: none; }
  .mobile-start-btn {
    display: inline-block; margin-top: 6px; padding: 12px 28px;
    background: linear-gradient(135deg, #1a3048, #1e3852);
    border: 1px solid #2a5070; border-radius: 12px;
    color: #70c8f0; font-size: 0.92rem; font-weight: 700;
    letter-spacing: 0.06em; cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 12px rgba(40,100,160,0.15);
  }
  .mobile-start-btn:active {
    transform: scale(0.97);
    background: linear-gradient(135deg, #1e3852, #224060);
  }
  @media (max-width: 900px) {
    .welcome-start-hint .desktop-hint { display: none; }
    .welcome-start-hint .mobile-hint { display: block; text-align: center; }
    .empty-state { padding: 24px 16px 32px; }
    .empty-icon { display: none; }
    .empty-text { font-size: 1.1rem; color: #5a6a7a; margin-bottom: 4px; }
    .welcome-guide { margin-top: 16px; }
    .welcome-divider { margin-bottom: 18px; }
    .welcome-section-title { font-size: 0.78rem; }
    .welcome-body { font-size: 0.95rem; padding-left: 14px; }
    .welcome-mode-card { padding: 16px 18px; }
    .welcome-mode-card .mode-name { font-size: 0.9rem; }
    .welcome-mode-card .mode-desc { font-size: 0.88rem; }
    .mobile-start-btn { padding: 14px 32px; font-size: 0.95rem; }
  }
  @media (max-width: 480px) {
    .welcome-modes { flex-direction: column; }
    .welcome-guide { margin-top: 12px; }
    .welcome-body { padding-left: 10px; font-size: 0.93rem; }
    .empty-state { padding: 18px 14px 28px; }
    .welcome-section { margin-bottom: 18px; }
  }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2a4878, #3a6090); border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: #4a78a8; }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    header { padding: 20px 20px 16px; }
    header h1 { font-size: 1.3rem; letter-spacing: 0.14em; }
    .brand-logo { margin-bottom: 6px; }
    .brand-cn { font-size: 0.82rem; }
    .brand-tagline { font-size: 0.74rem; margin-top: 8px; }
    .brand-credit { margin-top: 8px; font-size: 0.7rem; }
    .container { flex-direction: column; padding: 14px 12px; gap: 14px; }
    .sidebar { width: 100%; position: static; max-height: none; overflow-y: visible; }
    .main { gap: 14px; }
    .panel { padding: 16px 15px; }
    .panel-title { font-size: 0.84rem; margin-bottom: 16px; }
    .field label { font-size: 0.9rem; margin-bottom: 6px; }
    .channel-chip { padding: 7px 13px; font-size: 0.88rem; }
    .channels-grid { max-height: none; }
    .arrow-toggle button { padding: 12px 0; font-size: 0.9rem; }
    .arrow-field label { font-size: 0.86rem; }
    select { font-size: 0.97rem; padding: 12px 34px 12px 14px; }
    input[type=number] { font-size: 0.97rem; padding: 12px 14px; }
    .card-body { padding: 18px 20px; }
    .card-header { padding: 15px 20px; }
    .card-title { font-size: 1.08rem; }
    .card-subtitle { font-size: 0.88rem; }
    .phs-num-demo { overflow-x: auto; }
    .arrows-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ability-bar-label { width: 62px; font-size: 0.86rem; }
    .trait-item { font-size: 0.95rem; }
    .advice-box { font-size: 0.95rem; padding: 14px 16px; }
    .tag { font-size: 0.9rem; padding: 7px 14px; }
    .step { font-size: 0.95rem; }
    .phs-help-btn { font-size: 0.9rem; padding: 12px 14px; }
    .phs-help-box { font-size: 0.9rem; }
    .phs-desc { font-size: 0.95rem; }
    .phs-feature-item { font-size: 0.93rem; }
    .phs-insight { font-size: 0.93rem; }
    .section-label { font-size: 0.8rem; }
    .btn-reset { padding: 14px; font-size: 0.95rem; }
    .btn-view-results { font-size: 0.95rem; padding: 14px 16px; }
    .info-row { gap: 8px; margin-bottom: 12px; }
    .mobile-start-btn { padding: 14px 32px; font-size: 0.95rem; }
  }

  @media (max-width: 480px) {
    header { padding: 16px 16px 14px; }
    header h1 { font-size: 1.15rem; letter-spacing: 0.1em; margin-bottom: 2px; }
    .brand-logo { font-size: 0.68rem; margin-bottom: 4px; }
    .brand-cn { font-size: 0.78rem; }
    header h1::after { display: none; }
    .container { padding: 10px 8px; gap: 12px; }
    .panel { padding: 14px 13px; border-radius: 16px; }
    .output-card { border-radius: 16px; }
    .card-body { padding: 16px 15px; }
    .card-header { padding: 14px 50px 14px 15px; gap: 10px; }
    .card-icon { width: 38px; height: 38px; font-size: 1.2rem; border-radius: 10px; }
    .card-title { font-size: 1.05rem; }
    .btn-reset { padding: 14px; font-size: 0.95rem; }
    .info-row { gap: 6px; }
    .tag { font-size: 0.86rem; padding: 6px 12px; }
    .channel-checks { gap: 5px; }
    .channel-chip { padding: 12px 14px; font-size: 0.86rem; }
    .step { font-size: 0.93rem; }
    .step-num { width: 26px; height: 26px; font-size: 0.75rem; }
    .animal-display { padding: 12px 13px; border-radius: 12px; }
    .animal-emoji { font-size: 2.2rem; }
    .animal-name { font-size: 1.1rem; }
    .arrow-toggle button { padding: 13px 0; font-size: 0.88rem; }
    select { font-size: 1rem; padding: 13px 34px 13px 14px; border-radius: 12px; }
    input[type=number] { font-size: 1rem; padding: 13px 14px; border-radius: 12px; }
    .mobile-tab-btn { padding: 13px 10px; font-size: 0.88rem; }
    .gate-row { padding: 12px 12px; }
    .gate-badge { width: 42px; height: 42px; }
    .trait-item { font-size: 0.88rem; }
    .advice-box { padding: 12px 14px; font-size: 0.88rem; }
    .phs-insight { padding: 10px 13px; font-size: 0.86rem; }
    .phs-feature-item { font-size: 0.86rem; }
    .phs-desc { font-size: 0.88rem; }
    .phs-result { padding: 14px 13px; }
    .phs-sub-section { padding: 12px 13px; }
    .center-card-row { gap: 8px; padding: 10px 0; }
    .center-dot { width: 36px; min-width: 36px; height: 36px; font-size: 0.72rem; }
    .center-info-name { font-size: 0.9rem; }
    .center-info-body { font-size: 0.84rem; }
    .center-tip { font-size: 0.78rem; padding: 7px 10px; }
    .card-subtitle { font-size: 0.82rem; }
    .toc-bar { padding: 10px 10px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
    .toc-item { font-size: 0.68rem; padding: 5px 10px; flex-shrink: 0; min-height: 32px; display: inline-flex; align-items: center; }
    .toc-actions { flex-shrink: 0; }
    .arrows-grid { grid-template-columns: 1fr; gap: 8px; }
    .input-grid-2col { grid-template-columns: 1fr !important; }
    .arrow-field label { font-size: 0.8rem; word-break: break-word; }
    .card-collapse-btn { width: 34px; height: 34px; right: 12px; }
    .channel-chip { padding: 10px 14px; min-height: 42px; }
    .gate-badge { width: 44px; height: 44px; }
  }

  /* ── 極小螢幕 (360px 以下) ── */
  @media (max-width: 360px) {
    html { font-size: 15px; }
    .container { padding: 8px 6px; gap: 10px; }
    .card-body { padding: 14px 12px; }
    .card-header { padding: 12px 48px 12px 13px; gap: 8px; }
    .card-icon { width: 34px; height: 34px; font-size: 1.1rem; }
    .card-title { font-size: 0.98rem; }
    .trait-item { font-size: 0.84rem; gap: 7px; }
    .advice-box { padding: 10px 12px; font-size: 0.84rem; }
    .tag { font-size: 0.82rem; padding: 5px 10px; }
    .mobile-tab-btn { font-size: 0.82rem; padding: 12px 8px; }
    .toc-item { font-size: 0.65rem; padding: 3px 8px; min-height: 28px; }
    .step { font-size: 0.86rem; }
    .animal-emoji { font-size: 1.8rem; }
    .animal-name { font-size: 1rem; }
    .confirm-dialog { padding: 20px 16px; }
    .channel-chip { padding: 8px 12px; font-size: 0.8rem; }
    .arrow-field label { font-size: 0.76rem; }
  }

  /* ── 超小螢幕 (320px 以下) ── */
  @media (max-width: 320px) {
    html { font-size: 14.5px; }
    .container { padding: 6px 4px; }
    .mobile-tab-btn { font-size: 0.78rem; padding: 11px 6px; }
    .card-body { padding: 12px 10px; }
    .card-header { padding: 10px 44px 10px 11px; gap: 6px; }
    .card-icon { width: 30px; height: 30px; font-size: 1rem; border-radius: 8px; }
    .card-title { font-size: 0.92rem; }
    .trait-item { font-size: 0.8rem; gap: 6px; }
    .centers-svg { max-width: 180px; }
  }

  /* ── 輸入驗證錯誤樣式 ── */
  input.input-invalid {
    border-color: #c04040 !important;
    background: rgba(200,60,60,0.09) !important;
    box-shadow: 0 0 0 2px rgba(200,60,60,0.20) !important;
  }
  .input-error-msg {
    color: #e08888;
    font-size: 0.78rem;
    margin-top: 4px;
    padding-left: 2px;
    line-height: 1.4;
  }

  /* ── 查看結果按鈕（行動裝置顯示，桌面隱藏）── */
  @keyframes btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(80,160,220,0.0); }
    50%       { box-shadow: 0 0 0 5px rgba(80,160,220,0.22); }
  }
  .btn-view-results {
    display: none;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: opacity 0.18s, transform 0.12s, box-shadow 0.2s;
  }
  .btn-view-results:active { opacity: 0.75; transform: scale(0.97); }
  .btn-view-basic {
    background: linear-gradient(135deg, #1a3a5a, #1e4870);
    color: #90d0f0;
    border: 1px solid #3060a0;
    margin-top: 4px;
    animation: btn-pulse 2.4s ease-in-out infinite;
  }
  .btn-view-full {
    background: linear-gradient(135deg, #1e2e58, #26386a);
    color: #a8c0f0;
    border: 1px solid #3850b8;
    margin-bottom: 4px;
    animation: btn-pulse 2.4s ease-in-out 1.2s infinite;
  }

  /* ── 行動裝置 Tab 切換 ── */
  .mobile-tabs { display: none; }

  @media (max-width: 900px) {
    .mobile-tabs {
      display: flex;
      position: sticky;
      top: 0;
      z-index: 300;
      background: #0b1520;
      border-bottom: 1px solid #1a2e40;
      box-shadow: 0 2px 14px rgba(0,0,0,0.45);
    }
    .mobile-tab-btn {
      flex: 1;
      padding: 14px 10px;
      background: none;
      border: none;
      border-bottom: 3px solid transparent;
      color: #5a7890;
      font-size: 0.93rem;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: color 0.18s, border-color 0.18s, background 0.18s;
    }
    .mobile-tab-btn:active { opacity: 0.7; }
    .mobile-tab-btn.active {
      color: #70d0f8;
      border-bottom-color: #70d0f8;
      background: rgba(50,120,180,0.10);
    }
    .sidebar.mob-hidden { display: none !important; }
    .main.mob-hidden    { display: none !important; }
    .btn-view-results   { display: block; }
    .mobile-fab {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      position: fixed; bottom: 24px; right: 18px; z-index: 500;
      padding: 12px 20px; border-radius: 50px;
      background: linear-gradient(135deg, #1a4a70, #2a6090);
      border: 1px solid #3a80b8; color: #d0e8ff;
      font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em;
      box-shadow: 0 4px 20px rgba(0,60,120,0.5), 0 0 0 3px rgba(40,100,180,0.15);
      cursor: pointer; transition: all 0.2s;
    }
    .mobile-fab:active { transform: scale(0.95); opacity: 0.85; }
  }

  /* ── 卡片摺疊 ── */
  .card-collapse-btn {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1); border: none; color: rgba(255,255,255,0.7);
    width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: all 0.18s; z-index: 2;
  }
  .card-collapse-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
  .card-body-collapsible { transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, padding 0.3s; overflow: hidden; }
  .card-body-collapsible.collapsed { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; }

  /* ── 結果目錄導航 ── */
  .toc-bar {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px;
    background: rgba(24,28,38,0.95); border-radius: 14px;
    border: 1px solid #2a3848; position: sticky; top: 22px; z-index: 50;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    align-items: center;
  }
  @media (max-width: 900px) { .toc-bar { top: 52px; } }
  .toc-item {
    padding: 5px 12px; border-radius: 8px; font-size: 0.72rem; font-weight: 600;
    color: #6a8898; background: #101820; border: 1px solid #1e2840;
    cursor: pointer; transition: all 0.15s; white-space: nowrap; letter-spacing: 0.03em;
  }
  .toc-item:hover { background: #182838; color: #90c0e0; border-color: #3a5878; }
  .toc-actions { display: flex; gap: 6px; margin-left: auto; }
  .toc-action-btn {
    padding: 5px 12px; border-radius: 8px; font-size: 0.72rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s; border: 1px solid; letter-spacing: 0.03em;
  }
  .toc-btn-export { background: #0d1e18; color: #50b880; border-color: #1e4830; }
  .toc-btn-export:hover { background: #122818; color: #60d090; border-color: #2a6840; }

  /* ── 匯出下拉選單 ── */
  .export-dropdown { position: relative; display: inline-block; }
  .export-menu {
    display: none; position: absolute; bottom: 110%; right: 0; min-width: 180px;
    background: #1a2a20; border: 1px solid #2a5038; border-radius: 10px;
    padding: 6px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  }
  .export-menu.show { display: block; }
  .export-menu-item {
    display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 7px;
    color: #90c8a8; font-size: 0.75rem; font-weight: 600; cursor: pointer;
    border: none; background: transparent; width: 100%; text-align: left;
    transition: background 0.15s;
  }
  .export-menu-item:hover { background: #224030; color: #b0e8c8; }
  .export-menu-item .export-icon { font-size: 1rem; width: 20px; text-align: center; }
  .export-menu-item .export-label { flex: 1; }
  .export-menu-item .export-desc { font-size: 0.6rem; color: #5a8870; font-weight: 400; }
  .toc-btn-collapse { background: #1a1428; color: #9080c0; border-color: #2a2048; }
  .toc-btn-collapse:hover { background: #201838; color: #a090d0; border-color: #3a2858; }

  /* ── 必填欄位標示 ── */
  .field-required::after {
    content: ' *'; color: #e07050; font-weight: 700; font-size: 0.75rem;
  }

  /* ── Focus 可見狀態 ── */
  :focus-visible {
    outline: 2px solid #70d0f8;
    outline-offset: 2px;
  }
  button:focus-visible, .channel-chip:focus-visible, .arrow-toggle button:focus-visible {
    outline: 2px solid #70d0f8;
    outline-offset: 2px;
  }

  /* ── 範例載入按鈕 ── */
  .btn-example {
    width: 100%; padding: 10px; border-radius: 12px;
    background: linear-gradient(135deg, #0d1e18, #142820);
    color: #50b880; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; transition: all 0.18s; letter-spacing: 0.02em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    border: 1px solid #1e4030; margin-bottom: 6px;
  }
  .btn-example:hover {
    background: linear-gradient(135deg, #122818, #1a3428);
    box-shadow: 0 2px 8px rgba(40,160,100,0.15);
    transform: translateY(-1px); color: #60d090;
  }
  .btn-example:active { transform: translateY(0); }

  /* ── 確認對話框 ── */
  .confirm-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s;
  }
  .confirm-dialog {
    background: #1a2230; border: 1px solid #2a4060; border-radius: 16px;
    padding: 28px 24px; max-width: 360px; width: 90%; text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  }
  .confirm-dialog h3 { font-size: 1rem; color: #d0e0f0; margin-bottom: 10px; font-weight: 800; }
  .confirm-dialog p { font-size: 0.85rem; color: #7a9aaa; margin-bottom: 20px; line-height: 1.55; }
  .confirm-btns { display: flex; gap: 10px; justify-content: center; }
  .confirm-btns button {
    padding: 10px 22px; border-radius: 10px; font-size: 0.85rem;
    font-weight: 700; cursor: pointer; transition: all 0.15s; border: 1px solid;
  }
  .confirm-cancel { background: #182030; color: #8098a8; border-color: #2a3848; }
  .confirm-cancel:hover { background: #1e2838; color: #a0b8c8; }
  .confirm-ok { background: #3a1818; color: #f08888; border-color: #6a2828; }
  .confirm-ok:hover { background: #4a2020; color: #ffa0a0; }

  /* ── 進度指示器 ── */
  .progress-bar { display: flex; gap: 3px; padding: 10px 14px; align-items: center; }
  .progress-step {
    flex: 1; height: 4px; border-radius: 2px;
    background: #1a2838; transition: background 0.3s;
  }
  .progress-step.active { background: linear-gradient(90deg, #3a7898, #50a8d0); }
  .progress-label {
    font-size: 0.68rem; color: #4a6878; font-weight: 600;
    margin-left: 8px; white-space: nowrap; letter-spacing: 0.04em;
  }

  /* ── 減少動畫偏好 ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  /* ── 列印樣式（PDF 匯出用） ── */
  @media print {
    /* 只處理版面，顏色全交給 JS */
    .sidebar, .toc-bar, .card-collapse-btn, .export-dropdown,
    .btn-view-results, .mobile-tabs, .freq-toggle,
    .empty-state, .confirm-overlay, header, .btn-example { display: none !important; }
    body { margin: 0; padding: 0; font-size: 12px; line-height: 1.5; }
    .layout { display: block !important; }
    .main { margin: 0 !important; padding: 12px !important; width: 100% !important; max-width: 100% !important; min-height: auto !important; }
    .card-body-collapsible { max-height: none !important; opacity: 1 !important; padding: 14px 18px !important; overflow: visible !important; }
    .output-card { break-inside: avoid; margin-bottom: 10px; }
    .card-header::after { display: none !important; }
    .pdf-print-header { display: block !important; }
  }

  /* 平常隱藏 PDF 標題 */
  .pdf-print-header { display: none; }