/* ============================================================
           DESIGN TOKENS — Broadcast Control Room Theme
        ============================================================ */
        html {
            scroll-behavior: smooth;
        }
        
        :root {
            --bg:          #0b0d11;
            --bg-2:        #0e1117;
            --panel:       #131720;
            --panel-2:     #171c26;
            --border:      rgba(255, 255, 255, 0.08);
            --border-hi:   rgba(14, 165, 233, 0.4);
            --primary:     #0ea5e9;
            --primary-dim: rgba(14, 165, 233, 0.12);
            --accent:      #10b981;
            --accent-dim:  rgba(16, 185, 129, 0.12);
            --danger:      #ef4444;
            --danger-dim:  rgba(239, 68, 68, 0.12);
            --warn:        #f59e0b;
            --text:        #e2e8f0;
            --text-2:      #94a3b8;
            --text-3:      #475569;
            --glow-blue:   none;
            --radius-sm:   6px;
            --radius:      10px;
            --radius-lg:   16px;
            --sidebar-w:   265px;
            --header-h:    56px;
            --transition:  all 0.2s ease;
        }

        
        /* Global Custom Sleek Dark Scrollbars */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
        }
        *::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        *::-webkit-scrollbar-track {
            background: transparent;
        }
        *::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            transition: background 0.2s ease;
        }
        *::-webkit-scrollbar-thumb:hover {
            background: rgba(56, 189, 248, 0.5);
        }
        *::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* Specific scrollbar styling for textarea to hide ugly Windows scrollbar when empty/short */
        textarea#support-chat-input::-webkit-scrollbar {
            width: 4px;
        }
        textarea#support-chat-input {
            scrollbar-width: none; /* Hide on Firefox until needed */
        }
        textarea#support-chat-input:focus {
            scrollbar-width: thin;
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ============================================================
           LOADER
        ============================================================ */
        #loader {
            position: fixed; inset: 0;
            background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            z-index: 9999;
        }
        .spinner {
            width: 40px; height: 40px;
            border: 2px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

        /* ============================================================
           AUTH
        ============================================================ */
        #auth-view {
            display: flex; align-items: center; justify-content: center;
            min-height: 100vh; padding: 2rem;
        }
        .auth-card {
            width: 100%; max-width: 420px;
            background: var(--panel);
            border: 1px solid var(--border-hi);
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            box-shadow: var(--glow-blue), 0 32px 64px rgba(0,0,0,0.6);
            animation: fadeUp 0.5s ease;
        }
        .logo-box {
            font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em;
            color: #f59e0b;
            margin-bottom: 0.3rem;
        }
        .auth-subtitle { font-size: 0.85rem; color: var(--text-2); margin-bottom: 2rem; }

        /* ============================================================
           FORM CONTROLS
        ============================================================ */
        input, select, textarea {
            width: 100%;
            padding: 0.65rem 0.9rem;
            background: var(--bg-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-family: 'Outfit', sans-serif;
            font-size: 0.9rem;
            outline: none;
            transition: var(--transition);
            margin-bottom: 0.75rem;
        }
        input:focus, select:focus, textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
        }

        /* ============================================================
           BUTTONS
        ============================================================ */
        .btn {
            display: inline-flex; align-items: center; gap: 0.4rem;
            padding: 0.55rem 1.1rem;
            border-radius: var(--radius-sm);
            font-family: 'Outfit', sans-serif;
            font-weight: 600; font-size: 0.85rem;
            cursor: pointer; border: none;
            transition: var(--transition);
            white-space: nowrap;
        }
        .btn-primary {
            background: #2563eb; 
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }
        .btn-primary:hover { 
            background: #1d4ed8; 
            transform: translateY(-1px); 
        }

        .btn-ghost {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-2);
        }
        .btn-ghost:hover { border-color: var(--border-hi); color: var(--text); background: var(--panel-2); }

        .btn-danger  { background: var(--danger-dim); border: 1px solid var(--danger); color: var(--danger); }
        .btn-success { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); }
        .btn-warn    { background: rgba(245,158,11,.15); border: 1px solid var(--warn); color: var(--warn); }

        .btn-google {
            background: #fff; color: #1e293b;
            width: 100%; justify-content: center;
        }
        .btn-google:hover { filter: brightness(0.95); }

        .icon-btn {
            background: var(--panel-2); border: 1px solid var(--border);
            color: var(--text-2); padding: 0.45rem 0.55rem;
            border-radius: var(--radius-sm); cursor: pointer;
            transition: var(--transition); display: flex; align-items: center;
        }
        .icon-btn:hover { border-color: var(--border-hi); color: var(--text); }

        /* ============================================================
           DASHBOARD SHELL
        ============================================================ */
        #dashboard-view { display: none; animation: fadeUp 0.4s ease; }

        /* Top Bar */
        .topbar {
            position: sticky; top: 0; z-index: 100;
            height: var(--header-h);
            background: rgba(6, 13, 26, 0.9);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center;
            padding: 0 1.25rem; gap: 1rem;
        }
        .topbar-logo {
            font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em;
            color: #f59e0b;
            margin-right: auto;
        }
        .topbar-user {
            display: flex; align-items: center; gap: 0.6rem;
            font-size: 0.85rem; color: var(--text-2);
        }
        .avatar {
            width: 30px; height: 30px; border-radius: 50%;
            background: var(--primary-dim); border: 1px solid var(--border-hi);
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 0.75rem; color: var(--primary);
        }
        #toggle-sidebar-btn {
            display: none;
            background: var(--panel-2); border: 1px solid var(--border);
            color: var(--text-2); padding: 0.4rem 0.5rem;
            border-radius: var(--radius-sm); cursor: pointer;
            align-items: center; justify-content: center;
        }
        #toggle-sidebar-btn:hover { border-color: var(--border-hi); color: var(--text); }

        /* Layout */
        .dash-layout {
            display: flex;
            height: calc(100vh - var(--header-h));
            overflow: hidden;
        }

        /* ============================================================
           SIDEBAR
        ============================================================ */
        .sidebar {
            width: var(--sidebar-w);
            flex-shrink: 0;
            background: var(--bg-2);
            border-right: 1px solid var(--border);
            display: flex; flex-direction: column;
            overflow-y: auto; overflow-x: hidden;
            padding: 1.2rem 0.9rem;
            gap: 0.25rem;
            transition: transform 0.25s ease;
        }
        .sidebar::-webkit-scrollbar { width: 4px; }
        .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }

        .sidebar-section-label {
            font-size: 0.72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.12em;
            color: var(--text-3);
            padding: 0.6rem 0.6rem 0.4rem;
            margin-top: 0.75rem;
        }

        .menu-item {
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.65rem 0.85rem;
            border-radius: var(--radius-sm);
            cursor: pointer; font-size: 0.92rem;
            font-weight: 500;
            color: var(--text-2);
            transition: var(--transition);
            user-select: none;
            border: 1px solid transparent;
        }
        .menu-item:hover { 
            background: rgba(255, 255, 255, 0.05); 
            color: #fff; 
        }
        .menu-item.active { 
            background: rgba(14, 165, 233, 0.15); 
            color: #38bdf8; 
            border: 1px solid rgba(14, 165, 233, 0.35);
            font-weight: 600;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        .menu-item i { font-size: 1.15rem; flex-shrink: 0; }

        /* Machine sub-menus */
        .machine-menu-container { display: flex; flex-direction: column; gap: 0.2rem; }
        .sub-menu { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.15rem; }
        .sub-item { 
            font-size: 0.86rem; 
            padding: 0.45rem 0.75rem;
            color: var(--text-2);
        }
        .sub-item:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.04);
        }
        .sub-item.active {
            color: #38bdf8;
            background: rgba(14, 165, 233, 0.12);
            border-color: rgba(14, 165, 233, 0.25);
        }

        /* ============================================================
           MAIN CONTENT
        ============================================================ */
        .main-content {
            flex: 1; overflow-y: auto; padding: 1.5rem;
            background: var(--bg);
        }
        .main-content::-webkit-scrollbar { width: 4px; }
        .main-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        .section-content { animation: fadeUp 0.3s ease; }

        /* Page header row */
        .page-hdr {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        .page-hdr h2 {
            font-size: 1.05rem; font-weight: 700;
            color: var(--text);
            display: flex; align-items: center; gap: 0.5rem;
        }
        .page-hdr h2 i { color: var(--primary); font-size: 1.2rem; }

        /* Status pill — Clean solid dot, no pale border or outer glow */
        .status-pill {
            display: inline-flex; align-items: center; justify-content: center;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            box-shadow: none !important;
        }
        .status-pill .dot {
            width: 8px; height: 8px; border-radius: 50%;
            display: inline-block;
            box-shadow: none !important;
        }
        .status-on .dot { background: #10b981 !important; box-shadow: none !important; }
        .status-off .dot { background: #ef4444 !important; box-shadow: none !important; }

        /* Tier badges */
        .tier-badge {
            padding: 0.15rem 0.55rem; border-radius: 4px;
            font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
        }
        .tier-pro   { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(14,165,233,.3); }
        .tier-super { background: var(--accent-dim);  color: var(--accent);  border: 1px solid rgba(16,185,129,.3); }
        .tier-basic { background: rgba(148,163,184,.1); color: var(--text-2); border: 1px solid var(--border); }
        .tier-beta  { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }
        .tier-trial { background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.35); }

        /* ============================================================
           CARDS / PANELS & BROADCAST TELEMETRY (CONCEPT 2)
        ============================================================ */
        .telemetry-container {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
        }

        /* Machine Banner */
        .machine-hero-banner {
            background: #12161f;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius);
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.25rem;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .machine-hero-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .machine-avatar-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            box-shadow: none;
        }

        .machine-hero-title {
            font-size: 1.35rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.01em;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .machine-hero-meta {
            font-size: 0.82rem;
            color: var(--text-2);
            margin-top: 0.3rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .machine-stats-strip {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .tele-stat-pill {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 0.45rem 0.85rem;
            display: flex;
            flex-direction: column;
            min-width: 90px;
        }

        .tele-stat-val {
            font-size: 1.2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.1;
        }

        .tele-stat-lbl {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-3);
        }

        /* 2-Column Split Console */
        .telemetry-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
            gap: 1.25rem;
            align-items: start;
        }

        .telemetry-layout.is-full-width-layout {
            grid-template-columns: 1fr;
        }

        .telemetry-layout.is-full-width-layout .telemetry-side-col {
            display: none;
        }

        @media (max-width: 1080px) {
            .telemetry-layout {
                grid-template-columns: 1fr;
            }
        }

        /* Responsive Grid for Option 1 Tactical Cards */
        .tele-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 1rem;
            margin-bottom: 1rem;
        }

        /* Option 1 Tactical Broadcast Card */
        .tactical-card {
            background: #131720;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius);
            padding: 1.1rem 1.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0.9rem;
            transition: all 0.2s ease;
            position: relative;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .tactical-card:hover {
            border-color: rgba(255, 255, 255, 0.16);
            background: #171c26;
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        }

        .tactical-card.active-state {
            border-color: rgba(255, 255, 255, 0.12);
        }

        .tactical-card.active-state:hover {
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        }

        /* Card Top: Clean Icon + Name + Type Badge */
        .card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.65rem;
        }

        .card-identity {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 0;
            flex: 1;
        }

        .card-icon-avatar {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .tactical-card.active-state .card-icon-avatar {
            background: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.25);
            color: #10b981;
        }

        .card-title-group {
            min-width: 0;
            flex: 1;
        }

        .card-name {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.01em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .type-badge {
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.25rem 0.55rem;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .type-badge.badge-video {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.12);
            color: #94a3b8;
        }

        .type-badge.badge-audio {
            background: rgba(245, 158, 11, 0.1);
            border-color: rgba(245, 158, 11, 0.25);
            color: #fbbf24;
        }

        .type-badge.badge-sched {
            background: rgba(168, 85, 247, 0.1);
            border-color: rgba(168, 85, 247, 0.25);
            color: #c084fc;
        }

        /* Card Middle: Status Pill with Clean Solid Dot (No Glow) */
        .card-middle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.35rem 0;
        }

        .tactical-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0;
            border-radius: 0;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        .tactical-status-pill.status-active {
            color: #34d399;
        }

        .tactical-status-pill.status-active .pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: none !important;
            animation: none !important;
            display: inline-block;
        }

        .tactical-status-pill.status-standby {
            color: #94a3b8;
        }

        .tactical-status-pill.status-standby .pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #64748b;
            box-shadow: none !important;
            animation: none !important;
            display: inline-block;
        }

        /* --- Quick Action Section Styles --- */
        .qa-container {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .qa-card {
            background: #131720;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .qa-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            padding-bottom: 0.75rem;
        }

        .qa-card-title {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .qa-card-title i {
            font-size: 1.2rem;
            color: #38bdf8;
        }

        .qa-subtext {
            font-size: 0.75rem;
            color: var(--text-3);
        }

        .qa-transition-row {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .qa-select {
            flex: 1;
            min-width: 200px;
            background: #0f131a;
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #fff;
            padding: 0.65rem 0.85rem;
            border-radius: 8px;
            font-size: 0.88rem;
            outline: none;
            transition: border-color 0.2s;
        }

        .qa-select:focus {
            border-color: #38bdf8;
        }

        .qa-btn-go {
            background: #10b981;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 0.65rem 1.4rem;
            font-size: 0.88rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
            min-height: 42px;
        }

        .qa-btn-go:hover:not(:disabled) {
            background: #059669;
            transform: translateY(-1px);
        }

        .qa-btn-go:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .qa-btn-schedule {
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.35);
            border-radius: 8px;
            padding: 0.65rem 1.25rem;
            font-size: 0.88rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
            min-height: 42px;
        }

        .qa-btn-schedule:hover {
            background: rgba(56, 189, 248, 0.25);
            border-color: #38bdf8;
            transform: translateY(-1px);
        }


        /* Overlays Grid */
        .qa-overlays-list {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .qa-overlay-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: #0b0f17;
            padding: 0.6rem 0.85rem;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            flex-wrap: wrap;
        }

        .qa-overlay-badge {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .qa-overlay-badge.active {
            background: rgba(16, 185, 129, 0.2);
            border-color: #10b981;
            color: #34d399;
        }

        .qa-overlay-toggle-btn {
            min-width: 90px;
            min-height: 40px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-2);
            cursor: pointer;
            transition: all 0.15s;
        }

        .qa-overlay-toggle-btn.is-active {
            background: #10b981;
            border-color: #10b981;
            color: #fff;
        }

        .qa-overlay-toggle-btn:hover {
            opacity: 0.9;
        }

        /* Ports Grid */
        .qa-ports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 0.75rem;
        }

        .qa-port-card {
            background: #0b0f17;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            padding: 0.85rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: all 0.18s;
            min-height: 48px;
        }

        .qa-port-card:hover {
            border-color: rgba(255, 255, 255, 0.15);
            background: #111622;
        }

        .qa-port-card.active {
            border-color: rgba(16, 185, 129, 0.4);
            background: rgba(16, 185, 129, 0.06);
        }

        .qa-port-left {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .qa-port-icon {
            font-size: 1.25rem;
            color: #94a3b8;
        }

        .qa-port-card.active .qa-port-icon {
            color: #10b981;
        }

        .qa-port-name {
            font-size: 0.85rem;
            font-weight: 700;
            color: #fff;
        }

        /* Anti-Death Air Card */
        .qa-deathair-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #0b0f17;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            padding: 1rem 1.15rem;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .qa-deathair-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .qa-deathair-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.25);
            color: #ef4444;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
        }

        .qa-deathair-card.is-active .qa-deathair-icon {
            background: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.25);
            color: #10b981;
        }

        .qa-deathair-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .qa-deathair-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
        }

        .qa-deathair-desc {
            font-size: 0.75rem;
            color: var(--text-3);
        }

        /* Toggle switch */
        .qa-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
            flex-shrink: 0;
        }

        .qa-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .qa-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #334155;
            transition: .2s;
            border-radius: 26px;
        }

        .qa-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .2s;
            border-radius: 50%;
        }

        .qa-switch input:checked + .qa-slider {
            background-color: #10b981;
        }

        .qa-switch input:checked + .qa-slider:before {
            transform: translateX(22px);
        }

        /* Schedule Dialog day & time pill styles */
        .schedule-day-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #0b0f17;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #cbd5e1;
            padding: 0.35rem 0.65rem;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
        }

        .schedule-day-pill:has(input:checked) {
            background: rgba(56, 189, 248, 0.18);
            border-color: #38bdf8;
            color: #38bdf8;
            font-weight: 700;
        }

        .web-time-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: #38bdf8;
            padding: 0.25rem 0.55rem;
            border-radius: 6px;
            font-size: 0.8rem;
            font-family: monospace;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
        }

        .web-time-pill:hover {
            background: rgba(56, 189, 248, 0.22);
            border-color: #38bdf8;
        }

        .web-time-pill.editing {
            background: rgba(16, 185, 129, 0.2);
            border-color: #10b981;
            color: #34d399;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
        }

        .web-time-pill button {
            background: transparent;
            border: none;
            color: #ef4444;
            cursor: pointer;
            padding: 0 0 0 4px;
            display: flex;
            align-items: center;
            font-size: 1rem;
            line-height: 1;
            transition: transform 0.15s ease, color 0.15s ease;
        }

        .web-time-pill button:hover {
            color: #f87171;
            transform: scale(1.2);
        }


        /* Card Bottom: Tactile Action Dock */
        .card-bottom-dock {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding-top: 0.75rem;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .btn-tactile-run {
            flex: 1;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #e2e8f0;
            font-weight: 600;
            padding: 0.55rem 0.9rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            font-size: 0.88rem;
            letter-spacing: -0.01em;
            transition: all 0.2s ease;
            box-shadow: none;
        }

        .btn-tactile-run:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.22);
            box-shadow: none;
            transform: translateY(-1px);
        }

        .btn-tactile-run:active {
            transform: translateY(1px);
            box-shadow: none;
        }

        .btn-tactile-run.is-on-air {
            background: rgba(239, 68, 68, 0.18);
            border-color: rgba(239, 68, 68, 0.4);
            color: #fca5a5;
            box-shadow: none;
        }

        .btn-tactile-run.is-on-air:hover {
            background: #ef4444;
            color: #fff;
            border-color: #ef4444;
            box-shadow: none;
        }

        .btn-tactile-run .live-pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ef4444;
            display: inline-block;
            box-shadow: none;
            animation: none;
        }

        /* Toggle switch control */
        .tactical-toggle-switch {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-2);
            padding: 0.55rem 0.85rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            font-size: 0.82rem;
            font-weight: 600;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .tactical-toggle-switch.is-active {
            background: rgba(239, 68, 68, 0.12);
            border-color: rgba(239, 68, 68, 0.35);
            color: #f87171;
        }

        .tactical-toggle-switch.is-active:hover {
            background: rgba(239, 68, 68, 0.25);
            color: #fff;
            border-color: #ef4444;
        }

        .tactical-toggle-switch.is-standby {
            background: rgba(16, 185, 129, 0.12);
            border-color: rgba(16, 185, 129, 0.35);
            color: #34d399;
        }

        .tactical-toggle-switch.is-standby:hover {
            background: rgba(16, 185, 129, 0.25);
            color: #fff;
            border-color: #10b981;
        }

        .tele-run-btn {
            background: rgba(14, 165, 233, 0.15);
            border: 1px solid rgba(14, 165, 233, 0.35);
            color: #38bdf8;
            font-weight: 600;
            padding: 0.4rem 0.85rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.82rem;
            transition: var(--transition);
        }

        .tele-run-btn:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
        }

        /* Edit Canvas Icon Button */
        .btn-canvas-edit {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-2);
            padding: 0.55rem 0.65rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: all 0.2s ease;
        }

        .btn-canvas-edit:hover {
            background: rgba(14, 165, 233, 0.2);
            border-color: rgba(14, 165, 233, 0.4);
            color: #38bdf8;
            box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
        }

        /* ============================================================
           WEB WATCHDOG CANVAS MODAL & EDITOR
        ============================================================ */
        .web-canvas-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(4, 8, 18, 0.96);
            backdrop-filter: blur(12px);
            flex-direction: column;
            overflow: hidden;
            animation: fadeIn 0.2s ease-out;
        }

        .web-canvas-header {
            height: 56px;
            background: rgba(11, 20, 38, 0.95);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.25rem;
            gap: 1rem;
            flex-shrink: 0;
            z-index: 10;
        }

        .web-canvas-title-group {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .web-canvas-body {
            flex: 1;
            display: flex;
            overflow: hidden;
            position: relative;
        }

        /* Palette Sidebar */
        .web-canvas-sidebar {
            width: 250px;
            background: rgba(8, 15, 28, 0.95);
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 1rem;
            gap: 0.75rem;
            flex-shrink: 0;
            z-index: 5;
        }

        .web-palette-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.55rem 0.75rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            color: #fff;
            font-size: 0.82rem;
            font-weight: 500;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
        }

        .web-palette-item:hover {
            background: rgba(14, 165, 233, 0.15);
            border-color: rgba(14, 165, 233, 0.4);
            color: #38bdf8;
            transform: translateX(2px);
        }

        /* Viewport & Canvas */
        .web-canvas-viewport {
            flex: 1;
            position: relative;
            overflow: auto;
            background: radial-gradient(#1e293b 1px, transparent 1px) 0 0 / 24px 24px, #060b14;
            cursor: default;
        }

        .web-canvas-content {
            position: absolute;
            width: 4000px;
            height: 3000px;
            left: 0;
            top: 0;
            transform-origin: 0 0;
        }

        .web-connections-svg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

        .web-node-wire {
            fill: none;
            stroke: #0ea5e9;
            stroke-width: 2.5;
            cursor: pointer;
            pointer-events: stroke;
            transition: stroke 0.2s;
        }

        .web-node-wire:hover {
            stroke: #f43f5e;
            stroke-width: 4;
        }

        /* Node Element on Canvas */
        .web-canvas-node {
            position: absolute;
            background: linear-gradient(145deg, rgba(16, 27, 49, 0.95) 0%, rgba(10, 18, 34, 0.98) 100%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            width: 220px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
            user-select: none;
            cursor: move;
            z-index: 2;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .web-canvas-node:hover {
            border-color: rgba(14, 165, 233, 0.5);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7), 0 0 14px rgba(14, 165, 233, 0.25);
        }

        .web-canvas-node.is-selected {
            border-color: #38bdf8;
            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.4), 0 8px 28px rgba(0, 0, 0, 0.8);
        }

        .web-node-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.55rem 0.75rem;
            background: rgba(255, 255, 255, 0.03);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 0.8rem;
            font-weight: 700;
            color: #fff;
        }

        .web-node-body {
            padding: 0.65rem 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            font-size: 0.75rem;
            color: var(--text-2);
        }

        .web-node-body input, .web-node-body select {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #fff;
            padding: 0.3rem 0.45rem;
            border-radius: 4px;
            font-size: 0.75rem;
            outline: none;
        }

        .web-node-body input:focus, .web-node-body select:focus {
            border-color: var(--primary);
        }

        /* Node Ports */
        .web-node-ports {
            display: flex;
            justify-content: space-between;
            padding: 0 0.5rem 0.5rem;
            position: relative;
        }

        .web-port {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #1e293b;
            border: 2px solid #0ea5e9;
            cursor: crosshair;
            transition: all 0.2s;
            position: relative;
            z-index: 5;
        }

        .web-port:hover {
            transform: scale(1.3);
            background: #0ea5e9;
            box-shadow: 0 0 10px #0ea5e9;
        }

        .web-port.port-in {
            margin-left: -12px;
        }

        .web-port.port-out {
            margin-right: -12px;
        }

        /* Filter / Search Bar */
        .tele-filter-bar {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            background: rgba(11, 20, 38, 0.6);
            border: 1px solid var(--border);
            padding: 0.5rem 0.85rem;
            border-radius: var(--radius);
        }

        .tele-filter-input {
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-size: 0.85rem;
            flex: 1;
        }

        .tele-filter-input::placeholder {
            color: var(--text-3);
        }

        /* Right Telemetry Inspector Panel */
        .tele-inspector-card {
            background: linear-gradient(180deg, rgba(14, 25, 45, 0.8) 0%, rgba(9, 16, 30, 0.95) 100%);
            border: 1px solid rgba(14, 165, 233, 0.2);
            border-radius: var(--radius);
            padding: 1.25rem;
            position: sticky;
            top: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1.15rem;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
        }

        .tele-inspector-title {
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding-bottom: 0.65rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .tele-meta-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            padding: 0.35rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        .tele-meta-label {
            color: var(--text-3);
        }

        .tele-meta-value {
            color: var(--text);
            font-weight: 500;
            font-family: monospace;
            font-size: 0.82rem;
        }

        .tele-activity-log {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            max-height: 240px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .tele-activity-item {
            font-size: 0.78rem;
            padding: 0.45rem 0.6rem;
            background: rgba(0, 0, 0, 0.3);
            border-left: 2px solid var(--primary);
            border-radius: 0 6px 6px 0;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .tele-activity-time {
            font-size: 0.68rem;
            color: var(--text-3);
        }

        /* ============================================================
           STUDIO LOWER THIRDS QUICK RUNDOWN & LIVE TEXT EDITOR STYLES
        ============================================================ */
        .tele-live-editor-card {
            background: linear-gradient(180deg, rgba(14, 25, 45, 0.85) 0%, rgba(9, 16, 30, 0.98) 100%);
            border: 1px solid rgba(14, 165, 233, 0.25);
            border-radius: var(--radius);
            padding: 1rem 1.15rem;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }

        .tele-live-editor-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .tele-live-editor-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Studio Rundown Drawer List & Row Items */
        .studio-rundown-list {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            max-height: 220px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 4px;
        }

        .studio-rundown-row-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            padding: 0.45rem 0.65rem;
            color: var(--text-2);
            font-family: inherit;
            font-size: 0.78rem;
            text-align: left;
            cursor: pointer;
            transition: all 0.15s ease;
            box-sizing: border-box;
        }

        .studio-rundown-row-item:hover {
            background: rgba(56, 189, 248, 0.12);
            border-color: rgba(56, 189, 248, 0.3);
            color: #fff;
            transform: translateX(2px);
        }

        .studio-rundown-row-item.is-cued {
            background: rgba(16, 185, 129, 0.18) !important;
            border-color: #10b981 !important;
            color: #34d399 !important;
            font-weight: 700;
        }

        .studio-rundown-row-idx {
            font-family: monospace;
            font-size: 0.72rem;
            color: #38bdf8;
            font-weight: 700;
            flex-shrink: 0;
            min-width: 28px;
        }

        .studio-rundown-row-item.is-cued .studio-rundown-row-idx {
            color: #34d399;
        }

        .studio-rundown-row-preview {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Layer Groups in Text Editor */
        .tele-editor-layer-group {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            padding: 0.65rem 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .tele-editor-layer-group.is-cell-locked {
            border-color: rgba(168, 85, 247, 0.3);
            background: rgba(88, 28, 135, 0.08);
        }

        .tele-editor-layer-group.is-overridden {
            border-color: rgba(245, 158, 11, 0.3);
        }

        .tele-editor-layer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--text-2);
        }

        .tele-editor-layer-badge {
            font-size: 0.65rem;
            padding: 1px 6px;
            border-radius: 4px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .tele-editor-layer-badge.badge-excel {
            background: rgba(16, 185, 129, 0.15);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .tele-editor-layer-badge.badge-override {
            background: rgba(245, 158, 11, 0.15);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .tele-editor-layer-badge.badge-vmix {
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.3);
        }

        .tele-editor-layer-badge.badge-manual {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .tele-layer-lock-btn {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: var(--text-3);
            font-size: 0.68rem;
            padding: 1px 6px;
            border-radius: 4px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            transition: all 0.15s ease;
        }

        .tele-layer-lock-btn:hover {
            border-color: #d8b4fe;
            color: #d8b4fe;
        }

        .tele-layer-lock-btn.is-locked {
            background: rgba(168, 85, 247, 0.15);
            border-color: #a855f7;
            color: #d8b4fe;
            font-weight: 700;
        }

        .tele-editor-input-row {
            display: flex;
            align-items: stretch;
            gap: 4px;
            width: 100%;
        }

        .tele-editor-textarea {
            flex: 1;
            min-width: 0;
            background: #070d18;
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #fff;
            padding: 0.45rem 0.6rem;
            border-radius: 6px;
            font-family: inherit;
            font-size: 0.82rem;
            line-height: 1.4;
            resize: vertical;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }

        .tele-editor-textarea:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
        }

        .tele-editor-nav-btn {
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-2);
            padding: 0 8px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: all 0.15s ease;
        }

        .tele-editor-nav-btn:hover:not(:disabled) {
            background: rgba(56, 189, 248, 0.2);
            border-color: #38bdf8;
            color: #fff;
        }

        .tele-editor-nav-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }


        .bc-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 0.75rem;
            overflow: hidden;
        }
        .bc-card-hdr {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            background: var(--panel-2);
        }
        .bc-card-hdr .label {
            font-size: 0.8rem; font-weight: 600; color: var(--text);
            display: flex; align-items: center; gap: 0.5rem;
        }
        .bc-card-body { padding: 0.75rem 1rem; }

        /* Collapsible program card */
        .prog-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.6rem; overflow: hidden; }
        .prog-card-hdr {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.65rem 0.9rem; cursor: pointer;
            transition: var(--transition);
        }
        .prog-card-hdr:hover { background: var(--panel-2); }
        .prog-card-hdr .prog-name { font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
        .prog-card-hdr .prog-actions { display: flex; gap: 0.4rem; align-items: center; }
        .prog-card-body { display: none; padding: 0.75rem 0.9rem; border-top: 1px solid var(--border); background: var(--bg-2); }

        /* Inline schedule rows */
        .sched-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.35rem 0.5rem;
            border-radius: var(--radius-sm);
            background: var(--panel);
            border: 1px solid var(--border);
            margin-bottom: 0.3rem;
            font-size: 0.8rem; color: var(--text-2);
        }
        .sched-row:hover { border-color: var(--border-hi); color: var(--text); }

        /* Key / license row */
        .key-row {
            background: var(--panel); border: 1px solid var(--border);
            border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem;
        }
        .key-mono { font-family: monospace; color: var(--primary); font-size: 0.9rem; }

        /* HWID list */
        .hwid-list { list-style: none; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
        .hwid-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0.45rem 0.65rem; gap: 0.5rem;
            background: var(--bg-2); border: 1px solid var(--border);
            border-radius: var(--radius-sm); font-size: 0.78rem;
            max-width: 100%; overflow: hidden; box-sizing: border-box;
        }
        .hwid-text {
            font-family: monospace; opacity: 0.85;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            flex: 1; min-width: 0;
        }
        .btn-revoke { background: none; border: none; color: var(--danger); cursor: pointer; opacity: 0.7; transition: var(--transition); flex-shrink: 0; padding: 4px; display: flex; align-items: center; }
        .btn-revoke:hover { opacity: 1; }

        /* Add-form row */
        .add-row {
            display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; align-items: center;
        }
        .add-row select, .add-row input { margin-bottom: 0; flex: 1; min-width: 100px; }

        /* Synced-at caption */
        .sync-caption {
            font-size: 0.72rem; color: var(--text-3);
            margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.35rem;
        }

        /* Machine title */
        #machine-title {
            font-size: 1rem; font-weight: 700;
            color: var(--text); display: flex; align-items: center; gap: 0.5rem;
        }

        /* ============================================================
           RESPONSIVE & MOBILE POLISH
        ============================================================ */
        @media (max-width: 768px) {
            :root {
                --sidebar-w: 280px;
                --header-h: 52px;
            }

            /* Shell & Layout */
            .dash-layout {
                height: calc(100vh - var(--header-h));
            }
            .sidebar {
                position: fixed; top: 0; left: 0;
                width: min(85vw, 300px);
                height: 100vh; z-index: 1000;
                transform: translateX(-100%);
                border-radius: 0;
                background: var(--bg-2);
                border-right: 1px solid var(--border);
                box-shadow: 10px 0 35px rgba(0, 0, 0, 0.8);
                padding-top: calc(var(--header-h) + 1rem);
            }
            .sidebar.open { transform: translateX(0); }

            #toggle-sidebar-btn { 
                display: flex !important; 
                padding: 0.45rem 0.6rem;
                font-size: 1.25rem;
            }

            .topbar {
                padding: 0 0.85rem;
                gap: 0.6rem;
            }
            .topbar-logo {
                font-size: 1.05rem;
            }
            .topbar-logo img {
                height: 22px !important;
                width: 22px !important;
            }
            .topbar-user {
                gap: 0.45rem;
            }
            #user-name {
                display: none !important; /* Hide long username text on mobile topbar */
            }

            .main-content { 
                padding: 0.75rem 0.6rem; 
                -webkit-overflow-scrolling: touch;
            }

            /* Telemetry & Machine Hero Banner */
            .telemetry-container {
                gap: 0.85rem;
            }
            .machine-hero-banner {
                flex-direction: column;
                align-items: flex-start;
                padding: 1rem;
                gap: 0.9rem;
            }
            .machine-hero-left {
                width: 100%;
                gap: 0.75rem;
            }
            .machine-avatar-icon {
                width: 40px;
                height: 40px;
                font-size: 1.3rem;
                border-radius: 10px;
            }
            .machine-hero-title {
                font-size: 1.15rem;
                gap: 0.5rem;
            }
            .machine-hero-meta {
                font-size: 0.74rem;
                gap: 0.45rem;
                line-height: 1.35;
            }
            .machine-stats-strip {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
            }
            .tele-stat-pill {
                min-width: 0;
                padding: 0.4rem 0.6rem;
            }
            .tele-stat-val {
                font-size: 1.05rem;
            }
            .tele-stat-lbl {
                font-size: 0.65rem;
            }

            /* Responsive Tactical Card Grids for Mobile */
            .tele-cards-grid {
                grid-template-columns: 1fr; /* Single column on phones */
                gap: 0.75rem;
            }
            .tactical-card {
                padding: 0.9rem 1rem;
                gap: 0.75rem;
            }

            /* Card Actions & Buttons for Touch */
            .card-bottom-dock {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            .btn-tactile-run {
                flex: 1 1 100%; /* Playout button takes full width on phone for instant tap */
                padding: 0.65rem 0.9rem;
                font-size: 0.88rem;
                min-height: 42px;
            }
            .btn-canvas-edit {
                flex: 1 1 auto;
                min-height: 38px;
                padding: 0.5rem 0.85rem;
                font-size: 0.84rem;
                justify-content: center;
            }
            .delete-lt-btn {
                flex: 0 0 42px;
                min-height: 38px;
            }

            /* Filters & Search */
            .tele-filter-bar {
                flex-wrap: wrap;
                padding: 0.45rem 0.65rem;
                gap: 0.5rem;
            }
            .tele-filter-input {
                font-size: 0.82rem;
                min-width: 140px;
            }

            /* Tables & Horizontal Scroll Container */
            .table-responsive {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            table {
                min-width: 520px;
            }

            /* Modals on Phones */
            .modal-card {
                max-width: 95vw;
                border-radius: var(--radius);
            }
            .modal-hdr {
                padding: 1rem 1.15rem;
            }
            .modal-body {
                padding: 1rem 1.15rem;
            }

            /* Program and Broadcast Cards */
            .prog-card-hdr { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
            .prog-card-hdr .prog-actions { width: 100%; }
            .prog-card-hdr .prog-actions .btn { flex: 1; justify-content: center; font-size: 0.82rem; padding: 0.55rem; font-weight: 700; min-height: 38px; }

            .bc-card-hdr { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
            .bc-card-hdr .btn { font-size: 0.82rem; padding: 0.5rem 0.75rem; font-weight: 700; min-height: 38px; }

            .add-row { flex-direction: column; }
            .add-row .btn { width: 100%; justify-content: center; font-weight: 700; padding: 0.6rem; min-height: 40px; }
        }

        /* Sidebar overlay on mobile */
        .sidebar-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.5); z-index: 499;
        }
        .sidebar-overlay.visible { display: block; }

        /* ============================================================
           MODAL DIALOGS
        ============================================================ */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(4, 9, 18, 0.8);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            padding: 1rem;
            animation: fadeIn 0.2s ease;
        }
        .modal-card {
            background: var(--panel);
            border: 1px solid var(--border-hi);
            border-radius: var(--radius-lg);
            width: 100%;
            max-width: 480px;
            box-shadow: var(--glow-blue), 0 24px 60px rgba(0,0,0,0.6);
            overflow: hidden;
            animation: fadeUp 0.25s ease;
        }
        .modal-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            background: var(--bg-2);
        }
        .modal-body {
            padding: 1.5rem;
        }
        .modal-summary-box {
            background: var(--bg-2);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 1rem 1.25rem;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* ============================================================
           LANDING PAGE STYLES
        ============================================================ */
        #landing-view {
            display: block; /* default view on load */
            background: var(--bg);
            position: relative;
            z-index: 10;
        }

        /* Nav Bar */
        .landing-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 2rem;
            position: sticky;
            top: 0;
            background: rgba(6, 13, 26, 0.85);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border);
            z-index: 1000;
            transition: var(--transition);
        }
        .landing-logo {
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: #f59e0b;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .landing-logo i {
            color: var(--primary);
            font-size: 1.6rem;
            -webkit-text-fill-color: initial;
        }
        .landing-nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }
        .landing-nav a {
            color: var(--text-2);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            transition: var(--transition);
        }
        .landing-nav a:hover {
            color: var(--primary);
            text-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
        }

        /* Hero Section */
        .hero-section {
            display: grid;
            grid-template-columns: 1fr 1.35fr;
            align-items: center;
            gap: 3rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 6rem 2rem 4rem;
            position: relative;
            overflow: hidden;
        }
        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            z-index: 2;
        }
        .hero-badge {
            background: rgba(14, 165, 233, 0.1);
            border: 1px solid rgba(14, 165, 233, 0.3);
            color: var(--primary);
            padding: 0.35rem 0.85rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            box-shadow: none;
        }
        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.04em;
            color: #fff;
            margin-bottom: 1.25rem;
        }
        .hero-title span {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero-subtitle {
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--text-2);
            margin-bottom: 2rem;
            max-width: 540px;
        }
        .hero-ctas {
            display: flex;
            gap: 1rem;
            margin-bottom: 3.5rem;
            flex-wrap: wrap;
        }
        .btn-hero-dl {
            padding: 0.85rem 1.75rem;
            font-size: 0.95rem;
            border-radius: var(--radius);
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
        .btn-hero-portal {
            padding: 0.85rem 1.75rem;
            font-size: 0.95rem;
            border-radius: var(--radius);
        }
        .hero-stats-row {
            display: flex;
            gap: 2.5rem;
            border-top: 1px solid var(--border);
            padding-top: 2rem;
            width: 100%;
        }
        .hero-stat {
            display: flex;
            flex-direction: column;
        }
        .hero-stat .num {
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff;
        }
        .hero-stat .lbl {
            font-size: 0.78rem;
            color: var(--text-3);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: 0.25rem;
        }

        /* Hero App Mockup Visual */
        .hero-visual {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        .visual-glow { display: none !important; width: 0 !important; height: 0 !important; }
        .mockup-frame {
            width: 100%;
            max-width: 460px;
            background: var(--panel);
            border: 1px solid var(--border-hi);
            border-radius: var(--radius-lg);
            box-shadow: 0 24px 48px rgba(0,0,0,0.5), var(--glow-blue);
            overflow: hidden;
            z-index: 2;
            animation: float 6s ease-in-out infinite;
        }
        .mockup-header {
            background: var(--panel-2);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .mockup-header .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        .mockup-header .dot.red { background: var(--danger); }
        .mockup-header .dot.yellow { background: var(--warn); }
        .mockup-header .dot.green { background: var(--accent); }
        .mockup-title {
            color: var(--text-3);
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 0.5rem;
            font-family: monospace;
        }
        .mockup-body {
            display: grid;
            grid-template-columns: 110px 1fr;
            height: 250px;
        }
        .mockup-sidebar {
            background: var(--bg-2);
            border-right: 1px solid var(--border);
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
        .mockup-sidebar .sb-item {
            font-size: 0.7rem;
            color: var(--text-3);
            padding: 0.3rem 0.5rem;
            border-radius: 4px;
            font-weight: 600;
        }
        .mockup-sidebar .sb-item.active {
            color: var(--primary);
            background: var(--primary-dim);
        }
        .mockup-main {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            background: var(--bg);
        }
        .mockup-card {
            background: var(--panel);
            border: 1px solid var(--border);
            padding: 0.65rem 0.85rem;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .mockup-card .card-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-2);
        }
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
        }
        .status-indicator.active { color: var(--accent); }
        .status-indicator.inactive { color: var(--text-3); }
        
        .pulse-dot {
            width: 6px;
            height: 6px;
            background: var(--accent);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        .flat-dot {
            width: 6px;
            height: 6px;
            background: var(--text-3);
            border-radius: 50%;
        }

        /* Features Section */
        .features-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 6rem 2rem;
            text-align: center;
        }
        .section-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.75rem;
            letter-spacing: -0.02em;
        }
        .section-subtitle {
            font-size: 1.05rem;
            color: var(--text-2);
            max-width: 600px;
            margin: 0 auto 4rem;
            line-height: 1.5;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
        }
        .feature-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 2.5rem 2rem;
            text-align: left;
            transition: var(--transition);
            position: relative;
        }
        .feature-card:hover {
            border-color: var(--border-hi);
            transform: translateY(-4px);
            box-shadow: var(--glow-blue);
        }
        .icon-wrapper {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: var(--primary-dim);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(14, 165, 233, 0.2);
        }
        .feature-card h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.75rem;
        }
        .feature-card p {
            font-size: 0.88rem;
            line-height: 1.5;
            color: var(--text-2);
        }

        /* Pricing Section & Billing Switcher */
        .pricing-section {
            max-width: 1050px;
            margin: 0 auto;
            padding: 4rem 2rem 6rem;
            text-align: center;
        }
        .billing-toggle-container {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.85rem;
            background: var(--panel);
            padding: 0.35rem 0.5rem;
            border-radius: 999px;
            border: 1px solid var(--border);
            margin: 0 auto 3rem;
        }
        .billing-toggle-btn {
            background: transparent;
            border: none;
            color: var(--text-2);
            font-size: 0.88rem;
            font-weight: 600;
            padding: 0.5rem 1.15rem;
            border-radius: 999px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .billing-toggle-btn.active {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4);
        }
        .discount-pill {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.35);
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.15rem 0.5rem;
            border-radius: 999px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .billing-toggle-btn.active .discount-pill {
            background: #fff;
            color: #0369a1;
            border-color: #fff;
        }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(300px, 1fr));
            gap: 2.25rem;
            align-items: stretch;
            max-width: 860px;
            margin: 0 auto;
        }
        @media (max-width: 768px) {
            .pricing-grid {
                grid-template-columns: 1fr;
            }
        }
        .price-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 3rem 2rem;
            text-align: left;
            display: flex;
            flex-direction: column;
            position: relative;
            transition: var(--transition);
        }
        .price-card:hover {
            border-color: var(--border-hi);
        }
        .price-card.popular {
            border-color: var(--primary);
            box-shadow: var(--glow-blue), 0 16px 32px rgba(0,0,0,0.4);
            transform: scale(1.02);
            background-image: linear-gradient(180deg, var(--panel) 0%, rgba(14,165,233,0.03) 100%);
        }
        .popular-tag {
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            background: var(--primary);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 0.25rem 0.6rem;
            border-radius: 4px;
        }
        .price-hdr {
            margin-bottom: 2rem;
        }
        .tier-label {
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-3);
        }
        .popular .tier-label {
            color: var(--primary);
        }
        .price-val {
            font-size: 2.75rem;
            font-weight: 700;
            color: #fff;
            margin: 0.5rem 0;
            display: flex;
            align-items: baseline;
        }
        .price-val span {
            font-size: 0.9rem;
            color: var(--text-2);
            font-weight: 400;
            margin-left: 0.2rem;
        }
        .tier-desc {
            font-size: 0.85rem;
            color: var(--text-2);
            line-height: 1.4;
        }
        .tier-features {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
            margin-bottom: 2.5rem;
            flex-grow: 1;
        }
        .tier-features li {
            font-size: 0.85rem;
            color: var(--text-2);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .tier-features li i {
            font-size: 1.1rem;
            color: var(--accent);
        }
        .pricing-cta {
            width: 100%;
            justify-content: center;
            padding: 0.75rem;
            border-radius: var(--radius-sm);
        }

        /* Download Section */
        .download-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 2rem 6rem;
        }
        .download-card {
            background: linear-gradient(135deg, var(--panel) 0%, var(--bg-2) 100%);
            border: 1px solid var(--border-hi);
            border-radius: var(--radius-lg);
            padding: 4rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0,0,0,0.4);
        }
        .download-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }
        .dl-content {
            position: relative;
            z-index: 2;
            max-width: 620px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.25rem;
        }
        .download-card h2 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }
        .download-card p {
            font-size: 1rem;
            color: var(--text-2);
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }
        .dl-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
        }
        .btn-lg {
            padding: 0.95rem 2rem;
            font-size: 1rem;
            font-weight: 700;
            border-radius: var(--radius);
            box-shadow: 0 4px 24px rgba(14, 165, 233, 0.4);
        }
        .dl-meta {
            font-size: 0.75rem;
            color: var(--text-3);
        }

        /* Footer */
        .landing-footer {
            border-top: 1px solid var(--border);
            padding: 3rem 2rem;
            text-align: center;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1.5rem;
            color: var(--text-3);
            font-size: 0.85rem;
        }
        .footer-links {
            display: flex;
            gap: 2rem;
        }
        .footer-links a {
            color: var(--text-3);
            text-decoration: none;
            transition: var(--transition);
        }
        .footer-links a:hover {
            color: var(--primary);
        }

        /* Back to Home Button on Auth View */
        .btn-back-home {
            width: 100%;
            justify-content: center;
            margin-top: 0.75rem;
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-3);
        }
        .btn-back-home:hover {
            color: var(--text-2);
            background: rgba(255,255,255,0.03);
            border-color: rgba(255,255,255,0.05);
        }

        /* Animation Keyframes */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        @keyframes pulse {
            0% { transform: scale(0.95); opacity: 0.5; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
            70% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
            100% { transform: scale(0.95); opacity: 0.5; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        /* Responsive Landing Styles */
        @media (max-width: 992px) {
            .hero-section {
                grid-template-columns: 1fr;
                padding-top: 4rem;
                text-align: center;
                gap: 4rem;
            }
            .hero-content {
                align-items: center;
            }
            .hero-subtitle {
                margin-left: auto;
                margin-right: auto;
            }
            .hero-ctas {
                justify-content: center;
            }
            .hero-stats-row {
                justify-content: center;
            }
            .hero-visual {
                order: -1; /* visually show mockup first on mid/small devices */
            }
            .download-card {
                padding: 3rem 2rem;
            }
        }
        @media (max-width: 600px) {
            .landing-header {
                padding: 1rem;
            }
            .landing-nav {
                display: none; /* simple responsive: hide sub-nav links and rely on scroll/sections */
            }
            .hero-title {
                font-size: 2.2rem;
            }
            .hero-stats-row {
                flex-direction: column;
                gap: 1.5rem;
                align-items: center;
            }
            .landing-footer {
                flex-direction: column;
                padding: 2rem 1rem;
            }
            .footer-links {
                gap: 1rem;
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        /* ============================================================
           COMMERCIAL ADVANCED STATISTICS (CLOUD MATCHING DESKTOP)
        ============================================================ */
        .stats-view-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            transition: all 0.25s ease;
        }

        /* Expanded / Fullscreen Dock Mode */
        .stats-view-card.is-docked-fullscreen {
            position: fixed !important;
            inset: 1.25rem !important;
            z-index: 9999 !important;
            background: rgba(8, 16, 32, 0.98) !important;
            backdrop-filter: blur(20px) !important;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
            border: 1px solid rgba(56, 189, 248, 0.4) !important;
            max-height: calc(100vh - 2.5rem) !important;
            height: calc(100vh - 2.5rem) !important;
            overflow: hidden !important;
        }

        .stats-view-card.is-docked-fullscreen .stats-table-container {
            flex: 1 !important;
            max-height: none !important;
            height: 100% !important;
        }

        .stats-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }

        .stats-title-area {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .stats-title-area i {
            font-size: 2rem;
            color: var(--primary);
        }

        .stats-title-area h2 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.02em;
        }

        .stats-title-area p {
            font-size: 0.78rem;
            color: var(--text-2);
            margin-top: 2px;
        }

        .stats-header-kpis {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .stats-kpi-card {
            background: var(--bg-2);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 6px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            height: 40px;
        }

        .stats-kpi-card i {
            font-size: 1.25rem;
            color: var(--primary);
        }

        .stats-kpi-info {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
        }

        .stats-kpi-label {
            font-size: 0.62rem;
            color: var(--text-2);
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.04em;
        }

        .stats-kpi-val {
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
        }

        .stats-controls-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            background: var(--bg-2);
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            align-items: center;
        }

        .stats-search-wrapper {
            position: relative;
            flex: 1;
            min-width: 200px;
        }

        .stats-search-wrapper i {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-2);
            font-size: 0.95rem;
        }

        .stats-search-input {
            width: 100%;
            height: 34px;
            padding: 0 12px 0 32px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.85rem;
            outline: none;
            transition: all 0.2s ease;
            margin-bottom: 0;
        }

        .stats-search-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-dim);
        }

        .stats-filter-select {
            height: 34px;
            padding: 0 10px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.82rem;
            outline: none;
            cursor: pointer;
            margin-bottom: 0;
            width: auto;
        }

        .stats-filter-select:focus {
            border-color: var(--primary);
        }

        .stats-table-container {
            width: 100%;
            background: var(--bg-2);
            border-radius: 8px;
            border: 1px solid var(--border);
            overflow: auto;
            max-height: 640px;
        }

        .stats-main-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.82rem;
            user-select: none;
        }

        .stats-main-table th {
            position: sticky;
            top: 0;
            z-index: 10;
            background: #0b172a !important;
            padding: 8px 10px;
            font-weight: 600;
            color: var(--text-2);
            border-bottom: 2px solid var(--border);
            cursor: pointer;
            user-select: none;
            font-size: 0.78rem;
            white-space: nowrap;
        }

        .stats-main-table th.sortable:hover {
            color: #fff;
        }

        .stats-main-table th i {
            font-size: 0.75rem;
            margin-left: 4px;
            vertical-align: middle;
        }

        .stats-main-table td {
            padding: 8px 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            vertical-align: middle;
            font-size: 0.82rem;
            white-space: nowrap;
        }

        .stats-main-table tbody tr:nth-child(even) td {
            background-color: rgba(255, 255, 255, 0.015);
        }

        .stats-main-table tr:hover td {
            background: rgba(255, 255, 255, 0.05) !important;
        }

        .stats-main-table tr.selected-row td {
            background: rgba(14, 165, 233, 0.18) !important;
        }

        /* Subtle column grouping tints from desktop */
        .stats-main-table td:nth-child(6), .stats-main-table td:nth-child(7), .stats-main-table td:nth-child(8), .stats-main-table td:nth-child(9),
        .stats-main-table th:nth-child(6), .stats-main-table th:nth-child(7), .stats-main-table th:nth-child(8), .stats-main-table th:nth-child(9) {
            background-color: rgba(59, 130, 246, 0.015);
        }
        
        .stats-main-table td:nth-child(10), .stats-main-table td:nth-child(11),
        .stats-main-table th:nth-child(10), .stats-main-table th:nth-child(11) {
            background-color: rgba(168, 85, 247, 0.015);
        }

        .stats-main-table td:nth-child(12), .stats-main-table td:nth-child(13),
        .stats-main-table th:nth-child(12), .stats-main-table th:nth-child(13) {
            background-color: rgba(16, 185, 129, 0.02);
        }

        /* Visual dividing borders between column categories */
        .stats-main-table td:nth-child(6), .stats-main-table th:nth-child(6),
        .stats-main-table td:nth-child(10), .stats-main-table th:nth-child(10),
        .stats-main-table td:nth-child(12), .stats-main-table th:nth-child(12) {
            border-left: 1.5px solid rgba(255, 255, 255, 0.05);
        }

        .comm-link-name {
            font-weight: 600;
            color: #38bdf8;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            max-width: 240px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px dashed rgba(56, 189, 248, 0.4);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .comm-link-name:hover {
            color: #7dd3fc;
            border-bottom-color: #7dd3fc;
        }

        .sponsor-chip {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            background: rgba(56, 189, 248, 0.12);
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.2);
        }

        .status-badge-active {
            background: rgba(16, 185, 129, 0.12) !important;
            color: #34d399 !important;
            border: 1px solid rgba(16, 185, 129, 0.25) !important;
        }
        .status-badge-suspended {
            background: rgba(245, 158, 11, 0.12) !important;
            color: #fbbf24 !important;
            border: 1px solid rgba(245, 158, 11, 0.25) !important;
        }
        .status-badge-expired {
            background: rgba(239, 68, 68, 0.12) !important;
            color: #f87171 !important;
            border: 1px solid rgba(239, 68, 68, 0.25) !important;
        }
        .status-badge-inactive {
            background: rgba(156, 163, 175, 0.12) !important;
            color: #9ca3af !important;
            border: 1px solid rgba(156, 163, 175, 0.2) !important;
        }
        .status-badge-missing {
            background: rgba(239, 68, 68, 0.18) !important;
            color: #fca5a5 !important;
            border: 1px solid rgba(239, 68, 68, 0.35) !important;
        }
        .status-badge-capped {
            background: rgba(245, 158, 11, 0.15) !important;
            color: #fbbf24 !important;
            border: 1px solid rgba(245, 158, 11, 0.3) !important;
        }

        .progress-bar-bg {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-bar-bg.unlimited-progress {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 50%, transparent 50%);
            background-size: 8px 100%;
        }

        .progress-bar-fill {
            height: 100%;
            border-radius: 3px;
            width: 0%;
            transition: width 0.4s ease;
        }

        .fill-normal { background: var(--primary); }
        .fill-warning { background: var(--warn); }
        .fill-danger { background: var(--danger); }

        /* Commercial Play History Modal */
        .history-dialog-card {
            background: #0f172a;
            border: 1px solid rgba(56, 189, 248, 0.25);
            border-radius: var(--radius-lg);
            width: 100%;
            max-width: 680px;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            max-height: 88vh;
            animation: fadeUp 0.25s ease;
        }

        .history-dialog-hdr {
            padding: 1.1rem 1.4rem;
            background: #0b1329;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .history-dialog-body {
            padding: 1.4rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 1.1rem;
        }

        .history-kpi-row {
            display: flex;
            gap: 12px;
            width: 100%;
        }

        .history-kpi-card {
            flex: 1;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 14px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .history-kpi-label {
            font-size: 0.65rem;
            color: var(--text-3);
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        .history-kpi-value {
            font-size: 1.2rem;
            font-weight: 700;
            color: #fff;
        }

        .history-logs-table-container {
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: auto;
            max-height: 320px;
            background: rgba(0, 0, 0, 0.25);
        }

        .history-logs-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.82rem;
            text-align: left;
        }

        .history-logs-table th {
            position: sticky;
            top: 0;
            background: #0b172a !important;
            padding: 8px 12px;
            font-weight: 600;
            color: var(--text-2);
            border-bottom: 1px solid var(--border);
            font-size: 0.78rem;
        }

        .history-logs-table td {
            padding: 8px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: var(--text);
            font-family: monospace;
            font-size: 0.8rem;
        }

        .history-logs-table tr:hover td {
            background: rgba(255, 255, 255, 0.04);
        }
    
        /* Responsive & Polish Styles for Live Support Chat Widget */
        #support-chat-wrapper {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 99990;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            transition: all 0.25s ease;
        }
        #support-chat-window {
            width: 380px;
            max-width: calc(100vw - 2rem);
            height: 520px;
            max-height: calc(100vh - 6.5rem);
            background: #0b1322;
            border: 1px solid rgba(56, 189, 248, 0.35);
            border-radius: 16px;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
            flex-direction: column;
            overflow: hidden;
            margin-bottom: 0.85rem;
            animation: fadeUp 0.25s ease;
        }
        #support-chat-input:focus {
            border-color: #38bdf8 !important;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
        }
        #support-chat-messages {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        @media (max-width: 640px) {
            #support-chat-wrapper {
                bottom: 1rem !important;
                right: 1rem !important;
                left: auto !important;
            }
            #support-chat-wrapper.chat-open {
                bottom: 0 !important;
                right: 0 !important;
                left: 0 !important;
                top: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                height: 100dvh !important;
                align-items: stretch !important;
            }
            #support-chat-wrapper.chat-open #support-chat-window {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100vh !important;
                height: 100dvh !important;
                max-height: 100dvh !important;
                border-radius: 0 !important;
                border: none !important;
                margin-bottom: 0 !important;
            }
            #support-chat-wrapper.chat-open #support-chat-launcher {
                display: none !important;
            }
            #support-chat-window button {
                touch-action: manipulation;
            }
        }

    
/* ==========================================================================
   LOWER THIRDS INWARD DRILL-DOWN FOLDER NAVIGATION STYLES
   ========================================================================== */
.lt-inward-directory-view,
.lt-inward-folder-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    animation: fadeInLtView 0.22s ease;
}

@keyframes fadeInLtView {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.lt-directory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
}

.lt-directory-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.lt-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.lt-folder-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 1.15rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.lt-folder-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.4);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.88) 100%);
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.5);
}

.lt-folder-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.lt-folder-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

.lt-folder-card:hover .lt-folder-card-icon {
    transform: scale(1.08);
    background: rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
}

.lt-folder-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lt-folder-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-folder-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lt-folder-card-preview {
    font-size: 0.76rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.35rem;
    line-height: 1.4;
}

.lt-folder-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-3);
    transition: color 0.15s ease;
}

.lt-folder-card:hover .lt-folder-card-footer {
    color: #38bdf8;
}

.lt-folder-card-footer i {
    font-size: 1.15rem;
    transition: transform 0.2s ease;
}

.lt-folder-card:hover .lt-folder-card-footer i {
    transform: translateX(4px);
}

/* Breadcrumb Navigation Bar inside Folder */
.lt-folder-breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.15rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.65) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lt-breadcrumb-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-1);
    transition: all 0.15s ease;
    cursor: pointer;
}

.lt-breadcrumb-back-btn:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    transform: translateX(-2px);
}

.lt-breadcrumb-path {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
}

.lt-breadcrumb-root {
    color: var(--text-3);
    cursor: pointer;
    transition: color 0.15s ease;
    font-weight: 500;
}

.lt-breadcrumb-root:hover {
    color: #38bdf8;
    text-decoration: underline;
}

.lt-breadcrumb-divider {
    color: var(--text-3);
    font-size: 1.1rem;
    opacity: 0.6;
}

.lt-breadcrumb-current {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: #38bdf8;
}

.lt-breadcrumb-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}


/* ==========================================================================
   STUDIO EXCEL RUNDOWN DOCK & FLOATING MODAL STYLES
   ========================================================================== */

/* Right-Side Editor Excel Rundown Box */
.studio-excel-rundown-box {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

.studio-excel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.studio-excel-file-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    max-width: 210px;
}

.studio-excel-file-pill:hover {
    background: rgba(16, 185, 129, 0.22);
    border-color: #34d399;
    color: #6ee7b7;
    transform: translateY(-1px);
}

.studio-excel-file-pill.is-warn {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.studio-excel-file-pill span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Master Stepper Bar */
.studio-excel-stepper-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(7, 13, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
}

/* Floating Spreadsheet Modal Overlay */
.studio-excel-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(3, 7, 18, 0.65);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.studio-excel-modal-overlay.is-open {
    display: flex;
}

/* Floating Window */
.studio-excel-floating-win {
    position: absolute;
    width: 900px;
    max-width: 96vw;
    height: 600px;
    max-height: 92vh;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f1f5f9;
}

.studio-excel-floating-win.is-maximized {
    top: 10px !important;
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 6px;
}

.studio-excel-floating-win.is-minimized {
    height: 48px !important;
    min-height: 48px !important;
    overflow: hidden;
}

.studio-excel-floating-win.is-minimized .studio-excel-win-toolbar,
.studio-excel-floating-win.is-minimized .studio-excel-grid-container,
.studio-excel-floating-win.is-minimized .studio-excel-footer-bar {
    display: none !important;
}

/* Window Header */
.studio-excel-win-header {
    height: 52px;
    min-height: 52px;
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    cursor: move;
    user-select: none;
}

.studio-excel-win-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.studio-excel-win-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.studio-excel-win-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-excel-win-subtext {
    font-size: 0.7rem;
    color: var(--text-3);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-excel-win-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.excel-win-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.15s ease;
}

.excel-win-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.excel-win-btn.is-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

/* Toolbar */
.studio-excel-win-toolbar {
    padding: 0.65rem 1rem;
    background: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.studio-excel-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 10px;
    flex: 1;
    max-width: 320px;
}

.studio-excel-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.8rem;
    width: 100%;
}

.studio-excel-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Scrollable Grid Container */
.studio-excel-grid-container {
    flex: 1;
    overflow: auto;
    background: #090d16;
    position: relative;
}

/* Excel Editor Table */
.excel-editor-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    color: #e2e8f0;
    font-size: 0.8rem;
    font-family: inherit;
}

.excel-editor-table th,
.excel-editor-table td {
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 0;
    vertical-align: middle;
}

/* Header Columns */
.excel-col-letter-row th {
    background: #1e293b;
    color: var(--text-3);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: monospace;
    text-align: center;
    height: 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.excel-editor-table thead tr:nth-child(2) th {
    background: #131d2e;
    color: #f8fafc;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 6px 8px;
    position: sticky;
    top: 24px;
    z-index: 9;
}

.excel-editor-table thead th.is-mapped-col {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
}

.excel-col-resizer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    user-select: none;
}

.excel-col-resizer:hover,
.excel-col-resizer.is-resizing {
    background: #38bdf8;
}

.excel-inline-add-col-btn {
    background: transparent;
    border: none;
    color: #38bdf8;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.excel-inline-add-col-btn:hover {
    color: #7dd3fc;
    transform: scale(1.15);
}

/* Row Number & Data Cells */
.excel-row-num-cell {
    background: #131d2e;
    text-align: center;
    width: 54px;
    font-family: monospace;
    font-size: 0.72rem;
    user-select: none;
}

.excel-cell-input {
    width: 100%;
    height: 32px;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    padding: 0 8px;
    font-size: 0.8rem;
    font-family: inherit;
    box-sizing: border-box;
}

.excel-cell-input:focus {
    background: #1e293b;
    box-shadow: inset 0 0 0 2px #38bdf8;
}

.excel-row-actions-cell {
    text-align: center;
}

/* Bottom Sheet Tabs Footer */
.studio-excel-footer-bar {
    height: 42px;
    min-height: 42px;
    background: #111827;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.85rem;
}

.studio-excel-sheet-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 0;
}

.excel-sheet-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-2);
    font-size: 0.76rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.excel-sheet-tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.excel-sheet-tab-btn.is-active {
    background: #1e293b;
    border-color: #38bdf8;
    color: #38bdf8;
    font-weight: 700;
}

.excel-sheet-tab-btn .mapped-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

.studio-excel-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-excel-row-count-lbl {
    font-size: 0.72rem;
    color: var(--text-3);
    font-family: monospace;
}

/* Resize Handles */
.excel-win-resize-handle {
    position: absolute;
    z-index: 100;
}
.res-n { top: 0; left: 6px; right: 6px; height: 6px; cursor: n-resize; }
.res-s { bottom: 0; left: 6px; right: 6px; height: 6px; cursor: s-resize; }
.res-w { left: 0; top: 6px; bottom: 6px; width: 6px; cursor: w-resize; }
.res-e { right: 0; top: 6px; bottom: 6px; width: 6px; cursor: e-resize; }
.res-nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nw-resize; }
.res-ne { top: 0; right: 0; width: 10px; height: 10px; cursor: ne-resize; }
.res-sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: sw-resize; }
.res-se { bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; }


/* ==========================================================================
   PROFESSIONAL AUTH ALERT BANNER STYLES
   ========================================================================== */
.auth-alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    line-height: 1.45;
    animation: authAlertSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-sizing: border-box;
}

@keyframes authAlertSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-alert-banner.is-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.16) 0%, rgba(185, 28, 28, 0.24) 100%);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.12);
}

.auth-alert-banner.is-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(180, 83, 9, 0.24) 100%);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fde68a;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}

.auth-alert-banner.is-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(4, 120, 87, 0.24) 100%);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #a7f3d0;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
}

.auth-alert-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-alert-banner.is-error .auth-alert-icon { color: #f87171; }
.auth-alert-banner.is-warning .auth-alert-icon { color: #fbbf24; }
.auth-alert-banner.is-success .auth-alert-icon { color: #34d399; }

.auth-alert-content {
    flex: 1;
    min-width: 0;
}

.auth-alert-title {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 2px;
}

.auth-alert-banner.is-error .auth-alert-title { color: #fee2e2; }
.auth-alert-banner.is-warning .auth-alert-title { color: #fef3c7; }
.auth-alert-banner.is-success .auth-alert-title { color: #ecfdf5; }

.auth-alert-msg {
    color: inherit;
    font-size: 0.78rem;
    word-break: break-word;
}

.auth-alert-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: opacity 0.15s ease;
}

.auth-alert-close:hover {
    opacity: 1;
}

/* Red outline on invalid input */
.auth-input-error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}


/* ==========================================================================
   ENTERPRISE STUDIO COCKPIT & LANDING PAGE UPGRADE STYLES
   ========================================================================== */
.hero-section {
    grid-template-columns: 1.15fr 1.1fr;
    gap: 3.5rem;
    padding: 5rem 2rem 3rem;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.studio-cockpit-frame {
    width: 100%;
    background: #090d16;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    position: relative;
    z-index: 3;
    animation: float 7s ease-in-out infinite;
}

.cockpit-top-bar {
    height: 42px;
    background: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

.cockpit-traffic-lights {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cockpit-traffic-lights .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.cockpit-title {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cockpit-badge-onair {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}

.cockpit-screen {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 0.85rem;
    padding: 0.85rem;
    background: #060a12;
}

.cockpit-col-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cockpit-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-3);
    text-transform: uppercase;
}

.cockpit-watchdog-item {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.w-item-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.w-item-left i {
    font-size: 1.2rem;
}

.w-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f1f5f9;
}

.w-sub {
    font-size: 0.62rem;
    color: var(--text-3);
}

.cockpit-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.cockpit-slot-pill {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    padding: 0.35rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
}

.cockpit-slot-pill.is-live {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
}

.slot-idx {
    font-size: 0.58rem;
    font-weight: 700;
    color: #38bdf8;
    font-family: monospace;
}

.cockpit-slot-pill.is-live .slot-idx {
    color: #34d399;
}

.slot-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-dot-mini {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

/* Right Panel: Video & Graphics Preview */
.cockpit-col-right {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cockpit-preview-screen {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.preview-raster-header {
    background: #111827;
    padding: 3px 8px;
    font-size: 0.62rem;
    font-family: monospace;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-video-area {
    height: 140px;
    position: relative;
    background: radial-gradient(circle at center, #1e293b 0%, #030712 100%);
    display: flex;
    align-items: flex-end;
    padding: 0.6rem;
    overflow: hidden;
}

.preview-backdrop-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 16px 16px;
}

.cockpit-live-lowerthird {
    width: 100%;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.95) 0%, rgba(2, 132, 199, 0.9) 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
    padding: 0.4rem 0.65rem;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;
    animation: fadeInLtView 0.3s ease;
}

.lt-channel-tag {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fde68a;
}

.lt-headline {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-top: 1px;
}

.lt-subline {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1px;
}

/* Audio Meters */
.cockpit-audio-meters {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 5px 8px;
}

.vu-channel {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vu-label {
    font-family: monospace;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-3);
    width: 10px;
}

.vu-meter-bar {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.vu-level-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #10b981 65%, #fbbf24 85%, #ef4444 100%);
    border-radius: 3px;
}

/* Ecosystem Strip */
.ecosystem-strip {
    max-width: 1200px;
    margin: 1rem auto 3.5rem;
    padding: 1.25rem 2rem;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.3) 0%, rgba(15, 23, 42, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    text-align: center;
}

.ecosystem-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-3);
    margin-bottom: 1rem;
}

.ecosystem-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.eco-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-2);
    font-weight: 500;
}

.eco-item i {
    font-size: 1.15rem;
    color: #38bdf8;
}

.eco-item strong {
    color: #f1f5f9;
}

@media (max-width: 900px) {
    .cockpit-screen {
        grid-template-columns: 1fr;
    }
    .hero-section {
        grid-template-columns: 1fr;
        padding-top: 3.5rem;
    }
}


/* ==========================================================================
   INTERACTIVE BROADCAST FEATURE STAGE STYLES
   ========================================================================== */
.features-section {
    max-width: 1200px;
    margin: 2rem auto 5rem;
    padding: 0 2rem;
}

.features-header-area {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.feature-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.4rem;
    max-width: 860px;
    margin: 0 auto 2rem;
    backdrop-filter: blur(12px);
    flex-wrap: wrap;
}

.feature-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feature-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.feature-tab-btn.is-active {
    background: #1e293b;
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.feature-tab-btn i {
    font-size: 1.15rem;
}

.feature-stage-container {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.feature-stage-panel {
    display: none;
    grid-template-columns: 1.1fr 1.2fr;
    gap: 2.5rem;
    align-items: center;
    animation: fadeInStage 0.3s ease;
}

.feature-stage-panel.is-active {
    display: grid;
}

@keyframes fadeInStage {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}

.stage-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 0.85rem;
}

.stage-desc {
    font-size: 0.92rem;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.stage-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.stage-points li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.45;
}

.stage-points li i {
    color: #34d399;
    font-size: 1.15rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.stage-points li strong {
    color: #f1f5f9;
}

/* Stage Mock Card Visuals */
.stage-mock-card {
    background: #090d16;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.stage-mock-hdr {
    height: 40px;
    background: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: #e2e8f0;
}

.stage-mock-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Node Diagram Mock */
.node-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.5rem 0;
}

.node-box {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    flex: 1;
    text-align: center;
}

.node-box.is-source { border-color: rgba(56, 189, 248, 0.4); }
.node-box.is-check { border-color: rgba(168, 85, 247, 0.4); }
.node-box.is-action { border-color: rgba(16, 185, 129, 0.4); }

.node-hdr {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.node-meta {
    font-size: 0.62rem;
    color: var(--text-3);
    margin-top: 2px;
    font-family: monospace;
}

.node-arrow {
    color: var(--text-3);
    font-size: 1.25rem;
}

.node-log-terminal {
    background: #020617;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    font-family: monospace;
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.6;
}

/* Rundown Mock */
.rundown-stepper-mock {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rundown-live-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid #10b981;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    color: #fff;
}

.row-num {
    font-family: monospace;
    font-weight: 700;
    color: #34d399;
    font-size: 0.8rem;
}

.row-text {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rundown-stepper-btns {
    display: flex;
    gap: 8px;
}

.stage-step-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-1);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.stage-step-btn.is-primary {
    background: #0284c7;
    border-color: #38bdf8;
    color: #fff;
}

/* Hybrid Routing Graphic */
.hybrid-routing-graphic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1rem 0;
}

.route-node {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: center;
    flex: 1;
}

.route-node i {
    font-size: 1.5rem;
    color: #38bdf8;
    margin-bottom: 4px;
}

.route-node div {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.route-node small {
    font-family: monospace;
    font-size: 0.65rem;
    color: var(--text-3);
}

.route-pipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.route-pipe span {
    font-size: 0.62rem;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 0.05em;
    font-family: monospace;
}

.pipe-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #38bdf8, #10b981);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

/* Ad Mock Rows */
.ad-mock-row {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ad-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f1f5f9;
}

.ad-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.ad-progress-fill {
    height: 100%;
    background: #38bdf8;
    border-radius: 3px;
}

.ad-stat {
    font-size: 0.65rem;
    color: var(--text-3);
    font-family: monospace;
    text-align: right;
}

@media (max-width: 900px) {
    .feature-stage-panel {
        grid-template-columns: 1fr;
    }
    .feature-tabs-bar {
        flex-direction: column;
        align-items: stretch;
    }
}


/* Rundown Showcase Mockup in Feature Switcher */
.rundown-showcase-card {
    background: #090e17 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}
.rundown-mock-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(15, 23, 42, 0.6);
}
.rundown-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rundown-icon-sq {
    width: 28px;
    height: 28px;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 6px;
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.rundown-head-txt {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.01em;
}
.rundown-sub-txt {
    font-size: 0.68rem;
    color: #94a3b8;
}
.rundown-time-badge {
    text-align: right;
    display: flex;
    flex-direction: column;
}
.rundown-time-badge .time-lbl {
    font-size: 0.58rem;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.rundown-time-badge .time-val {
    font-family: 'JetBrains Mono', monospace, monospace;
    font-size: 0.85rem;
    color: #34d399;
    font-weight: 700;
}
.rundown-mock-kpi-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.55rem 1rem;
    background: rgba(10, 15, 26, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}
.rundown-kpi-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.68rem;
    color: #cbd5e1;
}
.rundown-kpi-tag strong {
    color: #f1f5f9;
}
.rundown-kpi-tag.tag-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}
.rundown-kpi-tag.tag-warning strong {
    color: #fef08a;
}
.rundown-mock-grid {
    display: flex;
    flex-direction: column;
}
.rundown-row {
    display: grid;
    grid-template-columns: 85px 95px 1fr 65px;
    gap: 8px;
    align-items: center;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.75rem;
    transition: background 0.15s ease;
}
.rundown-row:hover {
    background: rgba(255, 255, 255, 0.02);
}
.rundown-row.is-played {
    opacity: 0.85;
}
.col-time {
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', monospace;
}
.col-time .txt-time {
    color: #94a3b8;
    font-size: 0.72rem;
}
.col-time .txt-dur {
    color: #475569;
    font-size: 0.65rem;
}
.rd-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
}
.pill-movie {
    background: rgba(217, 70, 239, 0.15);
    border: 1px solid rgba(217, 70, 239, 0.35);
    color: #f0abfc;
}
.pill-prog {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #7dd3fc;
}
.pill-dyn {
    background: rgba(14, 165, 233, 0.2);
    border: 1px solid rgba(14, 165, 233, 0.45);
    color: #38bdf8;
}
.pill-comm {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}
.col-item .rd-item-name {
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col-item .rd-item-sub {
    font-size: 0.65rem;
    color: #64748b;
}
.rd-status-pill {
    font-size: 0.62rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
}
.rundown-gap-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: repeating-linear-gradient(45deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.08) 10px, rgba(15, 23, 42, 0.8) 10px, rgba(15, 23, 42, 0.8) 20px);
    border-top: 1px dashed rgba(245, 158, 11, 0.4);
    border-bottom: 1px dashed rgba(245, 158, 11, 0.4);
    font-size: 0.72rem;
    gap: 8px;
    flex-wrap: wrap;
}
.gap-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fcd34d;
}
.gap-actions {
    display: flex;
    gap: 6px;
}
.gap-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: default;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fef08a;
}
.gap-btn-pill.fill-highlight {
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(56, 189, 248, 0.4);
    color: #bae6fd;
}


/* ==========================================================================
   HERO MASTER STATION RUNDOWN COCKPIT STYLES
   ========================================================================== */
.hero-rundown-cockpit {
    width: 100%;
    background: #090e17;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    position: relative;
    z-index: 3;
    animation: float 7s ease-in-out infinite;
    font-size: 0.78rem;
}

.hero-rundown-topbar {
    height: 48px;
    background: #0d1524;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

.hero-rundown-top-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-rundown-brand-sq {
    width: 30px;
    height: 30px;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 6px;
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.hero-rundown-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
}

.hero-rundown-sub {
    font-size: 0.65rem;
    color: #94a3b8;
}

.hero-rundown-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-rundown-clock {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.hero-rundown-clock .clock-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #64748b;
}

.hero-rundown-clock .clock-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #34d399;
}

.hero-onair-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.03em;
}

.hero-rundown-controls-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(15, 23, 42, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
    gap: 8px;
}

.hero-ctrl-left, .hero-ctrl-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-rundown-dropdown-mock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
}

.hero-btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #0ea5e9;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: default;
    box-shadow: none;
}

.hero-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: 4px;
}

.hero-date-picker-mock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.7rem;
    color: #cbd5e1;
    font-family: monospace;
}

.hero-btn-tag-pill {
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 0.68rem;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hero-rundown-kpi-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 1rem;
    background: #070b12;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.hero-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 0.68rem;
    color: #94a3b8;
}

.hero-kpi-pill strong {
    color: #f1f5f9;
}

.hero-kpi-pill.kpi-hazard {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

.hero-kpi-pill.kpi-hazard strong {
    color: #fef08a;
}

.hero-kpi-pill.pill-lan-speed {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.hero-kpi-pill.pill-lan-speed strong {
    color: #6ee7b7;
}

.hero-rundown-table-header {
    display: grid;
    grid-template-columns: 110px 80px 105px 1fr 75px 85px 60px;
    padding: 0.4rem 1rem;
    background: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #64748b;
    text-transform: uppercase;
}

.hero-rundown-rows-container {
    max-height: 290px;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

.hero-rd-row {
    display: grid;
    grid-template-columns: 110px 80px 105px 1fr 75px 85px 60px;
    align-items: center;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.72rem;
    transition: background 0.15s ease;
}

.hero-rd-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.hero-rd-row.is-played {
    opacity: 0.7;
}

.hero-rd-row.is-current-air {
    background: rgba(14, 165, 233, 0.08);
    border-left: 3px solid #38bdf8;
    padding-left: calc(1rem - 3px);
}

.rh-time {
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', monospace;
}

.rh-time .t-main {
    font-weight: 600;
    color: #cbd5e1;
    font-size: 0.72rem;
}

.rh-time .t-main.t-live {
    color: #38bdf8;
}

.rh-time .t-sub {
    font-size: 0.62rem;
    color: #64748b;
}

.rh-dur {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #94a3b8;
}

.hero-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.hero-type-pill.type-movie {
    background: rgba(217, 70, 239, 0.14);
    border: 1px solid rgba(217, 70, 239, 0.35);
    color: #f0abfc;
}

.hero-type-pill.type-program {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #7dd3fc;
}

.hero-type-pill.type-dynamic {
    background: rgba(14, 165, 233, 0.2);
    border: 1px solid rgba(14, 165, 233, 0.45);
    color: #38bdf8;
}

.hero-type-pill.type-commercial {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

.rh-title .item-name {
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rh-title .item-meta {
    font-size: 0.62rem;
    color: #64748b;
}

.rh-source {
    color: #94a3b8;
    font-size: 0.7rem;
}

.hero-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 600;
}

.hero-stat-badge.stat-played {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #64748b;
}

.hero-stat-badge.stat-live {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #34d399;
}

.hero-stat-badge.stat-queued {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
}

.rh-actions {
    display: flex;
    gap: 4px;
    color: #64748b;
}

.action-icon-tool {
    cursor: default;
    padding: 2px;
    border-radius: 3px;
    font-size: 0.85rem;
}

.action-icon-tool.is-active-tool {
    color: #38bdf8;
}

.hero-rd-hazard-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: repeating-linear-gradient(45deg, rgba(245, 158, 11, 0.09), rgba(245, 158, 11, 0.09) 10px, rgba(15, 23, 42, 0.85) 10px, rgba(15, 23, 42, 0.85) 20px);
    border-top: 1px dashed rgba(245, 158, 11, 0.4);
    border-bottom: 1px dashed rgba(245, 158, 11, 0.4);
    gap: 8px;
    flex-wrap: wrap;
}

.hazard-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hazard-pulse-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.hazard-title {
    font-family: monospace;
    font-weight: 700;
    color: #fbbf24;
    font-size: 0.72rem;
    display: block;
}

.hazard-desc {
    color: #fde68a;
    font-size: 0.65rem;
}

.hazard-quick-actions {
    display: flex;
    gap: 5px;
}

.hazard-btn {
    border: none;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hazard-btn.btn-ins {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fef08a;
}

.hazard-btn.btn-dyn {
    background: rgba(14, 165, 233, 0.25);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #bae6fd;
}

.hazard-btn.btn-ai {
    background: rgba(168, 85, 247, 0.25);
    border: 1px solid rgba(168, 85, 247, 0.45);
    color: #e9d5ff;
}

.hero-rundown-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 1rem;
    background: #080d15;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.62rem;
    color: #64748b;
}

.hero-rundown-footer-bar .footer-left {
    display: flex;
    gap: 12px;
}

@media (max-width: 1100px) {
    .hero-rundown-table-header, .hero-rd-row {
        grid-template-columns: 90px 70px 85px 1fr 65px;
    }
    .rh-source, .rh-actions {
        display: none;
    }
}


/* ==========================================================================
   FEATURE STAGE TYPOGRAPHY & ALIGNMENT FIXES
   ========================================================================== */
.stage-info-col {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stage-info-col .stage-badge {
    align-self: flex-start;
    margin-bottom: 0.85rem;
}

.stage-info-col .stage-title {
    text-align: left !important;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.stage-info-col .stage-desc {
    text-align: left !important;
    font-size: 0.95rem;
    color: var(--text-2);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.stage-info-col .stage-points {
    text-align: left !important;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
}

.stage-info-col .stage-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-2);
    line-height: 1.55;
    text-align: left !important;
}

.stage-info-col .stage-points li i {
    color: #34d399;
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.stage-info-col .stage-points li div {
    flex: 1;
}

.stage-info-col .stage-points li strong {
    color: #f8fafc;
    font-weight: 600;
    margin-right: 4px;
}


        /* Smooth scrolling with sticky header offset */
        html {
            scroll-behavior: smooth;
        }
        section[id], div[id] {
            scroll-margin-top: 80px;
        }


/* ==========================================================================
   MULTI-PC CONTROL EMPTY STATE & ONBOARDING GUIDE
   ========================================================================== */
.empty-machines-sidebar-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px dashed rgba(56, 189, 248, 0.25);
    border-radius: 8px;
    padding: 0.85rem;
    margin: 0.5rem 0.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.empty-m-icon {
    width: 32px;
    height: 32px;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 6px;
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.empty-m-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f1f5f9;
}
.empty-m-desc {
    font-size: 0.68rem;
    color: var(--text-3);
    line-height: 1.35;
    margin-bottom: 4px;
}
.empty-m-btn {
    background: rgba(14, 165, 233, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 5px;
    color: #7dd3fc;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}
.empty-m-btn:hover {
    background: rgba(14, 165, 233, 0.35);
    color: #fff;
    border-color: #38bdf8;
}

/* Full Main Stage Multi-PC Guide */
.multi-pc-guide-stage {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 980px;
    animation: fadeInStage 0.3s ease;
}
.multi-pc-guide-header {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.75rem 2rem;
}
.guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
.guide-hero-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
}
.guide-hero-desc {
    font-size: 0.92rem;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}
.guide-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.guide-step-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.guide-step-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
}
.guide-step-card.highlight-step {
    border-color: rgba(56, 189, 248, 0.4);
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.06) 0%, rgba(19, 23, 32, 1) 100%);
}
.step-num-pill {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
}
.step-num-pill.pill-accent {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.35);
}
.step-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #38bdf8;
    margin-bottom: 1.2rem;
}
.step-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}
.step-card-desc {
    font-size: 0.82rem;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 1.25rem 0;
    flex: 1;
}
.step-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.step-action-btn.primary-action {
    background: #0ea5e9;
    color: #fff;
    border: none;
}
.step-action-btn.primary-action:hover {
    background: #0284c7;
}
.guide-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #090e17;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.82rem;
    color: #38bdf8;
    word-break: break-all;
}
.step-indicator-waiting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-2);
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}
.guide-pro-tip-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    padding: 1.25rem;
}


/* ==========================================================================
   LOWER THIRDS ENHANCED STUDIO UI: COLLAPSIBLE SIDEBAR, PINNED TOPBAR, DEDICATED DETAIL HEIGHT
   ========================================================================== */

/* 1. Desktop & Mobile Collapsible Sidebar */
#toggle-sidebar-btn {
    display: inline-flex !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
#toggle-sidebar-btn:hover {
    border-color: #38bdf8;
    color: #fff;
    background: rgba(56, 189, 248, 0.12);
}

.sidebar {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s ease !important;
}

@media (min-width: 769px) {
    .dash-layout.sidebar-collapsed .sidebar {
        width: 60px !important;
        padding: 0.85rem 0.35rem !important;
        overflow-x: hidden !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .sidebar-section-label {
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0.2rem 0;
        overflow: hidden;
    }
    .dash-layout.sidebar-collapsed .sidebar .menu-item {
        width: 44px !important;
        height: 44px !important;
        margin: 0 auto 0.25rem !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        border-radius: 8px !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        /* Eliminate all direct text node rendering */
        font-size: 0 !important;
        color: transparent !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .menu-item i {
        font-size: 1.35rem !important;
        color: var(--text-2) !important;
        margin: 0 !important;
        line-height: 1 !important;
        display: block !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .menu-item:hover i {
        color: #fff !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .menu-item.active i {
        color: #38bdf8 !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .menu-item span:not(.status-pill):not(.dot) {
        display: none !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .machine-header {
        width: 44px !important;
        height: 44px !important;
        margin: 0 auto 0.25rem !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .machine-header .status-pill {
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .machine-header .status-pill .dot {
        width: 7px !important;
        height: 7px !important;
        border: 1.5px solid #0e1117 !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .machine-header .bx-chevron-down {
        display: none !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .sub-menu {
        padding-left: 0 !important;
        align-items: center !important;
        width: 100% !important;
        border-left: none !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .sub-item {
        width: 38px !important;
        height: 38px !important;
        margin: 0 auto 0.2rem !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 6px !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .sub-item i {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }
    .dash-layout.sidebar-collapsed .sidebar .empty-machines-sidebar-card {
        padding: 0.5rem 0.15rem;
    }
    .dash-layout.sidebar-collapsed .sidebar .empty-machines-sidebar-card .empty-m-title,
    .dash-layout.sidebar-collapsed .sidebar .empty-machines-sidebar-card .empty-m-desc,
    .dash-layout.sidebar-collapsed .sidebar .empty-machines-sidebar-card .empty-m-btn span {
        display: none !important;
    }
}

/* 2. Pinned Sticky Highlighted Topbar (Quick Search, Open Studio Canvas, Clear Slots) */
.tele-filter-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    background: rgba(11, 20, 38, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65) !important;
    border-radius: var(--radius);
    padding: 0.55rem 0.85rem !important;
    margin-bottom: 1.15rem !important;
}

/* 3. Dedicated Independent Full-Height Right Detail Panel (Doesn't scroll away with cards) */
.telemetry-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.75fr) minmax(360px, 1fr) !important;
    gap: 1.25rem !important;
    align-items: start !important;
    position: relative !important;
}

.telemetry-main-col {
    min-width: 0 !important;
}

.telemetry-side-col {
    position: sticky !important;
    top: 0 !important;
    max-height: calc(100vh - var(--header-h) - 2rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 35 !important;
    border-radius: var(--radius);
}

.telemetry-side-col::-webkit-scrollbar {
    width: 5px;
}
.telemetry-side-col::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.25);
    border-radius: 999px;
}
.telemetry-side-col::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.45);
}

.tele-live-editor-card {
    height: 100% !important;
    max-height: calc(100vh - var(--header-h) - 2rem) !important;
    overflow-y: auto !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7) !important;
}

.tele-inspector-card {
    position: sticky !important;
    top: 0 !important;
    max-height: calc(100vh - var(--header-h) - 2rem) !important;
    overflow-y: auto !important;
}

@media (max-width: 1080px) {
    .telemetry-layout {
        grid-template-columns: 1fr !important;
    }
    .telemetry-side-col {
        position: static !important;
        max-height: none !important;
    }
    .tele-live-editor-card {
        max-height: none !important;
    }
}


/* ==========================================================================
   COMPACT BROADCAST CONSOLE HEADER & HIGH-DENSITY TOOLBAR STYLES
   ========================================================================== */

/* 1. Slim Global Topbar (Reduced from 56px to 44px) */
:root {
    --header-h: 44px !important;
}

.topbar {
    height: 44px !important;
    padding: 0 1rem !important;
    gap: 0.75rem !important;
}

.topbar-logo {
    font-size: 1.05rem !important;
}

.avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.7rem !important;
}

/* 2. Hide Redundant Page Header inside Machine Section */
#machine-section .page-hdr {
    display: none !important;
}

.main-content {
    padding: 0.85rem 1.25rem 1.5rem !important;
}

/* 3. Ultra-Slim Single-Line Machine Status Bar */
.machine-hero-banner.compact-hero-bar {
    padding: 0.45rem 0.85rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    gap: 0.75rem !important;
    background: #0d131f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.compact-hero-bar .machine-hero-left {
    gap: 0.5rem !important;
}

.compact-hero-bar .machine-hero-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    gap: 0.5rem !important;
}

.compact-hero-bar .rename-pc-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.78rem !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-3) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}
.compact-hero-bar .rename-pc-btn:hover {
    color: #38bdf8 !important;
    border-color: #38bdf8 !important;
}

.compact-hero-bar .status-pill {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    gap: 0.3rem !important;
}

.compact-hero-bar .status-pill .dot {
    width: 7px !important;
    height: 7px !important;
}

.lan-direct-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.compact-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem !important;
    flex-wrap: wrap;
}

.compact-kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 4px;
}

.compact-kpi-chip i {
    color: #38bdf8;
    font-size: 0.85rem;
}

.compact-kpi-chip strong {
    color: #f1f5f9;
}

.compact-sync-time {
    font-size: 0.68rem;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: monospace;
}

/* 4. Streamlined Pinned Action Bar */
.tele-filter-bar {
    padding: 0.35rem 0.65rem !important;
    margin-bottom: 0.75rem !important;
    min-height: 38px !important;
    gap: 0.5rem !important;
}

.tele-filter-input {
    font-size: 0.8rem !important;
}

.tele-filter-bar .btn {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.76rem !important;
    border-radius: 5px !important;
    gap: 0.25rem !important;
}


/* ==========================================================================
   CLEAN IN-COLUMN STICKY BOTTOM ACTION DECK STYLES
   ========================================================================== */

.telemetry-main-col {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - var(--header-h) - 40px) !important;
    position: relative !important;
    min-width: 0 !important;
}

#tele-content-list {
    flex: 1 0 auto !important;
    min-height: 220px !important;
    margin-bottom: 0.85rem !important;
}

/* 100% Contained Sticky Bottom Bar: Never bridges parent column borders */
.tele-filter-bar.bottom-docked-filter-bar {
    position: sticky !important;
    bottom: 0.75rem !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
    background: rgba(11, 20, 38, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75) !important;
    border-radius: 10px !important;
    padding: 0.4rem 0.85rem !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    min-height: 42px !important;
}

.bottom-docked-filter-bar .tele-filter-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    flex: 1 !important;
    min-width: 80px !important;
}

.bottom-docked-filter-bar .tele-filter-input::placeholder {
    color: var(--text-3) !important;
}

.bottom-docked-filter-bar .btn {
    padding: 0.35rem 0.85rem !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Floating Inspector Button */
.telemetry-floating-inspector-btn {
    display: none !important;
    position: fixed !important;
    bottom: 1.25rem !important;
    right: 1.5rem !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #0ea5e9 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 95 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.telemetry-floating-inspector-btn i {
    font-size: 1.4rem !important;
    line-height: 1 !important;
}

.telemetry-floating-inspector-btn:hover {
    background: #0284c7 !important;
    transform: scale(1.08) !important;
}

.telemetry-floating-inspector-btn.is-active {
    display: flex !important;
}

/* ==========================================================================
   PROBLEM VS SOLUTION & USE CASES STYLES
   ========================================================================== */
.problem-solution-section {
    max-width: 1240px;
    margin: 4.5rem auto 3.5rem;
    padding: 0 1.5rem;
}
.ps-header-area {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 3rem;
}
.ps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.ps-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.65) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.ps-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.3);
}
.ps-card-side {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.ps-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}
.problem-pill {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.solution-pill {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.ps-card-side h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: #f8fafc;
}
.ps-problem h4 {
    color: #fca5a5;
}
.ps-solution h4 {
    color: #6ee7b7;
}
.ps-card-side p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}
.ps-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    color: #38bdf8;
    font-size: 1.25rem;
    margin: 0.25rem 0;
}
/* Use Cases Strip */
.use-cases-strip {
    max-width: 1240px;
    margin: 2rem auto 4.5rem;
    padding: 0 1.5rem;
}
.use-cases-container {
    background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.08) 0%, rgba(15, 23, 42, 0.4) 100%);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 16px;
    padding: 3rem 2.5rem;
}
.uc-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2.5rem;
}
.uc-tag {
    font-size: 0.725rem;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}
.uc-heading h3 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}
.uc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.uc-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.uc-box:hover {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, 0.3);
}
.uc-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
.uc-box h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}
.uc-box p {
    font-size: 0.825rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

@media (max-width: 992px) {
    .ps-grid {
        grid-template-columns: 1fr;
    }
    .uc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .uc-grid {
        grid-template-columns: 1fr;
    }
    .use-cases-container {
        padding: 2rem 1.25rem;
    }
}

/* ==========================================================================
   MOBILE HOMEPAGE FIXES: ZERO HORIZONTAL OVERFLOW & FLUID CARDS
   ========================================================================== */

/* 1. Prevent global document horizontal viewport stretching */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}
#landing-view {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 2. Tablets & Mobile Breakpoint (<= 992px) */
@media (max-width: 992px) {
    .hero-section {
        grid-template-columns: 1fr !important;
        padding: 4rem 1.25rem 2.5rem !important;
        gap: 2.5rem !important;
        overflow: hidden;
    }
    .hero-visual {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hero-rundown-cockpit {
        animation: none !important; /* disable hover float on mobile to prevent layout jitter */
        min-width: 580px; /* retain readable grid structure inside scroll container */
    }
    .feature-stage-panel {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .stage-visual-col {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .stage-mock-card {
        min-width: 540px;
    }
    .feature-stage-container {
        padding: 1.5rem !important;
    }
    .ps-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 3. Small Mobile Devices (<= 640px) */
@media (max-width: 640px) {
    /* Header navigation bar */
    .landing-header {
        padding: 0.85rem 1rem !important;
    }
    .landing-logo {
        font-size: 1.15rem !important;
    }
    .landing-nav {
        display: none !important;
    }
    .btn-hero-portal, #landing-portal-btn {
        font-size: 0.8rem !important;
        padding: 0.45rem 0.85rem !important;
    }

    /* Hero typography and call-to-actions */
    .hero-title {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
    }
    .hero-subtitle {
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
    }
    .hero-ctas {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
    }
    .hero-ctas .btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0.75rem 1rem !important;
    }
    .hero-stats-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    .hero-stat {
        padding: 0.65rem 0.5rem !important;
    }
    .hero-stat .num {
        font-size: 1.35rem !important;
    }
    .hero-stat .lbl {
        font-size: 0.65rem !important;
    }

    /* Wrap the Hero Rundown Cockpit in horizontal scrollable wrapper */
    .hero-visual {
        position: relative;
        padding-bottom: 0.5rem;
    }
    .hero-rundown-cockpit {
        min-width: 520px;
    }

    /* Ecosystem Integrations Strip */
    .ecosystem-strip {
        padding: 1rem 0.85rem !important;
        margin: 1.5rem auto 2.5rem !important;
    }
    .ecosystem-title {
        font-size: 0.68rem !important;
        line-height: 1.4 !important;
    }
    .ecosystem-logos {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.65rem 1rem !important;
        justify-content: center !important;
    }
    .eco-item {
        font-size: 0.75rem !important;
    }

    /* Problem vs Solution Section */
    .problem-solution-section {
        margin: 2.5rem auto 2rem !important;
        padding: 0 1rem !important;
    }
    .ps-header-area .section-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    .ps-header-area .section-subtitle {
        font-size: 0.85rem !important;
    }
    .ps-card {
        padding: 1.15rem 1rem !important;
    }
    .ps-card-side h4 {
        font-size: 0.98rem !important;
    }
    .ps-card-side p {
        font-size: 0.82rem !important;
    }

    /* Use Cases Grid */
    .use-cases-strip {
        padding: 0 1rem !important;
        margin: 1.5rem auto 3rem !important;
    }
    .use-cases-container {
        padding: 1.75rem 1rem !important;
    }
    .uc-heading h3 {
        font-size: 1.35rem !important;
    }
    .uc-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .uc-box {
        padding: 1.15rem 1rem !important;
    }

    /* Feature Tabs Bar */
    .features-section {
        padding: 0 1rem !important;
        margin: 1.5rem auto 3rem !important;
    }
    .features-header-area .section-title {
        font-size: 1.5rem !important;
    }
    .feature-tabs-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        padding: 0.35rem !important;
        max-width: 100% !important;
    }
    .feature-tab-btn {
        flex-shrink: 0 !important;
        padding: 0.5rem 0.85rem !important;
        font-size: 0.78rem !important;
    }
    .feature-stage-container {
        padding: 1.25rem 1rem !important;
        border-radius: 12px !important;
    }
    .stage-title {
        font-size: 1.3rem !important;
    }
    .stage-desc {
        font-size: 0.85rem !important;
    }
    .stage-points li {
        font-size: 0.8rem !important;
    }

    /* Download Card */
    .download-section {
        padding: 0 1rem !important;
        margin: 2rem auto 3rem !important;
    }
    .download-card {
        padding: 2rem 1.25rem !important;
        text-align: center !important;
    }
    .download-card h2 {
        font-size: 1.45rem !important;
        line-height: 1.3 !important;
    }
    .download-card p {
        font-size: 0.85rem !important;
    }
    .btn-lg {
        width: 100% !important;
        font-size: 0.88rem !important;
        padding: 0.85rem 1rem !important;
    }

    /* Footer */
    .landing-footer {
        padding: 2rem 1rem !important;
        text-align: center !important;
    }
    .footer-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem 1.25rem !important;
    }
}