/* Phase 6: a warm, visual programming studio. This file intentionally loads last. */
:root {
  /* Names kept so the 500+ rules below keep resolving; values are the dark
     TRACKFAST palette. --tf-purple/-yellow were the app's two accents and both
     now hold the brand pink. --tf-mint stays green: it means "ready". */
  --tf-ink: #ffffff;
  --tf-muted: #b3a4ab;
  --tf-line: rgba(255, 255, 255, .10);
  --tf-purple: #fc0271;
  --tf-purple-dark: #a80149;
  --tf-coral: #ff5a5a;
  --tf-yellow: #fc0271;
  --tf-mint: #2ecc71;
  --tf-paper: #150e12;
  --tf-wash: #0a0609;
  --tf-shadow: 0 16px 46px rgba(0, 0, 0, .55);
  color: var(--tf-ink);
  background: var(--tf-wash);
}

body,
.page-library,
.page-playlist,
.page-channel,
.page-schedule,
.page-distribution {
  color-scheme: light;
  color: var(--tf-ink);
  background: var(--tf-wash);
}

.app-shell { grid-template-columns: 208px minmax(0, 1fr); }
.sidebar {
  padding: 1.2rem .85rem;
  background:
    radial-gradient(circle at 10% 88%, rgba(255, 107, 103, .22), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(255, 98, 169, .30), transparent 27%),
    linear-gradient(165deg, #3f1528, #231119 68%);
}
.brand { padding: .15rem .5rem 1.7rem; }
.brand span { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, #3a1f2b, #361d29); box-shadow: 0 10px 24px rgba(232, 74, 145, .3); }
.brand strong { font-size: .9rem; }
.primary-nav { gap: .35rem !important; }
.sidebar nav a { border-radius: 12px; color: #eab5cd; }
.primary-nav a { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: .35rem; padding: .72rem .7rem; font-weight: 780; }
.primary-nav a span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #f0cddd; background: rgba(255,255,255,.07); }
.sidebar nav a:hover,
.sidebar nav a.active { color: #fff; background: linear-gradient(90deg, rgba(239, 83, 153, .42), rgba(255, 104, 100, .20)); }
.primary-nav a.active span { color: #c75e8d; background: #351d28; box-shadow: 0 5px 14px rgba(255, 79, 158, .25); }
.sidebar-more { margin-top: .7rem; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-more summary { padding: .85rem .7rem .45rem; color: #cf5a8f; cursor: pointer; font-size: .69rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-more nav a { padding: .48rem .72rem; font-size: .78rem; }
.sidebar-account { border-color: rgba(255,255,255,.12); }

/* A real station-office sign: illuminated only by fresh confirmed telemetry. */
.station-sign {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0,1fr);
  gap: 0 .55rem;
  align-items: center;
  margin: 0 .35rem 1rem;
  padding: .62rem .72rem;
  color: #ce578d;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: linear-gradient(180deg, #1b1317, #0e090b);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 7px 18px rgba(0,0,0,.16);
}
.station-sign i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: #2b2226; box-shadow: inset 0 0 0 2px #0c080a; }
.station-sign strong { color: #ce578d; font-size: .72rem; letter-spacing: .14em; }
.station-sign small { overflow: hidden; color: #9a8d92; font-size: .53rem; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.station-sign.is-live { border-color: rgba(255,65,74,.62); background: radial-gradient(circle at 20% 50%, rgba(255,31,49,.25), transparent 38%), linear-gradient(180deg, #301116, #16090c); box-shadow: inset 0 0 18px rgba(255,41,55,.16), 0 0 20px rgba(255,36,50,.24); }
.station-sign.is-live i { background: #462534; box-shadow: 0 0 7px #ff3041, 0 0 18px #ff3041, inset 0 0 0 2px #ff9aa2; }
.station-sign.is-live strong { color: #fff; text-shadow: 0 0 5px #ff3343, 0 0 14px #ff3343; }
.station-sign.is-live small { color: #ff9ca4; }

.content,
.page-library .content,
.page-playlist .content,
.page-channel .content,
.page-schedule .content,
.page-distribution .content {
  min-height: 100vh;
  padding: 2rem clamp(1.2rem, 2.6vw, 3.2rem) 5rem;
  color: var(--tf-ink);
  background:
    radial-gradient(circle at 85% 0, rgba(255, 79, 158, .18), transparent 24%),
    radial-gradient(circle at 4% 28%, rgba(240, 86, 155, .10), transparent 24%),
    linear-gradient(180deg, #0d070a, #0f080b 52%, #0e0a0c);
}
.page-header { align-items: center; margin-bottom: 1.15rem; }
.page-header h1,
.page-library .page-header h1,
.page-playlist .page-header h1,
.page-channel .page-header h1,
.page-schedule .page-header h1,
.page-distribution .page-header h1 {
  color: var(--tf-ink);
  font-size: clamp(2.25rem, 4.4vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.065em;
}
.eyebrow { color: #cb4d86; }
.lede,
.muted,
.page-library .lede,
.page-schedule .lede,
.page-distribution .lede { color: var(--tf-muted); }
.lede { font-size: 1.02rem; }

.panel,
.channel-card,
.empty,
.page-library .panel,
.page-playlist .panel,
.page-channel .panel,
.page-schedule .panel {
  color: var(--tf-ink);
  border: 1px solid rgba(107, 56, 79, .11);
  border-radius: 20px;
  background: rgba(29, 22, 25, .94);
  box-shadow: var(--tf-shadow);
}
.panel h2,
.panel h3,
.page-library .panel h2,
.page-schedule .panel h2 { color: var(--tf-ink); }
.section-title p,
.page-library .section-title p,
.page-schedule .section-title p { color: var(--tf-muted); }
.button { border-color: #31262b; border-radius: 12px; color: #ba7f9a; background: rgba(29, 22, 25, .9); }
.button:hover { border-color: #31262b; transform: translateY(-1px); }
.button.primary { color: #fff; border-color: transparent; background: linear-gradient(115deg, var(--tf-purple), #422431 54%, #3f222f); box-shadow: 0 10px 24px rgba(232, 59, 137, .22); }
input,
select,
textarea,
.page-library input,
.page-library select,
.page-library textarea,
.page-schedule input,
.page-schedule select,
.page-schedule textarea {
  color: var(--tf-ink);
  border-color: #31262b;
  border-radius: 12px;
  background: #090608;
}
label,
.page-library label,
.page-schedule label { color: #ac8697; }

/* Content is an artwork-first studio rather than a metric dashboard. */
.studio-header,
.page-library .studio-header { padding: 0; border: 0; background: transparent; }
.studio-scoreboard { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.25rem 0 1rem; }
.studio-scoreboard article,
.studio-scoreboard article:nth-child(n) {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  min-height: 0;
  padding: .5rem .72rem;
  color: #ad8597;
  border: 1px solid #31262b;
  border-radius: 999px;
  background: rgba(29, 22, 25, .72);
  box-shadow: none;
}
.studio-scoreboard article::after { display: none; }
.studio-scoreboard strong { color: var(--tf-purple); font-size: .95rem; }
.studio-scoreboard span { color: #ce578d; font-size: .63rem; }
.content-studio-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 1.15rem; }
.page-library .studio-sidebar { border-color: #31262b; background: rgba(29, 22, 25, .86); box-shadow: 0 12px 35px rgba(82, 40, 59, .08); }
.page-library .studio-nav-title h3 { color: #ca4a84; }
.page-library .studio-nav a { color: #a78896; }
.page-library .studio-nav a:hover,
.page-library .studio-nav a.active { color: #d74f8d; background: #10090c; }
.page-library .studio-create { border-color: #31262b; }
.page-library .studio-create summary { color: #d34183; }
.page-library .studio-toolbar { background: rgba(29, 22, 25, .84); }
.organizer-bar,
.page-library .organizer-bar { border-color: #31262b; background: rgba(29, 22, 25, .94); }
.organizer-bar:not(.has-selection) { display: none; }
.asset-poster-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.asset-poster-card,
.page-library .asset-poster-card { border-color: #31262b; border-radius: 18px; background: #090608; box-shadow: 0 10px 28px rgba(82, 40, 59, .09); }
.asset-art { aspect-ratio: 16/9; }

/* Calendar-first scheduling. */
.page-schedule .content { display: flex; flex-direction: column; }
.page-schedule .canvas-header { order: 1; }
.page-schedule .calendar-toolbar { order: 2; }
.page-schedule .issue-strip,
.page-schedule .canvas-celebration { order: 3; }
.page-schedule .content-tray { order: 4; }
.page-schedule .canvas-panel { order: 5; }
.page-schedule .schedule-tools { order: 6; }
.page-schedule .feed-panel { order: 7; }
.calendar-toolbar { align-items: center; padding: .75rem 1rem; background: rgba(29, 22, 25, .78); box-shadow: 0 8px 25px rgba(82, 40, 59, .06); }
.calendar-toolbar .inline-form { align-items: center; }
.calendar-toolbar label { grid-template-columns: auto minmax(130px, 1fr); align-items: center; }
.calendar-toolbar label select,
.calendar-toolbar label input { padding: .52rem .65rem; }
.validation-summary { border: 0; padding: .5rem .75rem; border-radius: 13px; background: #140b0f; }
.validation-summary.valid { color: #e53f89; background: #130a0e; }
.validation-summary.invalid { color: #a08b95; }
.issue-strip span { color: #a08b95; background: #140b0f; }
.canvas-celebration { padding: .65rem 1rem; border-radius: 16px; background: linear-gradient(100deg, #4b2838, #412330 58%, #391f2b); }
.content-tray,
.page-schedule .content-tray {
  position: sticky;
  z-index: 8;
  top: 0;
  margin-bottom: .85rem;
  padding: .8rem 1rem;
  color: var(--tf-ink);
  border: 1px solid #31262b;
  background: rgba(28, 21, 24, .94);
  box-shadow: 0 14px 35px rgba(84, 38, 59, .12);
  backdrop-filter: blur(16px);
}
.content-tray .section-title p,
.content-tray .section-title a { color: var(--tf-muted); }
.content-tray:has(.tray-scroll .empty-inline) { padding-block: .65rem; }
.content-tray:has(.tray-scroll .empty-inline) .tray-scroll { padding-block: .1rem; }
.content-tray:has(.tray-scroll .empty-inline) .empty-inline { margin: .2rem 0; }
.tray-scroll { padding: .55rem 0 .05rem; scrollbar-color: #e7b2ca transparent; }
.tray-card {
  grid-template-columns: 70px minmax(0,1fr);
  grid-template-rows: auto auto;
  flex: 0 0 225px;
  min-height: 72px;
  padding: .42rem;
  color: var(--tf-ink);
  border: 1px solid #31262b;
  border-radius: 14px;
  background: #090608;
  box-shadow: 0 6px 16px rgba(72, 33, 51, .07);
}
.tray-card:hover,
.tray-card.active { color: var(--tf-ink); border-color: #31262b; background: #0c0609; }
.tray-card img,
.tray-card > span { grid-row: 1 / 3; width: 70px; height: 62px; border-radius: 10px; }
.tray-card strong { align-self: end; font-size: .76rem; }
.tray-card small { align-self: start; color: #ca4883; }
.canvas-panel,
.page-schedule .canvas-panel { min-height: 0; overflow: hidden; padding: 1rem; background: #090608; }
.calendar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.calendar-help { padding: .45rem .7rem; color: #d5518c; border-radius: 999px; background: #10090c; font-size: .7rem; font-weight: 850; }
.focus-calendar-button { font-size: .72rem; font-weight: 850; }
.canvas-board {
  --calendar-px-minute: .75px;
  display: grid;
  grid-template-columns: 64px repeat(var(--calendar-days), minmax(0, 1fr));
  gap: 0;
  width: 100%;
  min-width: 0;
  height: clamp(560px, 68vh, 790px);
  max-height: none;
  margin: .8rem 0 0;
  overflow-x: auto;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-color: #e36ba1 #f4e7ed;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  border: 1px solid #31262b;
  border-radius: 16px;
  background: #0b0609;
}
.canvas-board::-webkit-scrollbar { width: 13px; height: 13px; }
.canvas-board::-webkit-scrollbar-track { background: #140b0f; }
.canvas-board::-webkit-scrollbar-thumb { border: 3px solid #31262b; border-radius: 999px; background: linear-gradient(#442533, #422331); }
.calendar-time-ruler { position: sticky; z-index: 5; left: 0; min-width: 64px; border-right: 1px solid #31262b; background: #0d070a; }
.calendar-time-ruler > header,
.canvas-day > header { position: sticky; z-index: 6; top: 0; height: 62px; background: rgba(29, 22, 25, .96); backdrop-filter: blur(10px); }
.calendar-time-ruler > header { display: grid; place-items: center; color: #cf588e; font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.calendar-time-ruler > div { position: relative; height: 1080px; }
.calendar-time-ruler > div span { position: absolute; top: calc(var(--hour) * 45px - 7px); right: 8px; color: #ce548b; font-size: .62rem; font-variant-numeric: tabular-nums; }
.canvas-day,
.page-schedule .canvas-day { min-width: 0; overflow: visible; border: 0; border-right: 1px solid #31262b; border-radius: 0; background: transparent; }
.canvas-day > header { padding: .7rem .75rem; border-bottom: 1px solid #31262b; }
.canvas-day > header strong { color: var(--tf-ink); font-size: .95rem; }
.canvas-day > header b { color: var(--tf-purple); }
.canvas-day.is-weekend > header { background: rgba(25, 19, 21, .97); }
.canvas-day.is-sunday > header { background: linear-gradient(135deg, #11090d, #11090d); }
.canvas-day.is-sunday > header strong { color: #d84e63; }
.canvas-day.is-today > header { box-shadow: inset 0 -4px #ff4f9e; }
.canvas-day.is-today > header::after { content: "TODAY"; position: absolute; right: .6rem; bottom: .25rem; padding: .1rem .3rem; color: #917985; border-radius: 99px; background: #351d28; font-size: .47rem; font-weight: 950; letter-spacing: .08em; }
.canvas-day > progress { position: sticky; z-index: 7; top: 57px; height: 5px; }
.canvas-lane,
.page-schedule .canvas-lane {
  position: relative;
  display: block;
  height: 1080px;
  padding: 0;
  background-color: rgba(27, 20, 23, .78);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #150f12 44px, #150f12 45px), radial-gradient(circle at 12px 12px, rgba(190, 78, 128, .035) 0 2px, transparent 2.5px);
  background-size: auto, 24px 24px;
}
.canvas-day.is-weekend .canvas-lane { background-color: rgba(26, 20, 23, .72); }
.calendar-block {
  position: absolute;
  z-index: 2;
  top: calc(var(--start-minute) * var(--calendar-px-minute));
  right: 4px;
  left: 4px;
  height: max(44px, calc(var(--duration-minute) * var(--calendar-px-minute) - 3px));
  max-height: calc(1080px - (var(--start-minute) * var(--calendar-px-minute)));
}
.canvas-event,
.page-schedule .canvas-event {
  grid-template-columns: 38px minmax(0,1fr);
  min-height: 0;
  padding: .35rem;
  color: #fff;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(145deg, #4d2939, #422431 58%, #422432);
  box-shadow: 0 7px 16px rgba(167, 49, 102, .21);
}
.canvas-event:nth-child(3n+2) { background: linear-gradient(145deg, #482736, #361d29); }
.canvas-event:nth-child(3n+3) { background: linear-gradient(145deg, #8f174d, #bf477d); }
.canvas-event img,
.page-schedule .canvas-event img,
.canvas-event .canvas-art-placeholder { width: 38px; height: 38px; border-radius: 8px; }
.page-schedule .canvas-event strong { color: #fff; }
.canvas-event time,
.canvas-event small,
.page-schedule .canvas-event time,
.page-schedule .canvas-event small { color: rgba(255,255,255,.78); }
.canvas-gap,
.page-schedule .canvas-gap {
  align-items: start;
  min-height: 0;
  overflow: hidden;
  padding: .42rem;
  color: #ce578d;
  border: 1px dashed #31262b;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(26, 19, 22, .68), rgba(25, 19, 21, .68));
}
.canvas-gap > span,
.page-schedule .canvas-gap > span { color: #d2548d; background: rgba(29, 22, 25, .88); box-shadow: 0 4px 12px rgba(133, 53, 89, .12); }
.canvas-gap.drop-active { color: #d5528d; border: 2px solid #31262b; background: #11090d; box-shadow: 0 0 0 4px rgba(237, 58, 139, .12); }
.schedule-tools { margin-top: .2rem; padding: .75rem 1rem; }
.schedule-tools > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.schedule-tools > summary::-webkit-details-marker { display: none; }
.schedule-tools > summary span { display: grid; gap: .15rem; }
.schedule-tools > summary small { margin: 0; }
.schedule-tools > summary b { color: #d1558d; font-size: .75rem; }
.schedule-tools[open] > summary { padding-bottom: .8rem; border-bottom: 1px solid #31262b; }
.schedule-tools .schedule-layout { margin-top: 1rem; }
.schedule-tools .panel { box-shadow: none; }

/* Schedule gets a wider studio shell; focus mode becomes the whole workspace. */
@media (min-width: 1000px) {
  .page-schedule .app-shell { grid-template-columns: 108px minmax(0,1fr); }
  .page-schedule .sidebar { padding: .8rem .45rem; }
  .page-schedule .brand { justify-content: center; padding-bottom: .8rem; }
  .page-schedule .brand strong { display: none; }
  .page-schedule .station-sign { grid-template-columns: 1fr; justify-items: center; gap: .25rem; margin-inline: .1rem; text-align: center; }
  .page-schedule .station-sign i { grid-row: auto; }
  .page-schedule .station-sign small { width: 82px; }
  .page-schedule .primary-nav a { grid-template-columns: 1fr; justify-items: center; gap: .2rem; padding: .58rem .2rem; font-size: .66rem; text-align: center; }
  .page-schedule .sidebar-more summary { padding-inline: .25rem; text-align: center; }
  .page-schedule .sidebar-more nav a { padding-inline: .2rem; font-size: .64rem; text-align: center; }
  .page-schedule .sidebar-account { padding-inline: .1rem; text-align: center; }
  .page-schedule .sidebar-account span { display: none; }
  .page-schedule .content { padding: 1.15rem 1.25rem 3rem; }
}

body.schedule-focus { overflow: hidden; }
.schedule-focus .app-shell { display: block; }
.schedule-focus .sidebar,
.schedule-focus .canvas-header,
.schedule-focus .issue-strip,
.schedule-focus .canvas-celebration,
.schedule-focus .schedule-tools,
.schedule-focus .feed-panel,
.schedule-focus .alert { display: none !important; }
.schedule-focus .content {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: .65rem;
  background: radial-gradient(circle at 90% 0, rgba(255, 79, 158, .2), transparent 25%), linear-gradient(145deg, #0f080b, #10090c);
}
.schedule-focus .calendar-toolbar { flex: 0 0 auto; order: 1; margin-bottom: .45rem; }
.schedule-focus .content-tray { position: static; flex: 0 0 auto; order: 2; margin-bottom: .45rem; padding-block: .55rem; }
.schedule-focus .content-tray .section-title p { display: none; }
.schedule-focus .tray-scroll { padding-block: .35rem 0; }
.schedule-focus .tray-card { min-height: 64px; }
.schedule-focus .canvas-panel { display: flex; flex: 1 1 auto; flex-direction: column; order: 3; min-height: 0; margin: 0; padding: .65rem; }
.schedule-focus .canvas-panel > .section-title { flex: 0 0 auto; }
.schedule-focus .canvas-board { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; margin-top: .45rem; }
.schedule-focus .focus-calendar-button { color: #fff; border-color: transparent; background: linear-gradient(100deg, #d83d61, #d63b81); }

/* On Air keeps the human decision large and the automation quiet. */
.page-live .content { background: radial-gradient(circle at 80% 0, rgba(255,107,103,.14), transparent 25%), linear-gradient(180deg, #0d070a, #10080c); }
.live-page-header { align-items: center; }
.control-room-sign { position: relative; min-width: 300px; overflow: hidden; padding: 1rem 1.35rem; text-align: center; border: 7px solid #3a3034; border-radius: 15px; background: linear-gradient(#191416, #090708); box-shadow: inset 0 0 30px #000, 0 16px 35px rgba(42, 22, 31, .22); }
.control-room-sign strong { display: block; color: #998d92; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.25rem; line-height: 1; letter-spacing: .16em; text-indent: .16em; text-shadow: 0 2px #000; }
.control-room-sign small { display: block; margin-top: .45rem; color: #988e93; font-size: .58rem; font-weight: 850; letter-spacing: .11em; }
.sign-bulbs { position: absolute; display: flex; justify-content: space-between; inset: .28rem .38rem auto; }
.sign-bulbs i { width: 5px; height: 5px; border-radius: 50%; background: #2a2527; }
.control-room-sign.is-live { border-color: #401a1e; background: radial-gradient(circle at 50% 45%, rgba(255,39,53,.34), transparent 62%), linear-gradient(#341015, #16080b); box-shadow: inset 0 0 34px rgba(255,24,40,.25), 0 0 14px rgba(255,26,40,.32), 0 20px 45px rgba(93,22,34,.25); }
.control-room-sign.is-live strong { color: #fff5f5; text-shadow: 0 0 5px #ff2638, 0 0 13px #ff2638, 0 0 28px #ff2638; }
.control-room-sign.is-live small { color: #ff9aa3; }
.control-room-sign.is-live .sign-bulbs i { background: #452534; box-shadow: 0 0 8px #ff3444; }
.schedule-header-actions { display: flex; align-items: center; gap: .65rem; }
.station-sign-inline { width: 148px; margin: 0; }
.page-live .phase2-grid { grid-template-columns: minmax(360px, .8fr) minmax(360px, 1.2fr); }
.page-live .control-panel { color: #fff; border: 0; background: radial-gradient(circle at 90% 0, rgba(255, 79, 158, .3), transparent 28%), linear-gradient(145deg, #731e44, #d74184 58%, #482736); box-shadow: 0 22px 50px rgba(155, 44, 94, .24); }
.page-live .control-panel h2,
.page-live .control-panel label { color: #fff; }
.page-live .control-panel .eyebrow { color: #ff7cb7; }
.page-live .control-panel .warning-copy { color: rgba(255,255,255,.84); background: rgba(255,255,255,.12); }
.page-live .control-panel .muted { color: rgba(255,255,255,.7); }
.page-live .control-panel hr { border-color: rgba(255,255,255,.18); }
.page-live .danger-button { min-height: 52px; color: #ba678d; border: 0; background: linear-gradient(100deg, #3a1f2b, #381e2a); box-shadow: 0 10px 24px rgba(255, 75, 156, .23); }
.resilience-panel > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.resilience-panel > summary::-webkit-details-marker { display: none; }
.resilience-panel > summary span { display: grid; gap: .15rem; }
.resilience-panel > summary small { margin: 0; }
.resilience-panel > summary b { color: #cf578d; font-size: .72rem; }
.page-live .endpoint-grid .panel { box-shadow: 0 10px 28px rgba(82, 40, 59, .07); }

/* Outputs: one clear path, with destination complexity tucked away. */
.page-distribution .content { background: radial-gradient(circle at 84% 1%, rgba(207, 65, 129, .16), transparent 26%), radial-gradient(circle at 5% 30%, rgba(230, 77, 146, .11), transparent 25%), #0e080a; }
.network-page-header,
.network-channel-switcher,
.signal-stage,
.feed-dock,
.destination-network,
.package-studio { max-width: 1500px; }
.network-page-header h1 { color: var(--tf-ink); background: none; -webkit-text-fill-color: initial; }
.network-channel-switcher { align-items: center; border: 1px solid #31262b; background: rgba(29, 22, 25, .78); }
.network-channel-switcher label { grid-template-columns: auto minmax(220px, 340px); }
.friendly-status { padding: .5rem .75rem; color: #c85c8d; border-radius: 999px; background: #170c11; font-size: .72rem; font-weight: 850; }
.friendly-status.ready { color: #df468c; background: #150b10; }
.signal-stage {
  color: var(--tf-ink);
  border: 0;
  background: radial-gradient(circle at 93% 0, rgba(255, 79, 158, .25), transparent 29%), linear-gradient(145deg, #090608, #0d0709);
  box-shadow: 0 24px 65px rgba(79, 39, 57, .12);
}
.signal-stage::before { display: none; }
.signal-stage-head h2 { color: var(--tf-ink); }
.signal-stage-head p:not(.eyebrow) { color: var(--tf-muted); }
.signal-state { color: #ce578d; border-color: #31262b; background: #090608; }
.signal-state.live { color: #df468c; border-color: #31262b; background: #120a0d; }
.signal-flow { grid-template-columns: minmax(130px,1fr) auto minmax(150px,1fr) auto minmax(150px,1fr) auto minmax(130px,1fr) auto minmax(140px,1fr); }
.signal-flow > i { color: #df5392; }
.signal-flow article,
.signal-flow .signal-destination {
  min-height: 118px;
  color: var(--tf-ink);
  border: 1px solid #31262b;
  background: #090608;
  box-shadow: 0 10px 24px rgba(88, 43, 63, .07);
}
.signal-flow article::after { border-color: rgba(223, 78, 143, .12); }
.signal-flow article small { color: #c94480; }
.signal-flow article strong { color: var(--tf-ink); }
.signal-flow article em { color: var(--tf-muted); }
.reference-paths,
.signal-callout,
.signal-config,
.dispatch-strip,
.network-score { display: none; }
.cdn-output-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid #31262b; border-radius: 18px; background: linear-gradient(115deg, #10090c, #090608 56%, #11090d); }
.cdn-mark { display: grid; place-items: center; width: 88px; height: 76px; color: #fff; border-radius: 18px; background: linear-gradient(145deg, #ce3479, #402330); box-shadow: 0 10px 24px rgba(206, 52, 121, .22); }
.cdn-mark strong { font-size: 1.45rem; }
.cdn-mark span { font-size: .53rem; font-weight: 800; }
.cdn-copy h3 { margin: 0 0 .25rem; }
.cdn-copy p { margin: 0; color: var(--tf-muted); font-size: .78rem; }
.cdn-provision { margin: 0; }
.cdn-output-card > details { grid-column: 1 / -1; padding-top: .75rem; border-top: 1px solid #31262b; }
.cdn-output-card > details summary { color: #d0568d; cursor: pointer; font-size: .76rem; font-weight: 850; }
.cdn-output-card form { max-width: 850px; margin-top: .8rem; }
.trackfast-origin { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; margin-top: .75rem; padding: .6rem .75rem; border-radius: 12px; background: #10090c; }
.trackfast-origin span { color: #ce578d; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.trackfast-origin code { overflow: hidden; color: #ce578d; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.feed-dock { color: var(--tf-ink); border-color: #31262b; background: #090608; }
.feed-card-grid article { color: var(--tf-ink); border-color: #31262b; background: #0c0709; }
.feed-card-grid strong { color: var(--tf-ink); }
.feed-card-grid p { color: var(--tf-muted); }
.copy-feed { color: #c95c8d; border-color: #31262b; background: #11090c; }
.destination-network { padding: .85rem 1rem; color: var(--tf-ink); border: 1px solid #31262b; background: rgba(29, 22, 25, .86); box-shadow: var(--tf-shadow); }
.destination-network > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.destination-network > summary::-webkit-details-marker { display: none; }
.destination-network > summary span { display: grid; gap: .15rem; }
.destination-network > summary small { margin: 0; }
.destination-network > summary b { color: #cf578d; font-size: .74rem; }
.destination-network[open] > summary { padding-bottom: .8rem; border-bottom: 1px solid #31262b; }
.destination-network-body { padding-top: 1rem; }
.destination-heading h2 { color: var(--tf-ink); }
.destination-heading p:not(.eyebrow) { color: var(--tf-muted); }
.destination-filters button { color: #ce578d; border-color: #31262b; background: #090608; }
.destination-filters button.active { color: #fff; border-color: transparent; background: linear-gradient(100deg, #d64083, #412330); }
.destination-card,
.destination-card.mapped { color: var(--tf-ink); border-color: #31262b; background: #090608; }
.destination-copy strong { color: var(--tf-ink); }
.destination-copy p { color: var(--tf-muted); }
.destination-copy small { color: #cb4e86; }
.route-link { border-color: #31262b; }
.package-studio { color: var(--tf-ink); border-color: #31262b; background: rgba(29, 22, 25, .82); }
.package-studio > summary em { color: var(--tf-muted); }
.cdn-settings { margin-top: 1rem; }
.cdn-settings > details > summary { color: #cf578d; cursor: pointer; font-weight: 850; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 178px minmax(0,1fr); }
  .sidebar { padding-inline: .65rem; }
  .brand strong { font-size: .75rem; }
  .content-studio-layout { grid-template-columns: 210px minmax(0,1fr); }
  .signal-flow { grid-template-columns: repeat(5, minmax(145px,1fr)); overflow-x: auto; }
  .signal-flow > i { display: none; }
  .canvas-board { min-width: calc(64px + (var(--calendar-days) * 150px)); }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .primary-nav { grid-template-columns: repeat(3,1fr) !important; }
  .primary-nav a { grid-template-columns: 1fr; justify-items: center; font-size: .7rem; }
  .sidebar-more,
  .sidebar-account { margin-top: .7rem; }
  .content-studio-layout { grid-template-columns: 1fr; }
  .content-tray { position: static; }
  .calendar-toolbar,
  .page-header,
  .cdn-output-card { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .calendar-toolbar label { grid-template-columns: 1fr; }
  .cdn-output-card > details { grid-column: auto; }
  .trackfast-origin { grid-template-columns: 1fr; }
  .schedule-header-actions { align-items: stretch; flex-direction: column; }
  .station-sign-inline,
  .control-room-sign { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .station-sign.is-live i,
  .control-room-sign.is-live { animation: on-air-breathe 2.2s ease-in-out infinite; }
}
@keyframes on-air-breathe { 50% { filter: brightness(1.22); } }