/* 98ai VIP v3: matches the vip666ai.com look (navy ink, slate background, teal nav, blue primary, soft white cards). */
    main.vip-main-wide { max-width: 1200px; }
    body { background-color: #f8fafc; }
    html.dark body { background-color: #0b1120; }
    .vip-redeem {
      --vip-ink: #10233f; --vip-muted: #64748b; --vip-line: #e2e8f0; --vip-surface: #fff;
      --vip-blue: #2563eb; --vip-blue-2: #1d4ed8;
      --vip-shadow: 0 22px 55px -34px rgba(15, 35, 63, .35);
    }
    html.dark .vip-redeem {
      --vip-ink: #e2e8f0; --vip-muted: #94a3b8; --vip-line: #1e293b; --vip-surface: #0f172a;
      --vip-blue: #3b82f6; --vip-blue-2: #2563eb;
      --vip-shadow: 0 22px 55px -34px rgba(0, 0, 0, .8);
    }

    /* Desktop navigation: separate rounded buttons, active = teal */
    .vip-nav { display: flex; align-items: center; gap: 8px; }
    .vip-nav-btn { cursor: pointer; height: 38px; padding: 0 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #475569; font-size: 14px; white-space: nowrap; transition: border-color .15s, color .15s; }
    .vip-nav-btn:hover { border-color: #cbd5e1; color: #10233f; }
    .vip-nav-btn.is-active { border-color: #99f6e4; background: #f0fdfa; color: #0f766e; font-weight: 500; }
    html.dark .vip-nav-btn { background: #0f172a; border-color: #1e293b; color: #94a3b8; }
    html.dark .vip-nav-btn:hover { border-color: #334155; color: #e2e8f0; }
    html.dark .vip-nav-btn.is-active { background: rgba(20, 184, 166, .12); border-color: #115e59; color: #5eead4; }
    @media (max-width: 1279px) { .vip-nav-btn { height: 34px; padding: 0 12px; font-size: 13px; } }

    /* Two-column layout */
    .vip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 48px; align-items: start; }
    .vip-hero { padding-top: 56px; min-width: 0; }
    .vip-panel { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
    .vip-panel > .hairline-card { background: var(--vip-surface); border: 1px solid var(--vip-line); border-radius: 16px; box-shadow: var(--vip-shadow); }

    /* Hero */
    .vip-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid #99f6e4; background: #f0fdfa; color: #0f766e; font-size: 12px; font-weight: 600; }
    .vip-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; }
    html.dark .vip-badge { background: rgba(20, 184, 166, .12); border-color: #115e59; color: #5eead4; }
    .vip-title { margin: 20px 0 0; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.16; font-weight: 700; letter-spacing: -.025em; color: var(--vip-ink); }
    .vip-title-accent { white-space: nowrap; }
    .vip-lead { margin: 24px 0 36px; max-width: 32em; font-size: 18px; line-height: 1.6; color: var(--vip-muted); }

    .vip-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .vip-features li { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .vip-features strong { display: block; font-size: 14px; font-weight: 600; color: var(--vip-ink); }
    .vip-features small { display: block; font-size: 12px; line-height: 1.5; color: var(--vip-muted); }
    .vip-feature-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
    .vip-feature-icon svg { width: 18px; height: 18px; }
    .vip-feature-icon.is-shield { background: #f0fdfa; color: #0d9488; }
    .vip-feature-icon.is-bolt { background: #eff6ff; color: #2563eb; }
    .vip-feature-icon.is-list { background: #fffbeb; color: #d97706; }
    html.dark .vip-feature-icon.is-shield { background: rgba(20, 184, 166, .14); color: #2dd4bf; }
    html.dark .vip-feature-icon.is-bolt { background: rgba(59, 130, 246, .16); color: #60a5fa; }
    html.dark .vip-feature-icon.is-list { background: rgba(217, 119, 6, .16); color: #fbbf24; }

    /* Stepper: circles on a hairline, current = blue */
    .vip-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); user-select: none; }
    .vip-steps::before { content: ""; position: absolute; top: 16px; left: 12.5%; right: 12.5%; height: 1px; background: var(--vip-line); }
    .vip-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; text-align: center; color: #94a3b8; min-width: 0; }
    .vip-step-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--vip-line); background: var(--vip-surface); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
    .vip-step-title { font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vip-step-desc { font-size: 10px; letter-spacing: .06em; opacity: .8; }
    .vip-step.is-current { color: var(--vip-ink); }
    .vip-step.is-current .vip-step-dot { color: #fff; border-color: #3b82f6; background: linear-gradient(135deg, var(--vip-blue), var(--vip-blue-2)); box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .75); }
    .vip-step.is-done { color: #0f766e; }
    .vip-step.is-done .vip-step-dot { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; }
    html.dark .vip-step.is-done { color: #5eead4; }
    html.dark .vip-step.is-done .vip-step-dot { color: #5eead4; border-color: #115e59; background: rgba(20, 184, 166, .12); }

    /* Card controls: blue primary button, slate input */
    .vip-panel .refined-btn.bg-zinc-900, html.dark .vip-panel .refined-btn.bg-zinc-900 { background: var(--vip-blue); color: #fff; border-radius: 12px; box-shadow: 0 12px 24px -14px rgba(37, 99, 235, .8); }
    .vip-panel .refined-btn.bg-zinc-900:hover:not(:disabled) { background: var(--vip-blue-2); }
    .vip-panel .refined-btn.bg-zinc-900:disabled { opacity: .45; box-shadow: none; }
    .vip-panel .refined-input { border-color: var(--vip-line); border-radius: 12px; }
    .vip-panel .refined-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); }

    /* Quick links: white bar under the card */
    .vip-quick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border: 1px solid var(--vip-line); border-radius: 16px; background: var(--vip-surface); box-shadow: var(--vip-shadow); }
    .vip-quick strong { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--vip-ink); }
    .vip-quick-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .vip-pill { cursor: pointer; height: 32px; padding: 0 12px; border: 1px solid var(--vip-line); border-radius: 10px; background: var(--vip-surface); color: #334155; font-size: 12px; white-space: nowrap; transition: border-color .15s; }
    .vip-pill:hover { border-color: #cbd5e1; }
    html.dark .vip-pill { color: #cbd5e1; }
    html.dark .vip-pill:hover { border-color: #334155; }

    /* Medium screens */
    @media (min-width: 1024px) and (max-width: 1279px) {
      .vip-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 32px; }
      .vip-title { font-size: 44px; }
      .vip-features { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    }

    /* Narrow screens: single column, compact hero */
    @media (max-width: 1023px) {
      .vip-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
      .vip-hero { padding-top: 0; }
      .vip-lead { margin: 14px 0 22px; }
    }
    @media (max-width: 639px) {
      .vip-title { margin-top: 14px; font-size: 32px; }
      .vip-lead { font-size: 15px; }
      .vip-features { gap: 8px; }
      .vip-features li { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
      .vip-features strong { font-size: 12px; }
      .vip-features small { font-size: 11px; }
      .vip-feature-icon { width: 36px; height: 36px; }
      .vip-step-desc { display: none; }
      .vip-quick { flex-direction: column; align-items: flex-start; padding: 14px; }
      .vip-quick-list { justify-content: flex-start; }
    }

html{overflow-y:scroll;scrollbar-gutter:stable;color-scheme:light}html.dark{color-scheme:dark}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent;background-image:radial-gradient(at 0 0,rgba(244,244,245,.9) 0,transparent 50%),radial-gradient(at 100% 0,rgba(228,228,231,.5) 0,transparent 50%)}html.dark body{background-image:radial-gradient(at 0 0,rgba(24,24,27,.95) 0,transparent 50%),radial-gradient(at 100% 0,rgba(39,39,42,.7) 0,transparent 50%)}*{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button,a,input,select{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}.refined-input{background:#fff;border:1px solid #e4e4e7;outline:none;transition:border-color .15s,box-shadow .15s}.dark .refined-input{background:#0f172a}.refined-btn{cursor:pointer;transition:background-color .15s}.vip-plan-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.vip-plan-link{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border:1px solid #e2e8f0;border-radius:12px;color:#475569;font-size:12px;font-weight:600;text-decoration:none;background:#fff}.vip-plan-link:hover{border-color:#99f6e4;color:#0f766e;background:#f0fdfa}.dark .vip-plan-link{background:#0f172a;border-color:#334155;color:#cbd5e1}.vip-redeem .vip-title{font-size:clamp(32px,3.4vw,48px)}.vip-redeem .vip-title-accent{white-space:normal}.vip-shell-header-nav{display:none}@media(min-width:1280px){.vip-shell-header-nav{display:flex}}#vip-status:empty{display:none}.vip-shell-nav{overflow-x:auto;scrollbar-width:thin}.vip-shell-brand{text-decoration:none;color:inherit}.vip-shell-language{max-width:92px}.vip-shell-card-title{margin:0}.vip-shell-notice{font-size:12px;line-height:1.8;color:#64748b}.dark .vip-shell-notice{color:#94a3b8}.vip-shell-status{font-size:12px;line-height:1.7;color:#0f766e}.dark .vip-shell-status{color:#5eead4}@media(max-width:639px){.vip-redeem .vip-title{font-size:32px}.vip-shell-language{max-width:74px}.vip-shell-nav{padding-bottom:10px}.vip-hero{padding-top:0!important}.vip-shell-plans{margin-top:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(max-width:1279px){#app .vip-shell-header-nav{display:none}}