:root{
  color-scheme:dark;
  --bg:#07111d;--sidebar:#0c1928;--panel:#101f30;--panel2:#14263a;
  --border:rgba(143,177,211,.17);--text:#f4f8fc;--muted:#8fa4bb;
  --accent:#22d5bf;--blue:#2aa9ff;--green:#3bd17f;--red:#ff687a;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 0,rgba(42,169,255,.12),transparent 30%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select{font:inherit}
.app-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:24px 17px;background:linear-gradient(180deg,#0e1b2b,#08131f);border-right:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 27px}
.brand-mark{width:47px;height:47px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#75efe0);color:#04191d;font-weight:950}
.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{margin-top:3px;color:var(--muted);font-size:10px;letter-spacing:.1em}
nav{display:flex;flex-direction:column;gap:5px}
nav a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:11px;color:#b5c4d4;text-decoration:none;font-weight:720;font-size:14px;border:1px solid transparent}
nav a:hover{color:#fff;background:rgba(255,255,255,.035)}
nav a.active{color:#fff;background:linear-gradient(90deg,rgba(34,213,191,.15),rgba(42,169,255,.07));border-color:rgba(34,213,191,.2)}
nav span{width:20px;text-align:center;color:var(--accent)}
.sidebar-note{position:absolute;bottom:24px;left:25px;right:25px;padding:13px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
.sidebar-note strong,.sidebar-note span{display:block}.sidebar-note strong{font-size:10px;color:var(--accent);letter-spacing:.08em}.sidebar-note span{margin-top:5px;color:var(--muted);font-size:11px}
main{min-width:0;padding:29px 33px 48px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.eyebrow{margin:0 0 6px;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.17em}
h1{margin:0;font-size:30px;letter-spacing:-.03em}.subtitle{margin:7px 0 0;color:var(--muted);font-size:14px}
.top-actions{display:flex;align-items:center;gap:11px}.updated{color:var(--muted);font-size:11px}.updated strong{color:#dce7f2}
button{border:1px solid var(--border);border-radius:10px;padding:11px 14px;background:#172b40;color:#fff;font-weight:800;cursor:pointer}
button:hover:not(:disabled){border-color:rgba(34,213,191,.45)}button:disabled{opacity:.45;cursor:not-allowed}
.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:17px}
.summary article,.future-panel{padding:19px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(145deg,rgba(17,32,49,.97),rgba(10,22,35,.98));box-shadow:0 20px 55px rgba(0,0,0,.22)}
.summary small,.future-panel small{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em;margin-bottom:7px}.summary strong{font-size:23px}
.toolbar{display:flex;gap:11px;margin-bottom:17px}.search{display:flex;align-items:center;gap:9px;flex:1;padding:0 13px;background:#101f30;border:1px solid var(--border);border-radius:11px}.search span{color:var(--accent)}.search input{width:100%;border:0;outline:0;background:transparent;color:#fff;padding:12px 0}
.toolbar select{background:#132438;color:#fff;border:1px solid var(--border);border-radius:11px;padding:0 13px}
.radio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.radio-card{display:flex;flex-direction:column;min-height:285px;padding:18px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,rgba(17,32,49,.97),rgba(10,22,35,.98));box-shadow:0 18px 45px rgba(0,0,0,.2)}
.radio-head{display:flex;justify-content:space-between;gap:12px}.radio-name{min-width:0}.radio-name h2{margin:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.radio-name p{margin:5px 0 0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.online{height:max-content;padding:5px 7px;border-radius:999px;color:var(--green);background:rgba(59,209,127,.1);border:1px solid rgba(59,209,127,.22);font-size:9px;font-weight:900;letter-spacing:.07em}
.now{margin:18px 0;padding:13px;border-radius:11px;background:rgba(34,213,191,.05);border:1px solid rgba(34,213,191,.13)}
.now small,.metrics small{display:block;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.08em}.now strong{display:block;margin-top:6px;font-size:13px;line-height:1.4}.now span{display:block;margin-top:3px;color:#b8c7d6;font-size:12px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.metrics div{padding:10px;border-radius:9px;background:rgba(255,255,255,.025);border:1px solid var(--border)}.metrics strong{display:block;margin-top:5px;font-size:13px}
.card-actions{display:flex;gap:8px;margin-top:auto;padding-top:17px}.card-actions a{flex:1;text-align:center;padding:10px;border-radius:9px;text-decoration:none;font-size:11px;font-weight:850}.open-live{color:#04191d;background:linear-gradient(135deg,var(--accent),#72eee0)}.listen{color:#dfe9f3;background:#172b40;border:1px solid var(--border)}
.loading-card{grid-column:1/-1;padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:15px}
.error-box{margin-bottom:15px;padding:14px;border-radius:11px;background:rgba(255,104,122,.1);border:1px solid rgba(255,104,122,.25);color:#ffc5cc}
.future-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}.future-panel h2{margin:4px 0 6px;font-size:18px}.future-panel p{margin:0;color:var(--muted);font-size:13px}
@media(max-width:1150px){.radio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.sidebar-note{display:none}nav{flex-direction:row;overflow:auto}nav a{white-space:nowrap}main{padding:22px}.topbar{align-items:flex-start;flex-direction:column}.summary{grid-template-columns:1fr}.radio-grid{grid-template-columns:1fr}}
@media(max-width:560px){main{padding:16px}.toolbar,.future-panel{align-items:stretch;flex-direction:column}.top-actions{width:100%;justify-content:space-between}}

.configure{color:#dfe9f3;background:#172b40;border:1px solid var(--border)}
.card-actions{flex-wrap:wrap}.card-actions a{min-width:30%}


/* VRS Studio Pro — identification des sources radio */
.radio-badges{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.source-badge{
  padding:5px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.07em;
  white-space:nowrap;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:#dbe8f4;
}
.source-liquidsoap{
  color:#7ef4df;
  border-color:rgba(34,213,191,.30);
  background:rgba(34,213,191,.10);
}
.source-instreamer{
  color:#ffd58a;
  border-color:rgba(241,196,92,.30);
  background:rgba(241,196,92,.10);
}
.source-relay{
  color:#c9b8ff;
  border-color:rgba(151,119,255,.30);
  background:rgba(151,119,255,.10);
}
.source-icecast{
  color:#8fd1ff;
  border-color:rgba(42,169,255,.30);
  background:rgba(42,169,255,.10);
}
.source-detail{
  margin:-8px 0 14px;
  padding:10px 12px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
}
.source-detail small{
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
.source-detail strong{
  display:block;
  margin-top:5px;
  color:#dce7f2;
  font-size:11px;
}
.metrics{
  grid-template-columns:repeat(3,1fr);
}


/* VRS 11D-6C3 : prochain titre */
.next-track{
  margin:-6px 0 14px;
  padding:11px 12px;
  border-radius:9px;
  background:rgba(42,169,255,.035);
  border:1px solid rgba(42,169,255,.13);
}
.next-track small{
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
.next-track strong{
  display:block;
  margin-top:5px;
  color:#9eb0c2;
  font-size:11px;
}
.next-track span{
  display:block;
  margin-top:3px;
  color:#b8c7d6;
  font-size:11px;
}
.next-track.is-available{
  background:rgba(42,169,255,.07);
  border-color:rgba(42,169,255,.25);
}
.next-track.is-available strong{color:#f4f8fc}
.next-track{margin:-6px 0 14px;padding:11px 12px;border-radius:9px;background:rgba(42,169,255,.035);border:1px solid rgba(42,169,255,.20)}
.next-track small{display:block;color:#8fa4bb;font-size:9px;font-weight:900;letter-spacing:.08em}
.next-track strong{display:block;margin-top:6px;font-size:12px;line-height:1.35;color:#f4f8fc}
.next-track span{display:block;margin-top:3px;color:#b8c7d6;font-size:11px}
.next-track.is-available{background:rgba(34,213,191,.055);border-color:rgba(34,213,191,.25)}

/* VRS_ETAPE11_1_BEGIN */
/* EN COURS : artiste bleu, titre blanc */
.now {
  background: rgba(42, 169, 255, .075);
  border-color: rgba(42, 169, 255, .28);
}
.now small {
  color: #8fcfff;
}
.now strong {
  color: #42adff;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 0 14px rgba(42, 169, 255, .18);
}
.now span {
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  text-shadow: none;
}
/* VRS_ETAPE11_1_END */

/* VRS_ETAPE15_2_CSS_BEGIN */
.monitoring-metrics {
  display: grid;
  grid-template-columns: 1.15fr .85fr 1.4fr;
  gap: 10px;
  margin-top: 12px;
}
.monitoring-metrics > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(58, 91, 132, .55);
  border-radius: 11px;
  background: rgba(18, 40, 65, .78);
}
.monitoring-metrics small {
  display: block;
  margin-bottom: 6px;
  color: #92a8c2;
  font-size: 10px;
  letter-spacing: .045em;
}
.monitoring-metrics strong {
  display: block;
  color: #f5f9ff;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .monitoring-metrics { grid-template-columns: 1fr; }
}
/* VRS_ETAPE15_2_CSS_END */


/* VRS_ETAPE15_5_CSS_BEGIN */
.service-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.service-metrics > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(58, 91, 132, .55);
  border-radius: 11px;
  background: rgba(18, 40, 65, .78);
}
.service-metrics small {
  display: block;
  margin-bottom: 6px;
  color: #92a8c2;
  font-size: 10px;
  letter-spacing: .045em;
}
.service-metrics strong {
  display: block;
  color: #f5f9ff;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-metrics span {
  display: block;
  margin-top: 5px;
  color: #8fa3bc;
  font-size: 10px;
  line-height: 1.3;
}
.service-ok { color: #41d992 !important; }
.service-ko { color: #ff647d !important; }
.service-unknown { color: #ffb75c !important; }

@media (max-width: 760px) {
  .service-metrics { grid-template-columns: 1fr; }
}
/* VRS_ETAPE15_5_CSS_END */

/* VRS_MES_RADIOS_LIQUIDSOAP_CSS_BEGIN */
.mes-radios-liquidsoap{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:11px 12px;border:1px solid rgba(58,91,132,.55);border-radius:11px;background:rgba(18,40,65,.78)}
.mes-radios-liquidsoap small{display:block;margin-bottom:5px;color:#92a8c2;font-size:10px;letter-spacing:.045em}
.mes-radios-liquidsoap strong{display:block;font-size:13px;font-weight:850}
.mes-radios-liquidsoap>span{max-width:52%;color:#9fb1c7;font-size:11px;text-align:right;overflow-wrap:anywhere}
.mes-radios-liquidsoap .liq-active{color:#41d992}
.mes-radios-liquidsoap .liq-stopped{color:#ff647d}
.mes-radios-liquidsoap .liq-remote{color:#ffb75c}
@media(max-width:650px){.mes-radios-liquidsoap{align-items:flex-start;flex-direction:column}.mes-radios-liquidsoap>span{max-width:100%;text-align:left}}
/* VRS_MES_RADIOS_LIQUIDSOAP_CSS_END */

/* VRS_ETAPE15_5_5_BEGIN */
.service-na {
  color: #ffb75c !important;
}
/* VRS_ETAPE15_5_5_END */

/* VRS_ETAPE15_6_CSS_BEGIN */
.smtp-monitoring-card { min-width: 0; }
.smtp-monitoring-section {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(58, 91, 132, .45);
}
.smtp-monitoring-label {
  display: block;
  margin-bottom: 6px;
  color: #92a8c2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}
.smtp-recipient-list {
  display: grid;
  gap: 4px;
}
.smtp-recipient {
  display: block;
  color: #dcecff !important;
  font-size: 11px !important;
  overflow-wrap: anywhere;
}
.smtp-no-recipient {
  color: #ffb75c !important;
  font-size: 11px !important;
}
.smtp-monitoring-dates {
  display: grid;
  gap: 4px;
  margin-top: 9px;
}
.smtp-monitoring-dates span {
  color: #9fb1c7 !important;
  font-size: 10px !important;
  line-height: 1.35;
}
.smtp-monitoring-dates b { color: #cfe4fa; }
/* VRS_ETAPE15_6_CSS_END */

/* VRS_ETAPE15_6_2_BEGIN */
.service-warning {
  color: #ffb75c !important;
}
/* VRS_ETAPE15_6_2_END */

/* VRS_ETAPE15_7_CSS_BEGIN */
.broadcast-state{display:flex;align-items:center;gap:10px;margin:12px 0;padding:11px 13px;border:1px solid rgba(58,91,132,.55);border-radius:12px;background:rgba(18,40,65,.78)}
.broadcast-state .broadcast-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.broadcast-state div{min-width:0}.broadcast-state strong{display:block;font-size:13px;font-weight:900;letter-spacing:.025em}.broadcast-state small{display:block;margin-top:3px;color:#a8bad0;font-size:11px}
.broadcast-online{color:#41d992;border-color:rgba(65,217,146,.36);background:rgba(65,217,146,.075)}
.broadcast-offline{color:#ff647d;border-color:rgba(255,100,125,.36);background:rgba(255,100,125,.075)}
.broadcast-connecting{color:#ffb75c;border-color:rgba(255,183,92,.36);background:rgba(255,183,92,.075)}
/* VRS_ETAPE15_7_CSS_END */

/* VRS_ETAPE15_8_CSS_BEGIN */
.vrs-status-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.vrs-status-item {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(58, 91, 132, .55);
  border-radius: 10px;
  background: rgba(18, 40, 65, .78);
}
.vrs-status-item small {
  display: block;
  margin-bottom: 5px;
  color: #92a8c2;
  font-size: 9px;
  letter-spacing: .045em;
}
.vrs-status-item strong {
  display: block;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.vrs-status-ok strong { color: #41d992; }
.vrs-status-ko strong { color: #ff647d; }
.vrs-status-warning strong { color: #ffb75c; }
.vrs-status-remote strong { color: #42adff; }

@media (max-width: 1150px) {
  .vrs-status-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .vrs-status-summary {
    grid-template-columns: 1fr 1fr;
  }
}
/* VRS_ETAPE15_8_CSS_END */

/* VRS_ETAPE15_9_CSS_BEGIN */
.history-action{display:flex;justify-content:flex-end;margin-top:12px}
.history-button{display:inline-flex;padding:9px 12px;border:1px solid rgba(66,173,255,.35);border-radius:10px;background:rgba(66,173,255,.1);color:#8fcfff;text-decoration:none;font-size:12px;font-weight:800}
/* VRS_ETAPE15_9_CSS_END */