/* Browse theme skin for the classic admin pages. Loaded (and html[data-ui="browse"]
   set) by _brand_head.html when the Browse theme applies to an /admin page, so
   every admin page picks up the same colours, type and parts as the viewer
   site without each page being rewritten. Pages redesigned for Browse (the
   Themes page, and next the Dashboard and Scheduler) use browse.css directly.
   Selectors start with html[data-ui="browse"] so they outrank each page's
   own <style> rules. */

html:root[data-ui="browse"] {
  --bg: #121212; --surface: #1c1c1c; --surface2: #1c1c1c; --surface3: #262626;
  --border: #333333; --border2: #3a3a3a; --border-dim: #262626;
  --text: #f5f5f5; --text-2: #b3b3b3; --text-3: #8a8a8a; --text-bright: #ffffff; --text-dim: #8a8a8a;
  --accent: #e50914; --accent-lt: rgba(229, 9, 20, .14); --tb-accent: #e50914;
  --green: #2f9e5b; --green-lt: rgba(47, 158, 91, .16); --accent2: #2f9e5b;
  --amber: #c98a17; --amber-lt: rgba(201, 138, 23, .16); --warn: #c98a17;
  --red: #e50914; --red-lt: rgba(229, 9, 20, .14); --danger: #e50914;
  --yellow: #f5c518; --yellow-lt: rgba(245, 197, 24, .14);
  --purple: #8b6fd6; --purple-lt: rgba(139, 111, 214, .16);
  --panel: #1c1c1c; --panel2: #262626; --tb-bg: #121212; --tb-warn: #f5c518;
  --glow-accent: transparent; --glow-strong: rgba(0, 0, 0, .5);
  --font-body: 'Red Hat Display', system-ui, sans-serif;
  --font-display: 'Red Hat Display', system-ui, sans-serif;
  color-scheme: dark;
}
html[data-ui="browse"] body { background: #121212; color: #f5f5f5; font-family: 'Red Hat Display', system-ui, sans-serif; }


/* ── type ─────────────────────────────────────────────────────────────── */
html[data-ui="browse"] h1, html[data-ui="browse"] .page-title, html[data-ui="browse"] .page-header h1 { font-family: 'Red Hat Display', sans-serif; font-weight: 900; letter-spacing: 0; text-transform: none; color: #ffffff; }
html[data-ui="browse"] .section-title, html[data-ui="browse"] .card-title, html[data-ui="browse"] .table-title, html[data-ui="browse"] .panel-h, html[data-ui="browse"] .modal-title { font-family: 'Red Hat Display', sans-serif; font-weight: 800; letter-spacing: 0; text-transform: none; color: #ffffff; }
html[data-ui="browse"] .card-subtitle, html[data-ui="browse"] .card-sub, html[data-ui="browse"] .section-hint, html[data-ui="browse"] .field-hint, html[data-ui="browse"] .modal-desc { color: #b3b3b3; }
html[data-ui="browse"] a { color: inherit; }

/* ── surfaces ─────────────────────────────────────────────────────────── */
html[data-ui="browse"] .card, html[data-ui="browse"] .panel, html[data-ui="browse"] .table-card, html[data-ui="browse"] .stat-card { background: #1c1c1c; border: none; border-radius: 8px; box-shadow: none; }
html[data-ui="browse"] .card-header, html[data-ui="browse"] .card-hdr, html[data-ui="browse"] .table-header, html[data-ui="browse"] .panel-h { background: transparent; border-bottom: 1px solid #262626; }
html[data-ui="browse"] .modal-overlay { background: rgba(0, 0, 0, .65); }
html[data-ui="browse"] .modal { background: #1c1c1c; border: 1px solid #333333; border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
html[data-ui="browse"] .modal-header, html[data-ui="browse"] .modal-footer { border-color: #262626; background: transparent; }

/* ── buttons ──────────────────────────────────────────────────────────── */
html[data-ui="browse"] .btn, html[data-ui="browse"] .modal-btn { font-family: 'Red Hat Display', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0; text-transform: none; padding: 9px 16px; border-radius: 4px; border: 1px solid #555555; background: transparent; color: #f5f5f5; cursor: pointer; }
html[data-ui="browse"] .btn:hover, html[data-ui="browse"] .modal-btn:hover { border-color: #ffffff; background: rgba(255, 255, 255, .06); }
html[data-ui="browse"] .btn.primary, html[data-ui="browse"] .btn-primary, html[data-ui="browse"] .modal-btn.primary { background: #ffffff; border-color: #ffffff; color: #121212; }
html[data-ui="browse"] .btn.primary:hover, html[data-ui="browse"] .btn-primary:hover { background: #dcdcdc; border-color: #dcdcdc; }
html[data-ui="browse"] .btn.sec, html[data-ui="browse"] .btn.secondary { background: rgba(255, 255, 255, .12); border-color: transparent; color: #ffffff; }
html[data-ui="browse"] .btn.danger, html[data-ui="browse"] .modal-btn.danger { background: #e50914; border-color: #e50914; color: #ffffff; }
html[data-ui="browse"] .btn.danger.outline { background: transparent; color: #ff8a8a; border-color: #8a2a2a; }
html[data-ui="browse"] .btn:disabled, html[data-ui="browse"] .btn[disabled] { opacity: .5; cursor: default; }

/* ── badges, tabs, inputs, tables ─────────────────────────────────────── */
html[data-ui="browse"] .badge { font-family: 'Red Hat Display', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; border: none; background: #262626; color: #d0d0d0; }
html[data-ui="browse"] .badge-green { background: #2f9e5b; color: #ffffff; }
html[data-ui="browse"] .badge-warn { background: #c98a17; color: #ffffff; }
html[data-ui="browse"] .badge-blue { background: #3b6fb6; color: #ffffff; }
html[data-ui="browse"] .tab { font-family: 'Red Hat Display', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0; text-transform: none; border-radius: 20px; border: none; background: #262626; color: #f5f5f5; padding: 9px 18px; }
html[data-ui="browse"] .tab.active, html[data-ui="browse"] .tab[aria-selected="true"] { background: #ffffff; color: #121212; }
html[data-ui="browse"] input[type="text"], html[data-ui="browse"] input[type="search"], html[data-ui="browse"] input[type="number"], html[data-ui="browse"] input[type="email"], html[data-ui="browse"] input[type="password"], html[data-ui="browse"] input[type="url"], html[data-ui="browse"] input[type="date"], html[data-ui="browse"] input[type="time"], html[data-ui="browse"] input[type="datetime-local"], html[data-ui="browse"] select, html[data-ui="browse"] textarea { background: #1c1c1c; color: #f5f5f5; border: 1px solid #333333; border-radius: 6px; font-family: 'Red Hat Display', sans-serif; }
html[data-ui="browse"] input:focus, html[data-ui="browse"] select:focus, html[data-ui="browse"] textarea:focus { border-color: #8a8a8a; outline: none; box-shadow: none; }
html[data-ui="browse"] input[type="checkbox"], html[data-ui="browse"] input[type="radio"] { accent-color: #e50914; }
html[data-ui="browse"] table th { color: #b3b3b3; font-family: 'Red Hat Display', sans-serif; font-weight: 800; letter-spacing: 0; text-transform: none; border-color: #333333; background: transparent; }
html[data-ui="browse"] table td { border-color: #262626; }
html[data-ui="browse"] tbody tr:hover { background: rgba(255, 255, 255, .03); }
html[data-ui="browse"] ::selection { background: rgba(229, 9, 20, .45); color: #ffffff; }
html[data-ui="browse"] :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Page-specific buttons and labels across the classic admin pages use mono
   capitals; the Browse look uses one sentence-case typeface everywhere. */
html[data-ui="browse"] body { margin: 0; }
html[data-ui="browse"] button, html[data-ui="browse"] input[type="button"], html[data-ui="browse"] input[type="submit"] { font-family: 'Red Hat Display', sans-serif; letter-spacing: 0; text-transform: none; font-weight: 800; }
html[data-ui="browse"] button:not(.bx-header *) { border-radius: 4px; }

/* ── type: one family everywhere, sentence case, no tracking ───────────────
   Classic pages set monospace and spaced capitals rule by rule; these win
   over all of them. Code, logs and keyboard keys keep a monospace face.
   browse-skin.js turns literal ALL-CAPS labels into sentence case. */
html:root[data-ui="browse"] { --font-mono: 'Red Hat Display', system-ui, sans-serif; }
html[data-ui="browse"] { font-size: 18px; }
html[data-ui="browse"] body { font-variant-numeric: tabular-nums; }
html[data-ui="browse"] body :where(*:not(pre, code, kbd, samp, pre *, code *, .log-file, .log-ip, .log-path, .log-ua)) { font-family: 'Red Hat Display', system-ui, sans-serif !important; }
html[data-ui="browse"] body :where(*:not(.bx-pill, .bx-badge, .bx-header, .bx-header *)) { letter-spacing: normal !important; text-transform: none !important; }
html[data-ui="browse"] :where(pre, code, kbd, samp, .log-file, .log-ip, .log-path, .log-ua) { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ── scheduler ─────────────────────────────────────────────────────────── */
html[data-ui="browse"] .week-nav { min-height: 64px; padding: 0 24px; gap: 12px; background: #121212; border-bottom: 1px solid #262626; }
html[data-ui="browse"] .week-nav .nav-divider { display: none; }
html[data-ui="browse"] .week-nav-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: #262626; color: #ffffff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
html[data-ui="browse"] .week-nav-btn:hover { background: #333333; }
html[data-ui="browse"] .week-label { font-weight: 900; font-size: 22px; color: #ffffff; }
html[data-ui="browse"] .today-btn { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid #333333; background: transparent; color: #ffffff; font-weight: 800; font-size: 14px; }
html[data-ui="browse"] .today-btn:hover { background: #ffffff; color: #121212; }
html[data-ui="browse"] .tl-search-wrap { margin-left: auto; }
html[data-ui="browse"] .tl-search { height: 38px; border-radius: 19px; background: #1c1c1c; border: 1px solid #333333; font-size: 14px; padding-left: 32px; min-width: 220px; }
html[data-ui="browse"] .tb-menu-btn { height: 38px; padding: 0 14px; border-radius: 4px; border: none; background: #262626; color: #ffffff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
html[data-ui="browse"] .tb-menu-btn:hover, html[data-ui="browse"] .tb-menu.open .tb-menu-btn { background: #ffffff; color: #121212; border: none; }
html[data-ui="browse"] .tb-menu-btn.danger { background: transparent; box-shadow: inset 0 0 0 1px rgba(229, 9, 20, .6); color: #ff8a8a; }
html[data-ui="browse"] .tb-menu-btn.danger:hover, html[data-ui="browse"] .tb-menu.open .tb-menu-btn.danger { background: #e50914; color: #ffffff; box-shadow: none; }
html[data-ui="browse"] .tb-menu-list { top: calc(100% + 6px); min-width: 280px; background: #1c1c1c; border: 1px solid #333333; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); padding: 6px; }
html[data-ui="browse"] .tb-item { border: none; border-radius: 6px; padding: 10px 12px; }
html[data-ui="browse"] .tb-item:hover { background: #262626; }
html[data-ui="browse"] .tb-item .t { font-size: 14px; font-weight: 800; color: #ffffff; }
html[data-ui="browse"] .tb-item .d { font-size: 12.5px; color: #b3b3b3; }
html[data-ui="browse"] .tb-item.danger .t { color: #ff8a8a; }
html[data-ui="browse"] .bx-view-list { padding: 8px 14px; }
html[data-ui="browse"] .bx-view-list .nav-group { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #262626; }
html[data-ui="browse"] .bx-view-list .nav-group:last-child { border-bottom: none; }
html[data-ui="browse"] .bx-view-list .nav-group-label { flex: 1; font-size: 14px; font-weight: 800; color: #ffffff; }
html[data-ui="browse"] .snap-btn, html[data-ui="browse"] .zoom-btn { min-width: 36px; height: 32px; border-radius: 16px; border: 1px solid #333333; background: #262626; color: #ffffff; font-weight: 800; font-size: 13px; }
html[data-ui="browse"] .snap-btn.on, html[data-ui="browse"] .snap-btn.active { background: #ffffff; color: #121212; }
html[data-ui="browse"] .zoom-label { min-width: 48px; text-align: center; font-weight: 800; color: #ffffff; }
html[data-ui="browse"] .snap-interval-select { height: 32px; border-radius: 16px; background: #1c1c1c; border: 1px solid #333333; color: #ffffff; padding: 0 10px; }
html[data-ui="browse"] .tb-sel .mass-move-btn, html[data-ui="browse"] .tb-sel .mass-deselect-btn, html[data-ui="browse"] .tb-sel .mass-delete-btn { height: 36px; border-radius: 4px; font-weight: 800; font-size: 13px; padding: 0 12px; }
html[data-ui="browse"] .tb-sel .mass-move-btn { background: #ffffff; color: #121212; border: none; }
html[data-ui="browse"] .tb-sel .mass-delete-btn { background: #e50914; color: #ffffff; border: none; }
html[data-ui="browse"] .ch-tabs-bar { background: #121212; border-bottom: 1px solid #262626; padding: 0 24px; gap: 20px; }
html[data-ui="browse"] .ch-tab { background: none; border: none; border-radius: 0; padding: 12px 0; color: #b3b3b3; font-weight: 800; font-size: 14px; }
html[data-ui="browse"] .ch-tab.active { color: #ffffff; box-shadow: inset 0 -2px 0 #e50914; background: none; }
html[data-ui="browse"] .ch-tab-add { background: none; border: none; color: #b3b3b3; font-weight: 700; font-size: 13px; }
html[data-ui="browse"] .ch-tab-add:hover { color: #ffffff; }
/* Week grid */
html[data-ui="browse"] .tl-day-header { background: #121212; border-color: #262626; padding: 10px 0 8px; }
html[data-ui="browse"] .tl-day-name { font-weight: 900; font-size: 15px; color: #ffffff; }
html[data-ui="browse"] .tl-day-name.today { color: #e50914; }
html[data-ui="browse"] .tl-day-date { font-size: 12px; color: #8a8a8a; }
html[data-ui="browse"] .day-menu-btn { font-size: 12px; font-weight: 700; color: #b3b3b3; background: none; border: none; }
html[data-ui="browse"] .day-menu-btn:hover { color: #ffffff; }
html[data-ui="browse"] .tl-time-cell { font-size: 11.5px; color: #8a8a8a; }
html[data-ui="browse"] .prog-block { border-radius: 4px; }
html[data-ui="browse"] .prog-block-title { font-weight: 700; }
html[data-ui="browse"] .now-line { background: #e50914; box-shadow: none; }
/* Media sidebar as tabs */
html[data-ui="browse"] .sidebar { background: #121212; border-color: #262626; }
html[data-ui="browse"] .bx-side-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid #262626; flex: none; }
html[data-ui="browse"] .bx-side-tab { height: 48px; background: none; border: none; color: #b3b3b3; font-weight: 800; font-size: 14px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
html[data-ui="browse"] .bx-side-tab .n:not(:empty) { font-size: 11px; font-weight: 800; background: #333333; color: #ffffff; border-radius: 9px; padding: 1px 6px; }
html[data-ui="browse"] .bx-side-tab:hover { color: #ffffff; }
html[data-ui="browse"] .bx-side-tab.active { color: #ffffff; box-shadow: inset 0 -2px 0 #e50914; }
html[data-ui="browse"] .bx-tabbed .sidebar-section { display: none !important; }
html[data-ui="browse"] .bx-tabbed .sidebar-section.bx-on { display: flex !important; flex: 1 1 auto !important; height: auto !important; min-height: 0; border-top: none; }
html[data-ui="browse"] .bx-tabbed .sidebar-section.collapsed .section-body { display: flex !important; }
html[data-ui="browse"] .bx-tabbed .v-resize-handle, html[data-ui="browse"] .bx-tabbed .sec-collapse-btn { display: none !important; }
html[data-ui="browse"] .bx-tabbed .sec-header { pointer-events: none; min-height: 44px; justify-content: flex-end; background: transparent; border-bottom: 1px solid #262626; }
html[data-ui="browse"] .bx-tabbed .sec-header > span:first-child { display: none; }
html[data-ui="browse"] .bx-tabbed .sec-header-actions { pointer-events: auto; }
html[data-ui="browse"] .sec-btn, html[data-ui="browse"] .layout-reset-btn { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid #333333; background: transparent; color: #ffffff; font-weight: 700; font-size: 12.5px; }
html[data-ui="browse"] .sec-btn.primary { background: #ffffff; color: #121212; border-color: #ffffff; }
html[data-ui="browse"] .library-path { font-size: 12px; font-weight: 800; color: #8a8a8a; padding: 10px 16px 6px; }
html[data-ui="browse"] .lib-item, html[data-ui="browse"] .queue-item, html[data-ui="browse"] .recent-item { font-size: 14px; border-color: #1f1f1f; }
html[data-ui="browse"] .lib-item:hover, html[data-ui="browse"] .queue-item:hover { background: #1c1c1c; }
html[data-ui="browse"] .drag-hint { font-size: 12px; color: #8a8a8a !important; }
html[data-ui="browse"] .sidebar-collapse-btn { font-weight: 800; font-size: 12px; background: #1c1c1c; border-color: #333333; color: #b3b3b3; }
/* Right rail: live preview and calendar */
html[data-ui="browse"] .right-sidebar { background: #121212; border-color: #262626; }
html[data-ui="browse"] .mini-player-label { color: #e50914; font-weight: 900; }
html[data-ui="browse"] .mini-player-now { color: #b3b3b3; font-size: 12px; }
html[data-ui="browse"] .mini-cal-title { font-weight: 800; font-size: 15px; color: #ffffff; }
html[data-ui="browse"] .mini-cal-day.mc-today { color: #ffffff; background: #e50914; border-radius: 50%; }
html[data-ui="browse"] .mini-cal-dlabel { color: #8a8a8a; }

/* ── appointments: the switch on each block row ──────────────────────── */
html[data-ui="browse"] .toggle { background: #333333; border: none; }
html[data-ui="browse"] .toggle.on { background: #e50914; }
html[data-ui="browse"] .toggle .knob { background: #ffffff; }

/* ── dashboard ─────────────────────────────────────────────────────────── */
html[data-ui="browse"] .dash-tabs { top: 64px; gap: 26px; padding: 0; margin-top: 0; background: #121212; border-bottom: 1px solid #262626; }
html[data-ui="browse"] .dash-tab { height: 48px; padding: 0; border: none; border-radius: 0; background: none; color: #b3b3b3; font-weight: 800; font-size: 15px; }
html[data-ui="browse"] .dash-tab:hover { background: none; color: #ffffff; }
html[data-ui="browse"] .dash-tab.active, html[data-ui="browse"] .dash-tab[aria-selected="true"] { background: none; border: none; color: #ffffff; box-shadow: inset 0 -2px 0 #e50914; }
html[data-ui="browse"] .dash-tab .dt-ic { display: none; }
html[data-ui="browse"] .card { border: none; border-radius: 10px; }
html[data-ui="browse"] .card-header { border-bottom-color: #262626; background: transparent; padding: 14px 18px; }
html[data-ui="browse"] .card-title { font-size: 16px; font-weight: 800; }
html[data-ui="browse"] .card-subtitle { font-size: 12.5px; color: #8a8a8a; }
html[data-ui="browse"] .card-link { color: #b3b3b3; font-weight: 800; font-size: 13px; }
html[data-ui="browse"] .card-link:hover { color: #ffffff; opacity: 1; }
html[data-ui="browse"] .stat-card { border: none; border-radius: 10px; }
html[data-ui="browse"] .stat-value { font-weight: 900; font-size: 34px; color: #ffffff; }
html[data-ui="browse"] .stat-value.accent { color: #ffffff; }
html[data-ui="browse"] .stat-value.amber { color: #f5c518; }
html[data-ui="browse"] .stat-value.green { color: #ffffff; }
/* The scheduler grid sizes its blocks in pixels per minute, so it keeps the
   classic text scale. */
html[data-ui="browse"]:has(#timeline) { font-size: 16px; }
html[data-ui="browse"] .lib-name { color: #f5f5f5; }
html[data-ui="browse"] .right-sidebar .sec-header span { color: #ffffff; font-weight: 800; }

/* ── viewer pages: What's On (/schedule) and How it works (/how-to) ───── */
html[data-ui="browse"] .page-head { background: #121212; border-bottom: 1px solid #262626; padding: 32px 40px 24px; }
html[data-ui="browse"] .hero-eyebrow, html[data-ui="browse"] .doc-hero-eyebrow { font-size: 13px; font-weight: 800; color: #f5c518; margin-bottom: 6px; }
html[data-ui="browse"] .hero-title, html[data-ui="browse"] .doc-hero-title { font-weight: 900; font-size: 46px; line-height: 1.05; color: #ffffff; }
html[data-ui="browse"] .doc-hero-title span { color: inherit; }
html[data-ui="browse"] .hero-sub, html[data-ui="browse"] .doc-hero-desc { color: #b3b3b3; font-size: 16px; }
html[data-ui="browse"] .week-nav-bar, html[data-ui="browse"] .wn-filters { background: #121212; border-color: #262626; padding-left: 40px; padding-right: 40px; }
html[data-ui="browse"] .wnav-btn, html[data-ui="browse"] .wnav-this-week { height: 36px; padding: 0 16px; border-radius: 18px; border: none; background: #262626; color: #ffffff; font-weight: 800; font-size: 14px; }
html[data-ui="browse"] .wnav-btn:hover, html[data-ui="browse"] .wnav-this-week:hover { background: #ffffff; color: #121212; border: none; }
html[data-ui="browse"] .wnav-label { font-weight: 900; font-size: 18px; color: #ffffff; }
html[data-ui="browse"] .wn-zoom { border: none; background: #262626; border-radius: 18px; padding: 3px; }
html[data-ui="browse"] .wn-zoom button { border-radius: 15px; padding: 6px 12px; font-size: 13px; font-weight: 800; color: #b3b3b3; }
html[data-ui="browse"] .wn-zoom button.on { background: #ffffff; color: #121212; }
html[data-ui="browse"] .f-chip { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid #333333; background: transparent; color: #ffffff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
html[data-ui="browse"] .f-chip:hover { border-color: #ffffff; }
html[data-ui="browse"] .f-chip.on { background: #ffffff; border-color: #ffffff; color: #121212; }
html[data-ui="browse"] .f-chip i { border-radius: 50%; }
html[data-ui="browse"] .f-search, html[data-ui="browse"] .ph-search .guide-search-input, html[data-ui="browse"] .doc-search-input { height: 40px; border-radius: 20px; background: #1c1c1c; border: 1px solid #333333; color: #ffffff; padding: 0 16px; font-size: 14px; }
html[data-ui="browse"] .wk-days, html[data-ui="browse"] .wk-dayh { background: #121212; border-color: #262626; }
html[data-ui="browse"] .wk-blk { border-radius: 4px; }
html[data-ui="browse"] .wk-nowline { background: #e50914; box-shadow: none; }
html[data-ui="browse"] #day-pills { background: #121212; border-color: #262626; padding: 10px 16px; gap: 6px; }
html[data-ui="browse"] #day-pills .day-pill { min-width: 56px; padding: 8px 10px; border-radius: 8px; border: none; background: #1c1c1c; gap: 2px; }
html[data-ui="browse"] #day-pills .day-pill:hover { background: #262626; border: none; }
html[data-ui="browse"] #day-pills .day-pill.today { background: #ffffff; border: none; }
html[data-ui="browse"] #day-pills .day-pill.today .dp-name, html[data-ui="browse"] #day-pills .day-pill.today .dp-date { color: #121212; }
html[data-ui="browse"] .dp-name { font-size: 12px; font-weight: 800; color: #b3b3b3; }
html[data-ui="browse"] .dp-date { font-size: 15px; font-weight: 900; color: #ffffff; white-space: nowrap; }
html[data-ui="browse"] .dp-dot { background: #e50914; }
html[data-ui="browse"] .day-heading { border-color: #262626; }
html[data-ui="browse"] .dh-name { font-weight: 900; color: #ffffff; }
html[data-ui="browse"] .dh-today-badge { background: #e50914; color: #ffffff; border-radius: 3px; font-weight: 800; }
html[data-ui="browse"] .prog-item { border-radius: 8px; }
html[data-ui="browse"] .prog-item:hover { background: #1c1c1c; border-color: transparent; }
html[data-ui="browse"] .prog-item.now-item { background: #241515; border-color: #e50914; }
html[data-ui="browse"] .prog-item.now-item .pi-title, html[data-ui="browse"] .prog-item.now-item .pi-time { color: #ffffff; }
html[data-ui="browse"] .pi-title { font-weight: 800; }
html[data-ui="browse"] .pi-tag { border: none; border-radius: 3px; background: #262626; color: #d0d0d0; font-weight: 800; }
html[data-ui="browse"] .foot { background: #121212; border-color: #262626; color: #8a8a8a; }
html[data-ui="browse"] .foot a { color: #b3b3b3; }
html[data-ui="browse"] .pip-player { border: none; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
html[data-ui="browse"] .pip-label { color: #e50914; font-weight: 900; }
/* How it works */
html[data-ui="browse"] .doc-sidebar { background: #121212; border-color: #262626; }
html[data-ui="browse"] .sidebar-label { font-size: 12px; font-weight: 800; color: #8a8a8a; border-color: #262626; }
html[data-ui="browse"] .doc-sidebar a { border-radius: 6px; color: #b3b3b3; font-weight: 700; }
html[data-ui="browse"] .doc-sidebar a:hover { background: #1c1c1c; color: #ffffff; }
html[data-ui="browse"] .doc-sidebar a.active { background: #262626; color: #ffffff; border-color: #e50914; }
html[data-ui="browse"] .doc-section-icon { border: none; border-radius: 8px; background: #262626; }
html[data-ui="browse"] .doc-section-title { font-weight: 900; font-size: 24px; color: #ffffff; }
html[data-ui="browse"] .doc-section-num { color: #8a8a8a; }
html[data-ui="browse"] .callout { border-radius: 0 8px 8px 0; background: #1c1c1c; }
html[data-ui="browse"] .callout-label { font-weight: 800; }
html[data-ui="browse"] .feature-card { border: none; border-radius: 8px; background: #1c1c1c; }
html[data-ui="browse"] .feature-card-title { font-weight: 800; color: #ffffff; }
html[data-ui="browse"] .kbd { background: #262626; border: 1px solid #333333; border-radius: 4px; color: #ffffff; }
@media (max-width: 860px) {
  html[data-ui="browse"] .page-head, html[data-ui="browse"] .week-nav-bar, html[data-ui="browse"] .wn-filters { padding-left: 16px; padding-right: 16px; }
  html[data-ui="browse"] .hero-title, html[data-ui="browse"] .doc-hero-title { font-size: 34px; }
  html[data-ui="browse"] .wn-center { flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
  html[data-ui="browse"] .wnav-btn, html[data-ui="browse"] .wnav-this-week { padding: 0 12px; font-size: 13px; }
  html[data-ui="browse"] .wnav-label { order: -1; flex-basis: 100%; text-align: center; }
}

/* ── scheduler dialogs, popover and bars: Browse buttons ──────────────────
   Every dialog button family maps to one of four looks: primary (white),
   secondary (grey), quiet (outline) and destructive (red). */
html[data-ui="browse"] :is(.as-btn, .bm-btn, .rec-btn, .cc-footer-btn, .cc-scan-btn, .sched-all-btn, .modal-btn, .edit-popover-btn, .bm-conflict-btn, .cc-move-btn, .ch-add-submit, .ch-del-btn, .gsb-fill, .gsb-clear, .undo-btn) {
  min-height: 40px; padding: 0 18px; border-radius: 4px; border: 1px solid transparent; background: #262626; color: #ffffff; font-weight: 800; font-size: 14px; box-shadow: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
html[data-ui="browse"] :is(.as-btn, .bm-btn, .rec-btn, .cc-footer-btn, .cc-scan-btn, .sched-all-btn, .modal-btn, .edit-popover-btn, .bm-conflict-btn, .cc-move-btn, .ch-add-submit, .gsb-clear):hover { background: #333333; color: #ffffff; border-color: transparent; }
html[data-ui="browse"] :is(.as-btn.confirm-btn, .bm-btn.apply, .rec-btn.apply, .sched-all-btn.confirm, .cc-scan-btn, .edit-popover-btn.save, .ch-add-submit, .gsb-fill, .modal-btn.replace-btn, .undo-btn) { background: #ffffff; color: #121212; border-color: #ffffff; }
html[data-ui="browse"] :is(.as-btn.confirm-btn, .bm-btn.apply, .rec-btn.apply, .sched-all-btn.confirm, .cc-scan-btn, .edit-popover-btn.save, .ch-add-submit, .gsb-fill, .modal-btn.replace-btn, .undo-btn):hover { background: #dcdcdc; color: #121212; border-color: #dcdcdc; }
html[data-ui="browse"] :is(.as-btn.cancel, .bm-btn.cancel, .rec-btn.cancel, .sched-all-btn.cancel, .edit-popover-btn.cancel, .modal-btn.close-btn, .cc-footer-btn) { background: transparent; color: #ffffff; border-color: #555555; }
html[data-ui="browse"] :is(.as-btn.cancel, .bm-btn.cancel, .rec-btn.cancel, .sched-all-btn.cancel, .edit-popover-btn.cancel, .modal-btn.close-btn, .cc-footer-btn):hover { background: transparent; border-color: #ffffff; }
html[data-ui="browse"] :is(.as-btn.danger-btn, .edit-popover-btn.del, .ch-del-btn, .mass-delete-btn) { background: #e50914; color: #ffffff; border-color: #e50914; }
html[data-ui="browse"] :is(.as-btn.danger-btn, .edit-popover-btn.del, .ch-del-btn):hover { background: #f6121d; color: #ffffff; border-color: #f6121d; }
html[data-ui="browse"] :is(.as-btn, .bm-btn, .rec-btn, .sched-all-btn, .edit-popover-btn, .modal-btn):disabled { opacity: .4; cursor: default; }
html[data-ui="browse"] #conflict-push-btn { background: #262626 !important; border-color: transparent !important; color: #ffffff !important; }
/* Segmented choices: grey pills, white when picked */
html[data-ui="browse"] :is(.as-type-btn, .interval-btn, .rec-pat-btn, .cc-scope-btn) { min-height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid #333333; background: transparent; color: #b3b3b3; font-weight: 800; font-size: 13px; }
html[data-ui="browse"] :is(.as-type-btn, .interval-btn, .rec-pat-btn, .cc-scope-btn):hover { border-color: #ffffff; color: #ffffff; background: transparent; }
html[data-ui="browse"] :is(.as-type-btn, .interval-btn, .rec-pat-btn, .cc-scope-btn).active { background: #ffffff; border-color: #ffffff; color: #121212; }
/* Dialog chrome: one panel look, white titles */
html[data-ui="browse"] :is(.modal, .bm-modal, .cc-modal, .rec-modal, .sched-all-modal, .kbd-popup, .ch-manage-modal, .edit-popover) { background: #1c1c1c !important; border: 1px solid #333333 !important; border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6) !important; color: #f5f5f5; }
html[data-ui="browse"] :is(.modal-title, .bm-title, .cc-title, .rec-title, .sched-all-title, .kbd-title, .ch-manage-title, #as-modal .modal-title, #rp-modal .modal-title) { color: #ffffff !important; font-weight: 900; font-size: 20px; }
html[data-ui="browse"] :is(.modal-header, .bm-header, .cc-header, .rec-header, .sched-all-header, .kbd-header, .ch-manage-header, .edit-popover-head) { background: transparent !important; border-color: #262626 !important; }
html[data-ui="browse"] :is(.as-control-label, .bm-label, .rec-label, .sched-all-label, .edit-popover-label, .cc-gap-label, .ch-add-label, .bm-section-title) { color: #b3b3b3; font-weight: 800; font-size: 13px; }
html[data-ui="browse"] :is(.bm-close, .cc-close, .rec-close, .kbd-close, .sched-all-close, .ch-manage-close, .edit-popover-head-close) { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: #b3b3b3; font-size: 18px; }
html[data-ui="browse"] :is(.bm-close, .cc-close, .rec-close, .kbd-close, .sched-all-close, .ch-manage-close, .edit-popover-head-close):hover { background: #262626; color: #ffffff; }
html[data-ui="browse"] .edit-popover-head { font-weight: 900; }
html[data-ui="browse"] .kbd-key { background: #262626; border: 1px solid #333333; border-radius: 4px; color: #ffffff; }
/* Gap selection bar, undo toast, day menus, tooltip */
html[data-ui="browse"] .gap-select-bar { background: #1c1c1c; border: 1px solid #333333; border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
html[data-ui="browse"] .undo-toast, html[data-ui="browse"] .toast { background: #1c1c1c; border: 1px solid #333333; border-radius: 8px; color: #ffffff; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
html[data-ui="browse"] .day-dropdown { background: #1c1c1c; border: 1px solid #333333; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); padding: 6px; }
html[data-ui="browse"] .day-dropdown-item { border-radius: 6px; font-weight: 700; font-size: 14px; color: #f5f5f5; border: none; }
html[data-ui="browse"] .day-dropdown-item:hover { background: #262626; }
html[data-ui="browse"] .block-tooltip { background: #1c1c1c; border: 1px solid #333333; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
html[data-ui="browse"] .bt-title { font-weight: 800; color: #ffffff; }
/* Item popover: its tool buttons carry inline colours; here they're all secondary. */
html[data-ui="browse"] .ep-tools .edit-popover-btn { background: #262626 !important; border-color: transparent !important; color: #ffffff !important; }
html[data-ui="browse"] .ep-tools .edit-popover-btn:hover { background: #333333 !important; }
html[data-ui="browse"] .ep-tools-label { font-size: 12px; font-weight: 800; color: #8a8a8a; }
html[data-ui="browse"] .edit-popover-head { color: #ffffff !important; font-size: 16px; font-weight: 900; padding: 12px 14px; }
html[data-ui="browse"] .ep-footer { border-color: #262626; }
/* The Browse theme is dark only, so the classic light/dark switch goes. */
html[data-ui="browse"] .appearance-section { display: none; }