* {
    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 {
    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 {
    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;
    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;
}

.panel-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;
    justify-content: space-between;
    gap: 18px;

    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;
    font-size: 27px;
    color: #f4f8fb;
}

.trainer-head p {
    max-width: 760px;
    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;
}

#calibratorSection {
    display: grid;
    grid-template-columns:
        minmax(480px, 620px)
        minmax(320px, 1fr);

    gap: 16px;
    align-items: start;
}

.calibrator-shell {
    padding: 18px;

    background:
        linear-gradient(
            145deg,
            #4c5b66,
            #29343c
        );

    border: 5px solid #1d262d;
    border-radius: 28px;

    box-shadow:
        0 24px 38px rgba(0,0,0,.55),
        inset 0 1px 4px rgba(255,255,255,.22);
}

.device-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;

    margin-bottom: 12px;
}

.device-top > div:first-child {
    display: flex;
    flex-direction: column;
}

.device-top strong {
    color: #fff;
    font-size: 22px;
    letter-spacing: .05em;
}

.device-top span {
    color: #c7d1d9;
    font-size: 9px;
}

.device-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;

    color: #bfe8c9;
    font-family: Consolas, monospace;
}

.device-status span:first-child {
    color: #2df47a;
    font-size: 12px;
    font-weight: 800;
}

.lcd {
    margin-bottom: 16px;
    padding: 14px 16px;

    background:
        linear-gradient(
            180deg,
            #c9daa5,
            #a9bd83
        );

    border: 5px solid #1b2428;
    border-radius: 12px;

    color: #1d2a1f;
    font-family: Consolas, monospace;

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.28);
}

.lcd-topline,
.lcd-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    font-size: 12px;
    font-weight: 700;
}

.lcd-main {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;

    padding: 13px 0 10px;
}

#lcdValue {
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 900;
    letter-spacing: -.04em;
}

#lcdUnit {
    font-size: 22px;
    font-weight: 900;
}

.terminal-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;

    margin: 10px 0 18px;
    padding: 12px;

    background: #202a31;
    border-radius: 12px;
}

.terminal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    color: #d6e0e7;
    font-size: 10px;
    text-align: center;
}

.terminal-hole {
    width: 42px;
    height: 42px;

    border: 7px solid #111;
    border-radius: 50%;

    background: #080808;

    box-shadow:
        inset 0 0 7px #000,
        0 2px 6px rgba(0,0,0,.5);
}

.terminal.red .terminal-hole {
    border-color: #9e3030;
}

.terminal.black .terminal-hole {
    border-color: #121212;
}

.terminal.blue .terminal-hole {
    border-color: #28618f;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.keypad button {
    min-height: 44px;

    border: 2px solid #222c34;
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #627786,
            #3d4c57
        );

    color: #fff;
    font-weight: 800;
    cursor: pointer;

    box-shadow:
        0 4px 7px rgba(0,0,0,.35),
        inset 0 1px 2px rgba(255,255,255,.25);
}

.keypad button:hover {
    background:
        linear-gradient(
            180deg,
            #718a9c,
            #4c6170
        );
}

.percent-key {
    background:
        linear-gradient(
            180deg,
            #375e7a,
            #27455a
        ) !important;
}

.special-key {
    background:
        linear-gradient(
            180deg,
            #6d5630,
            #4d3d22
        ) !important;
}

.right-work-card {
    min-height: 540px;
    padding: 17px;

    background: #202a33;
    border: 2px solid #3d4f5c;
    border-radius: 15px;
}

.work-title {
    margin-bottom: 14px;
}

.work-title h2 {
    margin: 0 0 5px;
    color: #f3f7fa;
    font-size: 21px;
}

.work-title span {
    color: #91a8ba;
    font-size: 12px;
}

.work-panel {
    display: grid;
    gap: 14px;
}

.work-panel > label,
.task-answer label {
    color: #aebfcd;
    font-size: 12px;
    font-weight: 700;
}

.manual-row {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 8px;
}

.manual-row input,
.calc-row input,
.task-answer input {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;

    border: 2px solid #405361;
    border-radius: 9px;

    background: #121a20;
    color: #fff;
    font-family: Consolas, monospace;
    font-size: 17px;
}

.manual-row button {
    min-height: 42px;

    border: 0;
    border-radius: 9px;

    background: #4f728b;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.scale-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.scale-card > div {
    padding: 10px 7px;

    background: #151e25;
    border: 1px solid #344754;
    border-radius: 9px;

    text-align: center;
}

.scale-card span {
    display: block;
    margin-bottom: 4px;

    color: #8ca2b4;
    font-size: 9px;
    text-transform: uppercase;
}

.scale-card strong {
    color: #c9f508;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.conversion-card {
    padding: 13px;

    background: #151e25;
    border: 1px solid #344754;
    border-radius: 10px;
}

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

.calc-row {
    display: grid;
    grid-template-columns:
        auto 1fr auto 1fr;

    gap: 7px;
    align-items: center;
}

.calc-row label {
    color: #9bb0c0;
    font-size: 11px;
}

.physical-result {
    margin-top: 12px;
    padding: 10px;

    background: #0f171d;
    border-radius: 9px;

    text-align: center;
}

.physical-result span {
    display: block;
    color: #8ea2b1;
    font-size: 10px;
}

.physical-result strong {
    display: block;
    margin-top: 5px;

    color: #64e9ff;
    font-family: Consolas, monospace;
    font-size: 22px;
}

.measure-source {
    padding: 18px;

    background: #10171c;
    border: 2px dashed #4d6577;
    border-radius: 12px;

    text-align: center;
}

.measure-source span {
    display: block;
    margin-bottom: 8px;

    color: #9eb2c1;
    font-size: 12px;
}

.measure-source strong {
    color: #ffaa44;
    font-family: Consolas, monospace;
    font-size: 34px;
}

.measure-info {
    padding: 12px;

    background: #183147;
    border-radius: 10px;

    color: #a8d7fb;
    font-size: 13px;
    line-height: 1.5;
}

.task-text {
    min-height: 120px;
    padding: 15px;

    background: #10171c;
    border: 2px solid #425a6b;
    border-radius: 12px;

    color: #e0e8ee;
    font-size: 15px;
    line-height: 1.55;
}

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

.task-answer {
    display: grid;
    gap: 6px;
}

.task-answer .manual-row {
    grid-template-columns: 1fr;
}

.task-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 720px);
    margin-top: 10px;
    justify-self: center;
}

.task-action-buttons button {
    width: 100%;
    min-height: 44px;
    padding: 8px 15px;
    border: 0;
    border-radius: 9px;
    background: #4f728b;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.task-action-buttons button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.task-result {
    min-height: 50px;
    padding: 10px;

    background: #111820;
    border-radius: 9px;

    color: #94a8b7;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.task-result.correct {
    color: #63f09a;
    border: 1px solid #2c8b54;
}

.task-result.wrong {
    color: #ff7c70;
    border: 1px solid #9f4540;
}

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

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

.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) {
    #calibratorSection {
        grid-template-columns: 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;
    }
}

@media (max-width: 650px) {
    .keypad {
        grid-template-columns:
            repeat(3,1fr);
    }

    .scale-card {
        grid-template-columns: 1fr;
    }

    .manual-row {
        grid-template-columns: 1fr;
    }

    .task-action-buttons {
        grid-template-columns: 1fr 1fr;
    }

    .task-action-buttons .formula-btn {
        grid-column: 1 / -1;
    }

    .calc-row {
        grid-template-columns:
            auto 1fr;
    }

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

.formula-btn {
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: 9px;
    background: #3b6e9e;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.formula-btn:hover {
    background: #4d8bbf;
}
/* ============================================================
   ИЗМЕРЕНИЕ СИГНАЛА — ВИРТУАЛЬНЫЕ ПРОВОДА И КЛЕММЫ
   ============================================================ */
.terminal-click{appearance:none;font:inherit;cursor:pointer}.terminal{border-left:0;border-right:0;border-top:0}.terminal-click.selected-terminal{outline:3px solid #ffcc4d;outline-offset:2px}
.measure-assignment{padding:14px 15px;background:#10171c;border:2px solid #425a6b;border-radius:12px}.assignment-kicker{margin-bottom:5px;color:#ffaa44;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.measure-assignment h3{margin:0 0 8px;color:#f3f7fa;font-size:18px}.measure-assignment p{margin:0;color:#c4d1db;font-size:13px;line-height:1.55}
.connection-workbench{position:relative;display:grid;gap:12px;padding:13px;background:#10171c;border:2px solid #344955;border-radius:12px;overflow:hidden}.wire-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}.wire-path{fill:none;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 2px 2px rgba(0,0,0,.65))}.wire-path.red{stroke:#e53935}.wire-path.black{stroke:#151515}
.source-device,.wire-toolbox{position:relative;z-index:10}.source-device{padding:12px;background:linear-gradient(145deg,#394853,#222c33);border:3px solid #182127;border-radius:13px}.source-device-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.source-device-head span{color:#ffaa44;font-family:Consolas,monospace}.source-terminals{display:grid;grid-template-columns:1fr 1fr;gap:10px}.source-terminal{min-height:82px;padding:8px;background:#202a31;border:2px solid #4a5b67;border-radius:10px;color:#e4ebf0;cursor:pointer}.source-terminal:hover{background:#2b3942}.source-terminal .jack{display:block;width:29px;height:29px;margin:0 auto 5px;border:6px solid #111;border-radius:50%;background:#050505}.source-terminal.plus .jack{border-color:#a63232}.source-terminal.minus .jack{border-color:#111}.source-terminal b,.source-terminal small{display:block;text-align:center}.source-terminal small{color:#8fa5b5;font-size:9px}
.wire-toolbox{padding:11px;background:#1b252c;border:1px solid #3a4d5a;border-radius:10px}.wire-buttons{display:grid;grid-template-columns:1fr 1fr auto;gap:7px}.wire-select,.clear-wires{min-height:36px;border:2px solid #415563;border-radius:8px;background:#2b3943;color:#fff;font-weight:800;cursor:pointer}.wire-select.red{color:#ff9d99}.wire-select.black{color:#e4e4e4}.wire-select.active{border-color:#ffcc4d;box-shadow:0 0 9px rgba(255,204,77,.35)}.clear-wires{padding:0 11px;background:#583737}.wire-instruction{margin-top:8px;padding:7px 8px;background:#111920;border-radius:7px;color:#9db4c4;font-size:11px;line-height:1.4}.wire-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.wire-status-grid>div{padding:7px;background:#121a20;border-radius:7px}.wire-status-grid span{display:block;color:#849aa9;font-size:9px}.wire-status-grid strong{display:block;margin-top:3px;color:#d8e3eb;font-size:10px}
.measure-actions{display:grid;grid-template-columns:1fr 160px;gap:8px}.measure-btn,.measure-secondary{min-height:43px;border:0;border-radius:9px;color:#fff;font-weight:800;cursor:pointer}.measure-btn{background:#447a58}.measure-btn:hover{background:#55976e}.measure-secondary{background:#4b6374}.connection-result{padding:10px 11px;background:#121a20;border:1px solid #354a58;border-radius:9px;color:#a6bac8;font-size:12px;line-height:1.5}.connection-result.error{border-color:#8d4642;color:#ff8b82}.connection-result.success{border-color:#317b50;color:#71f19c}
.calculation-stage{padding:13px;background:#151e25;border:1px solid #3b5060;border-radius:11px}.calculation-stage h3{margin:0 0 10px;color:#ffaa44;font-size:16px}.measured-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.measured-summary>div{padding:9px;background:#0f171d;border-radius:8px;text-align:center}.measured-summary span{display:block;color:#8298a8;font-size:9px;text-transform:uppercase}.measured-summary strong{display:block;margin-top:4px;color:#c9f508;font-family:Consolas,monospace}.calc-answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.calc-answer-grid label{color:#9eb1c0;font-size:11px;font-weight:700}.calc-answer-grid input{width:100%;min-height:40px;margin-top:4px;padding:7px 9px;border:2px solid #3f5260;border-radius:8px;background:#0f171d;color:#fff;font-family:Consolas,monospace}.physical-unit-line{margin:9px 0;color:#91a7b7;font-size:11px}.physical-unit-line strong{color:#64e9ff}
@media(max-width:650px){.wire-buttons,.wire-status-grid,.measure-actions,.measured-summary,.calc-answer-grid{grid-template-columns:1fr}}
#calibratorSection{position:relative}.wire-layer{z-index:50}.terminal-click,.source-terminal{position:relative;z-index:60}
.terminal-click{background:transparent;border:0;color:inherit;padding:0}
.exam-trainer-banner{position:sticky;top:0;z-index:200;display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:center;padding:12px 20px;background:#fff7d6;border-bottom:3px solid #d89b08;color:#2f3f49;box-shadow:0 5px 18px rgba(0,0,0,.18)}
.exam-trainer-banner>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.exam-trainer-banner strong{display:block;color:#8a5800}.exam-trainer-banner span{font-size:13px}.exam-trainer-banner button,.exam-trainer-banner a{padding:9px 12px;border:0;border-radius:8px;background:#08775a;color:#fff;text-decoration:none;font:inherit;font-weight:800;cursor:pointer}.exam-trainer-banner button:disabled{background:#9aa8ad;cursor:not-allowed}.exam-trainer-banner a{background:#34546b}.exam-trainer-banner p{grid-column:1/-1;margin:0;font-size:12px;font-weight:700}
@media(max-width:850px){.exam-trainer-banner{position:relative;grid-template-columns:1fr}.exam-trainer-banner>div{align-items:flex-start;flex-direction:column}}