:root{
  --bg:#0d0f14; --panel:#11131a; --muted:#9aa3b2; --text:#e6ebff; --accent:#4aa0ff;
  --cell:#9ee; --canvas:#000; --border:rgba(255,255,255,.06);
  --diff:#ff6b6b; --context:#5a6272;
}
body.light{
  --bg:#ffffff; --panel:#f4f6f8; --muted:#444; --text:#111; --accent:#0b63e6;
  --cell:#111; --canvas:#ffffff; --border:rgba(0,0,0,.08);
  --diff:#b71c1c; --context:#b8c0cc;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
header,footer{background:var(--panel);padding:12px 16px;border-bottom:1px solid var(--border)}
footer{border-top:1px solid var(--border);border-bottom:none;text-align:center;font-size:13px;color:var(--muted)}
.container{display:grid;grid-template-columns:1fr 380px;gap:12px;padding:12px;height:calc(100vh - 120px)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto}
.canvas-wrap{display:flex;flex-direction:column;gap:8px;height:100%}
canvas{background:var(--canvas);border-radius:10px;display:block;width:100%;height:auto;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
button{background:#1a2030;color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:8px;cursor:pointer}
button.primary{background:var(--accent);color:#fff;border-color:transparent}
body.light button{background:#e9eef5;color:#111;border:1px solid var(--border)}
button:disabled{opacity:.55;cursor:not-allowed}
.row{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
label{color:var(--muted);font-size:14px}
input[type=range]{width:160px}
.output{min-width:36px;text-align:right;color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.info-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.info-item{background:rgba(255,255,255,.04);border:1px solid var(--border);padding:6px 8px;border-radius:6px;font-size:13px;color:var(--muted)}
.legend{display:flex;gap:10px;align-items:center}
.legend .box{width:14px;height:14px;border-radius:3px;border:1px solid var(--border)}
.toast{position:fixed;left:50%;top:12px;transform:translateX(-50%);background:#1f2937;color:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.35);z-index:99;opacity:0;transition:opacity .2s ease, transform .2s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:#166534}
.toast.warn{background:#7c2d12}
@media (max-width: 980px){.container{grid-template-columns:1fr;height:auto}}

/* Базовые цвета кнопок зависят от темы */
.btn{
  background:var(--btn-bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  text-decoration:none;
  cursor:pointer;
  transition:background .3s, transform .1s;
}
.btn:hover{ background:var(--btn-hover); transform:translateY(-2px); }


/* Кнопки тема фиксы */
:root {
  --btn-bg-dark: #1f1f2b;
  --btn-hover-dark: #2b2b39;
  --btn-text-dark: #e8e8f0;
  --btn-bg-light: #e0e0e0;
  --btn-hover-light: #d0d0d0;
  --btn-text-light: #111111;
}

/* Общий стиль кнопок */
.btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s, transform .1s, color .3s;
}

/* Тёмная тема */
body[data-theme="dark"] .btn {
  background: var(--btn-bg-dark);
  color: var(--btn-text-dark);
}
body[data-theme="dark"] .btn:hover {
  background: var(--btn-hover-dark);
}

/* Светлая тема */
body[data-theme="light"] .btn {
  background: var(--btn-bg-light);
  color: var(--btn-text-light);
}
body[data-theme="light"] .btn:hover {
  background: var(--btn-hover-light);
}


/* Унификация кнопок для симулятора */
body[data-theme="dark"] button,
body[data-theme="dark"] input[type=button],
body[data-theme="dark"] .ui-button {
  background-color: var(--btn-bg-dark);
  color: var(--btn-text-dark);
  border: 1px solid var(--border);
}

body[data-theme="light"] button,
body[data-theme="light"] input[type=button],
body[data-theme="light"] .ui-button {
  background-color: var(--btn-bg-light);
  color: var(--btn-text-light);
  border: 1px solid var(--border);
}

body[data-theme="dark"] button:hover,
body[data-theme="dark"] input[type=button]:hover,
body[data-theme="dark"] .ui-button:hover {
  background-color: var(--btn-hover-dark);
}

body[data-theme="light"] button:hover,
body[data-theme="light"] input[type=button]:hover,
body[data-theme="light"] .ui-button:hover {
  background-color: var(--btn-hover-light);
}