/* Airtime-inspired broadcast workspace: calendar first, library beside the playlist builder. */
body{min-width:0}
.dialog-card textarea{width:100%;resize:vertical;background:#091523;border:1px solid var(--border);border-radius:8px;color:#fff;padding:11px;font:inherit}
.section-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.automation-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px;border:1px solid var(--border);border-radius:12px;background:rgba(5,14,26,.62);margin:4px 0 16px}
.automation-tabs{display:flex;gap:4px}.automation-tab{border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;padding:9px 13px;cursor:pointer}.automation-tab:hover,.automation-tab.active{background:rgba(94,231,255,.14);color:#eafaff}
.automation-toolbar-right{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.automation-toolbar-right select,.library-main-toolbar select{border:1px solid var(--border);border-radius:7px;background:#0a1727;color:#dbeaff;padding:8px 10px;font-size:11px}.live-clock-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(98,230,167,.11)}
.automation-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.automation-metrics article{padding:13px 15px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(145deg,rgba(18,34,56,.82),rgba(10,23,39,.82));min-width:0}.automation-metrics span,.automation-metrics small{display:block;color:var(--muted);font-size:10px}.automation-metrics strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:7px 0 3px;color:#f3f8ff;font-size:17px}.automation-metrics .automation-live-metric strong{color:var(--green)}
.automation-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px}.calendar-card,.now-playing-card,.smart-block-card{border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,rgba(18,34,56,.92),rgba(10,23,39,.92))}.calendar-card{padding:17px;min-width:0}.calendar-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.calendar-header h3{margin:0;font-size:17px}.calendar-nav{display:flex;gap:5px}.icon-button{border:1px solid var(--border);border-radius:7px;background:rgba(255,255,255,.035);color:#cfe0f4;padding:7px 10px;font-size:11px;cursor:pointer}.icon-button:hover{border-color:rgba(94,231,255,.5);color:#fff}.calendar-nav .icon-button:first-child,.calendar-nav .icon-button:last-child{font-size:18px;line-height:12px;padding:6px 10px}
.schedule-calendar{display:grid;grid-template-columns:46px repeat(7,minmax(74px,1fr));border:1px solid var(--border);border-radius:10px;overflow:hidden;min-height:300px;background:#091523}.calendar-time-head{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.calendar-day-head{padding:9px 5px;text-align:center;color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.calendar-day-head strong{display:block;color:#f0f7ff;font-size:13px;margin-top:4px}.calendar-time-label{padding:9px 5px;color:#6f86a4;font-size:9px;border-right:1px solid var(--border);border-bottom:1px solid rgba(151,181,224,.1)}.calendar-day-column{position:relative;min-height:58px;border-right:1px solid rgba(151,181,224,.12);border-bottom:1px solid rgba(151,181,224,.1);background:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,rgba(151,181,224,.06) 29px)}.calendar-day-column.today{background-color:rgba(94,231,255,.035)}.calendar-event{position:absolute;left:4px;right:4px;min-height:27px;padding:5px 6px;border-radius:6px;background:linear-gradient(135deg,rgba(85,121,255,.86),rgba(75,229,255,.63));color:#051321;font-size:9px;font-weight:800;overflow:hidden;cursor:pointer;box-shadow:0 5px 12px rgba(0,0,0,.2)}.calendar-event small{display:block;font-size:8px;opacity:.72;margin-top:2px}.calendar-empty{grid-column:2/-1;align-self:center;text-align:center;color:var(--muted);font-size:11px;padding:60px 20px}
.automation-side{display:grid;align-content:start;gap:12px;min-width:0}.now-playing-card,.smart-block-card{padding:15px}.side-card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:9px}.side-card-heading .eyebrow{margin:0}.side-card-heading h3{margin:4px 0 0;font-size:14px}.now-playing-card>strong{display:block;margin:20px 0 5px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-card>p{min-height:30px;color:var(--muted);font-size:11px;line-height:1.4;margin:0}.mini-progress{height:5px;border-radius:5px;background:#071321;overflow:hidden;margin:15px 0}.mini-progress span{display:block;width:32%;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--cyan),var(--green))}.now-playing-next{display:flex;justify-content:space-between;gap:8px;padding-top:11px;border-top:1px solid var(--border);font-size:9px;color:var(--muted)}.now-playing-next strong{max-width:145px;color:#e7f1ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-block-list{display:grid;gap:7px;margin-top:13px}.smart-block-item{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:8px;padding:9px;border-radius:8px;background:rgba(255,255,255,.035)}.smart-block-color{width:7px;height:30px;border-radius:6px;background:var(--cyan)}.smart-block-item:nth-child(2) .smart-block-color{background:var(--amber)}.smart-block-item:nth-child(3) .smart-block-color{background:#b58cff}.smart-block-item strong{display:block;font-size:10px}.smart-block-item small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.smart-block-item em{font-style:normal;font-size:9px;color:var(--green)}.automation-shows-heading{display:flex;justify-content:space-between;align-items:end;margin:24px 0 12px}.automation-shows-heading h3{margin:0;font-size:15px}.time-badge{border:1px solid var(--border);border-radius:100px;padding:6px 9px;color:var(--muted);font-size:9px}
.library-workspace{display:grid;grid-template-columns:190px minmax(0,1fr) 300px;gap:13px;align-items:start}.library-folders,.playlist-builder{border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,rgba(18,34,56,.92),rgba(10,23,39,.92));padding:15px;min-width:0}.library-panel-title{display:grid;gap:5px;margin-bottom:13px}.library-panel-title strong{font-size:15px}.library-folder-search,.search-field input{width:100%;background:#091523;border:1px solid var(--border);border-radius:8px;color:#e8f0ff;padding:10px;font-size:11px;outline:0}.library-folder-list{display:grid;gap:4px;margin-top:11px}.library-folder{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;border:0;border-radius:8px;background:transparent;color:#98acc5;padding:9px;text-align:left;font-size:11px;cursor:pointer}.library-folder:hover,.library-folder.active{background:rgba(94,231,255,.12);color:#effcff}.library-folder span:last-child{color:#637a98;font-size:10px}.library-storage{margin-top:22px;padding-top:13px;border-top:1px solid var(--border);color:var(--muted);font-size:10px}.library-storage strong{display:block;color:#e8f4ff;font-size:12px;margin:5px 0 8px}.storage-bar{height:5px;border-radius:5px;background:#071321;overflow:hidden}.storage-bar span{display:block;width:36%;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--cyan),#667cff)}.library-main{min-width:0}.library-main-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}.search-field{position:relative;flex:1}.search-field>span{position:absolute;left:10px;top:8px;color:var(--muted);font-size:15px}.search-field input{padding-left:29px}.result-count{color:var(--muted);font-size:10px;white-space:nowrap}.library-table-card .table-row{grid-template-columns:2.1fr 1.1fr .65fr .65fr .45fr;min-width:0;padding:11px 13px}.library-table-card .table-row small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.library-table-card .table-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.library-table-card .table-row>span:first-child{white-space:nowrap}.library-table-card .table-action{padding:5px 8px}.track-type{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}.track-type i{width:6px;height:6px;border-radius:50%;background:var(--green)}.track-type.jingle i{background:var(--amber)}.track-type.voice i{background:#b58cff}.playlist-builder{position:sticky;top:18px}.playlist-builder-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.playlist-builder-heading h3{font-size:14px;margin:4px 0 0}.playlist-select{width:100%;margin:15px 0 10px;background:#091523;border:1px solid var(--border);border-radius:8px;color:#e8f0ff;padding:10px;font-size:11px}.playlist-builder-list{display:grid;gap:5px;max-height:248px;overflow:auto}.playlist-item{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:7px;padding:8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:10px}.playlist-item-index{color:var(--muted);text-align:center}.playlist-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-item small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.playlist-item button{border:0;background:transparent;color:#8ea6c0;cursor:pointer}.playlist-drop-zone{margin-top:9px;padding:17px 8px;text-align:center;border:1px dashed rgba(94,231,255,.35);border-radius:9px;color:#99b5d1;font-size:10px;line-height:1.5}.playlist-drop-zone.drag-over{background:rgba(94,231,255,.11);border-color:var(--cyan);color:#fff}.playlist-drop-zone small{font-size:9px;color:var(--muted)}.playlist-builder-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);margin-top:13px;padding-top:12px;color:var(--muted);font-size:11px}.checkbox-line{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important}.checkbox-line input{width:auto!important;margin:0}
@media(max-width:1250px){.library-workspace{grid-template-columns:170px minmax(0,1fr)}.playlist-builder{grid-column:1/-1;position:static}.playlist-builder-list{max-height:150px}.automation-layout{grid-template-columns:minmax(0,1fr) 250px}}
@media(max-width:900px){.automation-toolbar,.automation-toolbar-right{align-items:flex-start;flex-direction:column}.automation-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.automation-layout{grid-template-columns:1fr}.schedule-calendar{overflow:auto}.library-workspace{grid-template-columns:1fr}.library-folders{display:none}.library-main-toolbar{align-items:stretch;flex-wrap:wrap}.search-field{min-width:100%}.library-table-card{overflow-x:auto}.library-table-card .table-row{min-width:620px}.library-table-card .table-header{min-width:620px}}

/* Keep the broadcast workspace usable in a narrow desktop window and on mobile. */
@media (min-width: 901px) and (max-width: 1200px) {
  .topbar, .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .top-actions { flex-wrap: wrap; }
}

/* Premium light theme. Dark mode remains the default and the choice is kept per browser. */
html[data-theme="light"] {
  color-scheme: light;
  color: #17263d;
  background: #f4f7fb;
  --panel: #ffffff;
  --panel2: #eef3f9;
  --border: rgba(48, 75, 112, .16);
  --muted: #667895;
  --cyan: #087fa4;
  --green: #13865b;
  --amber: #b66a00;
  --red: #c43d59;
}
html[data-theme="light"] body { background: radial-gradient(circle at 80% -10%, #dceffd 0, #f4f7fb 44%), #f4f7fb; color: #17263d; }
html[data-theme="light"] .sidebar { background: rgba(255,255,255,.9); box-shadow: 10px 0 32px rgba(37,63,94,.06); }
html[data-theme="light"] .nav-item { color: #60738f; }
html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { background: rgba(8,127,164,.1); color: #12304e; }
html[data-theme="light"] .primary-button { background: linear-gradient(135deg, #48c9e7, #667cff); color: #071c31; }
html[data-theme="light"] .ghost-button { background: rgba(22,52,85,.04); color: #294361; }
html[data-theme="light"] .metric-card,
html[data-theme="light"] .radio-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .schedule-card,
html[data-theme="light"] .activity-item,
html[data-theme="light"] .automation-metrics article,
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .now-playing-card,
html[data-theme="light"] .smart-block-card,
html[data-theme="light"] .library-folders,
html[data-theme="light"] .playlist-builder,
html[data-theme="light"] .studio-deck,
html[data-theme="light"] .running-order-card,
html[data-theme="light"] .studio-library-panel { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,247,252,.98)); box-shadow: 0 12px 32px rgba(35,61,91,.06); }
html[data-theme="light"] .radio-stats strong,
html[data-theme="light"] .automation-metrics strong,
html[data-theme="light"] .now-playing-next strong,
html[data-theme="light"] .library-storage strong { color: #203954; }
html[data-theme="light"] .card-actions button,
html[data-theme="light"] .control-button,
html[data-theme="light"] .round-action { background: #edf3f9; color: #294361; }
html[data-theme="light"] .automation-toolbar { background: rgba(255,255,255,.84); }
html[data-theme="light"] .automation-tab:hover,
html[data-theme="light"] .automation-tab.active { color: #12304e; }
html[data-theme="light"] .automation-toolbar-right select,
html[data-theme="light"] .library-main-toolbar select,
html[data-theme="light"] .calendar-nav .icon-button,
html[data-theme="light"] .library-folder-search,
html[data-theme="light"] .search-field input,
html[data-theme="light"] .playlist-select,
html[data-theme="light"] .dialog-card input,
html[data-theme="light"] .dialog-card select,
html[data-theme="light"] .dialog-card textarea,
html[data-theme="light"] .dialog-card textarea { background: #f7faff; color: #1d3552; }
html[data-theme="light"] .schedule-calendar { background: #f7faff; }
html[data-theme="light"] .calendar-day-head strong { color: #294361; }
html[data-theme="light"] .calendar-day-column { background: repeating-linear-gradient(to bottom, transparent 0, transparent 28px, rgba(74,102,139,.1) 29px); }
html[data-theme="light"] .calendar-day-column.today { background-color: rgba(8,127,164,.05); }
html[data-theme="light"] .library-folder { color: #60738f; }
html[data-theme="light"] .library-folder:hover, html[data-theme="light"] .library-folder.active { color: #12304e; }
html[data-theme="light"] .playlist-item, html[data-theme="light"] .smart-block-item { background: rgba(33,75,113,.055); }
html[data-theme="light"] .dialog-card { background: #ffffff; box-shadow: 0 25px 80px rgba(30,56,89,.22); color: #17263d; }
html[data-theme="light"] dialog::backdrop { background: rgba(26,48,76,.32); }
html[data-theme="light"] .dialog-card label { color: #536986; }
html[data-theme="light"] .toast { background: #ffffff; color: #294361; box-shadow: 0 12px 30px rgba(25,54,87,.18); }
html[data-theme="light"] .auth-banner { background: linear-gradient(105deg, rgba(74,210,246,.13), rgba(95,116,255,.1)); }
html[data-theme="light"] .auth-banner p { color: #607895; }
html[data-theme="light"] .theme-toggle { min-width: 94px; }

/* Subscription catalog cards inspired by the supplied pricing-table reference. */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:0; margin:20px 0 30px; align-items:stretch; }
.pricing-card { position:relative; display:flex; flex-direction:column; min-width:0; overflow:visible; border:1px solid var(--border); background:#fff; color:#26384f; box-shadow:0 10px 26px rgba(0,0,0,.08); }
.pricing-card:first-child { border-radius:12px 0 0 12px; }.pricing-card:last-child { border-radius:0 12px 12px 0; }
.pricing-card header { min-height:145px; padding:24px 24px 20px; background:#242424; color:#fff; }
.pricing-card header h3 { margin:0 0 8px; font-size:22px; font-weight:500; }.pricing-card header p { margin:0 0 18px; min-height:30px; color:#b7c2d0; font-size:10px; line-height:1.35; }.pricing-card header strong { color:#f19a14; font-size:28px; }.pricing-card header small { color:#f19a14; font-size:13px; font-weight:700; }
.pricing-card ul { flex:1; list-style:none; margin:0; padding:18px 24px 8px; }.pricing-card li { padding:13px 0; border-bottom:1px dotted rgba(109,127,151,.42); font-size:12px; line-height:1.35; }.pricing-card li:last-child { border-bottom:0; }
.pricing-card .pricing-action { align-self:center; width:calc(100% - 48px); margin:12px 24px 24px; border-radius:999px; text-align:center; }.pricing-card .primary-button { background:#f19a14; color:#fff; }.pricing-card.featured { z-index:2; margin:-12px 0; border:0; box-shadow:0 16px 34px rgba(0,0,0,.28); }.pricing-card.featured header { padding-top:34px; }.pricing-card.inactive { opacity:.62; }
.pricing-popular { position:absolute; top:0; left:24px; transform:translateY(-100%); padding:9px 0 7px; color:#f19a14; font-size:11px; font-weight:800; }
html[data-theme="light"] .pricing-card { background:#fff; color:#26384f; }.pricing-card:not(.featured) header { background:#2a2a2a; }
html[data-theme="light"] .pricing-card:not(.featured) header { background:#f0f4f8; color:#26384f; }.pricing-card:not(.featured) header p { color:#9caaba; } html[data-theme="light"] .pricing-card:not(.featured) header p { color:#667895; }
html[data-theme="light"] .pricing-card li { border-color:rgba(109,127,151,.28); }
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;gap:14px}.pricing-card:first-child,.pricing-card:last-child{border-radius:12px}.pricing-card.featured{margin:0}.pricing-popular{position:static;transform:none;margin:0;padding:13px 20px 0;background:#242424}.pricing-card.featured header{padding-top:16px}}

/* Airtime-style now-playing header for the remote studio. */
.broadcast-strip { display:grid; grid-template-columns:1.1fr 1.5fr 1.1fr 190px; align-items:stretch; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:linear-gradient(110deg,rgba(9,20,35,.96),rgba(18,34,56,.96)); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.broadcast-cell { min-width:0; padding:13px 16px; border-right:1px solid var(--border); }.broadcast-cell span { display:block; color:var(--muted); font-size:9px; letter-spacing:.12em; font-weight:800; }.broadcast-cell strong { display:block; margin-top:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eaf4ff; font-size:13px; }.broadcast-cell small { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; }.broadcast-current { background:rgba(94,231,255,.08); }.broadcast-current strong { color:var(--cyan); }.broadcast-live { display:grid; align-content:center; justify-items:center; gap:5px; padding:10px; }.broadcast-live strong { color:#f5f9ff; font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:.04em; }.broadcast-live small { color:var(--muted); font-size:8px; letter-spacing:.12em; }.listen-button { border:1px solid rgba(98,230,167,.45); border-radius:6px; background:rgba(98,230,167,.1); color:var(--green); padding:5px 12px; font-size:10px; font-weight:800; cursor:pointer; }.listen-button:hover { background:rgba(98,230,167,.2); }
html[data-theme="light"] .broadcast-strip { background:linear-gradient(110deg,#fff,#eef5fb); box-shadow:0 12px 28px rgba(37,63,94,.08); }.broadcast-cell strong { color:#eaf4ff; } html[data-theme="light"] .broadcast-cell strong { color:#203954; } html[data-theme="light"] .broadcast-current { background:rgba(8,127,164,.08); } html[data-theme="light"] .broadcast-current strong { color:#087fa4; } html[data-theme="light"] .broadcast-live strong { color:#203954; }
@media(max-width:900px){.broadcast-strip{grid-template-columns:1fr 1fr}.broadcast-live{grid-column:1/-1;border-top:1px solid var(--border);display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.broadcast-cell:nth-child(2){border-right:0}.broadcast-cell:nth-child(3){grid-column:1/-1;border-top:1px solid var(--border);border-right:0}}
.airtime-playlist-item { grid-template-columns:24px minmax(0,1fr) auto; align-items:start; }.playlist-item-main { min-width:0; }.playlist-timing { display:grid; grid-template-columns:repeat(4,minmax(55px,1fr)); gap:5px; margin-top:9px; }.playlist-timing label { display:grid; gap:3px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.04em; }.playlist-timing-input { width:100%; min-width:0; padding:4px 5px; border:1px solid var(--border); border-radius:5px; background:#091523; color:#dceaff; font-size:9px; font-variant-numeric:tabular-nums; }.playlist-remove { border:0; background:transparent; color:#ff9aaa; cursor:pointer; font-size:15px; }.playlist-timing-input:focus { border-color:var(--cyan); outline:0; }
html[data-theme="light"] .playlist-timing-input { background:#f7faff; color:#294361; }
@media(max-width:600px){.playlist-timing{grid-template-columns:repeat(2,minmax(55px,1fr));}}
.schedule-calendar { display:grid; grid-template-columns:repeat(7,minmax(122px,1fr)); min-height:0; max-height:650px; overflow:auto; background:#091523; }.calendar-day-column { position:relative; min-height:612px; border-right:1px solid rgba(151,181,224,.12); background:repeating-linear-gradient(to bottom,transparent 0,transparent 23px,rgba(151,181,224,.08) 24px); }.calendar-day-column:last-child { border-right:0; }.calendar-day-head { position:sticky; top:0; z-index:3; height:36px; padding:6px 5px; background:rgba(18,34,56,.98); }.calendar-day-head strong { display:inline; margin-left:5px; }.calendar-hour { height:24px; border-bottom:1px solid rgba(151,181,224,.08); pointer-events:none; }.calendar-hour span { display:block; padding:3px 5px; color:#6f86a4; font-size:8px; opacity:.72; }.calendar-event { z-index:2; left:4px; right:4px; min-height:22px; padding:4px 6px; border-radius:5px; background:linear-gradient(135deg,rgba(85,121,255,.9),rgba(75,229,255,.74)); color:#051321; font-size:9px; font-weight:800; overflow:hidden; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.2); }.calendar-event strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.calendar-event small { display:block; font-size:8px; opacity:.78; margin-top:2px; }.calendar-day-column.today .calendar-day-head { background:linear-gradient(135deg,#1b6e87,#344e85); color:#fff; }.calendar-day-column.today .calendar-day-head strong { color:#fff; }
html[data-theme="light"] .schedule-calendar { background:#f7faff; } html[data-theme="light"] .calendar-day-head { background:rgba(238,244,249,.98); } html[data-theme="light"] .calendar-day-column.today .calendar-day-head { background:linear-gradient(135deg,#42bfd8,#687cff); }
@media(max-width:900px){.schedule-calendar{grid-template-columns:repeat(7,minmax(122px,1fr));}}
.listen-button.active-listen { background:var(--green); color:#06120e; }

/* HostEaagle client manager skin: warm orange actions, deep navy navigation and a clean light workspace. */
html[data-theme="light"] {
  --border: rgba(38,59,143,.14);
  --muted: #71809a;
  --cyan: #263b8f;
  --green: #189467;
  --amber: #f47d16;
  --red: #d94d58;
}
html[data-theme="light"] body { background:linear-gradient(180deg,#fff 0,#f7f9fd 44%,#fff 100%); color:#1b2a45; }
html[data-theme="light"] .sidebar { background:#fff; border-right:1px solid #e7ebf3; box-shadow:10px 0 30px rgba(38,59,143,.06); padding:22px 14px 16px; }
html[data-theme="light"] .brand { color:#263b8f; padding:0 9px; }
html[data-theme="light"] .brand small { color:#f47d16; }
html[data-theme="light"] .brand-mark { background:linear-gradient(135deg,#263b8f,#f47d16); color:#fff; box-shadow:0 7px 16px rgba(38,59,143,.2); }
html[data-theme="light"] .sidebar nav { gap:3px; margin-top:34px; }
html[data-theme="light"] .nav-item { display:flex; align-items:center; gap:10px; color:#61708a; border-left:3px solid transparent; border-radius:8px; padding:11px 12px; }
html[data-theme="light"] .nav-item::before { width:19px; color:#9aa5b6; font-size:14px; text-align:center; }
html[data-theme="light"] .nav-item:nth-child(1)::before { content:"⌂"; }
html[data-theme="light"] .nav-item:nth-child(2)::before { content:"◉"; }
html[data-theme="light"] .nav-item:nth-child(3)::before { content:"●"; }
html[data-theme="light"] .nav-item:nth-child(4)::before { content:"◷"; }
html[data-theme="light"] .nav-item:nth-child(5)::before { content:"♫"; }
html[data-theme="light"] .nav-item:nth-child(6)::before { content:"♟"; }
html[data-theme="light"] .nav-item:nth-child(7)::before { content:"↔"; }
html[data-theme="light"] .nav-item:nth-child(8)::before { content:"≡"; }
html[data-theme="light"] .nav-item:nth-child(n+9)::before { content:"⚙"; }
html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { color:#263b8f; border-left-color:#f47d16; background:linear-gradient(90deg,#fff1e5,#f2f4ff); }
html[data-theme="light"] .nav-item:hover::before, html[data-theme="light"] .nav-item.active::before { color:#f47d16; }
html[data-theme="light"] .sidebar-footer { color:#8190a6; border-top:1px solid #edf0f5; margin:22px 7px 0; padding:15px 4px 0; }
html[data-theme="light"] .status-dot { background:#1aa06f; box-shadow:0 0 0 4px rgba(26,160,111,.12); }
html[data-theme="light"] .main-content { background:transparent; }
html[data-theme="light"] .topbar { padding-bottom:18px; border-bottom:1px solid #e9edf4; }
html[data-theme="light"] .eyebrow { color:#f47d16; }
html[data-theme="light"] .topbar h1, html[data-theme="light"] .section-heading h2 { color:#17265f; }
html[data-theme="light"] .primary-button { background:linear-gradient(135deg,#f47d16,#df4f57); color:#fff; box-shadow:0 8px 18px rgba(244,125,22,.2); }
html[data-theme="light"] .ghost-button { background:#fff; border-color:#dce3ef; color:#263b8f; }
html[data-theme="light"] .ghost-button:hover { border-color:#f47d16; color:#f47d16; }
html[data-theme="light"] .user-badge { background:#fff; border-color:#e1e6ef; color:#63718a; }
html[data-theme="light"] .auth-banner { border-color:#f3d5bd; background:linear-gradient(105deg,#fff2e6,#f1f4ff); }
html[data-theme="light"] .metric-card, html[data-theme="light"] .radio-card, html[data-theme="light"] .table-card, html[data-theme="light"] .schedule-card, html[data-theme="light"] .activity-item { background:#fff; border-color:#e3e8f1; box-shadow:0 10px 28px rgba(38,59,143,.06); color:#26384f; }
.credential-field { display:flex; gap:8px; align-items:center; }
.credential-field input { flex:1; }
.credential-field .ghost-button { white-space:nowrap; }
html[data-theme="light"] .metric-card strong { color:#263b8f; }
html[data-theme="light"] .metric-card.live strong { color:#189467; }
html[data-theme="light"] .radio-logo { background:linear-gradient(135deg,#263b8f,#f47d16); color:#fff; }
html[data-theme="light"] .radio-name, html[data-theme="light"] .table-row strong { color:#263b8f; }
html[data-theme="light"] .radio-stats strong { color:#26384f; }
html[data-theme="light"] .table-row { border-color:#edf0f5; }
html[data-theme="light"] .table-action { background:#f4f6fb; border-color:#dce3ef; color:#263b8f; }
html[data-theme="light"] .table-action:hover { border-color:#f47d16; color:#f47d16; }
html[data-theme="light"] .section-help, html[data-theme="light"] .schedule-card p, html[data-theme="light"] .activity-item p { color:#71809a; }
html[data-theme="light"] .pill { background:#e8f7f1; color:#16845d; }
html[data-theme="light"] .pill.offline { background:#fff0f0; color:#c74b59; }
html[data-theme="light"] .studio-toolbar, html[data-theme="light"] .studio-deck, html[data-theme="light"] .running-order-card, html[data-theme="light"] .studio-library-panel, html[data-theme="light"] .studio-control-bar, html[data-theme="light"] .takeover-strip { background:#fff; border-color:#e3e8f1; box-shadow:0 10px 28px rgba(38,59,143,.06); color:#26384f; }
html[data-theme="light"] .studio-deck-a { border-top-color:#189467; } html[data-theme="light"] .studio-deck-b { border-top-color:#f47d16; }
html[data-theme="light"] .deck-time { color:#263b8f; }
html[data-theme="light"] .deck-progress, html[data-theme="light"] .progress-track { background:#e9eef6; }
html[data-theme="light"] .deck-progress span, html[data-theme="light"] .progress-track span { background:linear-gradient(90deg,#263b8f,#f47d16); }
html[data-theme="light"] .round-action, html[data-theme="light"] .control-button { background:#f5f7fb; color:#263b8f; border-color:#dce3ef; }
html[data-theme="light"] .round-action.play-action, html[data-theme="light"] .control-button.active-control { color:#16845d; border-color:#8bd6ba; }
html[data-theme="light"] .onair-button { background:#e8f7f1; border-color:#8bd6ba; color:#16845d; }
html[data-theme="light"] .stop-button { background:#fff0f0; border-color:#efb1b8; color:#c74b59; }
html[data-theme="light"] .studio-vu-meter { background:linear-gradient(180deg,#17265f,#263b8f); border-color:#263b8f; }
html[data-theme="light"] .studio-vu-title, html[data-theme="light"] .studio-vu-meter small { color:rgba(255,255,255,.72); }
html[data-theme="light"] .permission-callout { background:#fff4e9; border-color:#f4d1ae; }
html[data-theme="light"] .permission-callout strong { color:#263b8f; }
html[data-theme="light"] .permission-callout span { color:#71809a; }
html[data-theme="light"] .empty-state { border-color:#d9e1ed; color:#8190a6; }
html[data-theme="light"] .toast { background:#fff; border-color:#e1e6ef; color:#263b8f; box-shadow:0 12px 30px rgba(38,59,143,.18); }

.stats-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:14px; }
.stats-layout > article { padding:18px; min-width:0; }
.stats-card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.stats-card-heading h3 { margin:4px 0 0; font-size:15px; }
.stats-bars { height:220px; display:flex; align-items:end; justify-content:space-around; gap:12px; padding:20px 8px 0; border-bottom:1px solid var(--border); }
.stats-bar-column { display:flex; height:100%; flex:1; max-width:64px; flex-direction:column; align-items:center; justify-content:end; gap:7px; color:var(--muted); font-size:9px; }
.stats-bar-column span { color:var(--cyan); font-size:10px; font-weight:800; }
.stats-bar-column i { display:block; width:100%; min-height:10px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,var(--cyan),var(--amber)); }
.stats-bar-column small { font-size:9px; white-space:nowrap; }
.stats-history { display:grid; gap:2px; }
.stats-history-row { display:flex; align-items:center; gap:10px; padding:10px 3px; border-bottom:1px solid var(--border); }
.stats-history-row:last-child { border-bottom:0; }
.stats-history-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(244,125,22,.12); }
.stats-history-row div { min-width:0; flex:1; }
.stats-history-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cyan); font-size:11px; }
.stats-history-row small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.stats-history-row em { color:var(--muted); font-size:10px; font-style:normal; }
.share-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.share-card { min-width:0; padding:22px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,rgba(18,34,56,.92),rgba(10,23,39,.92)); }
.share-card-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--amber); background:rgba(244,125,22,.14); font-size:20px; }
.share-card h3 { margin:16px 0 7px; font-size:16px; }
.share-card p { min-height:36px; margin:0 0 15px; color:var(--muted); font-size:11px; line-height:1.5; }
.share-url-row { display:flex; gap:6px; margin-bottom:10px; }
.share-url-row input, .share-card textarea { width:100%; min-width:0; background:#091523; border:1px solid var(--border); border-radius:7px; color:#dceaff; padding:9px; font-size:10px; }
.share-url-row input { overflow:hidden; text-overflow:ellipsis; }
.share-card textarea { resize:none; line-height:1.4; }
.share-open-link { display:inline-flex; text-decoration:none; }
.share-social-links { display:flex; flex-wrap:wrap; gap:7px; min-height:44px; margin-bottom:14px; }
.share-social-links a { display:inline-flex; align-items:center; padding:7px 9px; border-radius:7px; background:rgba(94,231,255,.1); color:var(--cyan); font-size:10px; text-decoration:none; }
.share-empty-social { color:var(--muted); font-size:10px; line-height:1.5; }
html[data-theme="light"] .share-card { background:#fff; border-color:#e3e8f1; box-shadow:0 10px 28px rgba(38,59,143,.06); color:#26384f; }
html[data-theme="light"] .share-card h3 { color:#263b8f; }
html[data-theme="light"] .share-card p { color:#71809a; }
html[data-theme="light"] .share-url-row input, html[data-theme="light"] .share-card textarea { background:#f7faff; border-color:#dce3ef; color:#26384f; }
html[data-theme="light"] .share-social-links a { background:#fff1e5; color:#d46718; }
@media(max-width:900px){.stats-layout,.share-grid{grid-template-columns:1fr}.stats-bars{height:190px}}

/* SonicPanel-inspired administration groups and server operations. */
.nav-group { display:grid; gap:3px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.nav-group:first-of-type { margin-top:6px; }
.nav-group-label { margin:0 12px 4px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.16em; }
.admin-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-tool-card { padding:0; min-width:0; }
.admin-tool-card .stats-card-heading { padding:17px 18px 0; }
.admin-tool-card .table-row { grid-template-columns:1.3fr .9fr 1.2fr .8fr; min-width:0; }
.admin-bulk-actions { flex-wrap:wrap; margin-top:0; }
.admin-bulk-actions .danger-button { color:var(--red); }
.support-tool-card { display:grid; gap:8px; }
.support-tool-card strong { color:var(--cyan); font-size:20px; }
.support-tool-card small { min-height:30px; line-height:1.5; }
.live-social-card { margin-top:14px; padding:18px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,rgba(18,34,56,.92),rgba(10,23,39,.92)); }
.live-social-card .studio-subtitle { display:block; max-width:720px; margin-top:5px; }
.live-destination-list { display:grid; gap:8px; margin-top:14px; }
.live-destination-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.035); }
.live-destination-row strong { display:block; color:var(--cyan); font-size:12px; }
.live-destination-row small { display:block; max-width:520px; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.live-destination-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
html[data-theme="light"] .live-social-card { background:#fff; border-color:#e3e8f1; box-shadow:0 10px 28px rgba(38,59,143,.06); color:#26384f; }
html[data-theme="light"] .live-destination-row { background:#f8faff; border-color:#e3e8f1; }
html[data-theme="light"] .live-destination-row strong { color:#263b8f; }
@media(max-width:700px){.live-destination-row{grid-template-columns:1fr}.live-destination-actions{justify-content:flex-start}}
@media(max-width:900px){.admin-tool-grid{grid-template-columns:1fr}.admin-tool-card .table-row{min-width:500px}.nav-group{display:flex; flex:0 0 auto; margin-top:0; padding:0 8px; border-top:0}.nav-group-label{display:none}}

/* Client sign-in is a standalone surface, never a small framed dialog. */
dialog#loginDialog { inset:0; width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:0; border-radius:0; overflow:auto; }
#loginDialog .auth-dialog { width:100%; min-height:100%; max-width:none; align-content:center; grid-template-columns:minmax(280px,.82fr) minmax(360px,1.18fr); gap:0; padding:0; border:0; border-radius:0; box-shadow:none; }
#loginDialog .auth-dialog::before { content:"HOSTEAAGLE\A STUDIO CLOUD\A\A Votre radio, votre audience, votre moment."; display:flex; grid-column:1; grid-row:1 / span 12; min-height:100vh; align-items:center; justify-content:center; padding:40px; white-space:pre-line; text-align:center; color:#fff; font-size:clamp(18px,2vw,27px); font-weight:750; line-height:1.4; background:linear-gradient(145deg,#17265f 0%,#263b8f 58%,#f47d16 180%); }
#loginDialog .auth-dialog > *:not(.dialog-close) { grid-column:2; width:min(460px,calc(100% - 72px)); justify-self:center; }
#loginDialog .auth-dialog > *:not(.dialog-close) { transform:translateY(14px); }
#loginDialog .auth-dialog .dialog-close { position:fixed; z-index:4; top:20px; right:25px; }
html[data-theme="light"] dialog#loginDialog { inset:0; width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:0; border-radius:0; background:#fff; overflow:auto; }
html[data-theme="light"] dialog#loginDialog::backdrop { background:#fff; }
html[data-theme="light"] #loginDialog .auth-dialog { width:100%; min-height:100%; max-width:none; align-content:center; grid-template-columns:minmax(280px,.82fr) minmax(360px,1.18fr); gap:0; padding:0; border:0; border-radius:0; box-shadow:none; background:#fff; }
html[data-theme="light"] #loginDialog .auth-dialog::before { content:"HOSTEAAGLE\A STUDIO CLOUD\A\A Votre radio, votre audience, votre moment.\A\A Diffusez 24 h/24 depuis un espace simple, sécurisé et accessible sur tous vos appareils."; display:flex; grid-column:1; grid-row:1 / span 12; min-height:100vh; align-items:center; justify-content:center; padding:40px; white-space:pre-line; text-align:center; color:#fff; font-size:clamp(18px,2vw,27px); font-weight:750; line-height:1.4; letter-spacing:-.02em; background:linear-gradient(145deg,#17265f 0%,#263b8f 58%,#f47d16 180%); }
html[data-theme="light"] #loginDialog .auth-dialog > *:not(.dialog-close) { grid-column:2; width:min(460px,calc(100% - 72px)); justify-self:center; transform:translateY(14px); }
html[data-theme="light"] #loginDialog .auth-dialog .auth-brand { margin-top:16px; }
html[data-theme="light"] #loginDialog .auth-dialog .dialog-close { position:fixed; z-index:4; top:20px; right:25px; color:#71809a; }
@media(max-width:700px){html[data-theme="light"] #loginDialog .auth-dialog { display:grid; grid-template-columns:1fr; padding:28px 0; align-content:center; }.auth-dialog::before{display:none!important}.auth-dialog > *:not(.dialog-close){grid-column:1!important;width:min(460px,calc(100% - 40px))!important}.auth-dialog .auth-brand{margin-top:0!important}}
@media(max-width:700px){#loginDialog .auth-dialog { display:grid; grid-template-columns:1fr; padding:28px 0; align-content:center; }#loginDialog .auth-dialog::before{display:none}#loginDialog .auth-dialog > *:not(.dialog-close){grid-column:1;width:min(460px,calc(100% - 40px));transform:none}#loginDialog .auth-dialog .auth-brand{margin-top:0}}

/* HostEaagle Broadcast Cloud visual system: a bright, production-ready workspace
   inspired by the generated product direction (blue rail, white cards, clear live state). */
.sidebar-station-card { display: none; }
html[data-theme="light"] body { background: #f5f8fc; }
html[data-theme="light"] .app-shell { background: #f5f8fc; }
html[data-theme="light"] .sidebar {
  width: 236px;
  flex-basis: 236px;
  padding: 24px 14px 18px;
  border-right: 0;
  color: #fff;
  background: linear-gradient(180deg, #0f56d4 0%, #0d43b6 58%, #12388e 100%);
  box-shadow: 8px 0 28px rgba(24, 62, 137, .18);
}
html[data-theme="light"] .brand { padding: 0 10px; color: #fff; letter-spacing: -.01em; font-size: 16px; }
html[data-theme="light"] .brand small { color: rgba(255,255,255,.7); letter-spacing: .12em; font-size: 8px; }
html[data-theme="light"] .brand-mark { width: 38px; height: 38px; border-radius: 12px; color: #0d43b6; background: #fff; box-shadow: 0 5px 12px rgba(4,31,105,.22); }
html[data-theme="light"] .sidebar nav { gap: 4px; margin-top: 42px; }
html[data-theme="light"] .nav-item { color: rgba(255,255,255,.78); border-radius: 9px; padding: 11px 13px; font-size: 12px; font-weight: 650; }
html[data-theme="light"] .nav-item:hover { color: #fff; background: rgba(255,255,255,.12); }
html[data-theme="light"] .nav-item.active { color: #0d4abb; background: #fff; box-shadow: 0 8px 18px rgba(3,35,119,.18); }
html[data-theme="light"] .nav-group { border-top-color: rgba(255,255,255,.18); }
html[data-theme="light"] .nav-group-label { color: rgba(255,255,255,.58); }
html[data-theme="light"] .sidebar-footer { color: rgba(255,255,255,.8); }
html[data-theme="light"] .status-dot { background: #52dc84; box-shadow: 0 0 0 4px rgba(82,220,132,.18); }
html[data-theme="light"] .sidebar-station-card { display: block; margin: auto 6px 18px; padding: 15px 14px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(5,35,121,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="light"] .sidebar-station-card.offline { background: rgba(8,28,89,.24); }
html[data-theme="light"] .sidebar-station-status { display:flex; align-items:center; gap:8px; margin-bottom:14px; color:#73f1a0; font-size:10px; letter-spacing:.1em; }
html[data-theme="light"] .sidebar-station-card.offline .sidebar-station-status { color: rgba(255,255,255,.64); }
html[data-theme="light"] .sidebar-station-card .status-dot { width:7px; height:7px; box-shadow:0 0 0 3px rgba(82,220,132,.18); }
html[data-theme="light"] .sidebar-station-card.offline .status-dot { background:#8ba0c3; box-shadow:none; }
html[data-theme="light"] .sidebar-station-card>strong { display:block; overflow:hidden; color:#fff; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="light"] .sidebar-station-card small { display:block; margin-top:5px; color:rgba(255,255,255,.68); font-size:10px; }
html[data-theme="light"] .sidebar-waveform { display:flex; align-items:center; gap:3px; height:24px; margin-top:12px; }
html[data-theme="light"] .sidebar-waveform i { width:3px; height:var(--h,11px); border-radius:3px; background:#76b6ff; opacity:.82; }
html[data-theme="light"] .sidebar-waveform i:nth-child(2n) { --h:18px; } html[data-theme="light"] .sidebar-waveform i:nth-child(3n) { --h:8px; } html[data-theme="light"] .sidebar-waveform i:nth-child(4n) { --h:21px; }
html[data-theme="light"] .sidebar-footer { margin-top:0; }
html[data-theme="light"] .main-content { width: calc(100% - 236px); max-width: none; padding: 24px 30px 52px; }
html[data-theme="light"] .topbar { padding: 2px 0 18px; border-bottom: 1px solid #e5ebf4; }
html[data-theme="light"] .topbar h1, html[data-theme="light"] h2 { color: #14294a; }
html[data-theme="light"] .topbar h1 { font-size: 26px; }
html[data-theme="light"] .eyebrow { color: #1355cb; }
html[data-theme="light"] .top-actions { gap: 8px; }
html[data-theme="light"] .primary-button { background: linear-gradient(135deg, #1258d3, #237de6); color: #fff; box-shadow: 0 7px 15px rgba(18,88,211,.2); }
html[data-theme="light"] .ghost-button { border-color: #dbe4f0; background: #fff; color: #315071; }
html[data-theme="light"] .user-badge { border-color: #dbe4f0; background: #fff; color: #61738f; }
html[data-theme="light"] .auth-banner { margin-top: 24px; background: linear-gradient(105deg,#edf5ff,#f6f9ff); border-color: #dce8f8; box-shadow: 0 8px 24px rgba(37,76,132,.05); }
html[data-theme="light"] .metric-card, html[data-theme="light"] .radio-card, html[data-theme="light"] .table-card, html[data-theme="light"] .schedule-card, html[data-theme="light"] .activity-item { border-color: #e2e9f3; background: #fff; box-shadow: 0 9px 24px rgba(31,65,111,.06); }
html[data-theme="light"] .metric-card strong { color: #173c9e; }
html[data-theme="light"] .metric-card.live strong { color: #17924e; }
html[data-theme="light"] .radio-logo { color: #fff; background: linear-gradient(135deg,#0f56d4,#44a1f2); }
html[data-theme="light"] .radio-stats strong { color: #173c9e; }
html[data-theme="light"] .card-actions button { border-color: #dbe4f0; background: #f5f8fc; color: #315071; }
html[data-theme="light"] .table-row { border-bottom-color: #e8eef6; }
html[data-theme="light"] .table-action { border-color: #dbe4f0; background: #f7faff; color: #315071; }

/* Remote studio composition: current / next strip, two decks, VU bridge and live destinations. */
html[data-theme="light"] .studio-shell { gap: 12px; }
html[data-theme="light"] .broadcast-strip { border: 1px solid #e1e9f4; background: #fff; box-shadow: 0 9px 24px rgba(31,65,111,.07); }
html[data-theme="light"] .broadcast-cell { border-right-color: #e6edf6; }
html[data-theme="light"] .broadcast-cell strong { color: #1c355b; }
html[data-theme="light"] .broadcast-current { background: #f3f8ff; }
html[data-theme="light"] .broadcast-current strong { color: #1355cb; }
html[data-theme="light"] .broadcast-live { background: linear-gradient(180deg,#f8fbff,#eef5ff); }
html[data-theme="light"] .broadcast-live strong { color: #173c9e; }
html[data-theme="light"] .studio-toolbar { padding: 7px 2px 3px; border: 0; background: transparent; box-shadow: none; }
html[data-theme="light"] .studio-toolbar h2 { color: #14294a; }
html[data-theme="light"] .studio-main-grid { grid-template-columns: minmax(0,1fr) 292px; gap: 16px; }
.studio-right-rail { display: grid; align-content: start; gap: 12px; min-width: 0; }
html[data-theme="light"] .studio-center { gap: 12px; }
html[data-theme="light"] .studio-deck, html[data-theme="light"] .running-order-card, html[data-theme="light"] .studio-library-panel, html[data-theme="light"] .live-social-card { border-color: #e0e8f3; background: #fff; box-shadow: 0 10px 26px rgba(31,65,111,.07); }
html[data-theme="light"] .studio-deck-a { border-top: 3px solid #145bd7; }
html[data-theme="light"] .studio-deck-b { border-top: 3px solid #f39222; }
html[data-theme="light"] .deck-top { color: #70829b; }
html[data-theme="light"] .studio-deck>strong { color: #1c355b; }
html[data-theme="light"] .deck-time { color: #1355cb; }
html[data-theme="light"] .deck-waveform i { background: #4c8ff4; }
html[data-theme="light"] .studio-deck-b .deck-waveform i { background: #f2a144; }
html[data-theme="light"] .muted-wave i { background: #9caec4 !important; }
html[data-theme="light"] .deck-progress { background: #e8eef6; }
html[data-theme="light"] .round-action { border-color: #dbe4f0; background: #f7faff; color: #2f537a; }
html[data-theme="light"] .round-action.play-action { color: #0d9b52; border-color: #8bd2ac; background: #f1fcf5; }
html[data-theme="light"] .round-action.preview-action { color: #d67411; border-color: #f0c184; background: #fff8ef; }
html[data-theme="light"] .studio-vu-meter { border-color: #e0e8f3; background: linear-gradient(180deg,#f9fbff,#edf4fc); box-shadow: none; }
html[data-theme="light"] .studio-vu-meter small { color: #71839c; }
html[data-theme="light"] .studio-control-bar { border-color: #e0e8f3; background: #fff; box-shadow: 0 8px 22px rgba(31,65,111,.06); }
html[data-theme="light"] .control-button, html[data-theme="light"] .onair-button, html[data-theme="light"] .stop-button { border-color: #dbe4f0; background: #f7faff; color: #315071; }
html[data-theme="light"] .control-button.active-control, html[data-theme="light"] .onair-button { color: #07974c; border-color: #9bdab8; background: #f0fcf4; }
html[data-theme="light"] .stop-button { color: #c43d59; background: #fff5f7; border-color: #f0b8c4; }
html[data-theme="light"] .takeover-strip { border-color: #d6e7fb; background: #f3f8ff; color: #607894; }
html[data-theme="light"] .studio-right-rail .live-social-card { padding: 15px; }
html[data-theme="light"] .live-social-card h3 { color: #1b3761; }
html[data-theme="light"] .live-destination-row { grid-template-columns: minmax(0,1fr) auto; padding: 10px 11px; background: #f8fbff; border-color: #e1e9f3; }
html[data-theme="light"] .live-destination-row strong { color: #1b4da9; }
html[data-theme="light"] .live-destination-row small { color: #7789a1; }
html[data-theme="light"] .studio-library-panel { padding: 15px; }
html[data-theme="light"] .studio-search, html[data-theme="light"] .studio-playlist-select { border-color: #dce5f0; background: #f8fbff; color: #274769; }
html[data-theme="light"] .library-track { background: #f7faff; }
html[data-theme="light"] .library-track:hover { border-color: #a9c8f7; background: #f1f7ff; }
html[data-theme="light"] .library-track strong { color: #29486d; }
html[data-theme="light"] .library-footer { border-top-color: #e5edf6; }
html[data-theme="light"] .library-footer strong { color: #119653; }

@media (max-width: 1100px) {
  html[data-theme="light"] .main-content { padding: 22px 24px 44px; }
  html[data-theme="light"] .studio-main-grid { grid-template-columns: minmax(0,1fr) 260px; }
}
@media (max-width: 900px) {
  html[data-theme="light"] .sidebar { width: auto; padding: 14px 16px; background: linear-gradient(135deg,#0f56d4,#123f9c); }
  html[data-theme="light"] .sidebar nav { margin-top: 18px; }
  html[data-theme="light"] .main-content { width: 100%; padding: 20px 16px 40px; }
  html[data-theme="light"] .sidebar-station-card { display:none; }
  html[data-theme="light"] .studio-main-grid { grid-template-columns: 1fr; }
  html[data-theme="light"] .studio-right-rail { order: -1; }
}

/* -------------------------------------------------------------------------
   HostEaagle Broadcast Cloud · visual parity with the approved product image
   ------------------------------------------------------------------------- */
html[data-theme="light"] {
  --host-blue: #0759cf;
  --host-blue-bright: #176be3;
  --host-blue-soft: #edf4ff;
  --host-orange: #ff8717;
  --host-coral: #e65355;
  --host-ink: #15264b;
  --host-muted: #667795;
  --host-line: #e4ebf5;
}
html[data-theme="light"] body,
html[data-theme="light"] .app-shell { background: #f7faff; }
html[data-theme="light"] .sidebar {
  width: 248px;
  flex-basis: 248px;
  padding: 27px 16px 18px;
  border: 0;
  color: #fff;
  background: linear-gradient(180deg, #075bd4 0%, #0b50c4 53%, #073e9f 100%);
  box-shadow: 12px 0 34px rgba(7, 65, 161, .2);
}
html[data-theme="light"] .brand { padding: 0 10px; color:#fff; font-size:17px; letter-spacing:-.02em; }
html[data-theme="light"] .brand small { margin-top:4px; color:#ff9a22; font-size:10px; letter-spacing:.05em; }
html[data-theme="light"] .brand-mark {
  width:40px; height:40px; border-radius:13px; color:#fff;
  background:linear-gradient(145deg,#ff9a22,#e65255);
  box-shadow:0 7px 17px rgba(0,0,0,.18);
}
html[data-theme="light"] .sidebar nav { gap:7px; margin-top:46px; }
html[data-theme="light"] .nav-item {
  min-height:42px; padding:11px 13px; border:0; border-left:0;
  border-radius:10px; color:rgba(255,255,255,.88); font-size:12px; font-weight:750;
}
html[data-theme="light"] .nav-item::before { color:rgba(255,255,255,.9); }
html[data-theme="light"] .nav-item:hover { color:#fff; background:rgba(255,255,255,.13); }
html[data-theme="light"] .nav-item.active {
  color:var(--host-blue); background:#fff;
  box-shadow:0 9px 20px rgba(0,24,98,.2);
}
html[data-theme="light"] .nav-item.active::before { color:var(--host-blue); }
html[data-theme="light"] .nav-group { border-top-color:rgba(255,255,255,.18); }
html[data-theme="light"] .nav-group-label { color:rgba(255,255,255,.56); }
html[data-theme="light"] .sidebar-footer { margin:20px 7px 0; padding:15px 4px 0; border-top-color:rgba(255,255,255,.2); color:rgba(255,255,255,.72); }
html[data-theme="light"] .main-content { width:calc(100% - 248px); padding:28px 34px 58px; }
html[data-theme="light"] .topbar { padding-bottom:21px; border-bottom:1px solid var(--host-line); }
html[data-theme="light"] .topbar h1,
html[data-theme="light"] .section-heading h2 { color:var(--host-ink); }
html[data-theme="light"] .topbar h1 { font-size:28px; }
html[data-theme="light"] .eyebrow { color:var(--host-blue); }
html[data-theme="light"] .primary-button {
  color:#fff; background:linear-gradient(135deg,var(--host-blue-bright),var(--host-blue));
  box-shadow:0 8px 18px rgba(7,89,207,.22);
}
html[data-theme="light"] .primary-button:hover { filter:brightness(1.08); }
html[data-theme="light"] .ghost-button { color:var(--host-blue); border-color:#d8e3f2; background:#fff; }
html[data-theme="light"] .ghost-button:hover { border-color:var(--host-orange); color:var(--host-orange); }
html[data-theme="light"] .user-badge { color:var(--host-muted); border-color:var(--host-line); background:#fff; }
html[data-theme="light"] .auth-banner { border-color:#cfe0fb; background:linear-gradient(110deg,#eef5ff,#fff7ed); }
html[data-theme="light"] .metric-grid { gap:16px; margin-top:28px; }
html[data-theme="light"] .metric-card,
html[data-theme="light"] .radio-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .schedule-card,
html[data-theme="light"] .activity-item {
  border:1px solid var(--host-line); border-radius:16px; background:#fff;
  box-shadow:0 11px 28px rgba(28,67,127,.075); color:#24375c;
}
html[data-theme="light"] .metric-card { padding:21px; }
html[data-theme="light"] .metric-card strong { color:var(--host-blue); }
html[data-theme="light"] .metric-card.live strong { color:#189c52; }
html[data-theme="light"] .radio-logo { background:linear-gradient(145deg,var(--host-blue),var(--host-orange)); }
html[data-theme="light"] .radio-name, html[data-theme="light"] .table-row strong { color:var(--host-ink); }
html[data-theme="light"] .radio-stats strong { color:var(--host-blue); }
html[data-theme="light"] .table-row { border-bottom-color:#edf1f7; }
html[data-theme="light"] .table-action { border-color:#dbe5f2; background:#f7faff; color:var(--host-blue); }

/* Studio: the center VU bridge and the two compact decks are the focal point. */
html[data-theme="light"] .studio-shell { gap:15px; }
html[data-theme="light"] .broadcast-strip,
html[data-theme="light"] .studio-toolbar,
html[data-theme="light"] .studio-deck,
html[data-theme="light"] .running-order-card,
html[data-theme="light"] .studio-control-bar,
html[data-theme="light"] .takeover-strip,
html[data-theme="light"] .studio-library-panel,
html[data-theme="light"] .live-social-card {
  border-color:var(--host-line); background:#fff; box-shadow:0 12px 30px rgba(28,67,127,.075);
}
html[data-theme="light"] .broadcast-strip { border-radius:15px; }
html[data-theme="light"] .broadcast-cell { border-right-color:#edf1f7; }
html[data-theme="light"] .broadcast-cell span { color:#8b9ab2; }
html[data-theme="light"] .broadcast-cell strong { color:var(--host-ink); }
html[data-theme="light"] .broadcast-current { background:#f2f7ff; }
html[data-theme="light"] .broadcast-current strong { color:var(--host-blue); }
html[data-theme="light"] .broadcast-live strong { color:var(--host-ink); }
html[data-theme="light"] .studio-main-grid { grid-template-columns:minmax(0,1fr) 300px; gap:18px; }
html[data-theme="light"] .studio-decks { grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr); gap:14px; align-items:stretch; }
html[data-theme="light"] .studio-deck { border-radius:16px; padding:18px; }
html[data-theme="light"] .studio-deck-a { border-top:3px solid var(--host-blue); }
html[data-theme="light"] .studio-deck-b { border-top:3px solid var(--host-orange); }
html[data-theme="light"] .studio-deck>strong { color:var(--host-ink); }
html[data-theme="light"] .deck-time { color:var(--host-blue); }
html[data-theme="light"] .deck-waveform i { background:#75a9ff; }
html[data-theme="light"] .studio-deck-b .deck-waveform i { background:#ffad4e; }
html[data-theme="light"] .deck-progress { background:#eaf0f8; }
html[data-theme="light"] .deck-progress span { background:linear-gradient(90deg,var(--host-blue),var(--host-orange)); }
html[data-theme="light"] .round-action { border-color:#dce6f3; background:#fff; color:var(--host-blue); }
html[data-theme="light"] .round-action.play-action { background:var(--host-blue); border-color:var(--host-blue); color:#fff; box-shadow:0 7px 14px rgba(7,89,207,.2); }
html[data-theme="light"] .round-action.preview-action { color:var(--host-orange); border-color:#f2c187; background:#fff8ef; }
html[data-theme="light"] .studio-vu-meter { border:1px solid #dbe6f3; border-radius:16px; background:linear-gradient(180deg,#fff,#f4f8fe); box-shadow:none; }
html[data-theme="light"] .studio-vu-title { color:var(--host-blue); }
html[data-theme="light"] .studio-vu-bars i { background:linear-gradient(180deg,#eb4b45 0 17%,#ffb018 18% 36%,#28ac5f 37%); }
html[data-theme="light"] .studio-vu-meter small { color:#8392aa; }
html[data-theme="light"] .studio-control-bar { border-radius:16px; }
html[data-theme="light"] .control-button { color:var(--host-blue); border-color:#d9e4f1; background:#fff; }
html[data-theme="light"] .control-button.active-control { color:#168c4d; border-color:#a0d9b7; background:#effaf3; }
html[data-theme="light"] .onair-button { color:#168c4d; border-color:#9ed9b6; background:#effaf3; }
html[data-theme="light"] .stop-button { color:#ce4a59; border-color:#f0bec6; background:#fff4f6; }
html[data-theme="light"] .live-social-card h3,
html[data-theme="light"] .studio-library-panel h3 { color:var(--host-ink); }
html[data-theme="light"] .live-destination-row { border-color:#e4ebf5; background:#fbfdff; }
html[data-theme="light"] .live-destination-row strong { color:var(--host-blue); }
html[data-theme="light"] .library-track { border-color:#edf1f7; background:#f8fbff; }
html[data-theme="light"] .library-track:hover { border-color:#a8c9f7; background:#f0f6ff; }
html[data-theme="light"] .library-track strong { color:#304c76; }

/* Keep the authentication surface on the same vivid brand palette as the studio. */
html[data-theme="light"] #loginDialog .auth-dialog::before { background:linear-gradient(145deg,#0759cf 0%,#176be3 58%,#ff8717 145%); }
html[data-theme="light"] #loginDialog .auth-brand strong { color:var(--host-ink); }
html[data-theme="light"] #loginDialog .auth-logo { background:linear-gradient(145deg,var(--host-blue),var(--host-orange)); }
html[data-theme="light"] #loginDialog .auth-switch,
html[data-theme="light"] #loginDialog .auth-support a { color:var(--host-orange); }

@media (max-width:900px) {
  html[data-theme="light"] .sidebar { width:auto; padding:14px 16px; background:linear-gradient(135deg,#075bd4,#0b4aaf); }
  html[data-theme="light"] .main-content { width:100%; padding:20px 16px 40px; }
  html[data-theme="light"] .studio-main-grid { grid-template-columns:1fr; }
  html[data-theme="light"] .studio-decks { grid-template-columns:1fr; }
  html[data-theme="light"] .studio-vu-meter { min-height:74px; }
}