.credential-box { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0; }
.credential-box > div { padding:13px; border:1px solid var(--line); border-radius:9px; background:#081525; }
.credential-box .full { grid-column:1/-1; }
.credential-box small, .credential-box code { display:block; }
.credential-box small { margin-bottom:7px; color:#6f849e; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.credential-box code { color:#71b5ff; overflow-wrap:anywhere; }
#credentialsDialog { padding:26px; }
.card-actions { flex-wrap:wrap; }
.pill.offline { background:rgba(126,145,168,.12); color:#8fa3ba; }
.station-card:has(.pill.active)::before { background:#21d18c; box-shadow:0 0 18px rgba(33,209,140,.55); }
.section-actions{display:flex;gap:10px;align-items:center}.mini-btn{padding:6px 9px;margin-right:6px;font-size:9px}.check-field{display:flex!important;grid-column:1/-1;align-items:center;grid-template-columns:18px 1fr!important}.check-field input{width:16px!important;height:16px;margin:0}.pill.offline{background:rgba(130,147,170,.12);color:#91a2b7}@media(max-width:760px){.section-actions{width:100%;flex-wrap:wrap}}
.billing-metrics{margin-bottom:16px}.billing-metrics strong{font-size:22px}.billing-table{margin-top:16px}.form-grid .full{grid-column:1/-1}
.billing-grid{grid-template-columns:2fr 1fr}.billing-alerts{margin-top:12px}.billing-alert{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}.billing-alert b,.billing-alert small{display:block}.billing-alert small{margin-top:4px;color:var(--muted);font-size:10px}.secondary-btn:disabled{cursor:not-allowed;opacity:.45}@media(max-width:760px){.billing-grid{grid-template-columns:1fr}.billing-alert{grid-template-columns:1fr auto}.billing-alert button{grid-column:1/-1}}
.primary-btn:disabled{cursor:wait;opacity:.55}
.plan-card{min-height:330px}.plan-price{margin:18px 0;color:#fff;font:800 28px Manrope}.plan-price small{margin-left:5px;color:var(--muted);font:500 10px "DM Sans"}.legacy-badge,.protected-note{color:#71849d;font-size:9px;font-weight:800;letter-spacing:.06em}
.client-actions{display:flex;min-width:310px;flex-wrap:wrap;gap:5px}.client-actions .mini-btn{margin:0}
.legacy-badge { color:#6f849e; font-size:8px; font-weight:800; letter-spacing:.12em; }
.protected-note { display:inline-flex; align-items:center; padding:8px 0; color:#71859e; font-size:10px; font-weight:700; }
.connection-history {
  margin-top: 22px;
}

.server-mini i {
  background: #22cf8a;
  box-shadow: 0 0 0 4px rgba(34, 207, 138, .1);
}

.backup-monitor {
  background: linear-gradient(135deg, rgba(12, 38, 66, .98), rgba(8, 25, 43, .98));
}

.backup-summary {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 22px 0;
  padding: 16px;
  border: 1px solid rgba(48, 137, 237, .22);
  border-radius: 12px;
  background: rgba(18, 82, 145, .12);
}

.backup-summary strong,
.backup-summary small {
  display: block;
}

.backup-summary strong {
  font-size: 13px;
}

.backup-summary small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.backup-icon {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(22, 119, 255, .18);
  color: #66b0ff;
  font-size: 24px;
}

.backup-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.backup-details div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.backup-details div:nth-child(odd) {
  padding-right: 22px;
}

.backup-details div:nth-child(even) {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.backup-details dt {
  color: var(--muted);
}

.backup-details dd {
  margin: 0;
  text-align: right;
}

.connection-history .table-tools > div h3 {
  margin: 4px 0 0;
}

.billing-automation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  background: linear-gradient(120deg, rgba(19, 55, 91, .88), rgba(10, 26, 44, .96));
}

.billing-automation > div:first-child {
  display: flex;
  align-items: center;
  gap: 16px;
}

.billing-automation h3,
.billing-automation p {
  margin: 0;
}

.billing-automation .eyebrow {
  margin-bottom: 5px;
}

.billing-automation .muted {
  margin-top: 7px;
  font-size: 11px;
}

.automation-icon {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(65, 155, 255, .3);
  border-radius: 13px;
  background: rgba(22, 119, 255, .14);
  color: #55a7ff;
  font-size: 25px;
}

.automation-state {
  display: grid;
  justify-items: end;
  gap: 7px;
  text-align: right;
}

.automation-state small {
  color: var(--muted);
  font-size: 9px;
}

.billing-alert-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.billing-alert-actions .mini-btn {
  margin: 0;
}

.billing-alert-actions .icon-btn {
  padding: 5px 8px;
}

@media (max-width: 760px) {
  .backup-details {
    grid-template-columns: 1fr;
  }

  .backup-details div:nth-child(n) {
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }

  .billing-automation {
    align-items: flex-start;
    flex-direction: column;
  }

  .automation-state {
    justify-items: start;
    text-align: left;
  }

  .billing-alert-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
}

.analytics-filters select,
#autodjMount,
.autodj-settings select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #081525;
  color: #a9bad0;
  font-size: 11px;
}

.audience-chart-panel { margin-top: 16px; }
.audience-chart { display: none; width: 100%; height: 290px; margin-top: 20px; overflow: visible; }
.audience-chart.has-data { display: block; }
.chart-empty { padding: 85px 20px; color: var(--muted); text-align: center; font-size: 11px; }
.chart-grid { stroke: #1c3049; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-area { fill: url(#audienceGradient); }
.chart-average { fill: none; stroke: #1683ff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-peak { fill: none; stroke: #31d9cc; stroke-width: 1.5; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.chart-legend { display: flex; gap: 20px; margin-top: 12px; color: var(--muted); font-size: 9px; }
.chart-legend span { display: flex; align-items: center; gap: 7px; }
.chart-legend i { width: 18px; height: 2px; background: #1683ff; }
.chart-legend .legend-peak { background: #31d9cc; }
.audience-detail-grid { grid-template-columns: 1fr 1fr; }
.audience-breakdown { margin: 18px 0 0; }
.audience-breakdown div { display: flex; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--line); font-size: 11px; }
.audience-breakdown dt { color: var(--muted); }
.audience-breakdown dd { margin: 0; font-weight: 800; }

.autodj-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(120deg, rgba(18, 59, 102, .9), rgba(9, 25, 43, .98)); }
.autodj-hero > div:first-child { display: flex; align-items: center; gap: 16px; }
.autodj-hero h3, .autodj-hero p { margin: 0; }
.autodj-hero .eyebrow { margin-bottom: 5px; }
.autodj-hero .muted { margin-top: 6px; font-size: 11px; }
.autodj-icon { display: grid; flex: 0 0 50px; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(74, 162, 255, .3); border-radius: 14px; background: rgba(22, 119, 255, .16); color: #61adff; font-size: 27px; }
.autodj-state { display: flex; align-items: center; gap: 12px; }
.autodj-grid { grid-template-columns: 1fr 1fr; }
.autodj-settings { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; }
.autodj-settings label { display: grid; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.autodj-fallback { margin-top: 22px; padding: 15px; border: 1px solid rgba(43, 151, 255, .2); border-radius: 10px; background: rgba(18, 86, 153, .1); }
.autodj-fallback b { font-size: 11px; }
.autodj-fallback p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.upload-zone { display: grid; place-items: center; min-height: 160px; padding: 25px; border: 1px dashed #2b537e; border-radius: 12px; background: rgba(11, 39, 69, .4); text-align: center; cursor: pointer; transition: .2s; }
.upload-zone:hover { border-color: #2489ff; background: rgba(22, 119, 255, .09); }
.upload-zone span { color: #55a6ff; font-size: 28px; }
.upload-zone b { margin-top: 5px; font-size: 12px; }
.upload-zone small { margin-top: 6px; color: var(--muted); font-size: 9px; }
.upload-progress { min-height: 15px; margin: 10px 0 0; font-size: 9px; }
.track-panel { margin-top: 16px; }
.track-list { padding: 0; text-align: left; }
.track-row { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.track-row > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #122d4d; color: #51a3ff; }
.track-row b, .track-row small { display: block; }
.track-row b { max-width: 620px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.track-row small, .track-row > span:nth-last-child(2) { color: var(--muted); font-size: 9px; }

@media (max-width: 760px) {
  .audience-detail-grid, .autodj-grid { grid-template-columns: 1fr; }
  .autodj-hero, .autodj-state { align-items: flex-start; flex-direction: column; }
  .autodj-settings { grid-template-columns: 1fr; }
  .track-row { grid-template-columns: 34px 1fr auto; }
  .track-row > span:nth-last-child(2) { display: none; }
}