/* ── Audio Quality Checker ─────────────────────────
   Design: dark hero (Vanta clouds) + clean light content.
   Fonts: Space Grotesk (headings), Inter (body).
───────────────────────────────────────────────────── */

:root {
    --black: #111111;
    --text: #1a1a1a;
    --text-1: #1a1a1a;
    --text-2: #555555;
    --text-3: #888888;
    --border: #e2e2e2;
    --bg: #ffffff;
    --bg-1: #ffffff;
    --bg-2: #f8f9fa;
    --bg-3: #f0f1f2;
    --accent: #0d9488;
    --accent-light: #e6f7f5;
    --accent-glow: rgba(13, 148, 136, 0.15);
    --green: #1b7a34;
    --green-bg: #f0faf1;
    --yellow: #b45309;
    --yellow-bg: #fef9ed;
    --red: #b91c1c;
    --red-bg: #fef2f2;
    --radius: 12px;
    --radius-lg: 16px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.10);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-margin-top: 100px; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    font-size: 15px;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Nav ─────────────────────────────────────────── */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
}

.nav.scrolled {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #111111;
    font-weight: 600;
    font-size: 15px;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.nav-icon { flex-shrink: 0; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    text-decoration: none;
    color: rgba(0,0,0,0.55);
    font-size: 14px;
    font-weight: 450;
    transition: color 0.15s;
}

.nav-links a:hover { color: #111111; }

.nav-cta {
    background: var(--accent) !important;
    color: #fff !important;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.nav-cta:hover { opacity: 0.85; }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
}

/* ── Hero (Dark + Vanta Clouds) ───────────────────── */

.hero {
    padding: 110px 0 70px;
    text-align: center;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 24px;
    padding: 6px 16px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 100px;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5.5vw, 56px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
    color: #111111;
    margin-bottom: 20px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

.hero-sub {
    font-size: 17px;
    color: rgba(0,0,0,0.55);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 52px;
    font-weight: 400;
}

/* ── Upload ──────────────────────────────────────── */

.upload-zone {
    max-width: 560px;
    margin: 0 auto;
    border: 1.5px dashed rgba(0,0,0,0.15);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(12px);
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--accent);
    background: rgba(13, 148, 136, 0.12);
    box-shadow: 0 0 30px rgba(13, 148, 136, 0.15);
}

.upload-inner {
    padding: 48px 24px;
    text-align: center;
}

.upload-icon {
    color: var(--text-3);
    margin-bottom: 16px;
}

.upload-main {
    font-size: 15px;
    color: var(--text);
}

.upload-browse {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s;
}

.upload-zone:hover .upload-browse {
    text-decoration-color: var(--accent);
}

.upload-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-3);
}

/* ── Retain checkbox ─────────────────────────────── */

.retain {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-3);
    user-select: none;
}

.retain input { display: none; }

.retain-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s;
}

.retain input:checked ~ .retain-box {
    background: var(--accent);
    border-color: var(--accent);
}

.retain input:checked ~ .retain-box::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* ── Progress ────────────────────────────────────── */

.progress {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.progress-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.progress-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.progress-pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

.progress-track {
    height: 4px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-status {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-3);
}

.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Results ─────────────────────────────────────── */

.results {
    padding: 60px 0 40px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
}

/* Score card */
.score-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 48px 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.score-ring-wrap {
    position: relative;
    width: 130px;
    height: 130px;
}

.score-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-ring-bg {
    fill: none;
    stroke: var(--bg-3);
    stroke-width: 6;
}

.score-ring-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 326.726;
    stroke-dashoffset: 326.726;
    transition: stroke-dashoffset 1s ease-out;
}

.score-num-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.score-num {
    font-size: 36px;
    font-weight: 700;
    color: var(--black);
    line-height: 1;
}

.score-of {
    font-size: 13px;
    color: var(--text-3);
}

.score-meta { text-align: left; }

.score-grade {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--accent);
}

.score-summary {
    font-size: 15px;
    color: var(--text-2);
    max-width: 260px;
}

/* Cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    scroll-margin-top: 100px;
}

.card:hover {
    border-color: #ccc;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
}

.card-wide { grid-column: 1 / -1; }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

.card-heading {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: 20px;
}

.card-heading--warn { color: var(--yellow); }

/* Data grid */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
}

.data-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.15s;
    cursor: default;
}

.data-item[data-tip] { cursor: help; }
.data-item:hover { background: var(--bg-2); }

.data-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    font-weight: 500;
}

.data-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.data-value.good { color: var(--green); }
.data-value.warn { color: var(--yellow); }
.data-value.bad { color: var(--red); }

/* Breakdown bars */
.breakdown { display: flex; flex-direction: column; gap: 14px; }

.breakdown-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    cursor: help;
}

.breakdown-row:hover { background: var(--bg-2); }

.breakdown-label {
    flex: 0 0 180px;
    font-size: 13px;
    color: var(--text-2);
}

.breakdown-track {
    flex: 1;
    height: 6px;
    background: var(--bg-3);
    border-radius: 3px;
    overflow: hidden;
}

.breakdown-fill {
    height: 100%;
    border-radius: 3px;
    width: 0;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.breakdown-fill.animated { /* width set by JS when scrolled into view */ }

.breakdown-fill.excellent { background: var(--green); }
.breakdown-fill.good { background: var(--accent); }
.breakdown-fill.fair { background: var(--yellow); }
.breakdown-fill.poor { background: var(--red); }

.breakdown-val {
    flex: 0 0 36px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    color: var(--text);
}

/* Compliance — redesigned with left border + icon circles */
.compliance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

.compliance-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg);
    border-radius: 8px;
    border-left: 3px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.compliance-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.compliance-row.pass { border-left-color: var(--green); }
.compliance-row.warn { border-left-color: var(--yellow); }
.compliance-row.fail { border-left-color: var(--red); }

.compliance-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
}

.compliance-icon.pass { background: var(--green-bg); color: var(--green); }
.compliance-icon.warn { background: var(--yellow-bg); color: var(--yellow); }
.compliance-icon.fail { background: var(--red-bg); color: var(--red); }

.compliance-info { flex: 1; }

.compliance-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.compliance-detail {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}

.compliance-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.compliance-pill {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.compliance-pill.val { background: var(--bg-2); color: var(--text-2); }
.compliance-pill.thr { background: var(--bg-3); color: var(--text-3); }

/* Visualizations */
.viz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
}

.viz-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.viz-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
}

.viz-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.viz-item:hover .viz-overlay { opacity: 1; }

.viz-overlay-text {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    background: rgba(0,0,0,0.5);
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.viz-item img {
    width: 100%;
    height: auto;
    display: block;
}

.viz-caption {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    border-top: 1px solid var(--border);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(8px);
}

.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-img {
    max-width: 92vw;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.lightbox-close:hover { background: rgba(255,255,255,0.3); }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.lightbox-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
}

.lightbox-dot.active { background: #fff; }

.lightbox-caption {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 500;
}

/* Errors */
.errors { display: flex; flex-direction: column; gap: 6px; }

.error-row {
    font-size: 13px;
    color: var(--yellow);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.error-row:last-child { border-bottom: none; }

/* Actions */
.actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-family: var(--font);
    transition: all 0.15s;
}

.btn--solid {
    background: var(--black);
    color: #fff;
}

.btn--solid:hover { opacity: 0.85; }

.btn--outline {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn--outline:hover { border-color: #aaa; }

/* ── Features ────────────────────────────────────── */

.features {
    padding: 100px 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.section-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--black);
    margin-bottom: 8px;
}

.section-sub {
    font-size: 15px;
    color: var(--text-2);
    text-align: center;
    margin-bottom: 56px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.feature {
    padding: 32px 28px;
    background: var(--bg);
}

.feature h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--black);
}

.feature p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
}

/* ── How it works ────────────────────────────────── */

.how {
    padding: 100px 0;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
}

.steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 56px;
}

.step {
    text-align: center;
    max-width: 220px;
    padding: 0 16px;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--black);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.step h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.step p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
}

.step-line {
    width: 60px;
    height: 1px;
    background: var(--border);
    margin-top: 18px;
    flex-shrink: 0;
}

/* ── Footer ──────────────────────────────────────── */

.footer {
    padding: 40px 0;
    border-top: 1px solid var(--border);
}

.footer-inner {
    text-align: center;
}

.footer a {
    color: var(--accent);
    text-decoration: none;
}

.footer a:hover { text-decoration: underline; }

.footer-small {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-3);
}

/* ── Floating Tooltip ─────────────────────────────── */

#tip {
    position: fixed;
    z-index: 200;
    background: var(--black);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 260px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#tip.show { opacity: 1; }

/* ── Section Nav (see enhanced styles below) ───── */

/* ── Summary Bar ─────────────────────────────────── */

.summary-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 16px;
}

.summary-pill.pass { background: var(--green-bg); color: var(--green); }
.summary-pill.warn { background: var(--yellow-bg); color: var(--yellow); }
.summary-pill.fail { background: var(--red-bg); color: var(--red); }

.summary-time {
    font-size: 13px;
    color: var(--text-3);
}

/* ── Utility ─────────────────────────────────────── */

.hidden { display: none !important; }
.hide-mobile { display: inline; }

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        padding: 16px 24px;
        gap: 12px;
    }

    .nav-links.open { display: flex; }
    .nav-toggle { display: block; }

    .hero { padding: 72px 0 40px; }
    .hero-sub br { display: none; }
    .hide-mobile { display: none; }

    .upload-inner { padding: 32px 16px; }

    .score-card {
        flex-direction: column;
        text-align: center;
        padding: 32px 20px;
        gap: 24px;
    }

    .score-meta { text-align: center; }
    .cards { grid-template-columns: 1fr; }
    .viz-grid { grid-template-columns: 1fr; }

    .section-nav-inner { padding: 0 16px; }

    .breakdown-label { flex: 0 0 120px; font-size: 12px; }

    .steps { flex-direction: column; align-items: center; gap: 24px; }
    .step-line { width: 1px; height: 32px; }

    .feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .data-grid { grid-template-columns: repeat(2, 1fr); }
    .compliance { grid-template-columns: 1fr; }

    .lightbox-nav { display: none; }
    .summary-bar { gap: 8px; }

    .actions { flex-direction: column; }
    .btn { width: 100%; justify-content: center; }

    .breakdown-row { flex-wrap: wrap; }
    .breakdown-label { flex: 0 0 100%; }
}

/* MOS Score Display */
.mos-display {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--bg-2);
    border-radius: 12px;
}
.mos-score-big {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    min-width: 80px;
    text-align: center;
}
.mos-rating {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.mos-scale {
    font-size: 0.8rem;
    color: var(--text-3);
}
.mos-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mos-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.mos-sub-label {
    min-width: 100px;
    color: var(--text-2);
}
.mos-sub-bar {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.mos-sub-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.mos-sub-val {
    min-width: 32px;
    text-align: right;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Profile Selector */
.profile-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.profile-label {
    font-size: 0.85rem;
    color: rgba(0,0,0,0.5);
    font-weight: 500;
}
.profile-selector select {
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.55);
    color: #1a1a1a;
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.profile-selector select option {
    background: #fff;
    color: #1a1a1a;
}
.profile-desc {
    font-size: 0.8rem;
    color: rgba(0,0,0,0.35);
    font-style: italic;
}

/* Mode Toggle */
.mode-toggle {
    display: inline-flex;
    gap: 4px;
    background: rgba(255,255,255,0.55);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.08);
}
.mode-btn {
    padding: 8px 22px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(0,0,0,0.45);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    font-family: var(--font);
}
.mode-btn.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 8px rgba(13,148,136,0.3);
}
.mode-btn:hover:not(.active) {
    color: rgba(0,0,0,0.75);
}

/* Batch file list */
.batch-file-list {
    margin: 12px 0;
    padding: 12px;
    background: var(--bg-2);
    border-radius: 10px;
    font-size: 0.9rem;
}
.batch-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.batch-file-item:last-child { border-bottom: none; }

/* Batch summary */
.batch-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.batch-stat {
    text-align: center;
    padding: 12px;
}
.batch-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
}
.batch-stat-label {
    font-size: 0.8rem;
    color: var(--text-3);
    margin-top: 4px;
}

/* Batch table */
.batch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.batch-table th, .batch-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.batch-table th {
    background: var(--bg-2);
    font-weight: 600;
    color: var(--text-2);
    position: sticky;
    top: 0;
}
.batch-table tr:hover { background: var(--bg-2); }

/* Interactive Waveform */
#waveform-container {
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-2);
    padding: 8px;
}

/* Compare Mode */
.compare-zone { margin-top: 16px; }
.compare-upload-pair {
    display: flex;
    gap: 16px;
    align-items: center;
}
.compare-upload-box {
    flex: 1;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}
.compare-upload-box:hover { border-color: var(--accent); }
.compare-upload-box.has-file { border-color: var(--accent); border-style: solid; }
.compare-vs {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-3);
    flex-shrink: 0;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.compare-table th, .compare-table td {
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.compare-table th:first-child, .compare-table td:first-child {
    text-align: left;
    font-weight: 500;
}
.compare-table th { background: var(--bg-2); font-weight: 600; }
.compare-better { color: #27ae60; font-weight: 600; }
.compare-worse { color: #E74C3C; }
@media (max-width: 600px) {
    .compare-upload-pair { flex-direction: column; }
    .compare-vs { transform: rotate(90deg); }
}

/* ── Dark Hero Overrides ──────────────────────────── */

.hero .upload-icon { stroke: rgba(0,0,0,0.35); }
.hero .upload-browse { color: var(--accent); }
.hero .retain { color: rgba(0,0,0,0.4); }
.hero .retain-text { color: rgba(0,0,0,0.4); font-size: 0.8rem; }
.hero .retain-box { border-color: rgba(0,0,0,0.15); background: rgba(255,255,255,0.5); }

.hero .progress { 
    background: rgba(255,255,255,0.95); 
    border: 1px solid rgba(0,0,0,0.1); 
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
    padding: 28px 32px;
    max-width: 600px;
}
.hero .progress-name { color: #1a1a1a; font-size: 15px; }
.hero .progress-pct { color: var(--accent); font-size: 14px; font-weight: 700; }
.hero .progress-track { background: rgba(0,0,0,0.08); height: 6px; border-radius: 3px; }
.hero .progress-bar { background: linear-gradient(90deg, var(--accent), #26c6a0); height: 6px; border-radius: 3px; }
.hero .progress-status { 
    color: rgba(0,0,0,0.5); 
    font-size: 14px; 
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Compare zone dark */
.hero .compare-upload-box { border-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.5); }
.hero .compare-upload-box:hover { border-color: var(--accent); }
.hero .compare-upload-box.has-file { border-color: var(--accent); }
.hero .compare-vs { color: rgba(0,0,0,0.3); }

/* Batch file list dark */
.hero .batch-file-list { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.08); color: #1a1a1a; }
.hero .batch-file-item { border-color: rgba(0,0,0,0.06); }

/* ── Enhanced Typography ──────────────────────────── */

.section-title {
    font-family: var(--font-display) !important;
    letter-spacing: -0.02em;
}

.card-heading {
    font-family: var(--font-display) !important;
    letter-spacing: -0.01em;
}

/* ── Card Enhancements ────────────────────────────── */

.card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.score-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md);
}

/* ── Footer Enhancement ───────────────────────────── */

.footer {
    background: #111827 !important;
    color: rgba(255,255,255,0.5);
}

.footer a { color: var(--accent); }

/* ── Smooth Transitions ───────────────────────────── */

.results {
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Nav toggle color for dark hero */
.nav-toggle { color: rgba(0,0,0,0.6); }

/* Nav scroll state overrides */
.nav.scrolled .nav-brand { color: #111111; }
.nav.scrolled .nav-brand .nav-icon rect { fill: #111; }
.nav.scrolled .nav-links a { color: rgba(0,0,0,0.55); }
.nav.scrolled .nav-links a:hover { color: #111; }
.nav.scrolled .nav-toggle { color: rgba(0,0,0,0.6); }

/* ── Card Accent Bars ─────────────────────────────── */

.card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 12px 0 0 12px;
}

.card {
    position: relative;
    overflow: hidden;
}

.accent-blue { background: #3b82f6; }
.accent-green { background: #10b981; }
.accent-orange { background: #f59e0b; }
.accent-red { background: #ef4444; }
.accent-purple { background: #8b5cf6; }
.accent-teal { background: var(--accent); }

/* ── Improved Card Headings ───────────────────────── */

.card-heading {
    font-family: var(--font-display) !important;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--black);
    margin-bottom: 14px;
    padding-left: 8px;
}

/* ── Data Grid Enhancement ────────────────────────── */

.data-grid .data-item {
    padding: 8px 8px 8px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.data-grid .data-item:hover {
    background: var(--bg-2);
}

.data-item .data-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
    margin-bottom: 2px;
}

.data-item .data-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-display);
}

/* ── Score Card Enhancement ───────────────────────── */

.score-card {
    background: linear-gradient(135deg, #f8fffe 0%, #f0fdf9 100%) !important;
}

/* ── Section Nav Enhancement ──────────────────────── */

.section-nav {
    position: sticky;
    top: 56px;
    z-index: 50;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    margin: 0 -24px 24px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
}

.section-nav-inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 0;
    scrollbar-width: none;
}

.section-nav-inner::-webkit-scrollbar { display: none; }

.section-nav-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
}

.section-nav-btn:hover {
    color: var(--text);
    background: var(--bg-2);
}

.section-nav-btn.active {
    color: var(--accent);
    background: var(--accent-light);
    font-weight: 600;
}

/* Progress status spinner inline */
.progress-status .spinner {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    border-width: 2px;
    margin-right: 8px;
}

/* ── Analysis Mode Selector ───────────────────────── */

.analysis-mode {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px auto 16px;
    max-width: 560px;
}

.analysis-mode-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
}

.analysis-mode-options {
    display: flex;
    gap: 8px;
}

.mode-option {
    cursor: pointer;
}

.mode-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mode-option-btn {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    transition: all 0.2s;
    min-width: 140px;
    text-align: center;
}

.mode-option input:checked + .mode-option-btn {
    background: rgba(255,255,255,0.95);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 137, 123, 0.15);
}

.mode-option:hover .mode-option-btn {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.2);
}

.mode-option-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.mode-option-desc {
    font-size: 11px;
    color: rgba(0,0,0,0.45);
    margin-top: 2px;
}

.mode-option input:checked + .mode-option-btn .mode-option-name {
    color: var(--accent);
}

/* Hero overrides for analysis mode */
.hero .analysis-mode-label {
    color: rgba(0,0,0,0.55);
}

/* ── Toast Notifications ── */
.toast-container {
    position: fixed;
    top: 90px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
    padding: 16px 20px;
    min-width: 320px;
    max-width: 420px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease-out;
    border-left: 4px solid var(--toast-color, #1a1a1a);
}

.toast.toast-error {
    --toast-color: #e53935;
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
}

.toast.toast-success {
    --toast-color: #00897b;
    background: linear-gradient(135deg, #fff 0%, #f0fdf9 100%);
}

.toast.toast-warning {
    --toast-color: #f9a825;
    background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}

.toast.toast-info {
    --toast-color: #1976d2;
    background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 13px;
    color: rgba(0,0,0,0.65);
    line-height: 1.5;
    word-wrap: break-word;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(0,0,0,0.35);
    cursor: pointer;
    padding: 4px;
    margin: -4px -4px -4px 0;
    font-size: 18px;
    line-height: 1;
    transition: color 0.15s;
}

.toast-close:hover {
    color: rgba(0,0,0,0.7);
}

.toast.toast-hiding {
    animation: toastSlideOut 0.25s ease-in forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100px); }
}

@media (max-width: 480px) {
    .toast-container {
        left: 12px;
        right: 12px;
        top: 80px;
    }
    .toast {
        min-width: 0;
        width: 100%;
    }
}