/* ============================================================
   БАЗА
   ============================================================ */
* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    background: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    overflow-x: auto;
}

button,
select {
    font: inherit;
}

/* ============================================================
   ТРЁХКОЛОНОЧНЫЙ МАКЕТ
   ============================================================ */
.layout {
    width: 100%;
    min-width: 1200px;
    min-height: 100vh;
    padding: 12px;
}

.left-panel,
.right-panel {
    position: fixed;
    top: 12px;
    width: 220px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 14px;
    background: #2f3b46;
    border: 2px solid #1f2a33;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,.4);
    z-index: 100;
}

.left-panel {
    left: 12px;
}

.right-panel {
    right: 12px;
}

.center-panel {
    margin-left: 250px;
    margin-right: 250px;
    min-height: calc(100vh - 24px);
    padding: 18px;

    background: #111;
    border: 2px solid #333;
    border-radius: 16px;
}

/* ============================================================
   КНОПКИ / ПАНЕЛИ
   ============================================================ */
.pretty-btn,
.back-btn,
.timer-buttons button {
    width: 100%;
    min-height: 42px;
    padding: 10px 11px;

    border: 2px solid #1f2f3a;
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #5f7fa0 0%,
            #4a6a82 100%
        );

    color: #e9f3ff;
    font-weight: 700;
    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(0,0,0,.4),
        inset 0 1px 3px rgba(255,255,255,.3);

    transition:
        transform .2s ease,
        background .2s ease;
}

.pretty-btn:hover,
.back-btn:hover,
.timer-buttons button:hover {
    background:
        linear-gradient(
            180deg,
            #6f8fb3 0%,
            #557a94 100%
        );
    transform: translateY(-2px);
}

.back-btn {
    background: #064523;
    color: #0f0;
    border-color: #0f0;
    box-shadow: 0 0 8px #0f0;
}

.back-btn:hover {
    background: #0a6a36;
    box-shadow: 0 0 12px #0f0;
}

.reset-btn {
    background:
        linear-gradient(
            180deg,
            #8a4c4c,
            #693737
        );
}

.panel-separator {
    width: 100%;
    height: 2px;
    background: #738291;
    margin: 5px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.panel-caption,
.field-label {
    color: #c7d6e5;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.contest-note {
    padding: 8px 10px;
    border: 1px solid #52697d;
    border-radius: 10px;
    background: #202a33;
    color: #b8c7d6;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.level-select {
    width: 100%;
    min-height: 42px;
    padding: 8px 9px;
    border: 2px solid #1f2f3a;
    border-radius: 10px;
    background: #1c242d;
    color: #fff;
}

/* ============================================================
   ТАЙМЕР
   ============================================================ */
#timerDisplay {
    width: 100%;
    padding: 10px 6px;

    background: #1c242d;
    border: 2px solid #0a0f14;
    border-radius: 10px;

    color: #c9f508;
    font-family: Consolas, monospace;
    font-size: 28px;
    font-weight: 700;
    text-align: center;

    text-shadow: 0 0 10px rgba(80,120,160,.7);
    box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}

.timer-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.timer-buttons button {
    min-width: 0;
    padding: 8px 5px;
}

/* ============================================================
   ШАПКА ЦЕНТРА
   ============================================================ */
.trainer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
    padding: 18px 20px;

    background: #202a33;
    border: 1px solid #3c4d5c;
    border-radius: 14px;
}

.eyebrow {
    margin-bottom: 5px;
    color: #ffaa44;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trainer-head h1 {
    margin: 0 0 8px;
    color: #f4f8fb;
    font-size: 26px;
    line-height: 1.15;
}

.trainer-head p {
    max-width: 700px;
    margin: 0;
    color: #bdcbd8;
    font-size: 14px;
    line-height: 1.5;
}

.score-board {
    min-width: 290px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.score-item {
    padding: 10px 8px;
    background: #111820;
    border: 1px solid #34495a;
    border-radius: 10px;
    text-align: center;
}

.score-label {
    display: block;
    margin-bottom: 3px;
    color: #8fa7bb;
    font-size: 10px;
    text-transform: uppercase;
}

.score-item strong {
    color: #c9f508;
    font-size: 22px;
}

/* ============================================================
   КАРТОЧКИ ЗАДАНИЙ
   ============================================================ */
.task-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.logic-task {
    min-width: 0;
    padding: 14px;

    background:
        linear-gradient(
            145deg,
            #2f3b46,
            #222c35
        );

    border: 2px solid #3f5365;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);

    transition:
        border-color .2s ease,
        transform .2s ease;
}

.logic-task:hover {
    transform: translateY(-2px);
}

.logic-task.is-correct {
    border-color: #2ecc71;
    box-shadow: 0 0 15px rgba(46,204,113,.25);
}

.logic-task.is-wrong {
    border-color: #e74c3c;
    box-shadow: 0 0 15px rgba(231,76,60,.28);
}

.task-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.task-number {
    color: #fff;
    font-weight: 800;
}

.task-type {
    padding: 4px 7px;
    border-radius: 999px;
    background: #17212a;
    color: #9fc6e8;
    font-size: 10px;
    font-weight: 800;
}

.logic-diagram {
    min-height: 126px;
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #0e1419;
    border: 2px solid #17222b;
    border-radius: 12px;
}

.logic-diagram svg {
    display: block;
    width: 100%;
    max-height: 115px;
}

.logic-formula {
    min-height: 48px;
    margin-top: 9px;
    padding: 8px 9px;

    background: #17212a;
    border-radius: 8px;

    color: #f3d675;
    font-family: Consolas, monospace;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.inputs-line {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 9px 0;
}

.input-chip {
    min-width: 54px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #111820;
    color: #d6e1eb;
    font-family: Consolas, monospace;
    font-weight: 800;
    text-align: center;
}

.answer-title {
    margin-bottom: 6px;
    color: #aebfcd;
    font-size: 12px;
    text-align: center;
}

.answer-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.answer-btn {
    min-height: 43px;
    border: 2px solid #41586b;
    border-radius: 10px;
    background: #253541;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
}

.answer-btn:hover {
    background: #345064;
}

.answer-btn.selected {
    border-color: #ffaa44;
    background: #6b542f;
    box-shadow: 0 0 10px rgba(255,170,68,.28);
}

.answer-btn:disabled {
    opacity: .72;
    cursor: default;
}

.task-result {
    min-height: 30px;
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #171f26;
    color: #98aebf;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.task-result.correct {
    color: #54e690;
}

.task-result.wrong {
    color: #ff7a70;
}

.check-btn {
    width: 100%;
    min-height: 38px;
    margin-top: 8px;
    border: 0;
    border-radius: 9px;
    background: #4d6e88;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.check-btn:hover {
    background: #6288a5;
}

.check-btn:disabled {
    background: #34434e;
    color: #8295a3;
    cursor: default;
}

/* ============================================================
   ЛЕГЕНДА
   ============================================================ */
.logic-legend {
    display: grid;
    gap: 7px;
    padding: 9px;
    background: #202a33;
    border-radius: 10px;
    color: #c5d2de;
    font-size: 12px;
}

.bit {
    display: inline-flex;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 900;
}

.bit-zero {
    background: #334155;
    color: #fff;
}

.bit-one {
    background: #0c7a3e;
    color: #9dffb9;
}

/* ============================================================
   МОДАЛЬНОЕ ОКНО
   ============================================================ */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;

    align-items: center;
    justify-content: center;

    padding: 18px;
    background: rgba(0,0,0,.76);
}

.modal.show {
    display: flex;
}

.modal-content {
    position: relative;
    width: min(820px, 96vw);
    max-height: 88vh;
    overflow-y: auto;

    padding: 25px 28px;

    background: #141c23;
    border: 2px solid #0f0;
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(0,255,0,.42);
}

.modal-content h2 {
    margin: 0 38px 18px 0;
    color: #c9f508;
}

.modal-content h3 {
    color: #ffaa44;
}

.modal-content p,
.modal-content li {
    color: #d5e0e9;
    line-height: 1.55;
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 10px;

    border: 0;
    background: transparent;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
}

.truth-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    background: #0d141a;
    font-family: Consolas, monospace;
}

.truth-table th,
.truth-table td {
    padding: 7px 8px;
    border: 1px solid #3c4d5c;
    text-align: center;
}

.truth-table th {
    background: #263746;
    color: #ffaa44;
}

.logic-ref-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.logic-ref {
    padding: 11px;
    border: 1px solid #34495a;
    border-radius: 10px;
    background: #0f171d;
}

.logic-ref strong {
    color: #c9f508;
}

.code-formula {
    padding: 9px 11px;
    border-left: 3px solid #00eaff;
    background: #0a0f13;
    color: #00eaff;
    font-family: Consolas, monospace;
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 1500px) {
    .task-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .layout {
        min-width: 0;
        padding: 8px;
    }

    .left-panel,
    .right-panel {
        position: static;
        width: auto;
        max-height: none;
        margin-bottom: 8px;
    }

    .center-panel {
        margin: 0 0 8px;
    }

    .trainer-head {
        flex-direction: column;
    }

    .score-board {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .task-grid {
        grid-template-columns: 1fr;
    }

    .score-board {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .trainer-head h1 {
        font-size: 21px;
    }

    .logic-ref-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   V3 — KIPIA LOGIC LAB / SVG.JS
   Современная тема, крупная схема и локальная таблица истинности
   ============================================================ */
:root {
    --kipia-bg: #08111f;
    --kipia-panel: #0b1626;
    --kipia-panel-2: #101e30;
    --kipia-border: #26364d;
    --kipia-muted: #8494a8;
    --kipia-text: #edf2f8;
    --kipia-green: #38e29a;
    --kipia-green-soft: rgba(56, 226, 154, .18);
    --kipia-zero: #53677f;
}

body {
    background:
        radial-gradient(circle at 52% -12%, #162c45 0, transparent 42%),
        var(--kipia-bg);
    color: var(--kipia-text);
    font-family: Inter, Arial, sans-serif;
}

.layout {
    padding: 16px;
}

.left-panel,
.right-panel {
    top: 16px;
    width: 228px;
    max-height: calc(100vh - 32px);
    gap: 11px;
    padding: 18px;
    background: rgba(11, 22, 38, .96);
    border: 1px solid var(--kipia-border);
    border-radius: 14px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .26);
    backdrop-filter: blur(14px);
}

.left-panel { left: 16px; }
.right-panel { right: 16px; }

.center-panel {
    margin-left: 252px;
    margin-right: 252px;
    padding: 22px;
    background: rgba(8, 17, 31, .72);
    border: 1px solid rgba(60, 80, 106, .55);
    border-radius: 14px;
}

.pretty-btn,
.back-btn,
.timer-buttons button,
.check-btn,
.solution-btn,
.manual-actions button {
    min-height: 40px;
    border: 1px solid #304259;
    border-radius: 8px;
    background: #111f31;
    color: #dce5ef;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.pretty-btn:hover,
.back-btn:hover,
.timer-buttons button:hover,
.check-btn:hover:not(:disabled),
.solution-btn:hover:not(:disabled),
.manual-actions button:hover {
    border-color: #4f6c8b;
    background: #172a41;
    transform: translateY(-1px);
    box-shadow: none;
}

.back-btn {
    background: #102d28;
    border-color: #2b725b;
    color: #67ebb2;
}

.reset-btn {
    background: #291d27;
    border-color: #65404b;
    color: #eab4bd;
}

.panel-separator {
    height: 1px;
    margin: 7px 0;
    background: #25364c;
    box-shadow: none;
}

.contest-note,
.learning-mode-hint,
.logic-legend {
    background: #0f1c2d;
    border: 1px solid #263950;
    color: #8fa0b4;
}

.panel-caption,
.field-label {
    color: #8293a8;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: 10px;
}

.level-select,
.learning-mode-select {
    min-height: 42px;
    border: 1px solid #31445c;
    border-radius: 8px;
    background: #101e30;
    color: #e2e9f1;
}

#timerDisplay {
    padding: 12px 6px;
    background: #091524;
    border: 1px solid #2a3c53;
    border-radius: 8px;
    color: var(--kipia-green);
    font-size: 25px;
    text-shadow: 0 0 12px rgba(56, 226, 154, .32);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .22);
}

.trainer-head {
    margin-bottom: 20px;
    padding: 24px 26px;
    background: linear-gradient(135deg, #0d1c2e, #0a1626);
    border: 1px solid var(--kipia-border);
    border-radius: 12px;
}

.eyebrow {
    margin-bottom: 9px;
    color: var(--kipia-green);
    font-size: 10px;
    letter-spacing: 2.2px;
}

.trainer-head h1 {
    color: #f3f6fa;
    font-size: clamp(23px, 2.1vw, 34px);
    letter-spacing: -1px;
}

.trainer-head p {
    color: #95a5b8;
    line-height: 1.65;
}

.score-board {
    min-width: 310px;
}

.score-item {
    background: #0a1626;
    border: 1px solid #283a51;
    border-radius: 8px;
}

.score-label { color: #718299; }
.score-item strong { color: var(--kipia-green); }

.task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.logic-task {
    padding: 18px;
    background: linear-gradient(145deg, #0e1b2c, #0a1524);
    border: 1px solid var(--kipia-border);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.logic-task:hover {
    border-color: #3a4e68;
    transform: translateY(-2px);
}

.logic-task.is-correct {
    border-color: #328f6c;
    box-shadow: 0 0 28px rgba(56, 226, 154, .09);
}

.task-number {
    font-size: 14px;
    letter-spacing: -.2px;
}

.task-type {
    padding: 5px 9px;
    background: #11243a;
    border: 1px solid #29445b;
    color: #84a8c9;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.logic-diagram {
    min-height: 250px;
    height: 250px;
    padding: 0;
    overflow: hidden;
    background: #0a1525;
    border: 1px solid #25364d;
    border-radius: 9px;
}

.svg-canvas {
    width: 100%;
    height: 100%;
}

.logic-diagram svg,
.logic-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none !important;
    overflow: hidden;
}

.svg-load-error {
    height: 100%;
    display: grid;
    place-items: center;
    color: #ff8990;
    font-size: 12px;
}

.logic-wire,
.gate-pin {
    fill: none;
    stroke: var(--kipia-zero);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke .18s ease, filter .18s ease, opacity .18s ease;
}

.logic-wire.signal-neutral,
.gate-pin.signal-neutral { stroke: #65778e; }
.logic-wire.signal-zero,
.gate-pin.signal-zero { stroke: var(--kipia-zero); }
.logic-wire.signal-one,
.gate-pin.signal-one {
    stroke: var(--kipia-green);
    filter: drop-shadow(0 0 4px rgba(56, 226, 154, .72));
    animation: kipia-signal-pulse 1.25s ease-in-out infinite alternate;
}

@keyframes kipia-signal-pulse {
    from { opacity: .76; }
    to { opacity: 1; }
}

.connection-dot {
    fill: var(--kipia-zero);
    stroke: #081321;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.connection-dot.signal-neutral { fill: #65778e; }
.connection-dot.signal-zero { fill: var(--kipia-zero); }
.connection-dot.signal-one {
    fill: var(--kipia-green);
    filter: drop-shadow(0 0 4px rgba(56, 226, 154, .72));
}

.gate-body {
    fill: #111f31;
    stroke: #8799ae;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .28));
    transition: stroke .18s ease, filter .18s ease;
}
.gate-body.signal-one {
    stroke: var(--kipia-green);
    filter: drop-shadow(0 0 6px rgba(56, 226, 154, .46));
}
.gate-body.signal-zero { stroke: #8294a9; }
.gate-body.signal-neutral { stroke: #718299; }

.gate-extra-line {
    stroke: #8799ae;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.gate-bubble {
    fill: #081321;
    stroke: #8799ae;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}
.gate-bubble.signal-one { stroke: var(--kipia-green); }
.gate-label,
.gate-type-label { pointer-events: none; }

.gate-signal-badge circle {
    fill: #132236;
    stroke: #64788f;
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}
.gate-signal-badge.signal-one circle {
    fill: #123b30;
    stroke: var(--kipia-green);
}
.gate-signal-badge text { fill: #f4f7fb; }

.svg-input { outline: none; }
.svg-input.is-interactive { cursor: pointer; }
.svg-input-circle {
    fill: #121f31;
    stroke: #71849a;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    transition: fill .18s ease, stroke .18s ease, filter .18s ease;
}
.svg-input-circle.signal-one {
    fill: #143b30;
    stroke: var(--kipia-green);
    filter: drop-shadow(0 0 6px rgba(56, 226, 154, .45));
}
.svg-input.is-interactive:hover .svg-input-circle,
.svg-input.is-interactive:focus-visible .svg-input-circle {
    stroke: #78b99e;
    filter: drop-shadow(0 0 7px rgba(56, 226, 154, .4));
}
.svg-input-name { fill: #edf2f8; pointer-events: none; }
.svg-bit-value { fill: #74869b; pointer-events: none; }
.svg-bit-value.signal-one { fill: var(--kipia-green); }

.output-node circle {
    fill: #121f31;
    stroke: #71849a;
    stroke-width: 2.6;
    vector-effect: non-scaling-stroke;
}
.output-node.signal-one circle {
    fill: #143b30;
    stroke: var(--kipia-green);
    filter: drop-shadow(0 0 8px rgba(56, 226, 154, .55));
}
.output-name,
.output-value { fill: #edf2f8; pointer-events: none; }
.output-node.signal-one .output-value { fill: var(--kipia-green); }

.logic-formula {
    min-height: 42px;
    margin-top: 11px;
    padding: 11px 12px;
    background: #101e30;
    border: 1px solid #293b52;
    border-radius: 8px;
    color: #b9c7d8;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.manual-caption {
    margin: 14px 0 9px;
    color: #73859b;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 9px;
    font-weight: 700;
}

.manual-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.logic-switch {
    flex: 1 1 112px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #304259;
    border-radius: 8px;
    background: #101e30;
}
.logic-switch:hover,
.logic-switch:focus-visible {
    border-color: #55718e;
    transform: translateY(-1px);
}
.logic-switch.is-zero { background: #101e30; border-color: #304259; }
.logic-switch.is-one {
    background: #102c27;
    border-color: #2f735e;
    box-shadow: 0 0 18px rgba(56, 226, 154, .07);
}
.switch-name { font-family: Consolas, monospace; }
.switch-track {
    width: 34px;
    height: 18px;
    padding: 2px;
    background: #293b52;
    border-radius: 999px;
}
.switch-track i {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #9ba9b9;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.logic-switch.is-one .switch-track { background: #197351; }
.logic-switch.is-one .switch-track i {
    transform: translateX(16px);
    background: #70efb7;
    box-shadow: 0 0 7px var(--kipia-green);
}
.switch-value {
    min-width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .18);
    color: #8fa0b4;
}
.logic-switch.is-one .switch-value { color: var(--kipia-green); }

.manual-output {
    min-height: 106px;
    margin-top: 12px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    background: radial-gradient(circle at 50% 50%, rgba(83, 103, 127, .08), #0d1929 72%);
    border: 1px solid #33455c;
    border-radius: 9px;
}
.manual-output-name {
    align-self: start;
    color: #7d8da2;
    font: 800 11px Consolas, monospace;
}
.manual-output strong {
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end;
    color: #7b8da1;
    font: 800 48px Consolas, monospace;
}
.manual-output small {
    color: #7d8da2;
    font-size: 10px;
}
.manual-output.is-one {
    background: radial-gradient(circle at 70% 50%, rgba(56, 226, 154, .16), #0e211f 72%);
    border-color: #30916c;
}
.manual-output.is-one strong,
.manual-output.is-one small { color: var(--kipia-green); }
.manual-output.is-one strong { text-shadow: 0 0 16px rgba(56, 226, 154, .45); }

.manual-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 9px;
}
.manual-actions button {
    min-height: 34px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 10px;
}

.truth-preview {
    margin-top: 16px;
}
.truth-preview-title {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 10px;
}
.truth-preview-title strong {
    color: #dbe3ec;
    font-size: 12px;
}
.truth-preview-title span {
    color: #5f7188;
    font-size: 9px;
}
.truth-preview-grid {
    overflow: hidden;
    border: 1px solid #273950;
    border-radius: 8px;
}
.truth-preview-row {
    min-height: 30px;
    display: grid;
    grid-template-columns: repeat(var(--truth-columns), 1fr);
    align-items: center;
    border-bottom: 1px solid #1e2d41;
    color: #8798ad;
    font: 700 10px Consolas, monospace;
    transition: background .18s ease, color .18s ease;
}
.truth-preview-row:last-child { border-bottom: 0; }
.truth-preview-row span,
.truth-preview-row strong { text-align: center; }
.truth-preview-head {
    background: #111f31;
    color: #c6d0dc;
}
.truth-preview-row.is-current {
    background: #173329;
    color: #f4f7fb;
    box-shadow: inset 3px 0 var(--kipia-green);
}
.truth-preview-row strong.is-one { color: var(--kipia-green); }
.truth-preview-row strong.is-zero { color: #8293a8; }

.solution-btn {
    border-color: #34516a;
    background: #11253a;
    color: #a9c5de;
}
.solution-panel {
    background: #0c1827;
    border-color: #2d435a;
}
.solution-title { color: var(--kipia-green); }
.solution-step-number { background: #173c33; color: #70efb7; }
.solution-final strong,
.solution-panel li b { color: var(--kipia-green); }

.modal-content {
    background: #0b1626;
    border: 1px solid #31475f;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.modal-content h2,
.modal-content h3 { color: var(--kipia-green); }
.truth-table { background: #091524; }
.truth-table th { background: #11243a; color: var(--kipia-green); }
.truth-table th,
.truth-table td { border-color: #293d54; }

.wire-zero { border-color: var(--kipia-zero); }
.wire-one { border-color: var(--kipia-green); }
.bit-one { background: #143b30; color: var(--kipia-green); }

@media (max-width: 1500px) {
    .logic-diagram { min-height: 230px; height: 230px; }
}

@media (max-width: 1180px) {
    .layout { min-width: 0; }
    .left-panel,
    .right-panel {
        position: static;
        width: auto;
        max-height: none;
        margin-bottom: 12px;
    }
    .center-panel { margin: 0 0 12px; }
}

@media (max-width: 820px) {
    .task-grid { grid-template-columns: 1fr; }
    .trainer-head { padding: 20px; }
    .score-board { min-width: 0; width: 100%; }
}

@media (max-width: 520px) {
    .layout { padding: 8px; }
    .center-panel { padding: 12px; }
    .logic-task { padding: 12px; }
    .logic-diagram { min-height: 190px; height: 190px; }
    .manual-inputs { display: grid; grid-template-columns: 1fr 1fr; }
    .truth-preview-title { align-items: start; flex-direction: column; }
}

@layer legacy {
/* ============================================================
   V2 — SVG-СХЕМЫ / РУЧНОЙ РЕЖИМ / ПОШАГОВЫЙ РАЗБОР
   Слой сохранён для совместимости; визуальные правила V3 имеют приоритет.
   ============================================================ */
.learning-mode-select {
    border-color: #3b82f6;
    background: #132638;
}

.learning-mode-hint {
    margin-top: -3px;
    padding: 8px 9px;
    border: 1px solid #3d5568;
    border-radius: 9px;
    background: #17232d;
    color: #b8cad8;
    font-size: 10px;
    line-height: 1.4;
}

.logic-diagram {
    min-height: 164px;
    padding: 6px;
    overflow: hidden;
    border-color: #233746;
    background:
        radial-gradient(circle at 50% 50%, rgba(30, 76, 105, .13), transparent 58%),
        #0b1116;
}

.logic-diagram svg,
.logic-svg {
    width: 100%;
    height: auto;
    max-height: 164px;
    overflow: visible;
}

/* ---------- Проводники ---------- */
.logic-wire,
.gate-pin {
    fill: none;
    stroke: #7895aa;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke .18s ease, filter .18s ease, opacity .18s ease;
}

.logic-wire.signal-neutral,
.gate-pin.signal-neutral {
    stroke: #7895aa;
}

.logic-wire.signal-zero,
.gate-pin.signal-zero {
    stroke: #4f7894;
}

.logic-wire.signal-one,
.gate-pin.signal-one {
    stroke: #35e27b;
    filter: drop-shadow(0 0 3px rgba(53, 226, 123, .55));
}

.wire-junction {
    stroke: #0b1116;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.wire-junction.signal-neutral { fill: #7895aa; }
.wire-junction.signal-zero { fill: #4f7894; }
.wire-junction.signal-one {
    fill: #35e27b;
    filter: drop-shadow(0 0 3px rgba(53, 226, 123, .65));
}

/* ---------- Входы SVG ---------- */
.svg-input {
    outline: none;
}

.svg-input.is-interactive {
    cursor: pointer;
}

.svg-input.is-interactive:hover .svg-input-circle,
.svg-input.is-interactive:focus .svg-input-circle {
    stroke: #fbbf24;
    stroke-width: 3;
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, .48));
}

.svg-input-circle {
    fill: #334155;
    stroke: #d9e7f2;
    stroke-width: 2.2;
    vector-effect: non-scaling-stroke;
    transition: fill .18s ease, stroke .18s ease, filter .18s ease;
}

.svg-input-circle.signal-one {
    fill: #0b7a3f;
    stroke: #7ef5aa;
}

.svg-input-circle.signal-zero {
    fill: #334155;
    stroke: #a9c3d5;
}

.svg-input-name,
.svg-bit-value {
    fill: #fff;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    pointer-events: none;
}

.svg-bit-box {
    fill: #263746;
    stroke: #7895aa;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.svg-bit-box.signal-one {
    fill: #075f32;
    stroke: #35e27b;
}

.svg-bit-box.signal-zero {
    fill: #263746;
    stroke: #66879f;
}

/* ---------- Логические элементы ---------- */
.gate-body {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .24));
}

.gate-label {
    fill: #ffffff;
    font-family: Arial, sans-serif;
    font-weight: 900;
    pointer-events: none;
}

.gate-signal-badge circle {
    fill: #334155;
    stroke: #9bb8cb;
    stroke-width: 1.7;
    vector-effect: non-scaling-stroke;
}

.gate-signal-badge.signal-one circle {
    fill: #075f32;
    stroke: #35e27b;
}

.gate-signal-badge.signal-zero circle {
    fill: #263746;
    stroke: #4f7894;
}

.gate-signal-badge text {
    fill: #fff;
    font-size: 11px;
    font-weight: 900;
}

/* ---------- Выход Y ---------- */
.output-node circle {
    fill: #4a3720;
    stroke: #f3b84b;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.output-node.signal-one circle {
    fill: #075f32;
    stroke: #35e27b;
    filter: drop-shadow(0 0 5px rgba(53, 226, 123, .5));
}

.output-node.signal-zero circle {
    fill: #263746;
    stroke: #5c8aa8;
}

.output-name {
    fill: #fff;
    font-size: 11px;
    font-weight: 800;
}

.output-value {
    fill: #fff;
    font-size: 14px;
    font-weight: 900;
}

/* ---------- Ручное управление ---------- */
.manual-caption {
    margin: 10px 0 7px;
    color: #b7c9d8;
    font-size: 11px;
    text-align: center;
}

.manual-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 8px 0;
}

.logic-switch {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 2px solid #48667b;
    border-radius: 10px;
    background: #1a2934;
    color: #fff;
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.logic-switch:hover,
.logic-switch:focus-visible {
    transform: translateY(-1px);
    border-color: #f3b84b;
    outline: none;
}

.logic-switch.is-one {
    border-color: #35e27b;
    background: #075f32;
    box-shadow: 0 0 12px rgba(53, 226, 123, .18);
}

.logic-switch.is-zero {
    border-color: #587c95;
    background: #263746;
}

.switch-name {
    font-size: 13px;
    font-weight: 800;
}

.switch-value {
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(0, 0, 0, .25);
    font-family: Consolas, monospace;
    font-size: 16px;
    font-weight: 900;
}

.manual-output {
    margin-top: 8px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 2px solid #48667b;
    border-radius: 10px;
    background: #14202a;
}

.manual-output span {
    color: #adbfcc;
    font-size: 11px;
}

.manual-output strong {
    font-family: Consolas, monospace;
    font-size: 20px;
}

.manual-output.is-one {
    border-color: #35e27b;
    background: rgba(7, 95, 50, .34);
}

.manual-output.is-one strong { color: #69f59c; }
.manual-output.is-zero strong { color: #a8c3d6; }

body[data-learning-mode="manual"] .answer-title,
body[data-learning-mode="manual"] .answer-buttons,
body[data-learning-mode="manual"] .check-btn,
body[data-learning-mode="manual"] .task-result {
    display: none;
}

body[data-learning-mode="manual"] .score-board {
    opacity: .55;
}

/* ---------- Пошаговый разбор ---------- */
.solution-btn {
    width: 100%;
    min-height: 36px;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid #b7791f;
    border-radius: 9px;
    background: #4b361c;
    color: #ffd98a;
    font-weight: 800;
    cursor: pointer;
}

.solution-btn:hover:not(:disabled) {
    background: #614721;
    border-color: #f3b84b;
}

.solution-btn:disabled {
    border-color: #3d4c57;
    background: #1a232a;
    color: #71828f;
    cursor: default;
}

.solution-panel {
    margin-top: 9px;
    padding: 10px;
    border: 1px solid #405c70;
    border-radius: 10px;
    background: #101920;
}

.solution-title {
    margin-bottom: 8px;
    color: #f3b84b;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.solution-panel ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.solution-panel li {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.solution-step-number {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1f4e6c;
    color: #dff3ff;
    font-size: 11px;
    font-weight: 900;
}

.solution-panel li div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.solution-panel li strong {
    color: #d8ebf8;
    font-size: 11px;
}

.solution-panel li span:not(.solution-step-number) {
    color: #9fb4c4;
    font-size: 10px;
    line-height: 1.35;
}

.solution-panel li b {
    color: #70f3a1;
    font-family: Consolas, monospace;
    font-size: 11px;
}

.solution-final {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #344956;
    color: #d9e6ef;
    text-align: center;
    font-size: 12px;
}

.solution-final strong {
    color: #70f3a1;
    font-family: Consolas, monospace;
    font-size: 15px;
}

/* ---------- Легенда сигналов ---------- */
.wire-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wire-sample {
    width: 30px;
    height: 0;
    display: inline-block;
    border-top: 4px solid;
    border-radius: 999px;
}

.wire-zero { border-color: #4f7894; }
.wire-one {
    border-color: #35e27b;
    box-shadow: 0 0 5px rgba(53, 226, 123, .45);
}

/* На больших экранах сохраняем 3 карточки, но даём SVG больше высоты. */
@media (max-width: 1500px) {
    .logic-diagram {
        min-height: 176px;
    }

    .logic-diagram svg,
    .logic-svg {
        max-height: 176px;
    }
}

@media (max-width: 720px) {
    .manual-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logic-diagram {
        min-height: 150px;
    }

    .logic-diagram svg,
    .logic-svg {
        max-height: 150px;
    }
}
}