/* ====== база: токены, типографика, контролы (светлая синяя тема) ====== */
:root{
  --bg:#f4f6fb;
  --fg:#182237;
  --muted:#66708c;
  --card:#ffffff;
  --border:#e2e7f1;
  --primary:#1a6ee8;
  --primary-soft:#e7f0ff;
  --primary-fg:#ffffff;
  --accent:#0ca678;
  --accent-soft:#dff6ec;
  --warn:#e8930c;
  --warn-soft:#fff3d6;
  --bad:#e5484d;
  --bad-soft:#fee9e9;
  --grad:linear-gradient(90deg,#1a6ee8,#0a9ce8);
  --shadow:0 8px 28px rgba(24,33,58,.07);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .35em}
p{margin:.4em 0}
code{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:.93em;
  background:#eef1f9;border-radius:6px;padding:1px 6px}
pre{background:#1b2540;color:#e9ecff;border-radius:12px;padding:14px;overflow:auto;font-size:13px}
pre code{background:transparent;color:inherit;padding:0}
button{font:inherit}
a{color:var(--primary)}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---- анимации ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes floatBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.08)}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.anim-up{animation:fadeUp .45s cubic-bezier(.2,.7,.3,1) both}
.anim-pop{animation:popIn .4s cubic-bezier(.2,.7,.3,1.2) both}
.anim-slide{animation:slideIn .3s ease both}
.shake{animation:shake .35s ease}
.view-enter{animation:fadeUp .3s ease both}

/* ---- контролы ---- */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  border:1px solid var(--border);background:var(--card);color:var(--fg);
  border-radius:11px;padding:8px 16px;cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{background:#f5f8ff;box-shadow:0 3px 10px rgba(24,33,58,.08)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.btn-primary{background:var(--grad);border-color:transparent;color:var(--primary-fg)}
.btn-primary:hover{background:linear-gradient(90deg,#155dc9,#0090d0)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:rgba(26,110,232,.08);box-shadow:none}
.btn[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff}
.input,.select{
  border:1px solid var(--border);border-radius:11px;padding:9px 12px;
  font:inherit;background:#fff;color:var(--fg);outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,110,232,.14)}
.badge{display:inline-flex;align-items:center;gap:5px;background:var(--primary-soft);color:var(--primary);
  border-radius:999px;padding:2.5px 11px;font-size:12.5px;font-weight:600}
.badge.green{background:var(--accent-soft);color:#06865f}
.badge.gray{background:#eef0f6;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1}
.progress{height:9px;background:#e8ecf6;border-radius:99px;overflow:hidden}
.progress>div{height:100%;width:0;border-radius:99px;
  background:var(--grad);
  transition:width .6s cubic-bezier(.2,.7,.3,1)}
hr{border:none;border-top:1px solid var(--border);margin:16px 0}
table.tbl{border-collapse:collapse;width:100%;background:#fff}
table.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--border);background:#fafbfe;font-weight:600}
table.tbl td{padding:9px 12px;border-bottom:1px solid #eef0f7}
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px}
.tbl-sm td,.tbl-sm th{padding:4px 9px;font-size:13px}
tr.hitrow td{background:var(--warn-soft)}
.ok{color:#06865f;font-weight:600}
.fail{color:var(--bad);font-weight:600}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.sim-box{padding:18px 20px}
.hintline{font-size:12.5px;color:var(--muted)}
.tile-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.cipher{letter-spacing:2px}
.mark-hl{background:#ffe58f;border-radius:4px;padding:0 2px}
.pos-panel{position:relative}