/* 420fm · shared frontend player and radio administration */

/* Launch controls */
.radio-launch{
  border:1px solid currentColor;
  background:transparent;
  color:var(--ink,#111);
  padding:7px 12px;
  font:800 11px/1 inherit;
  letter-spacing:.04em;
  cursor:pointer;
}
.radio-launch:hover{text-decoration:underline;text-underline-offset:3px}
.masthead-datebar .radio-launch{
  order:1;
  flex:0 0 auto;
  margin:0;
  padding:0 7px;
  height:14px;
  min-height:14px;
  border:0;
  border-radius:0;
  background:var(--ink,#111);
  color:var(--paper,#fff);
  font-family:inherit;
  font-size:10px;
  font-weight:900;
  line-height:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}
.masthead-datebar .radio-launch:hover{opacity:.78;text-decoration:none}
.masthead-datebar::before{order:2;flex:1 1 auto}
.masthead-datebar>span{order:3;margin-left:auto}
.masthead-datebar::after{display:none}
.admin-radio-launch{
  height:34px;
  min-height:34px;
  padding:0 10px;
  border-color:#cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#111827;
}

/* Persistent LIVE dock */
body.radio-is-open{padding-bottom:50px}
.radio-dock[hidden]{display:none!important}
.radio-dock{
  box-sizing:border-box;
  position:fixed;
  z-index:1200;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  height:50px;
  min-height:50px;
  max-height:50px;
  padding:5px max(10px,calc((100vw - 1420px)/2));
  overflow:hidden;
  background:var(--theme,#000);
  color:#fff;
  border-top:1px solid #3a3a3a;
  box-shadow:0 -12px 30px rgba(0,0,0,.22);
}
.radio-youtube-shell{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  overflow:hidden;
  pointer-events:none;
}
.radio-youtube-shell iframe{
  display:block;
  width:200px;
  height:200px;
  max-width:none;
}
.radio-copy{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:18px 14px;
  align-content:center;
  gap:2px;
}
.radio-kicker,.radio-copy>span,.radio-copy>small{display:none}
.radio-title{
  display:block;
  min-width:0;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  line-height:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.radio-title:hover{text-decoration:underline;text-underline-offset:2px}
.radio-title[aria-disabled="true"]{pointer-events:none;text-decoration:none}
.radio-progress-row{
  display:grid;
  grid-template-columns:32px minmax(70px,1fr) 32px;
  align-items:center;
  gap:6px;
  margin:0;
  color:#b8b8b8;
  font-size:8px;
  line-height:12px;
  font-variant-numeric:tabular-nums;
}
.radio-progress{
  position:relative;
  display:block;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:#414141;
}
.radio-progress b{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#fff;
  transition:width .2s linear;
}
.radio-dock[data-mode="news"] .radio-progress b{background:#ef4938}
.radio-dock-actions{display:flex;align-items:center;gap:8px}
.radio-close{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:transparent;
  color:#fff;
  font:400 24px/1 Arial,sans-serif;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease;
}
.radio-close:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.radio-close:active{transform:translateY(0)}
.radio-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.radio-control{
  width:86px;
  height:34px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#111;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.25);
  font-size:11px;
  font-weight:900;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease;
}
.radio-control:hover{background:#f0f0f0;transform:translateY(-1px)}
.radio-control:active{transform:translateY(0)}
.admin-body.radio-is-open{padding-bottom:0}
.admin-body.radio-is-open .admin-main{padding-bottom:96px}
.admin-main>.radio-dock{
  left:calc(248px + clamp(18px,2.4vw,38px));
  right:clamp(18px,2.4vw,38px);
  bottom:14px;
  width:auto;
  max-width:none;
  height:58px;
  min-height:58px;
  max-height:58px;
  padding:7px 9px 7px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:#111827;
  box-shadow:0 18px 48px rgba(15,23,42,.28);
}
.admin-main>.radio-dock .radio-copy{
  min-width:0;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:18px 14px;
  column-gap:12px;
}
.admin-main>.radio-dock .radio-kicker{
  display:flex;
  grid-column:1;
  grid-row:1 / span 2;
  align-items:center;
  align-self:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#e5e7eb;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
}
.admin-main>.radio-dock .radio-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.16);
}
.admin-main>.radio-dock .radio-title{grid-column:2;grid-row:1}
.admin-main>.radio-dock .radio-progress-row{grid-column:2;grid-row:2}
.admin-main>.radio-dock .radio-control{
  width:94px;
  height:38px;
  background:#f8fafc;
  color:#111827;
  box-shadow:none;
}


/* Radio administration */
.radio-admin-metrics{gap:12px;margin-bottom:18px}
.radio-admin-metrics>article{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 26px rgba(17,24,39,.12);
}
.radio-admin-metrics>article::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:#8ea09a;
}
.radio-admin-metrics .radio-metric-live::before{background:#31c66d}
.radio-admin-metrics .radio-metric-live strong{color:#b9ffd0}
.radio-countdown-card strong{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.radio-countdown-card.qwen-countdown{cursor:pointer;outline:none;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.radio-countdown-card.qwen-countdown::before{background:#f6c453}
.radio-countdown-card.qwen-countdown:hover,.radio-countdown-card.qwen-countdown:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(246,196,83,.7);
  box-shadow:0 15px 32px rgba(17,24,39,.2);
}
.radio-countdown-card.qwen-countdown em{
  display:block;
  margin-top:4px;
  color:#f6cf72;
  font-size:9px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.radio-admin-card{margin-bottom:18px}
.radio-admin-empty{padding:18px;margin:0;color:#7a827d}
.radio-error-text{color:#9b1c1c}
.radio-inline-action{margin:14px 0}
.radio-key-meta{margin:6px 0 0}
.radio-key-remove{margin-top:8px}

.radio-health-panel>header,.radio-listener-panel>header{align-items:center}
.radio-status-pill,.radio-live-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.radio-status-pill.is-ok,.radio-live-pill{background:#ecfdf3;color:#166534}
.radio-status-pill.is-warn{background:#fff7ed;color:#9a3412}
.radio-live-pill i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.14)}
.radio-health-grid,.radio-listener-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:0 18px 18px;
}
.radio-listener-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.radio-health-grid article,.radio-listener-grid article{
  display:grid;
  align-content:start;
  gap:5px;
  min-width:0;
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:linear-gradient(145deg,#fff,#f8fafc);
}
.radio-health-grid span,.radio-listener-grid span{
  font-size:11px;
  font-weight:800;
  color:#52605a;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.radio-health-grid strong{font-size:18px;line-height:1.2;color:#17211d}
.radio-listener-grid strong{font-size:28px;line-height:1;color:#17211d}
.radio-health-grid small,.radio-listener-grid small{font-size:11px;line-height:1.45;color:#707b76;overflow-wrap:anywhere}
.radio-listener-grid small span{font-size:inherit;text-transform:none;letter-spacing:0;color:inherit}
.radio-health-grid a{margin-top:4px;font-size:11px;font-weight:800;text-underline-offset:2px}

.radio-admin-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px}
.radio-api-key-row{justify-content:space-between;align-items:flex-end}
.radio-api-key-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;min-width:min(100%,620px)}
.radio-api-key-form label{flex:1 1 340px;margin:0}
.radio-api-key-form input{width:100%}
.radio-admin-add-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;padding:18px}
.radio-admin-preview{display:flex;align-items:center;justify-content:center;min-height:220px;padding:10px;background:#111;border-radius:10px;overflow:hidden}
#radio-admin-youtube{width:360px;height:203px;max-width:100%;background:#000}
.radio-import-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:18px}
.radio-import-grid textarea{width:100%;min-height:150px;resize:vertical;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}

.radio-admin-fold{padding:0;overflow:hidden}
.radio-admin-fold>summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px 18px;
}
.radio-admin-fold>summary::-webkit-details-marker{display:none}
.radio-admin-fold>summary h2{margin:0;font-size:18px;letter-spacing:-.02em}
.radio-admin-fold>summary p{margin:4px 0 0;color:var(--admin-muted,#6b7280);font-size:12px;line-height:1.4}
.radio-admin-fold>summary>span{
  position:relative;
  padding-right:26px;
  color:var(--admin-muted,#6b7280);
  font-size:11px;
  white-space:nowrap;
}
.radio-admin-fold>summary>span::after{
  content:"+";
  position:absolute;
  right:0;
  top:-2px;
  color:var(--admin-ink,#111827);
  font-size:18px;
  line-height:1;
  font-weight:700;
}
.radio-admin-fold[open]>summary{border-bottom:1px solid var(--admin-line,#e5e7eb)}
.radio-admin-fold[open]>summary>span::after{content:"−"}
.radio-admin-fold-body{min-width:0}
.radio-admin-fold-body>.radio-admin-actions,.radio-admin-fold-body>.radio-admin-add-grid,.radio-admin-fold-body>.radio-import-grid{padding-top:16px}
.radio-admin-fold-body>.muted{margin:0;padding:0 18px 18px}
.radio-jeppe-fold summary{background:linear-gradient(90deg,#fff,#f8faf9)}

.radio-library-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto auto;
  gap:12px;
  align-items:end;
  padding:16px;
  border-bottom:1px solid #e5e7eb;
  background:#f8fafc;
}
.radio-library-search{margin:0}
.radio-library-search span{display:block;margin-bottom:6px;font-size:11px;font-weight:800;color:#52605a}
.radio-library-search input{width:100%}
.radio-library-filters{display:flex;gap:4px;padding:3px;border:1px solid #d7ddd9;border-radius:10px;background:#fff}
.radio-library-filters button{border:0;border-radius:7px;background:transparent;padding:8px 10px;color:#52605a;font:800 11px/1 inherit;cursor:pointer}
.radio-library-filters button.is-active{background:#17211d;color:#fff}
.radio-library-count{padding-bottom:9px;color:#707b76;font-size:11px;white-space:nowrap}
.radio-track-no-results{border-bottom:1px solid #e5e7eb}
.radio-track-list{display:grid}
.radio-track-row{
  display:grid;
  grid-template-columns:100px minmax(0,1fr) auto auto;
  gap:14px;
  align-items:center;
  padding:12px 16px;
  border-top:1px solid #e2e5e2;
}
.radio-track-row[hidden]{display:none}
.radio-track-row:first-child{border-top:0}
.radio-track-row.is-disabled{background:#fafafa}
.radio-track-row img{width:100px;height:56px;object-fit:cover;background:#111;border-radius:6px}
.radio-track-copy{min-width:0}
.radio-track-copy strong,.radio-track-copy span{display:block}
.radio-track-copy strong{font-size:13px;overflow-wrap:anywhere}
.radio-track-copy span{margin-top:4px;font-size:10px;color:#7a827d;overflow-wrap:anywhere}
.radio-track-state{display:inline-flex!important;width:max-content;margin-top:6px;padding:3px 7px;border-radius:999px;font-size:9px!important;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.radio-track-state.is-active{background:#ecfdf3;color:#166534!important}
.radio-track-state.is-paused{background:#f3f4f6;color:#6b7280!important}
.radio-danger-button{min-width:max-content;padding-inline:13px;border-color:#e3a5a5!important;background:#fff1f2!important;color:#a31621!important;font-weight:850;white-space:nowrap}
.radio-danger-button:hover,.radio-danger-button:focus-visible{border-color:#b4232c!important;background:#b4232c!important;color:#fff!important}

.radio-broadcast-list{display:grid}
.radio-broadcast-list article{
  display:grid;
  grid-template-columns:120px minmax(140px,1fr) minmax(260px,420px) auto;
  gap:14px;
  align-items:center;
  padding:12px 16px;
  border-top:1px solid #e2e5e2;
}
.radio-broadcast-list article:first-child{border-top:0}
.radio-broadcast-list strong,.radio-broadcast-list span,.radio-broadcast-list small{font-size:11px}
.radio-broadcast-list small{overflow-wrap:anywhere}
.radio-broadcast-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.radio-broadcast-controls audio{flex:1 1 240px;min-width:200px;width:100%}
.radio-legacy-list{display:grid}
.radio-legacy-list article{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,420px) auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid #e2e5e2}
.radio-legacy-list article:first-child{border-top:0}
.radio-legacy-list strong,.radio-legacy-list span{display:block}
.radio-legacy-list span{margin-top:4px;font-size:10px;color:#7a827d}
.radio-legacy-list audio{width:100%}
.radio-jeppe-control{justify-content:flex-start;border-bottom:0}
.radio-jeppe-current{display:grid;gap:3px;margin-right:auto;min-width:220px}
.radio-jeppe-current strong{font-size:13px}
.radio-jeppe-current span{font-size:10px;color:#7a827d}
.radio-legacy-scan{padding:14px 18px;border-top:1px solid var(--border,#ddd);border-bottom:1px solid var(--border,#ddd)}
.radio-legacy-scan p{margin:0 0 6px}
.radio-legacy-scan p:last-of-type{margin-bottom:0}
.radio-legacy-scan details{margin-top:8px}
.radio-legacy-scan code{display:block;max-height:220px;margin-top:8px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.radio-automation-body{padding:18px}
.radio-automation-body>code{display:block;max-width:100%;padding:10px 12px;border-radius:8px;background:#f8fafc;white-space:pre-wrap;overflow-wrap:anywhere}

/* Qwen draft dialog */
.radio-qwen-modal{
  width:min(680px,calc(100vw - 28px));
  max-height:min(78vh,720px);
  padding:0;
  border:0;
  border-radius:18px;
  background:#fff;
  color:#17211d;
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}
.radio-qwen-modal::backdrop{background:rgba(13,20,17,.65);backdrop-filter:blur(3px)}
.radio-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 14px;border-bottom:1px solid #e5e7eb}
.radio-modal-head h2{margin:3px 0 0;font-size:22px}
.radio-modal-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid #d7ddd9;border-radius:50%;background:#fff;color:#26332d;font-size:25px;line-height:1;cursor:pointer}
.radio-modal-meta{display:flex;flex-wrap:wrap;gap:7px;padding:14px 22px 0}
.radio-modal-meta span{padding:5px 8px;border-radius:999px;background:#edf3f0;color:#48564f;font-size:10px;font-weight:800}
.radio-draft-text{margin:16px 22px;padding:18px;border:1px solid #dde5e1;border-radius:12px;background:#f7faf8;font:600 16px/1.65 Georgia,serif;white-space:normal}
.radio-modal-actions{display:flex;justify-content:flex-end;padding:0 22px 20px}
.radio-qwen-modal .radio-admin-empty{margin:18px 22px}

@media(max-width:1100px){
  .radio-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .radio-library-toolbar{grid-template-columns:minmax(220px,1fr) auto}
  .radio-library-count{grid-column:1/-1;padding:0}
  .radio-broadcast-list article{grid-template-columns:105px minmax(120px,1fr) minmax(220px,1.4fr)}
  .radio-broadcast-list article>form:last-child{grid-column:3;justify-self:end}
}

@media(max-width:900px){
  .admin-body.radio-is-open .admin-main{padding-bottom:76px}
  .admin-main>.radio-dock{
    left:10px;
    right:10px;
    bottom:9px;
    width:auto;
    max-width:none;
    height:56px;
    min-height:56px;
    max-height:56px;
    border-radius:14px;
  }
  .admin-radio-launch{height:32px;min-height:32px}
  .radio-admin-add-grid{grid-template-columns:1fr}
  .radio-admin-preview{justify-content:flex-start;overflow:auto}
  .radio-broadcast-list article{grid-template-columns:1fr}
  .radio-broadcast-list article>form:last-child{grid-column:auto;justify-self:start}
  .radio-broadcast-controls audio{min-width:0}
  .radio-legacy-list article{grid-template-columns:1fr}
}

@media(max-width:760px){
  .admin-main>.radio-dock{padding:6px 8px 6px 12px}
  .admin-main>.radio-dock .radio-copy{grid-template-columns:minmax(0,1fr);column-gap:0}
  .admin-main>.radio-dock .radio-kicker{display:none}
  .admin-main>.radio-dock .radio-title,.admin-main>.radio-dock .radio-progress-row{grid-column:1}
  .admin-main>.radio-dock .radio-control{width:78px;height:36px}
  .masthead-datebar .radio-launch{height:13px;min-height:13px;line-height:13px;padding:0 6px;font-size:9px}
  .radio-dock{gap:6px;padding:5px 7px}
  .radio-title{font-size:11px}
  .radio-progress-row{grid-template-columns:28px minmax(45px,1fr) 28px;gap:4px;font-size:7px}
  .radio-control{width:76px;height:32px;font-size:10px}
  .radio-admin-fold>summary{padding:14px;gap:8px}
  .radio-admin-fold>summary h2{font-size:17px}
  .radio-admin-fold>summary p{font-size:11px}
  .radio-admin-fold>summary>span{padding-right:22px;font-size:10px}
  .radio-api-key-form{min-width:100%}
  .radio-api-key-row{align-items:stretch}
  .radio-health-panel>header,.radio-listener-panel>header{align-items:flex-start}
  .radio-health-grid,.radio-listener-grid{grid-template-columns:1fr;padding:0 12px 12px}
  .radio-import-grid{grid-template-columns:1fr}
  .radio-library-toolbar{grid-template-columns:1fr;align-items:stretch}
  .radio-library-filters{width:max-content;max-width:100%}
  .radio-library-count{grid-column:auto}
  .radio-track-row{grid-template-columns:72px minmax(0,1fr);gap:10px}
  .radio-track-row img{width:72px;height:41px}
  .radio-track-row form{grid-column:auto}
  .radio-jeppe-control{display:grid;grid-template-columns:1fr}
  .radio-jeppe-current{margin-right:0;min-width:0}
  .radio-qwen-modal{max-height:86vh}
}

@media(max-width:480px){
  .radio-track-row{grid-template-columns:58px minmax(0,1fr)}
  .radio-track-row img{width:58px;height:42px}
  .radio-track-row form{grid-column:2}
  .radio-track-row form .button{width:100%}
  .radio-library-filters{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
}