* {
    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,
input {
    font: inherit;
}

.hidden {
    display: none !important;
}

.layout {
    min-width: 1240px;
    min-height: 100vh;
    padding: 12px;
}

.left-panel,
.right-panel {
    position: fixed;
    top: 12px;
    width: 220px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #2f3b46;
    border: 2px solid #1f2a33;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,.42);
    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,
.task-intro 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,.28);
    transition: .2s ease;
}

.pretty-btn:hover,
.back-btn:hover,
.timer-buttons button:hover,
.task-intro 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);
}

.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;
}

.panel-separator {
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: #738291;
}

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

.panel-select,
.inline-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;
}

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

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

.trainer-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    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: 27px;
}

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

.score-box {
    min-width: 135px;
    padding: 10px;
    background: #10181e;
    border: 1px solid #395164;
    border-radius: 10px;
    text-align: center;
}

.score-box span,
.score-box small {
    display: block;
    color: #8fa7bb;
    font-size: 10px;
    text-transform: uppercase;
}

.score-box strong {
    display: block;
    margin: 4px 0;
    color: #c9f508;
    font-size: 22px;
}

.lab-toolbar {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.lab-tab {
    min-height: 42px;
    border: 2px solid #3c5261;
    border-radius: 10px;
    background: #263540;
    color: #d6e2eb;
    font-weight: 800;
    cursor: pointer;
}

.lab-tab.active {
    background: #395d75;
    border-color: #70b2df;
    color: #fff;
    box-shadow: 0 0 10px rgba(83,174,235,.28);
}

.lab-panel {
    padding: 15px;
    background: #202a33;
    border: 1px solid #3c4f5d;
    border-radius: 13px;
}

.lab-title {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 13px;
}

.lab-title h2 {
    margin: 0 0 5px;
    font-size: 21px;
}

.lab-title p {
    margin: 0;
    color: #aebfcd;
    font-size: 13px;
    line-height: 1.45;
}

.formula-chip {
    white-space: nowrap;
    padding: 8px 10px;
    background: #10181e;
    border: 1px solid #536a79;
    border-radius: 9px;
    color: #c9f508;
    font-family: Consolas, monospace;
    font-weight: 800;
}

.lab-grid {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 12px;
}

.control-card,
.scope-card,
.opamp-symbol-card,
.digital-card {
    padding: 13px;
    background: #111920;
    border: 1px solid #344754;
    border-radius: 11px;
}

.control-card h3 {
    margin: 0 0 12px;
    color: #ffaa44;
    font-size: 15px;
}

.control-card label {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
    color: #aabdc9;
    font-size: 11px;
    font-weight: 700;
}

.control-card label > strong {
    color: #c9f508;
    font-family: Consolas, monospace;
}

.control-card input[type="range"] {
    width: 100%;
}

.control-card input[type="number"] {
    width: 100%;
    min-height: 40px;
    padding: 7px 9px;
    border: 2px solid #3b4f5d;
    border-radius: 8px;
    background: #0d1419;
    color: #fff;
    font-family: Consolas, monospace;
}

.result-stack {
    display: grid;
    gap: 7px;
}

.result-stack > div {
    padding: 8px;
    background: #0d1419;
    border-radius: 8px;
}

.result-stack span {
    display: block;
    color: #8298a8;
    font-size: 9px;
    text-transform: uppercase;
}

.result-stack strong {
    display: block;
    margin-top: 4px;
    color: #64e9ff;
    font-family: Consolas, monospace;
    font-size: 17px;
}

.scope-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #9fb0bc;
    font-size: 11px;
}

.scope-head div {
    display: flex;
    gap: 9px;
}

.scope-head b {
    font-size: 10px;
}

.ch1 {
    color: #e6d555;
}

.ch2 {
    color: #58d5ff;
}

canvas {
    display: block;
    width: 100%;
    height: auto;
    background: #030708;
    border: 3px solid #26363f;
    border-radius: 8px;
}

.opamp-workspace {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 12px;
}

.opamp-symbol-card svg {
    width: 100%;
    height: auto;
}

.wire {
    stroke: #9bb2c0;
    stroke-width: 6;
}

.opamp-body {
    fill: #29465a;
    stroke: #7ec7f7;
    stroke-width: 5;
}

.opamp-mark {
    fill: #fff;
    font-size: 34px;
    font-weight: 700;
}

.opamp-name {
    fill: #fff;
    font-size: 34px;
    font-weight: 800;
}

.opamp-small,
.svg-label {
    fill: #ffaa44;
    font-size: 18px;
    font-weight: 700;
}

.digital-card {
    padding: 20px;
}

.bit-panel {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.bit-btn {
    min-height: 90px;
    padding: 8px;
    border: 2px solid #455966;
    border-radius: 10px;
    background: #24323b;
    color: #fff;
    cursor: pointer;
}

.bit-btn.on {
    background: #176039;
    border-color: #38dc77;
    box-shadow: 0 0 12px rgba(56,220,119,.25);
}

.bit-btn strong,
.bit-btn span,
.bit-btn small {
    display: block;
    text-align: center;
}

.bit-btn strong {
    color: #ffaa44;
    font-size: 12px;
}

.bit-btn span {
    margin: 7px 0;
    font-family: Consolas, monospace;
    font-size: 28px;
    font-weight: 900;
}

.bit-btn small {
    color: #8ca2b1;
    font-size: 9px;
}

.digital-result-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
}

.digital-result-grid > div {
    padding: 12px;
    background: #0e151a;
    border-radius: 9px;
    text-align: center;
}

.digital-result-grid span {
    display: block;
    color: #8297a6;
    font-size: 9px;
    text-transform: uppercase;
}

.digital-result-grid strong {
    display: block;
    margin-top: 5px;
    color: #c9f508;
    font-family: Consolas, monospace;
    font-size: 22px;
}

.task-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 13px;
    background: #202a33;
    border: 1px solid #3c4f5d;
    border-radius: 11px;
}

.task-intro h2 {
    margin: 0 0 4px;
}

.task-intro p {
    margin: 0;
    color: #9fb2c1;
    font-size: 12px;
}

.task-intro button {
    width: auto;
    min-width: 150px;
}

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

.task-card {
    padding: 13px;
    background: #27343e;
    border: 2px solid #3e5363;
    border-radius: 13px;
}

.task-card.correct {
    border-color: #2ecc71;
}

.task-card.wrong {
    border-color: #e74c3c;
}

.task-card h3 {
    margin: 0 0 8px;
    color: #f1f5f7;
    font-size: 15px;
}

.task-question {
    min-height: 66px;
    padding: 9px;
    background: #111820;
    border-radius: 8px;
    color: #d4dfe6;
    font-size: 13px;
    line-height: 1.5;
}

.task-question strong {
    color: #ffaa44;
}

.task-answer-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 7px;
    margin-top: 8px;
}

.task-answer-row input,
.task-answer-row select {
    min-height: 40px;
    padding: 7px 9px;
    border: 2px solid #405563;
    border-radius: 8px;
    background: #10171c;
    color: #fff;
}

.task-answer-row button {
    border: 0;
    border-radius: 8px;
    background: #52748d;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.task-result {
    min-height: 30px;
    margin-top: 7px;
    padding: 6px 8px;
    background: #172027;
    border-radius: 7px;
    color: #94a7b6;
    font-size: 11px;
    text-align: center;
}

.blocks-intro {
    margin-bottom: 12px;
    padding: 13px;
    background: #202a33;
    border-radius: 11px;
}

.blocks-intro h2 {
    margin: 0 0 4px;
}

.blocks-intro p {
    margin: 0;
    color: #9fb2c1;
    font-size: 12px;
}

.device-blocks {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
}

.device-block {
    min-height: 130px;
    padding: 12px;
    border: 2px solid #3c5362;
    border-radius: 12px;
    background: #24323b;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.device-block:hover,
.device-block.active {
    background: #345064;
    border-color: #7eb7df;
}

.device-block .device-icon {
    display: block;
    margin-bottom: 8px;
    font-size: 34px;
}

.device-block strong {
    display: block;
    color: #ffaa44;
}

.device-block small {
    display: block;
    margin-top: 6px;
    color: #91a6b6;
}

.device-info {
    margin-top: 12px;
    min-height: 150px;
    padding: 15px;
    background: #131c22;
    border: 1px solid #3a4e5c;
    border-radius: 11px;
    color: #cad6df;
    line-height: 1.55;
}

.device-info h3 {
    margin-top: 0;
    color: #c9f508;
}

.mini-reference {
    display: grid;
    gap: 7px;
    padding: 9px;
    background: #202a33;
    border-radius: 10px;
}

.mini-reference div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-family: Consolas, monospace;
}

.mini-reference b {
    color: #ffaa44;
}

.mini-reference span {
    color: #c9f508;
    text-align: right;
}

.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;
}

.ref-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    background: #0d141a;
}

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

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

.code-box {
    padding: 10px;
    background: #0a0f13;
    border-left: 3px solid #00eaff;
    color: #00eaff;
    font-family: Consolas, monospace;
    white-space: pre-wrap;
}

@media (max-width: 1450px) {
    .lab-grid,
    .opamp-workspace {
        grid-template-columns: 1fr;
    }

    .device-blocks {
        grid-template-columns: repeat(2,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,
    .lab-title,
    .task-intro {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .lab-toolbar {
        grid-template-columns: repeat(2,1fr);
    }

    .task-grid,
    .device-blocks {
        grid-template-columns: 1fr;
    }

    .bit-panel {
        grid-template-columns: repeat(4,1fr);
    }

    .digital-result-grid,
    .task-answer-row {
        grid-template-columns: 1fr;
    }

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

/* ==========================================================
   V2 · АНАЛОГОВЫЕ УЗЛЫ: КОМПАРАТОР, СУММАТОР,
   СТАБИЛИЗАТОР, НОРМИРУЮЩАЯ СХЕМА
   ========================================================== */

.analog-workspace {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.scheme-card {
    padding: 13px;
    background: #111920;
    border: 1px solid #344754;
    border-radius: 11px;
    min-width: 0;
}

.scheme-caption {
    margin-bottom: 9px;
    color: #ffaa44;
    font-size: 12px;
    font-weight: 800;
}

.scheme-card svg {
    display: block;
    width: 100%;
    max-height: 430px;
    margin-bottom: 10px;
    background: #0b1116;
    border: 1px solid #2e424f;
    border-radius: 9px;
}

.resistor-line,
.ground-line {
    fill: none;
    stroke: #d9e6ee;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.node-dot {
    fill: #ffaa44;
    stroke: #fff;
    stroke-width: 2;
}

.status-lamp {
    fill: #ffaa44;
    stroke: #d9f7ff;
    stroke-width: 4;
    filter: drop-shadow(0 0 8px rgba(255,170,68,.55));
}

.svg-note {
    fill: #8fa7bb;
    font-size: 16px;
    font-weight: 700;
}

.scheme-block,
.scheme-ref,
.scheme-load,
.scheme-source {
    fill: #233744;
    stroke: #78b8df;
    stroke-width: 4;
}

.scheme-block.accent {
    fill: #1d4a49;
    stroke: #58e0c1;
}

.scheme-ref {
    fill: #413a1f;
    stroke: #e6d555;
}

.scheme-load {
    fill: #3b2d3e;
    stroke: #d894e6;
}

.scheme-source {
    fill: #2d4931;
    stroke: #62d889;
}

.scheme-block-title {
    fill: #f3f8fb;
    font-size: 18px;
    font-weight: 800;
}

.fixed-value {
    margin: 4px 0 12px;
    padding: 8px 9px;
    background: #18232a;
    border-left: 3px solid #ffaa44;
    border-radius: 7px;
    color: #b8c8d4;
    font-size: 11px;
    line-height: 1.45;
}

.lab-note {
    margin-top: 12px;
    padding: 10px 12px;
    background: #16232b;
    border-left: 4px solid #70b2df;
    border-radius: 8px;
    color: #bacbd7;
    font-size: 12px;
    line-height: 1.5;
}

.signal-bars {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.signal-bars > div {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 25px;
}

.signal-bars span {
    color: #a9bcc9;
    font-family: Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}

.signal-bars i {
    display: block;
    min-width: 2px;
    max-width: 100%;
    height: 15px;
    border-radius: 999px;
    background: #38dc77;
    transition: width .15s ease, background .15s ease;
}

@media (max-width: 1450px) {
    .analog-workspace {
        grid-template-columns: 1fr;
    }
}