:root { --ink:#09080f; --panel:#11101a; --line:rgba(236,229,255,.16); --paper:#f2edff; --muted:#aaa2bb; --accent:#b897ff; --accent-two:#6cf0cf; }
* { box-sizing:border-box; } body.video-page { background:radial-gradient(circle at 78% -12%,#332158 0,transparent 31%),var(--ink); color:var(--paper); display:flex; font-family:Arial,Helvetica,sans-serif; margin:0; min-height:100vh; } button,input,textarea { font:inherit; } button { cursor:pointer; }
.video-shell { display:flex; flex:1; flex-direction:column; min-width:0; min-height:100vh; }.video-header { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:22px; min-height:76px; padding:0 5.5vw; }.video-tabs { display:flex; gap:4px; }.video-tabs a { border-bottom:1px solid transparent; color:var(--muted); font-size:.68rem; letter-spacing:.13em; padding:10px 8px; text-decoration:none; }.video-tabs a:hover,.video-tabs a.active { border-color:var(--accent); color:var(--paper); }.video-system { align-items:center; color:var(--muted); display:flex; font-size:.55rem; gap:8px; letter-spacing:.12em; margin-left:auto; }.video-system span { background:var(--accent-two); border-radius:50%; box-shadow:0 0 12px var(--accent-two); height:7px; width:7px; }
.video-grid-view { flex:1; padding:7vh 5.5vw; }.video-heading { align-items:end; display:flex; justify-content:space-between; margin:0 auto 27px; max-width:1120px; }.video-kicker { color:var(--accent-two); font-size:.56rem; letter-spacing:.15em; margin:0 0 10px; }.video-heading h1 { font-size:1.1rem; font-weight:400; letter-spacing:.15em; margin:0; }.video-heading>p { color:var(--muted); font-size:.62rem; letter-spacing:.12em; margin:0; }.video-grid { display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 auto; max-width:1120px; }.video-card { aspect-ratio:16/10; background:#15121e; border:1px solid var(--line); color:var(--paper); overflow:hidden; padding:0; position:relative; text-align:left; transition:transform .2s,border-color .2s; }.video-card:hover,.video-card:focus-visible { border-color:var(--accent); outline:0; transform:translateY(-4px); }.video-card video { height:100%; object-fit:cover; opacity:.62; pointer-events:none; width:100%; }.video-play { align-items:center; background:var(--accent); border-radius:50%; color:#160f26; display:flex; font-size:1rem; height:42px; justify-content:center; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); width:42px; }.video-label,.video-name { background:rgba(7,5,12,.75); bottom:10px; font-size:.62rem; letter-spacing:.07em; padding:5px 7px; position:absolute; }.video-label { left:10px; }.video-name { right:10px; }.video-empty { color:var(--muted); grid-column:1/-1; padding:5rem 0; text-align:center; }.video-stage[hidden] { display:none; }.video-stage { align-items:center; display:grid; flex:1; grid-template-columns:8% minmax(0,1fr) 8%; min-height:0; position:relative; }.video-stage figure { align-items:center; display:flex; flex-direction:column; margin:0; min-width:0; }.video-stage video { background:#000; box-shadow:0 26px 65px rgba(0,0,0,.6); max-height:67vh; max-width:100%; }.video-stage figcaption { color:var(--muted); display:flex; font-size:.69rem; gap:13px; letter-spacing:.09em; margin-top:17px; }.video-stage figcaption strong { color:var(--paper); font-weight:400; }.video-stage-nav,.video-close { background:transparent; border:0; color:var(--muted); }.video-stage-nav { font-size:2.1rem; height:100%; }.video-stage-nav:hover,.video-close:hover { color:var(--paper); }.video-close { font-size:.67rem; letter-spacing:.1em; position:absolute; right:25px; text-transform:uppercase; top:17px; }.video-votes { display:flex; gap:16px; margin-top:14px; }.video-votes button { background:transparent; border:0; font-size:1.25rem; opacity:.45; }.video-votes button.active,.video-votes button:hover { opacity:1; transform:scale(1.15); }.video-footer { border-top:1px solid var(--line); color:var(--muted); display:flex; font-size:.57rem; justify-content:space-between; letter-spacing:.07em; padding:14px 5.5vw; }.video-footer p { margin:0; }.video-footer nav { display:flex; flex-wrap:wrap; gap:12px; }.video-footer a { color:inherit; text-decoration:none; }.video-footer a:hover { color:var(--paper); }
.video-filters { border-left:1px solid var(--line); display:flex; flex-direction:column; gap:17px; justify-content:center; padding:18px; }.video-filters button { background:transparent; border:1px solid transparent; border-radius:50%; color:var(--muted); font-size:1.1rem; height:40px; width:40px; }.video-filters button.active,.video-filters button:hover { background:rgba(184,151,255,.14); border-color:rgba(184,151,255,.38); color:var(--paper); }.video-dialog { background:var(--panel); border:1px solid var(--line); border-radius:10px; color:var(--paper); max-height:88vh; max-width:540px; padding:30px; width:min(90vw,540px); }.video-dialog::backdrop { background:rgba(0,0,0,.82); }.dialog-close { background:transparent; border:0; color:var(--muted); font-size:1.7rem; position:absolute; right:14px; top:10px; }.video-dialog h2 { font-size:1rem; letter-spacing:.14em; }.video-dialog p,.video-dialog label { color:var(--muted); font-size:.75rem; line-height:1.55; }.video-dialog form { display:flex; flex-direction:column; gap:11px; }.video-dialog label { display:grid; gap:6px; letter-spacing:.06em; }.video-dialog input,.video-dialog textarea { background:rgba(255,255,255,.035); border:1px solid var(--line); color:var(--paper); padding:10px; }.video-dialog form button,.video-admin-list button { background:rgba(184,151,255,.15); border:1px solid rgba(184,151,255,.38); color:var(--paper); padding:11px; }.upload-limit { margin:0; }.video-admin-stats { display:grid; gap:7px; grid-template-columns:repeat(3,1fr); margin:20px 0; }.video-admin-stats article { background:#0b0912; border:1px solid var(--line); padding:10px; }.video-admin-stats span { color:var(--muted); display:block; font-size:.53rem; }.video-admin-stats strong { display:block; font-size:1.2rem; font-weight:400; margin-top:9px; }.video-admin-list { display:grid; gap:6px; margin-top:12px; }.video-admin-row { align-items:center; background:#0b0912; display:grid; gap:8px; grid-template-columns:68px 1fr auto; padding:8px; }.video-admin-row video { height:42px; object-fit:cover; width:68px; }.video-admin-row span { color:var(--muted); font-size:.64rem; }
@media (max-width:800px) { body.video-page { flex-direction:column; }.video-shell { min-height:calc(100vh - 116px); }.video-header { min-height:58px; padding:0 5vw; }.video-tabs { gap:0; }.video-tabs a { font-size:.52rem; padding:8px 4px; }.video-system { display:none; }.video-grid-view { padding:36px 6vw; }.video-grid { gap:13px; grid-template-columns:repeat(2,minmax(0,1fr)); }.video-footer { align-items:start; flex-direction:column; gap:8px; padding:13px 6vw; }.video-filters { border-left:0; border-top:1px solid var(--line); flex-direction:row; order:3; padding:8px; }.video-stage { grid-template-columns:38px minmax(0,1fr) 38px; }.video-stage video { max-height:54vh; }.video-admin-stats { grid-template-columns:repeat(3,1fr); }.video-admin-row { grid-template-columns:55px 1fr auto; }.video-admin-row video { width:55px; } }