.eq-page { padding: 40px 0 64px; }
.eq-hero { text-align: center; margin-bottom: 32px; }
.eq-kicker { color: var(--color-accent, #4f6ef7); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.eq-hero h1 { font-size: 2rem; margin: 8px 0 12px; }
.eq-hero > p:last-child { max-width: 760px; margin: auto; color: var(--color-text-secondary, #666); line-height: 1.7; }
.eq-workbench { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.eq-panel { min-width: 0; padding: 18px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; background: var(--color-card-bg, #fff); display: flex; flex-direction: column; gap: 14px; }
.eq-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eq-panel h2 { font-size: 1rem; margin: 0; }
.eq-badge { font-family: Consolas, monospace; font-size: .78rem; border-radius: 20px; background: #f1f3f7; color: #586579; padding: 4px 10px; }
.eq-code { position: relative; margin: 0; padding: 14px 8px; max-height: 460px; overflow: auto; background: #101418; color: #d7dee8; border-radius: 10px; font: .8rem/1.85 Consolas, monospace; }
.eq-code-line { display: flex; gap: 12px; border-left: 3px solid transparent; padding: 0 8px; white-space: pre; }
.eq-code-line.active { background: #4f6ef738; border-left-color: #7b96ff; }
.eq-ln { min-width: 2ch; text-align: right; color: #718197; user-select: none; }
.eq-src { color: #b9ceff; }
.eq-controls, .eq-options, .eq-stats, .eq-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.eq-controls .btn, .eq-solution-controls .btn { padding: 8px 12px; font-size: .8rem; }
.eq-options { font-size: .8rem; color: var(--color-text-secondary, #666); }
.eq-options label { display: flex; align-items: center; gap: 8px; }
.eq-options input { accent-color: #4f6ef7; }
.eq-options input[type=range] { width: 120px; }
.eq-message { margin: 0; min-height: 62px; padding: 12px; background: #f1f5ff; border-radius: 8px; color: #334778; font-size: .84rem; line-height: 1.7; }
.eq-output { margin: 0; padding: 12px; min-height: 60px; max-height: 140px; overflow: auto; background: #0c1210; color: #9fe6a8; border-radius: 10px; font: .8rem/1.7 Consolas, monospace; white-space: pre-wrap; }
.eq-board-wrap { width: 100%; max-width: 460px; margin: 0 auto; padding-left: 22px; }
.eq-columns { display: grid; grid-template-columns: repeat(8, 1fr); text-align: center; font: .78rem/2 Consolas, monospace; color: #78849a; }
.eq-board { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border: 3px solid #25334c; border-radius: 6px; }
.eq-cell { position: relative; display: flex; align-items: center; justify-content: center; background: #eef1f6; color: #394866; font-size: clamp(22px, 3.8vw, 42px); line-height: 1; transition: background .12s ease; }
.eq-cell.dark { background: #9baac1; }
.eq-cell.placed { background: #c4e8d3; color: #237a43; }
.eq-cell.candidate { background: #ffda89; color: #946300; }
.eq-cell.conflict { background: #ffb7c4; color: #a52c49; }
.eq-cell.removed { background: #d6c4f5; color: #7148a5; }
.eq-cell.solution { background: #b8e5c6; color: #19673a; }
.eq-row-label { position: absolute; left: -22px; width: 16px; font: .78rem Consolas, monospace; color: #78849a; text-align: center; }
.eq-stats { font-size: .8rem; color: var(--color-text-secondary, #666); }
.eq-stats strong { font-family: Consolas, monospace; color: var(--color-text, #222); }
.eq-legend { font-size: .78rem; color: #627089; }
.eq-legend span { display: inline-flex; align-items: center; gap: 6px; }
.eq-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.eq-dot.placed { background: #76ba8c; }
.eq-dot.candidate { background: #ffca62; }
.eq-dot.conflict { background: #ed7893; }
.eq-dot.removed { background: #ad8add; }
.eq-solution-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .78rem; }
.eq-page button:disabled { opacity: .45; cursor: not-allowed; }
.eq-page button:focus-visible { outline: 3px solid #7b96ff; outline-offset: 3px; }
.eq-explain { border-top: 1px dashed #dce1e9; padding-top: 12px; font-size: .84rem; color: var(--color-text-secondary, #555); line-height: 1.75; }
.eq-explain h3 { margin: 0 0 8px; font-size: .9rem; }
.eq-explain p { margin: 0 0 8px; }
.eq-explain code { background: #f0f1f4; padding: 1px 5px; border-radius: 3px; }
@media (max-width: 960px) { .eq-workbench { grid-template-columns: 1fr; } .eq-cell { font-size: clamp(22px, 7vw, 42px); } }
@media (max-width: 480px) { .eq-panel { padding: 12px; } .eq-hero h1 { font-size: 1.5rem; } .eq-solution-controls { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .eq-cell { transition: none; } }