:root {

    --background: #070b11;

    --panel: #0d141e;
    --panel-light: #111c29;

    --border: #1c3042;
    --border-light: #29465f;

    --text: #e4edf5;
    --text-muted: #778b9f;

    --blue: #22b9ff;
    --green: #31dd8a;
    --red: #ff5b69;
    --orange: #ffb347;
}


/* ========================================================== */
/* GLOBAL */
/* ========================================================== */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    padding: 30px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(0, 170, 255, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(0, 80, 255, 0.05),
            transparent 30%
        ),
        var(--background);
}


.app-container {

    width: 100%;
    max-width: 1150px;

    margin: 0 auto;
}


/* ========================================================== */
/* HEADER */
/* ========================================================== */

.app-header {

    margin-bottom: 25px;
}


h1 {

    margin: 0;

    color: white;

    font-size: 30px;
    font-weight: 600;
}


h1::before {

    content: "◈";

    margin-right: 12px;

    color: var(--blue);
}


.subtitle {

    margin-top: 5px;
    margin-left: 43px;

    color: #526d83;

    font-family:
        Consolas,
        monospace;

    font-size: 11px;

    letter-spacing: 1.5px;
}


/* ========================================================== */
/* ZAKŁADKI */
/* ========================================================== */

.tabs {

    display: flex;

    gap: 8px;

    margin-bottom: 20px;

    padding: 6px;

    background:
        #090f16;

    border:
        1px solid var(--border);

    border-radius:
        12px;
}


.tab-button {

    flex: 1;

    min-height: 52px;

    padding:
        0 20px;

    border:
        1px solid transparent;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #71889b;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s,
        box-shadow 0.15s;
}


.tab-button:hover {

    color:
        #b6c7d4;

    background:
        rgba(34, 185, 255, 0.04);
}


.tab-button.active {

    color:
        var(--blue);

    background:
        rgba(34, 185, 255, 0.09);

    border-color:
        rgba(34, 185, 255, 0.35);

    box-shadow:
        inset 0 0 20px
        rgba(34, 185, 255, 0.04);
}


.tab-number {

    margin-right:
        10px;

    color:
        #4d6579;

    font-family:
        Consolas,
        monospace;

    font-size:
        11px;
}


.tab-button.active
.tab-number {

    color:
        #1b8ebf;
}


.tab-content {

    display:
        none;
}


.tab-content.active {

    display:
        block;
}


/* ========================================================== */
/* CARDS */
/* ========================================================== */

.card {

    margin-bottom:
        20px;

    padding:
        22px;

    background:
        linear-gradient(
            145deg,
            var(--panel-light),
            var(--panel)
        );

    border:
        1px solid var(--border);

    border-radius:
        13px;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.18);
}


h2 {

    margin:
        0 0 20px 0;

    padding-bottom:
        10px;

    border-bottom:
        1px solid var(--border);

    color:
        #b9c9d6;

    font-size:
        14px;

    font-weight:
        600;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


/* ========================================================== */
/* BUTTONS */
/* ========================================================== */

.button {

    min-height:
        40px;

    padding:
        0 18px;

    border:
        1px solid;

    border-radius:
        7px;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background 0.15s,
        border-color 0.15s,
        opacity 0.15s,
        box-shadow 0.15s;
}


.button:disabled {

    opacity:
        0.3;

    cursor:
        not-allowed;
}


.button-blue {

    color:
        var(--blue);

    background:
        rgba(34, 185, 255, 0.08);

    border-color:
        rgba(34, 185, 255, 0.4);
}


.button-blue:hover:not(:disabled) {

    background:
        rgba(34, 185, 255, 0.15);

    border-color:
        var(--blue);
}


.button-green {

    color:
        var(--green);

    background:
        rgba(49, 221, 138, 0.08);

    border-color:
        rgba(49, 221, 138, 0.4);
}


.button-green:hover:not(:disabled) {

    background:
        rgba(49, 221, 138, 0.15);
}


.button-red {

    color:
        var(--red);

    background:
        rgba(255, 91, 105, 0.08);

    border-color:
        rgba(255, 91, 105, 0.4);
}


.button-secondary {

    color:
        #9fb0bf;

    background:
        #101a24;

    border-color:
        var(--border-light);
}


/* ========================================================== */
/* CONNECTION */
/* ========================================================== */

.connection-row {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        15px;
}


.field-label {

    width:
        130px;

    color:
        var(--text-muted);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        1px;
}


.port-info,
.firmware-protocol {

    min-width:
        310px;

    padding:
        11px 14px;

    color:
        #91a7b8;

    background:
        #080e14;

    border:
        1px solid var(--border);

    border-radius:
        7px;

    font-family:
        Consolas,
        monospace;

    font-size:
        12px;
}


select {

    min-height:
        40px;

    padding:
        0 35px 0 12px;

    color:
        var(--text);

    background:
        #080e14;

    border:
        1px solid var(--border);

    border-radius:
        7px;

    font-family:
        Consolas,
        monospace;
}


.connection-status {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        20px;

    padding:
        13px;

    background:
        rgba(0, 0, 0, 0.18);

    border:
        1px solid var(--border);

    border-radius:
        8px;
}


.status-title {

    color:
        var(--text-muted);

    font-size:
        11px;
}


.status {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-weight:
        600;
}


.status::before {

    content: "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;
}


.status-connected {

    color:
        var(--green);
}


.status-connected::before {

    background:
        var(--green);

    box-shadow:
        0 0 10px
        rgba(49, 221, 138, 0.8);
}


.status-disconnected {

    color:
        var(--red);
}


.status-disconnected::before {

    background:
        var(--red);
}


/* ========================================================== */
/* PANEL BUTTONS */
/* ========================================================== */

.panel-buttons {

    display:
        flex;

    flex-wrap:
        nowrap;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        22px;

    padding:
        22px 12px;

    overflow-x:
        auto;
}


.panel-button {

    flex:
        0 0 66px;

    width:
        66px;

    height:
        66px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    border:
        2px solid #354d61;

    background:
        #0a1118;

    color:
        #71889b;

    font-family:
        Consolas,
        monospace;

    font-size:
        22px;

    font-weight:
        600;

    transition:
        0.08s;
}


.panel-button.active {

    color:
        white;

    background:
        #159fd9;

    border-color:
        #5ed7ff;

    box-shadow:
        0 0 8px rgba(34, 185, 255, 0.9),
        0 0 20px rgba(34, 185, 255, 0.5),
        0 0 35px rgba(34, 185, 255, 0.2);
}


/* ========================================================== */
/* LED CONTROL */
/* ========================================================== */

.led-controls {

    display:
        flex;

    gap:
        70px;

    flex-wrap:
        wrap;
}


.led-control {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;
}


.led-description {

    width:
        100px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #a7bac8;

    font-weight:
        600;
}


.led-preview {

    width:
        13px;

    height:
        13px;

    border-radius:
        50%;
}


.led-preview-hydro {

    background:
        #178fd0;

    box-shadow:
        0 0 7px
        #178fd0;
}


.led-preview-air {

    background:
        white;

    box-shadow:
        0 0 7px
        white;
}


/* ========================================================== */
/* TOGGLE */
/* ========================================================== */

.toggle {

    position:
        relative;

    width:
        105px;

    height:
        44px;

    padding:
        0;

    border-radius:
        24px;

    border:
        1px solid #34495d;

    background:
        #080e14;

    cursor:
        pointer;
}


.toggle:disabled {

    opacity:
        0.3;
}


.toggle-knob {

    position:
        absolute;

    top:
        5px;

    left:
        5px;

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

    background:
        #445969;

    transition:
        0.15s;
}


.toggle-text {

    position:
        absolute;

    top:
        0;

    right:
        15px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    color:
        #6e8293;

    font-size:
        11px;

    font-weight:
        700;
}


.toggle-hydro.active
.toggle-knob {

    left:
        66px;

    background:
        #219cff;

    box-shadow:
        0 0 14px
        #219cff;
}


.toggle-air.active
.toggle-knob {

    left:
        66px;

    background:
        white;

    box-shadow:
        0 0 16px
        white;
}


.toggle.active
.toggle-text {

    left:
        15px;

    right:
        auto;
}


/* ========================================================== */
/* FRAME */
/* ========================================================== */

.frame-display {

    padding:
        27px;

    color:
        var(--blue);

    background:
        #05090d;

    border:
        1px solid #17364a;

    border-radius:
        10px;

    text-align:
        center;

    font-family:
        Consolas,
        monospace;

    font-size:
        32px;

    letter-spacing:
        9px;

    text-shadow:
        0 0 13px
        rgba(34, 185, 255, 0.4);
}


/* ========================================================== */
/* DATA */
/* ========================================================== */

.data-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        20px;
}


.data-card {

    text-align:
        center;
}


.data-hex {

    margin:
        15px 0 25px;

    color:
        white;

    font-family:
        Consolas,
        monospace;

    font-size:
        42px;
}


.data-details {

    display:
        flex;

    justify-content:
        space-around;
}


.data-details div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.data-details span {

    color:
        var(--text-muted);

    font-size:
        10px;
}


.data-details strong {

    font-family:
        Consolas,
        monospace;
}


/* ========================================================== */
/* STATISTICS */
/* ========================================================== */

.statistics-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        15px;
}


.statistic {

    padding:
        18px;

    background:
        rgba(0, 0, 0, 0.18);

    border:
        1px solid var(--border);

    border-radius:
        8px;

    text-align:
        center;
}


.statistic-name {

    color:
        var(--text-muted);

    font-size:
        10px;
}


.statistic-value {

    margin-top:
        10px;

    font-family:
        Consolas,
        monospace;

    font-size:
        28px;
}


/* ========================================================== */
/* TERMINAL */
/* ========================================================== */

.section-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.section-header h2 {

    flex:
        1;
}


.terminal {

    width:
        100%;

    height:
        220px;

    padding:
        15px;

    resize:
        vertical;

    outline:
        none;

    background:
        #04080b;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    font-family:
        Consolas,
        monospace;

    font-size:
        12px;

    line-height:
        1.55;
}


.terminal-rx {

    color:
        #7fe6aa;
}


.terminal-tx {

    color:
        #64caff;
}


.terminal-firmware {

    height:
        300px;

    color:
        #7fe6aa;
}


/* ========================================================== */
/* FIRMWARE FILE */
/* ========================================================== */

.firmware-file-row {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    flex-wrap:
        wrap;
}


.file-select-button {

    display:
        inline-flex;

    align-items:
        center;

    cursor:
        pointer;
}


.firmware-file-data {

    flex:
        1;

    min-width:
        250px;
}


.firmware-file-name {

    color:
        #dce7ef;

    font-family:
        Consolas,
        monospace;

    font-size:
        14px;
}


.firmware-file-info {

    margin-top:
        6px;

    color:
        var(--text-muted);

    font-size:
        12px;
}


/* ========================================================== */
/* FIRMWARE OPTIONS */
/* ========================================================== */

.firmware-options {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;
}


.check-option {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #a8bac8;

    cursor:
        pointer;
}


.check-option input {

    width:
        17px;

    height:
        17px;

    accent-color:
        var(--blue);
}


/* ========================================================== */
/* FIRMWARE PROGRAMMING */
/* ========================================================== */

.firmware-actions {

    display:
        flex;

    gap:
        12px;

    margin-bottom:
        25px;
}


.firmware-main-button {

    min-width:
        190px;
}


.firmware-status-container {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        22px;
}


.firmware-status-label {

    color:
        var(--text-muted);

    font-size:
        10px;

    letter-spacing:
        1px;
}


.firmware-status {

    font-weight:
        600;
}


.firmware-status-ready {

    color:
        #8ca1b2;
}


.firmware-status-running {

    color:
        var(--blue);
}


.firmware-status-success {

    color:
        var(--green);
}


.firmware-status-error {

    color:
        var(--red);
}


/* ========================================================== */
/* PROGRESS */
/* ========================================================== */

.progress-container {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.progress-track {

    flex:
        1;

    height:
        14px;

    overflow:
        hidden;

    background:
        #050a0f;

    border:
        1px solid var(--border);

    border-radius:
        7px;
}


.progress-bar {

    width:
        0%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #128fc4,
            var(--blue)
        );

    box-shadow:
        0 0 12px
        rgba(34, 185, 255, 0.5);

    transition:
        width 0.15s;
}


.progress-text {

    width:
        45px;

    color:
        #9ab0c1;

    font-family:
        Consolas,
        monospace;

    text-align:
        right;
}


/* ========================================================== */
/* SCROLLBAR */
/* ========================================================== */

::-webkit-scrollbar {

    width:
        9px;

    height:
        9px;
}


::-webkit-scrollbar-track {

    background:
        #080d12;
}


::-webkit-scrollbar-thumb {

    background:
        #263a4b;

    border-radius:
        5px;
}


/* ========================================================== */
/* RESPONSIVE */
/* ========================================================== */

@media(max-width: 800px) {

    body {
        padding: 15px;
    }

    .tabs {
        flex-direction: column;
    }

    .data-grid,
    .statistics-grid {
        grid-template-columns: 1fr;
    }

    .connection-row {
        flex-direction: column;
        align-items: stretch;
    }

    .field-label {
        width: auto;
    }

    .port-info,
    .firmware-protocol {
        min-width: 0;
        width: 100%;
    }

    .panel-buttons {
        justify-content: flex-start;
    }

    .frame-display {
        font-size: 22px;
        letter-spacing: 5px;
    }
}

/* ========================================================== */
/* STATUS - OCZEKIWANIE NA PONOWNE PODŁĄCZENIE */
/* ========================================================== */

.status-waiting {
    color: var(--orange);
}

.status-waiting::before {
    background: var(--orange);

    box-shadow:
        0 0 10px
        rgba(255, 179, 71, 0.8);
}
/* ========================================================== */
/* ONLINE AVR FLASHER - EXTENSIONS */
/* ========================================================== */

.header-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.browser-badge {
    padding: 9px 12px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
    color: var(--text-muted);
    font: 11px Consolas, monospace;
    white-space: nowrap;
}

.browser-badge.ok {
    color: var(--green);
    border-color: rgba(49, 221, 138, 0.35);
    background: rgba(49, 221, 138, 0.06);
}

.browser-badge.error {
    color: var(--red);
    border-color: rgba(255, 91, 105, 0.35);
    background: rgba(255, 91, 105, 0.06);
}

.flasher-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.flasher-layout > .card {
    margin-bottom: 0;
}

.setup-card,
.firmware-card,
.program-card,
.log-card,
.help-card {
    grid-column: span 12;
}

.connection-card,
.options-card {
    grid-column: span 6;
}

.step-title-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.step-number {
    flex: 0 0 auto;
    min-width: 39px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34,185,255,0.35);
    border-radius: 7px;
    color: var(--blue);
    background: rgba(34,185,255,0.07);
    font: 700 11px Consolas, monospace;
    letter-spacing: 1px;
}

h2.no-border {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
}

.section-description {
    margin: 0;
    max-width: 780px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

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

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field-wide {
    grid-column: span 2;
}

.field-label-auto {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

input[type="number"] {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    color: var(--text);
    background: #080e14;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: Consolas, monospace;
}

input[type="number"]:focus,
select:focus {
    border-color: rgba(34,185,255,0.65);
    box-shadow: 0 0 0 3px rgba(34,185,255,0.07);
}

.form-field select {
    width: 100%;
}

.form-field select:disabled,
.form-field input:disabled {
    opacity: 0.45;
}

.profile-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.profile-chip {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #8da5b7;
    background: rgba(0,0,0,0.16);
    font: 11px Consolas, monospace;
}

.profile-chip strong {
    color: #c9d7e1;
    font-weight: 600;
}

.connection-toolbar,
.program-actions,
.log-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.connection-status-spaced {
    justify-content: space-between;
}

.port-name {
    margin-top: 5px;
    color: #c7d4de;
    font: 12px Consolas, monospace;
}

.notice {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
}

.notice-warning {
    color: #e4bd7b;
    background: rgba(255,179,71,0.07);
    border-color: rgba(255,179,71,0.3);
}

.notice-info {
    color: #8fc9e8;
    background: rgba(34,185,255,0.06);
    border-color: rgba(34,185,255,0.25);
}

.notice-neutral {
    color: #8ca1b2;
    background: rgba(255,255,255,0.02);
    border-color: var(--border);
}

.drop-zone {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px dashed #33546d;
    border-radius: 10px;
    background: rgba(3, 9, 14, 0.55);
    transition: 0.15s;
}

.drop-zone.dragover {
    border-color: var(--blue);
    background: rgba(34,185,255,0.06);
    box-shadow: inset 0 0 25px rgba(34,185,255,0.04);
}

.drop-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--blue);
    background: rgba(34,185,255,0.08);
    border: 1px solid rgba(34,185,255,0.25);
    font: 700 13px Consolas, monospace;
}

.drop-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.drop-copy strong {
    color: #d8e3eb;
    font-size: 14px;
}

.drop-copy span {
    color: var(--text-muted);
    font-size: 11px;
}

.firmware-meta {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.meta-cell {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0,0,0,0.15);
}

.meta-cell span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.meta-cell strong {
    display: block;
    overflow: hidden;
    color: #d4e0e8;
    font: 12px Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memory-visualization {
    margin-top: 14px;
}

.memory-chart-panel {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(0,0,0,0.13);
}

.memory-chart-copy {
    margin-bottom: 14px;
}

.memory-chart-title {
    color: #cfe0ea;
    font-size: 13px;
    font-weight: 700;
}

.memory-chart-subtitle {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.memory-chart-layout {
    display: grid;
    grid-template-columns: minmax(180px, 230px) 1fr;
    gap: 18px;
    align-items: center;
}

.memory-pie-wrap {
    display: flex;
    justify-content: center;
}

.memory-pie {
    --pct: 0%;

    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: conic-gradient(
        var(--blue) 0 var(--pct),
        rgba(92, 119, 144, 0.35) var(--pct) 100%
    );
    box-shadow:
        0 0 0 1px rgba(34, 185, 255, 0.04) inset,
        0 8px 24px rgba(0, 0, 0, 0.2);
}

.memory-pie::before {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    border: 1px solid rgba(34,185,255,0.12);
    background:
        radial-gradient(circle at 50% 35%, rgba(34,185,255,0.08), transparent 45%),
        #09111a;
}

.memory-pie-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.memory-pie-center strong {
    color: white;
    font: 700 24px Consolas, monospace;
}

.memory-pie-center span {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 1px;
}

.memory-legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.memory-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
}

.memory-legend-item > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.memory-legend-item strong {
    color: #dce7ef;
    font: 700 13px Consolas, monospace;
}

.memory-legend-item span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
}

.memory-legend-swatch {
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border-radius: 50%;
    flex: 0 0 12px;
}

.memory-legend-used {
    background: var(--blue);
    box-shadow: 0 0 10px rgba(34,185,255,0.5);
}

.memory-legend-free {
    background: #415a6d;
}

.memory-legend-range {
    background: var(--orange);
    box-shadow: 0 0 10px rgba(255,179,71,0.35);
}

.memory-visual-note {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    color: #9ab0c1;
    background: rgba(255,255,255,0.02);
    font-size: 11px;
    line-height: 1.5;
}

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

.option-tile {
    align-items: flex-start;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0,0,0,0.13);
}

.option-tile div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.option-tile strong {
    color: #becdd8;
    font-size: 12px;
}

.option-tile span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.preflight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.preflight-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #71889b;
    background: rgba(0,0,0,0.13);
    font-size: 11px;
}

.check-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35495a;
}

.preflight-item.ok {
    color: #9fcdb4;
    border-color: rgba(49,221,138,0.24);
}

.preflight-item.ok .check-dot {
    background: var(--green);
    box-shadow: 0 0 8px rgba(49,221,138,0.6);
}

.preflight-item.error {
    color: #c18d92;
    border-color: rgba(255,91,105,0.2);
}

.preflight-item.error .check-dot {
    background: var(--red);
}

.program-actions {
    margin-bottom: 18px;
}

.stage-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.stage {
    padding: 8px 6px;
    border-bottom: 2px solid #203343;
    color: #52687a;
    font: 10px Consolas, monospace;
    text-align: center;
    letter-spacing: 1px;
}

.stage.active {
    color: var(--blue);
    border-color: var(--blue);
}

.stage.done {
    color: var(--green);
    border-color: var(--green);
}

.button-small {
    min-height: 33px;
    padding: 0 12px;
    font-size: 11px;
}

.log-card .section-header {
    align-items: flex-start;
    margin-bottom: 14px;
}

.log-terminal {
    height: 310px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
}

.log-line {
    padding: 1px 0;
}

.log-time {
    color: #43586a;
}

.log-info { color: #8ca9bc; }
.log-success { color: #78dba4; }
.log-error { color: #ff7b86; }
.log-warn { color: #e8b66e; }
.log-tx { color: #60c7ff; }
.log-rx { color: #7fe6aa; }

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.support-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0,0,0,0.13);
}

.support-icon {
    flex: 0 0 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34,185,255,0.25);
    border-radius: 7px;
    color: var(--blue);
    font: 700 10px Consolas, monospace;
}

.support-item > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.support-item strong {
    color: #cbd9e2;
    font-size: 12px;
}

.support-item span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
}

@media(max-width: 950px) {
    .connection-card,
    .options-card {
        grid-column: span 12;
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .firmware-meta,
    .preflight-grid,
    .support-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media(max-width: 650px) {
    .header-topline,
    .drop-zone,
    .connection-status-spaced {
        flex-direction: column;
        align-items: stretch;
    }

    .memory-chart-layout {
        grid-template-columns: 1fr;
    }

    .browser-badge {
        align-self: flex-start;
    }

    .form-grid,
    .firmware-meta,
    .option-grid,
    .preflight-grid,
    .support-grid {
        grid-template-columns: 1fr;
    }

    .form-field-wide {
        grid-column: span 1;
    }

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

    .stage {
        border-bottom: 0;
        border-left: 2px solid #203343;
        text-align: left;
        padding-left: 10px;
    }
}