: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}
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; justify-content:space-between; align-items:center;
  padding:18px 24px; border-bottom:1px solid var(--line);
}
.mark{font-weight:650; letter-spacing:-.02em; font-size:19px}
.lang button{
  border:1px solid var(--line); background:transparent; color:var(--soft);
  font:inherit; font-size:13px; padding:4px 10px; 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}


.bar{gap:20px}
.tools{display:flex; gap:2px; margin-right:auto}
.tools button{
  font:inherit; font-size:14px; font-weight:520; padding:6px 12px;
  background:none; border:1px solid transparent; border-radius:5px;
  color:var(--soft); cursor:pointer;
}
.tools button:hover{color:var(--ink); background:var(--card)}
.tools button.on{color:var(--paper); background:var(--pine); border-color:var(--pine)}

.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:12px 14px}
  .mark{font-size:17px}
  .tools button{padding:6px 9px; font-size:13px; white-space:nowrap}
  .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;
}