* {
    box-sizing: border-box;
}


:root {

    --bg: #07101c;

    --panel: #0c1726;

    --panel-2: #101d2e;

    --border: #22344a;

    --text: #e8eef5;

    --muted: #8ea0b6;

    --blue: #2d6cdf;

    --blue-hover: #3b7bf0;

    --red: #b83b43;

    --red-hover: #cc4851;

    --green: #36bf78;

    --orange: #d9a441;
}


html,
body {

    margin: 0;

    min-height: 100%;

    background: var(--bg);

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


body {

    min-width: 320px;

}


button,
input {

    font: inherit;

}


a {

    color: #75a7ff;

    text-decoration: none;

}


a:hover {

    text-decoration: underline;

}


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

.topbar {

    min-height: 66px;

    padding:
        0
        28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: #0b1523;

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

}


.brand {

    min-width: 0;

    display: flex;

    align-items: baseline;

    gap: 14px;

    flex-wrap: wrap;

}


.brand strong {

    font-size: 20px;

    letter-spacing: .04em;

}


.brand span,
.card p,
.preview-note {

    color: var(--muted);

}


.topnav {

    display: flex;

    gap: 18px;

    flex-shrink: 0;

}


/* =========================================================
   MAIN
   ========================================================= */

.dashboard-main {

    width: min(
        1700px,
        calc(100% - 28px)
    );

    margin:
        20px
        auto
        50px;

}


.dashboard-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(360px, .75fr);

    gap: 16px;

    align-items: start;

}


.side-column {

    min-width: 0;

    display: grid;

    gap: 18px;

}


/* =========================================================
   CARD
   ========================================================= */

.card {

    min-width: 0;

    background:
        var(--panel);

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

    border-radius: 14px;

    padding: 20px;

}


.card-head {

    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 18px;

    margin-bottom: 16px;

}


.card-head.compact {

    margin-bottom: 14px;

}


h1,
h2,
p {

    margin-top: 0;

}


h1 {

    margin-bottom: 6px;

    font-size: 22px;

}


h2 {

    margin-bottom: 6px;

    font-size: 18px;

}


.card p {

    margin-bottom: 0;

    line-height: 1.45;

    font-size: 14px;

}


/* =========================================================
   ONLINE / OFFLINE
   ========================================================= */

.status-pill {

    flex-shrink: 0;

    padding:
        8px
        11px;

    border-radius: 999px;

    font-weight: 700;

    font-size: 13px;

    border:
        1px
        solid
        currentColor;

}


.status-pill.online {

    color:
        var(--green);

    background:
        rgba(
            54,
            191,
            120,
            .09
        );

}


.status-pill.offline {

    color: #ef6a72;

    background:
        rgba(
            184,
            59,
            67,
            .11
        );

}


/* =========================================================
   PREVIEW
   ========================================================= */

.preview-stage {

    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background: #02060c;

    border:
        1px
        solid
        #1c2b3d;

    border-radius: 11px;

    user-select: none;

}


.preview-stage > img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    background: #02060c;

}


.preview-label {

    position: absolute;

    left: 10px;

    bottom: 10px;

    padding:
        5px
        7px;

    border-radius: 6px;

    background:
        rgba(
            0,
            0,
            0,
            .65
        );

    color: #b8c6d5;

    font-size: 10px;

    letter-spacing: .08em;

    pointer-events: none;

}


.preview-note {

    margin:
        11px
        0
        0;

    font-size: 12px;

    line-height: 1.5;

}


/* =========================================================
   OVERLAY MARKER
   ========================================================= */

.overlay-marker {

    position: absolute;

    z-index: 3;

    min-width: 16px;

    min-height: 16px;

    border:
        2px
        dashed
        #f4c84a;

    background:
        rgba(
            244,
            200,
            74,
            .05
        );

    cursor: grab;

    touch-action: none;

}


.overlay-marker.dragging {

    cursor: grabbing;

    border-style: solid;

}


.overlay-marker span {

    position: absolute;

    top: -26px;

    left: 0;

    padding:
        4px
        7px;

    border-radius: 5px;

    background: #c49c2d;

    color: #111;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

}


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

.control-buttons {

    display: grid;

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

    gap: 8px;

}


.btn {

    min-height: 42px;

    border: 0;

    border-radius: 8px;

    padding:
        10px
        13px;

    cursor: pointer;

    color: white;

    font-weight: 700;

    transition:
        background
        .15s
        ease,
        opacity
        .15s
        ease;

}


.btn:disabled {

    cursor:
        not-allowed;

    opacity: .45;

}


.btn-primary {

    background:
        var(--blue);

}


.btn-primary:hover:not(:disabled) {

    background:
        var(--blue-hover);

}


.btn-danger {

    background:
        var(--red);

}


.btn-danger:hover:not(:disabled) {

    background:
        var(--red-hover);

}


.btn-secondary {

    background: #33465d;

}


.btn-secondary:hover:not(:disabled) {

    background: #40566f;

}


.btn-block {

    width: 100%;

}


/* =========================================================
   MESSAGES
   ========================================================= */

.message {

    min-height: 20px;

    margin-top: 10px;

    color: var(--muted);

    font-size: 13px;

}


.message.success {

    color:
        var(--green);

}


.message.error-text {

    color: #ef7b82;

}


/* =========================================================
   METRICS
   ========================================================= */

.metrics-grid {

    display: grid;

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

    gap: 9px;

}


.metric {

    min-width: 0;

    padding: 12px;

    background:
        var(--panel-2);

    border:
        1px
        solid
        #1c2d42;

    border-radius: 9px;

}


.metric-wide {

    grid-column:
        1 / -1;

}


.metric span,
.metric small {

    display: block;

    color: var(--muted);

}


.metric span {

    margin-bottom: 5px;

    font-size: 12px;

}


.metric strong {

    display: block;

    margin-bottom: 3px;

    font-size: 20px;

}


.metric small {

    font-size: 11px;

}


/* =========================================================
   SERVICES
   ========================================================= */

.service-list {

    display: grid;

    gap: 9px;

}


.service-row {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 12px;

    padding:
        10px
        11px;

    background:
        var(--panel-2);

    border-radius: 8px;

}


.service-row span {

    color: #c9d3de;

    font-size: 13px;

}


.service-state {

    font-size: 12px;

}


.service-state.ok {

    color:
        var(--green);

}


.service-state.bad {

    color: #ef7078;

}


.service-state.waiting {

    color:
        var(--orange);

}


/* =========================================================
   OVERLAY PANEL
   ========================================================= */

.overlay-card {

    margin-top: 18px;

}


.overlay-layout {

    display: grid;

    grid-template-columns:
        300px
        minmax(
            0,
            1fr
        );

    gap: 22px;

}


.overlay-thumb-wrap {

    min-height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 12px;

    background: #07101b;

    border:
        1px
        solid
        #22334a;

    border-radius: 10px;

}


.overlay-thumb-wrap img {

    display: block;

    max-width: 100%;

    max-height: 220px;

    object-fit: contain;

}


.overlay-empty {

    color:
        var(--muted);

    text-align: center;

    font-size: 13px;

}


/* =========================================================
   UPLOAD
   ========================================================= */

.upload-form {

    margin-top: 12px;

    display: grid;

    gap: 9px;

}


.file-picker {

    display: block;

    position: relative;

}


.file-picker input {

    position: absolute;

    width: 1px;

    height: 1px;

    opacity: 0;

    pointer-events: none;

}


.file-picker span {

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        10px
        13px;

    border:
        1px
        dashed
        #40546d;

    border-radius: 8px;

    color: #c7d3df;

    cursor: pointer;

}


.file-picker span:hover {

    border-color: #5d7da3;

    background: #0d1b2b;

}


.overlay-upload-panel
>
.btn-block {

    margin-top: 9px;

}


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

.overlay-settings {

    min-width: 0;

}


.field-grid {

    display: grid;

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

    gap: 15px;

}


.field {

    display: block;

    min-width: 0;

}


.field > span {

    display: block;

    margin-bottom: 7px;

    color: #c9d4df;

    font-size: 13px;

}


.range-row {

    display: grid;

    grid-template-columns:
        minmax(
            100px,
            1fr
        )
        100px
        28px;

    gap: 9px;

    align-items: center;

}


input[type="number"] {

    width: 100%;

    min-height: 40px;

    padding:
        8px
        10px;

    border:
        1px
        solid
        #31445b;

    border-radius: 7px;

    outline: none;

    background: #091421;

    color: #eef3f8;

}


input[type="number"]:focus {

    border-color: #517fc2;

}


input[type="range"] {

    width: 100%;

}


.range-row em {

    color:
        var(--muted);

    font-style: normal;

    font-size: 12px;

}


.compact-field input {

    max-width: 180px;

}


/* =========================================================
   ACTIONS
   ========================================================= */

.overlay-actions {

    margin-top: 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}


.inline-message {

    margin: 0;

}


.drag-help {

    margin-top: 16px;

    padding:
        12px
        14px;

    background: #0a1624;

    border-left:
        3px
        solid
        #b38f32;

    border-radius: 7px;

    color: #aebdcc;

    font-size: 13px;

    line-height: 1.5;

}


/* =========================================================
   SWITCH
   ========================================================= */

.switch-wrap {

    display:
        inline-flex;

    align-items: center;

    gap: 9px;

    cursor: pointer;

    user-select: none;

    color: #cfd8e2;

    font-size: 13px;

}


.switch-wrap input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.switch {

    position: relative;

    width: 42px;

    height: 23px;

    border-radius: 999px;

    background: #37475b;

    transition:
        background
        .15s
        ease;

}


.switch::after {

    content: "";

    position: absolute;

    width: 17px;

    height: 17px;

    left: 3px;

    top: 3px;

    border-radius: 50%;

    background: white;

    transition:
        transform
        .15s
        ease;

}


.switch-wrap
input:checked
+
.switch {

    background: #267a53;

}


.switch-wrap
input:checked
+
.switch::after {

    transform:
        translateX(
            19px
        );

}


/* =========================================================
   LOGIN
   ========================================================= */

.center {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


.login {

    width: min(
        400px,
        94vw
    );

    text-align: center;

}


.login input {

    width: 100%;

    min-height: 44px;

    margin:
        7px
        0;

    padding:
        11px
        12px;

    border:
        1px
        solid
        #33465c;

    border-radius: 8px;

    background: #091421;

    color: white;

}


.login button {

    width: 100%;

    min-height: 44px;

    margin-top: 8px;

    border: 0;

    border-radius: 8px;

    background:
        var(--blue);

    color: white;

    font-weight: 700;

    cursor: pointer;

}


.error {

    margin-bottom: 10px;

    padding: 10px;

    border-radius: 8px;

    background: #421d23;

    color: #f09ba1;

}


/* =========================================================
   LOGS
   ========================================================= */

main:not(.dashboard-main) {

    width: min(
        1100px,
        calc(100% - 32px)
    );

    margin:
        25px
        auto;

}


pre {

    white-space: pre-wrap;

    overflow: auto;

    max-height: 70vh;

    margin: 0;

    padding: 15px;

    border-radius: 8px;

    background: #03070d;

    color: #cfd8e2;

}


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

@media (
    max-width: 1050px
) {

    .dashboard-grid {

        grid-template-columns:
            1fr;

    }


    .side-column {

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

    }


    .side-column
    .card:last-child {

        grid-column:
            1 / -1;

    }

}


@media (
    max-width: 760px
) {

    .topbar {

        padding:
            14px
            16px;

        align-items:
            flex-start;

    }


    .brand {

        display: grid;

        gap: 3px;

    }


    .dashboard-main {

        width: min(
            calc(100% - 20px),
            1500px
        );

        margin-top: 12px;

    }


    .side-column,
    .field-grid,
    .overlay-layout {

        grid-template-columns:
            1fr;

    }


    .control-buttons {

        grid-template-columns:
            1fr;

    }


    .card-head {

        flex-direction:
            column;

    }


    .range-row {

        grid-template-columns:
            1fr
            86px
            24px;

    }

}


@media (
    max-width: 480px
) {

    .metrics-grid {

        grid-template-columns:
            1fr;

    }


    .metric-wide {

        grid-column: auto;

    }


    .topnav {

        gap: 10px;

    }

}
/* =========================================================
   V4 — LIVE PAGE / NAVIGATION
   ========================================================= */

.brand-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .06em;
}

.brand-subtitle {
    color: var(--muted);
    font-size: 13px;
}

.topnav-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: #b9c8d9;
    text-decoration: none;
}

.topnav-link:hover,
.topnav-link.active {
    background: #132238;
    color: #ffffff;
    text-decoration: none;
}

.logout-link {
    color: #ef8a91;
}

.live-page {
    max-width: 1700px;
}

.live-hero {
    margin-bottom: 18px;
}

.live-preview-stage {
    max-height: 820px;
}

.preview-live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 6px 9px;
    border-radius: 7px;
    background: rgba(3, 9, 16, .78);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #e8eef5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    pointer-events: none;
}

.preview-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.live-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.live-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.live-link-btn:hover {
    text-decoration: none;
}

.live-toolbar-message {
    flex: 1 1 280px;
    margin-top: 0;
}

.offline-notice {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #33465d;
    border-radius: 10px;
    background: #0b1928;
    color: #b8c8d8;
    font-size: 13px;
    line-height: 1.5;
}

.offline-notice strong {
    color: #e5ebf0;
}

.live-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.service-row > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.service-row strong {
    font-size: 13px;
}

.service-row small {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 1100px) {
    .live-control-grid {
        grid-template-columns: 1fr 1fr;
    }

    .live-control-grid .card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .live-control-grid {
        grid-template-columns: 1fr;
    }

    .live-control-grid .card:last-child {
        grid-column: auto;
    }

    .preview-info {
        align-items: flex-start;
        flex-direction: column;
    }

    .live-toolbar .btn,
    .live-link-btn {
        width: 100%;
    }
}