/* Starfield background */
      #starfield {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        opacity: 0.78;
      }

      /* App viewport wrapper (used to exclude browser bottom UI area) */
      #appViewport { position: relative; min-width: 0; max-width: 100%; }
      #appScroll { position: relative; min-width: 0; max-width: 100%; }

      /* Keep the mobile page on the vertical axis without restricting nested
         diagram/table scrollers or browser pinch zoom. Clip avoids creating an
         extra scroll container around the sticky header in normal browser mode. */
      @media (max-width: 768px) {
        html { overflow-x: hidden; }
        @supports (overflow-x: clip) {
          html { overflow-x: clip; }
          #appScroll { overflow-x: clip; }
        }
      }

      /* Scrollbars: show normally by default.
         (Previously hidden globally, which made it look like the page couldn't scroll.) */
      html, body {
        -ms-overflow-style: auto; /* IE/Edge legacy */
        scrollbar-width: auto; /* Firefox */
      }
      /* viewport-fit=cover: base safe area padding (requires meta viewport viewport-fit=cover) */
      @supports (padding: env(safe-area-inset-top)) {
        body {
          padding-left: env(safe-area-inset-left, 0px);
          padding-right: env(safe-area-inset-right, 0px);
          padding-top: env(safe-area-inset-top, 0px);
        }
      }

      /* Optional: show styled scrollbars only where we explicitly opt-in */
      .custom-scrollbar {
        -ms-overflow-style: auto; /* IE/Edge legacy */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: rgba(148, 163, 184, 0.55) rgba(2, 6, 23, 0.15);
        scrollbar-gutter: stable; /* reserve space so it's always visible when needed */
        -webkit-overflow-scrolling: touch; /* iOS momentum scroll for inner panes/modals */
      }
      .custom-scrollbar::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        display: block;
      }
      .custom-scrollbar::-webkit-scrollbar-track {
        background: rgba(2, 6, 23, 0.15);
      }
      .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.55);
        border-radius: 9999px;
        border: 2px solid rgba(2, 6, 23, 0.15);
      }
      .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.8);
      }

      /* Header (iPhone SE etc.): hide login badge to prevent layout break */
      @media (max-width: 420px) {
        #pointsWidget [data-login-badge] {
          display: none !important;
        }
      }

      /* Header: Points widget (top-right) — make it vivid & noticeable */
      #pointsWidget {
        position: relative;
        z-index: 2; /* ensure it stays crisp over header blur */
      }
      #pointsWidget #btnPointsOpen {
        /* Override Tailwind utility classes injected via JS */
        border-color: rgba(255, 255, 255, 0.20) !important;
        background:
          radial-gradient(80% 160% at 12% 0%, rgba(255,255,255,0.35), rgba(255,255,255,0.0) 55%),
          linear-gradient(90deg, rgba(236,72,153,0.95), rgba(168,85,247,0.95) 45%, rgba(56,189,248,0.95)) !important;
        color: rgba(255,255,255,0.98) !important;
        box-shadow:
          0 18px 55px rgba(168,85,247,0.30),
          0 14px 45px rgba(236,72,153,0.22),
          0 10px 34px rgba(56,189,248,0.20);
        text-shadow: 0 1px 0 rgba(0,0,0,0.25);
        letter-spacing: 0.02em;
        transition:
          transform 0.18s ease,
          filter 0.18s ease,
          box-shadow 0.18s ease;
      }
      #pointsWidget #btnPointsOpen:hover {
        filter: brightness(1.08) saturate(1.22);
        transform: translateY(-1px);
        box-shadow:
          0 22px 70px rgba(168,85,247,0.36),
          0 18px 58px rgba(236,72,153,0.26),
          0 14px 46px rgba(56,189,248,0.22);
      }
      #pointsWidget #btnPointsOpen:active {
        transform: translateY(0) scale(0.985);
        filter: brightness(1.02) saturate(1.10);
      }
      #pointsWidget #btnPointsOpen:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 4px rgba(255,255,255,0.18),
          0 0 0 8px rgba(168,85,247,0.22),
          0 22px 70px rgba(168,85,247,0.34),
          0 16px 52px rgba(56,189,248,0.20);
      }
      /* "pt" label + numeric value inside the button */
      #pointsWidget #btnPointsOpen .text-slate-300 {
        color: rgba(255,255,255,0.92) !important;
        font-weight: 900 !important;
      }
      #pointsWidget #btnPointsOpen [data-points-value] {
        font-size: 0.92rem;
        font-weight: 950;
        letter-spacing: 0.01em;
        font-variant-numeric: tabular-nums;
      }
      /* Login badge: keep readable next to vivid points button */
      #pointsWidget [data-login-badge] {
        border-color: rgba(255,255,255,0.14) !important;
        backdrop-filter: blur(10px);
      }
      @media (prefers-reduced-motion: reduce) {
        #pointsWidget #btnPointsOpen {
          transition: none !important;
        }
        #pointsWidget #btnPointsOpen:hover,
        #pointsWidget #btnPointsOpen:active {
          transform: none !important;
          filter: none !important;
        }
      }

      /* Points & Account modal: make balance/buy vivid */
      #astroPointsModal [data-points-balance-card],
      #astroPointsModal [data-points-buy-card] {
        position: relative;
        overflow: hidden;
        box-shadow:
          0 26px 90px rgba(0,0,0,0.40),
          0 20px 70px rgba(168,85,247,0.16);
      }
      #astroPointsModal [data-points-balance-card]::before,
      #astroPointsModal [data-points-buy-card]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg,
          rgba(56,189,248,0.42),
          rgba(168,85,247,0.40),
          rgba(236,72,153,0.38)
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
        opacity: 0.7;
      }
      #astroPointsModal [data-points-balance-card] {
        background:
          radial-gradient(700px circle at 0% 0%, rgba(236,72,153,0.20), transparent 55%),
          radial-gradient(700px circle at 100% 0%, rgba(56,189,248,0.18), transparent 55%),
          linear-gradient(180deg, rgba(2,6,23,0.55), rgba(15,23,42,0.30));
      }
      #astroPointsModal [data-points-buy-card] {
        background:
          radial-gradient(900px circle at 10% 0%, rgba(56,189,248,0.16), transparent 60%),
          radial-gradient(900px circle at 100% 30%, rgba(168,85,247,0.18), transparent 62%),
          radial-gradient(700px circle at 0% 100%, rgba(236,72,153,0.14), transparent 60%),
          linear-gradient(180deg, rgba(2,6,23,0.50), rgba(15,23,42,0.26));
      }

      /* Packs: 2x2 vivid CTA tiles */
      #astroPointsModal [data-packs] button[data-pack] {
        transform: translateZ(0);
        border-color: rgba(255,255,255,0.14) !important;
        box-shadow:
          0 18px 60px rgba(0,0,0,0.35),
          0 10px 34px rgba(56,189,248,0.10),
          0 10px 34px rgba(236,72,153,0.10);
        backdrop-filter: blur(10px);
      }
      #astroPointsModal [data-packs] button[data-pack]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
          radial-gradient(85% 110% at 12% 0%, rgba(255,255,255,0.20), rgba(255,255,255,0.0) 55%),
          linear-gradient(135deg, rgba(56,189,248,0.10), rgba(168,85,247,0.08), rgba(236,72,153,0.08));
        opacity: 0.9;
        pointer-events: none;
        mix-blend-mode: overlay;
      }
      #astroPointsModal [data-packs] button[data-pack] [data-pack-glow] {
        background:
          radial-gradient(240px circle at 0% 0%, rgba(56,189,248,0.26), transparent 55%),
          radial-gradient(240px circle at 100% 0%, rgba(236,72,153,0.22), transparent 55%),
          radial-gradient(240px circle at 50% 110%, rgba(168,85,247,0.24), transparent 55%);
      }
      #astroPointsModal [data-packs] button[data-pack]:hover {
        transform: translateY(-2px);
        filter: brightness(1.06) saturate(1.20);
        box-shadow:
          0 26px 86px rgba(0,0,0,0.45),
          0 18px 52px rgba(56,189,248,0.16),
          0 18px 52px rgba(236,72,153,0.14);
      }
      #astroPointsModal [data-packs] button[data-pack]:active {
        transform: translateY(0) scale(0.985);
        filter: brightness(1.02) saturate(1.10);
      }
      #astroPointsModal [data-packs] button[data-pack] [data-pack-tag] {
        border-color: rgba(255,255,255,0.14);
        background: rgba(2,6,23,0.35);
        color: rgba(226,232,240,0.95);
      }
      #astroPointsModal [data-packs] button[data-pack][data-pack-best="1"] {
        border-color: rgba(251,191,36,0.45) !important;
        box-shadow:
          0 30px 100px rgba(0,0,0,0.48),
          0 22px 66px rgba(251,191,36,0.16),
          0 18px 60px rgba(236,72,153,0.16);
      }
      #astroPointsModal [data-packs] button[data-pack][data-pack-best="1"] [data-pack-tag] {
        border-color: rgba(251,191,36,0.45);
        background:
          linear-gradient(90deg, rgba(251,191,36,0.18), rgba(236,72,153,0.14));
        color: rgba(254,243,199,0.98);
      }
      /* Recommended: 4,000pt */
      #astroPointsModal [data-packs] button[data-pack][data-pack-reco="1"] {
        border-color: rgba(34,197,94,0.45) !important;
        box-shadow:
          0 30px 100px rgba(0,0,0,0.48),
          0 20px 64px rgba(34,197,94,0.16),
          0 18px 58px rgba(56,189,248,0.12);
      }
      #astroPointsModal [data-packs] button[data-pack][data-pack-reco="1"] [data-pack-tag][data-pack-tag-kind="おすすめ"] {
        border-color: rgba(34,197,94,0.45);
        background: linear-gradient(90deg, rgba(34,197,94,0.18), rgba(56,189,248,0.14));
        color: rgba(220,252,231,0.98);
      }
      #astroPointsModal [data-packs] button[data-pack][data-pack-max="1"][data-pack-best="0"] [data-pack-tag] {
        border-color: rgba(56,189,248,0.38);
        background: rgba(56,189,248,0.12);
        color: rgba(224,242,254,0.98);
      }
      @media (prefers-reduced-motion: reduce) {
        #astroPointsModal [data-packs] button[data-pack],
        #astroPointsModal [data-packs] button[data-pack]:hover,
        #astroPointsModal [data-packs] button[data-pack]:active {
          transform: none !important;
          transition: none !important;
          filter: none !important;
        }
      }

      /* Points modal: Account block — more visual, less text */
      #astroPointsModal [data-points-account-card] {
        background:
          radial-gradient(800px circle at 0% 0%, rgba(168,85,247,0.14), transparent 58%),
          radial-gradient(700px circle at 100% 0%, rgba(56,189,248,0.12), transparent 58%),
          rgba(2,6,23,0.28);
        border-color: rgba(255,255,255,0.10);
        box-shadow: 0 22px 80px rgba(0,0,0,0.32);
      }
      #astroPointsModal [data-points-account-card] input {
        border-color: rgba(255,255,255,0.10) !important;
        background: rgba(2,6,23,0.40) !important;
      }
      #astroPointsModal [data-points-account-card] input:focus {
        border-color: rgba(168,85,247,0.55) !important;
        box-shadow: 0 0 0 4px rgba(168,85,247,0.18);
      }
      #astroPointsModal [data-points-account-reset] {
        border-color: rgba(56,189,248,0.18);
        background:
          radial-gradient(700px circle at 0% 0%, rgba(56,189,248,0.10), transparent 60%),
          rgba(2,6,23,0.28);
      }
      #astroPointsModal [data-points-account-delete] {
        border-color: rgba(244,63,94,0.22);
        background:
          radial-gradient(700px circle at 0% 0%, rgba(244,63,94,0.10), transparent 60%),
          rgba(2,6,23,0.26);
      }

      /* Points modal: Cost cards */
      #astroPointsModal [data-points-costs] .rounded-xl {
        position: relative;
        overflow: hidden;
      }
      #astroPointsModal [data-points-costs] .rounded-xl::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
          radial-gradient(240px circle at 0% 0%, rgba(56,189,248,0.10), transparent 60%),
          radial-gradient(240px circle at 100% 0%, rgba(236,72,153,0.08), transparent 60%);
        opacity: 0.9;
        pointer-events: none;
      }

      /* Intro cards: collapsible (show/hide) */
      .introDetails {
        display: block;
      }
      .introDetails > summary {
        cursor: pointer;
        user-select: none;
      }
      .introDetails > summary:focus-visible {
        outline: 2px solid rgba(168, 85, 247, 0.35);
        outline-offset: 3px;
        border-radius: 16px;
      }
      .glass {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.72));
        border: 1px solid rgba(148, 163, 184, 0.16);
        backdrop-filter: blur(12px);
      }
      .fade-in-up {
        animation: fadeInUp 0.35s ease-out both;
      }
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
      }

      /* Primary CTA buttons */
      .ctaAnalyze {
        position: relative;
        isolation: isolate;
        overflow: hidden; /* clip shine/highlight inside the button frame */
        background-size: 200% 200%;
        animation: analyzeGradient 3.2s ease-in-out infinite, analyzeGlow 2.4s ease-in-out infinite;
      }
      .analyzeBtnIcon {
        width: 1.15em;
        height: 1.15em;
        display: block;
        opacity: 0.95;
        filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
      }
      .ctaAnalyze::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
          radial-gradient(120% 80% at 10% 10%, rgba(255,255,255,0.28), transparent 55%),
          radial-gradient(80% 120% at 90% 0%, rgba(56,189,248,0.16), transparent 60%),
          radial-gradient(90% 90% at 50% 120%, rgba(236,72,153,0.14), transparent 55%);
        opacity: 0.75;
        z-index: 0;
        transition: opacity 0.25s ease;
        mix-blend-mode: overlay;
        pointer-events: none;
      }
      .ctaAnalyze::after {
        content: "";
        position: absolute;
        top: 0;
        left: -70%;
        width: 45%;
        height: 100%;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.32) 45%, transparent 78%);
        transform: skewX(-18deg);
        animation: analyzeShine 3.1s ease-in-out infinite;
        opacity: 0.85;
        mix-blend-mode: overlay;
        pointer-events: none;
      }
      .ctaAnalyze:hover::before { opacity: 0.92; }
      .ctaAnalyze:active::before { opacity: 0.65; }
      .ctaAnalyze:disabled {
        animation: none;
        background-size: auto;
      }
      .ctaAnalyze:disabled::before,
      .ctaAnalyze:disabled::after {
        animation: none;
        opacity: 0;
      }
      @keyframes analyzeGradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
      @keyframes analyzeGlow {
        0%, 100% { box-shadow: 0 18px 46px rgba(168,85,247,0.38); }
        50% { box-shadow: 0 26px 72px rgba(236,72,153,0.34); }
      }
      @keyframes analyzeShine {
        0% { left: -70%; opacity: 0; }
        18% { opacity: 0.9; }
        45% { left: 130%; opacity: 0; }
        100% { left: 130%; opacity: 0; }
      }
      /* Note: scrollbars are hidden globally (see above). Keep class name for compatibility. */

      /* Markdown-like rich text (safe-rendered) */
      .mdView { line-height: 1.85; }
      .mdView .mdIntro { margin-bottom: 0.75rem; }
      /* Chat light theme override (for white chat bubbles) */
      .mdChatLight { color: #0f172a; }
      .mdChatLight h1, .mdChatLight h2, .mdChatLight h3,
      .mdChatLight h4, .mdChatLight h5, .mdChatLight h6 { color: #0f172a; }
      .mdChatLight p, .mdChatLight li { color: #0f172a; }
      .mdChatLight strong, .mdChatLight em { color: #0b1220; }
      .mdChatLight a { color: #1d4ed8; text-decoration-color: rgba(29,78,216,0.45); }
      .mdChatLight a:hover { color: #1e40af; }
      .mdChatLight code {
        color: #0f172a;
        background: rgba(15, 23, 42, 0.06);
        border-color: rgba(15, 23, 42, 0.12);
      }
      .mdChatLight pre {
        background: rgba(15, 23, 42, 0.06);
        border-color: rgba(15, 23, 42, 0.12);
      }
      .mdChatLight pre code { color: #0f172a; }
      .mdChatLight blockquote {
        background: rgba(15, 23, 42, 0.05);
        color: #334155;
        border-left-color: rgba(99,102,241,0.45);
      }
      .mdChatLight hr { border-top-color: rgba(15, 23, 42, 0.12); }
      .mdChatLight th { background: rgba(15, 23, 42, 0.05); color: #0f172a; }
      .mdChatLight td { background: rgba(255,255,255,0.55); color: #0f172a; }
      .mdView .mdSection {
        margin: 0.85rem 0;
        padding: 0.9rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(148,163,184,0.14);
        background:
          radial-gradient(600px circle at 0% 0%, rgba(168,85,247,0.16), transparent 55%),
          radial-gradient(600px circle at 100% 0%, rgba(236,72,153,0.14), transparent 55%),
          linear-gradient(180deg, rgba(2,6,23,0.34), rgba(15,23,42,0.22));
        box-shadow: 0 18px 55px rgba(0,0,0,0.18);
      }
      .mdView h1, .mdView h2, .mdView h3 { color: #f1f5f9; font-weight: 850; letter-spacing: -0.02em; }
      /* Title (H1): make it feel like a cover */
      .mdView h1 {
        position: relative;
        font-size: 1.22rem;
        font-weight: 920;
        letter-spacing: -0.03em;
        margin: 0.1rem 0 0.65rem;
        padding: 0.55rem 0.75rem 0.6rem 1.05rem;
        border-radius: 1.15rem;
        border: 1px solid rgba(196,181,253,0.16);
        background:
          radial-gradient(700px circle at 0% 0%, rgba(56,189,248,0.14), transparent 55%),
          radial-gradient(700px circle at 100% 0%, rgba(236,72,153,0.12), transparent 55%),
          linear-gradient(180deg, rgba(2,6,23,0.28), rgba(15,23,42,0.18));
        box-shadow: 0 22px 70px rgba(0,0,0,0.18);
      }
      .mdView h1::before {
        content: "";
        position: absolute;
        left: 0.62rem;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(56,189,248,0.95), rgba(168,85,247,0.95), rgba(236,72,153,0.92));
        box-shadow: 0 0 0 5px rgba(168,85,247,0.10);
        pointer-events: none;
      }
      .mdView h1::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 16px;
        bottom: 10px;
        height: 1px;
        background: linear-gradient(90deg, rgba(56,189,248,0.0), rgba(196,181,253,0.55), rgba(236,72,153,0.0));
        opacity: 0.9;
        pointer-events: none;
      }
      .mdView h2 { font-size: 1.0rem; margin: 0.1rem 0 0.6rem; }
      .mdView h3 {
        position: relative;
        font-size: 0.95rem;
        margin: 0.75rem 0 0.45rem;
        color: #e2e8f0;
        padding: 0.45rem 0.65rem 0.45rem 1.55rem;
        border-radius: 0.9rem;
        border: 1px solid rgba(148,163,184,0.14);
        background:
          radial-gradient(500px circle at 0% 50%, rgba(56,189,248,0.12), transparent 55%),
          radial-gradient(500px circle at 100% 50%, rgba(236,72,153,0.10), transparent 55%),
          rgba(2,6,23,0.28);
      }
      .mdView h3::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(56,189,248,0.95), rgba(168,85,247,0.95));
        box-shadow: 0 0 0 4px rgba(56,189,248,0.12);
        pointer-events: none;
      }
      .mdView h3::after {
        content: "";
        position: absolute;
        left: 26px;
        right: 12px;
        bottom: 8px;
        height: 1px;
        background: linear-gradient(90deg, rgba(56,189,248,0.0), rgba(196,181,253,0.35), rgba(236,72,153,0.0));
        opacity: 0.9;
      }

      /* Deeper headings (#### / ##### / ######) */
      .mdView h4, .mdView h5, .mdView h6 {
        position: relative;
        margin: 0.65rem 0 0.3rem;
        color: #e2e8f0;
        font-weight: 800;
        letter-spacing: -0.01em;
      }
      .mdView h4 {
        font-size: 0.92rem;
        padding: 0.35rem 0.55rem 0.35rem 1.05rem;
        border-radius: 0.8rem;
        border: 1px solid rgba(196,181,253,0.14);
        background:
          radial-gradient(420px circle at 0% 50%, rgba(168,85,247,0.14), transparent 55%),
          rgba(2,6,23,0.22);
      }
      .mdView h4::before {
        content: "";
        position: absolute;
        left: 0.55rem;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(168,85,247,0.95), rgba(56,189,248,0.95));
        box-shadow: 0 0 0 4px rgba(168,85,247,0.10);
      }
      .mdView h5 {
        font-size: 0.88rem;
        padding-left: 0.9rem;
      }
      .mdView h5::before {
        content: "";
        position: absolute;
        left: 0.2rem;
        top: 0.82em;
        width: 8px;
        height: 2px;
        border-radius: 999px;
        background: rgba(196,181,253,0.75);
      }
      .mdView h6 {
        font-size: 0.84rem;
        padding-left: 0.85rem;
        color: rgba(226,232,240,0.92);
        font-weight: 750;
      }
      .mdView h6::before {
        content: "";
        position: absolute;
        left: 0.26rem;
        top: 0.78em;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(148,163,184,0.55);
      }
      /* Section title (H2): stronger hierarchy */
      .mdView .mdH2 {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.55rem 0.7rem 0.55rem 0.75rem;
        border-radius: 1rem;
        border: 1px solid rgba(148,163,184,0.14);
        background:
          radial-gradient(520px circle at 0% 50%, rgba(168,85,247,0.12), transparent 55%),
          radial-gradient(520px circle at 100% 50%, rgba(236,72,153,0.10), transparent 55%),
          rgba(2,6,23,0.22);
      }
      .mdView .mdH2::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 8px;
        height: 1px;
        background: linear-gradient(90deg, rgba(56,189,248,0.0), rgba(196,181,253,0.40), rgba(236,72,153,0.0));
        opacity: 0.85;
        pointer-events: none;
      }
      .mdView .mdH2::before {
        content: "";
        width: 10px; height: 10px; border-radius: 999px;
        background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(236,72,153,0.95));
        box-shadow: 0 0 0 4px rgba(168,85,247,0.12);
        flex: 0 0 auto;
      }
      .mdView .mdH2.mdTldr::before {
        background: linear-gradient(135deg, rgba(34,197,94,0.95), rgba(56,189,248,0.95));
        box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
      }
      .mdView p { margin: 0.4rem 0; color: #e2e8f0; }
      .mdView a { color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; }
      .mdView a:hover { color: #ddd6fe; }
      .mdView strong {
        color: #fff;
        font-weight: 800;
        background: linear-gradient(90deg, rgba(168,85,247,0.18), rgba(236,72,153,0.14));
        padding: 0.08rem 0.22rem;
        border-radius: 0.35rem;
      }
      .mdView em {
        color: #f8fafc;
        font-style: italic;
        padding: 0.04rem 0.16rem;
        border-radius: 0.35rem;
        background: linear-gradient(90deg, rgba(56,189,248,0.14), rgba(34,197,94,0.10));
        border: 1px solid rgba(56,189,248,0.16);
      }
      .mdView del { color: rgba(203,213,225,0.78); text-decoration-color: rgba(236,72,153,0.55); }
      .mdView ul, .mdView ol { margin: 0.45rem 0 0.45rem 1.15rem; }
      .mdView ul { list-style: disc; }
      .mdView ol { list-style: decimal; }
      .mdView li { margin: 0.22rem 0; color: #e2e8f0; }
      .mdView li::marker { color: rgba(196, 181, 253, 0.95); }
      .mdView code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85em; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148,163,184,0.16); padding: 0.12rem 0.32rem; border-radius: 0.35rem; }
      .mdView pre { margin: 0.5rem 0; background: rgba(2, 6, 23, 0.8); border: 1px solid rgba(148,163,184,0.16); border-radius: 0.75rem; padding: 0.75rem; overflow: auto; }
      .mdView pre code { background: transparent; border: none; padding: 0; font-size: 0.85rem; color: #e2e8f0; }
      .mdView blockquote { margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-left: 3px solid rgba(168, 85, 247, 0.55); background: rgba(2, 6, 23, 0.45); border-radius: 0.6rem; color: #cbd5e1; }
      .mdView hr { border: none; border-top: 1px solid rgba(148,163,184,0.18); margin: 0.8rem 0; }
      .mdView table { width: 100%; border-collapse: collapse; margin: 0.55rem 0; overflow: hidden; border-radius: 0.75rem; }
      .mdView th, .mdView td { border: 1px solid rgba(148,163,184,0.14); padding: 0.45rem 0.55rem; vertical-align: top; }
      .mdView th { background: rgba(15, 23, 42, 0.55); color: #e2e8f0; font-weight: 700; }
      .mdView td { background: rgba(2, 6, 23, 0.35); color: #e2e8f0; }

      /* AI output: more “luxury” typography (opt-in via mdAi) */
      .mdAi { text-shadow: 0 1px 0 rgba(0,0,0,0.14); }
      .mdAi .mdSection {
        position: relative;
        padding: 1.05rem 1.1rem;
        border-radius: 1.05rem;
        border: 1px solid rgba(196,181,253,0.16);
        box-shadow: 0 24px 80px rgba(0,0,0,0.24);
      }
      .mdAi .mdSection::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, rgba(56,189,248,0.40), rgba(168,85,247,0.35), rgba(236,72,153,0.30));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
        opacity: 0.55;
      }
      .mdAi h1 {
        /* Override mdView "card-like" title and make it a true title */
        display: block;
        text-align: center;
        line-height: 1.22;
        font-size: clamp(1.28rem, 2.2vw, 1.62rem);
        font-weight: 950;
        letter-spacing: -0.035em;
        margin: 0.05rem 0 0.85rem;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        /* gradient text */
        background: linear-gradient(90deg, rgba(224,242,254,0.98), rgba(221,214,254,0.96), rgba(251,207,232,0.92));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: none;
        filter: drop-shadow(0 22px 70px rgba(168,85,247,0.18));
      }
      .mdAi h1::before {
        /* Replace mdView's dot marker with a centered title bar */
        content: "";
        position: static;
        display: block;
        width: 86px;
        height: 3px;
        margin: 0 auto 0.55rem;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(56,189,248,0.0), rgba(56,189,248,0.85), rgba(168,85,247,0.88), rgba(236,72,153,0.82), rgba(236,72,153,0.0));
        box-shadow: 0 0 0 6px rgba(56,189,248,0.06);
        pointer-events: none;
      }
      .mdAi h1::after {
        content: "";
        position: static;
        display: block;
        width: 180px;
        height: 1px;
        margin: 0.6rem auto 0;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        background: linear-gradient(90deg, rgba(56,189,248,0.0), rgba(196,181,253,0.62), rgba(236,72,153,0.0));
        opacity: 0.95;
      }
      .mdAi .mdH2 {
        border-color: rgba(196,181,253,0.18);
        background:
          radial-gradient(600px circle at 0% 50%, rgba(56,189,248,0.12), transparent 58%),
          radial-gradient(600px circle at 100% 50%, rgba(236,72,153,0.10), transparent 58%),
          rgba(2,6,23,0.22);
      }
      .mdAi h4 {
        border-color: rgba(196,181,253,0.18);
        background:
          radial-gradient(460px circle at 0% 50%, rgba(236,72,153,0.10), transparent 58%),
          radial-gradient(460px circle at 100% 50%, rgba(56,189,248,0.12), transparent 58%),
          rgba(2,6,23,0.24);
      }
      .mdAi h4::before {
        background: linear-gradient(180deg, rgba(236,72,153,0.95), rgba(56,189,248,0.95));
        box-shadow: 0 0 0 5px rgba(236,72,153,0.08);
      }
      .mdAi h5::before { background: rgba(251,207,232,0.72); }
      .mdAi h6::before { background: rgba(148,163,184,0.60); }
      .mdAi .mdH2 { position: relative; border-bottom-color: rgba(196,181,253,0.18); }
      .mdAi .mdH2::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 1px;
        background: linear-gradient(90deg, rgba(56,189,248,0.0), rgba(196,181,253,0.55), rgba(236,72,153,0.0));
        opacity: 0.9;
        pointer-events: none;
      }
      .mdAi blockquote {
        position: relative;
        border-left-width: 4px;
        border-left-color: rgba(56,189,248,0.55);
        background:
          radial-gradient(700px circle at 0% 0%, rgba(56,189,248,0.10), transparent 55%),
          rgba(2,6,23,0.48);
      }
      .mdAi pre {
        position: relative;
        padding-top: 2.0rem;
        box-shadow: 0 14px 55px rgba(0,0,0,0.22);
      }
      .mdAi pre::before {
        content: "CODE";
        position: absolute;
        top: 10px;
        left: 12px;
        font-size: 10px;
        letter-spacing: 0.12em;
        color: rgba(226,232,240,0.78);
        background: rgba(15,23,42,0.55);
        border: 1px solid rgba(148,163,184,0.16);
        padding: 2px 7px;
        border-radius: 999px;
      }
      .mdAi table { border: 1px solid rgba(196,181,253,0.14); }
      .mdAi tbody tr:nth-child(odd) td { background: rgba(2, 6, 23, 0.28); }
      .mdAi tbody tr:hover td { background: rgba(15, 23, 42, 0.42); }

      /* Chat light theme override (strong; must come after mdView rules) */
      .mdView.mdChatLight { color: #0f172a !important; text-shadow: none !important; }
      .mdView.mdChatLight h1, .mdView.mdChatLight h2, .mdView.mdChatLight h3,
      .mdView.mdChatLight h4, .mdView.mdChatLight h5, .mdView.mdChatLight h6 { color: #0f172a !important; }
      .mdView.mdChatLight p,
      .mdView.mdChatLight li,
      .mdView.mdChatLight span,
      .mdView.mdChatLight div { color: #0f172a !important; }
      .mdView.mdChatLight strong,
      .mdView.mdChatLight em { color: #0b1220 !important; }
      .mdView.mdChatLight a { color: #1d4ed8 !important; text-decoration-color: rgba(29,78,216,0.45) !important; }
      .mdView.mdChatLight a:hover { color: #1e40af !important; }
      .mdView.mdChatLight code {
        color: #0f172a !important;
        background: rgba(15, 23, 42, 0.06) !important;
        border-color: rgba(15, 23, 42, 0.12) !important;
      }
      .mdView.mdChatLight pre {
        background: rgba(15, 23, 42, 0.06) !important;
        border-color: rgba(15, 23, 42, 0.12) !important;
      }
      .mdView.mdChatLight pre code { color: #0f172a !important; }
      .mdView.mdChatLight blockquote {
        background: rgba(15, 23, 42, 0.05) !important;
        color: #334155 !important;
        border-left-color: rgba(99,102,241,0.45) !important;
      }
      .mdView.mdChatLight hr { border-top-color: rgba(15, 23, 42, 0.12) !important; }
      .mdView.mdChatLight th { background: rgba(15, 23, 42, 0.05) !important; color: #0f172a !important; }
      .mdView.mdChatLight td { background: rgba(255,255,255,0.55) !important; color: #0f172a !important; }

      /* Report cards: slightly tighter than AI panel */
      .mdReport { line-height: 1.8; }
      .mdReport .mdSection { margin: 0.55rem 0; padding: 0.75rem 0.85rem; box-shadow: 0 12px 35px rgba(0,0,0,0.16); }
      .mdReport h2 { font-size: 0.98rem; }
      .mdReport h3 { font-size: 0.93rem; }

      /* Tabbar scroll hint (fade + arrows) */
      [data-tabbar-wrap] { position: relative; }
      /* Tabbar: make tabs more intuitive & touch-friendly */
      [data-tabbar] {
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
      }
      .tabBtn {
        scroll-snap-align: center;
        min-height: 44px; /* touch target */
        border: 1px solid rgba(148,163,184,0.18);
        background: rgba(2,6,23,0.22);
        transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
        box-shadow: 0 10px 28px rgba(0,0,0,0.18);
        display: inline-flex;
        align-items: center;
      }
      .tabBtn:hover {
        border-color: rgba(196,181,253,0.28);
        filter: brightness(1.05);
        transform: translateY(-1px);
      }
      .tabBtn:active {
        transform: translateY(0) scale(0.985);
        filter: brightness(1.02);
      }
      .tabBtn:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 4px rgba(255,255,255,0.12),
          0 0 0 8px rgba(168,85,247,0.18),
          0 16px 45px rgba(0,0,0,0.25);
      }
      .tabBtnInner {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }
      .tabBtnIcon {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.92;
        flex: 0 0 auto;
      }
      .tabBtnSvg {
        width: 18px;
        height: 18px;
        display: block;
      }
      /* Active tab (bg-purple-600 class is toggled by JS) */
      .tabBtn.bg-purple-600 {
        background:
          radial-gradient(110% 160% at 0% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0.0) 55%),
          linear-gradient(90deg, rgba(236,72,153,0.92), rgba(168,85,247,0.92) 45%, rgba(56,189,248,0.92)) !important;
        border-color: rgba(255,255,255,0.22) !important;
        color: rgba(255,255,255,0.98) !important;
        text-shadow: 0 1px 0 rgba(0,0,0,0.22);
        box-shadow:
          0 18px 55px rgba(168,85,247,0.26),
          0 14px 45px rgba(236,72,153,0.18),
          0 10px 34px rgba(56,189,248,0.16);
      }
      .tabBtn.bg-purple-600:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.15); }
      .tabBtn.bg-purple-600 .tabBtnIcon { opacity: 1; }
      @media (prefers-reduced-motion: reduce) {
        .tabBtn, .tabBtn:hover, .tabBtn:active { transition: none !important; transform: none !important; filter: none !important; }
      }

      /* Mobile: show result/function tabs ONLY in the bottom action bar */
      @media (max-width: 768px) {
        #resultsTabs [data-tabbar-wrap] {
          display: none !important;
        }
        /* Reduce the gap because the top tabbar is hidden */
        #resultsTabs .tabPanel {
          margin-top: 0.75rem !important;
        }
      }

      /* Mobile: results header uses per-tab title; remove "結果/機能" label */
      .resultsHdrMobile { display: none; }
      @media (max-width: 768px) {
        .resultsHdrDesktop { display: none !important; }
        .resultsHdrMobile { display: block !important; }
      }

      /* Mobile: lock navigation to profile/results via bottom bar only */
      @media (max-width: 768px) {
        /* Hide other sections to prevent free scroll between blocks */
        body[data-mobile-view="profile"] #resultsTabs,
        body[data-mobile-view="profile"] #noticeTicker,
        body[data-mobile-view="profile"] #studioAds,
        body[data-mobile-view="profile"] footer {
          display: none !important;
        }

        body[data-mobile-view="results"] #signupPromo,
        body[data-mobile-view="results"] #profileSection,
        body[data-mobile-view="results"] #studioAds,
        body[data-mobile-view="results"] footer {
          display: none !important;
        }

        /* "Other" view: show the cross-promo block via the new tab */
        body[data-mobile-view="other"] #signupPromo,
        body[data-mobile-view="other"] #profileSection,
        body[data-mobile-view="other"] #noticeTicker,
        body[data-mobile-view="other"] #resultsTabs {
          display: none !important;
        }

        /* Keep spacing tidy when only one section is shown */
        body[data-mobile-view="results"] main#mainContent,
        body[data-mobile-view="profile"] main#mainContent,
        body[data-mobile-view="other"] main#mainContent {
          padding-top: 0.9rem;
        }
      }


      /* Glossary: affiliate block (between chapters) */
      /* Glossary: layout + readability */
      #tab-glossary .glossLayout {
        /* Desktop: 目次を左に固定して読みやすく */
        align-items: start;
      }
      #tab-glossary .glossToc a {
        display: block;
        border-radius: 0.75rem;
        padding: 0.35rem 0.6rem;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: rgba(2, 6, 23, 0.20);
        text-decoration: none;
        line-height: 1.2rem;
      }
      #tab-glossary .glossToc a:hover {
        border-color: rgba(196, 181, 253, 0.28);
        background: rgba(2, 6, 23, 0.30);
      }
      #tab-glossary .glossToc a.is-active {
        border-color: rgba(168, 85, 247, 0.35);
        background:
          radial-gradient(120% 160% at 0% 0%, rgba(255,255,255,0.18), rgba(255,255,255,0.0) 55%),
          linear-gradient(90deg, rgba(236,72,153,0.14), rgba(168,85,247,0.16) 45%, rgba(56,189,248,0.12));
        color: rgba(248, 250, 252, 0.98);
        box-shadow: 0 16px 50px rgba(168,85,247,0.14);
      }
      #tab-glossary .glossToc a:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.22);
      }

      #tab-glossary .gloss-section-header .gloss-arrow {
        font-weight: 950;
      }
      #tab-glossary .gloss-section-header[aria-expanded="false"] .gloss-arrow {
        opacity: 0.95;
      }

      /* Typography for long reading */
      #tab-glossary .gloss-article {
        font-size: 15px;
        line-height: 1.85;
        letter-spacing: 0.01em;
      }
      @media (min-width: 640px) {
        #tab-glossary .gloss-article { font-size: 15.5px; }
      }
      #tab-glossary .gloss-article p {
        margin: 0.75rem 0;
      }
      #tab-glossary .gloss-article h4,
      #tab-glossary .gloss-article h5 {
        margin-top: 1.1rem;
        margin-bottom: 0.5rem;
        line-height: 1.35;
      }
      #tab-glossary .gloss-article ul,
      #tab-glossary .gloss-article ol {
        margin: 0.65rem 0;
        padding-left: 1.2rem;
      }
      #tab-glossary .gloss-article li { margin: 0.2rem 0; }
      #tab-glossary .gloss-article table {
        width: 100%;
        border-collapse: collapse;
      }
      #tab-glossary .gloss-article thead th {
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
        padding: 0.5rem 0.25rem;
      }
      #tab-glossary .gloss-article tbody td {
        border-bottom: 1px solid rgba(30, 41, 59, 0.85);
        padding: 0.5rem 0.25rem;
        vertical-align: top;
      }

      .glossAffiliateCard {
        border-radius: 1.25rem;
        border: 1px solid rgba(251,191,36,0.22);
        background:
          radial-gradient(900px circle at 0% 0%, rgba(251,191,36,0.12), transparent 55%),
          radial-gradient(900px circle at 100% 0%, rgba(236,72,153,0.10), transparent 58%),
          rgba(2, 6, 23, 0.26);
        padding: 1rem;
        box-shadow: 0 18px 55px rgba(0,0,0,0.22);
      }
      .glossAffHdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }
      .glossAffTitle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: rgba(254, 243, 199, 0.98);
        font-weight: 900;
        letter-spacing: -0.01em;
        font-size: 0.95rem;
      }
      .glossAffIcon { filter: drop-shadow(0 10px 24px rgba(251,191,36,0.18)); }
      .glossAffAdPill {
        display: inline-flex;
        align-items: center;
        border-radius: 9999px;
        border: 1px solid rgba(251,191,36,0.26);
        background: rgba(251,191,36,0.10);
        padding: 0.15rem 0.55rem;
        font-size: 10px;
        font-weight: 950;
        letter-spacing: 0.08em;
        color: rgba(254, 243, 199, 0.98);
      }
      .glossAffGrid {
        margin-top: 0.75rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.6rem;
      }
      @media (min-width: 640px) {
        .glossAffGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      .glossAffItem {
        display: grid;
        grid-template-columns: 74px 1fr;
        gap: 0.75rem;
        align-items: center;
        border-radius: 1rem;
        border: 1px solid rgba(148,163,184,0.16);
        background: rgba(2, 6, 23, 0.35);
        padding: 0.75rem;
        text-decoration: none;
        transition: transform 0.14s ease, filter 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
      }
      .glossAffItem:hover {
        border-color: rgba(196,181,253,0.22);
        filter: brightness(1.04);
        transform: translateY(-1px);
        box-shadow: 0 18px 55px rgba(0,0,0,0.28);
      }
      .glossAffItem:active { transform: translateY(0) scale(0.99); }
      .glossAffItem:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 4px rgba(251,191,36,0.14),
          0 0 0 8px rgba(168,85,247,0.14),
          0 18px 55px rgba(0,0,0,0.28);
      }
      .glossAffImgWrap {
        width: 74px;
        /* Typical book cover ratio (approx 2:3) */
        height: 111px;
        border-radius: 0.9rem;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(15,23,42,0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
      }
      .glossAffImg {
        width: 100%;
        height: 100%;
        /* Keep cover visible without cropping */
        object-fit: contain;
        display: block;
      }
      .glossAffImgPh {
        width: 100%;
        height: 100%;
        background:
          radial-gradient(70% 70% at 30% 25%, rgba(255,255,255,0.16), rgba(255,255,255,0.0) 60%),
          linear-gradient(135deg, rgba(251,191,36,0.16), rgba(168,85,247,0.10), rgba(56,189,248,0.08));
      }
      .glossAffMeta { min-width: 0; }
      .glossAffItemTitle {
        color: rgba(241,245,249,0.98);
        font-weight: 900;
        font-size: 0.92rem;
        line-height: 1.25rem;
        letter-spacing: -0.01em;
      }
      .glossAffCtas {
        margin-top: 0.35rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        align-items: center;
      }
      .glossAffBadge {
        display: inline-flex;
        align-items: center;
        border-radius: 9999px;
        border: 1px solid rgba(251,191,36,0.22);
        background: rgba(251,191,36,0.08);
        padding: 0.12rem 0.5rem;
        font-size: 10px;
        font-weight: 900;
        color: rgba(254, 243, 199, 0.95);
      }

      /* Notice ticker (LED-style marquee) */
      .noticeTicker {
        border-radius: 1.25rem;
        border: 1px solid rgba(251, 191, 36, 0.18);
        background:
          radial-gradient(900px circle at 0% 0%, rgba(251,191,36,0.10), transparent 55%),
          radial-gradient(900px circle at 100% 0%, rgba(168,85,247,0.10), transparent 60%),
          rgba(2, 6, 23, 0.22);
        box-shadow: 0 18px 55px rgba(0,0,0,0.22);
        overflow: hidden;
      }
      .noticeTickerViewport {
        overflow-x: auto; /* also supports manual swipe */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        position: relative;
        padding: 0.75rem 0.75rem;
        outline: none;
      }
      .noticeTickerViewport::-webkit-scrollbar { display: none; }
      .noticeTickerViewport::before,
      .noticeTickerViewport::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0;
        width: 24px;
        pointer-events: none;
        z-index: 2;
      }
      .noticeTickerViewport::before {
        left: 0;
        background: linear-gradient(90deg, rgba(2,6,23,0.92), rgba(2,6,23,0.0));
      }
      .noticeTickerViewport::after {
        right: 0;
        background: linear-gradient(270deg, rgba(2,6,23,0.92), rgba(2,6,23,0.0));
      }

      .noticeTickerTrack {
        display: flex;
        align-items: center;
        width: max-content;
        gap: 1.25rem;
        will-change: transform;
        animation: noticeTickerScroll var(--ticker-duration, 28s) linear infinite;
        transform: translateX(0);
      }
      @keyframes noticeTickerScroll {
        to { transform: translateX(var(--ticker-shift, -800px)); }
      }

      .noticeTickerRun {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        padding-right: 1.25rem;
      }
      .noticeTickerSep {
        color: rgba(148, 163, 184, 0.55);
        font-weight: 900;
        user-select: none;
      }
      .noticeTickerItem {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        white-space: nowrap;
        border-radius: 9999px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: rgba(2, 6, 23, 0.35);
        padding: 0.42rem 0.72rem;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.01em;
        color: rgba(241, 245, 249, 0.96);
        text-decoration: none;
      }
      .noticeTickerItem.is-tip {
        border-color: rgba(34, 197, 94, 0.20);
        background: rgba(34, 197, 94, 0.08);
        color: rgba(187, 247, 208, 0.98);
      }
      .noticeTickerItem.is-howto {
        border-color: rgba(59, 130, 246, 0.22);
        background: rgba(59, 130, 246, 0.10);
        color: rgba(191, 219, 254, 0.98);
      }
      .noticeTickerItem.is-warn {
        border-color: rgba(251, 191, 36, 0.26);
        background: rgba(251, 191, 36, 0.10);
        color: rgba(254, 243, 199, 0.98);
      }
      .noticeTickerItem.is-info {
        border-color: rgba(168, 85, 247, 0.22);
        background: rgba(168, 85, 247, 0.10);
        color: rgba(233, 213, 255, 0.98);
      }
      .noticeTickerItem:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
        transition: transform 0.14s ease, filter 0.14s ease;
      }
      .noticeTickerItem:active { transform: translateY(0) scale(0.99); }
      .noticeTickerItem:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18), 0 0 0 8px rgba(168, 85, 247, 0.14);
      }

      @media (prefers-reduced-motion: reduce) {
        .noticeTickerTrack { animation: none !important; }
        .noticeTickerViewport::before,
        .noticeTickerViewport::after { display: none; }
      }
      .glossAffBtn {
        display: inline-flex;
        align-items: center;
        border-radius: 0.85rem;
        border: 1px solid rgba(255,255,255,0.14);
        background: linear-gradient(90deg, rgba(236,72,153,0.85), rgba(168,85,247,0.85), rgba(56,189,248,0.85));
        color: rgba(255,255,255,0.98);
        padding: 0.3rem 0.65rem;
        font-size: 11px;
        font-weight: 950;
        letter-spacing: 0.02em;
        box-shadow: 0 14px 40px rgba(168,85,247,0.18);
      }
      .glossAffNote {
        margin-top: 0.6rem;
        font-size: 10px;
        color: rgba(148,163,184,0.85);
      }

      /* Free promo hero (data input explanation) */
      .freePromoHero { position: relative; overflow: hidden; transform: translateZ(0); }
      .freePromoHero::before {
        content: "";
        position: absolute;
        inset: -2px;
        background:
          radial-gradient(700px circle at 12% 0%, rgba(34,197,94,0.20), transparent 55%),
          radial-gradient(900px circle at 50% 0%, rgba(236,72,153,0.18), transparent 60%),
          radial-gradient(900px circle at 100% 0%, rgba(56,189,248,0.16), transparent 60%);
        opacity: 0.9;
        pointer-events: none;
        filter: blur(0.5px);
      }
      .freePromoHero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.10) 38%, rgba(255,255,255,0.0) 70%);
        transform: translateX(-55%) skewX(-16deg);
        animation: freePromoShine 5.6s ease-in-out infinite;
        opacity: 0.6;
        pointer-events: none;
      }
      @keyframes freePromoShine {
        0% { transform: translateX(-55%) skewX(-16deg); opacity: 0.0; }
        10% { opacity: 0.45; }
        42% { transform: translateX(140%) skewX(-16deg); opacity: 0.0; }
        100% { transform: translateX(140%) skewX(-16deg); opacity: 0.0; }
      }
      @media (prefers-reduced-motion: reduce) {
        .freePromoHero::after { animation: none !important; }
      }
      .freePromoDot {
        width: 10px;
        height: 10px;
        border-radius: 9999px;
        background: rgba(34,197,94,0.95);
        box-shadow: 0 0 0 3px rgba(34,197,94,0.16), 0 10px 28px rgba(34,197,94,0.20);
      }
      .freePromoEmph {
        background: linear-gradient(90deg, rgba(34,197,94,0.95), rgba(236,72,153,0.95), rgba(56,189,248,0.95));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .tabScrollFade {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 56px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.18s ease;
      }
      .tabScrollFade.on { opacity: 1; }
      .tabScrollFadeL {
        left: 0;
        background: linear-gradient(90deg, rgba(2,6,23,0.92), rgba(2,6,23,0.0));
      }
      .tabScrollFadeR {
        right: 0;
        background: linear-gradient(270deg, rgba(2,6,23,0.92), rgba(2,6,23,0.0));
      }
      .tabScrollBtn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(148,163,184,0.22);
        background: rgba(2,6,23,0.55);
        backdrop-filter: blur(8px);
        box-shadow: 0 14px 40px rgba(0,0,0,0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
      }
      .tabScrollBtn.on { opacity: 1; pointer-events: auto; }
      .tabScrollBtn:hover { background: rgba(15,23,42,0.75); }
      .tabScrollBtn:active { transform: translateY(-50%) scale(0.96); }
      .tabScrollBtnL { left: 8px; }
      .tabScrollBtnR { right: 8px; }
      .tabScrollBtn svg { width: 18px; height: 18px; fill: rgba(226,232,240,0.95); }

      /* AI loading */
      .aiLoading {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(148,163,184,0.18);
        background: rgba(2,6,23,0.35);
      }

      /* AI chat: PC layout — both columns share the same explicit height */
      @media (min-width: 1024px) {
        #aiChatLayout {
          /* JS initLayoutHeightSync() overrides this dynamically */
          height: calc(100vh - 14rem);
          min-height: 480px;
          /* Force the single row to fill the container height */
          grid-template-rows: 1fr;
        }
        #aiChatPaneManage,
        #aiChatPaneChat {
          /* stretch is handled by grid; use min/max instead of height */
          min-height: 0;
          max-height: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
        }
        /* Left pane: the header and settings block stay fixed size;
           the chat-list block (flex-1) fills remaining space */
      }

      /* AI chat: keep scrollbar gutter stable to avoid reflow "wiggle" while streaming */
      #aiChatMsgs {
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
      }

      /* AI chat icon buttons (copy/reset/stop) */
      .aiChatIconBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.6rem;
        transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
      }
      .aiChatIconBtn:hover:not(:disabled) {
        background: rgba(148,163,184,0.12);
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.18);
      }
      .aiChatIconBtn:active:not(:disabled) { transform: scale(0.95); }
      .aiChatIconBtn svg { pointer-events: none; }

      /* AI chat management buttons (new/rename/delete) */
      .aiChatMgmtBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.4rem 0.5rem;
        font-size: 0.68rem;
        font-weight: 700;
        border-radius: 0.55rem;
        transition: background 0.15s, transform 0.12s;
      }
      .aiChatMgmtBtn:hover:not(:disabled) {
        background: rgba(148,163,184,0.10);
        transform: translateY(-1px);
      }
      .aiChatMgmtBtn:active:not(:disabled) { transform: scale(0.97); }
      .aiChatMgmtBtn svg { pointer-events: none; flex-shrink: 0; }

      /* AI chat welcome (empty state) */
      .aiChatWelcome {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        padding: 2.5rem 1.5rem;
        text-align: center;
        opacity: 0.85;
        animation: aiWelcomeFadeIn 0.5s ease-out;
      }
      @keyframes aiWelcomeFadeIn {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 0.85; transform: translateY(0); }
      }
      .aiChatWelcome--fortune .aiChatWelcomeIcon {
        width: 56px; height: 56px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: radial-gradient(circle, rgba(168,85,247,0.18), rgba(2,6,23,0.3));
        border: 1px solid rgba(168,85,247,0.25);
        box-shadow: 0 0 30px rgba(168,85,247,0.15);
      }
      .aiChatWelcome--help .aiChatWelcomeIcon {
        width: 56px; height: 56px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: radial-gradient(circle, rgba(56,189,248,0.15), rgba(2,6,23,0.3));
        border: 1px solid rgba(56,189,248,0.25);
        box-shadow: 0 0 30px rgba(56,189,248,0.12);
      }
      .aiChatWelcomeTitle {
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .aiChatWelcomeHint {
        font-size: 0.72rem;
        color: rgba(203,213,225,0.7);
      }
      .aiChatWelcomeArrow {
        margin-top: 0.5rem;
        animation: aiWelcomeArrowBounce 2s ease-in-out infinite;
      }
      @keyframes aiWelcomeArrowBounce {
        0%, 100% { transform: translateY(0); opacity: 0.5; }
        50%      { transform: translateY(6px); opacity: 0.8; }
      }

      /* AI chat status line (dot before text via pseudo) */
      .aiChatStatusLine {
        display: flex;
        align-items: center;
        gap: 0.35rem;
      }
      .aiChatStatusLine::before {
        content: '';
        display: inline-block;
        width: 6px; height: 6px;
        border-radius: 50%;
        background: rgba(148,163,184,0.45);
        flex-shrink: 0;
      }
      .aiSpinner {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid rgba(203, 213, 225, 0.28);
        border-top-color: rgba(196, 181, 253, 0.95);
        animation: aiSpin 0.8s linear infinite;
      }
      @keyframes aiSpin { to { transform: rotate(360deg); } }
      .aiDots span {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(196, 181, 253, 0.9);
        animation: aiPulse 1.1s ease-in-out infinite;
      }
      .aiDots span:nth-child(2) { animation-delay: 0.15s; opacity: 0.75; background: rgba(236,72,153,0.85); }
      .aiDots span:nth-child(3) { animation-delay: 0.3s; opacity: 0.6; background: rgba(56,189,248,0.85); }
      @keyframes aiPulse {
        0%, 100% { transform: translateY(0); opacity: 0.5; }
        50% { transform: translateY(-2px); opacity: 1; }
      }

      /* (removed) AI chat horoscope background */

      /* AI chat: orb icon (AI占い師) */
      .aiFlameIcon {
        position: relative;
        width: 14px;
        height: 14px;
        display: inline-block;
        vertical-align: -2px;
        margin-right: 6px;
        border-radius: 999px; /* sphere */
        transform-origin: 50% 50%;
        transform: translateZ(0);
        backface-visibility: hidden;
        background:
          /* specular highlight (centered; no perceived offset) */
          radial-gradient(70% 70% at 50% 45%, rgba(255,255,255,0.92), rgba(255,255,255,0.14) 48%, rgba(255,255,255,0.0) 74%),
          /* 7-color core */
          conic-gradient(
            from 0deg,
            rgba(255,  0,128,0.92),
            rgba(255,140,  0,0.90),
            rgba(255,230,  0,0.88),
            rgba( 34,197, 94,0.86),
            rgba( 56,189,248,0.86),
            rgba(120, 90,255,0.88),
            rgba(255,  0,128,0.92)
          ),
          /* vignette to keep edge soft (avoid "ring") */
          radial-gradient(closest-side at 50% 50%, rgba(2,6,23,0.0) 60%, rgba(2,6,23,0.62) 92%, rgba(2,6,23,0.90) 110%);
        box-shadow:
          0 0 10px rgba(255,  0,128,0.12),
          0 0 16px rgba(168, 85,247,0.12),
          0 0 22px rgba( 56,189,248,0.12),
          0 0 28px rgba( 34,197, 94,0.10);
        animation:
          aiOrbHue 3.6s linear infinite,
          aiOrbPulse 1.8s ease-in-out infinite,
          aiOrbGlow 2.1s ease-in-out infinite;
        will-change: filter, box-shadow, transform;
      }
      /* When used inside an avatar container (centered) */
      .aiFlameIcon.aiFlameIcon--avatar {
        display: block;
        margin-right: 0;
        /* Fill the (larger) avatar container in AI chat */
        width: 100%;
        height: 100%;
      }

      /* AI chat: animated user avatar (「あなた」) */
      .aiChatUserAvatar {
        width: 32px;
        height: 32px;
        border-radius: 1rem; /* matches rounded-2xl */
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.10);
        background:
          radial-gradient(70% 70% at 35% 28%, rgba(255,255,255,0.22), rgba(255,255,255,0.0) 60%),
          linear-gradient(135deg, rgba(236,72,153,0.22), rgba(168,85,247,0.18) 45%, rgba(56,189,248,0.14));
        box-shadow:
          0 16px 40px rgba(0,0,0,0.28),
          0 0 18px rgba(168,85,247,0.10),
          0 0 24px rgba(236,72,153,0.08);
        will-change: filter, transform;
      }
      .aiChatUserAvatar::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 999px;
        background: conic-gradient(
          from 0deg,
          rgba(236,72,153,0.55),
          rgba(168,85,247,0.45),
          rgba(56,189,248,0.45),
          rgba(34,197,94,0.35),
          rgba(236,72,153,0.55)
        );
        filter: blur(8px);
        opacity: 0.85;
        mix-blend-mode: screen;
        animation: aiUserHue 4.2s linear infinite;
        pointer-events: none;
      }
      .aiChatUserAvatar::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 0.85rem;
        background:
          radial-gradient(closest-side at 32% 30%, rgba(255,255,255,0.42), rgba(255,255,255,0.0) 62%),
          radial-gradient(closest-side at 70% 78%, rgba(56,189,248,0.18), rgba(255,255,255,0.0) 62%);
        opacity: 0.95;
        animation: aiUserPulse 1.6s ease-in-out infinite;
        pointer-events: none;
      }
      @keyframes aiUserHue {
        0% { filter: hue-rotate(0deg) saturate(1.15); transform: rotate(0deg); }
        100% { filter: hue-rotate(360deg) saturate(1.15); transform: rotate(360deg); }
      }
      @keyframes aiUserPulse {
        0%, 100% { transform: scale(1); opacity: 0.88; }
        50% { transform: scale(1.03); opacity: 1; }
      }
      @media (prefers-reduced-motion: reduce) {
        .aiChatUserAvatar::before,
        .aiChatUserAvatar::after { animation: none !important; }
        .aiFlameIcon,
        .aiFlameIcon::before,
        .aiFlameIcon::after { animation: none !important; }
      }
      .aiFlameIcon::before {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 999px;
        transform-origin: 50% 50%;
        transform: translateZ(0);
        background:
          conic-gradient(
            from 0deg,
            rgba(255,  0,128,0.30),
            rgba(255,140,  0,0.26),
            rgba(255,230,  0,0.22),
            rgba( 34,197, 94,0.22),
            rgba( 56,189,248,0.24),
            rgba(120, 90,255,0.26),
            rgba(255,  0,128,0.30)
          );
        filter: blur(9px);
        opacity: 0.88;
        mix-blend-mode: screen;
        animation: aiOrbHue 4.6s linear infinite;
        pointer-events: none;
      }
      .aiFlameIcon::after {
        content: "";
        position: absolute;
        /* Avoid a crisp inner "ring" that can look like a border */
        inset: 0;
        border-radius: 999px;
        background:
          radial-gradient(closest-side at 50% 45%, rgba(255,255,255,0.86), rgba(255,255,255,0.06) 62%, rgba(255,255,255,0.0) 78%),
          radial-gradient(closest-side at 50% 78%, rgba(255,255,255,0.12), rgba(255,255,255,0.0) 70%);
        opacity: 0.90;
        pointer-events: none;
      }
      @keyframes aiOrbHue {
        0% { filter: hue-rotate(0deg) saturate(1.35) brightness(1.02); }
        100% { filter: hue-rotate(360deg) saturate(1.35) brightness(1.02); }
      }
      @keyframes aiOrbPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.04); }
      }
      @keyframes aiOrbGlow {
        0%, 100% {
          box-shadow:
            0 0 10px rgba(255,  0,128,0.10),
            0 0 16px rgba(168, 85,247,0.10),
            0 0 22px rgba( 56,189,248,0.10),
            0 0 28px rgba( 34,197, 94,0.08);
        }
        50% {
          box-shadow:
            0 0 12px rgba(255,  0,128,0.18),
            0 0 20px rgba(168, 85,247,0.18),
            0 0 28px rgba( 56,189,248,0.16),
            0 0 34px rgba(255,230,  0,0.10);
        }
      }
      .aiSkeleton {
        border-radius: 1rem;
        border: 1px solid rgba(148,163,184,0.12);
        background: linear-gradient(90deg, rgba(15,23,42,0.10), rgba(168,85,247,0.10), rgba(15,23,42,0.10));
        background-size: 200% 100%;
        animation: aiShimmer 1.2s ease-in-out infinite;
        height: 160px;
      }
      @keyframes aiShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

      /* ─── Chart tab ─── */
      /* Display controls follow the app theme independently of the chart palette. */
      #chartLayerPanel {
        background: var(--astro-panel, #fff) !important;
        color: var(--astro-text, #1e2c2c) !important;
        border-color: var(--astro-line, #d9dfdc) !important;
      }
      #chartLayerPanel select {
        background: var(--astro-input, #fff) !important;
        color: var(--astro-text, #1e2c2c) !important;
        border-color: var(--astro-line, #d9dfdc) !important;
      }

      /* Chart toolbar icon buttons */
      .chartToolBtn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.35rem 0.55rem;
        border-radius: 0.55rem;
        border: 1px solid rgba(148,163,184,0.18);
        background: rgba(2,6,23,0.55);
        color: #cbd5e1;
        font-size: 0.7rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
      }
      .chartToolBtn:hover { background: rgba(51,65,85,0.45); border-color: rgba(148,163,184,0.35); }
      .chartToolBtn:active { background: rgba(51,65,85,0.6); }

      /* Compact layer / aspect checkboxes */
      .chartLayerChk,
      .chartAspChk {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.68rem;
        line-height: 1.2;
        padding: 0.15rem 0;
        color: #cbd5e1;
        cursor: pointer;
      }
      .chartAspChk {
        gap: 0.3rem;
        font-size: 0.68rem;
      }

      /* (removed) swipe tab transition */

      /* Mobile/iOS: prevent date/time inputs from overflowing their cards */
      #tab-timing input[type="date"],
      #tab-timing input[type="time"] {
        max-width: 100%;
        box-sizing: border-box;
      }
      #profileForm input[type="date"],
      #profileForm input[type="time"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: block;
        box-sizing: border-box;
        /* Mobile: some browsers render empty date/time controls too short */
        min-height: 40px;
      }
      /* iOS/Safari: grid items can keep min-width:auto and cause overflow; force shrink */
      #profileForm {
        min-width: 0;
        overflow-x: hidden;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
      }
      @media (min-width: 768px) {
        #profileForm {
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 1rem;
        }
        #profileForm > .pf-span-full {
          grid-column: 1 / -1;
        }
      }
      #profileForm > * {
        min-width: 0;
      }

      /* Profile form: field cards (more intuitive, touch-friendly) */
      #profileForm .ui-field {
        border-radius: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background:
          radial-gradient(520px circle at 0% 0%, rgba(168,85,247,0.10), transparent 60%),
          rgba(2, 6, 23, 0.22);
        padding: 0.75rem 0.85rem;
        box-shadow: 0 18px 55px rgba(0,0,0,0.18);
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        box-sizing: border-box;
      }
      #profileForm .ui-field:focus-within {
        border-color: rgba(168, 85, 247, 0.55);
        box-shadow:
          0 0 0 4px rgba(168, 85, 247, 0.18),
          0 22px 70px rgba(0,0,0,0.22);
        transform: translateY(-1px);
      }
      #profileForm .ui-field label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.5rem;
      }
      #profileForm .ui-field label .uiFieldIcon {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        opacity: 0.95;
        color: rgba(226,232,240,0.92);
        filter: drop-shadow(0 10px 24px rgba(0,0,0,0.22));
      }
      #profileForm .ui-field:focus-within label .uiFieldIcon {
        color: rgba(196,181,253,0.98);
      }
      #profileForm .ui-field .ui-pill-muted {
        background: rgba(2,6,23,0.35);
        border-color: rgba(148,163,184,0.20);
      }
      #profileForm .ui-field .ui-control,
      #profileForm .ui-field .ui-control-deep {
        min-height: 44px; /* consistent touch target */
        box-sizing: border-box;
      }
      #profileForm .ui-field .ui-shell {
        border-color: rgba(148, 163, 184, 0.18);
        background: rgba(2, 6, 23, 0.18);
      }
      #profileForm .ui-field-help {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 0.85rem;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: rgba(2, 6, 23, 0.20);
        padding: 0.5rem 0.65rem;
        color: rgba(203, 213, 225, 0.92);
        font-size: 0.75rem; /* text-xs */
      }
      #profileForm .ui-field-help label { cursor: pointer; user-select: none; }

      /* Analyze button: graphical "results below" hint */
      .analyzeFlowHint {
        width: min(460px, 100%);
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 12px;
        align-items: center;
        opacity: 0.95;
        margin-top: 2px;
      }
      .analyzeFlowHintArrow {
        position: relative;
        height: 52px;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 6px;
      }
      .analyzeFlowHintArrow .chev {
        width: 14px;
        height: 14px;
        border-right: 3px solid rgba(196,181,253,0.95);
        border-bottom: 3px solid rgba(56,189,248,0.90);
        transform: rotate(45deg);
        filter: drop-shadow(0 12px 28px rgba(168,85,247,0.20));
        opacity: 0.45;
        animation: analyzeChev 1.35s ease-in-out infinite;
      }
      .analyzeFlowHintArrow .chev:nth-child(2) { animation-delay: 0.12s; opacity: 0.70; }
      .analyzeFlowHintArrow .chev:nth-child(3) { animation-delay: 0.24s; opacity: 0.95; }
      @keyframes analyzeChev {
        0%, 100% { transform: translateY(-1px) rotate(45deg); filter: drop-shadow(0 12px 28px rgba(168,85,247,0.14)); }
        50% { transform: translateY(4px) rotate(45deg); filter: drop-shadow(0 18px 42px rgba(56,189,248,0.16)); }
      }
      .analyzeFlowHintPreview {
        border-radius: 1rem;
        border: 1px solid rgba(148,163,184,0.16);
        background:
          radial-gradient(520px circle at 0% 0%, rgba(56,189,248,0.12), transparent 60%),
          radial-gradient(520px circle at 100% 0%, rgba(236,72,153,0.10), transparent 60%),
          rgba(2,6,23,0.22);
        box-shadow: 0 18px 55px rgba(0,0,0,0.18);
        padding: 10px 12px;
      }
      .analyzeFlowHintPreview .tabRow {
        display: flex;
        gap: 6px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(148,163,184,0.14);
      }
      .analyzeFlowHintPreview .tabRow .tab {
        height: 10px;
        width: 44px;
        border-radius: 999px;
        background: rgba(148,163,184,0.20);
      }
      .analyzeFlowHintPreview .tabRow .tab.on {
        background: linear-gradient(90deg, rgba(168,85,247,0.95), rgba(56,189,248,0.90));
        box-shadow: 0 14px 40px rgba(168,85,247,0.18);
      }
      .analyzeFlowHintPreview .panel {
        padding-top: 10px;
        display: grid;
        gap: 8px;
      }
      .analyzeFlowHintPreview .panel .line {
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(148,163,184,0.18), rgba(148,163,184,0.06));
        position: relative;
        overflow: hidden;
      }
      .analyzeFlowHintPreview .panel .line::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.22), rgba(255,255,255,0.0));
        transform: translateX(-60%);
        animation: analyzeShimmer 1.6s ease-in-out infinite;
        opacity: 0.9;
        mix-blend-mode: overlay;
      }
      .analyzeFlowHintPreview .panel .line.w1 { width: 92%; }
      .analyzeFlowHintPreview .panel .line.w2 { width: 76%; }
      .analyzeFlowHintPreview .panel .line.w3 { width: 84%; }
      @keyframes analyzeShimmer {
        0% { transform: translateX(-60%); opacity: 0.0; }
        18% { opacity: 0.9; }
        55% { transform: translateX(60%); opacity: 0.0; }
        100% { transform: translateX(60%); opacity: 0.0; }
      }
      @media (prefers-reduced-motion: reduce) {
        .analyzeFlowHintArrow .chev,
        .analyzeFlowHintPreview .panel .line::after { animation: none !important; }
      }

      /* Data tab (分析データ): mobile overflow prevention */
      #tab-data {
        min-width: 0;
        overflow-x: hidden;
      }
      #tab-data * {
        min-width: 0;
      }
      /* Prevent long unbroken strings from blowing up layouts */
      #tab-data pre,
      #tab-data code,
      #tab-data .whitespace-pre-wrap,
      #tab-data td,
      #tab-data th {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      /* AI reading tab (AI占い鑑定): prevent horizontal page scroll on mobile */
      #tab-ai {
        min-width: 0;
        overflow-x: hidden;
      }
      #tab-ai * {
        min-width: 0;
        max-width: 100%;
      }
      /* Prevent long unbroken strings from blowing up layouts */
      #tab-ai pre,
      #tab-ai code,
      #tab-ai .whitespace-pre-wrap,
      #tab-ai td,
      #tab-ai th {
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      /* Keep code blocks scrollable within themselves (not the page) */
      #tab-ai pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      /* Tables can still be wider; allow internal horizontal scroll */
      #tab-ai table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      /* Media should never overflow the container */
      #tab-ai img,
      #tab-ai svg,
      #tab-ai video,
      #tab-ai canvas {
        max-width: 100%;
        height: auto;
      }
      /* Smooth horizontal scroll for table wrappers on mobile */
      #tab-data .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
      }

      /* ═══════════════════════════════════════════════════════
         Data tab: ZERO-LOSS flat design
         Nested HTML structure is preserved, but visually
         ALL content renders at 100% parent width.
         ═══════════════════════════════════════════════════════ */

      /* Section body padding (only this outermost padding exists) */
      #tab-data [data-sec-body] {
        padding: 0.6rem 0.5rem;
      }
      @media (min-width: 640px) {
        #tab-data [data-sec-body] {
          padding: 0.75rem;
        }
      }
      @media (min-width: 768px) {
        #tab-data [data-sec-body] {
          padding: 1rem;
        }
      }

      /*
       * ALL nested containers inside section body:
       * Strip border, padding, radius, background, shadow completely.
       * They become invisible wrappers — content flows at full width.
       * Vertical spacing via margin-top only.
       */
      #tab-data [data-sec-body] div[class*="rounded-"] {
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      /* Restore top-margin spacing on nested blocks (replacing padding) */
      #tab-data [data-sec-body] > div[class*="rounded-"] {
        margin-top: 0.85rem;
      }
      #tab-data [data-sec-body] > div[class*="rounded-"]:first-child {
        margin-top: 0;
      }

      /* Add a thin horizontal divider before each nested block for separation */
      #tab-data [data-sec-body] > div[class*="rounded-"] + div[class*="rounded-"] {
        padding-top: 0.85rem !important;
        border-top: 1px solid rgba(148,163,184,0.10) !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
      }

      /* ── Grid cards (stat cards, small info blocks shown side-by-side) ──
       * These ARE the leaf-level display cards and SHOULD have a subtle box.
       * We restore a minimal visible style for direct children of .grid only.
       */
      #tab-data [data-sec-body] .grid > div[class*="rounded-"] {
        border-radius: 0.45rem !important;
        padding: 0.45rem 0.55rem !important;
        background: var(--astro-raised, #f5f8f6) !important;
        border: 1px solid var(--astro-line, #d9dfdc) !important;
        margin-top: 0 !important;
        box-shadow: none !important;
      }
      @media (min-width: 640px) {
        #tab-data [data-sec-body] .grid > div[class*="rounded-"] {
          padding: 0.55rem 0.65rem !important;
        }
      }

      /* Tables: full width always */
      #tab-data [data-sec-body] .overflow-x-auto {
        width: 100%;
      }
      #tab-data table {
        width: 100%;
      }
      #tab-data table th,
      #tab-data table td {
        padding: 0.35rem 0.45rem;
      }
      @media (min-width: 640px) {
        #tab-data table th,
        #tab-data table td {
          padding: 0.45rem 0.65rem;
        }
      }

      /* Grid gaps */
      #tab-data [data-sec-body] .grid {
        gap: 0.45rem;
      }
      @media (min-width: 640px) {
        #tab-data [data-sec-body] .grid {
          gap: 0.6rem;
        }
      }

      /* Section header icon buttons */
      .dataSecHdrBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.3rem;
        border-radius: 0.4rem;
        color: rgba(203,213,225,0.8);
        transition: background 0.12s, color 0.12s;
        cursor: pointer;
        text-decoration: none;
      }
      .dataSecHdrBtn:hover {
        background: rgba(148,163,184,0.12);
        color: rgba(226,232,240,1);
      }
      .dataSecHdrBtn:active {
        transform: scale(0.93);
      }
      .dataSecHdrBtn svg {
        width: 14px;
        height: 14px;
        pointer-events: none;
      }
      @media (min-width: 640px) {
        .dataSecHdrBtn {
          padding: 0.35rem;
        }
        .dataSecHdrBtn svg {
          width: 16px;
          height: 16px;
        }
      }

      /* iPhone/iOS: date/time inputs can ignore width constraints and overflow. Force-fit + clip safely. */
      @supports (-webkit-touch-callout: none) {
        #profileForm [data-ios-fit] {
          min-width: 0;
          overflow: hidden;
        }
        #profileForm input[type="date"],
        #profileForm input[type="time"] {
          -webkit-appearance: none;
          appearance: none;
          inline-size: 100% !important;
          max-inline-size: 100% !important;
          min-inline-size: 0 !important;
          width: 100% !important;
          max-width: 100% !important;
          min-width: 0 !important;
          /* iOS: keep consistent touch target height even when value is empty */
          min-height: 44px !important;
          padding: 0.5rem 0.75rem !important;
        }

        /* iOS Safari auto-zooms on focus when font-size < 16px. Prevent by forcing 16px on form controls. */
        input,
        textarea,
        select {
          font-size: 16px !important;
        }
      }

      /* Chart SVG: keep crisp. Avoid heavy filters on mobile which can trigger rasterization blur. */
      .astroChartSvg {
        /* Keep identical appearance across PC/mobile */
        filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
      }

      /* ─────────────────────────────────────────────────────────────
         Mobile viewport robustness (iOS Safari address bar / keyboard)
         ───────────────────────────────────────────────────────────── */

      /* Safe area (viewport-fit=cover): env(safe-area-inset-*) with fallbacks */
      .safe-bottom {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
      }
      .safe-top {
        padding-top: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
      }

      /*
        Prefer dynamic viewport units when available.
        This avoids iOS Safari "vh includes hidden address bar" issues that can make panes too tall
        (scroll feels broken / buttons disappear behind the bottom bar).
      */
      @supports (height: 100dvh) {
        /* AI chat panes */
        .h-\[56vh\] { height: 56dvh !important; }
        .sm\:h-\[62vh\] { height: 62dvh !important; }
        .max-h-\[52vh\] { max-height: 52dvh !important; }
        .sm\:max-h-\[56vh\] { max-height: 56dvh !important; }

        /* Legacy / other tabs that use vh-based max heights */
        .max-h-\[48vh\] { max-height: 48dvh !important; }
        .max-h-\[60vh\] { max-height: 60dvh !important; }

        /* Modals */
        .max-h-\[85vh\] { max-height: 85dvh !important; }
        .max-h-\[75vh\] { max-height: 75dvh !important; }
      }

      /* ─────────────────────────────────────────────────────────────
         A11y / UX polish: skip link, focus rings, anchor offsets
         ───────────────────────────────────────────────────────────── */

      /* Skip link: visible only when focused (keyboard users) */
      .skipLink {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 9999;
        transform: translateY(-140%);
        transition: transform 0.18s ease, opacity 0.18s ease;
        opacity: 0;
        border-radius: 0.9rem;
        border: 1px solid rgba(255,255,255,0.18);
        background: rgba(2,6,23,0.92);
        backdrop-filter: blur(10px);
        padding: 0.6rem 0.85rem;
        color: rgba(248,250,252,0.98);
        font-weight: 900;
        letter-spacing: 0.01em;
        text-decoration: none;
        box-shadow: 0 18px 55px rgba(0,0,0,0.35);
      }
      .skipLink:focus,
      .skipLink:focus-visible {
        transform: translateY(0);
        opacity: 1;
        outline: none;
        box-shadow:
          0 0 0 4px rgba(255,255,255,0.14),
          0 0 0 8px rgba(168,85,247,0.18),
          0 18px 55px rgba(0,0,0,0.35);
      }

      /* Fixed header offset when scrolling to sections */
      #resultsTabs { scroll-margin-top: 92px; }
      #signupPromo { scroll-margin-top: 92px; }
      #profileSection { scroll-margin-top: 92px; }
      #noticeTicker { scroll-margin-top: 92px; }
      #studioAds { scroll-margin-top: 92px; }

      /* Consistent focus for app buttons (keep existing per-component focus too) */
      .ui-btn-slate:focus-visible,
      .ui-btn-icon:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 4px rgba(255,255,255,0.12),
          0 0 0 8px rgba(168,85,247,0.18),
          0 16px 45px rgba(0,0,0,0.28);
      }

      /* Profile action buttons: on small screens, allow horizontal scroll instead of wrapping into tall blocks */
      @media (max-width: 640px) {
        .profileActions {
          flex-wrap: nowrap !important;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          padding-bottom: 4px;
          scrollbar-width: none;
        }
        .profileActions::-webkit-scrollbar { display: none; }
        .profileActions > * { flex: 0 0 auto; }
      }

      /* Mobile bottom action bar */
      .mobileActionBar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        will-change: transform;
        /* Avoid transform-based repositioning here:
           mobile Safari can become flaky with taps on fixed+backdrop-filter+transform. */
        transform: translateZ(0);
        display: none; /* enabled only on small screens */
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        justify-content: center;
        /* viewport-fit=cover: respect safe area insets */
        padding: 10px max(12px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        border-top: 1px solid rgba(148,163,184,0.16);
        background: rgba(2,6,23,0.72);
        backdrop-filter: blur(14px);
        box-shadow: 0 -18px 70px rgba(0,0,0,0.42);
        /* Improve tap reliability on mobile */
        touch-action: manipulation;
      }
      @media (max-width: 768px) {
        .mobileActionBar {
          display: flex;
        }
        /* Hide bottom bar while typing (mobile keyboard open / field focused) */
        body[data-mobile-typing="1"] #mobileActionBar {
          display: none !important;
        }
        /* Ensure page content is not hidden behind the bar. viewport-fit=cover: include safe-area. */
        body {
          padding-bottom: calc(var(--mobile-bar-h, 132px) + env(safe-area-inset-bottom, 0px));
          scroll-padding-bottom: calc(var(--mobile-bar-h, 132px) + env(safe-area-inset-bottom, 0px) + 16px);
        }
        main#mainContent input,
        main#mainContent textarea,
        main#mainContent select {
          scroll-margin-bottom: calc(var(--mobile-bar-h, 132px) + env(safe-area-inset-bottom, 0px) + 24px);
        }
      }

      /* ─────────────────────────────────────────────────────────────
         Mobile bottom dock (rebuilt)
         - No backdrop-filter / no transform repositioning
         - Keyboard-aware via --vv-inset-bottom
         - Hides while typing via data-mobile-typing
         ───────────────────────────────────────────────────────────── */
      :root {
        /* Bottom area excluded from Web-page rendering (browser toolbar area). */
        --browser-bottom-exclusion: 0px;
        /* Fixed dock height baseline (avoid runtime reposition jitter) */
        --mobile-dock-h: 132px;
        --mobile-dock-bg: rgba(2, 6, 23, 0.92);
        /* Solid fill for browser bottom bar exclusion area */
        --browser-bottom-fill: #ffffff;
      }
      #mobileDock {
        position: fixed;
        left: 0;
        right: 0;
        /* Stable fixed mode: always pin to layout viewport bottom. */
        bottom: var(--browser-bottom-exclusion, 0px);
        transform: none;
        z-index: 40;
        display: none; /* mobile only */
        flex-direction: column;
        gap: 8px;
        /* viewport-fit=cover: respect safe area insets (env with 0px fallback) */
        padding: 10px max(12px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        border-top: 1px solid rgba(148,163,184,0.16);
        background: var(--mobile-dock-bg);
        box-shadow: 0 -18px 70px rgba(0,0,0,0.42);
        touch-action: manipulation;
      }
      @media (max-width: 768px) {
        #mobileDock { display: flex; }
        /* Hide dock only while software keyboard is open */
        body[data-mobile-keyboard-open="1"] #mobileDock { display: none !important; }
        /* Reserve space for the dock (height from JS). viewport-fit=cover: include safe-area. */
        body {
          padding-bottom: calc(var(--mobile-dock-h, 132px) + var(--browser-bottom-exclusion, 0px) + env(safe-area-inset-bottom, 0px));
          scroll-padding-bottom: calc(var(--mobile-dock-h, 132px) + var(--browser-bottom-exclusion, 0px) + env(safe-area-inset-bottom, 0px) + 16px);
        }
        main#mainContent input,
        main#mainContent textarea,
        main#mainContent select {
          scroll-margin-bottom: calc(var(--mobile-dock-h, 132px) + var(--browser-bottom-exclusion, 0px) + env(safe-area-inset-bottom, 0px) + 24px);
        }
      }
      /* iPhone Safari (browser mode only): keep browser bottom bar area empty. */
      @supports (-webkit-touch-callout: none) {
        @media (max-width: 768px) and (display-mode: browser) {
          html[data-standalone="0"] {
            /* Fallback for browsers without lvh/svh support */
            --browser-bottom-exclusion: 120px;
          }
          @supports (height: 100lvh) {
            @supports (height: 100svh) {
              html[data-standalone="0"] {
                /* Browser bottom UI max gap + small safety buffer */
                --browser-bottom-exclusion: max(120px, calc(100lvh - 100svh + 12px));
              }
            }
          }
          /* HARD EXCLUSION (no canvas / no DOM painting in bottom UI area):
             Render the whole app only inside a fixed 100svh viewport, and let the rest be solid background. */
          html[data-standalone="0"],
          html[data-standalone="0"] body {
            background-color: var(--browser-bottom-fill, #ffffff) !important;
            background-image: none !important;
          }
          html[data-standalone="0"] body { overflow: hidden; }

          html[data-standalone="0"] #appViewport {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            height: 100svh;
            overflow: hidden;
            /* The iPhone viewport uses the same surface as the app theme. */
            background-color: var(--astro-bg, #ffffff);
            background-image: none;
          }
          html[data-standalone="0"] #appScroll {
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior-x: none;
            -webkit-overflow-scrolling: touch;
            /* Reserve space for the fixed dock within the app viewport */
            padding-bottom: calc(var(--mobile-dock-h, 132px) + env(safe-area-inset-bottom, 0px) + 16px);
            scroll-padding-bottom: calc(var(--mobile-dock-h, 132px) + env(safe-area-inset-bottom, 0px) + 16px);
          }
          /* Clip starfield to the app viewport (so it never paints under browser UI). */
          html[data-standalone="0"] #starfield {
            position: absolute;
            inset: 0;
            height: 100%;
          }

          /* Dock should be fixed to the bottom of the app viewport (not pushed up). */
          html[data-standalone="0"] #mobileDock {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: auto;
            z-index: 40;
          }
        }
      }
      /* Note: In browser mode we now hard-exclude the bottom UI area by clipping the app to 100svh,
         so the dock is anchored to #appViewport bottom (absolute) and must NOT be repositioned by lvh/vh rules. */
      /* PWA (standalone): no browser bottom UI. Avoid iOS fixed+keyboard quirks by anchoring
         the dock absolute inside a fixed app viewport container. */
      @supports (-webkit-touch-callout: none) {
        @media (max-width: 768px) and (display-mode: standalone) {
          html[data-standalone="1"] {
            --browser-bottom-exclusion: 0px !important;
          }
          html[data-standalone="1"] body { overflow: hidden; }

          html[data-standalone="1"] #appViewport {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            /* PWA: use the *visible* viewport height to avoid bottom cut-off */
            height: 100vh;
            overflow: hidden;
          }
          @supports (height: 100dvh) {
            html[data-standalone="1"] #appViewport { height: 100dvh; }
          }
          html[data-standalone="1"] #appScroll {
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior-x: none;
            -webkit-overflow-scrolling: touch;
            padding-bottom: calc(var(--mobile-dock-h, 132px) + env(safe-area-inset-bottom, 0px) + 16px);
            scroll-padding-bottom: calc(var(--mobile-dock-h, 132px) + env(safe-area-inset-bottom, 0px) + 16px);
          }
          html[data-standalone="1"] #starfield {
            position: absolute;
            inset: 0;
            height: 100%;
          }
          html[data-standalone="1"] #mobileDock {
            position: absolute !important;
            left: 0;
            right: 0;
            bottom: 0 !important;
            top: auto !important;
            z-index: 40;
          }
        }
      }
      .mobileDockTabs {
        border-radius: 1rem;
        border: 1px solid rgba(148,163,184,0.14);
        background: rgba(2,6,23,0.22);
        overflow: hidden;
      }
      .mobileDockTabScroller {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        touch-action: pan-x;
      }
      .mobileDockTabScroller::-webkit-scrollbar { display: none; }
      .mobileDockTabBtn {
        flex: 0 0 auto;
        scroll-snap-align: center;
        min-height: 40px;
        padding: 0.55rem 0.8rem;
        border-radius: 9999px;
        border: 1px solid rgba(148,163,184,0.18);
        background: rgba(2,6,23,0.20);
        color: rgba(226,232,240,0.92);
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.01em;
        white-space: nowrap;
        touch-action: manipulation;
      }
      .mobileDockTabBtn.is-active {
        border-color: rgba(255,255,255,0.22);
        background: linear-gradient(90deg, rgba(236,72,153,0.88), rgba(168,85,247,0.90) 45%, rgba(56,189,248,0.88));
        color: rgba(255,255,255,0.98);
      }
      .mobileDockActions {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
      }
      .mobileDockBtn {
        min-height: 48px;
        border-radius: 1rem;
        padding: 0.75rem 1rem;
        font-weight: 950;
        letter-spacing: 0.01em;
        border: 1px solid rgba(148,163,184,0.18);
        background: rgba(2,6,23,0.25);
        color: rgba(241,245,249,0.96);
        flex: 1 1 0;
        max-width: 360px;
        touch-action: manipulation;
      }
      .mobileDockBtn--ghost { flex: 0 0 auto; max-width: 160px; }
      .mobileDockBtn--primary {
        border-color: rgba(255,255,255,0.20);
        background: linear-gradient(90deg, rgba(236,72,153,0.92), rgba(168,85,247,0.92) 45%, rgba(56,189,248,0.92));
      }
      .mobileDockBtnInner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        line-height: 1;
        width: 100%;
      }
      .mobileDockBtnIcon svg { width: 16px; height: 16px; display: block; }

      /* Retire legacy bar completely (kept for compatibility but hidden) */
      #mobileActionBar { display: none !important; }

      /* Mobile tab scroller (bottom) */
      .mobileActionBarTabs {
        display: block;
        border-radius: 1rem;
        border: 1px solid rgba(148,163,184,0.14);
        background: rgba(2,6,23,0.22);
        overflow: hidden;
      }
      .mobileTabScroller {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
      }
      .mobileTabScroller::-webkit-scrollbar { display: none; }

      .mobileTabBtn {
        flex: 0 0 auto;
        scroll-snap-align: center;
        min-height: 40px;
        padding: 0.55rem 0.8rem;
        border-radius: 9999px;
        border: 1px solid rgba(148,163,184,0.18);
        background: rgba(2,6,23,0.20);
        color: rgba(226,232,240,0.92);
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.01em;
        transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
        white-space: nowrap;
      }
      .mobileTabBtnInner {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        line-height: 1;
      }
      .mobileTabBtnIcon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.92;
        transform: translateY(-0.5px);
      }
      .mobileTabBtnIcon svg {
        width: 14px;
        height: 14px;
        display: block;
      }
      .mobileTabBtn:hover { filter: brightness(1.06); transform: translateY(-1px); }
      .mobileTabBtn:active { transform: translateY(0) scale(0.99); }
      .mobileTabBtn:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 4px rgba(255,255,255,0.10),
          0 0 0 8px rgba(168,85,247,0.16),
          0 14px 45px rgba(0,0,0,0.30);
      }
      .mobileTabBtn.is-active {
        border-color: rgba(255,255,255,0.22);
        background:
          radial-gradient(110% 160% at 0% 0%, rgba(255,255,255,0.18), rgba(255,255,255,0.0) 55%),
          linear-gradient(90deg, rgba(236,72,153,0.88), rgba(168,85,247,0.90) 45%, rgba(56,189,248,0.88));
        color: rgba(255,255,255,0.98);
        text-shadow: 0 1px 0 rgba(0,0,0,0.22);
        box-shadow: 0 16px 50px rgba(168,85,247,0.20);
      }

      .mobileActionBarActions {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
      }
      .mobileActionBtn {
        min-height: 48px;
        border-radius: 1rem;
        padding: 0.75rem 1rem;
        font-weight: 950;
        letter-spacing: 0.01em;
        border: 1px solid rgba(148,163,184,0.18);
        background: rgba(2,6,23,0.25);
        color: rgba(241,245,249,0.96);
        flex: 1 1 0;
        max-width: 360px;
        transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
        touch-action: manipulation;
      }
      .mobileActionBtnInner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        line-height: 1;
        width: 100%;
      }
      .mobileActionBtnIcon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.92;
        transform: translateY(-0.5px);
      }
      .mobileActionBtnIcon svg {
        width: 16px;
        height: 16px;
        display: block;
      }
      .mobileActionBtn--ghost:hover { background: rgba(15,23,42,0.35); }
      .mobileActionBtn--ghost {
        /* Left action: keep compact so primary CTA stays prominent */
        flex: 0 0 auto;
        max-width: 160px;
      }
      .mobileActionBtn--primary {
        border-color: rgba(255,255,255,0.20);
        background:
          radial-gradient(80% 160% at 12% 0%, rgba(255,255,255,0.30), rgba(255,255,255,0.0) 55%),
          linear-gradient(90deg, rgba(236,72,153,0.92), rgba(168,85,247,0.92) 45%, rgba(56,189,248,0.92));
        box-shadow: 0 18px 55px rgba(168,85,247,0.26);
      }
      .mobileActionBtn:hover { filter: brightness(1.06) saturate(1.15); transform: translateY(-1px); }
      .mobileActionBtn:active { transform: translateY(0) scale(0.99); }
      .mobileActionBtn:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 4px rgba(255,255,255,0.14),
          0 0 0 8px rgba(168,85,247,0.18),
          0 18px 55px rgba(0,0,0,0.35);
      }
      .mobileActionBtn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; transform: none; }