:root { color-scheme: dark; --bg:#0b1118; --panel:#121c27; --line:#243444; --ink:#f5f8fb; --muted:#9aa9b8; --accent:#54d4b2; --accent2:#80a9ff; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif; }
body { padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.shell { width:min(900px,100%); margin:0 auto; padding:20px 18px 28px; }
.topbar, .controls { display:flex; align-items:center; gap:10px; }
.topbar { justify-content:space-between; margin-bottom:20px; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:11px; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(28px,6vw,44px); letter-spacing:-.04em; }
.badge { border:1px solid #35675b; border-radius:999px; color:var(--accent); padding:5px 10px; font-size:12px; }
.controls { flex-wrap:wrap; margin-bottom:10px; }
button, select { border:1px solid var(--line); border-radius:10px; background:#182534; color:var(--ink); font:inherit; padding:10px 13px; }
button { cursor:pointer; } button:disabled { cursor:default; opacity:.45; } button.primary { background:var(--accent); color:#071510; border-color:var(--accent); font-weight:700; }
.direction { display:flex; align-items:center; gap:7px; margin-left:auto; color:var(--muted); font-size:13px; }
select { padding:9px 8px; }
.status { color:var(--muted); min-height:22px; margin:10px 0; font-size:14px; }
.caption-scroll { position:relative; height:min(68vh,620px); min-height:380px; overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 4px 26px; }
.history { display:flex; flex-direction:column; gap:22px; }
.history-item, .draft { padding:0 8px; }
.history-item + .history-item { border-top:1px solid rgba(96,122,145,.18); padding-top:20px; }
.source, .target { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
.source { font-size:clamp(20px,4.5vw,31px); line-height:1.27; font-weight:600; }
.target { color:var(--accent); font-size:clamp(17px,3.8vw,25px); line-height:1.34; margin-top:7px; }
.history-item small { display:block; color:var(--muted); font-size:11px; margin-top:9px; }
.draft { margin-top:28px; padding-top:18px; border-top:1px dashed #416173; opacity:.88; }
.draft .source { color:#dce6ef; }
.draft .target { color:var(--accent2); }
.latest { position:sticky; float:right; margin-top:-52px; margin-right:8px; background:var(--accent2); color:#08101a; border:0; font-weight:700; }
.notice { clear:both; color:var(--muted); font-size:12px; line-height:1.5; margin:22px 2px 0; }
@media (max-width:600px) { .shell { padding-left:14px; padding-right:14px; } .direction { width:100%; margin-left:0; } .caption-scroll { min-height:55vh; } }

.draft small { display:block; color:var(--muted); margin-top:9px; font-size:11px; }
.pending-item + .pending-item { margin-top:20px; }