/* Odyssey workspace — shared with the public cinema-inspired identity.
   Load after the original portal / studio styles. Functional controls, native
   hidden states, drag geometry and application event hooks stay intact. */

:is(.portal-page, .studio-page) {
  --bg: #090c10;
  --surface: #11171e;
  --surface-2: #182130;
  --text: #f5f1e9;
  --muted: #a6adb7;
  --line: #e3ecff20;
  --accent: #ff8666;
  --cyan: #b8d4ff;
  --portal-cyan: #b8d4ff;
  --portal-coral: #ff8666;
  --green: #a0e0c3;
  color-scheme: dark;
  color: var(--text);
  background: radial-gradient(ellipse at 90% 0%, #29426532, transparent 46%),
    radial-gradient(ellipse at 3% 25%, #773e371b, transparent 38%), var(--bg);
  font-family: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:is(.portal-page, .studio-page) *,
:is(.portal-page, .studio-page) *::before,
:is(.portal-page, .studio-page) *::after { box-sizing: border-box; }
:is(.portal-page, .studio-page) [hidden] { display: none !important; }
:is(.portal-page, .studio-page) ::selection { background: #ff866650; color: #fff; }
:is(.portal-page, .studio-page) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}
:is(.portal-page, .studio-page) :is(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
:is(.portal-page, .studio-page) :is(button, input, select, textarea) { font-family: inherit; }
:is(.portal-page, .studio-page) :is(button, input, select, textarea):disabled { cursor: not-allowed; }
:is(.portal-page, .studio-page) :is(h1, h2, h3) { color: var(--text); text-wrap: balance; }
:is(.portal-page, .studio-page) :is(p, label, li) { overflow-wrap: anywhere; }
:is(.portal-page, .studio-page) :is(input, select, textarea) { accent-color: var(--accent); }
:is(.portal-page, .studio-page) :is(input, textarea)::placeholder { color: #8e9aab; opacity: 1; }
:is(.portal-page, .studio-page) :is(.form-message.error, #notice.error, .timeline-status.error) { color: #ffb6a6; }

/* The compact workspace header leaves room for the application. */
.portal-page .portal-header,
.studio-page > header {
  width: 100%;
  max-width: none;
  min-height: 90px;
  height: auto;
  margin: 0;
  padding: 19px max(28px, calc((100vw - 1344px) / 2));
  border-bottom: 1px solid var(--line);
  background: #080b12d9;
  backdrop-filter: blur(20px);
  gap: 24px;
}
.portal-page .portal-header .brand { color: var(--text); }
.portal-page .portal-header .brand img { border-radius: 13px; }
.portal-page .portal-header .brand strong { font-size: 15px; letter-spacing: .13em; }
.portal-page .portal-header .brand small { color: var(--muted); font-size: 8px; letter-spacing: .25em; }
.portal-page .portal-header-actions { gap: 20px; flex-wrap: wrap; }
.portal-page .portal-header :is(.account-email, .text-button) { font-size: 13px; }
.portal-page .portal-header .account-email { color: var(--muted); overflow-wrap: anywhere; }
.portal-page .text-button { color: #d5dde8; min-height: 44px; }
.portal-page .text-button:hover { color: var(--accent); }
.studio-page > header > .brand {
  color: var(--text);
  font-size: 18px;
  letter-spacing: .16em;
  line-height: 1.5;
}
.studio-page > header > .brand span { color: var(--muted); font-size: 9px; letter-spacing: .24em; margin-top: 2px; }
.studio-page #account-tools { align-items: center; }
.studio-page #account-tools label { font-size: 11px; color: var(--muted); gap: 4px; }
.studio-page #account-tools select { padding: 8px 12px; min-height: 42px; }

/* Optional shared navigation, rendered by the site shell. */
:is(.portal-page, .studio-page) .workspace-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px max(28px, calc((100vw - 1344px) / 2));
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
:is(.portal-page, .studio-page) .workspace-switcher a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: 100px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
:is(.portal-page, .studio-page) .workspace-switcher a:hover { color: var(--text); background: #ffffff08; }
:is(.portal-page, .studio-page) .workspace-switcher a[aria-current="page"] { color: var(--accent); border-color: #ff866638; background: #ff86660d; }

/* Player sign-in. */
.portal-page .portal-main { max-width: 1400px; padding: clamp(44px, 6vw, 84px) 28px 96px; }
.portal-page .auth-layout {
  min-height: min(660px, calc(100svh - 250px));
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: clamp(44px, 7vw, 112px);
  align-items: center;
}
.portal-page .auth-intro { position: relative; isolation: isolate; }
.portal-page .auth-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  top: -60px;
  left: -100px;
  background: radial-gradient(circle, #ff866610, transparent 68%);
  pointer-events: none;
}
.portal-page .auth-intro h1 {
  margin: 24px 0 28px;
  max-width: 720px;
  font-size: clamp(50px, 6.3vw, 88px);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: 1.035;
}
.portal-page .auth-intro > p:not(.section-kicker) { max-width: 470px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.portal-page .auth-intro .auth-help { max-width: 420px !important; font-size: 13px !important; color: #94a0b1; }
.portal-page :is(.section-kicker, .panel-label),
.studio-page .eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.portal-page .auth-intro .section-kicker { display: flex; gap: 12px; align-items: center; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.portal-page .auth-intro .section-kicker::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.portal-page .auth-points { display: grid; gap: 13px; margin: 32px 0; }
.portal-page .auth-points span { color: #dde2e8; font-size: 14px; }
.portal-page .auth-points span::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 11px; border: 1px solid #ff86662e; border-radius: 50%; color: var(--accent); font-size: 11px; }
.portal-page .auth-panel,
.studio-page #login {
  position: relative;
  padding: clamp(26px, 3.2vw, 44px);
  border: 1px solid #e3ecff26;
  border-radius: 24px;
  background: linear-gradient(140deg, #1c2635, #101722 70%);
  box-shadow: 0 32px 96px #0004, inset 0 1px #ffffff0b;
}
.portal-page .auth-tabs { padding: 5px; gap: 4px; border: 1px solid #e3ecff0b; border-radius: 12px; background: #070d16; }
.portal-page .auth-tabs button { min-height: 44px; padding: 9px 6px; border-radius: 8px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.portal-page .auth-tabs button:hover { color: var(--text); background: #ffffff08; }
.portal-page .auth-tabs button[aria-selected="true"] { color: #171014; background: var(--accent); box-shadow: 0 3px 10px #0002; }
.portal-page .auth-form { margin-top: 28px; }
.portal-page .auth-form label,
.portal-page .source-dialog label { margin: 22px 0; gap: 10px; color: #e6e8ed; font-size: 13px; font-weight: 550; }
.portal-page :is(.auth-form, .source-dialog) :is(input:not([type="checkbox"]):not([type="radio"]), select),
.portal-page [data-dvr-enrollment-form] input,
.studio-page :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 52px;
  height: auto;
  min-width: 0;
  padding: 13px 15px;
  color: var(--text);
  border: 1px solid #9daec03d;
  border-radius: 10px;
  background: #090e17;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 160ms, box-shadow 160ms;
}
.portal-page :is(.auth-form, .source-dialog) :is(input, select):focus,
.studio-page :is(input, select, textarea):focus { border-color: #b8d4ff90; box-shadow: 0 0 0 3px #b8d4ff0b; }
.portal-page .auth-form [name="code"] { font-size: 13px; letter-spacing: -.02em; }
.portal-page .auth-form .portal-button { margin-top: 18px; }
.portal-page :is(.form-note, .billing-note, .section-note, .delete-warning),
.studio-page :is(.muted, .help, .roadmap-note) { color: var(--muted); font-size: 13px; line-height: 1.75; }
.portal-page .form-message:not(:empty) { padding-top: 10px; line-height: 1.6; }

/* A clear, consistent hierarchy for every action. */
.portal-page .portal-button,
.studio-page button {
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid #e3ecff24;
  border-radius: 10px;
  background: #ffffff07;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  transition: background 160ms, border-color 160ms, box-shadow 160ms;
}
.portal-page .portal-button:hover,
.studio-page button:hover { transform: none; filter: none; background: #ffffff10; border-color: #e3ecff4d; }
.portal-page .portal-button.primary,
.portal-page .portal-button.compact,
.studio-page :is(#login-form button, #create-channel, #create-continue, #review, #publish) {
  color: #171014;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 18px #ff86660a;
}
.portal-page :is(.portal-button.primary, .portal-button.compact):hover,
.studio-page :is(#login-form button, #create-channel, #create-continue, #review, #publish):hover { background: #ffae99; border-color: #ffae99; }
.portal-page .portal-button.secondary,
.studio-page :is(.secondary, .quiet) { background: #ffffff04; }
.portal-page .danger-button,
.studio-page .timeline-destructive { color: #ffb6a6; background: #ff866608; border-color: #ff866635; }
.portal-page .danger-button:hover,
.studio-page .timeline-destructive:hover { background: #ff866615; border-color: #ff866660; }

/* Account dashboard and all management submenus. */
.portal-page .dashboard-heading { gap: 28px; margin-bottom: 38px; }
.portal-page .dashboard-heading h1 { margin: 10px 0 0; font-size: clamp(44px, 5vw, 68px); font-weight: 500; letter-spacing: -.06em; line-height: 1.07; }
.portal-page .dashboard-heading > div:first-child > p:last-child { max-width: 650px; margin-top: 20px; font-size: 15px; }
.portal-page .free-pill { padding: 9px 13px; color: var(--cyan); border-color: #b8d4ff2b; background: #b8d4ff08; font-size: 10px; letter-spacing: .08em; font-weight: 550; }
.portal-page .management-code-panel { gap: 30px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 32px; border: 1px solid #b8d4ff2a; border-radius: 20px; background: linear-gradient(120deg, #182536, #101925 75%); }
.portal-page .management-code-panel .panel-label { color: var(--cyan); }
.portal-page .management-code-panel h2,
.portal-page .portal-section h2,
.portal-page .dialog-heading h2 { font-size: clamp(23px, 2.3vw, 29px); font-weight: 550; letter-spacing: -.035em; line-height: 1.25; }
.portal-page .management-code-panel > div:first-child > p:last-child { max-width: 430px; font-size: 14px; line-height: 1.6; }
.portal-page .management-code { width: 100%; padding: 14px; min-width: 0; border: 1px solid #b8d4ff22; border-radius: 10px; background: #090f19; color: #e0eafa; text-align: center; font-size: clamp(13px, 1.4vw, 17px); line-height: 1.5; letter-spacing: .04em; overflow-wrap: anywhere; }
.portal-page .code-actions { justify-content: flex-start; gap: 9px; }
.portal-page .code-actions .portal-button { flex: 1 1 auto; }
.portal-page .management-grid { margin-top: 24px; gap: 24px; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; }
.portal-page .portal-section { min-width: 0; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(150deg, #ffffff03, transparent 70%), var(--surface); }
.portal-page .source-section,
.portal-page .profile-section,
.portal-page .device-section { grid-column: 1; }
.portal-page .plan-section { grid-column: 2; grid-row: 1; position: static; }
.portal-page [data-dvr-enrollment].portal-section { grid-column: 2; grid-row: 2; }
.portal-page .account-section { grid-column: 2; grid-row: 3; gap: 24px; }
.portal-page .portal-section-heading { gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.portal-page .section-note { margin: -6px 0 22px; }
.portal-page :is(.source-list, .profile-list, .device-list) { display: grid; gap: 10px; }
.portal-page :is(.source-row, .profile-row, .device-row) { padding: 16px; gap: 10px; border: 1px solid #e3ecff0c; border-radius: 12px; background: #090f19; }
.portal-page :is(.source-row, .profile-row, .device-row) > div { min-width: 0; }
.portal-page :is(.source-row, .profile-row, .device-row) strong { color: var(--text); font-size: 15px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.portal-page .source-row span:not(.source-icon),
.portal-page :is(.profile-row, .device-row) div span { color: var(--muted); font-size: 12px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.portal-page .profile-row { grid-template-columns: 44px minmax(0, 1fr) auto auto auto; }
.portal-page .profile-row > .source-action:last-child:not([data-delete-profile]) { grid-column: 2 / -1; justify-self: start; }
.portal-page :is(.source-icon, .device-icon, .profile-avatar) { width: 42px; height: 42px; border: 1px solid #b8d4ff20; border-radius: 12px; background: #172639; color: var(--cyan); font-size: 11px; }
.portal-page .profile-avatar { border-color: #ff866628; border-radius: 50%; background: #302326; color: #ffd5c8; font-size: 16px; }
.portal-page .source-action { min-height: 44px; padding: 9px; border-radius: 8px; color: #c5d2e3; font-size: 12px; line-height: 1.4; }
.portal-page .source-action:hover { color: var(--text); background: #ffffff0c; }
.portal-page .source-action.danger { color: #eab1a8; }
.portal-page :is(.auto-badge, .device-status) { padding: 5px 8px; border: 1px solid #a0e0c31a; background: #a0e0c30a; color: var(--green); font-size: 9px; letter-spacing: .06em; }
.portal-page .device-status.expired { color: var(--muted); border-color: var(--line); background: #ffffff04; }
.portal-page .empty-state { padding: 40px 24px; border: 1px dashed #e3ecff26; border-radius: 14px; background: #090f1950; }
.portal-page .empty-state strong { color: #e8e6e0; font-size: 16px; font-weight: 550; }
.portal-page .empty-state p { font-size: 13px; line-height: 1.7; }
.portal-page .plan-status { color: var(--green); }
.portal-page .plan-section li { color: #c2cbd7; font-size: 14px; line-height: 1.6; }
.portal-page .account-section p:not(.panel-label) { color: var(--muted); font-size: 13px; line-height: 1.75; }
.portal-page [data-dvr-enrollment-form] { gap: 15px; margin: 24px 0; }
.portal-page [data-dvr-enrollment-form] label { gap: 10px; font-size: 13px; color: #e6e8ed; }
.portal-page [data-dvr-enrollment-devices] > div { border-color: var(--line); font-size: 13px; padding: 18px 0; }
.portal-page [data-dvr-enrollment] [role="status"] { color: var(--muted); font-size: 13px; }

/* Source, profile, DVR, security and channel-icon dialogs. */
.portal-page .source-dialog,
.studio-page .timeline-dialog { color: var(--text); border: 1px solid #e3ecff30; border-radius: 24px; background: #111824; box-shadow: 0 40px 140px #0009; }
.portal-page .source-dialog { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 40px); }
.portal-page .source-dialog::backdrop,
.studio-page .timeline-dialog::backdrop { background: #03060cc9; backdrop-filter: blur(9px); }
.portal-page .dialog-shell { min-width: 0; padding: 32px; }
.portal-page .dialog-heading { gap: 20px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.portal-page .dialog-close { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #ffffff04; color: var(--text); font-size: 27px; line-height: 1; }
.portal-page .dialog-close:hover { background: #ffffff0e; }
.portal-page .dialog-actions { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); gap: 10px; flex-wrap: wrap; }
.portal-page .source-dialog label > span { color: var(--muted); }
.portal-page .source-dialog .check-row { gap: 12px !important; grid-template-columns: 20px minmax(0, 1fr) !important; line-height: 1.6; }
.portal-page .source-dialog .check-row input { min-height: 20px; height: 20px !important; width: 20px !important; margin: 0; accent-color: var(--accent); }
.portal-page .source-dialog .check-row span { color: #d7dce5; }
.portal-page .source-access { padding: 18px; margin: 24px 0; min-width: 0; border-color: var(--line); border-radius: 12px; background: #090e1750; }
.portal-page .source-access legend { color: var(--cyan); font-size: 12px; padding: 0 8px; }
.portal-page .source-dialog .dvr-policy-fields input[type="checkbox"] { min-height: 24px; height: 24px; width: 24px; accent-color: var(--accent); }
.portal-page .source-dialog .dvr-policy-fields label { border-color: var(--line); line-height: 1.6; }
.portal-page .dvr-policy-dialog .dvr-policy-confirmation span { color: #d7dce5; }
.portal-page .source-dialog [data-fields="boss"] .checkbox-label input { accent-color: var(--accent); }
.portal-page .media-service-options { margin: 28px 0 18px; padding: 0; min-width: 0; border: 0; }
.portal-page .media-service-options legend { margin-bottom: 7px; color: #e6e8ed; font-size: 13px; font-weight: 550; }
.portal-page .media-service-options > .form-note { margin: 0 0 16px; font-size: 12px; }
.portal-page .media-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-page .source-dialog .media-service-choice { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 100px; margin: 0; padding: 16px; border: 1px solid #e3ecff26; border-radius: 12px; background: #090e17; cursor: pointer; transition: border-color 160ms, background 160ms; }
.portal-page .source-dialog .media-service-choice:hover { border-color: #e3ecff55; background: #151d29; }
.portal-page .source-dialog .media-service-choice:has(input:checked),
.portal-page .source-dialog .media-service-choice.is-selected { border-color: #ff866699; background: #ff86660b; box-shadow: inset 0 0 0 1px #ff866612; }
.portal-page .source-dialog .media-service-choice input { grid-column: 2; grid-row: 1; min-height: 20px; height: 20px; width: 20px; margin: 0; padding: 0; accent-color: var(--accent); }
.portal-page .source-dialog .media-service-choice > .media-service-mark { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #b8d4ff26; border-radius: 8px; background: #b8d4ff0b; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.portal-page .source-dialog .media-service-choice > span:last-child { grid-column: 1 / -1; color: var(--text); font-size: 14px; font-weight: 550; }
.portal-page .source-dialog .media-service-choice:has(input:checked) .media-service-mark { color: #ffd0c3; border-color: #ff866635; background: #ff866616; }
.portal-page .media-service-options.is-detected { opacity: .55; }
.portal-page .media-service-options.is-detected .media-service-choice { cursor: default; }
.portal-page .media-credentials { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.portal-page .source-dialog .media-credentials label { min-width: 0; margin-top: 10px; margin-bottom: 10px; }
.portal-page .source-dialog .media-credentials label > span { font-size: 11px; margin-top: -7px; margin-bottom: -4px; }
.portal-page .source-detection-status { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; padding: 18px; border: 1px solid #a0e0c345; border-radius: 13px; background: #a0e0c308; }
.portal-page .source-detection-check { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; border-radius: 50%; background: #a0e0c31a; color: var(--green); font-size: 15px; }
.portal-page .source-detection-status strong { color: #c7f0dd; font-size: 14px; font-weight: 600; }
.portal-page .source-detection-status p { margin: 5px 0 0; color: #b4c9c3; font-size: 12px; line-height: 1.7; }
.portal-page .channel-icon-dialog { width: min(850px, calc(100% - 32px)); }
.portal-page .channel-icon-dialog textarea { min-height: 175px; padding: 16px; border: 1px solid #9daec03d; border-radius: 10px; background: #090e17; color: #d7e3f7; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.portal-page .channel-icon-dialog details { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #090e1750; font-size: 13px; }
.portal-page .channel-icon-dialog summary { min-height: 32px; color: var(--cyan); cursor: pointer; }
.portal-page .channel-icon-dialog pre { color: var(--muted); font-size: 12px; }
.portal-page .toast { max-width: calc(100% - 32px); padding: 16px 22px; border-color: #b8d4ff38; border-radius: 14px; background: #1b293a; color: var(--text); font-size: 14px; }
.portal-page .portal-footer { max-width: 1400px; padding: 28px 28px 36px; border-color: var(--line); color: #94a0b1; font-size: 12px; }
.portal-page .portal-footer a { color: #cbd5e2; font-size: 12px; }
.portal-page .portal-footer a:hover { color: var(--accent); }

/* Channel Studio. Every library and scheduling view uses the same controls. */
.studio-page > main { max-width: 1400px; padding: 40px 28px 80px; }
.studio-page .intro { position: relative; padding: 18px 0 38px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.studio-page .intro h1 { max-width: 1000px; margin: 16px 0 22px; font-size: clamp(44px, 5.2vw, 74px); font-weight: 500; line-height: 1.04; letter-spacing: -.06em; }
.studio-page .intro > p:last-child { max-width: 650px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.studio-page #login { max-width: 620px; margin: 34px 0 32px; }
.studio-page #login h2 { font-size: 27px; font-weight: 550; letter-spacing: -.04em; }
.studio-page #login p { color: var(--muted); font-size: 14px; }
.studio-page #login-form { margin-top: 28px; }
.studio-page #login-form button { width: 100%; }
.studio-page #notice { margin: 0 0 26px; padding: 17px 20px; border-color: #b8d4ff30; background: #b8d4ff08; color: #d9e6fa; border-radius: 12px; font-size: 14px; }
.studio-page #notice.error { border-color: #ff866640; background: #ff866608; }
.studio-page .workspace-heading { margin: 32px 0 20px; gap: 20px; }
.studio-page .workspace-heading h2 { font-size: 27px; font-weight: 550; letter-spacing: -.035em; }
.studio-page .count { display: inline-flex; align-items: center; justify-content: center; min-width: 29px; min-height: 29px; margin-left: 9px; border: 1px solid var(--line); border-radius: 100px; background: #ffffff05; color: var(--muted); font-size: 12px; vertical-align: middle; }
.studio-page #workspace > .actions { gap: 8px; margin: 0 0 28px; }
.studio-page [data-library-tool] { min-height: 42px; padding: 10px 16px; border-radius: 100px; color: #c7d3e3; background: #ffffff04; font-size: 12px; }
.studio-page [data-library-tool]:hover { color: var(--accent); border-color: #ff866645; }
.studio-page .studio-layout { grid-template-columns: minmax(205px, 265px) minmax(0, 1fr); gap: 24px; }
.studio-page #channels { gap: 10px; align-self: start; }
.studio-page .channel-card { padding: 19px; min-height: 90px; border: 1px solid var(--line); border-radius: 14px; background: #111824; color: var(--text); text-align: left; font-size: 15px; line-height: 1.5; }
.studio-page .channel-card:hover { background: #172131; border-color: #e3ecff3b; }
.studio-page .channel-card span { color: var(--muted); font-size: 11px; margin-top: 6px; }
.studio-page .channel-card[aria-current="true"] { background: linear-gradient(115deg, #ff866614, #ff866604), #151b26; border-color: #ff86666b; box-shadow: inset 3px 0 var(--accent); }
.studio-page .channel-card[aria-current="true"] span { color: #f2b3a3; }
.studio-page .panel { padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(140deg, #ffffff03, transparent 65%), var(--surface); box-shadow: 0 20px 60px #0002; }
.studio-page .editor { min-height: 420px; }
.studio-page #empty { max-width: 520px; padding: 36px 12px; }
.studio-page #empty h2 { font-size: 29px; font-weight: 500; letter-spacing: -.035em; line-height: 1.3; }
.studio-page #empty p { color: var(--muted); font-size: 14px; }
.studio-page .empty-icon { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid #ff866635; border-radius: 17px; background: #ff86660b; color: var(--accent); font-size: 36px; }
.studio-page .editor-heading { margin-bottom: 30px; }
.studio-page .editor-heading h2,
.studio-page #create-form h2 { font-size: 30px; font-weight: 550; letter-spacing: -.04em; }
.studio-page label { color: #dbe1e9; font-size: 13px; font-weight: 550; gap: 10px; margin-bottom: 24px; }
.studio-page input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--accent); }
.studio-page option { background: var(--surface); color: var(--text); }
.studio-page .toggle { align-items: center; line-height: 1.6; }
.studio-page :is(.rotation, .schedule-controls) { margin: 24px 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #090e174a; }
.studio-page :is(.rotation, .schedule-controls) h3 { margin-top: 0; color: #ece8e3; font-size: 19px; font-weight: 550; letter-spacing: -.02em; }
.studio-page :is(.rotation, .schedule-controls) p { color: var(--muted); line-height: 1.75; font-size: 13px; }
.studio-page .rotation label { max-width: none; }
.studio-page .schedule-card { border-color: #e3ecff1a; border-radius: 12px; background: #111824; padding: 20px; gap: 18px; }
.studio-page .schedule-card-heading { color: #e5e7eb; font-size: 14px; }
.studio-page .schedule-card-heading button { min-height: 42px; font-size: 12px; }
.studio-page .weekdays { gap: 8px; }
.studio-page .weekdays label { min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: #c6d0df; background: #090e17; }
.studio-page .weekdays label:has(input:checked) { border-color: #ff866655; color: #ffe1d7; background: #ff86660b; }
.studio-page .capture-list { padding: 2px; scrollbar-width: thin; }
.studio-page .capture-card { padding: 18px; border-color: var(--line); border-radius: 12px; background: #090e1755; }
.studio-page .capture-card:has(input:checked) { border-color: #ff866670; background: #ff86660a; }
.studio-page .capture-card small { color: var(--muted); line-height: 1.6; }
.studio-page .capture-card input { accent-color: var(--accent); }
.studio-page .preview { padding: 24px; border-color: #ff866640; border-radius: 16px; background: #ff866608; }
.studio-page .preview h3 { font-size: 21px; font-weight: 550; letter-spacing: -.025em; }
.studio-page .published-guide { padding: 24px; border-color: #b8d4ff26; border-radius: 16px; background: #0a111c; }
.studio-page .published-days { padding: 8px 2px 12px; scrollbar-width: thin; }
.studio-page .published-days button[aria-pressed="true"] { border-color: var(--cyan); color: #111a28; background: var(--cyan); }
.studio-page .published-programme { padding: 18px 0; border-color: var(--line); font-size: 13px; }
.studio-page .published-programme > strong,
.studio-page .published-programme-heading strong { color: #e7e8eb; font-size: 15px; }
.studio-page .published-programme > span { color: var(--muted); }
.studio-page .library-tools { margin-bottom: 28px; }
.studio-page .library-tools fieldset { padding: 22px; border-color: var(--line); border-radius: 14px; background: #090e1740; }
.studio-page .library-tools legend { color: var(--cyan); font-size: 13px; }
.studio-page .library-tools label:has(input[type="checkbox"]) { min-height: 48px; }
.studio-page .library-tools input[type="checkbox"] { accent-color: var(--accent); }
.studio-page .library-tools .pack-order { color: var(--muted); }
.studio-page .library-tools .pack-order li > span { color: var(--text); }
.studio-page .roadmap-note { border-color: var(--line); padding-top: 22px; margin-top: 30px; }
.studio-page .roadmap-note h3 { color: #d1dae7; font-size: 14px; font-weight: 550; }
.studio-page .channel-logo-preview { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #090e17; }
.studio-page input[type="file"] { padding: 10px; font-size: 12px; }
.studio-page input[type="file"]::file-selector-button { border: 1px solid var(--line); border-radius: 6px; background: #202b3c; color: var(--text); padding: 8px 10px; margin-right: 12px; cursor: pointer; }
.studio-page > footer { max-width: 1344px; padding: 28px 0 40px; border-top: 1px solid var(--line); color: #94a0b1; font-size: 12px; }

/* Timeline geometry is maintained: only presentation changes. */
.studio-page .timeline-editor { margin-top: 30px; padding: 24px; border-color: #b8d4ff28; border-radius: 18px; color: var(--text); background: #0a101b; }
.studio-page .timeline-heading h3 { font-size: 30px; font-weight: 500; letter-spacing: -.035em; }
.studio-page .timeline-heading p { color: var(--muted); font-size: 13px; }
.studio-page .timeline-toolbar { gap: 8px; }
.studio-page .timeline-toolbar button { font-size: 12px; }
.studio-page .timeline-days { padding-inline: 3px; scrollbar-width: thin; }
.studio-page :is(.timeline-days, .timeline-mode-controls) button[aria-pressed="true"] { color: #111a28; background: var(--cyan); border-color: var(--cyan); }
.studio-page .timeline-status { color: #c5d7ef; }
.studio-page .timeline-programme { border-color: #e3ecff14; border-radius: 13px; background: #141e2c; }
.studio-page .timeline-programme[aria-selected="true"] { border-color: #ff86669c; box-shadow: inset 3px 0 var(--accent); background: #28222a; }
.studio-page .timeline-programme.is-promo { background: #162831; }
.studio-page .timeline-programme-content { min-height: 102px; padding: 8px; background: transparent; border: 0; color: var(--text); text-align: left; }
.studio-page .timeline-programme-content:hover { background: #ffffff05; border-color: transparent; }
.studio-page .timeline-kind { color: var(--cyan); }
.studio-page .is-premiere .timeline-kind { color: #edcc91; }
.studio-page .timeline-time { color: #e3e8f1; }
.studio-page .timeline-artwork { background: #243044; }
.studio-page .timeline-drag-handle { min-height: 54px; padding: 4px; border-color: transparent; background: transparent; color: #b4c1d3; font-size: 25px; }
.studio-page .timeline-drag-handle:hover { background: #ffffff08; border-color: transparent; }
.studio-page .timeline-programme.drop-target { outline-color: var(--accent); }
.studio-page .timeline-inspector { border-color: #b8d4ff20; border-radius: 14px; background: #151f2e; }
.studio-page .timeline-inspector h3 { color: var(--text); font-size: 21px; font-weight: 550; letter-spacing: -.02em; }
.studio-page .timeline-dialog { padding: 28px; }
.studio-page .timeline-dialog h3 { font-size: 27px; font-weight: 550; }
.studio-page .timeline-search-card { border-color: var(--line); background: #090f19; }
.studio-page .timeline-grid-viewport { border-color: #b8d4ff20; border-radius: 13px; background: #0e1724; }
.studio-page .timeline-grid-axis { color: #b6c6dc; border-color: var(--line); }
.studio-page .timeline-grid-programme { border-color: #b8d4ff26; background: #1b2a3e; }
.studio-page .timeline-grid-programme[aria-selected="true"] { border-color: #ff86669c; box-shadow: inset 3px 0 var(--accent); }
.studio-page .timeline-grid-content { background: transparent; border: 0; padding: 14px; min-height: 0; text-align: left; color: var(--text); }
.studio-page .timeline-grid-content:hover { border: 0; background: #ffffff05; }
.studio-page .timeline-grid-content small { color: var(--cyan); }
.studio-page .timeline-grid-content span { color: var(--muted); }
.studio-page .timeline-grid-programme.is-promo { background: #487580; }
.studio-page .timeline-grid-unloaded { background: #0a101bea; color: var(--muted); }
.studio-page .timeline-grid-drop { border-color: var(--accent); background: #543e3e; color: var(--text); }

@media (min-width: 1500px) {
  .studio-page .studio-layout { grid-template-columns: 265px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .portal-page .management-grid { grid-template-columns: minmax(0, 1.4fr) minmax(270px, 1fr); gap: 18px; }
  .portal-page .portal-section { padding: 23px; }
  .portal-page :is(.profile-row, .device-row) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .portal-page :is(.profile-row, .device-row) .source-action { grid-row: 2; justify-self: start; }
  .portal-page .profile-row > .source-action:last-child:not([data-delete-profile]) { grid-column: 3; }
  .portal-page :is(.auto-badge, .device-status) { grid-column: 3; grid-row: 1; }
  .portal-page :is([data-delete-profile], [data-revoke-device]) { grid-column: 2; }
  .portal-page .device-row [data-rename-device] { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .portal-page .device-row [data-revoke-device] { grid-column: 3; grid-row: 2; justify-self: end; }
  .studio-page .panel { padding: 26px; }
  .studio-page .studio-layout { grid-template-columns: minmax(185px, 230px) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 960px) {
  .portal-page .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 630px; gap: 40px; min-height: 0; margin: 0 auto; }
  .portal-page .auth-intro h1 { font-size: clamp(48px, 8vw, 72px); }
  .portal-page .auth-intro > p:not(.section-kicker) { max-width: 540px; }
  .portal-page .auth-panel { padding: 32px; }
  .portal-page .dashboard-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .portal-page .management-grid,
  .portal-page .management-code-panel { grid-template-columns: minmax(0, 1fr); }
  .portal-page :is(.source-section, .profile-section, .device-section, .plan-section, .account-section),
  .portal-page [data-dvr-enrollment].portal-section { grid-column: 1; grid-row: auto; }
  .portal-page .portal-section { padding: 28px; }
  .portal-page .management-code-panel { gap: 24px; }
  .portal-page .management-code { font-size: 17px; }
}
@media (max-width: 760px) {
  .portal-page .portal-header,
  .studio-page > header { padding: 16px 22px; min-height: 80px; gap: 16px; }
  .portal-page .portal-main,
  .studio-page > main { padding: 36px 22px 64px; }
  :is(.portal-page, .studio-page) .workspace-switcher { padding: 10px 18px; gap: 4px; }
  :is(.portal-page, .studio-page) .workspace-switcher a { padding: 8px 12px; font-size: 12px; }
  .studio-page .studio-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .studio-page #channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
  .studio-page .channel-card { min-height: 88px; padding: 16px; }
  .studio-page .workspace-heading { flex-direction: row; align-items: center; }
  .studio-page .workspace-heading h2 { font-size: 23px; }
  .studio-page .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .studio-page .split.year-range { grid-template-columns: 1fr 1fr; gap: 12px; }
  .studio-page .toggle { padding-top: 0; }
  .studio-page .intro { padding: 8px 0 24px; margin-bottom: 26px; }
  .studio-page .intro h1 { font-size: clamp(43px, 8vw, 61px); }
  .studio-page .intro > p:last-child { font-size: 15px; }
  .studio-page > footer { margin-inline: 22px; }
  .portal-page .portal-footer { padding: 24px 22px 30px; }
}
@media (max-width: 540px) {
  .portal-page .portal-header { padding-inline: 18px; }
  .portal-page .portal-header .brand img { width: 34px; height: 34px; border-radius: 10px; }
  .portal-page .portal-header .brand strong { font-size: 12px; }
  .portal-page .portal-header .brand small { font-size: 7px; }
  .portal-page .portal-header-actions { gap: 8px; }
  .portal-page .portal-header .text-button { font-size: 12px; }
  .portal-page .portal-main,
  .studio-page > main { padding-inline: 18px; }
  .portal-page .auth-intro h1 { font-size: clamp(44px, 12vw, 58px); }
  .portal-page .auth-intro > p:not(.section-kicker) { font-size: 16px; }
  .portal-page .auth-intro .section-kicker { font-size: 10px; letter-spacing: .12em; }
  .portal-page .auth-panel { padding: 22px; border-radius: 18px; }
  .portal-page .auth-tabs button { font-size: 11px; padding-inline: 4px; }
  .portal-page .auth-form [name="code"] { font-size: 13px; padding-inline: 10px; }
  .portal-page .management-code-panel,
  .portal-page .portal-section { padding: 22px; border-radius: 16px; }
  .portal-page .management-code { font-size: 12px; padding: 14px 8px; letter-spacing: .02em; }
  .portal-page .code-actions { display: flex; }
  .portal-page .code-actions .portal-button { font-size: 12px; }
  .portal-page .portal-section-heading { align-items: center; }
  .portal-page .portal-section-heading h2 { font-size: 23px; }
  .portal-page .portal-section-heading .portal-button { padding: 10px 13px; }
  .portal-page :is(.source-row, .profile-row, .device-row) { padding: 13px; gap: 9px; }
  .portal-page .source-row,
  .portal-page .source-row.has-dvr-policy { grid-template-columns: 40px minmax(0, 1fr); }
  .portal-page .source-row .source-action { grid-row: 2; }
  .portal-page .source-row.has-dvr-policy [data-dvr-policy-source] { grid-column: 1 / -1; grid-row: 3; }
  .portal-page .profile-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .portal-page .profile-row > .source-action:last-child:not([data-delete-profile]) { grid-column: 1 / -1; grid-row: 3; }
  .portal-page .device-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .portal-page .device-status { padding: 5px 6px; font-size: 8px; }
  .portal-page .source-dialog,
  .studio-page .timeline-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .portal-page .dialog-shell { padding: 24px 20px; }
  .portal-page .dialog-heading { gap: 14px; }
  .portal-page .dialog-heading h2 { font-size: 26px; }
  .portal-page .dialog-actions .portal-button { flex: 1 1 auto; }
  .portal-page .media-service-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .portal-page .source-dialog .media-service-choice { grid-template-columns: 29px minmax(0, 1fr) 20px; gap: 13px; min-height: 62px; padding: 12px 14px; }
  .portal-page .source-dialog .media-service-choice > .media-service-mark { grid-column: 1; }
  .portal-page .source-dialog .media-service-choice > span:last-child { grid-column: 2; grid-row: 1; }
  .portal-page .source-dialog .media-service-choice input { grid-column: 3; }
  .portal-page .media-credentials { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .portal-page .source-dialog .media-credentials label { margin-block: 13px; }
  .portal-page .portal-footer { margin-inline: 18px; padding-inline: 0; gap: 10px; }
  .portal-page .portal-footer nav { margin-left: 0; gap: 22px; }
  .studio-page > header { padding-inline: 18px; flex-wrap: wrap; }
  .studio-page #account-tools { width: 100%; gap: 10px; }
  .studio-page #account-tools label { flex: 1; min-width: 0; }
  .studio-page #account-tools select { width: 100%; }
  .studio-page .workspace-heading { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .studio-page .panel { padding: 23px 20px; border-radius: 16px; }
  .studio-page #login { padding: 26px 23px; }
  .studio-page #login h2 { font-size: 25px; }
  .studio-page #empty { padding: 20px 2px; }
  .studio-page #empty h2 { font-size: 27px; }
  .studio-page :is(.rotation, .schedule-controls, .published-guide, .preview) { padding: 18px; border-radius: 13px; }
  .studio-page .schedule-card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .studio-page .schedule-card-heading { flex-wrap: wrap; }
  .studio-page .recipe-collection { grid-template-columns: minmax(0, 1fr); }
  .studio-page .weekdays label { padding-inline: 7px; }
  .studio-page .library-tools fieldset { padding: 16px; }
  .studio-page .timeline-editor { padding: 14px; border-radius: 14px; margin-inline: -7px; }
  .studio-page .timeline-heading h3 { font-size: 26px; }
  .studio-page .timeline-toolbar button { padding: 10px; }
  .studio-page .timeline-dialog { padding: 22px 18px; }
  .studio-page .timeline-programme { border-radius: 11px; }
  .studio-page .timeline-programme-content { min-height: 96px; padding: 6px; }
  .studio-page .timeline-drag-handle { padding: 4px; min-height: 54px; }
  .studio-page .timeline-grid-content { padding: 10px; gap: 8px; }
  .studio-page .timeline-grid-programme.is-short .timeline-grid-content { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.portal-page, .studio-page),
  :is(.portal-page, .studio-page) *,
  :is(.portal-page, .studio-page) *::before,
  :is(.portal-page, .studio-page) *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}