/* ===== LDCloud-style dark theme override ===== */
:root {
    --main-bg-color: #0b1220 !important;
    --stream-bg-color: #0b1220 !important;
    --shell-bg-color: #000000 !important;
    --text-shadow-color: #101a2e !important;
    --header-bg-color: #0f1a2e !important;
    --controls-bg-color: rgba(15, 26, 46, 0.92) !important;
    --control-buttons-bg-color: transparent !important;
    --text-color: #e6edf7 !important;
    --text-color-light: #8fa3bf !important;
    --link-color: #4da3ff !important;
    --link-color-light: #2b6cb0 !important;
    --link-color_visited: #7c9fff !important;
    --link-color_visited-light: #4c5fd5 !important;
    --svg-checkbox-bg-color: #22c55e !important;
    --svg-button-fill: #e6edf7 !important;
    --kill-button-hover-color: #ef4444 !important;
    --url-color: #8fa3bf !important;
    --button-text-color: #4da3ff !important;
    --button-border-color: #24334d !important;
    --progress-background-color: rgba(77, 163, 255, 0.25) !important;
    --progress-background-error-color: rgba(239, 68, 68, 0.25) !important;
    --device-list-stripe-color: #101a2e !important;
}

html, body {
    background: #0b1220 !important;
    font-family: 'Segoe UI', 'Noto Kufi Arabic', Tahoma, sans-serif !important;
}

/* ===== Stream page: full-screen immersive phone ===== */
body.stream {
    background: radial-gradient(ellipse at center, #16233d 0%, #0b1220 70%) !important;
    overflow: hidden;
}

/* Device view centered with phone-like frame */
body.stream .device-view {
    float: none !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 14px;
}

body.stream .video {
    float: none !important;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 0 0 3px #1e2c47, 0 25px 80px rgba(0, 0, 0, 0.65), 0 0 120px rgba(56, 130, 246, 0.15);
    background: #000;
}

/* Fit phone screen within viewport height on small screens */
@media (max-height: 2000px) {
    body.stream .video {
        height: 92vh !important;
        width: calc(92vh * 1080 / 1920) !important;
        max-width: 92vw !important;
    }
    body.stream .video .video-layer,
    body.stream .video .touch-layer,
    body.stream .video canvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
}

/* Control buttons: floating glassmorphism bar */
body.stream .control-buttons-list {
    float: none !important;
    width: 3.4rem !important;
    background: rgba(13, 22, 40, 0.72) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(77, 163, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

body.stream .control-button {
    background: rgba(77, 163, 255, 0.08) !important;
    border-radius: 12px;
    opacity: 0.9;
    transition: all 0.18s ease;
}

body.stream .control-button:hover {
    background: rgba(77, 163, 255, 0.28) !important;
    transform: scale(1.12);
    opacity: 1;
}

body.stream .control-button > svg {
    fill: #cfe3ff !important;
}

/* ===== Device list page: dark cards ===== */
body.list {
    background: linear-gradient(160deg, #0b1220 0%, #101d33 100%) !important;
}

.device-list .device {
    background: #101a2e !important;
    border: 1px solid #1e2c47 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

.header, .device-list-header {
    background: rgba(15, 26, 46, 0.85) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #1e2c47 !important;
}

a { color: #4da3ff !important; }
a:visited { color: #7c9fff !important; }

button, .button {
    border-radius: 10px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0b1220; }
::-webkit-scrollbar-thumb { background: #24334d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #35507a; }