:root {
    --bg: #f3f6fb;
    --surface: #ffffff;
    --surface-soft: #f8faff;
    --ink: #152238;
    --muted: #6f7d91;
    --line: #e2e8f2;
    --primary: #3867f4;
    --primary-dark: #244ed1;
    --nav: #101b31;
    --nav-soft: #1b2a47;
    --success: #159a68;
    --warning: #c9780b;
    --danger: #cf3f53;
    --radius: 16px;
    --shadow: 0 16px 40px rgba(27, 45, 78, .08);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(56,103,244,.22); outline-offset: 2px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.55rem, 2vw, 2rem); margin-bottom: 0; letter-spacing: -.035em; }
h2 { font-size: 1.15rem; margin-bottom: 0; letter-spacing: -.02em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.eyebrow { color: #8a97aa; font-size: .68rem; font-weight: 800; letter-spacing: .15em; margin-bottom: .35rem; }
.brand-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(145deg,#5077ff,#7138df); color: #fff; font-size: 1.45rem; font-weight: 900; box-shadow: 0 14px 30px rgba(71,86,224,.28); }
.brand-mark.small { width: 42px; height: 42px; border-radius: 12px; font-size: .92rem; box-shadow: none; }

.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(360px,1.2fr) minmax(360px,.8fr); background: radial-gradient(circle at 20% 20%,#2c436f 0,#14213a 48%,#0c1426 100%); }
.login-brand { padding: clamp(3rem,7vw,7rem); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.login-brand h1 { font-size: clamp(2.8rem,5.5vw,5.4rem); max-width: 750px; margin: 1.5rem 0; }
.login-brand > p:not(.eyebrow) { max-width: 650px; color: #c8d4ea; font-size: 1.16rem; line-height: 1.75; }
.login-brand ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; color: #e0e8f7; }
.login-brand li::before { content: "✓"; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: .75rem; border-radius: 50%; background: rgba(85,219,171,.18); color: #64e0b6; font-weight: 900; }
.login-card { width: min(470px,calc(100% - 3rem)); margin: auto; padding: clamp(2rem,4vw,3rem); background: rgba(255,255,255,.98); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.login-title { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 2.4rem; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #24bd7c; box-shadow: 0 0 0 5px rgba(36,189,124,.13); }
.login-card h2 { font-size: 1.8rem; margin-bottom: .6rem; }
.login-card form { display: grid; gap: 1.1rem; margin-top: 2rem; }
.secure-note { margin: 1.5rem 0 0; text-align: center; color: var(--muted); font-size: .78rem; }

label { display: grid; gap: .45rem; color: #44526a; font-size: .78rem; font-weight: 750; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: .78rem .85rem; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #c3cee0; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(56,103,244,.11); outline: 0; }
textarea { resize: vertical; }

.primary, .secondary, .ghost, .text-button { border: 0; border-radius: 10px; padding: .72rem 1rem; font-weight: 800; }
.primary { background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(56,103,244,.18); }
.primary:hover { background: var(--primary-dark); }
.secondary { background: #eaf0ff; color: #3158d4; }
.secondary:hover { background: #dce6ff; }
.ghost { background: transparent; color: var(--muted); }
.ghost:hover { background: var(--surface-soft); color: var(--ink); }
.text-button { background: transparent; color: var(--primary); padding-inline: .25rem; }
.wide { width: 100%; }
.icon-button { border: 0; background: transparent; color: inherit; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 1.1rem; }
.icon-button:hover { background: rgba(112,132,168,.12); }
.form-error { color: var(--danger); min-height: 1.2rem; margin: 0; font-size: .82rem; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 255px minmax(0,1fr); transition: grid-template-columns .2s ease; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--nav); color: #dbe4f5; padding: 1.3rem 1rem; z-index: 30; transition: padding .2s ease; }
.app-brand { position: relative; display: flex; gap: .75rem; align-items: center; padding: .2rem .5rem 1.6rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.app-brand .brand-copy { display: grid; gap: .1rem; min-width: 0; }
.app-brand strong { font-size: .92rem; color: #fff; }
.app-brand span { font-size: .65rem; letter-spacing: .16em; color: #7f90ae; font-weight: 800; }
.sidebar-collapse { position: absolute; right: -.65rem; bottom: -.8rem; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #dbe4f5; background: #1d2b47; font: 700 1.25rem/1 system-ui,sans-serif; z-index: 2; }
.sidebar-collapse:hover { color: #fff; background: #2a3d63; }
.sidebar nav { display: grid; gap: .35rem; padding-top: 1.3rem; }
.nav-item { border: 0; background: transparent; color: #9cabc3; text-align: left; padding: .78rem .9rem; border-radius: 10px; display: flex; align-items: center; gap: .8rem; font-size: .83rem; font-weight: 700; }
.nav-item .nav-icon { flex: 0 0 20px; width: 20px; text-align: center; font-size: 1rem; }
.nav-item .nav-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: linear-gradient(90deg,#315ee1,#456ff1); box-shadow: 0 9px 20px rgba(34,73,187,.25); }
.sidebar-user { margin-top: auto; padding: 1rem .45rem .25rem; border-top: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 36px 1fr 32px; gap: .65rem; align-items: center; }
.sidebar-user .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #2e4166; color: #fff; font-weight: 850; }
.sidebar-user div { display: grid; min-width: 0; }
.sidebar-user strong { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user div span { color: #8191ad; font-size: .67rem; overflow: hidden; text-overflow: ellipsis; }
.app-shell.sidebar-collapsed { grid-template-columns: 78px minmax(0,1fr); }
.sidebar-collapsed .sidebar { padding-inline: .65rem; }
.sidebar-collapsed .app-brand { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .app-brand .brand-copy, .sidebar-collapsed .nav-label, .sidebar-collapsed .sidebar-user > div { display: none; }
.sidebar-collapsed .sidebar-collapse { right: -.35rem; transform: rotate(180deg); }
.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding-inline: .5rem; }
.sidebar-collapsed .sidebar-user { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
.sidebar-collapsed .sidebar-user #logout-button { margin-top: .2rem; }

.main-area { min-width: 0; }
.topbar { height: 92px; padding: 1.1rem clamp(1rem,3vw,2.4rem); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 20; }
.top-actions { display: flex; align-items: center; gap: .8rem; }
.status-chip { color: var(--success); background: #e8faf3; border: 1px solid #c8f0e0; padding: .48rem .72rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.content { padding: clamp(1rem,3vw,2.4rem); max-width: 1600px; margin: 0 auto; }
.global-message { position: fixed; top: 108px; right: 1.5rem; z-index: 90; max-width: 420px; padding: .8rem 1rem; border-radius: 10px; background: #17243c; color: #fff; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: .2s; font-size: .82rem; }
.global-message.show { opacity: 1; transform: translateY(0); }
.global-message.error { background: #a92f43; }
.view { display: none; }
.view.active { display: block; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card { position: relative; overflow: hidden; min-height: 150px; padding: 1.2rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(29,46,77,.05); display: grid; align-content: space-between; }
.stat-card::after { content: ""; position: absolute; width: 82px; height: 82px; border-radius: 50%; right: -26px; top: -28px; opacity: .18; background: currentColor; }
.stat-card > span { color: var(--muted); font-size: .76rem; font-weight: 750; }
.stat-card strong { font-size: 2rem; letter-spacing: -.04em; }
.stat-card small { color: #92a0b3; }
.accent-blue { color: #3567ed; }.accent-violet { color: #8547dc; }.accent-green { color: #159a68; }.accent-orange { color: #d07a12; }
.stat-card strong, .stat-card span, .stat-card small { position: relative; z-index: 1; }
.stat-card span, .stat-card small { color: var(--muted); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: 1rem; }
.panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: 0 8px 28px rgba(29,46,77,.045); }
.wide-card { grid-column: 1/-1; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.recent-list { display: grid; gap: .2rem; }
.recent-item { display: grid; grid-template-columns: 42px 1fr auto; gap: .8rem; align-items: center; padding: .72rem .4rem; border-bottom: 1px solid #eef2f7; }
.video-thumb { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: #edf2ff; color: var(--primary); font-weight: 900; }
.recent-item div { min-width: 0; }
.recent-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.recent-item span, .recent-item time { color: var(--muted); font-size: .7rem; }
.empty-state { color: var(--muted); padding: 2rem; text-align: center; border: 1px dashed #d6dfec; border-radius: 12px; }
.storage-gauge { display: grid; gap: .65rem; }
.storage-gauge > div { height: 9px; background: #edf1f7; border-radius: 999px; overflow: hidden; }
.storage-gauge > div span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3867f4,#7453e5); }
.storage-gauge strong { font-size: 1.6rem; }
.storage-gauge small { color: var(--muted); }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.3rem; }
.quick-actions button { border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); padding: .8rem .5rem; border-radius: 10px; font-weight: 750; font-size: .73rem; }
.quick-actions button span { color: var(--primary); margin-right: .3rem; }
.audit-list { display: grid; gap: .55rem; }
.audit-item { display: grid; grid-template-columns: 10px 1fr auto; gap: .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #eff2f7; font-size: .75rem; }
.audit-item i { width: 8px; height: 8px; border-radius: 50%; background: #5d82ef; }
.audit-item time { color: var(--muted); }

.toolbar { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; margin-bottom: 1rem; }
.toolbar > :first-child { margin-right: auto; }
.search-box { width: min(360px,100%); display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding-left: .75rem; color: var(--muted); }
.search-box input { border: 0; box-shadow: none; }
.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .78rem; }
th { color: #7a879a; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; background: #f8faff; }
th, td { padding: .88rem 1rem; border-bottom: 1px solid #edf1f6; vertical-align: middle; }
tbody tr:hover { background: #fbfcff; }
.table-video { display: flex; align-items: center; gap: .65rem; min-width: 220px; }
.table-video div { min-width: 0; }
.table-video strong { display: block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-video small { color: var(--muted); }
.video-title-button { display: block; max-width: 320px; padding: 0; border: 0; background: transparent; color: var(--ink); font-weight: 800; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-title-button:hover { color: var(--primary); text-decoration: underline; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .34rem .55rem; border-radius: 999px; background: #edf2ff; color: #365cc8; font-size: .66rem; font-weight: 800; }
.badge.success { background: #e9f8f1; color: #13825a; }.badge.muted { background: #eef1f5; color: #6d7889; }.badge.warning { background: #fff4dd; color: #a4650a; }
.row-actions { display: flex; justify-content: flex-end; gap: .35rem; white-space: nowrap; }
.row-actions button { border: 0; border-radius: 8px; padding: .46rem .62rem; background: #eef3ff; color: #365cc8; font-size: .7rem; font-weight: 800; }
.row-actions button.danger { background: #fff0f2; color: var(--danger); }

.page-grid { display: grid; gap: 1rem; }.two-columns { grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); }
#upload-form { display: grid; gap: 1rem; }
.drop-zone { min-height: 260px; border: 2px dashed #cfd9e8; border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #f9fbff; color: var(--muted); transition: .18s; cursor: pointer; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--primary); background: #f1f5ff; }
.drop-zone input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.drop-zone strong { color: var(--ink); margin: .8rem 0 .35rem; }
.drop-zone small { margin-top: .6rem; }
.upload-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #e9efff; color: var(--primary); font-size: 1.6rem; font-weight: 900; }
.selected-file { min-height: 0; color: var(--muted); font-size: .76rem; }
.upload-progress { margin-top: 1rem; display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; }
.upload-progress[hidden] { display: none; }
.upload-progress > div { height: 10px; border-radius: 999px; background: #edf1f7; overflow: hidden; }
.upload-progress > div span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#3867f4,#24bd7c); transition: width .2s; }
.upload-progress small { grid-column: 1/-1; color: var(--muted); }
.upload-progress.complete strong, .upload-progress.complete small { color: var(--success); font-weight: 800; }
.info-card { background: linear-gradient(145deg,#152644,#1c345c); color: #fff; border: 0; }
.info-card .eyebrow { color: #85a3d3; }.info-card ul { padding-left: 1.2rem; color: #cad6e9; line-height: 1.75; font-size: .8rem; }
.inline-form { display: flex; gap: .6rem; }.inline-form input { min-width: 260px; }
.folder-root-card { margin-bottom: 1rem; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); align-items: center; gap: 1rem; }
.folder-root-card h2 { margin: .15rem 0 .35rem; }.folder-root-card p { margin: 0; }
.folder-root-path { min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.folder-root-path span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.folder-root-path code { display: block; overflow-wrap: anywhere; color: #2d4f8d; font-size: .7rem; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 1rem; }
.folder-card { padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: start; gap: .75rem; }
.folder-icon { width: 46px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: #fff2cf; color: #b57916; font-size: 1.2rem; }
.folder-details { min-width: 0; display: grid; gap: .25rem; }.folder-card strong { font-size: .82rem; }.folder-card small { color: var(--muted); }
.folder-details code { color: #365cc8; font-size: .68rem; overflow-wrap: anywhere; }.folder-storage-path { color: var(--muted); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .6rem; overflow-wrap: anywhere; }
.folder-actions { display: flex; gap: .35rem; }.icon-button.danger { color: var(--danger); background: #fff0f2; }.icon-button:disabled { opacity: .4; cursor: not-allowed; }

.qr-workspace { display: grid; grid-template-columns: minmax(330px,.75fr) minmax(380px,1.25fr); gap: 1rem; align-items: start; }
.qr-controls { display: grid; gap: .9rem; }
.control-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
input[type="color"] { padding: .25rem; height: 42px; }
input[type="range"] { padding: 0; border: 0; box-shadow: none; accent-color: var(--primary); }
.file-status { color: var(--muted); font-size: .7rem; font-weight: 650; overflow-wrap: anywhere; }
.ghost.compact { width: max-content; padding: .4rem .55rem; font-size: .7rem; }
.ghost.compact[hidden] { display: none; }
.center-text-controls, .center-image-controls { display: grid; gap: .8rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.center-text-controls[hidden], .center-image-controls[hidden] { display: none; }
.text-style-options { display: flex; flex-wrap: wrap; gap: 1rem; }
.text-style-options .check-label { color: var(--ink); font-weight: 750; }
.warning { padding: .7rem; border-radius: 9px; background: #fff4dd; color: #9b610c; font-size: .72rem; line-height: 1.45; }
.warning[hidden] { display: none; }
.qr-preview-card { position: sticky; top: 108px; }
.qr-preview-header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.validation { padding: .38rem .58rem; border-radius: 999px; font-size: .66rem; font-weight: 850; }
.validation.pending { background: #eef1f5; color: #697589; }.validation.valid { background: #e6f8f0; color: #14815a; }.validation.invalid { background: #fff0f2; color: #bd3549; }
.qr-preview { width: min(480px,90%); aspect-ratio: 1; margin: 1.3rem auto .8rem; display: grid; place-items: center; background: #f4f7fb; border-radius: 18px; overflow: hidden; }
.qr-preview canvas, .qr-preview svg { max-width: 100%; max-height: 100%; }
.qr-url { max-width: 620px; margin: 0 auto 1rem; text-align: center; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.qr-caption-preview { width: min(480px,90%); margin: 1rem auto 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink); text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; font-weight: 650; line-height: 1.45; text-transform: none; }
.qr-caption-preview[hidden] { display: none; }
.download-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }

.report-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.report-note { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid #f0dca8; border-radius: 11px; color: #815b12; background: #fff8e8; font-size: .75rem; line-height: 1.55; }
.report-note[hidden] { display: none; }
.report-chart-card { margin-bottom: 1rem; }
.report-legend { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--muted); font-size: .67rem; font-weight: 750; }
.report-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: .3rem; border-radius: 3px; vertical-align: -1px; }
.report-legend .mobile::before, .report-bar .mobile { background: #3867f4; }
.report-legend .tablet::before, .report-bar .tablet { background: #7c4fe4; }
.report-legend .desktop::before, .report-bar .desktop { background: #24a873; }
.report-daily { height: 260px; display: grid; grid-template-columns: repeat(14,minmax(34px,1fr)); gap: .5rem; align-items: stretch; overflow-x: auto; padding: 1rem .2rem 0; }
.report-day { min-width: 34px; display: grid; grid-template-rows: minmax(150px,1fr) auto auto; gap: .25rem; text-align: center; }
.report-day strong { color: var(--ink); font-size: .62rem; }
.report-day small { color: var(--muted); font-size: .58rem; }
.report-bar-track { display: flex; align-items: flex-end; justify-content: center; min-height: 150px; border-bottom: 1px solid var(--line); background: linear-gradient(to top,rgba(226,232,241,.6) 1px,transparent 1px); background-size: 100% 25%; }
.report-bar { width: min(24px,72%); min-height: 0; display: flex; flex-direction: column-reverse; overflow: hidden; border-radius: 6px 6px 2px 2px; box-shadow: 0 4px 12px rgba(24,49,90,.12); transition: height .2s ease; }
.report-bar span { min-height: 0; }
.report-links-card .panel-heading { padding: .2rem 0 1rem; }

.check-label { display: flex; align-items: center; gap: .55rem; }.check-label input { width: auto; }
dialog { width: min(590px,calc(100% - 2rem)); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 25px 80px rgba(7,18,38,.35); }
dialog::backdrop { background: rgba(8,17,34,.6); backdrop-filter: blur(3px); }
.dialog-form { display: grid; gap: 1rem; padding: 1.4rem; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.dialog-heading .icon-button { font-size: 1.5rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .4rem; }
.video-preview-dialog { width: min(920px,calc(100% - 2rem)); }
.video-preview-shell { display: grid; gap: 1rem; padding: 1.25rem; }
.video-preview-shell .dialog-heading { align-items: flex-start; }
.video-preview-shell .dialog-heading p { margin: .35rem 0 0; }
#admin-video-player { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #05070b; }
.slug-input { display: flex; align-items: stretch; }
.slug-input span { display: grid; place-items: center; flex: 0 0 auto; padding: 0 .75rem; border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; background: var(--surface-soft); color: var(--muted); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.slug-input input { border-radius: 0 10px 10px 0; }
.mobile-only { display: none; }

@media (max-width: 1050px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .report-summary-grid { grid-template-columns: 1fr 1fr; }
    .qr-workspace, .two-columns, .folder-root-card { grid-template-columns: 1fr; }
    .qr-preview-card { position: static; }
}

@media (max-width: 760px) {
    .login-layout { grid-template-columns: 1fr; padding: 1rem; }
    .login-brand { display: none; }
    .login-card { margin: auto; }
    .app-shell { grid-template-columns: 1fr; }
    .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
    .sidebar { position: fixed; transform: translateX(-105%); transition: transform .2s; width: 255px; box-shadow: 20px 0 45px rgba(7,17,34,.22); }
    .sidebar-collapsed .sidebar { padding: 1.3rem 1rem; }
    .sidebar-collapsed .app-brand { justify-content: flex-start; padding: .2rem .5rem 1.6rem; }
    .sidebar-collapsed .app-brand .brand-copy, .sidebar-collapsed .nav-label, .sidebar-collapsed .sidebar-user > div { display: grid; }
    .sidebar-collapsed .nav-item { justify-content: flex-start; gap: .8rem; padding: .78rem .9rem; }
    .sidebar-collapsed .sidebar-user { grid-template-columns: 36px 1fr 32px; justify-items: stretch; padding: 1rem .45rem .25rem; }
    .sidebar-collapse { display: none; }
    .sidebar.open { transform: translateX(0); }
    .mobile-only { display: grid; }
    .topbar { height: 78px; padding: .8rem 1rem; gap: .7rem; }
    .topbar h1 { font-size: 1.25rem; }
    .top-actions .status-chip { display: none; }
    .top-actions .primary { padding: .6rem .7rem; font-size: .7rem; }
    .content { padding: 1rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-card { min-height: 125px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .wide-card { grid-column: auto; }
    .toolbar { flex-wrap: wrap; justify-content: stretch; }
    .toolbar > * { flex: 1 1 180px; }
    .toolbar > :first-child { margin-right: 0; }
    .inline-form { flex-direction: column; }.inline-form input { min-width: 0; }
    .control-row { grid-template-columns: 1fr; }
    .download-grid { grid-template-columns: 1fr; }
    .qr-preview { width: 100%; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .report-summary-grid { grid-template-columns: 1fr 1fr; }
    .stat-card { min-height: 110px; }
    .quick-actions { grid-template-columns: 1fr; }
    .panel-card { padding: 1rem; }
}