/* ==========================================================================
   SÖLVE® CLASSIC STUDIO CONSOLE & VINTAGE ATELIER AUDIO HARDWARE OVERRIDES
   Transforming Index from Hyper-Modern SaaS to Timeless Tactile Studio Gear
   ========================================================================== */

/* 1. Muted Analog Lighting */
.ambient-glow-top {
    opacity: 0.20 !important;
    height: 550px !important;
}

/* 2. Top Minimal Telemetry Bar */
.spec-bar {
    border-radius: 3px !important;
    background: #0C0C10 !important;
    border: 1px solid #1E1E26 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 3. Main Brand Header / Console Master Bridge */
.brand-header {
    border-radius: 4px !important;
    background: #0E0E13 !important;
    border: 1px solid #23232D !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 10px auto 16px !important;
}

.trademark-box {
    border-radius: 3px !important;
    background: #14141B !important;
    border: 1px solid rgba(201, 168, 106, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.division-tag {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: rgba(201, 168, 106, 0.12) !important;
    border: 1px solid rgba(201, 168, 106, 0.35) !important;
    padding: 2px 8px !important;
}

.search-field {
    border-radius: 3px !important;
    background: #09090D !important;
    border: 1px solid #242430 !important;
    height: 34px !important;
}

.search-field input {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
}

.header-action-group {
    border-radius: 3px !important;
    background: #09090D !important;
    border: 1px solid #1F1F28 !important;
    padding: 2px !important;
}

/* 4. Tactile Push-Switch Buttons (.hw-btn) */
.hw-btn {
    border-radius: 3px !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #2C2C3A !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.15s ease !important;
}

.hw-btn:hover {
    transform: none !important;
    border-color: #3D3D4E !important;
}

.hw-btn-primary {
    background: #FF3B00 !important;
    border-color: #FF5A26 !important;
    color: #FFF !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(255, 59, 0, 0.35) !important;
}

.hw-btn-primary:hover {
    background: #E03400 !important;
    border-color: #FF4D14 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 8px rgba(255, 59, 0, 0.45) !important;
}

.hw-btn-secondary {
    background: #14141B !important;
    color: var(--ink-white) !important;
    border-color: #2D2D3B !important;
}

.hw-btn-secondary:hover {
    background: #1A1A23 !important;
    border-color: #3E3E50 !important;
}

.hw-btn-ghost {
    background: #101016 !important;
    color: var(--ink-silver) !important;
    border-color: #242430 !important;
}

.hw-btn-ghost:hover {
    background: #171720 !important;
    color: var(--ink-white) !important;
    border-color: #343444 !important;
}

.hw-btn-gold {
    background: rgba(201, 168, 106, 0.12) !important;
    color: var(--luxury-gold-light) !important;
    border-color: rgba(201, 168, 106, 0.38) !important;
}

.hw-btn-gold:hover {
    background: rgba(201, 168, 106, 0.2) !important;
    border-color: var(--luxury-gold) !important;
}

/* 5. Artist Command Bar (@SMOKED.999) */
.artist-command-bar {
    border-radius: 4px !important;
    background: #0E0E13 !important;
    border: 1px solid #23232D !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 18px 22px !important;
    margin-bottom: 16px !important;
}

.artist-avatar-wrap {
    border-radius: 3px !important;
    border: 1px solid rgba(201, 168, 106, 0.45) !important;
    box-shadow: 0 0 12px rgba(201, 168, 106, 0.15) !important;
    width: 56px !important;
    height: 56px !important;
}

.artist-role-badge {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
}

.akpi-item {
    border-radius: 3px !important;
    background: #14141B !important;
    border: 1px solid #22222E !important;
    padding: 7px 14px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.akpi-lbl {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.akpi-val {
    font-family: var(--font-mono) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* 6. Campaign Telemetry Metrics (6 Hardware Rack Units) */
.ledger-metrics {
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.metric-cell {
    border-radius: 4px !important;
    background: #0E0E13 !important;
    border: 1px solid #23232D !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 16px 18px !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.metric-cell:hover {
    transform: none !important;
    border-color: #383848 !important;
    background: #121218 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

.metric-meta {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.metric-number {
    font-family: var(--font-mono) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

.metric-unit {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: #16161E !important;
    border: 1px solid #262634 !important;
    padding: 2px 6px !important;
}

/* 7. Radar Surveillance Strip */
.auto-radar-strip {
    border-radius: 4px !important;
    background: #0D110E !important;
    border: 1px solid #1C2B1F !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 12px 20px !important;
    margin-bottom: 18px !important;
}

.sec-code {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.status-verified-pill {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    text-transform: uppercase !important;
}

.radar-count-pill {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    background: #121714 !important;
    border: 1px solid #213125 !important;
    padding: 4px 10px !important;
}

/* 8. Editorial Split Workstation Bay */
.roster-column,
.content-column {
    border-radius: 4px !important;
    background: #0E0E14 !important;
    border: 1px solid #23232D !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.section-bar {
    height: 46px !important;
    background: #121218 !important;
    border-bottom: 1px solid #23232D !important;
}

.mono-count {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    background: #181822 !important;
    border: 1px solid #262634 !important;
    padding: 2px 7px !important;
}

/* 9. Monitored Fleet Channel Cards */
.page-card {
    border-radius: 3px !important;
    background: #121217 !important;
    border: 1px solid #20202A !important;
    margin: 6px 12px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.15s ease !important;
}

.page-card:hover {
    transform: none !important;
    background: #171720 !important;
    border-color: #2E2E3C !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.page-card.active-filter {
    background: #181312 !important;
    border-color: var(--signal-orange) !important;
    box-shadow: 0 0 12px rgba(255, 59, 0, 0.2) !important;
}

.page-avatar-img,
.page-monogram {
    border-radius: 3px !important;
    border: 1px solid #282836 !important;
    width: 38px !important;
    height: 38px !important;
}

.page-hitrate-badge {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* 10. Selector Switches & Tabs */
.switcher-bar {
    background: #111117 !important;
    border-bottom: 1px solid #23232D !important;
    padding: 10px 18px !important;
    min-height: 50px !important;
}

.tab-triggers {
    border-radius: 3px !important;
    background: #09090D !important;
    border: 1px solid #20202A !important;
    height: 36px !important;
    padding: 2px !important;
    gap: 2px !important;
}

.tab-btn {
    border-radius: 2px !important;
    height: 30px !important;
    padding: 0 14px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    transition: all 0.15s ease !important;
}

.tab-btn:hover {
    background: #15151E !important;
    color: var(--ink-white) !important;
}

.tab-btn.active {
    background: #1C1C26 !important;
    border: 1px solid #333344 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #FFF !important;
}

.tab-badge {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 9.5px !important;
    background: #232330 !important;
    border: 1px solid #323242 !important;
    padding: 1px 5px !important;
}

.view-mode-toggle {
    border-radius: 3px !important;
    background: #09090D !important;
    border: 1px solid #20202A !important;
    padding: 2px !important;
    gap: 2px !important;
}

.vm-btn {
    border-radius: 2px !important;
    height: 26px !important;
    padding: 0 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.vm-btn.active {
    background: #1C1C26 !important;
    border: 1px solid #333344 !important;
    color: #FFF !important;
}

.sound-filter-pill {
    border-radius: 2px !important;
    background: #13131A !important;
    border: 1px solid #22222E !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    height: 28px !important;
    padding: 0 12px !important;
    transition: all 0.15s ease !important;
}

.sound-filter-pill:hover {
    background: #1A1A24 !important;
    border-color: #343444 !important;
    color: #FFF !important;
}

.sound-filter-pill.active {
    background: #FF3B00 !important;
    border-color: #FF5A26 !important;
    color: #FFF !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* 11. High-Density Placement Ledger Table */
.ledger-table-wrap {
    border-radius: 3px !important;
    background: #0B0B0E !important;
    border: 1px solid #23232D !important;
}

.ledger-table th {
    background: #121218 !important;
    border-bottom: 1px solid #23232D !important;
    padding: 11px 14px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--ink-muted) !important;
}

.ledger-table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #191922 !important;
    font-size: 12.5px !important;
}

.ledger-table tbody tr:hover {
    background: #13131B !important;
}

/* 12. Badges, ER Pills & Hit Rate Gauges */
.glass-percent-badge,
.glass-percent-pill,
.er-pill {
    border-radius: 2px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    background: #111613 !important;
    border: 1px solid #1E3122 !important;
    color: #38EF7D !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.glass-percent-badge:hover,
.glass-percent-pill:hover,
.er-pill:hover {
    transform: none !important;
    box-shadow: none !important;
}

#fleetHitRate {
    border-radius: 2px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    background: #181210 !important;
    border: 1px solid #3E2116 !important;
    color: #FF5A26 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#statAvgEr,
#cStatEr {
    border-radius: 2px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    padding: 2px 7px !important;
    background: #111613 !important;
    border: 1px solid #1E3122 !important;
    color: #38EF7D !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.glass-progress-track {
    border-radius: 1px !important;
    background: #14141E !important;
    border: 1px solid #222230 !important;
    height: 5px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.glass-progress-fill {
    border-radius: 1px !important;
    box-shadow: none !important;
}

/* 13. Placements Visual Ledger Cards */
.placement-card {
    border-radius: 3px !important;
    background: #0E0E14 !important;
    border: 1px solid #23232D !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: all 0.15s ease !important;
}

.placement-card:hover {
    transform: none !important;
    border-color: #383848 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}

.pc-header {
    background: #121218 !important;
    border-bottom: 1px solid #1F1F2A !important;
    padding: 10px 14px !important;
}

/* 14. Hardware Dock Audio Player */
.transport-bar {
    border-radius: 4px !important;
    background: #0E0E14 !important;
    border: 1px solid #282836 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    height: 56px !important;
    bottom: 16px !important;
}

.transport-tag {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 2px 6px !important;
}

.transport-play {
    border-radius: 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
}

.transport-scrubber {
    border-radius: 1px !important;
    background: #1C1C26 !important;
    height: 4px !important;
}

.transport-fill {
    border-radius: 1px !important;
}

/* 15. Private Music Revenue Vault Components */
.owner-vault-banner {
    border-radius: 4px !important;
    background: #0D120F !important;
    border: 1px solid #1C2D20 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 18px 22px !important;
    margin-bottom: 16px !important;
}

.owner-kpi-card {
    border-radius: 4px !important;
    background: #0E0E13 !important;
    border: 1px solid #23232D !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 16px 18px !important;
}

.owner-kpi-card:hover {
    transform: none !important;
    border-color: #383848 !important;
}

.okpi-label {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
}

.okpi-value {
    font-family: var(--font-mono) !important;
    font-size: 24px !important;
}

.owner-rate-bar {
    border-radius: 4px !important;
    background: #0E0E13 !important;
    border: 1px solid #23232D !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 12px 20px !important;
    margin-bottom: 18px !important;
}

.rate-inputs input {
    border-radius: 2px !important;
    background: #09090D !important;
    border: 1px solid #242432 !important;
    color: var(--ink-white) !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    height: 30px !important;
}

/* 16. Studio Modals & Dialogs */
.modal-sheet {
    border-radius: 4px !important;
    background: #101016 !important;
    border: 1px solid #2D2D3C !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sheet-close {
    border-radius: 2px !important;
}

/* ==========================================================================
   PHONE & PC RESPONSIVE ARCHITECTURE + CLIPPING OPS STYLES
   Flawless UX across Mobile (iPhone/Android), Tablets, and High-Res Displays
   ========================================================================== */

/* 1. Fluid Mobile Layout Container */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100%;
}

.registry-container {
    width: 100% !important;
    max-width: 1720px !important;
    padding: 0 20px !important;
}

/* 2. Mobile Viewport Section Switcher */
.mobile-section-switcher {
    display: none;
    margin-bottom: 14px;
    background: #0C0C10;
    border: 1px solid #23232D;
    border-radius: 4px;
    padding: 4px;
    gap: 4px;
}

.mobile-switch-btn {
    flex: 1;
    height: 38px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--ink-silver);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mobile-switch-btn.active {
    background: #1C1C26;
    border-color: #333344;
    color: var(--ink-white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 3. Clipping Operations Grid & Cards */
.sound-dispatch-card {
    background: #14141B;
    border: 1px solid #242432;
    border-radius: 3px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.15s ease;
}

.sound-dispatch-card:hover {
    border-color: #38384C;
    background: #181822;
}

.clip-progress-rail {
    height: 6px;
    background: #1E1E28;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}

.clip-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--signal-orange), var(--signal-green));
    border-radius: 2px;
}

/* ==========================================================================
   BREAKPOINT 1: TABLET & COMPACT DESKTOP (<= 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
    .ledger-metrics {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .clipping-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .editorial-split {
        grid-template-columns: 320px 1fr !important;
        gap: 16px !important;
    }
}

/* ==========================================================================
   BREAKPOINT 2: MEDIUM TABLET & LARGE PHONES (<= 992px)
   ========================================================================== */
@media (max-width: 992px) {
    .registry-container {
        padding: 0 14px !important;
    }

    .mobile-section-switcher {
        display: flex !important;
    }

    .editorial-split {
        display: block !important;
    }

    /* By default on tablet/mobile, toggle between fleet and workspace */
    .roster-column {
        display: block !important;
        margin-bottom: 16px !important;
    }

    .content-column {
        display: none !important;
    }

    /* Active view state controlled via JS */
    .editorial-split.show-workspace .roster-column {
        display: none !important;
    }
    .editorial-split.show-workspace .content-column {
        display: flex !important;
    }

    .clipping-tables-split {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   BREAKPOINT 3: MOBILE PHONES (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .spec-bar {
        height: auto !important;
        padding: 8px 12px !important;
        font-size: 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .spec-bar-left, .spec-bar-right {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .brand-header {
        margin: 8px auto 12px !important;
        padding: 10px 12px !important;
        position: static !important;
    }

    .header-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .brand-lockup {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .header-controls {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        gap: 6px !important;
    }

    .search-field {
        width: 100% !important;
        margin-bottom: 4px !important;
    }

    .search-field input {
        width: 100% !important;
        font-size: 14px !important;
    }

    .hw-btn {
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 10.5px !important;
        flex-shrink: 0 !important;
    }

    .artist-command-bar {
        padding: 14px 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .artist-profile-cell {
        width: 100% !important;
        gap: 12px !important;
    }

    .artist-kpis {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .akpi-item {
        width: 100% !important;
        padding: 8px 10px !important;
    }

    .akpi-val {
        font-size: 15px !important;
    }

    .ledger-metrics {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .metric-cell {
        padding: 12px 14px !important;
    }

    .metric-number {
        font-size: 20px !important;
    }

    .metric-meta {
        font-size: 9px !important;
    }

    .auto-radar-strip {
        padding: 12px 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .radar-controls {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .switcher-bar {
        padding: 8px 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .tab-triggers {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        height: 38px !important;
    }

    .tab-btn {
        flex-shrink: 0 !important;
        height: 32px !important;
        padding: 0 10px !important;
        font-size: 10.5px !important;
    }

    .bar-filters {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .filter-controls-row {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .workspace-pane {
        padding: 12px 8px !important;
    }

    .ledger-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ledger-table th, .ledger-table td {
        padding: 8px 10px !important;
        font-size: 11.5px !important;
    }

    .modal-sheet {
        max-width: 96vw !important;
        margin: 10px auto !important;
    }

    .modal-sheet-header {
        padding: 14px 16px !important;
    }

    .modal-sheet-body {
        padding: 16px 14px !important;
        max-height: 70vh !important;
    }

    .transport-bar {
        width: calc(100% - 16px) !important;
        bottom: 8px !important;
        height: 52px !important;
    }

    .transport-inner {
        padding: 0 12px !important;
        gap: 10px !important;
    }

    .transport-left {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .transport-title {
        font-size: 11.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .transport-artist {
        display: none !important;
    }
}

/* ==========================================================================
   BREAKPOINT 4: ULTRA-COMPACT PHONES (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .ledger-metrics {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .metric-number {
        font-size: 18px !important;
    }

    .artist-kpis {
        grid-template-columns: 1fr !important;
    }

    .page-card {
        margin: 4px 6px !important;
        padding: 10px 12px !important;
    }
}