:root{--page:#fff;--surface:#fff;--subtle:#fafafa;--text:#202124;--muted:#5f6368;--border:#dadce0;--accent:#155fc0;--on-accent:#fff;--secondary:#f5f6f7;--hover:#e8f0fe;--success:#17633a;--error:#b3261e}
:root[data-theme=dark]{--page:#15181d;--surface:#1e232b;--subtle:#1a1f26;--text:#e8eaed;--muted:#b4bbc5;--border:#48515e;--accent:#9bc3ff;--on-accent:#122947;--secondary:#2b333f;--hover:#303f55;--success:#8ed9a9;--error:#ffb4ab}
:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#202124;background:#fff;line-height:1.6;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:1320px;margin:auto;padding:24px 32px 64px}header,.heading,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}header{border-bottom:1px solid #e4e5e7;padding-bottom:18px;margin-bottom:28px}.brand{font-size:23px;font-weight:750;letter-spacing:-.8px}.badge{font-size:10px;letter-spacing:1.5px;color:#5f6368;border:1px solid #dadce0;border-radius:20px;padding:4px 10px}h1{font-size:clamp(25px,4vw,32px);line-height:1.4;letter-spacing:-.5px}h2{font-size:20px}h3{margin-top:28px}p{color:#5f6368}section{background:#fff;border:1px solid #dadce0;padding:22px;border-radius:10px;margin:20px 0}button{font:inherit;font-size:14px;border:1px solid transparent;border-radius:6px;background:#155fc0;color:white;font-weight:600;padding:9px 14px;cursor:pointer;margin:4px 4px 4px 0}.secondary{background:#f5f6f7;color:#3c4043;border-color:#e2e4e7}button:hover,.open-link:hover{filter:brightness(.96)}button:disabled{opacity:.5;cursor:wait}input,textarea,select{font:inherit;border:1px solid #dadce0;background:#fff;color:#202124;border-radius:6px;padding:10px}input:not([type=file]),textarea{display:block;width:100%;margin:10px 0}input[type=file]{max-width:100%}label{display:block}form{max-width:520px}video{width:100%;max-height:65vh;background:#000;border-radius:8px;display:block;margin:15px 0}progress{display:block;width:100%;height:8px;margin-top:16px;accent-color:#155fc0}.muted,small{color:#6a6e73;font-size:12px}#message{white-space:pre-wrap}#message:empty{display:none}textarea{resize:vertical}[hidden]{display:none!important}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #155fc0;outline-offset:3px}a{color:#155fc0}#upload-panel{background:#fafafa;padding:16px 20px}#upload-panel h2{margin:0;font-size:17px}#upload-panel p{font-size:12px;margin:6px 0}#capacity{max-width:1000px}.library-heading,.video-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 145px;gap:24px;align-items:center;padding:16px 20px;border-bottom:1px solid #e3e5e8}.library-heading{color:#6a6e73;font-size:12px;border-top:1px solid #dadce0;padding-top:12px;padding-bottom:12px}.video-row:hover{background:#f8f9fa}.video-content{display:flex;gap:18px;align-items:center;min-width:0}.thumbnail{flex:0 0 160px;width:160px;height:90px;background:#eceff1;border-radius:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:#6a6e73;text-decoration:none}.video-thumbnail{display:block;width:100%;height:100%;object-fit:contain;background:#161616}.video-copy{min-width:0}.video-title{display:block;color:#202124;font-size:14px;font-weight:550;text-decoration:none;overflow-wrap:anywhere}.video-title:hover{text-decoration:underline}.video-copy>small{display:block;margin:3px 0}.video-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.video-actions button,.video-actions a{font-size:12px;padding:4px 8px;margin:2px 0;font-weight:500}.video-actions .secondary{background:transparent;border:0}.open-link{text-decoration:none;border-radius:4px;color:#155fc0}.video-actions .delete-video{color:#777;font-size:11px}.video-status small{display:block;margin-top:5px}.status-badge{font-size:12px;color:#5f6368}.status-badge.shared{color:#17633a}.video-date{font-size:12px;color:#5f6368}.empty-library{padding:30px}.back-link{font-size:14px;text-decoration:none}#title{overflow-wrap:anywhere}dialog{border:1px solid #dadce0;border-radius:12px;padding:24px;width:560px;max-width:calc(100% - 32px);box-shadow:0 16px 48px #0002}dialog::backdrop{background:#0005}#rename-error{color:#b3261e;font-size:13px}#rename-dialog .toolbar{justify-content:flex-end}#rename-dialog form{max-width:none}@media(max-width:760px){main{padding:18px 14px 50px}.library-heading{display:none}.video-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:16px 0}.video-content{grid-column:1 / -1;gap:12px}.thumbnail{flex-basis:128px;width:128px;height:72px}.video-status{padding-left:140px}.video-date{align-self:start}.video-status small{display:inline;margin-left:8px}.video-title{font-size:13px}.video-actions{gap:2px}.video-actions button,.video-actions a{font-size:11px;padding:4px}.heading h1{font-size:25px}section{padding:16px}header{margin-bottom:20px}}@media(max-width:420px){.thumbnail{flex-basis:104px;width:104px;height:59px}.video-status{padding-left:116px}.video-date{font-size:11px}.video-row{gap:6px}.video-actions .delete-video{font-size:10px}}
/* Compact owner header; login and shared viewer keep their masthead. */
.owner-page{padding-top:20px}
.owner-header{margin-bottom:16px;padding-bottom:12px;gap:12px}
.owner-heading{min-width:0;flex:1 1 280px}
.owner-heading h1{margin:0;font-size:clamp(25px,3vw,30px)}
#storage-summary{margin:4px 0 0;overflow-wrap:anywhere}
.owner-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.owner-controls button,.owner-controls .badge{margin:0}
.owner-page #upload-panel{margin-top:16px}
@media(max-width:600px){.owner-page{padding-top:16px}.owner-header{gap:10px}.owner-heading{flex-basis:100%}.owner-controls{gap:8px}.owner-controls #logout{font-size:12px}.owner-header .badge{margin-left:0}}
/* Shared palettes and interaction feedback: no layout movement. */
:root{color:var(--text);background:var(--page)}
:root[data-theme=dark]{color-scheme:dark}
header,.badge,section,.library-heading,.video-row,dialog,input,textarea,select{border-color:var(--border)}
section,dialog,input,textarea,select{background:var(--surface);color:var(--text)}
p,.muted,small,.badge,.library-heading,.status-badge,.video-date,.thumbnail,.video-actions .delete-video{color:var(--muted)}
.status-badge.shared{color:var(--success)}
#rename-error{color:var(--error)}
#upload-panel{background:var(--subtle)}
.video-row:hover{background:var(--subtle)}
.thumbnail{background:var(--secondary)}
a,.open-link{color:var(--accent)}
.video-title{color:var(--text)}
button{background:var(--accent);color:var(--on-accent)}
.secondary{background:var(--secondary);color:var(--text);border-color:var(--border)}
progress{accent-color:var(--accent)}
header .badge{margin-left:auto}
#theme-toggle{white-space:nowrap;margin:0;font-size:12px}
a,button,input::file-selector-button{transition:background-color .15s ease,box-shadow .15s ease,filter .15s ease;text-underline-offset:.2em}
a:hover,a:focus-visible{background-color:var(--hover);box-shadow:0 0 0 2px var(--accent);text-decoration:underline;filter:none}
button:enabled:hover,input::file-selector-button:hover{filter:brightness(.9);box-shadow:0 0 0 2px var(--accent)}
button:disabled:hover{filter:none;box-shadow:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
input::file-selector-button{font:inherit;background:var(--secondary);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 8px;cursor:pointer;margin-right:8px}
@media(prefers-reduced-motion:reduce){a,button,input::file-selector-button{transition:none}}