/* ==========================================================================
   Vibers v0.5 — brand logo, light/dark themes (site + platform), theme and
   radio buttons, build carousel, radio window. Loaded last.
   <html data-theme="light|dark"> is set by theme.js before the first paint.
   ========================================================================== */

/* ---------- Logo (logo-vibers-dark.png on light backgrounds, logo-vibers-white.png on dark) ---------- */
.sf-logo { gap: 0; }
.sf-logo-img { display: block; height: 38px; width: auto; }
.sf-logo-sm .sf-logo-img { height: 26px; }
.sf-logo-lg .sf-logo-img { height: 56px; }
:root[data-theme="dark"] .sf-logo-on-light,
:root:not([data-theme="dark"]) .sf-logo-on-dark { display: none; }
.sf-sidebar .sf-logo-img { height: 40px; }

/* ---------- Theme toggle + radio button (site nav, auth, platform topbar) ---------- */
.sf-theme-btn, .sf-radio-btn {
    width: 40px; height: 40px; flex: 0 0 auto; display: inline-grid; place-items: center; padding: 0;
    border-radius: 12px; border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-ink);
    font-size: 1.05rem; transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.sf-theme-btn:hover, .sf-radio-btn:hover { border-color: #a78bfa; color: var(--sf-violet); transform: translateY(-1px); }
.sf-theme-btn:focus-visible, .sf-radio-btn:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
:root[data-theme="dark"] .sf-when-light, :root:not([data-theme="dark"]) .sf-when-dark { display: none; }
.sf-when-dark { color: #fbbf24; }
.sf-auth-top { gap: .5rem; align-items: center; }

.sf-radio-btn { position: relative; background: var(--sf-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(109, 40, 217, .3); font-size: 1.25rem; }
.sf-radio-btn:hover { color: #fff; box-shadow: var(--sf-shadow-violet); }
.sf-radio-play { margin-left: 2px; }
.sf-eq { display: none; align-items: flex-end; gap: 2px; height: 16px; }
.sf-eq i { width: 3px; background: #fff; border-radius: 2px; animation: sf-eq 1s ease-in-out infinite; }
.sf-eq i:nth-child(2) { animation-delay: .25s; }
.sf-eq i:nth-child(3) { animation-delay: .5s; }
@keyframes sf-eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.sf-radio-btn.is-on .sf-radio-play { display: none; }
.sf-radio-btn.is-on .sf-eq { display: inline-flex; }

/* Theme picker inside the user menu */
.sf-theme-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: .4rem; }
.sf-theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; background: var(--sf-soft); border-radius: 10px; padding: .2rem; }
.sf-theme-seg button { border: 0; background: transparent; border-radius: 8px; padding: .4rem .2rem; font-size: .74rem; font-weight: 600; color: var(--sf-muted); display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.sf-theme-seg button .bi { font-size: .95rem; }
.sf-theme-seg button:hover { color: var(--sf-primary); }
.sf-theme-seg button[aria-pressed="true"] { background: var(--sf-card); color: var(--sf-primary); box-shadow: 0 1px 4px rgba(18, 13, 36, .12); }

/* ---------- About: who are the vibers ---------- */
.sf-vibers-box { display: flex; gap: 1.25rem; align-items: center; background: var(--sf-soft); border-radius: 22px; padding: 1.5rem 1.75rem; }
.sf-vibers-box h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .35rem; }
.sf-vibers-box p { margin: 0; color: var(--sf-body); }

/* ==========================================================================
   Build: grid ↔ carousel
   ========================================================================== */
.sf-view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.sf-view-switch { display: inline-flex; margin-left: auto; background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 12px; padding: .2rem; box-shadow: var(--sf-shadow); }
.sf-view-switch button { border: 0; background: transparent; color: var(--sf-muted); border-radius: 9px; padding: .4rem .75rem; font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: .4rem; }
.sf-view-switch button:hover { color: var(--sf-primary); }
.sf-view-switch button[aria-pressed="true"] { background: var(--sf-soft); color: var(--sf-primary); }
.sf-carousel-dots { display: none; flex-wrap: wrap; gap: .4rem; }
.sf-carousel-dots button { border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-muted); border-radius: 99px; padding: .3rem .8rem .3rem .35rem; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .45rem; transition: all .2s; }
.sf-carousel-dots button .sf-dot-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-soft); color: var(--sf-primary); font-size: .75rem; }
.sf-carousel-dots button.is-active .sf-dot-num { background: #22c55e; color: #fff; }
.sf-carousel-dots button.is-current { border-color: #8b5cf6; color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.sf-carousel-dots button.is-current .sf-dot-num { background: var(--sf-grad); color: #fff; }

.sf-chats { position: relative; }
.sf-chats-track { display: contents; }
.sf-carousel-arrow { display: none; }

.sf-chats.is-carousel { display: block; overflow: hidden; padding: 4px 2px 12px; margin: -4px -2px -12px; }
.is-carousel-view .sf-carousel-dots { display: flex; }
.sf-chats.is-carousel .sf-chats-track { display: flex; gap: 1.25rem; transition: transform .55s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.sf-chats.is-carousel .sf-chat { flex: 0 0 64%; min-width: 0; transition: opacity .4s, transform .4s, filter .4s, border-color .2s, box-shadow .2s; }
.sf-chats.is-carousel .sf-chat.is-peek { opacity: .42; transform: scale(.96); filter: saturate(.7); }
.sf-chats.is-carousel .sf-chat.is-current { opacity: 1; transform: none; }
.sf-chats.is-carousel .sf-carousel-arrow {
    display: inline-flex; align-items: center; gap: .5rem; position: absolute; top: 50%; z-index: 5;
    border: 0; border-radius: 99px; background: var(--sf-grad); color: #fff; font-weight: 700; font-size: .9rem;
    padding: .8rem 1.1rem; box-shadow: var(--sf-shadow-violet); transition: transform .2s, filter .2s;
}
.sf-chats.is-carousel .sf-carousel-arrow:hover { filter: brightness(1.08); }
.sf-chats.is-carousel .sf-carousel-arrow[hidden] { display: none; }
.sf-chats.is-carousel .sf-carousel-arrow.is-next { right: calc(var(--sf-peek, 30%) / 2); transform: translate(50%, -50%); flex-direction: row-reverse; }
.sf-chats.is-carousel .sf-carousel-arrow.is-next:hover { transform: translate(50%, -50%) scale(1.05); }
.sf-chats.is-carousel .sf-carousel-arrow.is-prev { left: .6rem; transform: translateY(-50%); width: 46px; height: 46px; padding: 0; justify-content: center; background: var(--sf-card); color: var(--sf-ink); border: 1px solid var(--sf-border); box-shadow: var(--sf-shadow); }
.sf-chats.is-carousel.is-last .sf-carousel-arrow.is-prev { left: calc(var(--sf-peek, 30%) / 2); transform: translate(-50%, -50%); width: auto; height: auto; padding: .8rem 1.1rem; background: var(--sf-grad); color: #fff; border: 0; }
.sf-chats.is-carousel .sf-carousel-arrow .bi { font-size: 1.1rem; }
@media (max-width: 767.98px) {
    .sf-chats.is-carousel .sf-chat { flex-basis: 84%; }
    .sf-chats.is-carousel .sf-carousel-arrow.is-next span { display: none; }
    .sf-chats.is-carousel .sf-carousel-arrow.is-next { padding: .7rem; }
    .sf-view-switch button span { display: none; }
}

/* ==========================================================================
   Vibers Radio window
   ========================================================================== */
.sf-radio-page { background: radial-gradient(420px 300px at 90% 0%, rgba(124, 58, 237, .28), transparent 70%), var(--sf-bg); min-height: 100vh; }
.sf-radio { max-width: 460px; margin: 0 auto; padding: 1rem 1rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.sf-radio-head { display: flex; align-items: center; gap: .75rem; }
.sf-radio-logo { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; background: #0e0a1c; display: grid; place-items: center; box-shadow: var(--sf-shadow-violet); }
.sf-radio-logo img { width: 26px; height: auto; }
.sf-radio-head > div { flex: 1; }
.sf-radio-head h1 { font-size: 1.15rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: .5rem; }
.sf-radio-head p { margin: 0; font-size: .8rem; color: var(--sf-muted); }
.sf-radio-live { font-size: .62rem; font-weight: 800; letter-spacing: .08em; color: #ef4444; border: 1px solid rgba(239, 68, 68, .4); border-radius: 99px; padding: .05rem .45rem; animation: sf-pulse 1.6s ease-in-out infinite; }
.sf-radio-now { display: flex; align-items: center; gap: .85rem; background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 16px; padding: .75rem .9rem; box-shadow: var(--sf-shadow); }
.sf-radio-now > .min-w-0 { flex: 1; display: flex; flex-direction: column; }
.sf-radio-now small { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sf-violet); }
.sf-radio-now b { color: var(--sf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-radio-now span { font-size: .8rem; color: var(--sf-muted); }
.sf-radio-suno { color: var(--sf-muted); font-size: 1.05rem; }
.sf-radio-suno:hover { color: var(--sf-primary); }
.sf-radio-eq { display: flex; align-items: flex-end; gap: 3px; height: 28px; width: 34px; flex: 0 0 34px; }
.sf-radio-eq i { flex: 1; background: var(--sf-grad); border-radius: 2px; animation: sf-eq 1.1s ease-in-out infinite; }
.sf-radio-eq i:nth-child(2) { animation-delay: .2s; } .sf-radio-eq i:nth-child(3) { animation-delay: .45s; }
.sf-radio-eq i:nth-child(4) { animation-delay: .1s; } .sf-radio-eq i:nth-child(5) { animation-delay: .35s; }
.sf-radio-player { border-radius: 16px; overflow: hidden; border: 1px solid var(--sf-border); background: #000; box-shadow: var(--sf-shadow); }
.sf-radio-player iframe { display: block; width: 100%; height: 240px; border: 0; }
.sf-radio-hint { margin: -.4rem 0 0; font-size: .74rem; color: var(--sf-muted); text-align: center; }
.sf-radio-controls { display: flex; justify-content: center; align-items: center; gap: .75rem; }
.sf-radio-controls button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-ink); display: grid; place-items: center; font-size: 1.1rem; }
.sf-radio-controls button:hover { color: var(--sf-primary); border-color: #a78bfa; }
.sf-radio-controls button.is-on { background: var(--sf-soft); color: var(--sf-primary); border-color: #a78bfa; }
.sf-radio-controls button.is-main { width: 58px; height: 58px; background: var(--sf-grad); color: #fff; border: 0; font-size: 1.35rem; box-shadow: var(--sf-shadow-violet); }
.sf-radio-list { background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 16px; padding: .6rem .75rem; }
.sf-radio-list summary { cursor: pointer; font-weight: 700; color: var(--sf-ink); font-size: .9rem; }
.sf-radio-list ol { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 190px; overflow-y: auto; counter-reset: trk; }
.sf-radio-list li { counter-increment: trk; }
.sf-radio-list button { width: 100%; border: 0; background: transparent; border-radius: 10px; padding: .45rem .55rem; display: flex; align-items: center; gap: .6rem; text-align: left; color: var(--sf-body); font-size: .86rem; }
.sf-radio-list button::before { content: counter(trk, decimal-leading-zero); font-size: .72rem; color: var(--sf-muted); width: 1.4rem; }
.sf-radio-list button span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-radio-list button small { color: var(--sf-muted); font-size: .72rem; }
.sf-radio-list button:hover { background: var(--sf-soft); }
.sf-radio-list button.is-playing { background: var(--sf-soft); color: var(--sf-primary); font-weight: 700; }
.sf-radio-list button.is-playing::before { content: "♪"; color: var(--sf-violet); }
.sf-radio-tip { margin: 0; font-size: .74rem; color: var(--sf-muted); }

/* ==========================================================================
   DARK THEME — tokens first; then surfaces that were hard-coded white.
   ========================================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;
    --sf-ink: #f4f1ff;
    --sf-body: #cfc9e6;
    --sf-muted: #9a94b8;
    --sf-bg: #0b0816;
    --sf-card: #151123;
    --sf-card-2: #1b1630;
    --sf-border: #2a2342;
    --sf-soft: #231b41;
    --sf-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .28);
    --bs-link-color: #b794ff;
    --bs-link-color-rgb: 183, 148, 255;
    --bs-link-hover-color: #d4bfff;
    --bs-secondary-color: #a8a2c4;
    --bs-emphasis-color: #fff;
    --bs-tertiary-bg: #1b1630;
}
:root[data-theme="dark"] body { background: var(--sf-bg); }
:root[data-theme="dark"] .sf-app, :root[data-theme="dark"] .sf-minimal { background: var(--sf-bg); }

/* Surfaces */
:root[data-theme="dark"] :is(.sf-sidebar, .sf-topbar, .sf-credit-card, .sf-stat, .sf-project-card, .sf-empty, .sf-seg,
  .sf-stepper, .sf-plan, .sf-pack, .sf-chat, .sf-progress-card, .sf-kind-card, .sf-radio-card span, .sf-dns, .sf-faq-group,
  .sf-post-card, .sf-module-card, .sf-explore-search, .sf-explore-card, .sf-toast, .sf-legal-card, .sf-dropdown, .sf-back,
  .sf-icon-btn, .sf-lang, .sf-auth, .sf-band, .sf-feature, .sf-module, .sf-browser-light, .sf-skip) {
    background: var(--sf-card); border-color: var(--sf-border);
}
:root[data-theme="dark"] .sf-sidebar { background: #100c1c; }
:root[data-theme="dark"] .sf-topbar { background: rgba(16, 12, 28, .88); }
:root[data-theme="dark"] .sf-stepper-flat { background: transparent; }
:root[data-theme="dark"] .sf-stepper-num, :root[data-theme="dark"] .sf-stepper-flat .sf-stepper-num { background: var(--sf-card-2); border-color: var(--sf-border); color: var(--sf-muted); }
:root[data-theme="dark"] .sf-stepper-flat .is-done .sf-stepper-num, :root[data-theme="dark"] .sf-stepper-flat .is-current .sf-stepper-num,
:root[data-theme="dark"] .is-done .sf-stepper-num, :root[data-theme="dark"] .is-current .sf-stepper-num { background: var(--sf-grad); color: #fff; border-color: transparent; }
:root[data-theme="dark"] .sf-nav-link .bi { color: var(--sf-muted); }
:root[data-theme="dark"] .sf-nav-link:hover { background: #1c1633; color: #d4bfff; }
:root[data-theme="dark"] .sf-nav-link.active { background: var(--sf-soft); color: #d4bfff; }
:root[data-theme="dark"] .sf-nav-link.active .bi, :root[data-theme="dark"] .sf-nav-link:hover .bi { color: #b794ff; }
:root[data-theme="dark"] .sf-user:hover { background: var(--sf-card-2); }
:root[data-theme="dark"] .sf-search input { background: var(--sf-card); border-color: var(--sf-border); color: var(--sf-ink); }
:root[data-theme="dark"] .sf-progress { background: #2a2342; }
:root[data-theme="dark"] :is(.btn-sf-outline, .sf-btn-soft, .sf-btn-google, .sf-chip-btn) { background: var(--sf-card-2); border-color: var(--sf-border); color: var(--sf-ink); }
:root[data-theme="dark"] :is(.btn-sf-outline, .sf-btn-soft, .sf-chip-btn):hover { background: var(--sf-soft); border-color: #6d4fc4; color: #d4bfff; }
:root[data-theme="dark"] .sf-btn-soft { color: #c4b5fd; }
:root[data-theme="dark"] .sf-plan.is-current { background: linear-gradient(180deg, #1f1838, var(--sf-card)); }
:root[data-theme="dark"] .sf-plan-credits, :root[data-theme="dark"] .sf-pack-price, :root[data-theme="dark"] .sf-stat-box b { color: #c4b5fd; }
:root[data-theme="dark"] .sf-alert-info { background: var(--sf-soft); border-color: #3b2d6b; color: #ddd0ff; }
:root[data-theme="dark"] .sf-preview-empty { background: repeating-linear-gradient(135deg, #151123 0 12px, #191429 12px 24px); }
:root[data-theme="dark"] .sf-check, :root[data-theme="dark"] .sf-pstep-icon { border-color: #4a4268; }
:root[data-theme="dark"] .sf-empty { border-color: #3a3160; }
:root[data-theme="dark"] .sf-domain { background: var(--sf-card-2); }
:root[data-theme="dark"] .sf-drop { background: var(--sf-card-2); border-color: #3a3160; }
:root[data-theme="dark"] .sf-help-search input { background: var(--sf-card); color: var(--sf-ink); }
:root[data-theme="dark"] .sf-explore-cover { background: linear-gradient(135deg, #1f1838, #16203a); }
:root[data-theme="dark"] .sf-explore-search input, :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { color: var(--sf-ink); }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: #110d1f; border-color: var(--sf-border); }
:root[data-theme="dark"] .form-control::placeholder { color: #6f6990; }
:root[data-theme="dark"] .input-group-text { background: var(--sf-soft); border-color: var(--sf-border); color: #c4b5fd; }
:root[data-theme="dark"] .sf-lang-btn.active { background: var(--sf-soft); color: #d4bfff; }
:root[data-theme="dark"] .sf-dropdown .dropdown-item { color: var(--sf-body); }
:root[data-theme="dark"] .sf-dropdown .dropdown-item:hover { background: var(--sf-soft); color: #fff; }
:root[data-theme="dark"] .sf-theme-seg button[aria-pressed="true"] { box-shadow: 0 1px 4px rgba(0, 0, 0, .5); color: #d4bfff; }

/* Soft tones & badges → translucent on dark */
:root[data-theme="dark"] .sf-tone-violet { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
:root[data-theme="dark"] .sf-tone-blue { background: rgba(59, 130, 246, .16); color: #93c5fd; }
:root[data-theme="dark"] .sf-tone-sky { background: rgba(14, 165, 233, .16); color: #7dd3fc; }
:root[data-theme="dark"] .sf-tone-orange { background: rgba(249, 115, 22, .16); color: #fdba74; }
:root[data-theme="dark"] .sf-tone-pink { background: rgba(244, 63, 94, .16); color: #fda4af; }
:root[data-theme="dark"] .sf-tone-green { background: rgba(34, 197, 94, .16); color: #86efac; }
:root[data-theme="dark"] .sf-badge-success { background: rgba(34, 197, 94, .15); color: #86efac; }
:root[data-theme="dark"] .sf-badge-info { background: rgba(59, 130, 246, .15); color: #93c5fd; }
:root[data-theme="dark"] .sf-badge-danger { background: rgba(239, 68, 68, .15); color: #fca5a5; }
:root[data-theme="dark"] .sf-badge-neutral { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
:root[data-theme="dark"] .sf-provider-tile.sf-provider-gemini, :root[data-theme="dark"] .sf-provider-gemini .sf-chat-avatar,
:root[data-theme="dark"] [data-panel="strategy"] .sf-msg-avatar { background: rgba(59, 130, 246, .18); color: #93c5fd; }
:root[data-theme="dark"] .sf-provider-tile.sf-provider-openai, :root[data-theme="dark"] .sf-provider-openai .sf-chat-avatar,
:root[data-theme="dark"] [data-panel="design"] .sf-msg-avatar { background: #f4f1ff; color: #111; }
:root[data-theme="dark"] .sf-provider-tile.sf-provider-anthropic, :root[data-theme="dark"] .sf-provider-anthropic .sf-chat-avatar,
:root[data-theme="dark"] [data-panel="code"] .sf-msg-avatar { background: rgba(249, 115, 22, .18); color: #fdba74; }

/* Chats */
:root[data-theme="dark"] .sf-chat.is-active { border-color: #6d4fc4; box-shadow: 0 18px 40px rgba(0, 0, 0, .4), 0 0 0 1px rgba(139, 92, 246, .25); }
:root[data-theme="dark"] .sf-chat-body { background: linear-gradient(180deg, #120e20, var(--sf-card) 120px); }
:root[data-theme="dark"] .sf-msg-bubble { background: #221c38; }
:root[data-theme="dark"] .sf-msg-system { background: #1d1731; }
:root[data-theme="dark"] .sf-msg-image { background: #0f0c1a; border-color: var(--sf-border); }
:root[data-theme="dark"] .sf-typing { background: #2a2050; }
:root[data-theme="dark"] .sf-chat-input textarea { background: #110d1f; border-color: var(--sf-border); color: var(--sf-ink); }
:root[data-theme="dark"] .sf-chat-input textarea:disabled { background: #0f0c1a; }
:root[data-theme="dark"] .sf-chat-send:disabled { background: #231d38; color: #5f5880; }
:root[data-theme="dark"] .sf-browser-light .sf-browser-bar { background: #1d1731; }
:root[data-theme="dark"] .sf-browser-light .sf-browser-url { background: #110d1f; }
:root[data-theme="dark"] .sf-pstep.is-done .sf-pstep-icon { box-shadow: inset 0 0 0 2px var(--sf-card); }

/* Public site in dark: the white bands become dark cards */
:root[data-theme="dark"] .sf-band { color: var(--sf-body); }
:root[data-theme="dark"] .sf-public { background: var(--sf-night); }

/* ==========================================================================
   LIGHT THEME — the public site was designed on a dark background:
   give its "night" sections a light version.
   ========================================================================== */
:root[data-theme="light"] .sf-public { background: var(--sf-bg); color: var(--sf-body); }
:root[data-theme="light"] .sf-public-nav { background: rgba(255, 255, 255, .82); border-bottom-color: var(--sf-border); }
:root[data-theme="light"] .sf-public-nav nav a, :root[data-theme="light"] .sf-public-link { color: var(--sf-body); }
:root[data-theme="light"] .sf-public-nav nav a:hover, :root[data-theme="light"] .sf-public-link:hover { color: var(--sf-primary); }
:root[data-theme="light"] .sf-hero { background: radial-gradient(900px 520px at 80% 30%, rgba(124, 58, 237, .16), transparent 62%), radial-gradient(700px 420px at 0% 100%, rgba(91, 33, 182, .1), transparent 60%); }
:root[data-theme="light"] .sf-page-hero { background: radial-gradient(800px 420px at 85% 20%, rgba(124, 58, 237, .16), transparent 62%), #f1ecfd; }
:root[data-theme="light"] :is(.sf-hero, .sf-page-hero, .sf-cta) .sf-eyebrow { color: var(--sf-violet); }
:root[data-theme="light"] .sf-hero-title, :root[data-theme="light"] .sf-title-night { color: var(--sf-ink); }
:root[data-theme="light"] .sf-hero-lead, :root[data-theme="light"] .sf-muted-light { color: var(--sf-body); }
:root[data-theme="light"] .sf-hero-points li { color: var(--sf-body); }
:root[data-theme="light"] .sf-hero-points .bi { color: var(--sf-violet); }
:root[data-theme="light"] .btn-sf-ghost { border-color: var(--sf-border); color: var(--sf-ink); background: #fff; }
:root[data-theme="light"] .btn-sf-ghost:hover { border-color: #c4b5fd; color: var(--sf-primary); background: #fff; }
:root[data-theme="light"] .sf-how { background: radial-gradient(700px 360px at 90% 50%, rgba(124, 58, 237, .12), transparent 60%), #efeafc; }
:root[data-theme="light"] .sf-step { background: #fff; border-color: var(--sf-border); box-shadow: var(--sf-shadow); }
:root[data-theme="light"] .sf-step h3 { color: var(--sf-ink); }
:root[data-theme="light"] .sf-step p { color: var(--sf-muted); }
:root[data-theme="light"] .sf-step-num { color: #fff; }
:root[data-theme="light"] .sf-step-icon { color: var(--sf-violet); }
:root[data-theme="light"] .sf-cta { background: radial-gradient(600px 300px at 85% 50%, rgba(124, 58, 237, .14), transparent 65%), #f1ecfd; }
:root[data-theme="light"] .sf-cta-checks { color: var(--sf-body); }
:root[data-theme="light"] .sf-footer { border-top-color: var(--sf-border); color: var(--sf-muted); background: #fff; }
:root[data-theme="light"] .sf-footer a { color: var(--sf-body); }
:root[data-theme="light"] .sf-footer a:hover { color: var(--sf-primary); }
:root[data-theme="light"] .sf-footer-tag { color: var(--sf-muted); }
:root[data-theme="light"] .sf-help-search input { box-shadow: var(--sf-shadow); border: 1px solid var(--sf-border); }
:root[data-theme="light"] .sf-lang-site { background: #fff; }
:root[data-theme="light"] .sf-legal { background: transparent; }

/* Brand inside the product mocks */
.sf-mock-logo { height: 18px; width: auto; }
.sf-phone-logo { height: 24px; width: auto; }
.sf-public-nav nav a { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1299.98px) { .sf-public-nav nav { gap: 1.1rem !important; font-size: .92rem; } }
.sf-radio-eq i { height: 45%; }
.sf-radio-eq i:nth-child(2n) { height: 80%; }
.sf-eq i { height: 8px; }

/* Radio stations */
.sf-radio-stations { display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-radio-stations button { border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-muted); border-radius: 99px; padding: .3rem .7rem; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.sf-radio-stations button:hover { color: var(--sf-primary); border-color: #a78bfa; }
.sf-radio-stations button[aria-pressed="true"] { background: var(--sf-grad); color: #fff; border-color: transparent; }
.sf-radio-list li[hidden] { display: none; }

/* Language: just the icon, the languages in a dropdown */
.sf-lang.dropdown { display: inline-flex; padding: 0; border: 0; background: transparent; }
.sf-lang-toggle { width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; border: 1px solid var(--sf-border, rgba(124, 58, 237, .18)); background: var(--sf-card, transparent); color: inherit; font-size: 1.05rem; }
.sf-lang-toggle:hover, .sf-lang-toggle[aria-expanded="true"] { border-color: #7c3aed; color: #7c3aed; }
.sf-lang-site .sf-lang-toggle { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.sf-lang-menu { min-width: 170px; }
.sf-lang-menu .dropdown-item.active { background: #7c3aed; color: #fff; }

/* Language button: same size and look as the theme / radio buttons next to it */
.sf-lang-toggle { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-ink); font-size: 1.05rem; transition: border-color .15s, color .15s, transform .15s; }
.sf-lang-toggle:hover, .sf-lang-toggle[aria-expanded="true"] { border-color: #a78bfa; color: var(--sf-violet, #7c3aed); transform: translateY(-1px); }
.sf-lang-site .sf-lang-toggle { background: var(--sf-card); border-color: var(--sf-border); }
.sf-lang.dropdown .bi { color: inherit; margin: 0; font-size: 1.05rem; }
@media (max-width: 767.98px) { .sf-public-nav .sf-lang-toggle { width: 38px; height: 38px; } }

/* Login and forms: a white field, also when the browser fills it in (Chrome paints autofill grey/blue) */
:root:not([data-theme="dark"]) .sf-auth .form-control, :root:not([data-theme="dark"]) .sf-input-icon .form-control { background-color: #fff; }
:root:not([data-theme="dark"]) input.form-control:-webkit-autofill,
:root:not([data-theme="dark"]) input.form-control:-webkit-autofill:hover,
:root:not([data-theme="dark"]) input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: #1f1b33; caret-color: #1f1b33;
    transition: background-color 9999s ease-in-out 0s;
}

/* v0.73 the radio inside the office's modal: it uses the modal's whole width */
.sf-radio-embed .sf-radio { max-width: none; padding: 1rem 1.5rem 1.5rem; }
.sf-radio-embed .sf-radio-player iframe { height: 300px; }