:root{
  --bg:#0d0e11; --panel:#16181d; --line:#272a32; --fg:#e8eaef; --dim:#9096a4;
  --acc:#5b8cff; --warn:#ffb020; --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.muted{color:var(--dim)} .small{font-size:13px}
kbd{
  font:600 11px/1 ui-monospace,Menlo,monospace; color:var(--dim);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:3px 5px; background:#1c1f26;
}

/* ---------- экраны ---------- */
.screen{position:fixed; inset:0; display:flex; flex-direction:column}
.screen[hidden],[hidden]{display:none !important}
#intro,#warn,#done{align-items:center; justify-content:center; padding:24px; overflow:auto}
.card{
  width:min(560px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 30px;
}
h1{font-size:22px; margin:0 0 14px} h2{font-size:18px; margin:0 0 10px}
.card p{margin:0 0 14px} .card ul{margin:0 0 18px; padding-left:20px; color:var(--dim)}
.card li{margin:5px 0}
.keys{display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:20px; font-size:12px; color:var(--dim)}
.keys > span{display:inline-flex; align-items:center; gap:5px}
i.h,i.v{font-style:normal}
i.v{display:none}

button{font:inherit; cursor:pointer; border-radius:9px; border:1px solid transparent}
button:disabled{opacity:.45; cursor:default}
.primary{background:var(--acc); color:#fff; border:0; padding:11px 22px; font-weight:600; width:100%}
.primary:not(:disabled):hover{filter:brightness(1.1)}
.ghost{background:transparent; color:var(--dim); border:1px solid var(--line); padding:6px 12px; font-size:13px}
.ghost:hover{color:var(--fg); border-color:#3a3f4c}
.danger{margin-top:12px; width:100%}

/* ---------- предупреждение ---------- */
.warncard{border-color:#4a3a12; background:#1b1710}
.warnicon{
  width:34px;height:34px;border-radius:50%;background:var(--warn);color:#1b1710;
  font:800 20px/34px ui-monospace,monospace;text-align:center;margin-bottom:14px;
}
#warnText{font-size:16px; line-height:1.6; white-space:pre-wrap}

/* ---------- верхняя панель ---------- */
.bar{
  display:flex; align-items:center; gap:12px; padding:8px 14px; flex-wrap:nowrap;
  border-bottom:1px solid var(--line); background:var(--panel); flex:0 0 auto; white-space:nowrap;
}
.bar button, #progText, #zoomText{white-space:nowrap; flex:0 0 auto}
@media (max-width:820px){
  .bar{gap:8px; padding:8px 10px}
  .progress{display:none}
}
@media (max-width:560px){
  .tag{display:none}
  .bar button{padding:6px 8px; font-size:12px}
}
.spacer{flex:1}
.progress{width:110px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.nav{padding:4px 10px; font-size:15px; line-height:1; min-width:34px}
.tag{
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--warn);
  border:1px solid #4a3a12; background:#1b1710; border-radius:5px; padding:2px 7px;
}
#reviewBtn{margin-top:10px; width:100%}
#progFill{height:100%;background:var(--acc);width:0;transition:width .25s}

/* ---------- сцена ---------- */
#stage{flex:1; display:flex; gap:2px; position:relative; background:#000; min-height:0}
.pane{
  flex:1 1 0; position:relative; overflow:hidden; background:#000;
  touch-action:none; cursor:grab; contain:paint;
}
.pane.drag{cursor:grabbing}
.pane img{
  position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform;
  image-rendering:high-quality; user-select:none; -webkit-user-drag:none; max-width:none;
}
body.sdr .pane img{dynamic-range-limit:standard}
.paneTag{
  position:absolute; top:10px; left:10px; padding:3px 9px; border-radius:6px;
  background:#000a; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); pointer-events:none; backdrop-filter:blur(4px);
}
#stage::after{ /* разделитель */
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  margin-left:-1px; background:var(--line); pointer-events:none;
}

#loader{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; background:#000d; color:var(--dim); font-size:13px;
}
.spin{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--acc); animation:sp .8s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- выбор ---------- */
.choices{display:flex; gap:2px; flex:0 0 auto; background:var(--line)}
.choice{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:14px 8px; background:var(--panel); color:var(--fg); border:0; border-radius:0;
}
.choice b{font-weight:600; font-size:15px}
.choice:hover{background:#1e2128}
.choice:active{background:var(--acc); color:#fff}
.choice.tie b{color:var(--dim); font-weight:500}
.choice.sel{background:#1b2438; box-shadow:inset 0 -3px 0 var(--acc)}
.choice.sel b{color:var(--acc)}
.choice.tie.sel b{color:var(--acc)}

@media (max-width:780px){
  i.h{display:none}
  i.v{display:inline}
  #stage{flex-direction:column}
  #stage::after{left:0; right:0; top:50%; bottom:auto; width:auto; height:2px; margin:-1px 0 0}
  .card{padding:22px}
}