:root {

    --bg: #f2f3f4;
    --panel: #ffffff;
    --panel-secondary: #e5e7e9;

    --text: #111111;
    --muted: #575d63;

    --border: #1c1c1c;

    --green: #59d13c;
    --green-dark: #2f8c20;

    --warning: #c77900;
    --critical: #b52525;

    --shadow:
        0 2px 8px rgba(0,0,0,0.14);
}


html[data-theme="dark"] {

    --bg: #111111;
    --panel: #1d1d1d;
    --panel-secondary: #292929;

    --text: #ffffff;
    --muted: #b0b0b0;

    --border: #777777;

    --green: #59d13c;
    --green-dark: #59d13c;

    --warning: #f2a33b;
    --critical: #ff7070;

    --shadow:
        0 2px 8px rgba(0,0,0,0.35);
}


* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}


html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    font-family:
        "DejaVu Sans",
        Arial,
        sans-serif;

    background: var(--bg);
    color: var(--text);

    user-select: none;
}


button {
    font-family: inherit;
}


#app {
    width: 100vw;
    height: 100vh;

    display: grid;

    grid-template-rows:
        68px
        1fr
        62px;

    background: var(--bg);
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        7px
        18px;

    background: var(--panel);

    border-bottom:
        2px solid
        var(--border);
}


.brand {
    display: flex;
    align-items: baseline;
    gap: 14px;
}


.brand-name {

    font-size: 27px;
    font-weight: 900;
    letter-spacing: 1px;

    color: var(--green);

    -webkit-text-stroke:
        1px #000000;

    paint-order:
        stroke fill;
}


.brand-subtitle {

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;

    color: var(--muted);
}


.topbar-right {

    display: flex;
    align-items: center;
    gap: 12px;
}


.connection-status {

    min-width: 98px;

    padding:
        8px
        10px;

    border-radius: 5px;

    text-align: center;

    font-size: 11px;
    font-weight: 900;

    color: var(--warning);

    border:
        2px solid
        currentColor;
}


.connection-status.online {
    color: var(--green-dark);
}


.connection-status.offline {
    color: var(--critical);
}


.theme-toggle {

    min-width: 82px;
    min-height: 42px;

    padding:
        7px
        13px;

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

    border-radius: 6px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

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


/* ============================================================
   PAGE AREA
   ============================================================ */

#page-container {

    position: relative;

    padding:
        14px
        18px;

    overflow: hidden;
}


.page-loading {

    height: 100%;

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

    color: var(--muted);

    font-size: 20px;
}


/* ============================================================
   HOME PAGE
   ============================================================ */

.home-page {

    height: 100%;

    display: grid;

    grid-template-columns:
        1fr
        240px;

    grid-template-rows:
        218px
        1fr;

    gap: 13px;
}


.power-grid {

    display: grid;

    grid-template-columns:
        1fr
        1.18fr
        1fr;

    gap: 12px;

    grid-column:
        1 / 3;
}


.power-card {

    position: relative;

    padding:
        13px
        14px;

    background:
        var(--panel);

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

    border-radius:
        9px;

    box-shadow:
        var(--shadow);

    text-align:
        center;
}


.card-label {

    font-size:
        15px;

    font-weight:
        900;

    letter-spacing:
        1px;

    color:
        var(--muted);
}


.power-value {

    margin-top:
        31px;

    font-size:
        46px;

    font-weight:
        900;

    line-height:
        1;
}


.unit {

    font-size:
        17px;

    font-weight:
        800;

    color:
        var(--muted);
}


.card-detail {

    margin-top:
        12px;

    font-size:
        11px;

    font-weight:
        800;

    color:
        var(--muted);

    letter-spacing:
        0.7px;
}


/* ============================================================
   BATTERY
   ============================================================ */

.battery-main {
    margin-top: 10px;
}


.soc-display {

    font-size:
        56px;

    line-height:
        1;

    font-weight:
        900;

    color:
        var(--green);

    -webkit-text-stroke:
        1px #000000;

    paint-order:
        stroke fill;
}


.percent {

    font-size:
        26px;
}


.battery-bar {

    width:
        86%;

    height:
        18px;

    margin:
        7px auto 0;

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

    border-radius:
        4px;

    overflow:
        hidden;

    background:
        var(--panel-secondary);
}


.battery-fill {

    width:
        0%;

    height:
        100%;

    background:
        var(--green);

    border-right:
        1px solid #000000;

    transition:
        width 0.4s ease;
}


.battery-power-row {

    margin-top:
        8px;

    font-size:
        18px;

    font-weight:
        900;
}


.direction-icon {

    display:
        inline-block;

    min-width:
        22px;

    color:
        var(--green-dark);
}


/* ============================================================
   POWER FLOW
   ============================================================ */

.flow-area {

    background:
        var(--panel);

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

    border-radius:
        9px;

    padding:
        12px 16px;

    box-shadow:
        var(--shadow);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-around;
}


.flow-line {

    display:
        grid;

    grid-template-columns:
        110px
        70px
        1fr;

    align-items:
        center;
}


.load-flow {

    grid-template-columns:
        1fr
        70px
        110px;
}


.flow-source,
.flow-center {

    font-size:
        13px;

    font-weight:
        900;

    text-align:
        center;
}


.flow-center {

    padding:
        7px;

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

    border-radius:
        5px;

    background:
        var(--panel-secondary);
}


.flow-arrow {

    text-align:
        center;

    font-size:
        30px;

    line-height:
        1;

    color:
        var(--muted);
}


.flow-arrow.active {

    color:
        var(--green);

    -webkit-text-stroke:
        1px #000000;

    paint-order:
        stroke fill;
}


/* ============================================================
   RUNTIME
   ============================================================ */

.runtime-panel {

    background:
        var(--panel);

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

    border-radius:
        9px;

    box-shadow:
        var(--shadow);

    padding:
        18px 10px;

    text-align:
        center;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.runtime-label {

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.3;

    font-weight:
        900;
}


.runtime-value {

    margin:
        15px 0 10px;

    font-size:
        32px;

    line-height:
        1;

    font-weight:
        900;

    color:
        var(--green-dark);
}


.runtime-description {

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        900;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.bottom-nav {

    display:
        grid;

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

    gap:
        7px;

    padding:
        7px 12px;

    background:
        var(--panel);

    border-top:
        2px solid
        var(--border);
}


.nav-button {

    min-height:
        46px;

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

    border-radius:
        6px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

    font-size:
        13px;

    font-weight:
        900;
}


.nav-button.active {

    background:
        var(--green);

    color:
        #000000;
}


.nav-button:disabled {

    opacity:
        0.38;
}


/* ============================================================
   1024x600 TARGET
   ============================================================ */

@media
(max-height: 620px) {

    #app {

        grid-template-rows:
            64px
            1fr
            58px;
    }

    #page-container {

        padding:
            11px 16px;
    }

}



/* LOADRUNNER HOME SIMPLE v0.2 */

.home-simple {

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1.28fr
        1fr;

    gap: 16px;

    align-items: stretch;
}


.simple-card {

    height: 100%;

    background:
        var(--panel);

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

    border-radius:
        10px;

    box-shadow:
        var(--shadow);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        22px 18px;
}


.simple-label {

    font-size:
        18px;

    font-weight:
        900;

    letter-spacing:
        1.4px;

    color:
        var(--muted);

    margin-bottom:
        34px;
}


.simple-power {

    font-size:
        58px;

    line-height:
        1;

    font-weight:
        900;

    white-space:
        nowrap;

    color:
        var(--text);
}


.simple-unit {

    margin-left:
        5px;

    font-size:
        20px;

    font-weight:
        900;

    color:
        var(--muted);
}


.simple-caption {

    margin-top:
        22px;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.8px;

    color:
        var(--muted);
}


/* ============================================================
   BATTERY CENTER CARD
   ============================================================ */

.battery-simple {

    padding-top:
        18px;

    padding-bottom:
        18px;
}


.battery-simple .simple-label {

    margin-bottom:
        10px;
}


.simple-soc {

    font-size:
        78px;

    font-weight:
        900;

    line-height:
        1;

    color:
        var(--green);

    -webkit-text-stroke:
        1.2px #000000;

    paint-order:
        stroke fill;
}


.simple-percent {

    font-size:
        32px;
}


.simple-battery-bar {

    width:
        88%;

    height:
        22px;

    margin-top:
        12px;

    background:
        var(--panel-secondary);

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

    border-radius:
        5px;

    overflow:
        hidden;
}


.simple-battery-fill {

    width:
        0%;

    height:
        100%;

    background:
        var(--green);

    transition:
        width 0.35s ease;
}


.simple-battery-state {

    margin-top:
        9px;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.8px;

    color:
        var(--muted);
}


.simple-runtime-divider {

    width:
        82%;

    height:
        2px;

    margin:
        18px 0 16px;

    background:
        var(--panel-secondary);
}


.simple-runtime-title {

    font-size:
        11px;

    line-height:
        1.2;

    font-weight:
        900;

    letter-spacing:
        0.6px;

    color:
        var(--muted);
}


.simple-runtime-value {

    margin-top:
        9px;

    font-size:
        38px;

    line-height:
        1;

    font-weight:
        900;

    color:
        var(--green-dark);
}


.simple-runtime-caption {

    margin-top:
        9px;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.6px;

    color:
        var(--muted);
}


/* ============================================================
   1024x600 HOME TARGET
   ============================================================ */

@media
(max-width: 1100px) {

    .home-simple {

        gap:
            12px;
    }


    .simple-card {

        padding-left:
            12px;

        padding-right:
            12px;
    }


    .simple-power {

        font-size:
            50px;
    }


    .simple-soc {

        font-size:
            70px;
    }

}



/* ============================================================
   LOADRUNNER UI v0.3
   ============================================================ */


.climate-status {

    min-height: 42px;

    padding:
        7px 12px;

    border-radius:
        6px;

    background:
        var(--panel);

    font-size:
        11px;

    font-weight:
        900;

    border:
        2px solid
        currentColor;
}


.climate-status.normal {

    color:
        var(--green-dark);
}


.climate-status.attention {

    color:
        var(--critical);
}


/* ============================================================
   HOME
   ============================================================ */

.home-v03 {

    width: 100%;
    height: 100%;

    display: flex;

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


.home-flow-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        72px
        1.15fr
        72px
        1fr;

    align-items: center;

    gap: 10px;
}


.home-card {

    height: 330px;

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

    border-radius:
        14px;

    background:
        var(--panel);

    color:
        var(--text);

    box-shadow:
        var(--shadow);

    padding:
        18px;

    text-align:
        center;
}


.home-card-button {

    cursor: pointer;

    transition:
        transform 0.08s ease,
        box-shadow 0.08s ease;
}


.home-card-button:active {

    transform:
        scale(0.985);

    box-shadow:
        none;
}


.home-card-label {

    margin-top:
        26px;

    font-size:
        20px;

    font-weight:
        900;

    letter-spacing:
        1.3px;

    color:
        var(--muted);
}


.home-card-value {

    margin-top:
        62px;

    font-size:
        58px;

    line-height:
        1;

    font-weight:
        900;
}


.home-unit {

    margin-left:
        4px;

    font-size:
        20px;

    font-weight:
        900;

    color:
        var(--muted);
}


.home-card-caption {

    margin-top:
        21px;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.7px;

    color:
        var(--muted);
}


.tap-hint {

    margin-top:
        34px;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.7px;

    color:
        var(--green-dark);
}


/* ============================================================
   BATTERY HOME
   ============================================================ */

.battery-home-card {

    height:
        372px;

    padding:
        14px 20px;
}


.battery-home-card
.home-card-label {

    margin-top:
        5px;
}


.battery-home-soc {

    margin-top:
        10px;

    font-size:
        70px;

    line-height:
        1;

    font-weight:
        900;

    color:
        var(--green);

    -webkit-text-stroke:
        1px #000000;

    paint-order:
        stroke fill;
}


.battery-home-percent {

    font-size:
        30px;
}


.battery-home-bar {

    width:
        88%;

    height:
        21px;

    margin:
        11px auto 0;

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

    border-radius:
        5px;

    background:
        var(--panel-secondary);

    overflow:
        hidden;
}


.battery-home-fill {

    width:
        0%;

    height:
        100%;

    background:
        var(--green);
}


.battery-home-state {

    margin-top:
        9px;

    font-size:
        12px;

    font-weight:
        900;

    color:
        var(--muted);
}


.battery-runtime-block {

    width:
        88%;

    margin:
        17px auto 0;

    padding-top:
        15px;

    border-top:
        2px solid
        var(--panel-secondary);
}


.battery-runtime-title {

    font-size:
        17px;

    font-weight:
        900;

    color:
        var(--text);
}


.battery-runtime-value {

    margin-top:
        7px;

    font-size:
        39px;

    line-height:
        1;

    font-weight:
        900;

    color:
        var(--green-dark);
}


.battery-runtime-description {

    margin-top:
        10px;

    font-size:
        11px;

    line-height:
        1.25;

    font-weight:
        900;

    color:
        var(--muted);
}


.battery-home-card
.tap-hint {

    margin-top:
        18px;
}


/* ============================================================
   POWER FLOW ARROWS
   ============================================================ */

.home-flow-arrow {

    text-align:
        center;

    font-size:
        58px;

    line-height:
        1;

    font-weight:
        900;

    -webkit-text-stroke:
        1px #000000;

    paint-order:
        stroke fill;
}


.flow-charging {

    color:
        var(--green);
}


.flow-discharging {

    color:
        var(--warning);
}


.flow-idle {

    color:
        var(--muted);

    -webkit-text-stroke:
        0;
}


/* ============================================================
   DETAIL PAGES
   ============================================================ */

.detail-page {

    height: 100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


.detail-header {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;
}


.back-home-button {

    min-width:
        110px;

    min-height:
        48px;

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

    border-radius:
        7px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

    font-size:
        13px;

    font-weight:
        900;
}


.detail-title {

    font-size:
        24px;

    font-weight:
        900;
}


.detail-subtitle {

    margin-top:
        3px;

    font-size:
        11px;

    color:
        var(--muted);

    font-weight:
        800;
}


.detail-placeholder {

    flex:
        1;

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

    border-radius:
        10px;

    background:
        var(--panel);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


.detail-placeholder-title {

    font-size:
        34px;

    font-weight:
        900;

    color:
        var(--green-dark);
}


.detail-placeholder-text {

    margin-top:
        12px;

    font-size:
        14px;

    color:
        var(--muted);
}


/* ============================================================
   SETTINGS
   ============================================================ */

.settings-card {

    min-height:
        125px;

    padding:
        20px;

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

    border-radius:
        10px;

    background:
        var(--panel);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.setting-title {

    font-size:
        16px;

    font-weight:
        900;
}


.setting-description {

    max-width:
        590px;

    margin-top:
        8px;

    font-size:
        12px;

    line-height:
        1.4;

    color:
        var(--muted);
}


.setting-select {

    min-width:
        230px;

    min-height:
        52px;

    padding:
        8px 12px;

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

    border-radius:
        7px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        900;
}


/* 1024x600 target */

@media
(max-width: 1100px) {

    .topbar {

        padding-left:
            12px;

        padding-right:
            12px;
    }


    .topbar-right {

        gap:
            7px;
    }


    .climate-status {

        font-size:
            9px;

        padding-left:
            8px;

        padding-right:
            8px;
    }


    .home-flow-grid {

        grid-template-columns:
            1fr
            52px
            1.12fr
            52px
            1fr;

        gap:
            7px;
    }


    .home-card {

        height:
            305px;
    }


    .battery-home-card {

        height:
            345px;
    }


    .home-flow-arrow {

        font-size:
            45px;
    }

}


/* ============================================================
   LOADRUNNER TEMPERATURE UI v0.4
   ============================================================ */

.hidden {
    display: none !important;
}


.temperature-page {

    height: 100%;

    display:
        flex;

    flex-direction:
        column;
}


.temperature-header {

    margin-bottom:
        10px;
}


.temperature-tabs {

    margin-left:
        auto;

    display:
        flex;

    gap:
        7px;
}


.temperature-tab,
.history-range,
.history-now {

    min-height:
        42px;

    padding:
        6px 15px;

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

    border-radius:
        6px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        900;
}


.temperature-tab.active,
.history-range.active {

    background:
        var(--green);

    color:
        #000000;
}


.temperature-summary {

    height:
        65px;

    display:
        grid;

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

    align-items:
        center;

    margin-bottom:
        10px;

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

    border-radius:
        8px;

    background:
        var(--panel);
}


.temperature-summary > div {

    text-align:
        center;
}


.temp-summary-label {

    margin-right:
        8px;

    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        900;
}


.temp-summary-value {

    font-size:
        23px;

    font-weight:
        900;
}


.temperature-sensor-list {

    display:
        grid;

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

    gap:
        10px;

    overflow-y:
        auto;

    padding-bottom:
        6px;
}


.temperature-sensor-card {

    min-height:
        145px;

    padding:
        12px;

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

    border-radius:
        8px;

    background:
        var(--panel);

    text-align:
        center;
}


.temperature-sensor-card.offline {

    opacity:
        0.58;
}


.temperature-sensor-name {

    font-size:
        14px;

    font-weight:
        900;
}


.temperature-sensor-value {

    margin-top:
        12px;

    font-size:
        35px;

    font-weight:
        900;

    color:
        var(--green-dark);
}


.temperature-sensor-status {

    margin-top:
        5px;

    font-size:
        10px;

    color:
        var(--muted);

    font-weight:
        900;
}


.temperature-sensor-actions {

    margin-top:
        10px;

    display:
        flex;

    justify-content:
        center;

    gap:
        7px;
}


.sensor-action {

    min-height:
        34px;

    padding:
        5px 12px;

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

    border-radius:
        5px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

    font-weight:
        900;
}


.sensor-action.delete {

    color:
        var(--critical);
}


.temperature-error {

    padding:
        25px;

    color:
        var(--critical);

    font-size:
        18px;

    font-weight:
        900;
}


.history-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        8px;
}


.history-range-buttons {

    display:
        flex;

    gap:
        7px;
}


.temperature-history-card {

    height:
        295px;

    padding:
        6px;

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

    border-radius:
        8px;

    background:
        var(--panel);
}


#temperature-history-canvas {

    width:
        100%;

    height:
        100%;
}


.temperature-history-legend {

    margin-top:
        8px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.history-sensor-toggle {

    min-height:
        35px;

    padding:
        5px 12px;

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

    border-radius:
        5px;

    background:
        var(--green);

    color:
        #000000;

    font-weight:
        900;
}


.history-sensor-toggle.hidden-sensor {

    background:
        var(--panel-secondary);

    color:
        var(--muted);
}


/* ============================================================
   SETTINGS DIAGNOSTICS
   ============================================================ */

.settings-section-title {

    margin:
        8px 0;

    font-size:
        14px;

    font-weight:
        900;

    color:
        var(--muted);
}


.diagnostic-grid {

    display:
        grid;

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

    gap:
        9px;
}


.diagnostic-card {

    min-height:
        85px;

    padding:
        12px;

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

    border-radius:
        8px;

    background:
        var(--panel);

    text-align:
        center;
}


.diagnostic-name {

    font-size:
        10px;

    font-weight:
        900;

    color:
        var(--muted);
}


.diagnostic-state {

    margin-top:
        10px;

    font-size:
        18px;

    font-weight:
        900;
}


.diagnostic-state.good {

    color:
        var(--green-dark);
}


.diagnostic-state.bad {

    color:
        var(--critical);
}


/* ============================================================
   LOADRUNNER HTML LOGO v0.6
   ============================================================ */

.loadrunner-html-logo {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    height:
        52px;
}


.loadrunner-lr-mark {

    display:
        block;

    width:
        45px;

    height:
        45px;

    flex:
        0 0 auto;
}


.loadrunner-wordmark {

    display:
        flex;

    align-items:
        baseline;

    white-space:
        nowrap;

    transform:
        skewX(-7deg);

    transform-origin:
        left center;

    font-family:
        "DejaVu Sans Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        25px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -1.2px;
}


.loadrunner-word-load {

    color:
        #000000;
}


.loadrunner-word-runner {

    color:
        #59d13c;

    -webkit-text-stroke:
        0.35px #000000;

    paint-order:
        stroke fill;
}


/*
   Keep the logo readable in dark mode.
   The branding remains intentionally black/green on white.
*/

.topbar {

    background:
        var(--panel);
}


html[data-theme="dark"] .topbar {

    background:
        #000000;
}


html[data-theme="dark"] .loadrunner-word-load {

    color:
        #ffffff;
}


html[data-theme="dark"]
.loadrunner-lr-mark
path:first-child {

    fill:
        #ffffff;
}


/* ============================================================
   BATTERY RUNTIME WARNING v0.6
   ============================================================ */

.battery-runtime-title {

    font-size:
        18px;
}


.runtime-charging {

    color:
        var(--green-dark)
        !important;
}


.runtime-discharging {

    color:
        var(--warning)
        !important;
}


.runtime-critical {

    color:
        var(--critical)
        !important;
}


.runtime-idle {

    color:
        var(--muted)
        !important;
}


/* ============================================================
   TECHNICIAN MODE v0.7
   ============================================================ */

.hidden {
    display: none !important;
}


body.technician-mode {

    box-shadow:
        inset 0 0 0 7px
        #ff1f1f;
}


.tech-mode-banner {

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        24px;

    background:
        #ff1f1f;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        900;

    letter-spacing:
        1px;
}


.tech-logout-button {

    min-height:
        32px;

    padding:
        4px 16px;

    border:
        2px solid
        #ffffff;

    border-radius:
        5px;

    background:
        #ffffff;

    color:
        #c40000;

    font-weight:
        900;
}


.technician-mode #app {

    height:
        100vh;

    grid-template-rows:
        42px
        68px
        minmax(0, 1fr)
        62px;
}


.tech-login-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(0,0,0,0.68);
}


.tech-login-panel {

    width:
        390px;

    padding:
        24px;

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

    border-radius:
        13px;

    background:
        var(--panel);

    text-align:
        center;
}


.tech-login-title {

    font-size:
        23px;

    font-weight:
        900;
}


.tech-login-subtitle {

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        800;
}


.tech-pin-display {

    margin:
        20px 0;

    font-size:
        29px;

    font-weight:
        900;

    letter-spacing:
        8px;
}


.tech-keypad {

    display:
        grid;

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

    gap:
        9px;
}


.tech-keypad button {

    min-height:
        64px;

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

    border-radius:
        8px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

    font-size:
        22px;

    font-weight:
        900;
}


.tech-login-error {

    min-height:
        22px;

    margin-top:
        10px;

    color:
        #ff1f1f;

    font-weight:
        900;
}


.tech-login-cancel {

    width:
        100%;

    min-height:
        48px;

    margin-top:
        5px;

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

    border-radius:
        7px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

    font-weight:
        900;
}


/* ============================================================
   LOGO
   ============================================================ */

.loadrunner-html-logo {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.loadrunner-lr-mark {

    width:
        43px;

    height:
        43px;

    display:
        block;
}


.loadrunner-wordmark {

    display:
        flex;

    align-items:
        baseline;

    transform:
        skewX(-7deg);

    font-family:
        "DejaVu Sans Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        24px;

    font-weight:
        900;

    letter-spacing:
        -1px;
}


.loadrunner-word-load {

    color:
        #000000;
}


.loadrunner-word-runner {

    color:
        #59d13c;
}


/* ============================================================
   SETTINGS / TECH
   ============================================================ */

.settings-action-button {

    min-width:
        210px;

    min-height:
        52px;

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

    border-radius:
        7px;

    background:
        var(--green);

    color:
        #000000;

    font-size:
        13px;

    font-weight:
        900;
}


.settings-action-button:disabled {

    opacity:
        0.4;
}


.inverter-settings-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.inverter-rs485-note {

    padding:
        14px;

    border:
        2px solid
        var(--warning);

    border-radius:
        8px;

    background:
        var(--panel);

    color:
        var(--warning);

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.4;
}


.warning-text {

    color:
        var(--warning);
}


/* ============================================================
   SYSTEM CUSTOMER STATUS
   ============================================================ */

.system-summary-grid {

    display:
        grid;

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

    gap:
        12px;
}


.system-summary-card {

    min-height:
        145px;

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

    border-radius:
        10px;

    background:
        var(--panel);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


.system-summary-label {

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        900;
}


.system-summary-value {

    margin-top:
        12px;

    font-size:
        24px;

    font-weight:
        900;
}


.system-summary-value.good {

    color:
        var(--green-dark);
}


.system-summary-value.bad {

    color:
        #ff1f1f;
}


/* ============================================================
   BATTERY STATE
   ============================================================ */

.runtime-discharging {

    color:
        #f28c00
        !important;
}


.runtime-critical {

    color:
        #ff1f1f
        !important;
}


.runtime-charging {

    color:
        var(--green-dark)
        !important;
}


/* ============================================================
   FIXED TEMP ASSIGNMENT
   ============================================================ */

.lr-tech-sensor-controls {

    width:
        100%;

    margin-top:
        12px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.lr-sensor-position-select {

    min-height:
        42px;

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

    border-radius:
        6px;

    padding:
        5px 8px;

    background:
        var(--panel-secondary);

    color:
        var(--text);

    font-weight:
        900;
}


/* LoadRunner battery development + detail additions */

.home-v03 {
    position: relative;
}

.dev-data-source {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
}

.dev-source-button {
    min-width: 52px;
    min-height: 34px;
    border: 2px solid var(--border);
    border-radius: 5px;
    background: var(--panel-secondary);
    color: var(--text);
    font-weight: 900;
}

.dev-source-button.active {
    background: var(--green);
    color: #000;
}

.temperature-attention-banner {
    margin-bottom: 9px;
    padding: 10px 14px;
    border: 3px solid #ff1f1f;
    border-radius: 8px;
    background: var(--panel);
    color: #ff1f1f;
    display: flex;
    gap: 16px;
    align-items: center;
}

.battery-detail-page {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 12px;
}

.battery-live-badge {
    margin-left: auto;
    padding: 7px 14px;
    border: 2px solid var(--green-dark);
    border-radius: 6px;
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 900;
}

.battery-bank-summary {
    margin-top: 9px;
    min-height: 95px;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    border: 2px solid var(--border);
    border-radius: 9px;
    background: var(--panel);
}

.battery-bank-summary > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.battery-bank-summary span,
.battery-pack-values span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
}

.battery-bank-summary strong {
    margin-top: 5px;
    font-size: 20px;
}

.battery-pack-grid {
    margin-top: 9px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9px;
}

.battery-pack-card {
    padding: 11px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}

.battery-pack-name {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.battery-pack-soc {
    margin-top: 4px;
    color: var(--green-dark);
    font-size: 27px;
    font-weight: 900;
}

.battery-pack-values {
    margin-top: 7px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
}

.battery-pack-values > div {
    display: flex;
    flex-direction: column;
}

.battery-pack-values strong {
    margin-top: 2px;
    font-size: 11px;
}

.battery-history-controls {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.battery-range {
    min-height: 40px;
    padding: 5px 12px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--panel-secondary);
    color: var(--text);
    font-weight: 900;
}

.battery-range.active {
    background: var(--green);
    color: #000;
}

.battery-history-card {
    height: 275px;
    margin-top: 10px;
    padding: 7px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}

.battery-history-title {
    height: 23px;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}

.battery-history-card canvas {
    width: 100%;
    height: calc(100% - 23px);
    display: block;
}

.battery-trace-toggles {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.battery-trace-toggle {
    min-height: 34px;
    padding: 5px 10px;
    border: 3px solid;
    border-radius: 5px;
    background: var(--panel);
    font-size: 9px;
    font-weight: 900;
}

.battery-trace-toggle.disabled {
    opacity: 0.28;
}


/* LOADRUNNER_V09_BATTERY_COMPACT_START */

.battery-pack-grid {
    display: grid !important;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(155px, 1fr)
        ) !important;
    gap: 6px !important;
}

.battery-pack-card {
    padding: 7px 8px !important;
    min-height: 70px !important;
}

.battery-pack-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.battery-pack-heading span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
}

.battery-pack-heading strong {
    color: var(--green-dark);
    font-size: 18px;
    font-weight: 900;
}

.battery-pack-compact {
    margin-top: 5px;
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 3px 6px;
    color: var(--text);
    font-size: 8px;
    font-weight: 800;
}

.battery-history-navigation {
    margin-top: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.battery-history-nav {
    min-width: 170px;
    min-height: 44px;
    padding: 6px 12px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--panel-secondary);
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
}

.battery-history-nav:disabled {
    opacity: 0.3;
}

.battery-history-now {
    min-width: 75px;
    min-height: 44px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--panel-secondary);
    color: var(--text);
    font-weight: 900;
}

/* LOADRUNNER_V09_BATTERY_COMPACT_END */

/* LOADRUNNER_V10_BATTERY_LAYOUT_START */

/* Show entered technician PIN digits while diagnosing login input. */
.tech-pin-display {
    min-height: 34px;
    font-size: 29px;
    font-weight: 900;
    letter-spacing: 5px;
    font-variant-numeric: tabular-nums;
}

/* Condensed bank strip. */
.battery-bank-summary {
    min-height: 60px !important;
    margin-top: 7px !important;
}

.battery-bank-summary > div {
    padding: 4px 5px !important;
}

.battery-bank-summary span {
    font-size: 10px !important;
    line-height: 1 !important;
}

.battery-bank-summary strong {
    margin-top: 3px !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
}

/* Compact fixed-width pack cards; do not stretch two packs across the screen. */
.battery-pack-grid {
    grid-template-columns:
        repeat(auto-fill, 290px) !important;
    justify-content: start !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.battery-pack-card {
    min-height: 0 !important;
    padding: 9px 10px !important;
}

.battery-pack-heading {
    margin-bottom: 7px !important;
}

.battery-pack-heading span {
    font-size: 13px !important;
    line-height: 1 !important;
}

.battery-pack-heading strong {
    font-size: 21px !important;
    line-height: 1 !important;
}

.battery-pack-compact {
    margin-top: 0 !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px 8px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.battery-pack-compact span {
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
}

/* LOADRUNNER_V10_BATTERY_LAYOUT_END */

/* LOADRUNNER_V11_BANK_SUMMARY_START */

/*
 * Compact whole-bank summary:
 *
 * BANK SOC     POWER       VOLTAGE
 * CURRENT      CAPACITY    ONLINE
 */

.battery-bank-summary {
    width: 780px !important;
    max-width: 100% !important;

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

    min-height: 0 !important;

    margin-top: 7px !important;
}

.battery-bank-summary > div {
    min-height: 46px !important;

    padding:
        5px 12px !important;
}

.battery-bank-summary span {
    font-size: 10px !important;
    line-height: 1 !important;
}

.battery-bank-summary strong {
    margin-top: 3px !important;

    font-size: 17px !important;
    line-height: 1.05 !important;
}

/* LOADRUNNER_V11_BANK_SUMMARY_END */

/* LOADRUNNER_V12_BATTERY_DETAIL_START */

/* Clear, legible two-column summary on each compact pack card. */
.battery-pack-card {
    cursor: pointer;
    user-select: none;
}

.battery-pack-card:active {
    transform: translateY(1px);
}

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

.battery-pack-summary-grid > div {
    min-width: 0;
}

.battery-pack-summary-grid span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}

.battery-pack-summary-grid strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.battery-pack-detail-hint {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.3px;
}


/* Full battery detail popup. */
.battery-pack-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;

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

    padding: 20px;

    background: rgba(0,0,0,0.68);
}

.battery-pack-detail-panel {
    width: min(1050px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    padding: 18px;

    border: 3px solid var(--border);
    border-radius: 12px;

    background: var(--panel);
    color: var(--text);

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

.battery-pack-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.battery-pack-detail-title {
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.battery-pack-detail-subtitle {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
}

.battery-pack-detail-close {
    min-width: 110px;
    min-height: 42px;

    border: 2px solid var(--border);
    border-radius: 6px;

    background: var(--panel-secondary);
    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.battery-pack-detail-section-title {
    margin-top: 17px;
    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.3px;
}

.battery-pack-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.battery-pack-detail-item {
    min-width: 0;

    padding: 10px;

    border: 2px solid var(--border);
    border-radius: 7px;

    background: var(--panel-secondary);
}

.battery-pack-detail-item span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 900;
    line-height: 1.1;
}

.battery-pack-detail-item strong {
    display: block;

    margin-top: 5px;

    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
}

.battery-pack-cell-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;

    margin-bottom: 8px;
}

.battery-pack-cell-summary > div {
    padding: 9px 10px;

    border: 2px solid var(--border);
    border-radius: 7px;

    background: var(--panel-secondary);
}

.battery-pack-cell-summary span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 900;
}

.battery-pack-cell-summary strong {
    display: block;

    margin-top: 4px;

    font-size: 15px;
    font-weight: 900;
}

.battery-pack-cells {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(105px, 1fr));
    gap: 7px;
}

.battery-pack-cell {
    padding: 8px;

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

    background: var(--bg);

    text-align: center;
}

.battery-pack-cell span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 900;
}

.battery-pack-cell strong {
    display: block;

    margin-top: 3px;

    font-size: 13px;
    font-weight: 900;
}

.battery-pack-detail-empty {
    padding: 14px;

    color: var(--muted);

    font-weight: 900;
    text-align: center;
}

@media (max-width: 900px) {

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

}

/* LOADRUNNER_V12_BATTERY_DETAIL_END */



/* LOADRUNNER_V15_PI_HOME_FIT_START */
@media (max-width: 1100px) and (max-height: 620px) {
    .home-card { height: 305px; }
    .battery-home-card {
        height: 305px !important;
        padding: 8px 14px !important;
    }
    .battery-home-card .home-card-label { margin-top: 0 !important; }
    .battery-home-soc {
        margin-top: 2px !important;
        font-size: 58px !important;
    }
    .battery-runtime-block {
        width: 90% !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
    }
    .battery-runtime-title { font-size: 14px !important; }
    .battery-runtime-value {
        margin-top: 4px !important;
        font-size: 32px !important;
    }
    .battery-runtime-description {
        margin-top: 5px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }
    .battery-home-card .tap-hint {
        margin-top: 7px !important;
        font-size: 10px !important;
    }
}
/* LOADRUNNER_V15_PI_HOME_FIT_END */


/* ============================================================
   LOADRUNNER_TOUCH_SCROLLBARS_V17
   Larger scroll targets for the 10-inch touchscreen
   ============================================================ */

* {
    scrollbar-width: auto;
    scrollbar-color:
        var(--muted)
        var(--panel-secondary);
}

*::-webkit-scrollbar {
    width: 18px;
    height: 18px;
}

*::-webkit-scrollbar-track {
    background:
        var(--panel-secondary);
}

*::-webkit-scrollbar-thumb {
    background:
        var(--muted);

    border:
        3px solid
        var(--panel-secondary);

    border-radius:
        999px;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        var(--text);
}



/* ============================================================
   LOADRUNNER_FINISHED_PRODUCT_V18
   ============================================================ */
body:not(.technician-mode) .dev-data-source{display:none!important}
@media(max-height:620px){.battery-pack-detail-overlay{padding:5px!important}.battery-pack-detail-panel{width:calc(100vw - 10px)!important;max-height:calc(100vh - 10px)!important;overflow:hidden!important;padding:7px 9px!important;border-width:2px!important}.battery-pack-detail-header{gap:8px!important;padding-bottom:5px!important}.battery-pack-detail-title{font-size:19px!important}.battery-pack-detail-subtitle{margin-top:2px!important;font-size:8px!important}.battery-pack-detail-close{min-width:90px!important;min-height:34px!important;padding:4px 8px!important;font-size:11px!important}.battery-pack-detail-section-title{margin-top:6px!important;margin-bottom:4px!important;font-size:10px!important}.battery-pack-detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}.battery-pack-detail-item{padding:4px 6px!important;border-width:1px!important}.battery-pack-detail-item span{font-size:7px!important;line-height:1!important}.battery-pack-detail-item strong{margin-top:2px!important;font-size:11px!important;line-height:1!important}.battery-pack-cell-summary{gap:4px!important;margin-bottom:4px!important}.battery-pack-cell-summary>div{padding:4px 6px!important;border-width:1px!important}.battery-pack-cell-summary span{font-size:7px!important}.battery-pack-cell-summary strong{margin-top:2px!important;font-size:11px!important}.battery-pack-cells{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:3px!important}.battery-pack-cell{padding:3px!important}.battery-pack-cell span{font-size:7px!important}.battery-pack-cell strong{margin-top:1px!important;font-size:10px!important}}


/* ============================================================
   LOADRUNNER_SETTINGS_SCROLL_V19
   ============================================================ */

#page-container:has(> .settings-page) {
    min-height: 0;
    overflow: hidden;
}

.settings-page {
    height: 100%;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    padding-right: 7px;
    padding-bottom: 30px;
}


/* LOADRUNNER_BATTERY_HISTORY_LOADING_V219B */
.battery-history-loading-v219b{
    position:fixed;
    z-index:5000;
    inset:94px 0 55px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(242,243,244,.82)
}
[data-theme="dark"] .battery-history-loading-v219b{
    background:rgba(15,17,19,.82)
}
.battery-history-loading-box-v219b{
    min-width:330px;
    padding:20px 28px;
    border:3px solid var(--border);
    border-radius:12px;
    background:var(--panel);
    box-shadow:0 4px 18px rgba(0,0,0,.22);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    text-align:center
}
.battery-history-loading-box-v219b strong{
    color:var(--text);
    font-size:17px;
    font-weight:900
}
.battery-history-loading-box-v219b span{
    color:var(--muted);
    font-size:11px;
    font-weight:800
}
.battery-history-spinner-v219b{
    width:42px;
    height:42px;
    border:6px solid var(--panel-secondary);
    border-top-color:var(--green-dark);
    border-radius:50%;
    animation:battery-history-spin-v219b .8s linear infinite
}
@keyframes battery-history-spin-v219b{
    to{transform:rotate(360deg)}
}


/* LOADRUNNER_MAINTENANCE_UI_V1_START */
.maintenance-status-text{margin-top:5px;font-size:11px;font-weight:800;letter-spacing:.35px;color:var(--muted,#666)}
.maintenance-status-text.bad{color:#c40000}
.maintenance-reboot-button{background:#b52222!important;border-color:#8f1515!important;color:#fff!important}
.maintenance-confirm-overlay{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72)}
.maintenance-confirm-panel{width:min(520px,92vw);padding:24px;border:2px solid #b52222;border-radius:10px;background:var(--panel,#fff);color:var(--text,#111);box-shadow:0 18px 55px rgba(0,0,0,.35)}
.maintenance-confirm-title{font-size:22px;font-weight:900;letter-spacing:.6px}
.maintenance-confirm-text{margin-top:12px;line-height:1.45;font-size:14px}
.maintenance-confirm-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}
/* LOADRUNNER_MAINTENANCE_UI_V1_END */



/* LOADRUNNER_SYSTEM_RECOVERY_TOGGLE_V1 */
.system-recovery-reboot-card {
    margin-top: 22px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid rgba(120, 120, 120, 0.28);
    border-radius: 16px;
    background: var(--card-bg, rgba(255, 255, 255, 0.78));
}

.system-recovery-reboot-copy {
    min-width: 0;
}

.system-recovery-reboot-title {
    font-weight: 800;
    letter-spacing: 0.04em;
    font-size: 0.98rem;
}

.system-recovery-reboot-description {
    margin-top: 7px;
    max-width: 760px;
    line-height: 1.4;
    opacity: 0.78;
}

.system-recovery-reboot-status {
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.system-recovery-reboot-status.bad {
    color: var(--bad-color, #b3261e);
}

.system-recovery-switch {
    position: relative;
    display: inline-flex;
    width: 64px;
    height: 34px;
    flex: 0 0 64px;
    cursor: pointer;
}

.system-recovery-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.system-recovery-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #777;
    border: 2px solid #222;
    transition: 0.16s ease;
}

.system-recovery-switch-slider::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #222;
    transition: 0.16s ease;
}

.system-recovery-switch input:checked + .system-recovery-switch-slider {
    background: #39d353;
}

.system-recovery-switch input:checked + .system-recovery-switch-slider::after {
    transform: translateX(29px);
}

.system-recovery-switch input:disabled + .system-recovery-switch-slider {
    opacity: 0.5;
    cursor: wait;
}

@media (max-width: 700px) {
    .system-recovery-reboot-card {
        align-items: flex-start;
    }
}


/* LOADRUNNER_SYSTEM_PAGE_SCROLL_V2 */
.system-page {
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    padding-right: 7px;
    padding-bottom: 92px;
}
/* LOADRUNNER_SYSTEM_SHORT_SCREEN_V3 */
@media (max-height: 700px) {

    .system-page {
        padding-bottom: 76px !important;
    }

    .system-summary-grid {
        gap: 8px !important;
    }

    .system-summary-card {
        min-height: 112px !important;
    }

    .system-summary-label {
        font-size: 0.72rem !important;
    }

    .system-summary-value {
        margin-top: 7px !important;
        font-size: 1.45rem !important;
    }

    .system-recovery-reboot-card {
        margin-top: 9px !important;
        padding: 10px 14px !important;
        gap: 14px !important;
        border-radius: 12px !important;
    }

    .system-recovery-reboot-title {
        font-size: 0.84rem !important;
    }

    .system-recovery-reboot-description {
        margin-top: 4px !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
    }

    .system-recovery-reboot-status {
        margin-top: 5px !important;
        font-size: 0.70rem !important;
    }

    .system-recovery-switch {
        width: 58px !important;
        height: 32px !important;
        flex-basis: 58px !important;
    }

    .system-recovery-switch-slider::after {
        width: 22px !important;
        height: 22px !important;
    }

    .system-recovery-switch input:checked
    + .system-recovery-switch-slider::after {
        transform: translateX(25px) !important;
    }
}

/* ============================================================
   LOADRUNNER_HEADER_CLOCK_V1
   Larger branding + centered date/time
   ============================================================ */

.topbar {
    position: relative;
}

.loadrunner-html-logo {
    gap: 10px !important;
    height: 60px !important;
}

.loadrunner-lr-mark {
    width: 53px !important;
    height: 53px !important;
}

.loadrunner-wordmark {
    font-size: 29px !important;
    letter-spacing: -1.25px !important;
}

.loadrunner-word-runner {
    color: var(--green) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    paint-order: normal !important;
}

.topbar-clock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    min-width: 245px;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    color: #111111;
    font-family:
        "DejaVu Sans",
        Arial,
        sans-serif;
    line-height: 1;
}

.topbar-clock-time {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.25px;
}

.topbar-clock-date {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.15px;
}

@media (min-width: 1200px) {
    .loadrunner-html-logo {
        gap: 12px !important;
    }

    .loadrunner-lr-mark {
        width: 60px !important;
        height: 60px !important;
    }

    .loadrunner-wordmark {
        font-size: 34px !important;
        letter-spacing: -1.5px !important;
    }

    .topbar-clock-time {
        font-size: 29px;
    }

    .topbar-clock-date {
        margin-top: 4px;
        font-size: 15px;
    }
}

@media (max-width: 1100px) {
    .topbar-clock {
        min-width: 220px;
    }

    .topbar-clock-time {
        font-size: 22px;
    }

    .topbar-clock-date {
        font-size: 12px;
    }
}

/* LOADRUNNER_HEADER_CLOCK_V1_END */


/* LOADRUNNER_UI_V4_TECH_PIN_LOGO_START */

.loadrunner-html-logo {
    cursor: pointer;
    user-select: none;
}

.loadrunner-html-logo:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
    border-radius: 6px;
}

.technician-code-card {
    align-items: center;
}

.technician-code-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.technician-code-controls {
    width: 300px;
    flex: 0 0 300px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.technician-code-input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 2px solid var(--border);
    border-radius: 7px;
    background: var(--panel-secondary);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.08em;
}

.technician-code-controls .settings-action-button {
    grid-column: 1 / -1;
    width: 100%;
}

.technician-code-result {
    min-height: 16px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
}

.technician-code-result.good {
    color: var(--green-dark);
}

.technician-code-result.bad {
    color: var(--critical);
}

/* LOADRUNNER_UI_V4_TECH_PIN_LOGO_END */

/* LOADRUNNER_UI_WATCHDOG_CSS_V1B */
.system-ui-watchdog-card {
    margin-top: 14px;
    padding: 15px 17px;
    border: 1px solid rgba(120,120,120,.28);
    border-radius: 14px;
    background: var(--panel);
}

.system-ui-watchdog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.system-ui-watchdog-title {
    font-size: .93rem;
    font-weight: 900;
    letter-spacing: .045em;
}

.system-ui-watchdog-description {
    margin-top: 4px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
}

.system-ui-watchdog-state {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--green-dark);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .03em;
}

.system-ui-watchdog-state.bad {
    color: var(--critical);
}

.system-ui-watchdog-stats {
    margin-top: 11px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}

.system-ui-watchdog-stat {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(120,120,120,.25);
    border-radius: 9px;
    background: var(--panel-secondary);
}

.system-ui-watchdog-stat span {
    display: block;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .035em;
}

.system-ui-watchdog-stat strong {
    display: block;
    margin-top: 3px;
    font-size: 1.25rem;
    font-weight: 900;
}

.system-ui-last-event {
    margin-top: 9px;
    color: var(--muted);
    font-size: .70rem;
    font-weight: 800;
    line-height: 1.3;
}

@media (max-width:700px) {
    .system-ui-watchdog-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .system-ui-watchdog-heading {
        flex-direction: column;
        gap: 7px;
    }
}

@media (max-height:700px) {
    .system-ui-watchdog-card {
        margin-top: 8px;
        padding: 9px 11px;
        border-radius: 10px;
    }

    .system-ui-watchdog-description {
        font-size: .70rem;
    }

    .system-ui-watchdog-stats {
        margin-top: 7px;
        gap: 5px;
    }

    .system-ui-watchdog-stat {
        padding: 5px 7px;
    }

    .system-ui-watchdog-stat strong {
        font-size: 1rem;
    }

    .system-ui-last-event {
        margin-top: 6px;
        font-size: .64rem;
    }
}

/* LOADRUNNER_SYSTEM_EVENT_LOG_CSS_V2 */
.system-event-log-card {
    margin-top: 14px;
    padding: 15px 17px;
    border: 1px solid rgba(120,120,120,.28);
    border-radius: 14px;
    background: var(--panel);
}

.system-event-log-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.system-event-log-title {
    font-size: .93rem;
    font-weight: 900;
    letter-spacing: .045em;
}

.system-event-log-description {
    margin-top: 4px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
}

.system-event-log-refresh {
    flex: 0 0 auto;
    min-width: 82px;
    min-height: 34px;
    padding: 5px 10px;
    border: 2px solid var(--border);
    border-radius: 7px;
    background: var(--panel-secondary);
    color: var(--text);
    font-size: .68rem;
    font-weight: 900;
}

.system-event-log-refresh:disabled {
    opacity: .55;
}

.system-event-log-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 9px 10px;
    border: 1px solid rgba(120,120,120,.25);
    border-radius: 9px;
    background: var(--panel-secondary);
}

.system-event-severity-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 13px;
}

.system-event-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

.system-event-filter-check input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--green);
}

.system-event-range-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 900;
}

.system-event-range-wrap select {
    min-height: 34px;
    padding: 4px 8px;
    border: 2px solid var(--border);
    border-radius: 7px;
    background: var(--panel);
    color: var(--text);
    font-size: .68rem;
    font-weight: 900;
}

.system-event-log-status {
    margin-top: 10px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .025em;
    line-height: 1.3;
}

.system-event-log-status.bad {
    color: var(--critical);
}

.system-event-log-list {
    margin-top: 9px;
    max-height: 390px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(120,120,120,.25);
    border-radius: 9px;
    background: var(--panel-secondary);
}

.system-event-row {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(120,120,120,.22);
    background: var(--panel);
}

.system-event-row:last-child {
    border-bottom: 0;
}

.system-event-header {
    display: grid;
    grid-template-columns:
        minmax(145px,auto)
        auto
        minmax(140px,1fr)
        auto;
    align-items: center;
    gap: 7px;
}

.system-event-time,
.system-event-type {
    min-width: 0;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
}

.system-event-type {
    overflow-wrap: anywhere;
}

.system-event-severity {
    padding: 3px 6px;
    border: 1px solid currentColor;
    border-radius: 5px;
    font-size: .61rem;
    font-weight: 900;
    text-align: center;
}

.system-event-severity.severity-info {
    color: var(--green-dark);
}

.system-event-severity.severity-warning {
    color: var(--warning);
}

.system-event-severity.severity-critical,
.system-event-severity.severity-error {
    color: var(--critical);
}

.system-event-repeat {
    min-width: 34px;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--panel-secondary);
    color: var(--text);
    font-size: .63rem;
    font-weight: 900;
    text-align: center;
}

.system-event-summary {
    margin-top: 5px;
    font-size: .77rem;
    font-weight: 900;
    line-height: 1.25;
}

.system-event-occurrence,
.system-event-details,
.system-event-action {
    margin-top: 4px;
    color: var(--muted);
    font-size: .67rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.system-event-occurrence {
    font-weight: 900;
}

.system-event-empty {
    padding: 18px 12px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-align: center;
}

@media (max-width:700px) {
    .system-event-log-card {
        margin-top: 8px;
        padding: 10px 11px;
        border-radius: 10px;
    }

    .system-event-log-heading {
        align-items: stretch;
    }

    .system-event-log-description {
        font-size: .70rem;
    }

    .system-event-log-refresh {
        min-width: 74px;
        min-height: 38px;
    }

    .system-event-log-filters {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

    .system-event-severity-filters {
        justify-content: space-between;
    }

    .system-event-filter-check {
        min-height: 34px;
    }

    .system-event-range-wrap {
        justify-content: space-between;
    }

    .system-event-range-wrap select {
        min-width: 145px;
        min-height: 40px;
    }

    .system-event-log-list {
        max-height: 55vh;
    }

    .system-event-header {
        grid-template-columns: 1fr auto auto;
        gap: 5px 7px;
    }

    .system-event-type {
        grid-column: 1 / -1;
    }

    .system-event-summary {
        font-size: .74rem;
    }
}

@media (max-height:700px) {
    .system-event-log-card {
        margin-top: 8px;
        padding: 9px 11px;
    }

    .system-event-log-filters {
        margin-top: 8px;
        padding: 6px 8px;
    }

    .system-event-log-list {
        max-height: 280px;
    }
}



/* LOADRUNNER_BATTERY_KWH_V5 */
.battery-capacity-kwh {
    display: block;
    margin-top: 3px;
    font-size: 0.72em;
    line-height: 1.15;
    font-weight: 800;
    color: var(--muted);
}