:root {
    color-scheme: dark;
    --bg: #0b0f14;
    --panel: #131a23;
    --panel2: #18212c;
    --line: #263244;
    --text: #e7edf5;
    --muted: #91a0b3;
    --accent: #4e79a7;
    --accent2: #64d98b;
    --danger: #ff6b6b;
    --warning: #f4c95d;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; gap: 20px; align-items: center; justify-content: space-between;
    padding: 14px 26px; background: rgba(11,15,20,.94); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}
.brand { display:flex; align-items:baseline; gap:9px; font-weight:800; }
.brand-main { letter-spacing:.2px; }
.version { color: var(--accent2); font-size:.82rem; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:16px; color:#cdd7e5; }
nav a:hover, .link-button:hover { color:white; }
.inline { display:inline; margin:0; }
.link-button { background:none; border:0; color:#cdd7e5; padding:0; cursor:pointer; font:inherit; }
.container { width:min(1500px, 96vw); margin:28px auto 60px; }
.hero, .page-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.hero h1, .page-head h1 { margin:0 0 6px; font-size:clamp(1.8rem, 4vw, 3rem); }
.hero p, .page-head p { margin:0; color:var(--muted); }
.user-chip { padding:10px 14px; background:var(--panel); border:1px solid var(--line); border-radius:999px; color:#cad5e2; }
.module-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.module-card { display:block; min-height:220px; padding:24px; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:18px; transition:.18s ease; }
.module-card:not(.disabled):hover { transform:translateY(-2px); border-color:#426b99; box-shadow:0 16px 40px rgba(0,0,0,.28); }
.module-card.disabled { opacity:.58; }
.module-card h2 { margin:12px 0 8px; }
.module-card p { color:var(--muted); line-height:1.55; }
.module-icon { font-size:2.2rem; color:var(--accent2); }
.module-status { display:inline-block; margin-top:12px; font-size:.84rem; color:var(--accent2); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; }
.panel h1,.panel h2 { margin-top:0; }
.narrow { max-width:620px; }
.login-wrap { min-height:70vh; display:grid; place-items:center; }
.login-panel { width:min(450px,100%); }
label { display:block; font-weight:650; margin:0 0 15px; }
input, select {
    width:100%; margin-top:7px; padding:11px 12px; border:1px solid #334156; border-radius:10px;
    background:#0e141c; color:var(--text); outline:none;
}
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(78,121,167,.2); }
button, .button {
    display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px;
    border:1px solid #547fae; border-radius:10px; background:#365f8d; color:white; cursor:pointer; font-weight:700;
}
button:hover,.button:hover { filter:brightness(1.1); }
.secondary { background:#171f2a; border-color:#34445a; }
.small { min-height:32px; padding:6px 10px; font-size:.84rem; }
.flash { margin:0 0 18px; padding:13px 15px; border-radius:10px; border:1px solid var(--line); background:var(--panel); }
.flash.error { border-color:#7e3838; color:#ffc4c4; background:#2a1719; }
.flash.success { border-color:#2f6b47; color:#bdf0cd; background:#122419; }
.muted { color:var(--muted); }
.split { display:grid; grid-template-columns:minmax(300px,.7fr) minmax(500px,1.3fr); gap:18px; align-items:start; }
.check { display:flex; align-items:center; gap:8px; font-weight:600; }
.check input { width:auto; margin:0; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { color:#b7c4d4; font-size:.82rem; letter-spacing:.02em; text-transform:uppercase; }
tbody tr:hover { background:rgba(255,255,255,.018); }
.actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.actions form { margin:0; }
.badge { display:inline-flex; padding:4px 8px; border:1px solid #3b4b61; border-radius:999px; font-size:.78rem; white-space:nowrap; }
.badge.ok { color:#b8f1ca; border-color:#336b46; }
.badge.off { color:#d1d8e1; }
.badge.freq { color:#cfe3ff; background:#132238; border-color:#36577e; }
.filter-panel { margin-bottom:18px; }
.filters { display:grid; grid-template-columns:minmax(220px,.6fr) minmax(300px,1fr) auto; gap:14px; align-items:end; }
.filters label { margin:0; }
.result-line { margin-bottom:12px; }
.filename { font-weight:700; }
.path-cell { max-width:430px; word-break:break-all; font-size:.87rem; }
.nowrap { white-space:nowrap; }
.empty { text-align:center; color:var(--muted); padding:34px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding-top:18px; }
.player-shell {
    width:100%;
    max-width:1200px;
    min-width:0;
    margin:auto;
    overflow:hidden;
}
.wave-panel {
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
}
#waveform,
#classificationWaveform,
.waveform-canvas {
    display:block;
    width:100% !important;
    max-width:100%;
    min-width:0;
    height:clamp(160px, 24vw, 240px);
    border-radius:12px;
    cursor:crosshair;
    background:#10161f;
    border:1px solid #253143;
}
.wave-status { margin-bottom:10px; color:var(--muted); }
.player-time { display:flex; justify-content:space-between; margin:8px 2px; color:var(--muted); font-variant-numeric:tabular-nums; }
.wave-panel audio { width:100%; margin-top:8px; }
.fft-panel {
    margin-top:18px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#0f151d;
}
.fft-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.fft-frame {
    display:grid;
    gap:10px;
}
.fft-image {
    display:block;
    width:100%;
    max-width:100%;
    border:1px solid #253143;
    border-radius:12px;
    background:#0b1016;
}
.fft-empty {
    padding:14px;
    border:1px dashed #304054;
    border-radius:12px;
    background:#0b1118;
}
@media (max-width:900px) {
    .topbar { align-items:flex-start; flex-direction:column; }
    .hero,.page-head { align-items:flex-start; flex-direction:column; }
    .split { grid-template-columns:1fr; }
    .filters { grid-template-columns:1fr; }
    .container { width:min(96vw,100%); }
}


.recording-alert {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 14px;
    align-items: center;
    margin: 0 0 22px;
    padding: 16px 18px;
    border: 2px solid #e85d5d;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(112,24,24,.92), rgba(45,20,24,.96));
    color: #fff;
    animation: recordingAlertPulse 1.15s infinite;
}
.recording-alert[hidden] {
    display: none !important;
}
.recording-alert:hover {
    filter: brightness(1.08);
}
.recording-alert-light {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff4949;
    box-shadow: 0 0 18px rgba(255,73,73,.9);
    animation: recordingLightBlink .65s infinite;
}
.recording-alert-copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.08rem;
}
.recording-alert-copy div {
    color: #ffdada;
    line-height: 1.45;
}
.recording-alert-action {
    white-space: nowrap;
    font-weight: 800;
    color: #fff2f2;
}
@keyframes recordingAlertPulse {
    0%, 100% {
        border-color: #923d3d;
        box-shadow: 0 0 0 rgba(255,90,90,0);
    }
    50% {
        border-color: #ff6767;
        box-shadow: 0 0 28px rgba(255,76,76,.22);
    }
}
@keyframes recordingLightBlink {
    0%, 45% {
        opacity: 1;
        transform: scale(1);
    }
    50%, 100% {
        opacity: .22;
        transform: scale(.78);
    }
}
@media (prefers-reduced-motion: reduce) {
    .recording-alert,
    .recording-alert-light {
        animation: none;
    }
}
@media (max-width:700px) {
    .recording-alert {
        grid-template-columns: 20px 1fr;
    }
    .recording-alert-action {
        grid-column: 2;
        white-space: normal;
    }
}


.page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.advanced-filters {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
}
.advanced-filters label:nth-of-type(6) {
    grid-column: span 2;
}
.filter-actions {
    display: flex;
    gap: 8px;
    align-items: end;
    flex-wrap: wrap;
}
.breadcrumbs {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 14px;
    color: #bed2ea;
}
.breadcrumbs a {
    padding: 5px 8px;
    border-radius: 7px;
    background: #121a24;
    border: 1px solid var(--line);
}
.explorer-panel {
    padding: 0;
    overflow: hidden;
}
.explorer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: #101720;
}
.explorer-toolbar code,
.page-head code {
    color: #b9d5f5;
}
.explorer-list {
    display: flex;
    flex-direction: column;
}
.explorer-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 17px;
    border-bottom: 1px solid var(--line);
}
.explorer-row:last-child {
    border-bottom: 0;
}
.explorer-row:hover {
    background: rgba(255,255,255,.025);
}
.explorer-folder {
    cursor: pointer;
}
.explorer-icon {
    font-size: 1.35rem;
    text-align: center;
}
.explorer-main {
    min-width: 0;
}
.explorer-main strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.explorer-main .muted {
    display: block;
    margin-top: 3px;
    font-size: .84rem;
}
.explorer-open {
    color: #bfd7f2;
    font-weight: 700;
}
.explorer-actions {
    display: flex;
    justify-content: flex-end;
}
@media (max-width:1150px) {
    .advanced-filters {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}
@media (max-width:700px) {
    .advanced-filters {
        grid-template-columns: 1fr;
    }
    .advanced-filters label:nth-of-type(6) {
        grid-column: auto;
    }
    .explorer-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .explorer-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }
    .explorer-open,
    .explorer-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}


#autoPlayToggle.active {
    border-color: #58d68d;
    box-shadow: 0 0 0 1px rgba(88,214,141,.2), 0 0 20px rgba(88,214,141,.13);
}
.auto-player-panel {
    margin-bottom: 16px;
}
.auto-player-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.auto-now-playing {
    padding: 11px 13px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    font-weight: 700;
}
.auto-player-panel audio {
    width: 100%;
}
.admin-history {
    margin-top: 18px;
}
.panel-head-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}


.badge.important {
    color: #ffe9a6;
    background: rgba(153, 103, 0, .22);
    border-color: #9c7218;
}
.badge.unimportant {
    color: #b8c0ca;
    background: rgba(105, 115, 125, .12);
    border-color: #505b67;
}
.button.important-tab,
.rating-important {
    background: linear-gradient(180deg, #8b6818, #62490e);
    border-color: #b88b22;
    color: #fff4c8;
}
.rating-important.selected {
    box-shadow: 0 0 0 2px rgba(255, 202, 65, .28), 0 0 24px rgba(255, 202, 65, .16);
}
.rating-unimportant.selected {
    border-color: #8f9aa6;
    box-shadow: 0 0 0 2px rgba(170, 180, 190, .16);
}
.rating-panel {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.rating-buttons,
.player-head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.live-refresh-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 16px;
    color: #b7c7d8;
    font-size: .9rem;
}
.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #58d68d;
    box-shadow: 0 0 12px rgba(88,214,141,.65);
}
button.danger,
.button.danger {
    background: #6b252b;
    border-color: #a7434d;
    color: #ffe4e6;
}
button.danger:hover,
.button.danger:hover {
    background: #842f37;
}
@media (max-width:700px) {
    .rating-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}


.button.classify-tab,
.classification-start {
    background: linear-gradient(180deg, #285c84, #1b405d);
    border-color: #3d7dac;
    color: #eaf7ff;
}
.button.classify-tab:hover,
.classification-start:hover {
    background: linear-gradient(180deg, #32719f, #22516f);
}
.button-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    font-size: .78rem;
    font-weight: 800;
}
.classification-status-panel {
    margin-bottom: 16px;
}
.classification-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.classification-progress-track {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 13px;
    background: #0d141d;
    border: 1px solid var(--line);
}
.classification-progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #3f78a6, #62d78a);
    transition: width .3s ease;
}
.classification-badge {
    white-space: nowrap;
}
.classification-current {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.classification-current h2 {
    margin: 3px 0 5px;
}
.classification-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.classification-start-box {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #345a75;
    border-radius: 10px;
    background: rgba(38, 94, 132, .12);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.classification-decision-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.classification-decision-buttons {
    display: flex;
    gap: 12px;
}
.classification-choice {
    min-width: 150px;
    min-height: 48px;
    font-size: 1rem;
}
.classification-done {
    text-align: center;
    padding: 38px 24px;
}
.classification-done-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 900;
    background: rgba(88,214,141,.15);
    border: 1px solid rgba(88,214,141,.45);
    color: #74e29a;
}
@media (max-width:760px) {
    .classification-current,
    .classification-decision-panel,
    .classification-progress-head {
        flex-direction: column;
        align-items: stretch;
    }
    .classification-meta {
        justify-content: flex-start;
    }
    .classification-decision-buttons {
        width: 100%;
    }
    .classification-choice {
        flex: 1;
        min-width: 0;
    }
}


textarea {
    width:100%;
    margin-top:7px;
    padding:11px 12px;
    border:1px solid #334156;
    border-radius:10px;
    background:#0e141c;
    color:var(--text);
    outline:none;
    resize:vertical;
    font:inherit;
    line-height:1.45;
}
textarea:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(78,121,167,.2);
}
.category-badge {
    color:#f4dcff;
    background:#2b1936;
    border-color:#70458a;
}
.important-note-cell {
    min-width:220px;
    max-width:420px;
}
.important-note-cell > span:not(.muted) {
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal;
    line-height:1.4;
}
.important-table {
    min-width:1100px;
}
.modal-backdrop {
    position:fixed;
    inset:0;
    z-index:100;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(5px);
}
.modal-backdrop[hidden] {
    display:none !important;
}
.annotation-modal {
    width:min(760px, 96vw);
    max-height:92vh;
    overflow:auto;
    padding:22px;
    border:1px solid #34455d;
    border-radius:16px;
    background:#111923;
    box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.modal-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:20px;
}
.modal-head h2 {
    margin:0 0 5px;
}
.modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}
body.modal-open {
    overflow:hidden;
}
.player-annotation-summary {
    display:grid;
    grid-template-columns:minmax(160px,.35fr) minmax(0,1fr);
    gap:16px;
    margin-top:16px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.02);
}
.player-note-summary .muted {
    margin-top:6px;
    white-space:pre-wrap;
    line-height:1.5;
}
@media (max-width:700px) {
    .wave-panel {
        padding:12px;
    }
    #waveform,
    #classificationWaveform,
    .waveform-canvas {
        height:clamp(150px, 48vw, 210px);
    }
    .player-annotation-summary {
        grid-template-columns:1fr;
    }
    .annotation-modal {
        width:100%;
        max-height:96vh;
        padding:16px;
    }
}


.auto-classification-start {
    background: linear-gradient(180deg, #7d3d8f, #572963);
    border-color: #a35bb7;
    color: #fff0ff;
}
.auto-classification-start:hover {
    background: linear-gradient(180deg, #9149a5, #673174);
}
.auto-classification-start.selected {
    border-color: #e18cf5;
    box-shadow: 0 0 0 2px rgba(225,140,245,.20), 0 0 26px rgba(225,140,245,.15);
}
.classification-status-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.auto-mode-badge {
    color: #f7dfff;
    background: rgba(122,55,142,.20);
    border-color: #8e50a1;
}
.classification-open-badge {
    color: #d9e2ec;
    background: rgba(115,128,145,.12);
    border-color: #566373;
}
.classification-navigation-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
}
.classification-navigation-panel .muted {
    flex: 1 1 260px;
}
@media (max-width:760px) {
    .classification-status-badges {
        justify-content: flex-start;
    }
    .classification-navigation-panel > button {
        width: 100%;
    }
}


.dashboard-stats-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    margin:0 0 20px;
}
.stat-card {
    min-width:0;
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel);
}
.stat-label {
    color:var(--muted);
    font-size:.9rem;
    margin-bottom:7px;
}
.stat-value {
    font-size:clamp(1.55rem, 3vw, 2.35rem);
    font-weight:800;
    letter-spacing:-.02em;
    overflow-wrap:anywhere;
}
.stat-note {
    margin-top:7px;
    color:var(--muted);
    font-size:.86rem;
}
.preload-status {
    margin-top:8px;
    font-size:.84rem;
}
.presence-modal-backdrop {
    z-index:160;
}
.presence-modal {
    text-align:center;
    width:min(620px, 96vw);
}
.presence-icon {
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    margin:0 auto 12px;
    border-radius:50%;
    font-size:2.25rem;
    font-weight:900;
    background:rgba(224,166,58,.15);
    border:1px solid rgba(224,166,58,.45);
    color:#ffd77b;
}
.presence-countdown {
    margin:18px 0 10px;
    font-size:clamp(2.3rem, 8vw, 4.5rem);
    font-weight:900;
    letter-spacing:.05em;
    font-variant-numeric:tabular-nums;
}
.presence-note {
    padding:12px 14px;
    border:1px solid #5c4c2d;
    border-radius:10px;
    background:rgba(165,119,30,.10);
    color:#e9d6ac;
    line-height:1.45;
}
.presence-actions {
    justify-content:center;
}
@media (max-width:700px) {
    .dashboard-stats-grid {
        grid-template-columns:1fr;
    }
}


.duration-pending {
    color: var(--muted);
    font-size: .84rem;
}
.actions {
    display:flex;
    gap:7px;
    align-items:center;
    flex-wrap:wrap;
}


.protected-stream-notice {
    margin-top:10px;
    padding:9px 11px;
    border:1px solid #6b5528;
    border-radius:9px;
    background:rgba(160,119,35,.10);
    color:#e9d7ad;
    font-size:.88rem;
}
.inventory-status {
    margin:-4px 0 14px;
    font-size:.84rem;
}


.backup-target-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
    gap:16px;
}
.backup-target-card {
    min-width:0;
    padding:16px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.02);
}
.backup-target-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.backup-target-card label {
    display:block;
    margin-top:10px;
}
.backup-actions {
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
}
.tape-status {
    margin-top:12px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#0b1118;
}
.tape-status pre {
    margin:8px 0 0;
    white-space:pre-wrap;
    word-break:break-word;
    max-height:170px;
    overflow:auto;
    color:var(--muted);
    font-size:.78rem;
}
.mono {
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.checksum {
    max-width:230px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.backup-detail {
    min-width:220px;
    max-width:420px;
    white-space:normal;
}
.backup-status-success {
    border-color:#347752;
    color:#7ee2a2;
}
.backup-status-failed {
    border-color:#81444d;
    color:#ff9da7;
}
.backup-status-running {
    border-color:#6d5b2c;
    color:#ffd77b;
}
.backup-status-queued {
    border-color:#3c5e85;
    color:#91c6ff;
}
.backup-status-cancelled,
.backup-status-cancel_requested {
    border-color:#666;
    color:#bbb;
}


.recording-alert-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}


.tape-retrieval-overlay {
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(2,5,9,.92);
    backdrop-filter:blur(7px);
}
.tape-retrieval-overlay[hidden] {
    display:none !important;
}
.tape-retrieval-card {
    width:min(680px, 94vw);
    padding:28px;
    border:1px solid #3d4d5d;
    border-radius:18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(84,117,148,.16), transparent 42%),
        #0c1219;
    box-shadow:0 24px 80px rgba(0,0,0,.55);
    text-align:center;
}
.tape-retrieval-card h2 {
    margin:22px 0 8px;
    font-size:clamp(1.25rem, 2.7vw, 1.9rem);
}
.tape-drive-animation {
    display:flex;
    justify-content:center;
}
.tape-drive-face {
    position:relative;
    width:min(480px, 82vw);
    height:230px;
    overflow:hidden;
    border:2px solid #556270;
    border-radius:16px;
    background:
        linear-gradient(180deg, #242d36, #151c23 52%, #0a0f14 53%, #161e26);
    box-shadow:
        inset 0 0 0 5px #0a0d11,
        inset 0 0 28px rgba(255,255,255,.04),
        0 16px 38px rgba(0,0,0,.38);
}
.tape-drive-face::before {
    content:"MAGNETIC ARCHIVE";
    position:absolute;
    left:18px;
    top:14px;
    color:#91a0ad;
    font:700 11px/1 ui-monospace, monospace;
    letter-spacing:.18em;
}
.tape-drive-face::after {
    content:"LTO / SEQUENTIAL ACCESS";
    position:absolute;
    right:18px;
    bottom:14px;
    color:#52606d;
    font:700 9px/1 ui-monospace, monospace;
    letter-spacing:.12em;
}
.tape-reel {
    position:absolute;
    top:55px;
    width:118px;
    height:118px;
    border:9px solid #a7b1b9;
    border-radius:50%;
    background:
        radial-gradient(circle at center, #1d252c 0 16%, transparent 17%),
        conic-gradient(
            from 0deg,
            #87939d 0 8deg, #202a32 8deg 54deg,
            #87939d 54deg 62deg, #202a32 62deg 108deg,
            #87939d 108deg 116deg, #202a32 116deg 162deg,
            #87939d 162deg 170deg, #202a32 170deg 216deg,
            #87939d 216deg 224deg, #202a32 224deg 270deg,
            #87939d 270deg 278deg, #202a32 278deg 324deg,
            #87939d 324deg 332deg, #202a32 332deg 360deg
        );
    box-shadow:0 0 0 5px #0e141a, 0 5px 14px rgba(0,0,0,.55);
}
.tape-reel-left {
    left:76px;
    animation:tape-reel-seek-left 1.35s ease-in-out infinite alternate;
}
.tape-reel-right {
    right:76px;
    animation:tape-reel-seek-right 1.12s ease-in-out infinite alternate;
}
.tape-hub {
    position:absolute;
    width:30px;
    height:30px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:5px solid #c1c8ce;
    background:#1b232a;
}
.tape-path {
    position:absolute;
    left:128px;
    right:128px;
    top:168px;
    height:5px;
    border-radius:6px;
    background:#080b0e;
    box-shadow:0 0 0 1px #3b454e;
}
.tape-head-shuttle {
    position:absolute;
    top:155px;
    left:43%;
    width:54px;
    height:28px;
    border:2px solid #72808d;
    border-radius:5px;
    background:linear-gradient(180deg,#44515c,#182028);
    box-shadow:0 5px 12px rgba(0,0,0,.4);
    animation:tape-head-seek 1.65s ease-in-out infinite alternate;
}
.tape-led-row {
    position:absolute;
    left:18px;
    bottom:18px;
    display:flex;
    gap:7px;
}
.tape-led-row span {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#25303a;
    box-shadow:0 0 0 1px #06090c;
}
.tape-led-row span:nth-child(1),
.tape-led-row span:nth-child(3) {
    animation:tape-led-green .8s steps(1,end) infinite;
}
.tape-led-row span:nth-child(2),
.tape-led-row span:nth-child(4) {
    animation:tape-led-amber 1.1s steps(1,end) infinite .25s;
}
.tape-retrieval-progress {
    height:10px;
    margin-top:22px;
    overflow:hidden;
    border:1px solid #35414d;
    border-radius:999px;
    background:#070b0f;
}
.tape-retrieval-progress > div {
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#3f729f,#67a7df);
    transition:width .22s linear;
}
.tape-retrieval-countdown {
    margin-top:9px;
    color:#aebcca;
    font:600 .9rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body.tape-retrieval-active {
    overflow:hidden;
}
@keyframes tape-reel-seek-left {
    0% { transform:rotate(-72deg); }
    42% { transform:rotate(95deg); }
    100% { transform:rotate(305deg); }
}
@keyframes tape-reel-seek-right {
    0% { transform:rotate(88deg); }
    55% { transform:rotate(-125deg); }
    100% { transform:rotate(-335deg); }
}
@keyframes tape-head-seek {
    from { transform:translateX(-115px); }
    to { transform:translateX(115px); }
}
@keyframes tape-led-green {
    0%,45% { background:#27402f; box-shadow:0 0 0 1px #06090c; }
    46%,100% { background:#5fe68b; box-shadow:0 0 10px rgba(95,230,139,.85); }
}
@keyframes tape-led-amber {
    0%,58% { background:#463d28; box-shadow:0 0 0 1px #06090c; }
    59%,100% { background:#ffc75f; box-shadow:0 0 10px rgba(255,199,95,.85); }
}
.settings-section-head {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:18px;
}
.settings-wide {
    grid-column:1 / -1;
}
.input-with-unit {
    display:flex;
    align-items:center;
    gap:8px;
}
.input-with-unit input {
    flex:1;
    min-width:0;
}
.input-with-unit span {
    color:var(--muted);
    white-space:nowrap;
}
.magnet-example {
    display:flex;
    align-items:center;
    gap:15px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.018);
}
.mini-tape-drive {
    position:relative;
    flex:0 0 110px;
    height:62px;
    border:2px solid #53606b;
    border-radius:8px;
    background:#141b22;
}
.mini-reel {
    position:absolute;
    top:14px;
    width:31px;
    height:31px;
    border:4px solid #9ba5ad;
    border-radius:50%;
    background:#1c252c;
}
.mini-reel-left {
    left:18px;
    animation:tape-reel-seek-left 1.35s ease-in-out infinite alternate;
}
.mini-reel-right {
    right:18px;
    animation:tape-reel-seek-right 1.12s ease-in-out infinite alternate;
}
.mini-tape-line {
    position:absolute;
    left:34px;
    right:34px;
    top:44px;
    height:2px;
    background:#050709;
}
@media (max-width:650px) {
    .tape-drive-face {
        height:190px;
    }
    .tape-reel {
        top:48px;
        width:90px;
        height:90px;
    }
    .tape-reel-left { left:45px; }
    .tape-reel-right { right:45px; }
    .tape-path {
        left:92px;
        right:92px;
        top:139px;
    }
    .tape-head-shuttle {
        top:128px;
        width:44px;
        height:24px;
    }
    @keyframes tape-head-seek {
        from { transform:translateX(-74px); }
        to { transform:translateX(74px); }
    }
}


.global-ftp-tape-indicator {
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:2600;
    display:flex;
    align-items:center;
    gap:13px;
    width:min(410px, calc(100vw - 24px));
    padding:11px 14px 11px 11px;
    border:1px solid #506071;
    border-radius:14px;
    background:rgba(8,13,19,.96);
    box-shadow:0 18px 45px rgba(0,0,0,.48);
    backdrop-filter:blur(8px);
    pointer-events:none;
    transform:translateY(0);
    opacity:1;
    transition:opacity .35s ease, transform .35s ease, border-color .35s ease;
}
.global-ftp-tape-indicator[hidden] {
    display:none !important;
}
.global-ftp-tape-indicator.finishing {
    opacity:.72;
    transform:translateY(4px);
    border-color:#34404c;
}
.global-ftp-tape-machine {
    position:relative;
    flex:0 0 116px;
    width:116px;
    height:68px;
    overflow:hidden;
    border:2px solid #5d6872;
    border-radius:9px;
    background:linear-gradient(180deg,#27313a,#10161c 58%,#171f27);
    box-shadow:inset 0 0 0 3px #090c10;
}
.global-ftp-tape-machine::before {
    content:"FTP";
    position:absolute;
    left:7px;
    top:6px;
    color:#738392;
    font:800 7px/1 ui-monospace,monospace;
    letter-spacing:.16em;
}
.global-ftp-reel {
    position:absolute;
    top:17px;
    width:34px;
    height:34px;
    border:4px solid #aab2b9;
    border-radius:50%;
    background:
        conic-gradient(
            #8a959e 0 8deg,#1b232a 8deg 52deg,
            #8a959e 52deg 60deg,#1b232a 60deg 104deg,
            #8a959e 104deg 112deg,#1b232a 112deg 156deg,
            #8a959e 156deg 164deg,#1b232a 164deg 208deg,
            #8a959e 208deg 216deg,#1b232a 216deg 260deg,
            #8a959e 260deg 268deg,#1b232a 268deg 312deg,
            #8a959e 312deg 320deg,#1b232a 320deg 360deg
        );
    box-shadow:0 0 0 2px #0c1116;
}
.global-ftp-reel span {
    position:absolute;
    width:10px;
    height:10px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:2px solid #d1d6da;
    border-radius:50%;
    background:#182027;
}
.global-ftp-reel-left {
    left:17px;
}
.global-ftp-reel-right {
    right:17px;
}
.global-ftp-tape-indicator.working .global-ftp-reel-left {
    animation:global-ftp-reel-left .62s linear infinite;
}
.global-ftp-tape-indicator.working .global-ftp-reel-right {
    animation:global-ftp-reel-right .52s linear infinite reverse;
}
.global-ftp-tape-path {
    position:absolute;
    left:33px;
    right:33px;
    top:52px;
    height:3px;
    border-radius:3px;
    background:#040608;
    box-shadow:0 0 0 1px #343f48;
}
.global-ftp-head {
    position:absolute;
    left:49px;
    top:46px;
    width:19px;
    height:11px;
    border:1px solid #84909a;
    border-radius:2px;
    background:#303b45;
}
.global-ftp-tape-indicator.working .global-ftp-head {
    animation:global-ftp-head-seek .78s ease-in-out infinite alternate;
}
.global-ftp-led {
    position:absolute;
    left:7px;
    bottom:7px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#26372b;
}
.global-ftp-tape-indicator.working .global-ftp-led {
    animation:global-ftp-led .46s steps(1,end) infinite;
}
.global-ftp-copy {
    min-width:0;
    display:grid;
    gap:3px;
}
.global-ftp-copy strong {
    color:#e4ebf1;
    font-size:.94rem;
}
.global-ftp-copy span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#9fc7eb;
    font-size:.84rem;
}
.global-ftp-copy small {
    color:#71808d;
    font-size:.74rem;
}
@keyframes global-ftp-reel-left {
    to { transform:rotate(360deg); }
}
@keyframes global-ftp-reel-right {
    to { transform:rotate(360deg); }
}
@keyframes global-ftp-head-seek {
    from { transform:translateX(-13px); }
    to { transform:translateX(13px); }
}
@keyframes global-ftp-led {
    0%,45% {
        background:#24382b;
        box-shadow:none;
    }
    46%,100% {
        background:#68e994;
        box-shadow:0 0 8px rgba(104,233,148,.9);
    }
}
@media (max-width:560px) {
    .global-ftp-tape-indicator {
        right:10px;
        bottom:10px;
        width:calc(100vw - 20px);
    }
    .global-ftp-tape-machine {
        flex-basis:96px;
        width:96px;
    }
    .global-ftp-reel-left { left:9px; }
    .global-ftp-reel-right { right:9px; }
}


.lto-auto-panel { margin-bottom:18px; }
.compact-stats { margin:12px 0; }
.small-value { font-size:1.15rem !important; word-break:break-word; }
.lto-auto-actions { align-items:center; margin:12px 0 16px; }
.lto-auto-settings { margin-top:8px; }
.lto-key-details { margin-top:12px; }
.lto-key-details code { display:block; margin-top:8px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#0a0f14; }


.tape-retrieval-progress > div.indeterminate {
    width:35% !important;
    animation:lto-archive-progress 1.15s ease-in-out infinite alternate;
}
@keyframes lto-archive-progress {
    from { transform:translateX(-5%); }
    to { transform:translateX(185%); }
}


.button.danger {
    border-color:#8d3b3b;
}
.lto-next-media {
    margin:12px 0;
    padding:12px;
    border:1px solid #8d643b;
    border-radius:10px;
}
.lto-next-media strong {
    display:block;
    margin-bottom:8px;
}
.inline-form {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.inline-form input {
    min-width:180px;
}


.lto-debug-output {
    height:360px;
    overflow:auto;
    margin:10px 0 0;
    padding:12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#070b0f;
    white-space:pre-wrap;
    word-break:break-word;
    font:12px/1.42 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


.badge.lto {
    border-color: #4d7298;
    font-weight: 700;
}
.lto-backup-progress-box {
    margin: 12px 0 16px;
}
.lto-backup-progress-track {
    height: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #0d141d;
}
.lto-backup-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #3f78a6, #62d78a);
    transition: width .35s ease;
}


.recordings-table-wrap {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.recordings-table {
    width: 100%;
    min-width: 980px;
}

.recordings-table th:last-child,
.recordings-table td:last-child,
.recordings-table .recording-actions-head,
.recordings-table .recording-actions-cell {
    position: sticky;
    right: 0;
    z-index: 4;
    min-width: 118px;
    width: 118px;
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: -10px 0 18px rgba(11, 15, 20, .78);
}

.recordings-table thead th:last-child,
.recordings-table .recording-actions-head {
    z-index: 6;
    background: var(--panel2);
}

.recordings-table tbody tr:hover td:last-child,
.recordings-table tbody tr:hover .recording-actions-cell {
    background: #171f2a;
}

.recording-row-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.recording-play-button {
    white-space: nowrap;
    min-width: 94px;
}

.recordings-table .filename {
    max-width: 320px;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {

    .recordings-table:not(.important-table) th:nth-child(7),
    .recordings-table:not(.important-table) td:nth-child(7) {
        display: none;
    }

    .recordings-table:not(.important-table) {
        min-width: 820px;
    }
}

@media (max-width: 900px) {

    .recordings-table:not(.important-table) th:nth-child(8),
    .recordings-table:not(.important-table) td:nth-child(8),
    .recordings-table:not(.important-table) th:nth-child(10),
    .recordings-table:not(.important-table) td:nth-child(10) {
        display: none;
    }

    .recordings-table:not(.important-table) {
        min-width: 680px;
    }

    .recordings-table th:last-child,
    .recordings-table td:last-child,
    .recordings-table .recording-actions-head,
    .recordings-table .recording-actions-cell {
        min-width: 108px;
        width: 108px;
    }
}

@media (max-width: 650px) {
    .container {
        width: min(100% - 16px, 1500px);
    }

    .panel {
        padding: 14px;
    }

    .recordings-table:not(.important-table) {
        min-width: 610px;
    }

    .recordings-table th,
    .recordings-table td {
        padding: 9px 7px;
    }

    .recording-play-button {
        min-width: 88px;
        padding-left: 8px;
        padding-right: 8px;
    }
}


.lto-tape-capacity-box {
    margin: 12px 0 16px;
}

.lto-tape-capacity-track {
    height: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #0d141d;
}

.lto-tape-capacity-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #3f78a6, #62d78a);
    transition: width .4s ease;
}

.recording-alert-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .recording-alert-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


.admin-user-message-overlay {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 6, 10, .90);
    backdrop-filter: blur(7px);
}

.admin-user-message-dialog {
    width: min(680px, 100%);
    max-height: min(82vh, 760px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
}

.admin-user-message-dialog h2 {
    margin: 8px 0 18px;
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.admin-user-message-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid #b88428;
    border-radius: 999px;
    background: rgba(184, 132, 40, .16);
    font-weight: 700;
}

.admin-user-message-body {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
    font-size: 1.04rem;
}

.admin-user-message-meta {
    margin-bottom: 18px;
    opacity: .72;
    font-size: .9rem;
}

.admin-user-message-ok {
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
    font-weight: 800;
}

.admin-user-message-required {
    margin: 10px 0 0;
    text-align: center;
}

.admin-user-message-panel textarea {
    width: 100%;
    resize: vertical;
    min-height: 150px;
}

.admin-message-table-text {
    min-width: 260px;
    max-width: 520px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .admin-user-message-overlay {
        padding: 10px;
    }

    .admin-user-message-dialog {
        padding: 20px 16px;
        max-height: 90vh;
    }
}


.lto-verify-actions {
    margin: 12px 0;
}

.lto-verify-table .verify-detail {
    max-width: 460px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.lto-verify-status-success {
    border-color: #3d8a5b;
}

.lto-verify-status-failed {
    border-color: #b24b4b;
}

.lto-verify-status-running,
.lto-verify-status-queued,
.lto-verify-status-waiting_media {
    border-color: #b88428;
}

.recording-focus-highlight td {
    animation: ffow-recording-focus 1s ease-in-out 0s 4 alternate;
}

@keyframes ffow-recording-focus {
    from {
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }
    to {
        box-shadow: inset 0 0 0 2px rgba(255, 196, 71, .95);
        background: rgba(255, 196, 71, .12);
    }
}


.tls-admin-panel { margin-top:18px; }
.tls-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.tls-panel-head h2 { margin-bottom:7px; }
.tls-panel-head p { margin-top:0; }
.tls-status-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px;
    margin:18px 0;
}
.tls-small-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.tls-status-card {
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    padding:14px;
    background:#0e141c;
    border:1px solid var(--line);
    border-radius:12px;
}
.tls-status-card strong { word-break:break-word; }
.tls-label { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.badge.tls-warn { color:#ffe29a; border-color:#7a6429; background:#2a2412; }
.tls-alert { margin:15px 0; padding:13px 15px; border-radius:11px; border:1px solid var(--line); line-height:1.5; }
.tls-alert-warning { color:#ffe7ae; border-color:#80672d; background:#2a2413; }
.tls-alert-danger { color:#ffc4c4; border-color:#7e3838; background:#2a1719; }
.tls-alert-ok { color:#bdf0cd; border-color:#2f6b47; background:#122419; }
.tls-details { margin:14px 0; }
.tls-details th { width:210px; }
.mono-break { font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; word-break:break-all; }
.tls-command {
    overflow:auto;
    padding:15px;
    border:1px solid #314157;
    border-radius:11px;
    background:#0a1017;
    color:#dce8f5;
    line-height:1.55;
    white-space:pre-wrap;
    word-break:break-word;
}
.tls-trust-note { margin-top:10px; }
@media (max-width:700px) {
    .tls-panel-head { flex-direction:column; }
    .tls-details th { width:auto; }
}


.security-ip-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}
.security-ip-head h2 {
    margin-bottom:7px;
}
.security-ip-head p {
    margin-top:0;
}
.security-ip-table th,
.security-ip-table td {
    vertical-align:top;
}
.security-ip-table code {
    white-space:nowrap;
}
.security-ip-table form {
    margin:0;
}
@media (max-width:700px) {
    .security-ip-head {
        flex-direction:column;
    }
}


.lto-compression-box {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(17, 25, 35, .55);
}
.lto-compression-stats {
    margin-top: 12px;
    margin-bottom: 12px;
}
.lto-compression-forced {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 11px;
}


.lto-hourly-all-sources-note { margin-top: 10px; }


.full-backup-panel {
    position: relative;
}
.full-backup-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}
.full-backup-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(5px);
}
.full-backup-modal.hidden {
    display: none;
}
.full-backup-dialog {
    width: min(980px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: var(--panel, #151a22);
    border: 1px solid var(--line, #323946);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
    padding: 20px;
}
.full-backup-dialog-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.full-backup-dialog-head h2 {
    margin: 0 0 4px 0;
}
.full-backup-instruction {
    font-size: 1.06rem;
    line-height: 1.5;
    padding: 14px;
    border: 1px solid var(--line, #323946);
    border-radius: 10px;
    margin: 10px 0 14px;
    background: rgba(255,255,255,.035);
}
.full-backup-media-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    margin: 12px 0;
    border: 2px solid currentColor;
    border-radius: 12px;
}
.full-backup-media-box.hidden,
#fullBackupError.hidden {
    display: none;
}
.full-backup-media-box strong {
    font-size: 1.35rem;
    word-break: break-word;
}
.full-backup-progress-track {
    width: 100%;
    height: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--line, #323946);
    margin-top: 14px;
}
.full-backup-progress-bar {
    height: 100%;
    width: 0;
    transition: width .35s ease;
    background: currentColor;
}
.full-backup-progress-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin: 7px 0 14px;
}
.full-backup-stats {
    margin: 12px 0;
}
.full-backup-volume-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
.full-backup-volume-chip {
    border: 1px solid var(--line, #323946);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: .9rem;
    background: rgba(255,255,255,.035);
}
.full-backup-volume-chip.status-success {
    border-style: solid;
}
.full-backup-volume-chip.status-writing {
    border-width: 2px;
}
.full-backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.full-backup-secret-note {
    margin: 16px 0 0;
}
@media (max-width: 900px) {
    .full-backup-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .full-backup-info-grid {
        grid-template-columns: 1fr;
    }
    .full-backup-modal {
        padding: 8px;
    }
    .full-backup-dialog {
        padding: 14px;
        max-height: 96vh;
    }
    .full-backup-dialog-head,
    .full-backup-progress-line {
        flex-direction: column;
    }
}

.full-backup-storage-settings{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:12px}.full-backup-storage-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 16px}@media(max-width:900px){.full-backup-storage-status{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.full-backup-storage-status{grid-template-columns:1fr}}


.lto-prefetch-button {
    min-width: 88px;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.lto-prefetch-button.prefetch-loading {
    background: #d6a400;
    border-color: #ffd84a;
    color: #171100;
    animation: ffow-prefetch-yellow 1s steps(2, end) infinite;
}

.lto-prefetch-button.prefetch-ready {
    background: #1e8f4f;
    border-color: #50d886;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(80, 216, 134, .55);
}

.lto-prefetch-button.prefetch-failed {
    background: #a02f2f;
    border-color: #e36a6a;
    color: #ffffff;
}

@keyframes ffow-prefetch-yellow {
    0%, 100% {
        background: #d6a400;
        box-shadow: 0 0 4px rgba(255, 216, 74, .25);
    }
    50% {
        background: #ffd84a;
        box-shadow: 0 0 18px rgba(255, 216, 74, .9);
    }
}


.player-next-newer {
    min-width: 164px;
    text-align: center;
}

.player-next-newer[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.player-filter-context {
    margin-right: 6px;
}


.player-sequence-controls {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.player-autoplay-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
}

.player-autoplay-toggle input {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
}

.player-sequence-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.player-autoplay-status {
    min-width: 0;
}

@media (max-width: 560px) {
    .player-sequence-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .player-next-newer {
        width: 100%;
    }
}


.player-autoplay-status {
    transition: color .2s ease;
}


.personal-alert-settings {
    margin: 18px 0;
}

.personal-alert-form {
    display: grid;
    gap: 14px;
}

.alert-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.alert-source-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}

.alert-source-option:hover {
    background: rgba(255,255,255,.05);
}

.alert-source-option input {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.alert-source-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


.important-filter-panel {
    margin-bottom: 16px;
}

.important-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.important-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.important-category-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.category-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
}

.category-filter-chip span {
    opacity: .75;
}

.category-filter-chip.active {
    font-weight: 700;
    border-color: currentColor;
}

.category-link {
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 850px) {
    .important-filter-form {
        grid-template-columns: 1fr;
    }
}


.report-editor-form {
    display: grid;
    gap: 16px;
}

.report-recording-toolbar {
    display: flex;
    gap: 16px;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
}

.report-recording-groups {
    display: grid;
    gap: 14px;
}

.report-frequency-group {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.report-frequency-head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255,255,255,.035);
}

.report-frequency-head h2 {
    margin: 0 0 3px 0;
}

.report-recording-list {
    display: grid;
}

.report-recording-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    cursor: pointer;
}

.report-recording-item:hover {
    background: rgba(255,255,255,.025);
}

.report-recording-item input {
    width: 19px;
    height: 19px;
    margin-top: 2px;
}

.report-recording-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.report-recording-copy span {
    opacity: .8;
    overflow-wrap: anywhere;
}

.report-save-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}


.report-time-overview {
    margin-bottom: 1rem;
}

.report-time-day {
    margin-top: 1rem;
}

.report-time-day h3 {
    margin: 0 0 0.45rem 0;
}

.report-time-list {
    display: grid;
    gap: 0.25rem;
}

.report-time-entry {
    display: grid;
    grid-template-columns: 7rem minmax(8rem, 14rem) minmax(12rem, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.42rem 0.55rem;
    border-bottom: 1px solid rgba(127, 127, 127, 0.22);
}

.report-time-entry strong {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .report-time-entry {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}


.badge.heard {
    font-weight: 700;
}

.recording-heard-cell {
    white-space: nowrap;
}

/* Projekt Agonoize V0.089 · TAPE DRIVE CONTROLLER */
.tape-controller-box {
    display:grid;
    grid-template-columns:minmax(150px,220px) 1fr;
    gap:20px;
    align-items:center;
    margin:16px 0 18px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.025);
    overflow:hidden;
}
.tape-controller-visual {display:grid;place-items:center;min-height:130px;position:relative}
.tape-controller-rack,.controller-rack-unit {
    width:min(100%,190px);height:88px;border:2px solid var(--border);border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.16));
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.22);
    position:relative;padding:14px;
}
.rack-led,.controller-power-led,.controller-boot-led {display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:#4b5563;box-shadow:0 0 0 transparent}
.tape-controller-box[data-state="online"] .rack-led,.controller-power-led {background:#23c55e;box-shadow:0 0 14px rgba(35,197,94,.7)}
.tape-controller-box[data-state="starting"] .rack-led,.controller-boot-animation:not([hidden]) .controller-boot-led {animation:tape-controller-led .7s ease-in-out infinite alternate}
.rack-slot {position:absolute;left:14px;right:14px;bottom:15px;height:20px;border:1px solid var(--border);border-radius:4px;background:rgba(0,0,0,.28)}
.tape-controller-signal,.controller-boot-pulse {display:flex;gap:7px;margin-top:13px;justify-content:center}
.tape-controller-signal span,.controller-boot-pulse span {width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.2;animation:tape-controller-signal 1.2s infinite}
.tape-controller-signal span:nth-child(2),.controller-boot-pulse span:nth-child(2){animation-delay:.18s}.tape-controller-signal span:nth-child(3),.controller-boot-pulse span:nth-child(3){animation-delay:.36s}
.tape-controller-meta{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0}
.tape-controller-schedule{margin:10px 0;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.035)}
.tape-controller-actions{margin-top:12px}
.tape-controller-state-off{opacity:.75}.tape-controller-state-starting{animation:tape-controller-badge .8s infinite alternate}.tape-controller-state-online{font-weight:800}.tape-controller-state-powering_off{opacity:.85}

.tape-controller-boot-animation {display:grid;place-items:center;margin:0 auto 18px;min-height:145px}
.tape-controller-boot-animation[hidden], .tape-drive-animation[hidden] {display:none !important}
.controller-rack-label {position:absolute;left:14px;right:14px;bottom:13px;font-size:.78rem;letter-spacing:.08em;text-align:center;opacity:.75}
.tape-cartridge-loader {height:34px;display:flex;justify-content:center;align-items:center;margin-bottom:5px;overflow:visible}
.tape-cartridge-mini {width:58px;height:32px;border:2px solid var(--border);border-radius:5px;display:grid;place-items:center;font-weight:800;font-size:.75rem;background:rgba(255,255,255,.08)}
.tape-loading-stage .tape-cartridge-mini {animation:tape-cartridge-in 1.25s ease-in-out infinite}
.tape-reading-stage .tape-cartridge-mini {transform:translateY(15px);opacity:.45}

@keyframes tape-controller-led {from{background:#475569;box-shadow:none;opacity:.35}to{background:#38bdf8;box-shadow:0 0 18px rgba(56,189,248,.9);opacity:1}}
@keyframes tape-controller-signal {0%,100%{opacity:.18;transform:scale(.85)}50%{opacity:1;transform:scale(1.18)}}
@keyframes tape-controller-badge {from{opacity:.55}to{opacity:1}}
@keyframes tape-cartridge-in {0%{transform:translateY(-16px);opacity:.35}60%,100%{transform:translateY(15px);opacity:1}}

@media (max-width:760px){.tape-controller-box{grid-template-columns:1fr}.tape-controller-actions .button{width:100%}}