:root {
  color-scheme: light;
  --night: #173c54;
  --ink: #183144;
  --paper: #f4f5ef;
  --mist: #d9edf0;
  --sky: #83b9c7;
  --coral: #dd6b50;
  --gold: #e9b73e;
  --line: #c7d8d8;
  --muted: #657881;
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a { color: inherit; }
.wordmark { color: var(--night); font-family: Georgia, 'Times New Roman', serif; font-size: 29px; font-weight: 700; letter-spacing: -.08em; text-decoration: none; }
.wordmark span { color: var(--coral); }
.masthead, .admin-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1260px; padding: 23px 38px; margin: auto; }
.broadcast-status { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 31px; color: #466671; font-size: 12px; font-weight: 700; }
.broadcast-status i { width: 8px; height: 8px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 4px rgba(221,107,80,.15); }
.admin-link, .text-link, .text-button { color: var(--night); font-size: 13px; font-weight: 700; text-decoration: none; background: transparent; border: 0; }
.admin-link:hover, .text-link:hover, .text-button:hover { color: var(--coral); }
.listener-layout { display: grid; grid-template-columns: minmax(310px, .95fr) minmax(355px, 1.05fr); max-width: 1185px; min-height: calc(100vh - 145px); padding: clamp(25px, 6vw, 82px) 38px clamp(38px, 7vw, 90px); margin: auto; gap: clamp(35px, 9vw, 145px); }
.on-air-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.transmission-label { display: flex; justify-content: space-between; padding-bottom: 13px; color: #477080; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .08em; }
.cover-frame { display: grid; width: min(100%, 390px); aspect-ratio: 1; margin: clamp(20px, 3vw, 33px) 0 28px; overflow: hidden; place-items: center; color: #e4f5f5; font-family: Georgia, serif; font-size: clamp(54px, 9vw, 100px); font-weight: bold; letter-spacing: -.12em; background: linear-gradient(145deg, #1f5068, #79a9af 63%, #e9b73e 63.5%, #e9b73e 70%, #dd6b50 70.5%); border-radius: 52% 48% 45% 55% / 43% 48% 52% 57%; box-shadow: 18px 21px 0 #d7e8e7; }
.cover-frame img { width: 100%; height: 100%; object-fit: cover; }
.eyebrow { margin: 0 0 9px; color: #5a7e89; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 550px; margin-bottom: 10px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(34px, 4.3vw, 62px); line-height: .98; letter-spacing: -.07em; }
h2 { margin-bottom: 7px; font-family: Georgia, 'Times New Roman', serif; font-size: 26px; letter-spacing: -.045em; }
.artist { margin-bottom: 0; color: var(--muted); font-size: 16px; }
.signal-line { display: flex; align-items: center; height: 37px; max-width: 380px; gap: 4px; margin-top: 28px; overflow: hidden; }
.signal-line span { flex: 1; height: 13px; background: var(--sky); border-radius: 99px; }
.signal-line span:nth-child(2n) { height: 27px; background: var(--night); }
.signal-line span:nth-child(3n) { height: 36px; background: var(--coral); }
.listen-deck { align-self: center; min-width: 0; padding: clamp(25px, 4vw, 48px); background: #fff; border: 1px solid #d5e0df; box-shadow: 0 21px 50px rgba(23,60,84,.1); }
.deck-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 29px; border-bottom: 1px solid var(--line); }
.deck-heading .eyebrow { margin-bottom: 15px; }.stream-format { color: var(--muted); font-size: 11px; white-space: nowrap; }
.primary-play { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 69px; gap: 12px; color: white; font-size: 16px; font-weight: 700; background: var(--night); border: 0; transition: background .2s ease, transform .2s ease; }
.primary-play:hover { background: #245a77; transform: translateY(-2px); }.primary-play span:first-child { font-size: 18px; }
.volume-row { display: grid; grid-template-columns: auto max-content 1fr max-content; align-items: center; gap: 11px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.round-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; color: var(--night); font-size: 19px; background: var(--mist); border: 0; border-radius: 50%; }.volume-label, .volume-row output { color: var(--muted); font-size: 12px; }.volume-row input { min-width: 70px; accent-color: var(--coral); }.volume-row output { font-variant-numeric: tabular-nums; }
.skip-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 23px 0; border-bottom: 1px solid var(--line); }.skip-title { margin-bottom: 5px; font-size: 14px; font-weight: 700; }.skip-note { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }.skip-button { flex: 0 0 auto; padding: 10px 13px; color: var(--night); font-size: 12px; font-weight: 700; background: transparent; border: 1px solid var(--night); }.skip-button:hover:not(:disabled) { color: white; background: var(--coral); border-color: var(--coral); }.skip-button:disabled { color: #8b9b9e; border-color: #bdcbcd; cursor: not-allowed; }
.lyrics-link { display: inline-block; margin-top: 23px; color: var(--coral); font-size: 13px; font-weight: 700; }.lyrics-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.site-footer { display: flex; justify-content: space-between; max-width: 1260px; padding: 20px 38px; margin: auto; color: #6d8189; font-size: 11px; border-top: 1px solid #d7e3e1; }.toast { position: fixed; z-index: 4; bottom: 25px; left: 50%; padding: 11px 16px; color: white; font-size: 13px; background: var(--night); box-shadow: 0 8px 20px rgba(23,60,84,.23); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: opacity .2s ease, transform .2s ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.admin-page { background: #edf3f2; }.admin-header { max-width: 1320px; border-bottom: 1px solid var(--line); }.admin-header-actions { display: flex; align-items: center; gap: 17px; }.admin-layout { max-width: 1180px; padding: 66px 38px 90px; margin: auto; }.auth-card { width: min(100%, 440px); padding: 39px; margin: 48px auto; background: white; border-top: 6px solid var(--coral); box-shadow: 0 18px 40px rgba(23,60,84,.1); }.auth-card > p { color: var(--muted); font-size: 14px; line-height: 1.5; }.auth-card form, .upload-card { display: grid; gap: 16px; }.auth-card label, .upload-card label { display: grid; gap: 7px; color: #506c78; font-size: 12px; font-weight: 700; }.auth-card input, .upload-card input { width: 100%; padding: 11px 12px; color: var(--ink); background: #fbfdfd; border: 1px solid #cbdcdd; border-radius: 0; }.auth-card input[type="file"], .upload-card input[type="file"] { padding: 9px; font-size: 12px; }.solid-button { min-height: 46px; padding: 10px 16px; color: white; font-size: 14px; font-weight: 700; background: var(--night); border: 0; }.solid-button:hover:not(:disabled) { background: var(--coral); }.solid-button:disabled { opacity: .55; cursor: wait; }.admin-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }.admin-intro h1 { margin-bottom: 0; }.outline-dark-button { padding: 11px 14px; color: var(--night); font-size: 13px; font-weight: 700; background: transparent; border: 1px solid var(--night); }.outline-dark-button:hover { color: white; background: var(--coral); border-color: var(--coral); }.dashboard-grid { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(390px, 1.18fr); align-items: start; gap: 24px; }.upload-card, .library-card { padding: 28px; background: white; border: 1px solid #d4e0e0; }.upload-card > p { margin-bottom: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }.optional { color: #80949b; font-weight: 400; }.form-message { min-height: 17px; margin: 0; color: #4d747d; font-size: 12px; }.library-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.library-heading h2 { margin-bottom: 4px; }.library-heading p { margin: 0; color: var(--muted); font-size: 12px; }.admin-tracks { display: grid; padding: 0; margin: 0; list-style: none; }.admin-track { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid #e0e8e7; }.admin-track-index { color: #73919b; font-size: 12px; }.admin-track-info { min-width: 0; }.admin-track-info strong, .admin-track-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-track-info strong { font-size: 13px; }.admin-track-info small { margin-top: 4px; color: var(--muted); font-size: 11px; }.track-state { color: #568075; font-size: 11px; }.track-actions { display: flex; gap: 5px; }.row-button { padding: 6px 8px; color: #4e6973; font-size: 11px; font-weight: 700; background: transparent; border: 1px solid #c7d7d8; }.row-button:hover { color: white; background: var(--night); border-color: var(--night); }.row-button.destructive:hover { background: var(--coral); border-color: var(--coral); }.empty-admin { padding: 36px 0 16px; margin: 0; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 800px) { .masthead, .admin-header { padding: 18px 22px; }.listener-layout { grid-template-columns: 1fr; min-height: auto; padding: 25px 22px 60px; gap: 39px; }.cover-frame { width: min(100%, 360px); }.on-air-card { align-items: flex-start; }.listen-deck { width: 100%; }.dashboard-grid { grid-template-columns: 1fr; }.admin-layout { padding: 40px 22px 70px; }.admin-intro { align-items: start; flex-direction: column; }.admin-track { grid-template-columns: 27px minmax(0,1fr) auto; }.track-state { display: none; }.site-footer { padding: 18px 22px; } }
@media (max-width: 490px) { .wordmark { font-size: 25px; }.masthead { gap: 10px; }.broadcast-status { display: none; }.admin-link { margin-left: auto; }.listener-layout { padding-right: 16px; padding-left: 16px; }.cover-frame { margin-bottom: 24px; }.listen-deck { padding: 23px 19px; }.skip-card { align-items: stretch; flex-direction: column; }.skip-button { width: 100%; }.site-footer { padding-right: 16px; padding-left: 16px; }.admin-header { padding-right: 16px; padding-left: 16px; }.admin-layout { padding-right: 16px; padding-left: 16px; }.auth-card, .upload-card, .library-card { padding: 21px 17px; }.admin-track { grid-template-columns: 25px minmax(0,1fr); }.track-actions { grid-column: 2; }.volume-row { grid-template-columns: auto 1fr auto; }.volume-label { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }