@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
:root { color-scheme: dark; --ink:#f3f5f4; --muted:#aeb9b4; --ground:#0b1110; --panel:#121c19; --line:#2d413a; --gold:#d5b46c; --gold-soft:#f5e5bd; --danger:#ffaaa0; font-family:Outfit,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 82% 0%,#18352a 0,transparent 35rem),var(--ground); color:var(--ink); }
.shell { width:min(1440px,calc(100% - 2rem)); margin:0 auto; padding:3.5rem 0 5rem; }
.masthead { border-bottom:1px solid var(--line); padding-bottom:2rem; }.eyebrow { color:var(--gold); letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; font-weight:700; margin:0 0 .8rem; }h1,h2,p { margin-top:0; }h1 { max-width:18ch; font-size:clamp(2.7rem,6vw,5.7rem); line-height:.94; letter-spacing:-.055em; margin-bottom:1rem; }h2 { font-size:1.2rem; letter-spacing:-.02em; margin-bottom:.3rem; }.intro { color:var(--muted); max-width:58ch; font-size:1.08rem; line-height:1.55; margin:0; }
.login-wrap { max-width:35rem; margin:3rem auto; }.login-card { padding:1.6rem; }.manager-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.5rem 0; }.manager-toolbar p { color:var(--muted); font-weight:600; margin:0; }.quiet-button { margin:0; flex:0 0 auto; background:transparent; border:1px solid var(--gold); color:#eadba9; }.quiet-button:hover { background:#282517; color:#fff2c9; }
.workspace { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr); gap:1.5rem; align-items:start; }.panel { background:linear-gradient(155deg,var(--panel),#0e1714); border:1px solid var(--line); border-radius:.8rem; padding:1.4rem; margin-bottom:1rem; box-shadow:0 1rem 3rem rgba(0,0,0,.16); }.panel-heading { border-bottom:1px solid var(--line); margin-bottom:1.15rem; padding-bottom:.8rem; }.panel-heading p { color:var(--muted); margin:0; font-size:.92rem; line-height:1.4; }
.grid { display:grid; gap:1rem; }.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.full { margin-top:1rem; display:block; }label { display:block; color:#dce5e0; font-size:.92rem; font-weight:600; }input,textarea,select { appearance:none; width:100%; margin-top:.45rem; padding:.75rem .8rem; background:#0b1210; border:1px solid #385048; border-radius:.45rem; color:var(--ink); font:inherit; font-weight:400; }textarea { resize:vertical; }input:focus,textarea:focus,select:focus { outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }[aria-invalid="true"] { border-color:var(--danger); }small { display:block; color:var(--muted); font-weight:400; line-height:1.35; margin-top:.38rem; }.optional { color:var(--muted); font-weight:400; }
.check { position:relative; display:block; margin:.8rem 0; padding:1rem 1rem 1rem 3.25rem; border:1px solid #385048; border-radius:.6rem; background:#0b1210; cursor:pointer; line-height:1.45; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }.check:hover { border-color:#638476; }.check input { position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0; border:0; opacity:0; clip:rect(0 0 0 0); overflow:hidden; }.check span::before { content:""; position:absolute; left:1rem; top:50%; width:1.25rem; height:1.25rem; border:2px solid #6e867b; border-radius:.28rem; transform:translateY(-50%); background:#101916; }.check span::after { content:""; position:absolute; left:1.42rem; top:50%; width:.34rem; height:.68rem; border:solid #162018; border-width:0 .18rem .18rem 0; transform:translateY(-61%) rotate(45deg) scale(.5); opacity:0; transition:opacity .14s ease,transform .14s ease; }.check input:checked + span { color:var(--gold-soft); }.check:has(input:checked) { border-color:var(--gold); background:rgba(213,180,108,.12); box-shadow:inset 0 0 0 1px rgba(213,180,108,.16); }.check input:checked + span::before { border-color:var(--gold); background:var(--gold); }.check input:checked + span::after { opacity:1; transform:translateY(-61%) rotate(45deg) scale(1); }.check:focus-within { outline:2px solid var(--gold); outline-offset:2px; }.check:has(input[aria-invalid="true"]) { border-color:var(--danger); }
button { border:0; border-radius:.45rem; background:var(--gold); color:#182018; padding:.85rem 1rem; font:inherit; font-weight:800; cursor:pointer; margin-top:1rem; }button:hover { background:#ebcc88; transform:translateY(-1px); }button:focus-visible { outline:3px solid white; outline-offset:3px; }.status { min-height:1.4rem; color:#dce5e0; font-size:.92rem; margin:.9rem 0 0; }.field-error { color:var(--danger); font-size:.82rem; font-weight:500; line-height:1.35; margin:.5rem 0 0; }.sticky { position:sticky; top:1rem; }.requirements { color:var(--muted); padding-left:1.3rem; margin:0; }.requirements li { margin:.7rem 0; line-height:1.4; }.review-output { min-height:12rem; color:var(--muted); line-height:1.5; }.review-output.ready { color:var(--ink); }.review-list { display:grid; grid-template-columns:1fr; gap:.7rem; margin:0; }.review-list div { padding:.72rem .78rem; border-radius:.45rem; background:#0b1210; border:1px solid #273b34; }.review-list dt { color:var(--muted); font-size:.77rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.review-list dd { margin:.2rem 0 0; overflow-wrap:anywhere; }
@media (max-width:900px) { .shell { width:min(100% - 1.25rem,760px); padding-top:1.3rem; }.workspace { display:block; }.grid.two { grid-template-columns:1fr; }.sticky { position:static; }.review-column { margin-top:1rem; }h1 { max-width:11ch; } }
@media (prefers-reduced-motion:no-preference) { .panel { animation:settle .3s ease both; }button,.check { transition-duration:.16s; } }@keyframes settle { from { opacity:.01; transform:translateY(6px); }to { opacity:1; transform:translateY(0); } }
.station-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }.station-tab { margin:0; background:#0b1210; color:var(--muted); border:1px solid #385048; }.station-tab:hover { background:#16231e; color:var(--ink); }.station-tab.active { background:var(--gold); color:#182018; border-color:var(--gold); }.station-tab-panel { min-width:0; }.workspace-note { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:0 0 1rem; border-bottom:1px solid var(--line); }.workspace-note h3 { margin:0 0 .3rem; font-size:1.15rem; }.workspace-note p { color:var(--muted); max-width:62ch; margin:0; line-height:1.45; }.workspace-note button,.link-button { margin:0; white-space:nowrap; }.link-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; min-height:2.9rem; }.monitor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }.monitor-card { min-height:9rem; border:1px solid #385048; border-radius:.7rem; padding:1rem; background:#0b1210; }.monitor-card h3 { color:var(--muted); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 .8rem; }.monitor-card strong { display:block; font-size:1.25rem; overflow-wrap:anywhere; }.monitor-card p { margin:.55rem 0 0; color:var(--muted); line-height:1.4; overflow-wrap:anywhere; }.health-good { color:#9ee0b5; }.health-warn { color:#f5d58f; }.health-bad { color:var(--danger); }.station-frame { display:block; width:100%; min-height:48rem; margin-top:1rem; border:1px solid #385048; border-radius:.7rem; background:#fff; }.detail-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }.detail-tab { margin:0; background:#101916; border:1px solid #385048; color:var(--muted); }.detail-tab.active { background:#375d4d; color:#fff; border-color:#638476; }.monitor-audio { width:min(100%,42rem); margin-top:1.25rem; }.station-tab-panel[data-station-panel="pwa"] .station-frame { width:min(430px,100%); height:932px; min-height:0; margin:1rem 2rem 0 auto; box-shadow:0 1.5rem 3rem rgba(0,0,0,.35); }
@media (max-width:900px) { .shell { width:min(100% - 1.25rem,760px); padding-top:1.3rem; }.workspace { display:block; }.grid.two,.monitor-grid { grid-template-columns:1fr; }.sticky { position:static; }.review-column { margin-top:1rem; }h1 { max-width:11ch; }.workspace-note { display:block; }.workspace-note button,.link-button { margin-top:1rem; }.station-frame { min-height:38rem; } }
.compact-masthead { display:flex; align-items:baseline; gap:.8rem; padding:1rem 0 .8rem; border-bottom:1px solid var(--line); }.compact-masthead .eyebrow { margin:0; }.compact-masthead h1 { max-width:none; margin:0; font-size:1.45rem; letter-spacing:-.03em; line-height:1; }.manager-toolbar { margin:.75rem 0; }.manager-toolbar p { font-size:.88rem; }.manager-nav { display:flex; gap:.4rem; padding:.4rem; margin:0 0 1rem; border:1px solid var(--line); border-radius:.7rem; background:#101916; }.manager-nav .nav-button { margin:0; background:transparent; color:var(--muted); border:0; padding:.7rem .9rem; }.manager-nav .nav-button.active { background:var(--gold); color:#182018; }.station-details-layout { display:grid; grid-template-columns:minmax(0,1fr) 430px; align-items:start; gap:1.5rem; }.station-device-preview { position:sticky; top:1rem; }.device-preview-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }.device-preview-heading h3 { margin:0; }.station-device-preview .station-frame { width:430px; height:932px; min-height:0; margin:0; box-shadow:0 1.5rem 3rem rgba(0,0,0,.35); }.station-tab-panel[data-station-panel="pwa"] .station-frame { width:min(430px,100%); height:932px; min-height:0; margin:1rem 2rem 0 auto; box-shadow:0 1.5rem 3rem rgba(0,0,0,.35); }@media (max-width:1100px) { .station-details-layout { grid-template-columns:minmax(0,1fr) 360px; }.station-device-preview .station-frame { width:360px; height:780px; } }@media (max-width:900px) { .compact-masthead { display:block; }.compact-masthead h1 { margin-top:.25rem; }.manager-nav { overflow-x:auto; }.station-details-layout { display:block; }.station-device-preview { position:static; margin-top:1rem; }.station-device-preview .station-frame { width:min(430px,100%); height:932px; margin:0 auto; } }
#create-view[hidden], .manager-view[hidden], .station-tab-panel[hidden], [data-detail-panel][hidden] { display:none !important; }
.stations-workspace { display:grid; grid-template-columns:180px minmax(0,1fr); gap:1rem; align-items:start; }.stations-workspace .station-list { display:flex; flex-direction:column; gap:.35rem; margin:0; position:sticky; top:1rem; max-height:calc(100vh - 12rem); overflow-y:auto; padding-right:.2rem; }.stations-workspace .station-card { min-height:0; padding:.58rem .6rem; gap:.15rem; border-radius:.5rem; font-size:.78rem; }.stations-workspace .station-card-top { align-items:flex-start; }.stations-workspace .station-card strong { font-size:.82rem; line-height:1.15; }.stations-workspace .station-card > span:not(.station-card-top), .stations-workspace .station-card small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.7rem; }.stations-workspace .availability { font-size:.58rem; padding:.12rem .25rem; }.stations-workspace .station-card.selected { border-color:var(--gold); background:#283127; box-shadow:inset 3px 0 0 var(--gold); }.stations-workspace .station-editor { min-width:0; margin:0; }.station-tab.stream-live::after, .station-tab.stream-offline::after, .station-tab.checking::after { content:""; display:inline-block; width:.52rem; height:.52rem; margin-left:.45rem; border-radius:50%; vertical-align:middle; background:#91d9a8; }.station-tab.stream-offline::after { background:var(--danger); }.station-tab.checking::after { background:var(--gold); animation:pulse 1s infinite alternate; }@keyframes pulse { to { opacity:.3; } }.station-device-preview .station-frame { width:430px; height:932px; min-height:0; }
.station-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:1.25rem; align-items:start; }.station-editor-layout .station-device-preview { width:430px; }@media (max-width:1280px) { .station-editor-layout { grid-template-columns:minmax(0,1fr) minmax(260px,430px); }.station-editor-layout .station-device-preview { width:100%; }.station-editor-layout .station-device-preview .station-frame { width:100%; height:auto; aspect-ratio:430 / 932; } }@media (max-width:900px) { .stations-workspace { display:block; }.stations-workspace .station-list { position:static; max-height:12rem; margin-bottom:1rem; }.stations-workspace .station-card { white-space:normal; }.station-device-preview .station-frame { width:min(280px,100%); height:606px; } }
.manager-view#stations-view { max-width:none; }.stations-workspace { display:block; }.stations-workspace:not(.has-selection) .station-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:.8rem; margin:1rem 0 1.25rem; position:static; max-height:none; overflow:visible; padding:0; }.stations-workspace:not(.has-selection) .station-card { padding:1rem; gap:.35rem; border-radius:.75rem; font-size:inherit; }.stations-workspace:not(.has-selection) .station-card strong { font-size:inherit; line-height:normal; }.stations-workspace:not(.has-selection) .station-card > span:not(.station-card-top), .stations-workspace:not(.has-selection) .station-card small { white-space:normal; overflow:visible; text-overflow:clip; font-size:inherit; }.stations-workspace:not(.has-selection) .availability { font-size:.78rem; padding:.22rem .45rem; }.stations-workspace.has-selection { display:grid; grid-template-columns:200px minmax(0,1fr); gap:1rem; align-items:start; }.stations-workspace.has-selection .station-list { display:flex; flex-direction:column; gap:.35rem; margin:0; position:sticky; top:1rem; max-height:calc(100vh - 12rem); overflow-y:auto; padding-right:.2rem; }.stations-workspace.has-selection .station-card { min-width:0; overflow:hidden; white-space:nowrap; }.stations-workspace.has-selection .station-card-subdomain, .stations-workspace.has-selection .station-card-location { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }@media (max-width:900px) { .stations-workspace.has-selection { display:block; }.stations-workspace.has-selection .station-list { position:static; max-height:12rem; margin-bottom:1rem; } }
.stations-workspace.has-selection .station-card { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:.18rem .35rem; width:100%; box-sizing:border-box; padding:.5rem .55rem; }.stations-workspace.has-selection .station-card-top { display:contents; }.stations-workspace.has-selection .station-card-subdomain { grid-column:1; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; line-height:1.15; }.stations-workspace.has-selection .station-card .availability { grid-column:2; grid-row:1; margin:0; flex:none; }.stations-workspace.has-selection .station-card-location { grid-column:1 / -1; grid-row:2; width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; color:var(--muted); }.email-workspace { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:1rem; align-items:start; margin:1rem 0; }.email-workspace h3 { margin:.1rem 0 .65rem; }.email-toolbar { display:flex; gap:.35rem; padding:.4rem; border:1px solid var(--line); border-bottom:0; border-radius:.55rem .55rem 0 0; background:#101916; }.email-toolbar button { margin:0; padding:.3rem .55rem; font-size:.82rem; }.email-html-editor { min-height:28rem; padding:1rem; overflow:auto; border:1px solid var(--line); border-radius:0 0 .55rem .55rem; background:#fff; color:#172018; line-height:1.45; }.email-html-editor:focus { outline:2px solid var(--gold); outline-offset:2px; }.placeholder-guide { padding:1rem; border:1px solid var(--line); border-radius:.6rem; background:#101916; }.placeholder-guide p { font-size:.8rem; color:var(--muted); }.placeholder-guide dl { margin:0; }.placeholder-guide dt { margin-top:.65rem; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.78rem; color:var(--gold); }.placeholder-guide dd { margin:.12rem 0 0; font-size:.78rem; color:var(--muted); }@media (max-width:900px) { .email-workspace { grid-template-columns:1fr; }.email-html-editor { min-height:20rem; } }
.stations-workspace.has-selection .station-card { display:block; min-height:58px !important; height:auto !important; overflow:visible; padding:.6rem .7rem; line-height:1.2; }.stations-workspace.has-selection .station-card-top { display:block; }.stations-workspace.has-selection .station-card .availability { display:none; }.stations-workspace.has-selection .station-card-subdomain { display:block; width:100%; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; line-height:1.2; }.stations-workspace.has-selection .station-card-location { display:block; width:100%; max-width:100%; min-width:0; margin-top:.28rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.74rem; line-height:1.2; }.station-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,280px); gap:1.25rem; align-items:start; }.station-editor-main { min-width:0; }.station-editor-layout .station-details-layout { display:block; }.station-editor-layout .station-device-preview { grid-column:2; grid-row:1; position:sticky; top:1rem; }.station-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }.station-editor-heading h2 { margin:0; }.close-station-editor { margin:0; white-space:nowrap; }@media (max-width:900px) { .station-editor-layout { display:block; }.station-editor-layout .station-device-preview { position:static; margin-top:1rem; } }
@media (min-width:1281px) { .station-editor-layout { grid-template-columns:minmax(0,1fr) 430px; }.station-editor-layout .station-device-preview { width:430px; }.station-editor-layout .station-device-preview .station-frame { width:430px; height:932px; aspect-ratio:auto; } }
@media (min-width:901px) and (max-width:1280px) { .station-editor-layout { grid-template-columns:minmax(0,1fr) minmax(260px,430px); }.station-editor-layout .station-device-preview { width:100%; }.station-editor-layout .station-device-preview .station-frame { width:100%; height:auto; aspect-ratio:430 / 932; } }
.pwa-device-stage { position:relative; margin:0 auto; overflow:hidden; border-radius:.8rem; box-shadow:0 1.5rem 3rem rgba(0,0,0,.35); background:#fff; }.pwa-device-stage .station-frame { position:absolute; inset:0 auto auto 0; margin:0; min-height:0; transform-origin:top left; border:0; border-radius:0; box-shadow:none; }.device-selector { display:block; margin-top:.3rem; font-size:.72rem; color:var(--muted); }.device-selector select { display:block; width:100%; min-width:190px; margin-top:.15rem; font-size:.76rem; }.device-preview-actions { display:flex; align-items:flex-start; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }.device-preview-actions .quiet-button { margin:0; font-size:.72rem; }.stations-workspace.has-selection .station-card-top { display:flex; align-items:center; justify-content:space-between; gap:.35rem; min-width:0; }.stations-workspace.has-selection .station-indicators { display:inline-flex; flex:0 0 auto; gap:.28rem; align-items:center; }.station-indicator { display:block; width:.56rem; height:.56rem; border-radius:50%; background:#7d8984; box-shadow:0 0 0 1px rgba(0,0,0,.35); }.station-indicator.availability-active { background:#91d9a8; }.station-indicator.availability-offline { background:var(--danger); }.station-indicator.stream-live { background:#91d9a8; box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 .6rem rgba(145,217,168,.55); }.station-indicator.stream-offline { background:var(--danger); }.station-indicator.stream-checking { background:var(--gold); }.stations-heading-actions { display:flex; align-items:flex-end; gap:.55rem; flex-wrap:wrap; }.station-sort-label { color:var(--muted); font-size:.72rem; font-weight:700; }.station-sort-label select { min-width:185px; margin-top:.18rem; padding:.52rem .62rem; font-size:.8rem; }.station-statistics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin:0 0 1rem; }.station-statistics > p { grid-column:1 / -1; margin:0; color:var(--muted); font-size:.82rem; }.station-statistic { min-width:0; padding:.62rem .68rem; border:1px solid rgba(145,217,168,.22); border-radius:.65rem; background:rgba(145,217,168,.06); }.station-statistic strong { display:block; font-size:1.25rem; line-height:1.1; color:#d9f5df; }.station-statistic span,.station-statistic small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.station-statistic span { margin-top:.2rem; font-size:.74rem; font-weight:700; }.station-statistic small { margin-top:.18rem; color:var(--muted); font-size:.67rem; }.stats-error { color:#ffb7b7 !important; }@media (max-width:700px) { .section-heading { align-items:flex-start; }.stations-heading-actions { width:100%; justify-content:space-between; }.station-sort-label { flex:1 1 180px; }.station-sort-label select { width:100%; }.station-statistics { grid-template-columns:repeat(2,minmax(0,1fr)); } }