:root{color-scheme:dark;--bg:#101217;--stage:#080a0e;--panel:#1c2028;--raised:#2b303a;--ink:#f5f6f8;--muted:#b0b8c6;--line:#424a58;--accent:#ff6485;--gold:#ffd07a;--good:#93dfc2;--warning:#ffd07a;--radius:20px;font-family:Inter,"Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{border:0;color:inherit;background:transparent;cursor:pointer;min-height:48px;transition:background .15s,color .15s,opacity .15s}button:active{background:var(--raised)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}a{color:var(--ink);text-underline-offset:4px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{pointer-events:none}.symbols{display:none}[hidden]{display:none!important}::selection{background:var(--accent);color:var(--stage)}
.review-app{width:100%;max-width:600px;margin:auto;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow-x:hidden;overflow-y:auto;background:var(--bg)}.topbar{display:flex;justify-content:space-between;align-items:center;min-height:64px;padding:0 20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:25px;font-weight:650;letter-spacing:-.035em;min-height:48px}.brand span{font-size:14px;letter-spacing:0;font-weight:500;color:var(--muted)}.top-actions{display:flex;gap:8px}.top-actions button{width:48px;display:grid;place-items:center;border-radius:12px}.queue-line{display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px;min-height:48px;font-size:13px;color:var(--muted)}.queue-line button{color:var(--ink);font-size:14px;font-weight:600;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-line #count{font-variant-numeric:tabular-nums}
/* Full-width preview, followed by review actions and clip information. */
.stage{flex:1;min-height:min-content;display:flex;flex-direction:column;position:relative;overflow:visible;background:var(--stage);touch-action:pan-x}
.preview-viewport{flex:1;min-height:100px;position:relative;display:grid;place-items:center;overflow:hidden}
.stage video{width:100%;height:100%;min-height:0;min-width:0;position:absolute;inset:0;object-fit:contain;display:block}
.stage-top{position:absolute;top:8px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:1}.stage-top>*{pointer-events:auto}
.badge{font-size:12px;color:var(--muted);padding:7px 10px;background:var(--panel);border-radius:6px}.badge[data-state=approved]{color:var(--accent)}.badge[data-state=flagged]{color:var(--warning)}:is(#viewButton,[data-preview-id="viewButton"]){padding:0 12px;background:var(--panel);border-radius:24px;font-size:13px}.review-actions{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 12px}
.review-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;font-size:13px;padding:4px;border-radius:12px}
.action-disc{width:36px;height:36px;flex:none;border:1px solid var(--line);background:var(--panel);border-radius:50%;display:grid;place-items:center}.action-disc svg{width:22px;height:22px}
/* Explicit review states, shared by the live page and swipe preview. */
:is(#likeButton,[data-preview-id="likeButton"])[aria-pressed=true]{color:#ff5a64}
:is(#likeButton,[data-preview-id="likeButton"])[aria-pressed=true] svg{fill:currentColor}
:is(#flagButton,[data-preview-id="flagButton"])[aria-pressed=true]{color:#ffd34d}
:is(#flagButton,[data-preview-id="flagButton"])[aria-pressed=true] svg{fill:currentColor;fill-opacity:.45}
:is(#trashButton,[data-preview-id="trashButton"])[aria-pressed=true]{color:#62de9c}
:is(#trashButton,[data-preview-id="trashButton"])[aria-pressed=true] svg{fill:currentColor;fill-opacity:.25}
.review-actions button[aria-pressed=true] .action-disc{border-color:currentColor;background:color-mix(in srgb,currentColor 12%,var(--panel))}
.badge[data-state=trashed]{color:#62de9c}
.clip-info{flex:none;min-width:0;padding:4px 20px 16px;pointer-events:none}.clip-info p{margin:0;font-size:12px;line-height:1.55;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clip-info h1{font-size:23px;line-height:1.22;letter-spacing:-.025em;margin:7px 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.clip-info .last-note{color:var(--warning);margin-top:6px}.center-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;background:var(--stage);z-index:3}.center-message h1{font-size:22px;line-height:1.4;margin:16px 0 8px}.center-message p{color:var(--muted);font-size:14px;line-height:1.8;max-width:30ch;margin:0 0 18px}.center-message a,.center-message button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:0 24px;border-radius:12px;background:var(--ink);color:var(--stage);text-decoration:none}.loading-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:breathe 1s ease-in-out infinite alternate}@keyframes breathe{to{opacity:.3}}.tap-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--panel);display:grid;place-items:center;pointer-events:auto}
.player-footer{flex:none;padding:8px 20px 8px;border-top:1px solid var(--line)}.timeline{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.timeline input{min-width:0;flex:1;accent-color:var(--accent);height:30px;cursor:pointer}.transport{display:flex;align-items:center;justify-content:space-between;gap:8px}.transport button{min-width:52px;display:grid;place-items:center;border-radius:10px}.transport #playButton{width:80px}.footnote{display:flex;align-items:center;justify-content:space-between;color:var(--muted);gap:8px;font-size:11px}.footnote button{min-height:40px;font-size:12px;color:var(--good)}.footnote button[data-pending=true]{color:var(--warning)}
dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:24px;width:min(100% - 24px,520px);max-height:86dvh;border-radius:var(--radius);overscroll-behavior:contain;scrollbar-color:var(--line) transparent;box-shadow:0 12px 50px #0008}dialog::backdrop{background:#000b}.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sheet-heading h2{font-size:22px;margin:0}.sheet-heading button{display:grid;place-items:center;min-width:48px;border-radius:50%}#sheetBody p{color:var(--muted);font-size:14px;line-height:1.7}#sheetBody label{display:block;font-size:14px;margin:16px 0 8px}#sheetBody input[type=search],#sheetBody select,#sheetBody textarea{display:block;width:100%;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:12px;border-radius:10px;min-height:48px;caret-color:var(--accent)}#sheetBody textarea{resize:vertical;min-height:110px}#sheetBody textarea::placeholder,#sheetBody input::placeholder{color:var(--muted)}.primary{width:100%;border-radius:12px;background:var(--ink);color:var(--stage);font-weight:650;margin-top:12px;padding:12px}.primary:active{background:var(--muted)}.primary.danger{background:var(--accent);color:var(--stage)}#sheetError{color:var(--warning);font-size:14px;line-height:1.5;margin:8px 0}.rating-display{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px 0 16px;color:var(--gold)}.rating-display svg{width:34px;height:34px}.rating-stepper{display:flex;align-items:center;gap:12px;justify-content:center}.rating-stepper button{border:1px solid var(--line);min-width:48px;border-radius:12px;font-size:24px}.rating-stepper output{font-size:32px;font-weight:600;min-width:110px;text-align:center;font-variant-numeric:tabular-nums}#ratingRange{width:100%;height:48px;accent-color:var(--gold)}.issues{display:flex;flex-wrap:wrap;gap:8px}.issues button{border:1px solid var(--line);padding:10px 14px;border-radius:24px;font-size:14px}.issues button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--stage)}.summary-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;border-bottom:1px solid var(--line);padding:12px 4px;min-height:52px;text-align:left}.summary-row strong{font-variant-numeric:tabular-nums;font-size:20px}.summary-row small{color:var(--muted)}.export-link{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:20px;border:1px solid var(--line);border-radius:12px}.sheet-help{border-top:1px solid var(--line);padding-top:16px}#toast{position:fixed;left:50%;bottom:calc(154px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--stage);font-size:13px;max-width:calc(100% - 32px);width:max-content;z-index:10;box-shadow:0 8px 24px #0005}
@media(min-width:700px){body{background:#050608}.review-app{border-inline:1px solid var(--line)}dialog{margin:auto}}
@media(max-width:360px){.topbar,.queue-line{padding-inline:12px}.brand{font-size:22px;gap:8px}.brand span{font-size:12px}.clip-info{padding-inline:12px}.clip-info h1{font-size:20px}.player-footer{padding-inline:12px}.top-actions{gap:0}.rating-display{gap:4px}.review-actions{gap:4px;padding-inline:8px}.review-actions button{gap:4px;font-size:12px}}
@media(max-height:620px) and (orientation:portrait){.topbar{min-height:52px}.queue-line{min-height:40px}.queue-line button{min-height:40px}.clip-info{padding:0 12px 8px}.clip-info h1{font-size:19px;margin:4px 0}.review-actions{padding-block:4px}.player-footer{padding-top:0}}
@media(orientation:landscape) and (max-height:600px){.review-app{max-width:100%;height:100dvh;min-height:0}.topbar{min-height:48px;height:48px;flex:none}.queue-line{min-height:32px;height:32px;flex:none}.queue-line button{min-height:32px}.preview-viewport{min-height:64px}.stage-top{left:16px;right:16px;top:4px}.review-actions{width:min(100%,600px);align-self:center;padding-block:0}.clip-info{display:flex;align-items:baseline;gap:12px;padding:0 16px 4px}.clip-info h1{font-size:18px;margin:4px 0;-webkit-line-clamp:1;min-width:0}.clip-info p{min-width:0;max-width:24%;flex-shrink:2}.clip-info .last-note{margin-top:0}.player-footer{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:48px 32px;column-gap:20px;padding:0 16px}.timeline{grid-column:1;grid-row:1}.transport{grid-column:2;grid-row:1}.transport #playButton{width:52px}.footnote{grid-column:1/-1;grid-row:2}.footnote button{min-height:32px}dialog{max-height:94dvh}#toast{bottom:90px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Adjacent review pages share one clipped viewport and travel together. */
.pager{flex:1;min-height:min-content;display:grid;position:relative;overflow:clip;touch-action:pan-x}
.pager>.stage{grid-area:1/1;min-width:0}
.pager-neighbor{position:absolute;inset:0;pointer-events:none}
.pager.is-paging>.stage{will-change:transform}
.pager.is-paging~.player-footer{pointer-events:none}
.pager.is-paging .stage{pointer-events:none}
/* Page-wide vertical gestures; slider horizontal intent is handled separately. */
.review-app{touch-action:pan-x;user-select:none;-webkit-user-select:none}
.review-app input[type=range]{touch-action:none}
.queue-line #batchButton{flex:none;font-size:13px;color:var(--gold);padding-inline:8px}
.batch-scopes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.batch-scopes button{border:1px solid var(--line);border-radius:12px;padding:8px}
.batch-scopes button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:var(--raised)}
#sheetBody #batchGroup{font-size:18px;line-height:1.5;margin:20px 0 8px;overflow-wrap:anywhere}
#sheetBody #batchCount{font-size:15px;color:var(--ink);font-weight:600}
.batch-model{overflow-wrap:anywhere;font-size:12px!important}
.batch-refresh{color:var(--good);text-decoration:underline;text-underline-offset:4px;min-height:48px}
.batch-preview{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}
.batch-preview summary{cursor:pointer;min-height:48px;line-height:1.6;padding-block:12px}
.batch-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.batch-sample{min-width:0}.batch-sample button{display:block;padding:0;width:100%}
.batch-sample img,.batch-sample video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--stage);border-radius:8px}
#sheetBody .batch-sample p{font-size:12px;line-height:1.5;margin:6px 0;overflow-wrap:anywhere}
#batchMore{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:8px}
dialog[data-mode=batch][open]{display:flex;flex-direction:column;height:min(86dvh,900px);overflow:hidden}
dialog[data-mode=batch] form{display:flex;flex-direction:column;min-height:0;flex:1}
dialog[data-mode=batch] .sheet-heading,dialog[data-mode=batch] #sheetSubmit,dialog[data-mode=batch] #sheetError{flex:none}
dialog[data-mode=batch] #sheetBody{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}

/* Lock gesture direction ourselves across the entire review surface. */
.review-app,.stage,.pager{touch-action:none}
.group-line{display:flex;align-items:center;gap:8px;flex:none;padding:0 8px;min-height:52px;background:var(--bg)}
.group-line>div{flex:1;min-width:0;text-align:center}.group-line p{margin:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-line span{font-size:11px;color:var(--muted)}
.group-line button{width:44px;flex:none;display:grid;place-items:center}.group-line svg{transform:rotate(-90deg);width:20px}
.scope-line{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;flex:none;min-height:40px;color:var(--muted);font-size:12px}
.scope-line button{color:var(--gold);font-size:12px;min-height:40px;padding-inline:8px;flex:none}
.scope-line button[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px}
@media(orientation:landscape) and (max-height:600px){.group-line{min-height:36px;height:36px}.group-line>div{display:flex;justify-content:center;align-items:center;gap:12px}.group-line button{min-height:36px}.scope-line{min-height:32px;height:32px}.scope-line button{min-height:32px}.clip-info{padding-bottom:0}.preview-viewport{min-height:90px}}

.group-line p{display:flex;justify-content:center;gap:4px}.group-line p span{font-size:13px;color:var(--ink)}.group-line .group-title{min-width:0;overflow:hidden;text-overflow:ellipsis}.group-line .group-position{flex:none}
/* Keep close and submit reachable while the form body scrolls, including landscape. */
dialog[open]{display:flex;flex-direction:column;overflow:hidden}
dialog form{display:flex;flex-direction:column;min-height:0;max-height:calc(86dvh - 50px)}
dialog .sheet-heading,dialog #sheetSubmit,dialog #sheetError{flex:none}
dialog #sheetBody{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--line) transparent}
@media(orientation:landscape) and (max-height:600px){dialog form{max-height:calc(94dvh - 50px)}.rating-display{margin:12px 0}.sheet-heading{margin-bottom:6px}}
@media(max-height:620px) and (orientation:portrait){.clip-info h1{-webkit-line-clamp:1}.group-line{min-height:44px}.scope-line,.scope-line button{min-height:32px}.footnote button{min-height:32px}.player-footer .transport button{min-height:40px}.rating-display{margin:16px 0 12px}}

.group-line .group-identity{display:block;width:auto;max-width:100%;min-height:24px;margin:0 auto;padding:0 4px;font-size:11px;line-height:24px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.identity-details{border-top:1px solid var(--line);margin-top:16px;padding-top:8px}.identity-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:4px 8px;align-items:center}
#sheetBody .identity-row label{grid-column:1/-1;margin:12px 0 0}.identity-row input{min-width:0;width:100%;height:44px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;user-select:text;font-variant-numeric:tabular-nums}.identity-row button{color:var(--gold);min-height:44px}
#sheetBody .rating-equivalent{text-align:center;font-variant-numeric:tabular-nums;margin:8px 0}
@media(orientation:landscape) and (max-height:600px){.group-line .group-identity{margin:0;min-height:28px;line-height:28px}}

/* The visible current scope is itself the mode switch. */
.scope-line{justify-content:flex-start}.scope-line button{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;padding-inline:0;text-align:left}.scope-line button svg{width:16px;height:16px;flex:none}.scope-line button[aria-pressed=true]{text-decoration:none}

/* Keep the stride editable beside the clip navigation, without reducing the video area. */
.transport{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.transport button,.transport #playButton{min-width:0;width:100%}
.navigation-stride{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0;color:var(--muted);font-size:10px;line-height:12px}
.navigation-stride input{min-width:0;width:100%;max-width:64px;height:32px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);caret-color:var(--gold);padding:0 2px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}

.body-type-row{display:flex;align-items:center;gap:8px;flex:none;padding:0 16px;color:var(--muted);font-size:11px;line-height:1.4}
.body-type-row>span{flex:1;min-width:0}.body-type-row button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;min-width:70px;padding:0 2px;font-size:12px;color:var(--ink)}
.body-type-row svg{width:18px;height:18px}.body-check,.body-mixed{display:none}.body-type-row button[aria-checked=true]{color:var(--gold)}.body-type-row button[aria-checked=true] .body-check,.body-type-row button[aria-checked=mixed] .body-mixed{display:block}
@media(orientation:landscape) and (max-height:600px){.body-type-row{width:min(100%,600px);align-self:center}.body-type-row button{min-height:32px}}

.clip-info .last-note{pointer-events:auto;display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:40px;padding:0;text-align:left;font-size:12px;border-radius:4px}
.note-preview{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-open{flex:none;color:var(--gold)}
.note-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}#sheetBody .note-toolbar label{margin:12px 0}.note-toolbar button{min-height:44px;padding:0 8px;color:var(--gold);white-space:nowrap}
#sheetBody #noteEditor{height:clamp(180px,40dvh,380px);min-height:180px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;user-select:text;touch-action:pan-y}
#sheetBody #noteLength{margin:4px 0;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
@media(orientation:landscape) and (max-height:600px){.clip-info .last-note{width:180px;max-width:28%;flex-shrink:0;min-height:32px}}

.note-scope-row{display:flex;align-items:center;gap:12px}#sheetBody .note-scope-row label{margin:0;flex:none}#sheetBody .note-scope-row select{min-width:0;flex:1;width:auto;min-height:44px;padding:8px}