/*
 * Kepler Organic production theme
 * Contract:
 * - information architecture and state behavior: design-taste proposal
 * - tokens, components and measured acceptance: Figma handoff proposal
 * - visible visual language: Organic anchor proposal
 *
 * This file is intentionally loaded after styles.css so the redesign can be
 * rolled back independently without rewriting the dirty legacy stylesheet.
 */

@font-face {
    font-family: "Epilogue";
    src:
        url("fonts/epilogue-latin-wght-normal.woff2") format("woff2"),
        local("Epilogue");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src:
        url("fonts/fraunces-latin-wght-normal.woff2") format("woff2"),
        local("Fraunces");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --organic-sage: #8B9D83;
    --organic-clay: #B08B6E;
    --organic-terracotta: #C66B3D;
    --organic-ochre: #C08E3A;
    --organic-moss: #606C38;
    --organic-sand: #E8DCC7;
    --organic-oat: #D4B895;
    --ink-soil: #2F2A22;
    --text-bark: #4D4338;
    --muted-stone: #74695E;
    --line-root: rgba(96, 108, 56, .24);
    --organic-panel: #F1E7D7;
    --organic-panel-strong: #F6EDDF;
    --organic-panel-muted: #DED0B8;
    --organic-focus: rgba(198, 107, 61, .34);
    --organic-ease: cubic-bezier(.22, .74, .26, 1);
    --organic-radius-layer: 24px;
    --organic-radius-control: 14px;
}

.login-screen {
    --kepler-red: var(--organic-terracotta);
    --kepler-green: var(--organic-moss);
    --kepler-ink: var(--ink-soil);
    --kepler-text: var(--text-bark);
    --kepler-muted: var(--muted-stone);
    --kepler-line: var(--line-root);
    min-height: 100dvh;
    color: var(--text-bark);
    background: var(--organic-sand);
    font-family: "Epilogue", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.login-screen::before {
    opacity: .025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    -webkit-mask-image: none;
    mask-image: none;
}

.kepler-home {
    width: min(1480px, calc(100vw - 44px));
}

.kepler-home-nav {
    margin-top: 16px;
    padding: 0 18px;
    border: 1px solid var(--line-root);
    border-radius: 22px;
    background: rgba(241, 231, 215, .86);
}

.kepler-home-mark {
    background: var(--organic-panel-strong);
    border-radius: 14px;
}

.kepler-home-brand strong {
    color: var(--ink-soil);
}

.kepler-home-nav-action {
    border-color: var(--organic-terracotta);
    border-radius: 14px;
    color: var(--organic-panel-strong);
    background: var(--organic-terracotta);
}

.kepler-home-hero {
    min-height: calc(100dvh - 108px);
    margin-top: 14px;
    padding: 44px 32px 30px;
    border: 1px solid var(--line-root);
    border-radius: 30px;
    background:
        radial-gradient(circle at 82% 34%, rgba(139, 157, 131, .28), transparent 22%),
        radial-gradient(circle at 74% 68%, rgba(198, 107, 61, .16), transparent 18%),
        rgba(241, 231, 215, .72);
}

.kepler-home-hero::before {
    border-color: rgba(96, 108, 56, .18);
    box-shadow: inset 0 0 0 82px rgba(232, 220, 199, .18);
}

.kepler-home-hero::after {
    background: var(--organic-terracotta);
}

.kepler-home-copy {
    min-height: calc(100dvh - 198px);
}

.kepler-home-eyebrow {
    color: var(--muted-stone);
}

.kepler-home-copy h1 {
    max-width: 1240px;
    color: var(--ink-soil);
    font-family: "Fraunces", "Songti SC", serif;
    font-size: clamp(46px, 5.6vw, 92px);
    line-height: 1;
    font-weight: 720;
}

.home-red {
    color: var(--organic-terracotta);
}

.home-green {
    color: var(--organic-moss);
}

.kepler-home-cn {
    color: var(--ink-soil);
    font-family: "Fraunces", "Songti SC", serif;
    font-weight: 720;
}

.kepler-home-bottom p,
.kepler-home-bottom strong {
    color: var(--text-bark);
}

.kepler-home-primary {
    border-color: var(--organic-terracotta);
    border-radius: 14px;
    color: var(--organic-panel-strong);
    background: var(--organic-terracotta);
    box-shadow: none;
}

.kepler-home-footer {
    color: var(--muted-stone);
}

.login-panel-shell {
    background: rgba(47, 42, 34, .48);
    backdrop-filter: blur(12px);
}

.login-panel-title {
    color: var(--ink-soil);
    font-family: "Fraunces", "Songti SC", serif;
}

.login-panel-subtitle,
.login-form label,
.login-message,
.login-legal,
.login-record {
    color: var(--muted-stone);
}

.login-form input {
    color: var(--ink-soil);
    background: var(--organic-panel-strong);
    border-color: var(--line-root);
    border-radius: 14px;
}

.login-form input:focus {
    border-color: var(--organic-terracotta);
    box-shadow: 0 0 0 4px var(--organic-focus);
}

.app-shell {
    --kepler-red: var(--organic-terracotta);
    --kepler-red-dark: #A34F2A;
    --kepler-red-soft: rgba(198, 107, 61, .13);
    --kepler-green: var(--organic-moss);
    --kepler-green-dark: #4F5A32;
    --kepler-green-soft: rgba(96, 108, 56, .13);
    --kepler-orange: var(--organic-ochre);
    --kepler-purple: var(--organic-clay);
    --kepler-ink: var(--ink-soil);
    --kepler-text: var(--text-bark);
    --kepler-muted: var(--muted-stone);
    --kepler-weak: #938678;
    --kepler-line: var(--line-root);
    --kepler-line-soft: rgba(96, 108, 56, .13);
    --kepler-surface: var(--organic-sand);
    --kepler-glass: rgba(241, 231, 215, .92);
    --kepler-glass-strong: rgba(246, 237, 223, .96);
    --kepler-glass-border: rgba(96, 108, 56, .22);
    --kepler-shadow-soft: 0 10px 24px rgba(79, 62, 42, .065);
    --kepler-shadow-card: 0 12px 28px rgba(79, 62, 42, .075);
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    overflow: clip;
    color: var(--text-bark);
    background: var(--organic-sand);
    font-family: "Epilogue", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.platform-sidebar {
    width: 236px;
    min-height: 100dvh;
    color: var(--organic-sand);
    background:
        radial-gradient(circle at 20% 0%, rgba(139, 157, 131, .3), transparent 34%),
        var(--organic-moss);
    border: 0;
    border-radius: 0 28px 28px 0;
    box-shadow: none;
    transition: width 360ms var(--organic-ease);
    backdrop-filter: none;
}

.platform-sidebar.collapsed {
    width: 74px;
}

.platform-brand {
    min-height: 76px;
    height: 76px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(232, 220, 199, .18);
}

.platform-logo.kepler-mark {
    background: var(--organic-sand);
    border-color: rgba(232, 220, 199, .62);
    border-radius: 14px;
}

.platform-name,
.sidebar-account .account-name,
.project-switch-text strong {
    color: var(--organic-panel-strong);
}

.platform-subname,
.sidebar-account .account-project,
.project-switch-text > span {
    color: rgba(241, 231, 215, .7);
}

.sidebar-toggle {
    display: inline-grid;
    place-items: center;
    color: var(--organic-panel);
    border-color: rgba(232, 220, 199, .2);
    border-radius: 12px;
}

.sidebar-toggle:hover,
.platform-sidebar.collapsed .sidebar-toggle {
    color: var(--organic-moss);
    background: var(--organic-sand);
    border-color: rgba(232, 220, 199, .72);
}

.primary-nav {
    gap: 5px;
    padding: 12px 12px;
}

.primary-nav-item {
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    color: rgba(241, 231, 215, .78);
    font-size: 13px;
    font-weight: 700;
    transition:
        color 300ms var(--organic-ease),
        background 300ms var(--organic-ease);
}

.primary-nav-item:hover {
    color: var(--organic-panel-strong);
    background: rgba(232, 220, 199, .1);
}

.primary-nav-item.active {
    color: var(--organic-panel-strong);
    background: rgba(212, 184, 149, .22);
    box-shadow: inset 0 0 0 1px rgba(232, 220, 199, .14);
}

.primary-nav-item.active::before {
    left: 3px;
    top: 10px;
    width: 4px;
    height: 24px;
    background: var(--organic-terracotta);
}

.nav-icon,
.primary-nav-item.active .nav-icon {
    color: currentColor;
}

.primary-nav-separator {
    background: rgba(232, 220, 199, .18);
}

.project-switch-button,
.sidebar-account {
    border-color: rgba(232, 220, 199, .18);
    background: rgba(232, 220, 199, .08);
    color: var(--organic-panel);
    box-shadow: none;
    backdrop-filter: none;
}

.project-switch-button:hover,
.sidebar-account:hover {
    background: rgba(232, 220, 199, .13);
}

.project-switch-mark,
.account-avatar {
    color: var(--organic-panel-strong);
    background: var(--organic-terracotta);
}

.sidebar-logout {
    color: rgba(241, 231, 215, .68);
}

.sidebar-logout:hover {
    color: var(--organic-panel-strong);
    background: rgba(198, 107, 61, .25);
}

.platform-main {
    width: calc(100% - 236px);
    max-width: none;
    min-height: 100dvh;
    background:
        linear-gradient(135deg, rgba(212, 184, 149, .12), transparent 42%),
        var(--organic-sand);
}

.header {
    min-height: 76px;
    top: 14px;
    margin: 14px 22px 0;
    padding: 0 24px;
    color: var(--text-bark);
    background: rgba(241, 231, 215, .96);
    border: 1px solid var(--line-root);
    border-radius: var(--organic-radius-layer);
    box-shadow: none;
    backdrop-filter: blur(14px) saturate(1.08);
}

.header h1,
.panel-header h2,
.panel-header h3,
.coming-soon h2 {
    color: var(--ink-soil);
    font-family: "Fraunces", "Songti SC", serif;
    letter-spacing: 0;
}

.header h1 {
    font-size: 27px;
    font-weight: 760;
}

.module-subtitle {
    color: var(--muted-stone);
}

.tabs {
    min-height: 48px;
    margin: 12px 22px 0;
    padding: 5px 8px;
    gap: 5px;
    background: rgba(212, 184, 149, .34);
    border: 1px solid var(--line-root);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    backdrop-filter: none;
}

.tab {
    min-height: 38px;
    height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    color: var(--text-bark);
    font-size: 13px;
    transition:
        color 300ms var(--organic-ease),
        background 300ms var(--organic-ease);
}

.tab:hover {
    color: var(--organic-moss);
    background: rgba(241, 231, 215, .45);
}

.tab.active {
    color: var(--organic-panel-strong);
    background: var(--organic-moss);
    border-bottom-color: transparent;
}

.date-bar {
    min-height: 54px;
    margin: 0 22px;
    padding: 8px 12px;
    background: rgba(241, 231, 215, .88);
    border: 1px solid var(--line-root);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    backdrop-filter: none;
}

.date-mode-btns,
.project-config-tabs,
#projectConfigPanel .project-config-tabs {
    border-color: var(--line-root) !important;
    background: rgba(212, 184, 149, .28) !important;
    box-shadow: none !important;
}

.date-mode-btn {
    min-height: 34px;
    border-radius: 11px;
    color: var(--text-bark);
}

.date-mode-btn.active,
.project-config-tab.active,
#projectConfigPanel .project-config-tab.active {
    color: var(--organic-panel-strong) !important;
    background: var(--organic-moss) !important;
    box-shadow: none !important;
}

.date-mode-btn:hover:not(.active) {
    color: var(--organic-terracotta);
}

.date-range-hint {
    border-color: var(--line-root);
    color: var(--muted-stone);
    background: rgba(232, 220, 199, .64);
    box-shadow: none;
}

.content {
    width: min(100%, 1480px);
    max-width: 1480px;
    padding: 20px 22px 36px;
}

.platform-admin-panel,
#projectConfigPanel.platform-admin-panel,
.video-assets-library,
.video-assets-breakdown,
.video-assets-config {
    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 20px 22px 36px !important;
}

.card,
.overview-panel,
.room-card,
.pc-card,
.key-product-card,
.alert-summary-card,
.alerts-table-card,
.platform-project-table-card,
.project-info-tile,
#projectConfigPanel .project-info-tile,
.video-assets-content-card,
.video-assets-config-section,
.video-assets-kpi,
.video-assets-toolbar,
.coming-soon-inner {
    color: var(--text-bark);
    background: var(--organic-panel);
    border: 1px solid var(--line-root);
    border-radius: 24px;
    outline: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.card {
    border-radius: 24px;
    padding: 20px 22px;
}

.summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.summary-item {
    min-width: 0;
    min-height: 104px;
    padding: 16px 18px;
    background: rgba(241, 231, 215, .92);
    border: 1px solid var(--line-root);
    border-radius: 22px;
    box-shadow: none;
    backdrop-filter: none;
}

.summary-item:nth-child(3n + 2) {
    background: rgba(212, 184, 149, .28);
}

.summary-item .s-label {
    margin-bottom: 10px;
    color: var(--muted-stone);
}

.summary-item .s-value {
    color: var(--ink-soil);
    font-family: "Epilogue", "PingFang SC", sans-serif;
    font-size: 25px;
    font-variant-numeric: tabular-nums;
}

.card-title,
.video-assets-section-header h3,
.video-assets-config-section-head h3 {
    color: var(--ink-soil);
    font-family: "Fraunces", "Songti SC", serif;
    font-size: 17px;
    font-weight: 720;
}

.card-subtitle,
.panel-header p,
.video-assets-description,
.video-asset-detail-empty {
    color: var(--muted-stone);
}

.overview-mosaic {
    gap: 14px;
}

.overview-panel {
    border-radius: 24px;
}

.overview-panel:nth-child(3n + 2) {
    background: rgba(212, 184, 149, .32);
}

.chart-container {
    background-color: var(--organic-panel-strong);
    border-radius: 18px;
}

.scroll-x {
    overflow-x: auto;
    border: 1px solid rgba(96, 108, 56, .18);
    border-radius: 16px;
    background: var(--organic-panel-strong);
}

table {
    width: 100%;
    background: var(--organic-panel-strong);
    color: var(--text-bark);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

th,
td {
    border-bottom-color: rgba(96, 108, 56, .14);
}

th {
    color: var(--muted-stone);
    background: #DED0B8;
}

td {
    background-color: var(--organic-panel-strong);
}

tbody tr:hover td {
    background-color: rgba(212, 184, 149, .25);
}

.scroll-x, .chart-container, table, thead, tbody, tr, th, td {
    background-image: none;
}

input,
select,
textarea,
.form-group input,
.form-group select,
.audit-filter-row select,
.audit-filter-row input {
    color: var(--ink-soil);
    background: var(--organic-panel-strong);
    border-color: var(--line-root);
    border-radius: var(--organic-radius-control);
}

input::placeholder,
textarea::placeholder {
    color: #8B7E70;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--organic-focus);
    outline-offset: 2px;
}

.btn,
.platform-action-primary,
.platform-action-secondary {
    min-height: 38px;
    border-radius: var(--organic-radius-control);
    transition:
        transform 300ms var(--organic-ease),
        background 300ms var(--organic-ease),
        color 300ms var(--organic-ease);
}

.btn:active,
.primary-nav-item:active,
.tab:active,
.date-mode-btn:active {
    transform: translateY(1px) scale(.99);
}

.btn-primary,
.platform-action-primary {
    color: var(--organic-panel-strong);
    background: var(--organic-terracotta);
    box-shadow: none;
}

.btn-secondary,
.platform-action-secondary {
    color: var(--organic-moss);
    background: rgba(139, 157, 131, .2);
    border: 1px solid rgba(96, 108, 56, .22);
}

.btn-success {
    color: var(--organic-panel-strong);
    background: var(--organic-moss);
}

.btn-danger {
    color: var(--organic-panel-strong);
    background: var(--organic-terracotta);
}

.status-tag,
.verify-ok,
.verify-err,
.verify-loading {
    border-radius: 999px;
    font-weight: 700;
}

.status-tag.active {
    color: var(--organic-moss);
    background: rgba(96, 108, 56, .14);
}

.status-tag.paused,
.status-tag.unverified {
    color: #806020;
    background: rgba(192, 142, 58, .18);
}

.status-tag.stopped {
    color: #9A4526;
    background: rgba(198, 107, 61, .16);
}

.profit-positive,
.s-delta.up {
    color: var(--organic-terracotta) !important;
}

.profit-negative,
.s-delta.down {
    color: var(--organic-moss) !important;
}

.profit-zero,
.s-delta.flat {
    color: var(--ink-soil) !important;
}

.modal-overlay {
    background: rgba(47, 42, 34, .52);
}

.modal,
.legal-modal-card,
.login-panel,
.toast {
    color: var(--text-bark);
    background: var(--organic-panel-strong);
    border-color: var(--line-root);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(47, 42, 34, .16);
}

.modal-close {
    color: var(--organic-moss);
    background: rgba(139, 157, 131, .18);
    border-radius: 12px;
}

.empty-state,
.coming-soon {
    color: var(--muted-stone);
}

.loading {
    inset: auto 18px 18px auto;
    width: auto;
    min-width: 132px;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--line-root);
    border-radius: 999px;
    color: var(--muted-stone);
    background: rgba(241, 231, 215, .96);
    box-shadow: 0 10px 24px rgba(47, 42, 34, .1);
    backdrop-filter: blur(10px);
}

.loading::after {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    vertical-align: -3px;
    border-color: rgba(96, 108, 56, .22);
    border-top-color: var(--organic-terracotta);
}

.error-msg {
    margin-bottom: 14px;
    padding: 12px 14px;
    color: #8E3F24;
    background: rgba(198, 107, 61, .12);
    border: 1px solid rgba(198, 107, 61, .26);
    border-radius: 14px;
}

.empty-state {
    min-height: 112px;
    display: grid;
    place-items: center;
    color: var(--muted-stone);
}

.account-reconciliation-table,
.account-reconciliation-table td,
.account-reconciliation-table .account-reconciliation-column-account,
.account-reconciliation-table .account-reconciliation-column-period,
.account-reconciliation-daily-row td,
.account-reconciliation-daily-row .account-reconciliation-column-account {
    background: var(--organic-panel-strong);
}

.account-reconciliation-table th,
.account-reconciliation-table th.account-reconciliation-column-account,
.account-reconciliation-table th.account-reconciliation-column-period {
    background: var(--organic-panel-muted);
}

.account-reconciliation-main-row:hover td,
.account-reconciliation-main-row:hover .account-reconciliation-column-account,
.account-reconciliation-main-row:hover .account-reconciliation-column-period {
    background: rgba(212, 184, 149, .25);
}

.account-reconciliation-scroll,
.account-reconciliation-column-menu,
.account-reconciliation-column-menu-button,
.account-reconciliation-expand {
    color: var(--text-bark);
    background: var(--organic-panel-strong);
    border-color: var(--line-root);
}

#projectConfigPanel .project-info-tile {
    color: var(--text-bark) !important;
    background: var(--organic-panel) !important;
    border-color: var(--line-root) !important;
    border-radius: 24px !important;
    box-shadow: none !important;
}

#projectConfigPanel .project-config-tab {
    color: var(--muted-stone) !important;
}

#videoAssetsPanel.video-assets-panel {
    background: transparent;
}

#videoAssetsPanel .video-assets-content-card,
#videoAssetsPanel .video-assets-config-section,
#videoAssetsPanel .video-assets-summary-card,
#videoAssetsPanel .video-assets-template-card,
#videoAssetsPanel .video-assets-list-row,
#videoAssetsPanel .video-assets-config-row,
#videoAssetsPanel .video-assets-coverage-issue,
#videoAssetsPanel .video-assets-aggregation-row,
#videoAssetsPanel .video-assets-hot-row {
    color: var(--text-bark);
    background: var(--organic-panel);
    border-color: var(--line-root);
    border-radius: 20px;
    box-shadow: none;
}

#videoAssetsPanel .video-assets-list-row.is-selected,
#videoAssetsPanel .video-assets-clickable-row.is-selected {
    background: rgba(198, 107, 61, .12);
}

#videoAssetsPanel .video-assets-table-scroll,
#videoAssetsPanel .video-assets-table-scroll table,
#videoAssetsPanel .video-assets-table-scroll td,
#videoAssetsPanel .video-assets-raw-fields table,
#videoAssetsPanel .video-assets-raw-fields td {
    background: var(--organic-panel-strong);
}

#videoAssetsPanel .video-assets-table-scroll th,
#videoAssetsPanel .video-assets-raw-fields th {
    background: var(--organic-panel-muted);
}

#videoAssetsPanel .video-assets-config-form input,
#videoAssetsPanel .video-assets-config-form select,
#videoAssetsPanel .video-assets-library-form input,
#videoAssetsPanel .video-assets-library-form select,
#videoAssetsPanel .video-assets-library-form textarea,
#videoAssetsPanel .video-assets-upload-form input,
#videoAssetsPanel .video-assets-filter-row input,
#videoAssetsPanel .video-assets-filter-row select {
    color: var(--ink-soil);
    background: var(--organic-panel-strong);
    border-color: var(--line-root);
    border-radius: var(--organic-radius-control);
}

.config-sync-review,
.roi-gap-review {
    color: var(--text-bark);
    background: var(--organic-panel-strong);
    border-color: var(--line-root);
    border-radius: 24px;
}

.config-sync-summary,
.roi-gap-summary {
    background: var(--line-root);
}

.config-sync-summary > div,
.config-sync-review-footer,
.roi-gap-review-footer {
    background: var(--organic-panel);
}

.config-sync-field input,
.roi-gap-input {
    color: var(--ink-soil);
    background: var(--organic-panel-strong);
    border-color: var(--line-root);
    border-radius: var(--organic-radius-control);
}

.config-sync-conflict-list,
.roi-gap-group {
    color: var(--text-bark);
    background: var(--organic-panel);
    border-color: var(--line-root);
}

.syncing,
[data-state="syncing"] {
    animation: organic-breathe 2.8s var(--organic-ease) infinite;
}

@keyframes organic-breathe {
    0%, 100% { opacity: .78; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}

@media (max-width: 1180px) {
    .content,
    .platform-admin-panel,
    #projectConfigPanel.platform-admin-panel,
    .video-assets-library,
    .video-assets-breakdown,
    .video-assets-config {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .overview-mosaic {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .overview-panel {
        grid-column: span 3;
    }

    .overview-panel-full {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .app-shell {
        width: 100%;
        flex-direction: column;
        overflow-x: hidden;
    }

    .platform-sidebar,
    .platform-sidebar.collapsed {
        position: sticky;
        top: 0;
        width: 100%;
        min-height: auto;
        border: 0;
        border-radius: 0 0 22px 22px;
    }

    .platform-brand,
    .platform-sidebar.collapsed .platform-brand {
        min-height: 64px;
        height: 64px;
        justify-content: flex-start;
        padding: 10px 16px;
    }

    .platform-sidebar .sidebar-toggle,
    .platform-sidebar.collapsed .sidebar-toggle {
        position: static;
        display: inline-grid;
        margin-left: auto;
        transform: none;
    }

    .platform-sidebar.collapsed .platform-brand-text {
        display: block;
    }

    .platform-sidebar.collapsed .primary-nav,
    .platform-sidebar.collapsed .sidebar-project-switcher,
    .platform-sidebar.collapsed .sidebar-account {
        display: none;
    }

    .platform-sidebar:not(.collapsed) .primary-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        padding: 8px 12px 10px;
        overflow: visible;
    }

    .platform-sidebar:not(.collapsed) .primary-nav-item {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .platform-sidebar:not(.collapsed) .sidebar-project-switcher {
        display: block;
    }

    .platform-sidebar:not(.collapsed) .sidebar-account {
        display: grid;
    }

    .platform-main {
        width: 100%;
    }

    .header {
        position: relative;
        top: auto;
        margin: 12px 14px 0;
        padding: 0 18px;
        border-radius: 20px;
    }

    .header h1 {
        font-size: 24px;
    }

    .tabs {
        margin: 10px 14px 0;
    }

    .date-bar {
        margin: 0 14px;
    }

    .content,
    .platform-admin-panel,
    #projectConfigPanel.platform-admin-panel,
    .video-assets-library,
    .video-assets-breakdown,
    .video-assets-config {
        padding: 16px 14px 30px !important;
    }

    .summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-mosaic {
        grid-template-columns: 1fr;
    }

    .overview-panel,
    .overview-panel-full {
        grid-column: 1;
    }

    .card-header-row,
    .panel-header {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 560px) {
    .platform-sidebar:not(.collapsed) .primary-nav {
        grid-template-columns: 1fr;
    }

    .header {
        min-height: 70px;
    }

    .header h1 {
        font-size: 22px;
    }

    .tabs {
        padding: 5px;
    }

    .tab {
        padding: 0 12px;
    }

    .date-bar {
        align-items: stretch;
    }

    .date-mode-btns {
        width: 100%;
        overflow-x: auto;
    }

    .summary-row {
        grid-template-columns: 1fr;
    }

    .summary-item {
        min-height: 100px;
    }

    .card,
    .overview-panel,
    .video-assets-content-card,
    .video-assets-config-section {
        padding: 16px;
        border-radius: 20px;
    }

    .chart-container {
        width: 100%;
        min-width: 0;
        height: 260px;
    }

    .overview-trend-card {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}