.atelier-live-page {
    min-height: calc(100vh - 82px);
}

.atelier-live-hero {
    height: 100%;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--ct-secondary-bg);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.atelier-live-kicker {
    color: var(--bs-primary);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.atelier-live-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.atelier-live-stat {
    height: 100%;
    min-height: 84px;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--ct-secondary-bg);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.atelier-live-stat span {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .82rem;
    margin-bottom: .35rem;
}

.atelier-live-stat strong {
    display: block;
    color: var(--bs-heading-color);
    font-size: 1.35rem;
    line-height: 1.1;
}

.atelier-live-station-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.atelier-live-station-card {
    min-height: 104px;
    padding: .76rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    color: var(--bs-body-color);
    background: var(--ct-secondary-bg);
    text-align: left;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.atelier-live-station-card:hover,
.atelier-live-station-card.active {
    border-color: color-mix(in srgb, var(--bs-primary) 58%, var(--bs-border-color));
    box-shadow: 0 12px 26px rgba(15, 23, 42, .09);
}

.atelier-live-station-card.active {
    transform: translateY(-1px);
}

.atelier-live-station-status,
.atelier-live-status {
    display: inline-flex;
    align-items: center;
    margin-bottom: .45rem;
    padding: .16rem .46rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}

.atelier-live-station-card-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.05rem;
}

.atelier-live-station-card-title strong {
    color: var(--bs-heading-color);
    font-size: .9rem;
    line-height: 1.2;
}

.atelier-live-station-card-title span {
    color: var(--bs-heading-color);
    font-size: .9rem;
    font-weight: 700;
}

.atelier-live-station-card-meta {
    display: flex;
    justify-content: space-between;
    gap: .65rem;
    color: var(--bs-secondary-color);
    font-size: .74rem;
    margin: .42rem 0 .5rem;
}

.atelier-live-station-progress {
    height: .42rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
}

.atelier-live-station-progress .progress-bar,
.atelier-live-load .progress-bar {
    border-radius: 999px;
}

.atelier-live-station-progress .bg-success,
.atelier-live-load .bg-success {
    background-color: #2f855a !important;
}

.atelier-live-station-progress .bg-warning,
.atelier-live-load .bg-warning {
    background-color: #b7791f !important;
}

.atelier-live-station-progress .bg-danger,
.atelier-live-load .bg-danger {
    background-color: #9f3a38 !important;
}

.atelier-live-workspace {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    gap: 0;
    height: clamp(760px, calc(100vh - 160px), 980px);
    min-height: 760px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .09);
    transition: grid-template-columns .32s ease;
}

[data-bs-theme="dark"] .atelier-live-workspace {
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.atelier-live-workspace.has-selection {
    grid-template-columns: minmax(0, 1fr) minmax(460px, 34vw);
}

.atelier-live-scene-shell {
    position: relative;
    height: 100%;
    min-height: 0;
}

.atelier-live-scene {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
}

.atelier-live-scene canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.atelier-live-scene-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .48rem;
    min-width: 332px;
    padding: .68rem .78rem;
    border: 1px solid rgba(148, 163, 184, .36);
    border-radius: 8px;
    color: #f8fafc;
    background: rgba(30, 41, 59, .76);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
    backdrop-filter: blur(12px);
}

.atelier-live-workspace.has-selection .atelier-live-scene-controls {
    display: none;
}

.atelier-live-scene-control-row {
    display: grid;
    grid-template-columns: 4.6rem 1rem minmax(132px, 1fr) 2.8rem;
    align-items: center;
    gap: .5rem;
}

.atelier-live-scene-controls-title {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.atelier-live-scene-controls i {
    color: rgba(248, 250, 252, .78);
    font-size: 1rem;
}

.atelier-live-control-range {
    width: 100%;
    margin: 0;
}

.atelier-live-control-range::-webkit-slider-thumb {
    background: #f8fafc;
}

.atelier-live-control-range::-webkit-slider-runnable-track {
    background-color: rgba(248, 250, 252, .32);
}

.atelier-live-scene-control-value {
    color: rgba(248, 250, 252, .9);
    font-size: .76rem;
    font-weight: 700;
    text-align: right;
}

.atelier-live-legend {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    padding: .58rem .72rem;
    border: 1px solid rgba(148, 163, 184, .36);
    border-radius: 8px;
    color: #f8fafc;
    background: rgba(30, 41, 59, .78);
    backdrop-filter: blur(12px);
}

.atelier-live-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
}

.legend-dot {
    display: inline-block;
    width: .56rem;
    height: .56rem;
    border-radius: 50%;
}

.legend-dot.normal { background: #2f855a; }
.legend-dot.warning { background: #b7791f; }
.legend-dot.danger { background: #9f3a38; }
.legend-dot.down { background: #6b7280; }

.atelier-live-panel {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 0;
    border-left: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-body-bg) 94%, transparent);
    backdrop-filter: blur(16px);
    overflow: auto;
    transition: opacity .2s ease;
}

.atelier-live-panel.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .atelier-live-panel.is-selected {
        background: var(--ct-secondary-bg);
    }

.atelier-live-station-presentation {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.05rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--ct-secondary-bg);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.atelier-live-empty {
    max-width: 260px;
    text-align: center;
}

.atelier-live-empty i {
    display: block;
    color: var(--bs-primary);
    font-size: 2.4rem;
    margin-bottom: .75rem;
}

.atelier-live-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.atelier-live-panel-header h4 {
    color: var(--bs-heading-color);
    font-size: 1.18rem;
    line-height: 1.2;
}

.atelier-live-status.is-normal,
.atelier-live-station-status.is-normal {
    color: #166534;
    background: rgba(47, 133, 90, .12);
}

.atelier-live-status.is-warning,
.atelier-live-station-status.is-warning {
    color: #92400e;
    background: rgba(183, 121, 31, .14);
}

.atelier-live-status.is-danger,
.atelier-live-station-status.is-danger {
    color: #991b1b;
    background: rgba(159, 58, 56, .13);
}

.atelier-live-load {
    padding: .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.atelier-live-focus-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    margin-bottom: 1rem;
}

.atelier-live-focus-summary > div {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
}

.atelier-live-focus-summary span,
.atelier-live-focus-summary small {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .74rem;
}

.atelier-live-focus-summary strong {
    display: block;
    color: var(--bs-heading-color);
    font-size: 1.55rem;
    line-height: 1.1;
    margin: .28rem 0 .18rem;
}

.atelier-live-load .progress {
    height: .55rem;
    border-radius: 999px;
}

.atelier-live-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-bottom: 1rem;
}

.atelier-live-panel-grid div {
    padding: .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.atelier-live-panel-grid span,
.atelier-live-maintenance span {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    margin-bottom: .25rem;
}

.atelier-live-panel-grid strong,
.atelier-live-maintenance strong {
    color: var(--bs-heading-color);
    font-size: 1rem;
}

.atelier-live-maintenance {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.atelier-live-maintenance i {
    color: var(--bs-primary);
    font-size: 1.35rem;
}

.atelier-live-section-title {
    color: var(--bs-secondary-color);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.atelier-live-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
    margin-bottom: .5rem;
}

.atelier-live-item.is-expected {
    opacity: .76;
}

.atelier-live-item strong,
.atelier-live-item span,
.atelier-live-item small {
    display: block;
}

.atelier-live-item strong {
    color: var(--bs-heading-color);
    font-size: .86rem;
}

.atelier-live-item span {
    color: var(--bs-secondary-color);
    font-size: .78rem;
}

.atelier-live-item small {
    color: var(--bs-tertiary-color);
    font-size: .72rem;
}

@media (max-width: 1199.98px) {
    .atelier-live-workspace,
    .atelier-live-workspace.has-selection {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 760px;
    }

    .atelier-live-scene-shell,
    .atelier-live-scene {
        height: 760px;
        min-height: 760px;
    }

    .atelier-live-panel {
        height: auto;
        min-height: auto;
        border-left: 0;
        border-top: 1px solid var(--bs-border-color);
    }
}

@media (max-width: 767.98px) {
    .atelier-live-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .atelier-live-actions {
        width: 100%;
    }

    .atelier-live-actions .btn {
        flex: 1 1 0;
    }

    .atelier-live-station-board {
        display: flex;
        overflow-x: auto;
        padding-bottom: .2rem;
    }

    .atelier-live-station-card {
        flex: 0 0 230px;
    }

    .atelier-live-scene-shell,
    .atelier-live-scene,
    .atelier-live-workspace {
        height: auto;
        min-height: 620px;
    }

    .atelier-live-scene-shell,
    .atelier-live-scene {
        height: 620px;
    }

    .atelier-live-scene-controls {
        left: 1rem;
        right: 1rem;
        min-width: 0;
    }

    .atelier-live-scene-control-row {
        grid-template-columns: 4.6rem 1rem minmax(0, 1fr) 2.8rem;
    }

    .atelier-live-focus-summary {
        grid-template-columns: 1fr;
    }

}