:root{
  --paper:#EFF0EA;
  --card:#F8F9F5;
  --ink:#191A15;
  --soft:#6E7268;
  --line:#D7D9CE;
  --pine:#1B4D3E;
  --pine-lift:#286B57;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
/* Атрибут hidden задаётся стилем браузера, и любое собственное display его перебивает */
[hidden]{display:none !important}
/* Снимается сразу после applyLang: см. встроенный скрипт в index.html */
html[data-en] [data-i18n]{visibility:hidden}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

.bar{
  display:flex; align-items:stretch; gap:18px;
  min-height:56px; padding:0 20px; border-bottom:1px solid var(--line);
  background:#FFFFFF;
}
.mark{
  display:flex; align-items:center; justify-content:center;
  font-weight:680; letter-spacing:-.02em; font-size:22px;
  padding:0 20px; min-width:150px;
}
.lang button{
  border:1px solid var(--line); background:transparent; color:var(--soft);
  font:inherit; font-size:14.5px; padding:5px 12px; cursor:pointer;
}
.lang button:first-child{border-radius:3px 0 0 3px}
.lang button:last-child{border-radius:0 3px 3px 0; border-left:none}
.lang button.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}

main{max-width:760px; margin:0 auto; padding:44px 24px 80px}
h1{font-size:34px; line-height:1.15; letter-spacing:-.025em; font-weight:640; margin:0 0 10px}


.drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:172px; padding:24px; cursor:pointer;
  background:var(--card); border:1.5px dashed var(--line); border-radius:6px;
  transition:border-color .15s, background .15s;
}
.drop:hover,.drop:focus-visible{border-color:var(--pine); outline:none}
.drop.hot{border-color:var(--pine); background:#EAF2EE; border-style:solid}
.drop-main{font-weight:560}
.drop-sub{color:var(--soft); font-size:14px}

.tally{margin:14px 0 0; font-size:13px; color:var(--soft); letter-spacing:.01em}
.warn{
  margin:10px 0 0; padding:9px 12px; font-size:13px;
  background:#FBF3E4; border-left:3px solid #C08A2E; color:#5C4514; border-radius:0 3px 3px 0;
}

.controls{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:20px 0 0}
.controls label{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--soft)}
.arrow{color:var(--soft); font-size:15px}
select{font:inherit; font-size:14px; padding:7px 9px; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--ink)}
#run{margin-left:auto}

.primary{
  font:inherit; font-weight:560; font-size:15px; padding:9px 20px;
  background:var(--pine); color:#F5F7F2; border:none; border-radius:4px; cursor:pointer;
  transition:background .15s;
}
.primary:hover:not(:disabled){background:var(--pine-lift)}
.primary:disabled{background:var(--line); color:#9A9E92; cursor:not-allowed}
.wide{width:100%; margin-top:12px; padding:12px}
.saverow .hint{margin-top:8px}

.status{
  margin:0 0 14px; font-size:15px; font-weight:600; color:var(--pine);
}
.status.bad{color:#9C2B14}

.saverow{
  position:sticky; bottom:0; z-index:5;
  margin-top:20px; padding:14px 0 16px;
  background:var(--paper); border-top:1px solid var(--line);
}
.saverow::before{
  content:''; position:absolute; left:0; right:0; top:-18px; height:18px;
  background:linear-gradient(to top, var(--paper), transparent); pointer-events:none;
}
.seg{display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; width:fit-content}
.seg button{
  font:inherit; font-size:13.5px; padding:7px 14px; cursor:pointer;
  background:var(--card); color:var(--soft); border:none; border-right:1px solid var(--line);
}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ink); color:var(--paper)}
.hint{margin:10px 0 0; font-size:13px; color:var(--soft)}
.linkish{
  font:inherit; font-size:13px; background:none; border:none; padding:0;
  color:var(--pine); text-decoration:underline; cursor:pointer;
}

.ledger{margin-top:36px; border-top:1px solid var(--line); padding-top:22px}
.total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px}
.total-num{font-size:30px; letter-spacing:-.02em}
.total-lbl{color:var(--soft); font-size:13px; margin-left:8px}
.total-delta{color:var(--pine); font-size:15px; font-weight:600}

.rows{list-style:none; margin:0; padding:0}
.rows li{
  display:grid; grid-template-columns:1fr auto; gap:3px 16px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.name{grid-column:1 / -1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.meta{color:var(--soft); font-size:12.5px}
.dims{text-align:right}
.bar-track{grid-column:1 / -1; height:3px; margin-top:4px; background:var(--line); border-radius:2px; overflow:hidden}
.bar-fill{height:100%; width:0; background:var(--pine); transition:width .25s}
li.err .name,li.err .meta{color:#9C2B14}

.foot{display:none;
  text-align:center; color:var(--soft); font-size:12px;
  padding:20px; border-top:1px solid var(--line);
}

@media (max-width:600px){
  h1{font-size:27px}
  main{padding:32px 18px 60px}
  .controls{gap:14px}
  #run{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

.badge{
  display:inline-block; font-family:var(--sans); font-size:11.5px; line-height:1;
  padding:3px 7px 3px 6px; border-radius:10px; white-space:nowrap;
  background:#DFEBE5; color:var(--pine); cursor:help;
}
.badge::before{content:'✓ '; font-weight:700}
.rows li.more{
  color:var(--soft); font-size:13px; font-style:italic;
  display:block; border-bottom:none; padding-top:14px;
}

.warn.stop{background:#FBEBE6; border-left-color:#9C2B14; color:#6B2410}


/* Ширина вкладок делится поровну, поэтому не зависит от шрифта системы
   и не требует правок при добавлении новых инструментов. */
.tools{
  display:flex; align-items:stretch; margin-right:auto;
  flex:1 1 auto; max-width:clamp(220px, 32vw, 360px);
  margin-top:-1px; margin-bottom:-1px;
}
.tools button{
  flex:1 1 0; min-width:0;
  font:inherit; font-size:16px; font-weight:530; padding:0 12px;
  background:#FFFFFF; color:var(--soft);
  border:1px solid var(--line); border-left-width:0;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tools button:first-child{border-left-width:1px}
.tools button:hover{color:var(--ink); background:var(--paper)}
.tools button.on{background:var(--pine); color:var(--paper); border-color:var(--pine)}
.tools button.on + button{border-left-width:0}

.lang{display:flex; align-items:center}
.alt{margin:9px 0 0; display:flex; flex-wrap:wrap; gap:16px}

.group{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.lbl{font-size:14px; color:var(--soft)}
@media (max-width:600px){
  .bar{gap:10px; padding:0 12px; min-height:50px}
  .mark{font-size:18px; padding:0 8px; min-width:0}
  .tools{max-width:none; flex:1 1 auto}
  .tools button{padding:0 6px; font-size:14px}
  .seg button{padding:7px 10px; font-size:12.5px}
  .group{gap:10px}
  .controls{gap:10px}
}

.offline{
  flex-basis:100%; margin:0; font-size:13px; color:#8A5A12;
  background:#FBF3E4; border-left:3px solid #C08A2E;
  padding:7px 11px; border-radius:0 3px 3px 0;
}

.videobox{display:block; margin:16px 0 0; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:6px}
.vcontrol{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px}
.vpair{display:inline-flex; align-items:center; gap:10px}
.stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.stepper button{
  font:inherit; font-size:16px; line-height:1; width:30px; height:30px;
  background:var(--paper); border:none; color:var(--ink); cursor:pointer;
  touch-action:none;                       /* удержание не должно прокручивать страницу */
  user-select:none; -webkit-user-select:none;
}
.stepper button:hover{background:#E4E6DE}
.stepper button:active{background:#DADDD2}
.stepper input{
  width:56px; height:30px; text-align:center; font:inherit; font-size:14px;
  border:none; border-left:1px solid var(--line); border-right:1px solid var(--line);
  background:transparent; color:var(--ink); padding:0;
}
.stepper input:focus{outline:2px solid var(--pine); outline-offset:-2px}

/* Полоса выбора кадра появляется, когда из ролика берут ровно один кадр */
.scrub{margin-top:18px}
.scrub-shot{
  display:block; height:150px; width:auto; max-width:100%;
  border-radius:4px; border:1px solid var(--line); background:var(--paper);
}
.scrub-line{display:flex; align-items:center; gap:12px; margin-top:10px}
.scrub-line input[type=range]{flex:1 1 auto; min-width:0; accent-color:var(--pine)}

.strip{display:flex; gap:6px; overflow-x:auto; margin-top:22px; padding-bottom:6px}
.strip .shot{
  height:74px; width:auto; min-width:44px; border-radius:4px; border:1px solid var(--line);
  background:var(--paper); flex:0 0 auto;
}
.strip .more-frames{
  display:flex; align-items:center; flex:0 0 auto; margin-left:2px;
  padding:0 12px; height:74px; font:inherit; font-size:13px; color:var(--soft);
  background:var(--paper); border:1px dashed var(--line); border-radius:4px; cursor:pointer;
}
.strip .more-frames:hover{color:var(--ink); border-color:var(--soft)}