/* ============================================================
   Downl.one — Design System
   v1.0.0 — Dark & Light mode
   ============================================================ */

/* Self-hosted fonts — Creato Display (headings) + Gontserrat (body)
   These are static files loaded straight by the browser, not routed through
   PHP, so they can't carry the app's real ?v=<version> like asset() does.
   The ?v=1 below is a manual cache-buster — bump it only when one of these
   font files itself is replaced, not on every app release. */
@font-face { font-family:'Gontserrat'; src:url('/assets/fonts/Gontserrat-Regular.ttf?v=1') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gontserrat'; src:url('/assets/fonts/Gontserrat-Italic.ttf?v=1') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Gontserrat'; src:url('/assets/fonts/Gontserrat-Medium.ttf?v=1') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gontserrat'; src:url('/assets/fonts/Gontserrat-SemiBold.ttf?v=1') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Gontserrat'; src:url('/assets/fonts/Gontserrat-Bold.ttf?v=1') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gontserrat'; src:url('/assets/fonts/Gontserrat-ExtraBold.ttf?v=1') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Creato Display'; src:url('/assets/fonts/CreatoDisplay-Bold.otf?v=1') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Creato Display'; src:url('/assets/fonts/CreatoDisplay-Black.otf?v=1') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/JetBrainsMono-Regular.ttf?v=1') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/JetBrainsMono-Medium.ttf?v=1') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }

:root {
    --font-sans: 'Gontserrat', system-ui, -apple-system, sans-serif;
    --font-display: 'Creato Display', 'Gontserrat', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --green:        #28B428;
    --green-bright: #4DD94D;
    --green-dim:    #63A18F;
    --green-rgb:    40, 180, 40;
    --radius-sm:    6px;
    --radius-md:    12px;
    --radius-lg:    18px;
    --radius-xl:    26px;
    --ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --dur:          160ms;
    --max-w:        1200px;
}

/* ── Dark theme ──────────────────────────── */
[data-theme="dark"] {
    --bg:            #070F07;
    --bg-surface:    #0C160C;
    --bg-card:       #101A10;
    --bg-elevated:   #152015;
    --bg-hover:      #192519;
    --border:        rgba(40,180,40,0.09);
    --border-mid:    rgba(40,180,40,0.18);
    --border-strong: rgba(40,180,40,0.34);
    --text:          #E2F2E2;
    --text-muted:    #6A946A;
    --text-hint:     #3E5E3E;
    --shadow:        0 1px 3px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
    --hero-glow:     radial-gradient(ellipse 70% 50% at 50% 0%, rgba(40,180,40,0.07), transparent);
    --input-bg:      #0C160C;
    --btn-text:      #071207;
    --badge-bg:      rgba(40,180,40,0.12);
    --badge-border:  rgba(40,180,40,0.22);
}

/* ── Light theme ─────────────────────────── */
[data-theme="light"] {
    --bg:            #F4FBF4;
    --bg-surface:    #FFFFFF;
    --bg-card:       #FFFFFF;
    --bg-elevated:   #EDF7ED;
    --bg-hover:      #E6F5E6;
    --border:        rgba(40,180,40,0.12);
    --border-mid:    rgba(40,180,40,0.25);
    --border-strong: rgba(40,180,40,0.45);
    --text:          #0F2A0F;
    --text-muted:    #3A6B3A;
    --text-hint:     #7AAA7A;
    --shadow:        0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    --hero-glow:     radial-gradient(ellipse 70% 50% at 50% 0%, rgba(40,180,40,0.06), transparent);
    --input-bg:      #FFFFFF;
    --btn-text:      #FFFFFF;
    --badge-bg:      rgba(40,180,40,0.10);
    --badge-border:  rgba(40,180,40,0.20);
}

/* ── Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1, h2, h3, h4, h5, h6, .logo { font-family: var(--font-display); }
a { color: var(--green); text-decoration: none; }
a:hover { opacity: .85; }

/* ── Header ──────────────────────────────── */
.header {
    position: sticky; top: 0; z-index: 100;
    height: 58px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background var(--dur);
}

.header-inner {
    display: flex; align-items: center; gap: 1rem;
    height: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.logo {
    display: flex; align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.header-nav { display: flex; align-items: center; justify-content: center; gap: .4rem; flex: 1; min-width: 0; }

.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.header-link {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: var(--text-muted);
    padding: .3rem .7rem; border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.header-link:hover { color: var(--text); border-color: var(--border-mid); background: var(--bg-elevated); }
.nav-icon-blue  { color: #60A5FA; }
.nav-icon-teal  { color: #2DD4BF; }
.nav-icon-amber { color: #FCD34D; }
.nav-icon-rose  { color: #FB7185; }
.nav-icon-indigo { color: #818CF8; }
.nav-icon-sky   { color: #38BDF8; }
.nav-icon-slate { color: #94A3B8; }

.stuxs-icon-sm { height: 16px; width: 16px; vertical-align: -3px; }

/* Theme toggle */
.theme-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer; font-size: 1rem;
    color: var(--text-muted);
    transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.theme-btn:hover { background: var(--bg-hover); border-color: var(--border-mid); color: var(--text); }

/* ── Hero ────────────────────────────────── */
.hero {
    position: relative;
    padding: 5rem 1.5rem 4rem;
    text-align: center;
    overflow: hidden;
    background: var(--hero-glow), var(--bg);
}

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .9rem;
    background: var(--badge-bg);
    border: 1px solid var(--badge-border);
    border-radius: 999px;
    font-size: .78rem; font-weight: 600; color: var(--green);
    margin-bottom: 1.75rem;
}
.eyebrow-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.hero-title {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.035em;
    margin-bottom: 1.1rem;
}
.hero-green { color: var(--green); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-green {
        background: linear-gradient(90deg, var(--green) 0%, var(--green-bright) 50%, var(--green) 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: hero-gradient-shift 6s linear infinite;
    }
}
@keyframes hero-gradient-shift { to { background-position: -200% center; } }
@media (prefers-reduced-motion: reduce) {
    .hero-green { animation: none; }
}

.hero-sub {
    font-size: 1.05rem; color: var(--text-muted);
    max-width: 520px; margin: 0 auto 2.5rem;
    line-height: 1.75;
}

/* ── URL Input ───────────────────────────── */
.input-wrap { max-width: 700px; margin: 0 auto; position: relative; }

.input-box {
    display: flex; align-items: center; gap: .75rem;
    background: var(--input-bg);
    border: 1.5px solid var(--border-mid);
    border-radius: var(--radius-xl);
    padding: .55rem .55rem .55rem 1.25rem;
    transition: border-color var(--dur), box-shadow var(--dur);
    box-shadow: var(--shadow);
}
.input-box:focus-within {
    border-color: var(--green);
    box-shadow: var(--shadow);
}

.url-input {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    font-size: 1rem; font-family: var(--font-sans);
    color: var(--text);
}
.url-input:focus-visible { outline: none; }
.url-input::placeholder { color: var(--text-hint); }

.dl-btn {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem 1.5rem;
    background: var(--green);
    color: #fff;
    font-weight: 700; font-size: .9rem;
    border: none; border-radius: calc(var(--radius-xl) - 6px);
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: background var(--dur), transform 80ms;
}
.dl-btn:hover   { background: var(--green-bright); }
.dl-btn:active  { transform: scale(.97); }
.dl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

[data-theme="light"] .dl-btn { color: #fff; }

.paste-hint {
    margin-top: .7rem; font-size: .75rem; color: var(--text-hint);
    display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.paste-hint kbd {
    padding: .1rem .4rem; background: var(--bg-elevated); border: 1px solid var(--border-mid);
    border-radius: 4px; font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted);
}
.hero-consent { font-size: .75rem; color: var(--text-hint); text-align: center; margin: .6rem 0 0; }
.hero-consent a { color: var(--text-hint); text-decoration: underline; }
.turnstile-wrap { display: flex; justify-content: center; margin-top: .85rem; }

/* ── Error ───────────────────────────────── */
.error-box {
    max-width: 700px; margin: 2rem auto 0; /* clear of the agreement line above */
    padding: .875rem 1.1rem;
    background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22);
    border-radius: var(--radius-md); font-size: .875rem; color: #E57373;
}
[data-theme="light"] .error-box { color: #C62828; background: rgba(239,68,68,.06); }

/* ── Env banners — dev mode / admin override, above the header ────── */
/* Site banners (dev mode / admin override) come from site-banner.css; map its theme hooks to
   ours, and move everything pinned to the top down by the banners' height. */
.site-banners { --banner-page-bg: var(--bg); --banner-text: var(--text); --banner-site: #4DD94D; --banner-site-light: #1E7A1E; }
.header { top: var(--banner-h, 0px); }
.mobile-nav { top: var(--banner-h, 0px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Result card ─────────────────────────── */
.result-wrap { max-width: 1040px; margin: 2.5rem auto 0; } /* clear of the agreement line above */

.result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.result-thumb-row {
    position: relative; aspect-ratio: 16 / 9;
    background: #000; overflow: hidden;
}
/* contain: the whole thumbnail shows, portrait (TikTok, Shorts) included */
.result-thumb { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Single result: thumbnail + title on the left, formats on the right */
.result-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); text-align: left; }
/* The column stretches to the card's full height so its divider runs top to bottom;
   only the thumbnail + title inside it follow the page down a long format list */
.result-split .result-media { border-right: 1px solid var(--border); min-width: 0; }
.result-split .result-media-inner { position: sticky; top: 0; }
.result-split .result-info { border-bottom: none; }
.result-split .result-formats { min-width: 0; }
/* Two columns on desktop and tablet; one on phones (the site's 640px breakpoint) */
@media (max-width: 640px) {
    .result-split { grid-template-columns: 1fr; }
    .result-split .result-media { border-right: none; border-bottom: 1px solid var(--border); }
    .result-split .result-media-inner { position: static; }
    .result-split .result-info { text-align: center; } /* stacked: title and channel centred under the thumbnail */
}
.thumb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.85));
}
[data-theme="light"] .thumb-overlay {
    background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.6));
}
.thumb-meta {
    position: absolute; bottom: .875rem; left: 1rem; right: 1rem;
    display: flex; align-items: center; gap: .6rem;
}
.platform-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .7rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    background: rgba(40,180,40,.2); color: var(--green-bright);
    border: 1px solid rgba(40,180,40,.35);
}
[data-theme="light"] .platform-badge {
    background: rgba(40,180,40,.15); color: #1A7A1A;
    border-color: rgba(40,180,40,.3);
}
.result-duration { font-size: .78rem; color: rgba(255,255,255,.75); margin-left: auto; font-family: var(--font-mono); }
[data-theme="light"] .result-duration { color: rgba(255,255,255,.9); }

.result-info {
    padding: 1rem 1.1rem .875rem;
    border-bottom: 1px solid var(--border);
}
.result-title  { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: .2rem; }
.result-author { font-size: .8rem; color: var(--text-muted); }

.streams-heading {
    padding: .6rem 1.1rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-hint); border-bottom: 1px solid var(--border);
}

.stream-row {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--dur);
    flex-wrap: wrap;
}
.stream-row:last-child { border-bottom: none; }
.stream-row:hover { background: var(--bg-elevated); }

.stream-left { display: flex; align-items: center; gap: .75rem; text-align: left; }

.stream-type {
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: .22rem .6rem; border-radius: 4px; flex-shrink: 0; min-width: 10.4em; text-align: center; /* one width for every type, so the resolutions line up */
}
.stream-type.muxed { background: rgba(40,180,40,.12);   color: #4BDD3A; border: 1px solid rgba(40,180,40,.25); }
.stream-type.video { background: rgba(59,130,246,.12);  color: #60A5FA; border: 1px solid rgba(59,130,246,.25); }
.stream-type.audio { background: rgba(245,158,11,.12);  color: #FBB040; border: 1px solid rgba(245,158,11,.25); }
[data-theme="light"] .stream-type.muxed { color: #1A7A1A; }
[data-theme="light"] .stream-type.video { color: #1E56C4; }
[data-theme="light"] .stream-type.audio { color: #B45309; }

.stream-quality { font-size: .88rem; font-weight: 600; color: var(--text); }
.stream-meta    { font-size: .73rem; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.stream-size    { white-space: nowrap; } /* "5.6 MB", never "5.6 / MB" */
.ext-badge {
    font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .05rem .38rem; border-radius: 4px; line-height: 1.4;
    color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border-mid);
}

/* "Need this in a different format?" note across the bottom of the results card */
.result-convert {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.1rem; border-top: 1px solid var(--border);
    font-size: .8rem; color: var(--text-muted); text-align: center;
    background: rgba(107,0,162,.05);
}
.result-convert a { color: #A855F7; font-weight: 700; text-decoration: none; }
.result-convert a:hover { text-decoration: underline; }
[data-theme="light"] .result-convert a { color: #6B00A2; }
.result-convert .stuxs-icon-sm { flex-shrink: 0; }

.save-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1.05rem;
    background: var(--badge-bg);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    color: var(--green); font-size: .82rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background var(--dur), border-color var(--dur);
}
.save-btn:hover { background: rgba(var(--green-rgb), .2); border-color: var(--border-strong); opacity: 1; }

/* ── Platforms ───────────────────────────── */
.section {
    padding: 4rem 1.5rem;
    max-width: 860px; margin: 0 auto;
}
.section-alt {
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-width: 100%;
    padding: 3.5rem 0;
}
.section-alt .section-inner { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; }

.section-eyebrow {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--text-hint); margin-bottom: 1.25rem; text-align: center;
}

.platforms-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem;
}
.platform-chip {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .9rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur), background var(--dur);
    cursor: default;
}
.platform-chip:hover { border-color: var(--border-mid); background: var(--bg-elevated); }
.chip-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1; }
.chip-name { font-size: .82rem; font-weight: 500; color: var(--text-muted); }

/* ── Features ────────────────────────────── */
.features-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem;
}
.feature-card {
    padding: 1.25rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur);
}
.feature-card:hover { border-color: var(--border-mid); }
.feature-card .fi { font-size: 1.5rem; margin-bottom: .6rem; }
.feature-card strong { font-size: .92rem; font-weight: 700; display: block; margin-bottom: .3rem; color: var(--text); }
.feature-card p { font-size: .8rem; color: var(--text-muted); line-height: 1.65; }

/* ── Legal hub grid — independent of the feature-card system ─── */
.legal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 768px) { .legal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .legal-grid { grid-template-columns: 1fr; } }
.legal-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--dur);
}
.legal-card:hover { border-color: var(--border-mid); }
.legal-card-text { min-width: 0; }
.legal-card-name { font-size: .92rem; font-weight: 700; margin-bottom: .3rem; color: var(--text); }
.legal-card-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.65; }
.legal-card-icon { font-size: 1.5rem; flex-shrink: 0; }
.fi-blue   { color: #60A5FA; }
.fi-violet { color: #A78BFA; }
.fi-amber  { color: #FCD34D; }
.fi-teal   { color: #2DD4BF; }
.fi-sky    { color: #38BDF8; }
.fi-green  { color: var(--green-bright); }

/* ── Stuxs.Tools feature card ────────────────────────────── */
.stuxs-feature-card {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(107,0,162,.07) 0%, rgba(107,0,162,.02) 100%);
    border: 1px solid rgba(107,0,162,.22);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color var(--dur), box-shadow var(--dur);
    flex-wrap: wrap;
    margin-bottom: 5rem;
}
.stuxs-feature-card:hover { border-color: rgba(107,0,162,.4); box-shadow: 0 4px 24px rgba(107,0,162,.10); }
.stuxs-feature-icon { flex-shrink: 0; }
.stuxs-feature-body { flex: 1; min-width: 200px; }
.stuxs-feature-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6B00A2; margin-bottom: .3rem; }
.stuxs-feature-title { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; }
.stuxs-feature-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.6; }
.stuxs-feature-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.25rem;
    background: #6B00A2; color: #fff;
    font-weight: 700; font-size: .875rem;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: background var(--dur);
}
.stuxs-feature-cta:hover { background: #500079; }
.stuxs-feature-cta img { filter: brightness(0) invert(1); }

/* ── Footer ──────────────────────────────── */
.footer {
    border-top: 1px solid var(--border);
    padding: 1.75rem 1.5rem;
    max-width: 860px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.footer-copy { font-size: .78rem; color: var(--text-hint); }
.footer-copy-links { display: block; margin-top: .3rem; }
.footer-stuxs {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .85rem;
    background: rgba(107,0,162,.05); border: 1px solid rgba(107,0,162,.15);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.footer-nav .footer-stuxs { color: #6B00A2; }
.footer-nav .footer-stuxs:hover { border-color: rgba(107,0,162,.3); background: rgba(107,0,162,.1); color: #6B00A2; }
.footer-stuxs .stuxs-accent { font-weight: 700; }

.footer-powered {
    max-width: 860px; margin: 0 auto;
    padding: 0 1.5rem 1.5rem;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem;
    font-size: .76rem; color: var(--text-muted);
}
/* "Stux.Dev | A Stux.Dev Service | Powered by Stuxedo": muted until hovered or focused. Logo and
   badge are grey and dimmed at rest (still >= 3:1); the text sits in the muted colour. */
.footer-powered-item { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); text-decoration: none; transition: color .2s; }
.footer-powered-item:hover, .footer-powered-item:focus-visible { color: var(--text); }
.footer-powered-logo, .footer-powered-badge { height: 28px; width: auto; display: block; }
/* Same filter functions in every state, so the hover animates without the image snapping. */
.footer-powered-logo, .footer-powered-badge { filter: grayscale(1) brightness(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; will-change: filter, opacity; backface-visibility: hidden; transform: translateZ(0); }
[data-theme="light"] .footer-powered-logo, [data-theme="light"] .footer-powered-badge { filter: grayscale(1) brightness(.6); }
.footer-powered-item:hover .footer-powered-logo, .footer-powered-item:focus-visible .footer-powered-logo,
.footer-powered-item:hover .footer-powered-badge, .footer-powered-item:focus-visible .footer-powered-badge { filter: grayscale(0) brightness(1); opacity: 1; }
.footer-powered-sep { color: var(--border-mid); }
/* "Created with love / code / coffee by Stux.Dev" */
.footer-created { max-width: 860px; margin: 0 auto; padding: 0 1.5rem 1.75rem; text-align: center; font-size: .76rem; color: var(--text-muted); }
.footer-created a { color: var(--text-muted); text-decoration: none; transition: color .2s; }
.footer-created a:hover, .footer-created a:focus-visible { color: var(--text); }
.footer-created-love { color: #e5484d; }
.footer-created-code { color: #30a46c; }
.footer-created-coffee { color: #a0703f; }
/* Created-with icons: optical sizing so the heart is not bigger than code and coffee */
.footer-created .fa-heart { font-size: .85em; }
.footer-created .fa-code { font-size: 1em; }
.footer-created .fa-mug-hot { font-size: .95em; }
@media (prefers-reduced-motion: reduce) { .footer-powered-item, .footer-powered-logo, .footer-powered-badge, .footer-created a { transition: none; } }

/* ── Spinner ──────────────────────────────── */
.spin:not([hidden]) { display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scrollbar ───────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 640px) {
    .hero { padding: 3rem 1rem 2.5rem; }
    .hero-title { font-size: 1.9rem; }
    .input-box { flex-direction: column; align-items: stretch; gap: .6rem; }
    .url-input { width: 100%; padding: .3rem .2rem; }
    .dl-btn { width: 100%; justify-content: center; padding: .8rem 1.25rem; font-size: .95rem; }
    .header-inner { padding: 0 1rem; }
}

/* ── Platform chips with notes ───────────────────────────── */
.platforms-intro {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.parity-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .8rem;
    background: var(--badge-bg);
    border: 1px solid var(--badge-border);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--green);
}
.parity-note {
    font-size: .78rem;
    color: var(--text-muted);
}
.platform-chip {
    align-items: flex-start;
}
.chip-note {
    font-size: .7rem;
    color: var(--text-hint);
    line-height: 1.4;
    margin-top: 1px;
}
[data-theme="light"] .chip-note {
    color: var(--text-muted);
}

/* ── Footer nav ───────────────────────────── */
.footer-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.footer-nav a {
    font-size: .8rem;
    color: var(--text-muted);
    transition: color var(--dur);
}
.footer-nav a:hover { color: var(--text); }

/* ── Active nav link ─────────────────────── */
.header-link.active {
    color: var(--text);
    background: var(--bg-elevated);
    border-color: var(--border-mid);
}

/* ── Prose pages (privacy / terms) ──────── */
.prose-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}
.prose-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}
.prose-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--green);
    margin-bottom: .75rem;
}
.prose-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin-bottom: .75rem;
}
.prose-lead {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: .75rem;
}
.prose-meta {
    font-size: .78rem;
    color: var(--text-hint);
}
.prose-body h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 2rem 0 .6rem;
    color: var(--text);
}
.prose-body p {
    font-size: .925rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: .9rem;
}
.prose-body ul,
.prose-body ol {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}
.prose-body li {
    font-size: .925rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: .3rem;
}
.prose-body strong { color: var(--text); font-weight: 600; }
.prose-body a { color: var(--green); }
.prose-body a:hover { opacity: .8; }

/* Info card (used on privacy page) */
.info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 1rem 0 1.5rem;
}
.info-card-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    padding: .875rem 1.1rem;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}
.info-card-row.last { border-bottom: none; }
.info-card-label { font-weight: 600; color: var(--text); align-self: start; padding-top: .05rem; }
.info-card-value { color: var(--text-muted); line-height: 1.65; }
@media(max-width: 540px) {
    .info-card-row { grid-template-columns: 1fr; gap: .3rem; }
}

/* Ethics callout (used on terms page) */
.ethics-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(40,180,40,.06);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    margin: 1.25rem 0;
}
.ethics-callout-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: .1rem;
}
.ethics-callout strong {
    font-size: .9rem;
    color: var(--text);
    line-height: 1.6;
}

/* Platforms disclaimer */
.platforms-disclaimer {
    margin-top: 1.25rem;
    font-size: .76rem;
    color: var(--text-hint);
    line-height: 1.6;
    font-style: italic;
}
[data-theme="light"] .platforms-disclaimer { color: var(--text-muted); }

/* ================================================================
   MOBILE & TABLET — Downl.one
   ================================================================ */

/* ── Hamburger ────────────────────────────────────────────────── */
.nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
}
.nav-hamburger:hover { background: var(--bg-hover); color: var(--text); }

/* ── Mobile nav drawer ────────────────────────────────────────── */
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 200; }
.mobile-nav.open { display: block; }
.mobile-nav-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
}
.mobile-nav-drawer {
    position: absolute; top: 0; right: 0;
    width: min(300px, 85vw); height: 100%;
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    animation: drawerIn .22s ease;
    overflow-y: auto;
}
@keyframes drawerIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
.mobile-nav-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.mobile-nav-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted);
}
.mobile-nav-body { flex: 1; padding: .75rem; }
.mobile-nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem .875rem; border-radius: var(--radius-md);
    text-decoration: none; color: var(--text-muted);
    font-size: .9rem; font-weight: 500;
    transition: background .15s; min-height: 44px;
}
.mobile-nav-link:hover { background: var(--bg-hover); color: var(--text); }
.mobile-nav-link .fa-solid,
.mobile-nav-link .fa-brands { width: 20px; text-align: center; color: var(--text-hint); }
.mobile-nav-link .nav-icon-blue   { color: #60A5FA; }
.mobile-nav-link .nav-icon-teal   { color: #2DD4BF; }
.mobile-nav-link .nav-icon-amber  { color: #FCD34D; }
.mobile-nav-link .nav-icon-rose   { color: #FB7185; }
.mobile-nav-link .nav-icon-indigo { color: #818CF8; }
.mobile-nav-link .nav-icon-sky    { color: #38BDF8; }
.mobile-nav-link .nav-icon-slate  { color: #94A3B8; }
.mobile-nav-stuxs-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem .875rem; border-radius: var(--radius-md);
    background: rgba(107,0,162,.07);
    border: 1px solid rgba(107,0,162,.15);
    color: #6B00A2; font-size: .9rem; font-weight: 600;
    text-decoration: none; min-height: 44px; margin-top: .5rem;
}

/* ── Tablet ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .platforms-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .header-inner { padding: 0 1rem; }
    .header-actions { gap: .4rem; }
    .header-link { display: none; }
    .nav-hamburger { display: flex; }

    /* Touch targets */
    .dl-btn { min-height: 44px; }
    .theme-btn { min-height: 44px; }

    /* Hero */
    .hero { padding: 3rem 1rem 2.5rem; }
    .hero-title { font-size: 1.85rem; }
    .hero-eyebrow { font-size: .72rem; }
    .hero-sub { font-size: .9rem; }

    /* Input */
    .url-input { font-size: 16px; } /* prevent iOS zoom */

    /* Result streams */
    /* Each format stays on one line: type + quality on the left, Save on the right */
    .stream-row { flex-wrap: nowrap; padding: .7rem .875rem; }
    .stream-left { gap: .6rem; min-width: 0; }
    .save-btn { flex-shrink: 0; justify-content: center; min-height: 44px; }

    /* Platforms grid */
    .platforms-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .platform-chip  { padding: .5rem .65rem; }
    .chip-note { display: none; } /* too cramped on 2-col mobile */

    /* Features */
    .features-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .feature-card { padding: 1rem; }
    .feature-card p { font-size: .78rem; }

    /* Footer */
    .footer { flex-direction: column; align-items: center; text-align: center; gap: .75rem; }
    .footer-nav { display: none; }

    /* Prose */
    .prose-page { padding: 1.5rem 0 3rem; }
    .info-card-row { grid-template-columns: 1fr; gap: .35rem; }
    .section-inner { padding: 0 1rem; }
}

/* ── Small mobile ─────────────────────────────────────────────── */
@media (max-width: 380px) {
    .platforms-grid { grid-template-columns: 1fr; }
    .features-grid  { grid-template-columns: 1fr; }
    .hero-title { font-size: 1.6rem; }
}

/* ── Safe area insets ─────────────────────────────────────────── */
@supports (padding: max(0px)) {
    .header { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
    .footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* ── Tap highlight ────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════
   MOBILE NAV — Downl.one
   ══════════════════════════════════════════════════════════ */

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.25rem;
    font-size: .9rem;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background var(--dur), color var(--dur);
}
.mobile-nav-link:hover { background: var(--bg-hover); color: var(--text); }
.mobile-nav-divider { height: 1px; background: var(--border); margin: .5rem -.75rem; }

/* ══════════════════════════════════════════════════════════
   MOBILE & TABLET RESPONSIVE FIXES — Downl.one
   ══════════════════════════════════════════════════════════ */

/* Prevent iOS input zoom */
input, select, textarea { font-size: 16px !important; }

}

/* Touch targets */
.dl-btn    { min-height: 48px; }
.save-btn  { min-height: 44px; }
.theme-btn { min-height: 36px; }

html, body { overflow-x: hidden; }

/* ── ≤768px ─────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Header — collapse links */
    .header-actions { gap: .4rem; }
    .header-link { display: none; }
    .nav-hamburger { display: flex; }

    /* Footer */
    .footer { flex-direction: column; align-items: center; text-align: center; gap: .75rem; }
    .footer-nav { display: none; }

    /* Stuxs.Tools partner card */
    .stuxs-feature-card { flex-direction: column; text-align: center; }

    /* Hero */
    .hero { padding: 3rem 1rem 2.5rem; }
    .hero-title { font-size: clamp(1.8rem, 6vw, 2.4rem); letter-spacing: -.025em; }
    .hero-sub   { font-size: .95rem; margin-bottom: 2rem; }
    .hero-eyebrow { font-size: .74rem; margin-bottom: 1.25rem; }

    /* URL input box */
    .input-box  { padding: 1rem; border-radius: var(--radius-lg); }
    .dl-btn     { padding: .65rem 1rem; font-size: .85rem; }
    .paste-hint { display: none; }

    /* Result card thumbnail */

    /* Streams */

    /* Platforms grid */
    .platforms-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .platform-chip  { padding: .55rem .75rem; }

    /* Features */
    .features-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }

    /* Platform notes — hide on small screens to save space */
    .chip-note { display: none; }

    /* Sections */
    .section { padding: 2.5rem 1rem; }
    .section-alt .section-inner { padding: 0 1rem; }

    /* Footer */
    .footer { flex-direction: column; gap: .75rem; }
    .footer-nav { flex-wrap: wrap; }

    /* Prose pages */
    .prose-page { padding: 1.5rem 1rem 3rem; }
    .info-card-row { grid-template-columns: 1fr; gap: .3rem; }
    .prose-header h1 { font-size: 1.75rem; }
}

/* ── ≤480px ─────────────────────────────────────────────── */
@media (max-width: 480px) {

    .hero { padding: 2.25rem .875rem 2rem; }
    .hero-title { font-size: 1.65rem; }
    .hero-sub   { font-size: .88rem; }

    .platforms-grid { grid-template-columns: 1fr 1fr; }
    .features-grid  { grid-template-columns: 1fr; }

    .feature-card { flex-direction: row; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; }
    .feature-card .fi { font-size: 1.2rem; flex-shrink: 0; margin-top: .15rem; }

    /* Input */
    .dl-btn    { padding: .65rem .875rem; font-size: .8rem; flex-shrink: 0; }

    /* Prose */
    .prose-page { padding: 1rem .875rem 2.5rem; }
    .prose-header h1 { font-size: 1.5rem; }
    .ethics-callout { flex-direction: column; }
}

/* ── Audio/Video mode toggle ─────────────────────────────────── */
.input-mode-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    width: fit-content;
}
.mode-btn {
    display: flex; align-items: center; gap: .4rem;
    padding: .35rem .875rem;
    border: none; border-radius: calc(var(--radius-sm) - 2px);
    background: none; cursor: pointer;
    font-size: .82rem; font-weight: 500;
    color: var(--text-muted);
    transition: background var(--dur), color var(--dur);
}
.mode-btn.active {
    background: var(--green);
    color: #fff;
}
.mode-btn:not(.active):hover { background: var(--bg-hover); color: var(--text); }
.mode-btn { white-space: nowrap; }
/* Phones: three equal tiles, icon above the label */
@media (max-width: 640px) {
    .input-mode-toggle { width: 100%; }
    .mode-btn { flex: 1 1 0; flex-direction: column; justify-content: center; gap: .3rem;
                padding: .5rem .35rem; font-size: .74rem; white-space: normal; text-align: center; line-height: 1.2; }
}

/* ── Download progress bar ────────────────────────────────────── */
.dl-progress-wrap {
    margin-top: .75rem;
    display: none;
}
.dl-progress-wrap.active { display: block; }
.dl-progress-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.dl-progress-fill {
    height: 100%;
    background: var(--green);
    border-radius: 3px;
    transition: width .3s ease;
    width: 0%;
}
.dl-progress-fill.indeterminate {
    width: 40%;
    animation: progressSlide 1.2s ease-in-out infinite;
}
@keyframes progressSlide {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}
.dl-progress-label {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: .3rem;
    text-align: center;
}

/* ── Advanced options (collapsed by default) ───────────────────── */
.advanced-options { margin-top: .85rem; }
.advanced-options > summary {
    display: inline-flex; align-items: center; gap: .45rem;
    cursor: pointer; list-style: none; user-select: none;
    font-size: .8rem; color: var(--text-muted);
    padding: .25rem .6rem; border-radius: var(--radius-sm);
    transition: color var(--dur), background var(--dur);
}
.advanced-options > summary::-webkit-details-marker { display: none; }
.advanced-options > summary::after {
    content: '\f078'; font-family: 'Font Awesome 7 Free'; font-weight: 900;
    font-size: .65rem; transition: transform var(--dur);
}
.advanced-options[open] > summary::after { transform: rotate(180deg); }
.advanced-options > summary:hover { color: var(--text); background: var(--bg-hover); }
.advanced-active { color: var(--green); font-weight: 600; }
.advanced-options[open] .advanced-active { display: none; }

/* ── Options row under the bar (mode toggle + playlist toggle) ── */
.input-options {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .75rem 1.5rem;
}

/* ── Phase 6 — Playlist toggle + results ────────────────────── */
.playlist-toggle-wrap {
    margin-top: .85rem;
    margin-bottom: .5rem;
}
.playlist-toggle-label {
    display: inline-flex; align-items: center; gap: .6rem;
    cursor: pointer; font-size: .82rem; color: var(--text-muted);
    user-select: none;
}
.playlist-toggle-track {
    width: 38px; height: 20px; border-radius: 10px;
    background: var(--border); position: relative;
    transition: background .2s; flex-shrink: 0;
}
.playlist-toggle-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; position: absolute; top: 2px;
    transform: translateX(2px);
    transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.playlist-badge {
    font-size: .68rem; font-weight: 700; padding: 1px 6px;
    border-radius: 999px; background: var(--green);
    color: #fff; margin-left: .2rem;
}

/* Playlist result card */
.playlist-header {
    padding: .75rem 1.1rem; font-size: .9rem; font-weight: 600;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.playlist-items { display: flex; flex-direction: column; }
.playlist-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem 1.1rem; border-bottom: 1px solid var(--border);
    transition: background var(--dur);
}
.playlist-item:last-child { border-bottom: none; }
.playlist-item:hover { background: var(--bg-hover); }
.playlist-item-num {
    font-size: .75rem; color: var(--text-hint); width: 22px;
    text-align: right; flex-shrink: 0; font-family: var(--font-mono);
}
.playlist-item-info { flex: 1; min-width: 0; }
.playlist-item-title {
    font-size: .85rem; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; color: var(--text);
}
.playlist-item-dur { font-size: .72rem; color: var(--text-hint); margin-top: .1rem; }
.playlist-dl-btn {
    font-size: .75rem; padding: .25rem .65rem; flex-shrink: 0;
}

/* Format preference badge */
.pref-badge {
    font-size: .68rem; font-weight: 600; padding: 1px 6px;
    border-radius: 999px; background: rgba(40,180,40,.12);
    color: var(--green); margin-left: .3rem; vertical-align: middle;
    white-space: nowrap; display: inline-block; /* sits after the resolution, wrapping below it whole if there's no room */
}

/* ================================================================
   Changelog (about.php)
   ================================================================ */
.changelog-entry-head { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin:1.75rem 0 .6rem; }
.changelog-entry-head:first-child { margin-top:0; }
.changelog-version {
    font-family:var(--font-mono); font-size:1.05rem; font-weight:700;
    color:var(--green); background:rgba(var(--green-rgb),.10);
    border:1px solid rgba(var(--green-rgb),.22); border-radius:var(--radius-sm);
    padding:.15rem .6rem;
}
.changelog-desc { font-size:.88rem; color:var(--text-muted); }
.changelog-heading {
    font-size:1.05rem; font-weight:700; color:var(--text);
    margin:2rem 0 .6rem; padding-top:1.25rem; border-top:1px solid var(--border);
}
.changelog-heading:first-child { margin-top:0; padding-top:0; border-top:none; }
.changelog-section { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:1rem 0 .4rem; }
.changelog-label-row { display:flex; align-items:center; gap:.55rem; margin:1rem 0 .5rem; }
.changelog-label {
    display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; padding:.2rem .65rem; border-radius:999px; border:1px solid transparent;
}
.changelog-label-suffix { font-size:.78rem; font-weight:600; color:var(--text-muted); }
/* Fixed type palette & order: Added, Changed, Fixed, Removed, Security, Deprecated */
.changelog-label-added      { --cl:#2ecc71; }
.changelog-label-changed    { --cl:#3ba7ff; }
.changelog-label-fixed      { --cl:#ffa64d; }
.changelog-label-removed    { --cl:#ff4d4d; }
.changelog-label-security   { --cl:#b06bff; }
.changelog-label-deprecated { --cl:#8a8a94; }
[data-theme="light"] .changelog-label-added      { --cl:#1e8449; }
[data-theme="light"] .changelog-label-changed    { --cl:#1a6fc0; }
[data-theme="light"] .changelog-label-fixed      { --cl:#b8650f; }
[data-theme="light"] .changelog-label-removed    { --cl:#c62828; }
[data-theme="light"] .changelog-label-security   { --cl:#7b3fc4; }
[data-theme="light"] .changelog-label-deprecated { --cl:#5f5f68; }
.changelog-label[class*="changelog-label-"] { color:var(--cl); background:color-mix(in srgb, var(--cl) 14%, transparent); border-color:color-mix(in srgb, var(--cl) 45%, transparent); }
.changelog-list { margin:0 0 .5rem; padding-left:1.25rem; }
.changelog-list li { font-size:.88rem; color:var(--text-muted); line-height:1.7; margin-bottom:.3rem; }
.changelog-list code { font-size:.85em; }
.changelog-p { font-size:.88rem; color:var(--text-muted); line-height:1.75; margin:0 0 .75rem; }
.changelog-hr { border:none; border-top:1px solid var(--border); margin:2rem 0; }

/* Platform icons — coloured to match each service's own brand colour */
.icon-youtube     { color: #FF0000; }
.icon-tiktok      { color: #25F4EE; }
.icon-instagram   { color: #E4405F; }
.icon-x           { color: #FFFFFF; }
.icon-reddit      { color: #FF4500; }
.icon-vimeo       { color: #1AB7EA; }
.icon-soundcloud  { color: #FF5500; }
.icon-twitch      { color: #9146FF; }
.icon-dailymotion { color: #00AAFF; }
.icon-bilibili    { color: #00A1D6; }
.icon-facebook    { color: #1877F2; }
.icon-pinterest   { color: #E60023; }
.icon-tumblr      { color: #6E93B8; }
.icon-streamable  { color: #14B4E8; }
.icon-bluesky     { color: #1185FE; }
.icon-loom        { color: #625DF5; }
.icon-okru        { color: #EE8208; }
.icon-rutube      { color: #00A03C; }
.icon-snapchat    { color: #FFFC00; }
.icon-vk          { color: #0077FF; }
.icon-newgrounds  { color: #F7931E; }
.icon-rumble      { color: #85C742; }
.icon-kick        { color: #53FC18; }
.icon-odysee      { color: #EF1970; }
.icon-niconico    { color: #E4E4E4; }
.icon-coub        { color: #17A2B8; }
.icon-bitchute    { color: #FF2020; }
.icon-bandcamp    { color: #4CA6BD; }
.icon-mixcloud    { color: #52AAD8; }
.icon-kwai        { color: #FF7702; }
.icon-weibo       { color: #E6162D; }
.icon-navertv     { color: #03C75A; }
.icon-medaltv     { color: #FF3D68; }
.icon-imgur       { color: #1BB76E; }
.icon-kickstarter { color: #05CE78; }

/* Easter egg: hold Shift to see the old Twitter bird instead of X */
.text-shift { display:none; }
body.shift-held .text-default { display:none; }
body.shift-held .text-shift { display:inline; }
body.shift-held .twitter-icon { --fa: "\f099"; }
body.shift-held .icon-x { color: #1DA1F2; }

/* ══════════════════════════════════════════════════════════
   Konami code easter egg — rainbow accent + flying cats
   Not persisted: a page reload always resets to normal.
   ══════════════════════════════════════════════════════════ */
@property --green {
    syntax: '<color>';
    inherits: true;
    initial-value: #28B428;
}
body.konami-active { animation: konami-rainbow 3s linear infinite; }
@keyframes konami-rainbow {
    0%   { --green: #ff2d2d; }
    16%  { --green: #ff9900; }
    33%  { --green: #ffee00; }
    50%  { --green: #33ff33; }
    66%  { --green: #2fa2ff; }
    83%  { --green: #a233ff; }
    100% { --green: #ff2d2d; }
}

.nyan-cat{position:fixed;z-index:99999;top:0;left:-160px;width:140px;height:32px;pointer-events:none;animation:nyan-fly linear forwards;}
.nyan-trail{position:absolute;left:0;top:8px;width:110px;height:16px;border-radius:6px;opacity:.9;
    background:repeating-linear-gradient(0deg,#ff2d2d 0,#ff2d2d 16.6%,#ff9900 16.6%,#ff9900 33.2%,#ffee00 33.2%,#ffee00 49.8%,#33ff33 49.8%,#33ff33 66.4%,#2fa2ff 66.4%,#2fa2ff 83%,#a233ff 83%,#a233ff 100%);
}
.nyan-face{position:absolute;right:0;top:-2px;font-size:32px;line-height:1;}
@keyframes nyan-fly{from{left:-160px;}to{left:100vw;}}

@media (prefers-reduced-motion: reduce) {
    body.konami-active { animation: none; }
    .nyan-cat { display: none; }
}

/* ── Settings page ────────────────────────────────────────── */
.badge-soon { display: inline-block; padding: .1rem .4rem; background: rgba(245,158,11,.12); color: #FBBF24; border-radius: 4px; font-size: .63rem; font-weight: 700; }
.settings-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.1rem; margin-bottom: .6rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.settings-row-disabled { opacity: .55; }
.settings-row-label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--text); }
.settings-row-control { display: flex; gap: .4rem; }
.settings-select {
    padding: .45rem .7rem; border-radius: var(--radius-sm);
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text); font-size: .85rem; font-family: var(--font-sans);
}
.settings-choice {
    padding: .4rem 1rem; border-radius: var(--radius-sm);
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.settings-choice.active { background: rgba(var(--green-rgb),.12); border-color: rgba(var(--green-rgb),.3); color: var(--green); }
.settings-soon-note { font-size: .82rem; color: var(--text-hint); margin: -.5rem 0 1rem; }

/* ── FAQ accordion ────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--text); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-chevron { font-size: .8rem; color: var(--text-hint); transition: transform var(--dur); flex-shrink: 0; }
.faq-item[open] summary .faq-chevron { transform: rotate(180deg); }
.faq-item summary:hover { background: var(--bg-hover); }
.faq-answer { padding: 0 1.25rem 1.25rem; color: var(--text-muted); font-size: .9rem; line-height: 1.65; }
.faq-answer a { color: var(--green); }

/* ── Highlighted platforms on phones ──────────────────────────────
   Last in the file so it wins over the older breakpoint rules above. */
@media (max-width: 640px) {
    .platforms-intro { flex-direction: column; justify-content: center; text-align: center; gap: .45rem; }
    .platforms-grid  { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .platform-chip   { align-items: flex-start; gap: .55rem; padding: .6rem .7rem; min-width: 0; }
    .platform-chip > div { min-width: 0; }
    .chip-icon { width: 1.15rem; text-align: center; font-size: 1rem; margin-top: .05rem; }
    .chip-name { font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
    /* Notes come back (there's no hover on a phone to see the tooltip), kept to two lines */
    .chip-note {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
        overflow: hidden; font-size: .66rem; line-height: 1.35; margin-top: .15rem;
    }
    .platforms-disclaimer { text-align: center; }
}
@media (max-width: 340px) {
    .platforms-grid { grid-template-columns: 1fr; }
}