:root {
      --bg: #000f33;
      --bg-2: #061745;
      --card: #0b1b44;
      --card-2: #0f2353;
      --text: #eaf4ff;
      --muted: #9fb3d8;
      --accent: #00d9ff;
      --accent-2: #007bff;
      --violet: #9370db;
      --violet-2: #6a5acd;
      --success: #3ccf7e;
      --warning: #ffd166;
      --danger: #ff6b6b;
      --border: #1b2b5f;
    }

    * { box-sizing: border-box; }

    body { font-family: 'Segoe UI', sans-serif; background: radial-gradient(1200px 800px at 10% 0%, #061a4d 0%, var(--bg) 55%, #000a24 100%); color: var(--text); padding: 40px; padding-bottom: 100px; }
    .container { max-width: 1200px; margin: 0 auto; }
    
    h1 { margin-bottom: 30px; text-align: center; }
    
    .app-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand-logo-wrap { position: relative; display: inline-block; }
    .brand-logo { width: 140px; height: auto; filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.35)); }
    .beta-pill { position: absolute; right: -6px; bottom: -4px; background: #c62828; color: #fff; font-size: 0.65em; font-weight: 700; padding: 2px 6px; border-radius: 8px; border: 1px solid #b71c1c; letter-spacing: 0.4px; }
    .account-badge { font-size: 0.9em; color: #e0ffff; font-weight: bold; background: rgba(0, 217, 255, 0.12); padding: 5px 10px; border-radius: 4px; border: 1px solid var(--accent); }
    .top-nav { display:flex; gap: 10px; }
    .nav-toggle { display: none; align-items: center; justify-content: center; background: #0b173a; color: var(--text); border: 1px solid var(--border); width: 44px; height: 44px; border-radius: 8px; font-size: 1.3em; }

    .about-card { background: linear-gradient(180deg, var(--card) 0%, #0b173a 100%); border: 1px solid var(--border); border-radius: 10px; padding: 25px; line-height: 1.55; }
    .about-section { margin-top: 20px; padding-top: 15px; border-top: 1px solid #444; }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .about-list { margin: 8px 0 0; padding-left: 18px; }
    .about-note { background: #222; border: 1px solid #444; padding: 12px; border-radius: 8px; }
    .about-cta { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; }

    @media (max-width: 900px) {
        .about-grid { grid-template-columns: 1fr; }
    }
    
    /* UTILS */
    .hidden { display: none !important; }
    button { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; color:#071225; background: linear-gradient(135deg, var(--accent) 0%, #e0ffff 100%); transition: filter 0.2s, transform 0.15s; box-shadow: 0 0 0 rgba(0,0,0,0); }
    button:hover { filter: brightness(1.1); }
    button:active { transform: translateY(1px); }
    button.secondary { color: var(--text); background: linear-gradient(135deg, #1a295a 0%, #142351 100%); border: 1px solid var(--border); }
    button.success { color: #041b12; background: linear-gradient(135deg, var(--success) 0%, #bfffdc 100%); }
    button.danger { color: #2a0b0b; background: linear-gradient(135deg, var(--danger) 0%, #ffd1d1 100%); }
    input, select { padding: 10px; border-radius: 6px; border: 1px solid var(--border); background: #050f2c; color: var(--text); width: 100%; }
    input.setting-val[type="color"] { min-width: 20px; }
    input[type="checkbox"] { width: auto; }

    /* --- LANDING PAGE --- */
    #landingView { display: flex; gap: 20px; justify-content: center; margin-top: 50px; flex-wrap: wrap; padding: 0 20px; }
    .landing-readme { width: 100%; display: flex; justify-content: center; margin-top: 10px; }
    .readme-btn { padding: 8px 14px; font-size: 0.9em; }
    .landing-card { 
        background: var(--card); border: 1px solid var(--border); padding: 30px; border-radius: 10px; 
        width: 100%; max-width: 300px; text-align: center; cursor: pointer; transition: transform 0.2s; 
    }
    .landing-card:hover { transform: translateY(-5px); border-color: var(--accent); }
    .landing-icon { font-size: 40px; margin-bottom: 15px; display: block; }

    /* --- WIZARD STEPS --- */
    .step-block { margin-bottom: 20px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #091735; }
    .step-header { background: #0f234f; padding: 15px; cursor: pointer; font-weight: 600; display:flex; justify-content:space-between; }
    .step-header.active { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: white; }
    .step-content { padding: 20px; display: none; }
    .step-content.visible { display: block; }

    /* --- ACCOUNT MANAGER --- */
    .account-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
    .account-actions { margin-top: 15px; display: flex; gap: 10px; border-top: 1px solid var(--border); padding-top: 15px; flex-wrap: wrap; }

    /* --- SHOW LIBRARY --- */
    .lib-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
    .saved-show-row { 
        display: flex; justify-content: space-between; align-items: center; background: #0f234f; 
        padding: 15px; border-radius: 6px; margin-bottom: 10px; border: 1px solid var(--border); 
    }
    .saved-show-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
    .saved-show-title strong { word-break: break-word; }
    .saved-show-meta { font-size: 0.8em; color: #aaa; }
    .saved-show-actions { display: flex; gap: 10px; }
    .overlap-banner { background: rgba(255, 193, 7, 0.12); border: 1px solid #ffc107; color: #ffd166; padding: 12px; border-radius: 8px; margin: 10px 0 20px; }
    .overlap-banner strong { color: #ffe08a; }
    .warn-icon { color: #ffc107; font-weight: bold; margin-left: 8px; cursor: pointer; }

    /* --- COMPOSER LAYOUT --- */
    #composerView.hidden, #libraryView.hidden, #aboutView.hidden, #dashboardView.hidden { display: none !important; }
    .composer-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
    .settings-panel { background: #0a1738; padding: 20px; border-radius: 8px; border: 1px solid var(--border); position: relative; top: auto; width: 100%; }
    .settings-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
    .settings-span-12 { grid-column: span 12; }
    .settings-span-6 { grid-column: span 6; }
    .settings-span-4 { grid-column: span 4; }
    .settings-span-3 { grid-column: span 3; }
    .settings-row { display: flex; gap: 10px; align-items: center; }
    .settings-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .settings-card { background: #07122e; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
    .settings-title { font-size: 0.85em; color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

    @media (max-width: 900px) {
      .settings-span-6, .settings-span-4, .settings-span-3 { grid-column: span 12; }
      .settings-split { grid-template-columns: 1fr; }
    }
    
    .form-group { margin-bottom: 15px; }
    .form-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

    /* API ESTIMATOR BOX */
    #apiEstimator {
        margin-top: 20px; padding: 15px; border-radius: 6px; background: rgba(0, 10, 36, 0.6); border: 1px solid var(--border); font-size: 0.9em;
    }
    .est-val { font-weight: bold; font-size: 1.1em; display:block; margin-top:5px; }
    .est-good { color: #4cd16b; }
    .est-warn { color: #ffc107; }
    .est-bad { color: #dc3545; }

    /* 3-3-1 DAY GRID */
    .day-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .day-label { background: #0f234f; text-align: center; padding: 10px 0; border-radius: 4px; cursor: pointer; border: 1px solid var(--border); font-size: 0.8em; user-select: none; display: block; width: 100%; transition: background 0.2s; }
    .day-check:checked + .day-label { background: var(--accent); color: white; border-color: var(--accent); }
    .day-check { display: none; }
    .day-grid label:last-child { grid-column: 2; } 

    /* THEME STRIP */
    .theme-bar { 
        display: flex; gap: 10px; padding-bottom: 10px; margin-bottom: 15px; 
        flex-wrap: wrap; /* Updated Phase 26 */
    }
    .theme-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
    .theme-card { 
        min-width: 120px; background: #0f234f; padding: 10px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border); text-align: center; position: relative; 
        user-select: none;
    }
    .theme-card.add { background: linear-gradient(135deg, #1a2f6f 0%, #123060 100%); border-color: #2b5fb8; color: #e6f4ff; }
    .theme-arrow { align-self: center; color: #5bbcff; font-size: 18px; opacity: 0.7; }
    .theme-card.post { border-style: dashed; border-color: #3ccf7e; background: linear-gradient(135deg, rgba(60,207,126,0.12), rgba(11,27,68,0.8)); }
    .theme-card.post.flash-green { border-color: #3ccf7e; box-shadow: 0 0 0 2px rgba(60, 207, 126, 0.8); }
    .post-action-group { display: flex; gap: 8px; flex-wrap: wrap; }
    .post-action-group button.active { background: linear-gradient(135deg, var(--accent) 0%, #e0ffff 100%); color: #071225; }
    .theme-card.active { border-color: var(--accent); background: linear-gradient(135deg, rgba(0, 217, 255, 0.18), rgba(147, 112, 219, 0.15)); }
    .theme-move { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
    .move-btn { min-width: 28px; padding: 4px 8px; font-size: 0.8em; background: #0b173a; color: var(--text); border: 1px solid var(--border); }
    .move-btn:hover { filter: brightness(1.1); }
    /* Wrap long names only if >20 chars approximately */
    .theme-card span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; display:block; margin: 0 auto; }

    .theme-del { position: absolute; top: -5px; right: -5px; background: var(--danger); width: 20px; height: 20px; border-radius: 50%; display: none; line-height: 20px; font-size: 12px; }
    .theme-card:hover .theme-del { display: block; }

    /* DEVICE ROW (COMPOSER) */
    .device-row { display: flex; align-items: center; gap: 15px; background: var(--card); padding: 15px; margin-bottom: 10px; border-radius: 6px; border: 1px solid var(--border); }
    .device-row.ignored { opacity: 0.5; }
    .device-row.slaved { opacity: 0.6; pointer-events: none; border-style: dashed; }
    
    .dev-info { width: 220px; }
    .dev-name { font-weight: bold; display: block; font-size: 0.95em; }
    .dev-meta { font-size: 0.8em; color: var(--muted); }
    .sync-box { font-size: 0.8em; color: var(--accent); cursor: pointer; display: block; margin-top: 5px; }

    .dev-controls { flex-grow: 1; display: flex; gap: 15px; align-items: center; }
    .control-select { min-width: 32px; }

    .slider-container { width: 150px; text-align: center; } /* Increased width Phase 26 */
    .slider-val { font-size: 0.7em; color: var(--muted); display: block; text-align: left; }
    input[type=range] { width: 100%; height: 5px; padding: 0; }

    /* DASHBOARD CARDS */
    .dash-card { background: var(--card); border: 1px solid var(--border); padding: 15px; border-radius: 8px; margin-bottom: 0; display:flex; flex-direction:column; gap:10px; }
    .dash-card.offline { opacity: 0.6; }
    .dash-card.flash { border-color: #2fd3ff; box-shadow: 0 0 12px rgba(0, 217, 255, 0.35); }
    .card.flash { border-color: #2fd3ff; box-shadow: 0 0 12px rgba(0, 217, 255, 0.35); }
    .dash-row { display:flex; justify-content:space-between; align-items:center; }
    .dash-meta { margin: 8px 0 4px; font-size: 0.75em; color: #9ab2ff; }
    .dash-controls { display:flex; flex-direction:column; gap:10px; margin-top:5px; }
    .dash-control-row { display:flex; gap:10px; align-items:center; }
    .dash-progress { height: 6px; background: #0b173a; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 10px; display: none; opacity: 0; transition: opacity 0.6s ease; }
    .dash-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.3s ease; }

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    contain: content;
    content-visibility: auto;
    contain-intrinsic-size: 1200px;
} /* Slightly wider minmax Phase 26 */

    .schedule-table { width: 100%; border-collapse: collapse; }
    .schedule-table th, .schedule-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.9em; word-break: break-word; }
    .schedule-table th { color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.75em; }
    .schedule-status { display: inline-flex; align-items: center; gap: 6px; }
    .history-list { display: flex; flex-direction: column; gap: 8px; }
    .history-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border-bottom: 1px solid var(--border); }
    .history-meta { color: var(--muted); font-size: 0.8em; word-break: break-word; }

    /* CUSTOM POPUP */
    .custom-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 5000; display: none; align-items: center; justify-content: center; }
    .custom-popup { background: #0b173a; padding: 20px; border-radius: 8px; border: 1px solid var(--border); width: 400px; max-width: 90%; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
    .popup-msg { font-size: 1.1em; margin-bottom: 20px; color: white; }
    .popup-btns { display: flex; justify-content: center; gap: 10px; }

    /* MODAL */
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
    .modal { background: #0b173a; width: 600px; max-height: 80vh; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
    .tabs { display: flex; background: #0f234f; border-bottom: 1px solid var(--border); }
    .tab { flex: 1; padding: 10px; text-align: center; cursor: pointer; color: var(--muted); }
    .tab.active { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: white; }
    .modal-body { padding: 0; overflow-y: auto; flex-grow: 1; }
    .tab-content { display: none; padding: 15px; }
    .tab-content.active { display: block; }
    .scene-item { padding: 10px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; font-size: 0.9em; }

    /* UTILS */
    .pill { background: #0b173a; padding: 3px 8px; border-radius: 4px; color: var(--muted); font-size: 0.8em; border: 1px solid transparent; cursor: pointer; }
    .pill.good { color: #4cd16b; border-color: #28a745; background: rgba(40,167,69,0.1); }
    .pill.loading { color: #ffc107; border-color: #ffc107; background: rgba(255, 193, 7, 0.1); }
    .pill.debug { color: #0dcaf0; border-color: #0dcaf0; background: rgba(13, 202, 240, 0.1); display: none; }
    .pill.state { font-size: 0.85em; }
    .pill.state.waiting { color: #ffc107; border-color: #ffc107; background: rgba(255, 193, 7, 0.1); }
    .pill.state.running { color: #4cd16b; border-color: #28a745; background: rgba(40, 167, 69, 0.1); }
    .pill.sort { background: #0b173a; border-color: #1b2b5f; }
    .pill.sort.active { color: #071225; background: linear-gradient(135deg, var(--accent) 0%, #e0ffff 100%); border-color: var(--accent); }
    
    .status-bar { margin-top: 15px; padding: 15px; background: rgba(60, 207, 126, 0.12); border: 1px solid var(--success); border-radius: 6px; color: #7ef7b7; display: flex; justify-content: space-between; align-items: center; }
    .success-banner { margin: 15px 0; padding: 16px; background: rgba(60, 207, 126, 0.18); border: 1px solid var(--success); border-radius: 8px; color: #b5ffd5; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .scan-meta { margin-top: 6px; font-size: 0.75em; color: #9ab2ff; }

    .privacy-note { margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(20, 40, 80, 0.35); border: 1px solid #1b2b5f; color: #cfe2ff; font-size: 0.9em; }
    .api-help-wrap { margin-top: 8px; display: flex; justify-content: center; }
    .api-help-gif { width: 30%; max-width: 320px; border: 1px solid #2b3f7a; border-radius: 10px; cursor: zoom-in; transition: width 0.2s ease; }
    .api-help-gif.full { width: 100%; max-width: 100%; cursor: zoom-out; }

    .debug-warning { margin-left: 12px; color: #ffc107; font-size: 0.8em; }
    .debug-warning.hidden { display: none; }

    .first-run-modal { width: 520px; max-width: 90%; }
    .first-run-header { padding: 16px; background: #0f234f; border-bottom: 1px solid var(--border); }
    .first-run-sub { color: #cfe2ff; font-size: 0.9em; margin-top: 6px; }
    .first-run-steps { padding: 20px 24px 0; margin: 0; line-height: 1.6; color: #cfe2ff; }
    .first-run-actions { display: flex; gap: 10px; padding: 16px 24px 20px; }

    .consent-banner { position: fixed; left: 16px; right: 16px; bottom: 80px; background: #0b173a; border: 1px solid #2b3f7a; border-radius: 12px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; z-index: 1500; }
    .consent-banner.hidden { display: none; }
    .consent-text { flex: 1 1 280px; font-size: 0.9em; color: #cfe2ff; }
    .consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    .duration-inputs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .duration-inputs input { width: 70px; }
    .duration-label { font-size: 0.75em; color: #9fb3d8; }

    /* RUNNER OVERLAY */
    #runnerOverlay { position: fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:2000; display:none; flex-direction:column; align-items:center; justify-content:center; }
    #runnerLog { width: 80%; height: 300px; background: #050b1f; border: 1px solid var(--border); padding: 20px; overflow-y: auto; font-family: monospace; color: #7ef7b7; margin-bottom: 20px; }
    
    .footer { position: fixed; bottom: 0; left: 0; width: 100%; background: #050b1f; border-top: 1px solid var(--border); padding: 10px; text-align: center; font-size: 0.9em; z-index: 999; }
    .dash-power { padding: 5px 10px; background: var(--success); width: 100%; }

    @media (max-width: 768px) {
        body { padding: 20px 16px 90px; }
        .app-header { flex-direction: column; align-items: flex-start; gap: 15px; position: relative; padding: 0 8px 15px; }
        .brand { flex-wrap: wrap; }
        .brand > div:last-child { width: 100%; min-width: 0; }
        .brand h1 { font-size: 1.4rem; line-height: 1.1; word-break: break-word; }
        #accountDisplay { width: 100%; }
        .account-badge { width: 100%; max-width: 100%; }
        .nav-toggle { display: inline-flex; align-self: flex-end; }
        .top-nav { display: none; flex-direction: column; width: 100%; gap: 8px; }
        body.nav-open .top-nav { display: flex; }
        .top-nav button { width: 100%; justify-content: center; }
        .brand-logo { width: 110px; }
        button { min-height: 44px; }
        .success-banner { flex-direction: column; align-items: flex-start; }
        .consent-banner { left: 10px; right: 10px; bottom: 100px; }
        .account-row { flex-direction: column; align-items: stretch; }
        .settings-grid { display: flex; flex-direction: column; }
        .settings-span-12, .settings-span-6, .settings-span-4, .settings-span-3 { width: 100%; }
        .device-row { flex-direction: column; align-items: flex-start; }
        .dev-controls { width: 100%; flex-wrap: wrap; margin-top: 10px; }
        .theme-bar { overflow-x: auto; flex-wrap: nowrap; }
        .saved-show-row { flex-direction: column; align-items: flex-start; gap: 12px; }
        .saved-show-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .saved-show-actions button { width: 100%; }
        .schedule-table thead { display: none; }
        .schedule-table, .schedule-table tbody, .schedule-table tr, .schedule-table td { display: block; width: 100%; }
        .schedule-table tr { background: #0f234f; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; }
        .schedule-table td { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
        .schedule-table td::before { content: attr(data-label); font-weight: 600; color: var(--muted); }
        .schedule-table td[data-label="Actions"] { flex-direction: column; align-items: stretch; }
        .schedule-table td[data-label="Actions"] button { width: 100%; }
        .history-item { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 430px) {
        #landingView { margin-top: 30px; gap: 14px; padding: 0 12px; }
        .landing-card { max-width: 100%; padding: 22px; }
        .lib-header { flex-direction: column; align-items: flex-start; gap: 12px; }
        .device-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 390px) {
        body { padding: 16px 12px 90px; }
        .brand-logo { width: 100px; }
        .readme-btn { width: 100%; }
        button { padding: 10px 14px; }
    }
    .dash-power.off { background: var(--danger); }
    
    /* NEW CARD STYLE Phase 26 */
    .card { background: var(--card); border: 1px solid var(--border); padding: 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 10px; }
    .theme-card.add.disabled { opacity: 0.5; }
    .card-top { text-align: left; }
    .card-checkbox { transform: scale(1.5); margin: 0; cursor: pointer; display: block; }    
    .card-mid { display: flex; gap: 10px; align-items: center; }
    .card-btm { margin-top: 5px; }
    .card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .collapsible-body { display:block; }
    .collapsible.collapsed .collapsible-body { display:none; }
    .small { font-size: 0.85em; padding: 6px 12px; }
    .flash-outline { animation: flashOutline 1.8s ease-in-out 0s 3; }
    @keyframes flashOutline {
        0% { box-shadow: 0 0 0 0 rgba(45, 211, 255, 0.0); border-color: var(--border); }
        50% { box-shadow: 0 0 0 3px rgba(45, 211, 255, 0.8); border-color: #2dd3ff; }
        100% { box-shadow: 0 0 0 0 rgba(45, 211, 255, 0.0); border-color: var(--border); }
    }