:root {
    color-scheme: light;
    --rn-navy: #073b61;
    --rn-navy-strong: #052d4b;
    --rn-cyan: #12b7c4;
    --rn-cyan-rgb: 18, 183, 196;
    --rn-primary: #08658e;
    --rn-page: #f3f7fa;
    --rn-surface: rgba(255, 255, 255, .92);
    --rn-surface-solid: #fff;
    --rn-border: #dbe5eb;
    --rn-muted: #647886;
    --rn-text: #263c49;
    --rn-shadow: 0 16px 50px rgba(4, 47, 75, .09);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --rn-navy: #e5f4fa;
    --rn-navy-strong: #fff;
    --rn-cyan: #2ed0da;
    --rn-cyan-rgb: 46, 208, 218;
    --rn-primary: #27b8cc;
    --rn-page: #07121b;
    --rn-surface: rgba(14, 31, 43, .94);
    --rn-surface-solid: #0e1f2b;
    --rn-border: #263d4b;
    --rn-muted: #98acb8;
    --rn-text: #dce8ed;
    --rn-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--rn-text);
    background:
        radial-gradient(circle at 8% 8%, rgba(var(--rn-cyan-rgb), .11), transparent 26rem),
        linear-gradient(145deg, var(--rn-page), color-mix(in srgb, var(--rn-page) 90%, var(--rn-primary)));
    background-attachment: fixed;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

button, select, audio { font: inherit; }
button, a, select { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.archive-page { min-height: calc(100vh - 72px); padding: 1.5rem 1rem 3rem; }
.archive-container { width: min(100%, 1040px); margin: 0 auto; }
.page-heading { padding-right: 3.5rem; margin-bottom: 1.25rem; }
.eyebrow { color: var(--rn-cyan); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.page-heading h1 { margin: .25rem 0; color: var(--rn-navy); font-size: clamp(1.9rem, 5vw, 2.65rem); font-weight: 780; letter-spacing: -.04em; }
.page-heading p { margin: 0; color: var(--rn-muted); }

.theme-toggle {
    position: fixed;
    z-index: 20;
    top: calc(1rem + env(safe-area-inset-top));
    right: calc(1rem + env(safe-area-inset-right));
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--rn-navy);
    background: var(--rn-surface-solid);
    border: 1px solid var(--rn-border);
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(5, 45, 75, .09);
    cursor: pointer;
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--rn-cyan); border-color: var(--rn-cyan); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-moon, [data-theme="dark"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: block; }

.system-message, .date-panel, .activity-panel, .recordings-panel {
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 1rem;
    box-shadow: var(--rn-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.system-message { display: grid; gap: .2rem; margin-bottom: 1rem; padding: 1rem 1.15rem; border-color: #dc9f55; }
.system-message strong { color: #a95c00; }
.system-message span { color: var(--rn-muted); font-size: .8rem; }
.system-message code { color: inherit; }

.date-panel { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px auto; align-items: stretch; gap: .75rem; padding: .75rem; }
.date-arrow { display: grid; place-items: center; color: var(--rn-primary); background: rgba(var(--rn-cyan-rgb), .09); border: 1px solid transparent; border-radius: .7rem; }
.date-arrow:hover, .date-arrow:focus-visible { color: var(--rn-navy); border-color: var(--rn-cyan); outline: none; }
.date-arrow.is-disabled { color: var(--rn-muted); opacity: .35; pointer-events: none; }
.date-arrow svg { width: 22px; height: 22px; }
.date-select-wrap { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.date-select-wrap > span { color: var(--rn-muted); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.date-select-wrap > select.bs-select { width: 100%; min-height: 30px; padding: .15rem 2rem .15rem 0; color: var(--rn-navy); background: transparent; border: 0; outline: none; font-size: clamp(.86rem, 2.5vw, 1rem); font-weight: 750; cursor: pointer; }
.date-select-wrap .bootstrap-select { width: 100% !important; }
.date-select-wrap .bootstrap-select > .dropdown-toggle {
    min-height: 30px;
    padding: .12rem 2rem .12rem 0;
    color: var(--rn-navy);
    background: transparent;
    border: 0;
    border-radius: .45rem;
    font-size: clamp(.86rem, 2.5vw, 1rem);
    font-weight: 750;
    line-height: 1.35;
    box-shadow: none;
}
.date-select-wrap .bootstrap-select > .dropdown-toggle::after { position: absolute; top: 50%; right: .35rem; margin: 0; color: var(--rn-primary); transform: translateY(-50%); }
.date-select-wrap .bootstrap-select > .dropdown-toggle:hover,
.date-select-wrap .bootstrap-select > .dropdown-toggle:focus,
.date-select-wrap .bootstrap-select.show > .dropdown-toggle { color: var(--rn-navy); background: rgba(var(--rn-cyan-rgb), .07); border: 0; box-shadow: 0 0 0 .2rem rgba(var(--rn-cyan-rgb), .11); outline: 0 !important; }
.date-select-wrap .bootstrap-select .filter-option-inner-inner { overflow: hidden; text-overflow: ellipsis; }
.today-button { min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; padding: .55rem .7rem; color: var(--rn-primary); background: rgba(var(--rn-cyan-rgb), .08); border: 1px solid var(--rn-border); border-radius: .7rem; font-size: .72rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.today-button:hover, .today-button:focus-visible { color: var(--rn-navy); background: rgba(var(--rn-cyan-rgb), .13); border-color: var(--rn-cyan); outline: none; }
.today-button.is-current { color: #fff; background: var(--rn-primary); border-color: var(--rn-primary); }
.today-button.is-current:hover, .today-button.is-current:focus-visible { color: #fff; background: var(--rn-navy-strong); border-color: var(--rn-navy-strong); }
.today-button svg { width: 17px; height: 17px; }
.today-short { display: none; }

.bootstrap-select .dropdown-menu,
.bs-container .dropdown-menu { padding: .4rem; color: var(--rn-text); background: var(--rn-surface-solid); border: 1px solid var(--rn-border); border-radius: .75rem; box-shadow: 0 14px 38px rgba(4, 47, 75, .17); }
.bootstrap-select .dropdown-item,
.bs-container .dropdown-item { padding: .58rem .7rem; color: var(--rn-text); border-radius: .5rem; font-size: .82rem; font-weight: 550; }
.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus,
.bs-container .dropdown-item:hover,
.bs-container .dropdown-item:focus { color: var(--rn-navy); background: rgba(var(--rn-cyan-rgb), .1); }
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active,
.bs-container .dropdown-item.active,
.bs-container .dropdown-item:active { color: #fff; background: var(--rn-primary); }
.bootstrap-select .bs-searchbox,
.bs-container .bs-searchbox { padding: .15rem .15rem .45rem; }
.bootstrap-select .bs-searchbox .form-control,
.bs-container .bs-searchbox .form-control { min-height: 42px; color: var(--rn-text); background: var(--rn-page); border: 1px solid var(--rn-border); border-radius: .55rem; font-size: .86rem; }
.bootstrap-select .bs-searchbox .form-control:focus,
.bs-container .bs-searchbox .form-control:focus { border-color: var(--rn-cyan); box-shadow: 0 0 0 .2rem rgba(var(--rn-cyan-rgb), .13); outline: 0; }
.bootstrap-select .no-results,
.bs-container .no-results { margin: .2rem; padding: .7rem; color: var(--rn-muted); background: rgba(var(--rn-cyan-rgb), .06); border-radius: .5rem; font-size: .78rem; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: .85rem 0; }
.stat-card { min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .85rem; background: var(--rn-surface); border: 1px solid var(--rn-border); border-radius: .85rem; box-shadow: 0 8px 28px rgba(5, 45, 75, .045); }
.stat-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--rn-primary); background: rgba(var(--rn-cyan-rgb), .1); border-radius: .68rem; }
.stat-icon svg { width: 21px; height: 21px; }
.stat-card div { min-width: 0; }
.stat-card span:not(.stat-icon) { display: block; overflow: hidden; color: var(--rn-muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.stat-card strong { display: block; overflow: hidden; margin-top: .08rem; color: var(--rn-navy); font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }

.activity-panel { margin-bottom: .85rem; overflow: hidden; }
.panel-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--rn-border); }
.panel-heading h2 { margin: 0; color: var(--rn-navy); font-size: 1rem; font-weight: 750; }
.panel-heading span { color: var(--rn-muted); font-size: .72rem; }
.peak-badge { padding: .3rem .5rem; color: var(--rn-primary) !important; background: rgba(var(--rn-cyan-rgb), .1); border-radius: 2rem; font-weight: 750; }
.chart-scroll { overflow-x: auto; padding: 1rem 1.15rem .65rem; }
.hour-chart { min-width: 650px; }
.hour-chart[hidden] { display: none; }
.minute-chart { min-width: 960px; --chart-columns: 60; --chart-gap: 3px; }
.chart-plot { height: 126px; display: grid; grid-template-columns: repeat(var(--chart-columns, 24), 1fr); gap: var(--chart-gap, 6px); align-items: end; padding-top: .25rem; background: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, rgba(100, 120, 134, .09) 41px); border-bottom: 1px solid var(--rn-border); }
.chart-column { height: 100%; min-width: 0; display: flex; align-items: flex-end; padding: 0; background: transparent; border: 0; border-radius: .32rem .32rem 0 0; cursor: pointer; }
.chart-column:hover, .chart-column:focus-visible { background: rgba(var(--rn-cyan-rgb), .09); outline: none; }
.chart-column:focus-visible { box-shadow: 0 0 0 3px rgba(var(--rn-cyan-rgb), .24); }
.chart-column[aria-pressed="true"] { background: rgba(var(--rn-cyan-rgb), .14); }
.chart-column[aria-pressed="true"] .chart-value { background: var(--rn-navy); box-shadow: 0 -4px 16px rgba(var(--rn-cyan-rgb), .28); }
.chart-column:disabled { cursor: default; }
.chart-column:disabled:hover { background: transparent; }
.chart-value { width: 100%; min-height: 3px; display: block; background: linear-gradient(180deg, var(--rn-cyan), var(--rn-primary)); border-radius: .25rem .25rem 0 0; box-shadow: 0 -4px 12px rgba(var(--rn-cyan-rgb), .12); transition: height .3s ease; }
.chart-value.is-empty { background: var(--rn-border); box-shadow: none; }
.chart-axis { height: 23px; display: grid; grid-template-columns: repeat(var(--chart-columns, 24), 1fr); gap: var(--chart-gap, 6px); }
.chart-axis span { position: relative; padding-top: .38rem; color: var(--rn-muted); font-size: .58rem; line-height: 1; text-align: center; }
.chart-axis span.is-major::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 4px; background: var(--rn-border); }

.recordings-panel { overflow: hidden; }
.recordings-heading { min-height: 76px; }
.panel-title-wrap { min-width: 0; display: flex; align-items: center; gap: .65rem; }
.panel-title-wrap > div { min-width: 0; }
.hour-back { flex: 0 0 auto; min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: 0 .55rem; color: var(--rn-primary); background: rgba(var(--rn-cyan-rgb), .09); border: 1px solid var(--rn-border); border-radius: .6rem; font-size: .67rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.hour-back:hover, .hour-back:focus-visible { color: var(--rn-navy); border-color: var(--rn-cyan); outline: none; }
.hour-back svg { width: 17px; height: 17px; }
.hour-back span { color: inherit; font-size: inherit; }
.hour-back[hidden] { display: none; }
.recording-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; }
.continuous-control { position: relative; display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: var(--rn-muted); cursor: pointer; user-select: none; }
.continuous-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.continuous-switch { position: relative; flex: 0 0 34px; width: 34px; height: 20px; background: color-mix(in srgb, var(--rn-muted) 25%, transparent); border: 1px solid var(--rn-border); border-radius: 2rem; transition: background .18s, border-color .18s, box-shadow .18s; }
.continuous-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--rn-surface-solid); border-radius: 50%; box-shadow: 0 2px 6px rgba(4, 47, 75, .2); transition: transform .18s; }
.continuous-control input:checked + .continuous-switch { background: var(--rn-primary); border-color: var(--rn-primary); }
.continuous-control input:checked + .continuous-switch::after { transform: translateX(14px); }
.continuous-control input:focus-visible + .continuous-switch { box-shadow: 0 0 0 .2rem rgba(var(--rn-cyan-rgb), .16); }
.continuous-label { color: var(--rn-navy) !important; font-size: .68rem !important; font-weight: 700; white-space: nowrap; }
.source-filter { display: flex; gap: .25rem; padding: .25rem; background: color-mix(in srgb, var(--rn-page) 75%, transparent); border: 1px solid var(--rn-border); border-radius: .65rem; }
.source-filter button { min-height: 34px; padding: .35rem .65rem; color: var(--rn-muted); background: transparent; border: 0; border-radius: .45rem; font-size: .68rem; font-weight: 700; cursor: pointer; }
.source-filter button:hover, .source-filter button:focus-visible { color: var(--rn-primary); outline: none; }
.source-filter button.is-active { color: white; background: var(--rn-primary); box-shadow: 0 4px 12px rgba(4, 79, 114, .18); }
.recording-list { display: grid; }
.recording-row { min-width: 0; display: grid; grid-template-columns: 42px minmax(90px, .8fr) minmax(120px, 1fr) 75px 34px; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rn-border); transition: background .15s; }
.recording-row:last-child { border-bottom: 0; }
.recording-row:hover, .recording-row.is-playing { background: rgba(var(--rn-cyan-rgb), .055); }
.recording-row.is-hour-focus { background: rgba(var(--rn-cyan-rgb), .11); box-shadow: inset 4px 0 0 var(--rn-cyan); }
.recording-row:focus-visible { outline: 3px solid rgba(var(--rn-cyan-rgb), .24); outline-offset: -3px; }
.recording-row[hidden] { display: none; }
.play-button, .dock-play { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: white; background: var(--rn-primary); border: 0; border-radius: 50%; box-shadow: 0 7px 18px rgba(4, 79, 114, .18); cursor: pointer; }
.play-button:hover, .play-button:focus-visible, .dock-play:hover, .dock-play:focus-visible { background: var(--rn-navy-strong); outline: 3px solid rgba(var(--rn-cyan-rgb), .18); }
.play-button svg, .dock-play svg { width: 19px; height: 19px; }
.pause-icon, .is-playing .play-icon { display: none; }
.is-playing .pause-icon { display: block; }
.recording-time strong, .recording-time span { display: block; }
.recording-time strong { color: var(--rn-navy); font-size: .9rem; }
.recording-time span { margin-top: .08rem; color: var(--rn-muted); font-size: .61rem; }
.recording-subline { display: flex; align-items: center; gap: .45rem; }
.recording-duration { display: inline-flex !important; align-items: center; gap: .2rem; color: var(--rn-primary) !important; font-weight: 720; white-space: nowrap; }
.recording-duration svg { width: 11px; height: 11px; }
.source-badge { width: fit-content; max-width: 100%; overflow: hidden; padding: .28rem .48rem; border-radius: 2rem; font-size: .66rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.source-radio { color: var(--rn-primary); background: rgba(var(--rn-cyan-rgb), .1); }
.source-zello { color: #82641b; background: rgba(226, 181, 54, .13); }
[data-theme="dark"] .source-zello { color: #f0ce70; }
.recording-size { color: var(--rn-muted); font-size: .68rem; text-align: right; }
.download-button, .close-player { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--rn-muted); background: transparent; border: 1px solid transparent; border-radius: .55rem; cursor: pointer; }
.download-button:hover, .download-button:focus-visible, .close-player:hover, .close-player:focus-visible { color: var(--rn-primary); background: rgba(var(--rn-cyan-rgb), .08); border-color: var(--rn-border); outline: none; }
.download-button svg, .close-player svg { width: 18px; height: 18px; }
.empty-state { display: grid; gap: .25rem; place-items: center; padding: 3rem 1rem; color: var(--rn-muted); text-align: center; }
.empty-state strong { color: var(--rn-navy); }
.empty-state span { font-size: .75rem; }

.player-dock { position: sticky; z-index: 15; bottom: 0; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--rn-page) 70%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.player-dock[hidden] { display: none; }
.player-inner { width: min(100%, 1040px); min-height: 66px; display: grid; grid-template-columns: 42px minmax(150px, .55fr) minmax(220px, 1fr) 34px; align-items: center; gap: .8rem; margin: 0 auto; padding: .55rem .65rem; background: var(--rn-surface-solid); border: 1px solid var(--rn-border); border-radius: .9rem; box-shadow: 0 14px 45px rgba(4, 47, 75, .18); }
.now-playing { min-width: 0; }
.now-playing span, .now-playing strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-playing span { color: var(--rn-muted); font-size: .59rem; text-transform: uppercase; letter-spacing: .06em; }
.now-playing strong { margin-top: .12rem; color: var(--rn-navy); font-size: .77rem; }
.player-inner audio { width: 100%; height: 38px; }
.site-footer { min-height: 72px; display: flex; align-items: center; justify-content: center; gap: .55rem; padding: 1rem; color: var(--rn-muted); font-size: .7rem; font-weight: 650; }
.footer-dot { width: 4px; height: 4px; background: var(--rn-cyan); border-radius: 50%; }

@media (max-width: 760px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .recording-row { grid-template-columns: 42px minmax(85px, .8fr) minmax(105px, 1fr) 34px; gap: .6rem; }
    .recording-size { display: none; }
    .player-inner { grid-template-columns: 42px minmax(0, 1fr) 34px; }
    .player-inner audio { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 520px) {
    .archive-page { padding: 1.2rem .75rem 2rem; }
    .page-heading p { font-size: .82rem; }
    .date-panel { grid-template-columns: 42px minmax(0, 1fr) 42px auto; gap: .45rem; padding: .55rem; }
    .date-select-wrap .bootstrap-select > .dropdown-toggle { font-size: .88rem; }
    .today-button { min-width: 52px; padding: .45rem .5rem; }
    .today-long { display: none; }
    .today-short { display: inline; }
    .bootstrap-select .dropdown-item,
    .bs-container .dropdown-item { min-height: 42px; display: flex; align-items: center; font-size: .88rem; }
    .bootstrap-select .bs-searchbox .form-control,
    .bs-container .bs-searchbox .form-control { font-size: 16px; }
    .stats-grid { gap: .5rem; }
    .stat-card { gap: .55rem; padding: .65rem; }
    .stat-icon { flex-basis: 34px; width: 34px; height: 34px; }
    .stat-card strong { font-size: .9rem; }
    .panel-heading { padding: .8rem; }
    .recordings-heading { align-items: flex-start; flex-direction: column; }
    .panel-title-wrap { width: 100%; }
    .recording-controls { width: 100%; flex-wrap: wrap; justify-content: space-between; }
    .source-filter { width: 100%; }
    .source-filter button { flex: 1; }
    .recording-row { grid-template-columns: 40px minmax(76px, .65fr) minmax(0, 1fr) 30px; gap: .5rem; padding: .65rem .7rem; }
    .play-button { width: 40px; height: 40px; }
    .source-badge { font-size: .59rem; }
    .download-button { width: 30px; }
    .player-dock { padding-inline: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}