:root {
    color-scheme:dark;
    --bg:#0E1518;
    --surface:#162126;
    --surface-elevated:#1D2B31;
    --line:#2C3B41;
    --primary:#23A6B5;
    --primary-hover:#2DB8C8;
    --secondary:#6F8794;
    --accent:#FF9F1C;
    --highlight:#21D4D4;
    --success:#42B883;
    --warning:#F4BE4F;
    --danger:#F06464;
    --info:#5B9BD5;
    --ink:#F1F5F6;
    --muted:#A9B7BC;
    --text-muted:#74858C;
    --success-soft:color-mix(in srgb, var(--success) 12%, var(--surface));
    --warning-soft:color-mix(in srgb, var(--warning) 12%, var(--surface));
    --highlight-soft:color-mix(in srgb, var(--highlight) 12%, var(--surface));
    --progress-track:color-mix(in srgb, var(--secondary) 22%, var(--surface));
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-synthesis:none;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    font-size:14px;
    line-height:1.6;
}

a {
    color:var(--primary);
    text-decoration:none;
}

a:hover {
    color:var(--primary-hover);
    text-decoration:underline;
}

a:focus-visible,[tabindex]:focus-visible {
    outline:3px solid var(--primary);
    outline-offset:4px;
}

h1,h2,p {
    margin:0;
}

h1 {
    font-size:36px;
    line-height:1.2;
    letter-spacing:-1px;
    margin:5px 0 12px;
}

h2 {
    font-size:17px;
    font-weight:650;
}

small {
    font-size:12px;
}

.muted {
    color:var(--muted);
}

.mono {
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.success-text {
    color:var(--success);
}

.container,.header-inner {
    width:min(1240px,calc(100% - 64px));
    margin:auto;
}

.site-header {
    background:var(--surface);
    border-bottom:1px solid var(--line);
}

.header-inner {
    display:flex;
    align-items:center;
    gap:48px;
    min-height:82px;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font-size:17px;
    font-weight:750;
    white-space:nowrap;
}

.brand:hover {
    text-decoration:none;
}

.brand-mark {
    display:block;
    object-fit:contain;
    padding:3px;
    background:var(--surface-elevated);
    width:40px;
    height:40px;
    border-radius:9px;
}

.brand-subtitle {
    font-weight:400;
    color:var(--muted);
}

nav {
    display:flex;
    align-self:stretch;
    gap:28px;
}

nav a {
    display:flex;
    align-items:center;
    border-bottom:3px solid transparent;
    padding:3px 0 0;
    color:var(--muted);
    font-weight:600;
}

nav a[aria-current] {
    border-color:var(--primary);
    color:var(--primary);
}

.read-only {
    margin-left:auto;
    color:var(--muted);
    font-size:12px;
    border:1px solid var(--line);
    border-radius:20px;
    padding:4px 12px;
}

main.container {
    padding-top:42px;
    padding-bottom:48px;
    min-height:calc(100vh - 162px);
}

.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
}

.eyebrow {
    text-transform:uppercase;
    font-size:11px;
    font-weight:750;
    letter-spacing:1.8px;
    color:var(--primary);
}

.button {
    display:inline-flex;
    align-items:center;
    gap:26px;
    padding:10px 17px;
    background:var(--primary);
    color:var(--bg);
    border-radius:7px;
    font-weight:600;
    white-space:nowrap;
}

.button:hover {
    background:var(--primary-hover);
    color:var(--bg);
    text-decoration:none;
}

.stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:32px;
}

.stat {
    padding:22px 24px;
    background:var(--surface);
    border:1px solid var(--line);
    border-top:3px solid var(--primary);
    border-radius:10px;
}

.stat:nth-child(2) {
    border-top-color:var(--accent);
}

.stat:last-child {
    border-top-color:var(--highlight);
}

.stat:nth-child(3) {
    border-top-color:var(--success);
}

.stat:last-child > strong {
    color:var(--highlight);
}

.stat>span {
    color:var(--muted);
    font-weight:550;
}

.stat>strong {
    display:block;
    font-size:34px;
    line-height:1.4;
    font-weight:650;
    overflow-wrap:anywhere;
    font-variant-numeric:tabular-nums;
    margin:8px 0;
}

.stat>small {
    color:var(--muted);
}

.stat strong small {
    font-size:15px;
    font-weight:500;
}

.panel {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
}

.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:22px 24px;
    border-bottom:1px solid var(--line);
}

.panel-heading p {
    font-size:13px;
    margin-top:3px;
}

.subtle-label {
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
}

.table-scroll {
    overflow-x:auto;
}

table {
    border-collapse:collapse;
    width:100%;
    text-align:left;
    font-size:13px;
}

th {
    background:var(--surface-elevated);
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.7px;
    font-weight:650;
    padding:13px 24px;
    white-space:nowrap;
}

td {
    padding:20px 24px;
    border-top:1px solid var(--line);
    vertical-align:middle;
}

tbody tr:hover {
    background:var(--surface-elevated);
}

td small {
    display:block;
    color:var(--muted);
    margin-top:5px;
}

td time {
    white-space:nowrap;
    font-size:12px;
}

.session-link {
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.badge {
    display:inline-block;
    padding:3px 10px;
    border-radius:5px;
    font-size:12px;
    font-weight:650;
}

.badge-success {
    background:var(--success-soft);
    color:var(--success);
}

.badge-pending {
    background:var(--warning-soft);
    color:var(--warning);
}

.progress-cell {
    min-width:230px;
}

.progress-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    font-size:11px;
    color:var(--muted);
    margin-bottom:7px;
    white-space:nowrap;
}

.progress-label strong {
    color:var(--ink);
}

progress {
    display:block;
    width:100%;
    height:6px;
    border:0;
    border-radius:10px;
    overflow:hidden;
    background:var(--progress-track);
    accent-color:var(--highlight);
}

progress::-webkit-progress-bar {
    background:var(--progress-track);
}

progress::-webkit-progress-value {
    background:var(--highlight);
    border-radius:10px;
}

progress::-moz-progress-bar {
    background:var(--highlight);
    border-radius:10px;
}

.empty-state {
    text-align:center;
    padding:60px 20px 68px;
}

.empty-symbol {
    display:inline-grid;
    place-items:center;
    background:var(--highlight-soft);
    color:var(--highlight);
    width:48px;
    height:48px;
    border-radius:50%;
    font-size:26px;
    margin-bottom:16px;
}

.empty-state p {
    margin-top:8px;
}

.count {
    font-size:18px;
    color:var(--muted);
    vertical-align:middle;
    letter-spacing:0;
    font-weight:500;
}

.back-link {
    display:inline-block;
    margin-bottom:24px;
    font-size:13px;
}

.session-title {
    font-size:26px;
    overflow-wrap:anywhere;
    letter-spacing:-.6px;
}

.detail-overview {
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.metadata {
    margin:0;
    padding:8px 24px;
}

.metadata>div {
    display:grid;
    grid-template-columns:150px 1fr;
    gap:20px;
    padding:16px 0;
}

.metadata>div+div {
    border-top:1px solid var(--line);
}

.metadata dt {
    color:var(--muted);
    font-size:12px;
}

.metadata dd {
    margin:0;
    font-weight:550;
    overflow-wrap:anywhere;
}

.transfer-summary {
    padding:22px 24px;
}

.large-number {
    display:block;
    font-size:40px;
    line-height:1.4;
    font-weight:600;
    margin:8px 0;
}

.large-number span {
    font-size:22px;
    color:var(--muted);
    margin-left:3px;
}

.transfer-summary p {
    font-size:12px;
    margin-top:10px;
}

.validation-note {
    border:1px solid color-mix(in srgb, var(--warning) 35%, var(--surface));
    border-left:3px solid var(--warning);
    background:var(--warning-soft);
    border-radius:7px;
    padding:17px 22px;
    margin-bottom:28px;
}

.validation-note p {
    font-size:13px;
    margin-top:4px;
}

.validation-note.validated {
    background:var(--success-soft);
    border-color:color-mix(in srgb, var(--success) 35%, var(--surface));
    border-left-color:var(--success);
}

.validation-note > strong {
    color:var(--warning);
}

.validation-note.validated > strong {
    color:var(--success);
}

.filename {
    overflow-wrap:anywhere;
    min-width:160px;
}

.footer {
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:16px;
    padding-top:20px;
    padding-bottom:24px;
    color:var(--muted);
    font-size:11px;
}

.footer-version {
    color:var(--text-muted);
    text-align:center;
    white-space:nowrap;
}

.footer > :last-child {
    text-align:right;
}

.skip-link {
    position:absolute;
    top:-60px;
    left:12px;
    background:var(--surface-elevated);
    padding:10px;
    z-index:2;
}

.skip-link:focus {
    top:12px;
}

@media(max-width:900px) {
    .container,.header-inner {
        width:calc(100% - 40px);
    }

    .header-inner {
        gap:28px;
    }

    .read-only {
        display:none;
    }

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

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

    .session-title {
        font-size:23px;
    }

}

@media(max-width:560px) {
    .container,.header-inner {
        width:calc(100% - 32px);
    }

    .header-inner {
        flex-wrap:wrap;
        gap:0;
        padding-top:16px;
    }

    .brand {
        width:100%;
        font-size:16px;
    }

    nav {
        height:48px;
        margin-top:8px;
        gap:26px;
    }

    main.container {
        padding-top:28px;
    }

    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
    }

    h1 {
        font-size:30px;
    }

    .stats {
        gap:10px;
        margin-bottom:22px;
    }

    .stat {
        padding:16px;
    }

    .stat>strong {
        font-size:28px;
    }

    .panel-heading {
        padding:18px 16px;
    }

    .panel-heading .subtle-label {
        display:none;
    }

    th,td {
        padding-left:16px;
        padding-right:16px;
    }

    .metadata {
        padding:4px 16px;
    }

    .metadata>div {
        grid-template-columns:100px 1fr;
        gap:12px;
    }

    .transfer-summary {
        padding:18px 16px;
    }

    .session-title {
        font-size:21px;
    }

    .footer {
        grid-template-columns:1fr;
        text-align:center;
        gap:5px;
    }

    .footer > :last-child {
        text-align:center;
    }

    .validation-note {
        padding:16px;
    }

    .progress-cell {
        min-width:210px;
    }

}