:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --text: #172033;
  --muted: #6b7280;
  --border: #e5e7eb;
  --nav: #111827;
  --accent: #4338ca;
  --accent-dark: #3730a3;
  --ok: #166534;
  --ok-bg: #dcfce7;
  --warn: #92400e;
  --warn-bg: #fef3c7;
  --danger: #991b1b;
  --danger-bg: #fee2e2;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
.topbar { height: 64px; background: #fff; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:10; }
.brand { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.top-right { display:flex; gap:18px; align-items:center; font-size:14px; color:var(--muted); }
.layout { display:flex; min-height:calc(100vh - 64px); }
.sidebar { width:230px; background:var(--nav); padding:22px 14px; display:flex; flex-direction:column; gap:8px; }
.sidebar a, .sidebar span { padding:11px 12px; border-radius:9px; color:#e5e7eb; }
.sidebar a:hover { background:#1f2937; }
.sidebar .disabled { color:#6b7280; cursor:not-allowed; }
.content { flex:1; padding:30px; min-width:0; }
.content.full { max-width:none; width:100%; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
h1 { margin:0; font-size:30px; letter-spacing:-.03em; }
h2,h3 { margin-top:0; }
.muted { color:var(--muted); }
.card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.stat { background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; }
.stat span { color:var(--muted); font-size:13px; display:block; }
.stat strong { display:block; margin-top:6px; font-size:30px; }
.grid-2 { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; }
table { width:100%; border-collapse:collapse; }
th,td { padding:13px 10px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; }
th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
small { color:var(--muted); }
.badge { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; }
.badge.active { color:var(--ok); background:var(--ok-bg); }
.badge.suspended { color:var(--danger); background:var(--danger-bg); }
.actions { display:flex; gap:12px; align-items:center; }
form { margin:0; }
label { display:block; margin:14px 0 7px; font-size:13px; font-weight:700; }
input,select,textarea { width:100%; border:1px solid #d1d5db; border-radius:9px; padding:11px 12px; background:#fff; color:var(--text); font:inherit; }
input:focus,select:focus,textarea:focus { outline:2px solid #c7d2fe; border-color:#818cf8; }
button,.button { border:0; border-radius:9px; padding:10px 14px; font-weight:750; cursor:pointer; font:inherit; display:inline-flex; align-items:center; justify-content:center; }
.primary { background:var(--accent); color:#fff; }
.primary:hover { background:var(--accent-dark); }
.secondary { background:#eef2f7; color:var(--text); }
.wide { width:100%; margin-top:18px; }
.link-button { background:none; padding:0; color:var(--accent); }
.form-card { max-width:900px; }
.form-card.narrow { max-width:540px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.form-actions { margin-top:20px; display:flex; justify-content:flex-end; gap:10px; }
.flash { padding:12px 14px; border-radius:10px; margin-bottom:16px; }
.flash.success { color:var(--ok); background:var(--ok-bg); }
.flash.danger { color:var(--danger); background:var(--danger-bg); }
.login-wrap { min-height:calc(100vh - 124px); display:grid; place-items:center; }
.login-card { width:min(420px,92vw); padding:30px; }
.activity > div { padding:10px 0; border-bottom:1px solid var(--border); }
.activity strong,.activity small { display:block; }
.activity p { margin:4px 0 0; }
.customer-shell { max-width:980px; margin:0 auto; }
.customer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.eyebrow { font-size:11px; letter-spacing:.12em; font-weight:800; color:var(--muted); }
.player-card { text-align:center; background:#fff; border:1px solid var(--border); border-radius:18px; padding:38px 22px; }
.album-placeholder { width:120px; height:120px; display:grid; place-items:center; border-radius:24px; background:#eef2ff; color:var(--accent); font-size:52px; margin:0 auto 22px; }
.play-disabled { margin-top:18px; padding:14px 28px; background:#e5e7eb; color:#9ca3af; cursor:not-allowed; }
.customer-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.notice { padding:13px 15px; border-radius:10px; margin-bottom:18px; }
.notice.danger { background:var(--danger-bg); color:var(--danger); }

@media (max-width: 900px) {
  .sidebar { display:none; }
  .content { padding:20px; }
  .stats { grid-template-columns:1fr 1fr; }
  .grid-2,.customer-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .stats,.form-grid { grid-template-columns:1fr; }
  .top-right span { display:none; }
  .page-head { align-items:flex-start; flex-direction:column; }
}


code { background:#f3f4f6; padding:2px 6px; border-radius:5px; }
.notice.info { background:#eff6ff; color:#1e40af; }
.check-row { display:flex; gap:9px; align-items:center; margin-top:18px; }
.check-row input { width:auto; margin:0; }
.help-card { margin-top:18px; }
.help-card li { margin:8px 0; }
.channel-section { margin-bottom:20px; }
.channel-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.channel-card { border:1px solid var(--border); border-radius:13px; padding:17px; background:#fbfcfe; }
.channel-card-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.channel-card h3 { margin:3px 0 0; }
.now-song { min-height:52px; }
.mini-meta { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
@media (max-width: 1050px) { .channel-cards { grid-template-columns:1fr 1fr; } }
@media (max-width: 650px) { .channel-cards { grid-template-columns:1fr; } }

.form-section { margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
.section-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.section-title-row h3 { margin-bottom:4px; }
.check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0 18px; }
.channel-check { margin:0; padding:13px; display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); border-radius:10px; background:#fbfcfe; cursor:pointer; }
.channel-check input { width:auto; margin:3px 0 0; }
.channel-check span { display:flex; flex-direction:column; gap:3px; }
.button.compact { padding:7px 10px; font-size:13px; }
.back-link { display:inline-block; margin-bottom:8px; font-size:13px; }
.safe-note { margin-top:18px; }
.read-only-summary { margin-top:20px; padding:14px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; display:grid; gap:5px; }
.read-only-summary strong { margin-bottom:4px; }
.read-only-summary span { color:var(--muted); font-size:13px; }
.customer-channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.customer-channel-card.default-channel { outline:2px solid #c7d2fe; }
.empty-state { text-align:center; margin-top:18px; padding:30px; }
@media (max-width:700px) {
  .check-grid,.customer-channel-grid { grid-template-columns:1fr; }
}

.button.compact { padding:7px 10px; font-size:12px; }
.danger-button { background:#fee2e2; color:#991b1b; }
.playlist-edit-grid { align-items:start; }
.days-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.check-card { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--border); border-radius:9px; margin:0; }
.check-card input { width:auto; margin:0; }
.schedule-list { margin-top:20px; }
.schedule-cards { display:grid; gap:10px; }
.schedule-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid var(--border); border-radius:10px; }
.schedule-card p { margin:4px 0 0; }
@media (max-width:650px) {
  .days-grid { grid-template-columns:1fr; }
  .schedule-card { align-items:flex-start; }
}


/* v0.5 media management */
.page-actions,.row-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.media-toolbar { display:flex; gap:10px; align-items:flex-end; margin-bottom:18px; }
.media-toolbar .grow { flex:1; }
.media-title { display:flex; flex-direction:column; gap:2px; min-width:0; }
.media-title strong,.media-title small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.playlist-chips { display:flex; flex-wrap:wrap; gap:5px; }
.playlist-chip { display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; font-weight:700; }
.membership-yes { font-weight:800; color:var(--ok); }
.membership-no { color:var(--muted); }
.pagination-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; }
.media-note { margin-top:18px; }
@media (max-width:750px) {
  .media-toolbar { align-items:stretch; flex-direction:column; }
  .media-table .hide-mobile { display:none; }
}

/* v0.6 playlist editor */
.playlist-editor-topbar {
  display:flex;
  gap:18px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.preview-toggle {
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
}
.preview-toggle input {
  margin-top:3px;
  width:18px;
  height:18px;
}
.preview-toggle span {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.preview-toggle small {
  color:var(--muted);
}
.playlist-search {
  min-width:min(100%, 390px);
}
.playlist-search input {
  min-width:240px;
}
.media-breadcrumbs {
  margin:4px 0 12px;
}
.folder-up-row {
  margin-bottom:12px;
}
.folder-link,
.track-link {
  text-decoration:none;
}
.folder-link:hover,
.folder-track-link:hover strong {
  text-decoration:underline;
}
.track-link {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  cursor:pointer;
}
.track-link strong,
.track-link small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.song-track-link:hover strong {
  text-decoration:underline;
}
.bulk-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 0;
  border-top:1px solid var(--border);
}
.select-all-label {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-weight:700;
}
.select-all-label input,
.media-checkbox {
  width:18px;
  height:18px;
  cursor:pointer;
}
.select-col {
  width:42px;
  text-align:center;
}
.single-action-cell {
  width:90px;
  text-align:right;
}
@media (max-width:750px) {
  .playlist-editor-topbar {
    align-items:stretch;
  }
  .playlist-search,
  .playlist-search input {
    width:100%;
    min-width:0;
  }
  .bulk-toolbar {
    align-items:stretch;
  }
  .bulk-toolbar .row-actions {
    width:100%;
  }
}

/* v0.7 Phase 3A café player */
.channel-play-button {
  width:100%;
  margin-top:12px;
}
.phase3-player-shell {
  max-width:860px;
  margin:0 auto;
}
.live-player-card {
  text-align:center;
}
.player-album {
  margin-left:auto;
  margin-right:auto;
}
.player-main-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:220px;
  min-height:54px;
  border:0;
  border-radius:999px;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  background:var(--primary);
  color:#fff;
  margin:16px 0 12px;
}
.player-main-button.playing {
  opacity:.9;
}
.player-main-button:disabled {
  cursor:not-allowed;
  opacity:.55;
}
.player-session-meta {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  margin-bottom:16px;
}

/* v0.8 protected external player */
.channel-player-actions {
  display:grid;
  gap:8px;
  margin-top:12px;
}
.protected-link-box {
  display:flex;
  gap:8px;
  align-items:center;
  margin:12px 0;
}
.protected-link-box input {
  flex:1;
  min-width:0;
  font-family:monospace;
}
@media (max-width:750px) {
  .protected-link-box {
    align-items:stretch;
    flex-direction:column;
  }
}

/* DEVICE_SESSION_MANAGEMENT_V010 */
.device-page {
  width:min(1400px, calc(100% - 32px));
  margin:0 auto;
  padding:26px 0 48px;
}
.device-page-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.device-summary-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.device-summary-card {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  color:inherit;
  text-decoration:none;
}
.device-summary-card strong {
  font-size:30px;
  line-height:1;
}
.device-filter-card {
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(220px,2fr) auto;
  gap:12px;
  align-items:end;
  padding:16px;
  margin-bottom:16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
}
.device-filter-card label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:6px;
}
.device-filter-card select {
  width:100%;
}
.device-filter-actions {
  display:flex;
  gap:8px;
}
.device-table-card {
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.device-table-wrap {
  overflow-x:auto;
}
.device-table {
  width:100%;
  border-collapse:collapse;
  min-width:980px;
}
.device-table th,
.device-table td {
  padding:13px 14px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:middle;
}
.device-table th {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.device-table td small {
  display:block;
  margin-top:3px;
  opacity:.7;
}
.session-pill {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  background:#eef2f7;
}
.session-active { background:#dcfce7; color:#166534; }
.session-ready { background:#dbeafe; color:#1d4ed8; }
.session-stale { background:#fef3c7; color:#92400e; }
.session-ended,
.session-disconnected,
.session-reconnected,
.session-revoked { background:#f3f4f6; color:#4b5563; }
.session-failed { background:#fee2e2; color:#991b1b; }
.small-button {
  min-height:34px;
  padding:7px 10px;
  font-size:12px;
}
.button.danger {
  background:#b42318;
  color:#fff;
  border-color:#b42318;
}
.device-cafe-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.device-card-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.device-card-head h3 {
  margin:8px 0 0;
}
.device-details {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:18px 0 0;
}
.device-details div {
  padding:10px 0;
  border-top:1px solid #e5e7eb;
}
.device-details dt {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  opacity:.65;
}
.device-details dd {
  margin:5px 0 0;
  font-weight:600;
}
.device-limit-badge {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.device-limit-badge strong {
  font-size:28px;
}
.device-limit-badge span {
  font-size:12px;
  opacity:.65;
}
.device-management-entry {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:16px;
}
.empty-cell {
  text-align:center !important;
  padding:30px !important;
}
@media (max-width:800px) {
  .device-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .device-filter-card {
    grid-template-columns:1fr;
  }
  .device-cafe-grid {
    grid-template-columns:1fr;
  }
  .device-page-head,
  .device-management-entry {
    flex-direction:column;
  }
  .device-limit-badge {
    align-items:flex-start;
  }
}


/* PLAYER_POLISH_STYLE_V011 */
.player-polish-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:18px 0;
  padding:16px 18px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
}

.player-polish-status-area {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.player-polish-status-area strong {
  display:block;
  margin-bottom:3px;
}

.player-polish-status-area p {
  margin:0;
}

.player-polish-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  background:#eef2f7;
  color:#475569;
}

.player-polish-status[data-mode="success"] {
  background:#dcfce7;
  color:#166534;
}

.player-polish-status[data-mode="warning"] {
  background:#fef3c7;
  color:#92400e;
}

.player-polish-status[data-mode="danger"] {
  background:#fee2e2;
  color:#991b1b;
}

.player-polish-status[data-mode="info"] {
  background:#dbeafe;
  color:#1d4ed8;
}

.player-polish-status[data-mode="neutral"] {
  background:#f3f4f6;
  color:#4b5563;
}

.player-polish-actions {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

@media (max-width:720px) {
  .player-polish-card {
    flex-direction:column;
    align-items:stretch;
  }

  .player-polish-actions {
    width:100%;
  }

  .player-polish-actions .button {
    flex:1;
  }
}

:fullscreen .player-polish-card {
  margin-left:24px;
  margin-right:24px;
}

/* CAFE_BRANDING_V012 */
.cafe-logo-form-field {
  grid-column:1 / -1;
}

.cafe-logo-admin-preview {
  display:flex;
  align-items:center;
  gap:16px;
  margin:10px 0 12px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#f8fafc;
}

.cafe-logo-admin-preview img {
  width:96px;
  height:96px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  border:1px solid #e5e7eb;
  padding:6px;
}

.cafe-logo-remove {
  margin:0;
}

.cafe-logo-player-wrap {
  width:180px;
  height:180px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  background:#fff;
  border:1px solid #e5e7eb;
  padding:12px;
  overflow:hidden;
}

.cafe-logo-player {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

@media (max-width:600px) {
  .cafe-logo-player-wrap {
    width:150px;
    height:150px;
  }

  .cafe-logo-admin-preview {
    align-items:flex-start;
    flex-direction:column;
  }
}

/* CAFE_SCHEDULING_V013 */
.schedule-page {
  width:min(1200px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.schedule-status-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-bottom:16px;
}

.schedule-status-card h2 {
  margin:8px 0 6px;
}

.schedule-editor-card {
  margin-bottom:16px;
}

.schedule-days-grid {
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:8px;
  margin-top:8px;
}

.schedule-preset-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.schedule-enabled-check {
  min-height:44px;
}

.schedule-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.schedule-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
}

.schedule-row-disabled {
  opacity:.62;
}

.schedule-row-main {
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.schedule-row-main h3 {
  margin:0 0 3px;
}

.schedule-row-main p {
  margin:0;
}

.schedule-time {
  min-width:130px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.schedule-time span {
  opacity:.45;
  margin:0 4px;
}

.schedule-row-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
}

.schedule-row-actions form {
  margin:0;
}

.schedule-dashboard-entry {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:16px 0;
}

.schedule-dashboard-entry h3 {
  margin:5px 0;
}

@media (max-width:850px) {
  .schedule-days-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .schedule-status-grid {
    grid-template-columns:1fr;
  }

  .schedule-row {
    align-items:flex-start;
    flex-direction:column;
  }

  .schedule-row-actions {
    justify-content:flex-start;
  }

  .schedule-dashboard-entry {
    align-items:flex-start;
    flex-direction:column;
  }
}

/* DYNAMIC_SCHEDULED_STREAM_STYLE_V0142 */
.scheduled-stream-card {
  margin-top:18px;
}

.scheduled-stream-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.scheduled-stream-help {
  margin-top:12px;
  max-width:850px;
}

.scheduled-stream-note {
  margin:6px auto 10px;
  max-width:620px;
  font-size:14px;
}

.scheduled-stream-eyebrow {
  display:inline-block;
}

.scheduled-external-notice {
  margin-top:16px;
}

@media (max-width:620px) {
  .scheduled-stream-actions {
    flex-direction:column;
  }

  .scheduled-stream-actions form,
  .scheduled-stream-actions .button {
    width:100%;
  }
}

/* INLINE_DASHBOARD_PLAYER_STYLE_V0146 */
.inline-cafe-player {
  margin:16px 0;
  padding:16px;
}

.inline-cafe-player[hidden] {
  display:none !important;
}

.inline-player-head,
.inline-player-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.inline-player-head h3 {
  margin:4px 0 2px;
}

.inline-player-head p {
  margin:0;
}

.inline-player-live {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.inline-live-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#dc2626;
  box-shadow:0 0 0 4px rgba(220,38,38,.10);
}

#inline-dashboard-audio {
  display:block;
  width:100%;
  margin:14px 0 10px;
}

.schedule-dashboard-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

.schedule-dashboard-actions form {
  margin:0;
}

@media (max-width:760px) {
  .inline-player-head,
  .inline-player-foot {
    align-items:flex-start;
    flex-direction:column;
  }

  .schedule-dashboard-entry {
    align-items:stretch;
  }

  .schedule-dashboard-actions {
    width:100%;
    justify-content:stretch;
    flex-direction:column;
  }

  .schedule-dashboard-actions form,
  .schedule-dashboard-actions .button {
    width:100%;
  }
}

/* SUBSCRIPTION_MANAGEMENT_STYLE_V0150 */
.subscription-admin-page,
.subscription-edit-page {
  width:min(1220px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.subscription-summary-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.subscription-summary-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:15px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  color:inherit;
}

.subscription-summary-card strong {
  font-size:25px;
}

.subscription-filter-card {
  display:grid;
  grid-template-columns:2fr 1fr auto;
  align-items:end;
  gap:12px;
  margin-bottom:16px;
}

.subscription-filter-actions {
  display:flex;
  gap:8px;
}

.subscription-table-wrap {
  overflow:auto;
}

.subscription-table {
  min-width:900px;
}

.subscription-table td small {
  display:block;
  margin-top:4px;
}

.subscription-pill {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  background:#f3f4f6;
}

.subscription-state-active {
  border-color:#bbf7d0;
  background:#f0fdf4;
}

.subscription-state-trial {
  border-color:#bfdbfe;
  background:#eff6ff;
}

.subscription-state-expiring {
  border-color:#fde68a;
  background:#fffbeb;
}

.subscription-state-grace {
  border-color:#fed7aa;
  background:#fff7ed;
}

.subscription-state-expired,
.subscription-state-suspended {
  border-color:#fecaca;
  background:#fef2f2;
}

.subscription-cafe-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:14px 0 16px;
  padding:14px 16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
}

.subscription-cafe-banner strong {
  display:block;
  margin-top:4px;
  font-size:18px;
}

.subscription-cafe-banner p {
  margin:4px 0 0;
}

.subscription-status-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-bottom:16px;
}

.subscription-edit-card,
.subscription-quick-card {
  margin-bottom:16px;
}

.subscription-quick-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:12px;
}

.subscription-quick-actions form {
  margin:0;
}

.subscription-footnote {
  margin-top:12px;
}

@media (max-width:1000px) {
  .subscription-summary-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:700px) {
  .subscription-summary-grid,
  .subscription-status-grid {
    grid-template-columns:1fr;
  }

  .subscription-filter-card {
    grid-template-columns:1fr;
  }

  .subscription-filter-actions,
  .subscription-quick-actions {
    flex-direction:column;
  }

  .subscription-filter-actions .button,
  .subscription-quick-actions form,
  .subscription-quick-actions .button {
    width:100%;
  }

  .subscription-cafe-banner {
    align-items:flex-start;
    flex-direction:column;
  }
}

/* BUSINESS_OVERVIEW_STYLE_V0160 */
.business-overview-page {
  width:min(1240px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.business-summary-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.business-summary-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
}

.business-summary-card span {
  font-size:13px;
  font-weight:700;
}

.business-summary-card strong {
  font-size:28px;
  line-height:1;
}

.business-summary-card small {
  opacity:.72;
}

.business-summary-live {
  border-color:#bbf7d0;
  background:#f0fdf4;
}

.business-summary-warning {
  border-color:#fde68a;
  background:#fffbeb;
}

.business-summary-danger {
  border-color:#fecaca;
  background:#fef2f2;
}

.business-summary-trial {
  border-color:#bfdbfe;
  background:#eff6ff;
}

.business-two-column {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-bottom:16px;
}

.business-list {
  display:flex;
  flex-direction:column;
}

.business-list-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid #eef0f3;
}

.business-list-row:last-child {
  border-bottom:0;
}

.business-list-row strong,
.business-list-row small {
  display:block;
}

.business-list-row small {
  margin-top:3px;
  opacity:.72;
}

.business-row-meta {
  text-align:right;
  font-size:12px;
  opacity:.72;
}

.business-system-card {
  margin-bottom:16px;
}

.business-system-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.business-system-grid > div {
  padding:13px;
  border-radius:12px;
  background:#f7f8fa;
}

.business-system-grid span,
.business-system-grid strong {
  display:block;
}

.business-system-grid span {
  font-size:12px;
  opacity:.7;
  margin-bottom:5px;
}

.compact-empty {
  padding:16px 0;
}

@media (max-width:1050px) {
  .business-summary-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:760px) {
  .business-summary-grid,
  .business-two-column,
  .business-system-grid {
    grid-template-columns:1fr;
  }

  .business-list-row {
    align-items:flex-start;
    flex-direction:column;
  }

  .business-row-meta {
    text-align:left;
  }
}

/* CAFE_CONTROL_CENTER_STYLE_V0170 */
.onboarding-page,
.cafe-control-page {
  width:min(1220px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.onboarding-progress {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin-bottom:14px;
}

.onboarding-step-dot {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 10px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  font:inherit;
}

.onboarding-step-dot span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#eef0f4;
  font-weight:800;
}

.onboarding-step-dot.active {
  border-color:#b9c3ff;
  background:#f4f6ff;
}

.onboarding-step-dot.complete span {
  background:#dcfce7;
}

.onboarding-card {
  padding:22px;
}

.onboarding-step {
  display:none;
}

.onboarding-step.active {
  display:block;
}

.onboarding-step h2 {
  margin:6px 0 5px;
}

.onboarding-channel-grid {
  margin:14px 0 18px;
}

.onboarding-review {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:18px;
  padding:14px;
  border-radius:12px;
  background:#f7f8fa;
}

.onboarding-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid #edf0f3;
}

.onboarding-actions-right {
  display:flex;
  align-items:center;
  gap:8px;
}

.control-summary-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.control-summary-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:15px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
}

.control-summary-card > span {
  font-size:12px;
  font-weight:800;
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.control-summary-card strong {
  font-size:21px;
}

.control-summary-card small {
  opacity:.72;
}

.control-action-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.control-action-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:15px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  color:inherit;
  text-decoration:none;
}

.control-action-card:hover {
  border-color:#cbd1dc;
  transform:translateY(-1px);
}

.control-action-card strong {
  font-size:17px;
}

.control-action-card small {
  opacity:.72;
}

.control-two-column {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-bottom:16px;
}

.control-detail-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.control-detail-list > div {
  padding:12px;
  border-radius:11px;
  background:#f7f8fa;
}

.control-detail-list span,
.control-detail-list strong {
  display:block;
}

.control-detail-list span {
  margin-bottom:4px;
  font-size:12px;
  opacity:.68;
}

.control-notes {
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #edf0f3;
}

.control-channel-list {
  display:flex;
  flex-direction:column;
}

.control-channel-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid #eef0f3;
}

.control-channel-row:last-child {
  border-bottom:0;
}

@media (max-width:1000px) {
  .control-summary-grid,
  .control-action-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:720px) {
  .onboarding-progress {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .control-summary-grid,
  .control-action-grid,
  .control-two-column,
  .control-detail-list {
    grid-template-columns:1fr;
  }

  .onboarding-actions {
    align-items:stretch;
    flex-direction:column;
  }

  .onboarding-actions-right {
    width:100%;
    flex-direction:column;
  }

  .onboarding-actions .button,
  .onboarding-actions-right,
  .onboarding-actions-right .button {
    width:100%;
  }
}

/* NOTIFICATIONS_CENTER_STYLE_V0180 */
.notifications-page {
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.nav-notification-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  margin-left:5px;
  padding:0 6px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:11px;
  font-weight:800;
}

.notification-summary-grid {
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  margin-bottom:14px;
}

.notification-summary-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:15px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  color:inherit;
  text-decoration:none;
}

.notification-summary-card span {
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.75;
}

.notification-summary-card strong {
  font-size:26px;
}

.notification-summary-unread {
  border-color:#c7d2fe;
  background:#eef2ff;
}

.notification-severity-critical {
  border-color:#fecaca !important;
  background:#fef2f2 !important;
}

.notification-severity-warning {
  border-color:#fde68a !important;
  background:#fffbeb !important;
}

.notification-severity-info {
  border-color:#bfdbfe !important;
  background:#eff6ff !important;
}

.notification-filter-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.notification-filter-links {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.notification-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.notification-item {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:15px;
}

.notification-read {
  opacity:.72;
}

.notification-unread {
  box-shadow:0 4px 18px rgba(15,23,42,.06);
}

.notification-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  font-weight:900;
}

.notification-body h3 {
  margin:4px 0;
}

.notification-body p {
  margin:0 0 4px;
}

.notification-meta {
  display:flex;
  align-items:center;
  gap:8px;
}

.notification-new-dot {
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:10px;
  font-weight:900;
}

.notification-actions {
  display:flex;
  align-items:center;
  gap:7px;
}

.notification-actions form {
  margin:0;
}

.notification-help {
  margin-top:16px;
}

.cafe-notification-stack {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:14px 0 16px;
}

.cafe-notification-banner {
  padding:14px 16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
}

.cafe-notification-banner strong {
  display:block;
  margin:4px 0;
  font-size:18px;
}

.cafe-notification-banner p {
  margin:0;
}

@media (max-width:900px) {
  .notification-summary-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .notification-item {
    grid-template-columns:auto 1fr;
  }

  .notification-actions {
    grid-column:1 / -1;
    justify-content:flex-end;
  }
}

@media (max-width:600px) {
  .notification-summary-grid {
    grid-template-columns:1fr;
  }

  .notification-filter-row {
    align-items:flex-start;
    flex-direction:column;
  }

  .notification-item {
    grid-template-columns:1fr;
  }

  .notification-icon {
    display:none;
  }

  .notification-actions {
    grid-column:auto;
    width:100%;
    flex-direction:column;
  }

  .notification-actions,
  .notification-actions form,
  .notification-actions .button {
    width:100%;
  }
}

/* ANALYTICS_DASHBOARD_STYLE_V0190 */
.analytics-page {
  width:min(1240px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.analytics-filter-card {
  display:grid;
  grid-template-columns:1fr 1.5fr auto;
  align-items:end;
  gap:12px;
  margin-bottom:14px;
}

.analytics-filter-actions {
  display:flex;
  align-items:center;
  gap:8px;
}

.analytics-filter-notice {
  margin-bottom:14px;
}

.analytics-summary-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.analytics-summary-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
}

.analytics-summary-card span {
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.72;
}

.analytics-summary-card strong {
  font-size:27px;
  line-height:1.1;
}

.analytics-summary-card small {
  opacity:.7;
}

.analytics-two-column {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-bottom:16px;
}

.analytics-ranking-list {
  display:flex;
  flex-direction:column;
}

.analytics-ranking-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid #eef0f3;
}

.analytics-ranking-row:last-child {
  border-bottom:0;
}

.analytics-ranking-row strong,
.analytics-ranking-row small {
  display:block;
}

.analytics-ranking-row small {
  margin-top:3px;
  opacity:.7;
}

.analytics-ranking-value {
  min-width:95px;
  text-align:right;
}

.analytics-ranking-value strong,
.analytics-ranking-value span {
  display:block;
}

.analytics-ranking-value span {
  margin-top:3px;
  font-size:12px;
  opacity:.68;
}

.analytics-table-wrap {
  overflow:auto;
}

.analytics-table {
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}

.analytics-table th,
.analytics-table td {
  padding:10px 9px;
  text-align:left;
  border-bottom:1px solid #eef0f3;
  white-space:nowrap;
}

.analytics-table th {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.65;
}

.analytics-session-table {
  min-width:860px;
}

.analytics-note {
  margin-top:16px;
}

@media (max-width:900px) {
  .analytics-summary-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .analytics-two-column {
    grid-template-columns:1fr;
  }
}

@media (max-width:650px) {
  .analytics-filter-card,
  .analytics-summary-grid {
    grid-template-columns:1fr;
  }

  .analytics-filter-actions {
    flex-direction:column;
  }

  .analytics-filter-actions,
  .analytics-filter-actions .button {
    width:100%;
  }
}

/* CAFE_THEME_STYLE_V0200 */

/* Theme selector */
.cafe-theme-control {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
}

.cafe-theme-button {
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 13px;
  border:1px solid var(--theme-border, #d9dde5);
  border-radius:999px;
  background:var(--theme-surface, #ffffff);
  color:var(--theme-text, #1f2937);
  box-shadow:0 8px 28px rgba(15,23,42,.14);
  cursor:pointer;
  font:inherit;
  font-weight:700;
}

.cafe-theme-panel {
  position:absolute;
  right:0;
  bottom:52px;
  width:310px;
  padding:12px;
  border:1px solid var(--theme-border, #d9dde5);
  border-radius:16px;
  background:var(--theme-surface, #ffffff);
  color:var(--theme-text, #1f2937);
  box-shadow:0 18px 55px rgba(15,23,42,.20);
}

.cafe-theme-panel[hidden] {
  display:none !important;
}

.cafe-theme-panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 4px 10px;
}

.cafe-theme-panel-head strong {
  display:block;
  margin-top:3px;
}

.cafe-theme-close {
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:var(--theme-muted-surface, #f3f4f6);
  color:var(--theme-text, #1f2937);
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

.cafe-theme-option {
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:11px;
  width:100%;
  margin-top:6px;
  padding:10px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  font:inherit;
}

.cafe-theme-option:hover {
  background:var(--theme-muted-surface, #f6f7f9);
}

.cafe-theme-option.active {
  border-color:var(--theme-accent, #4f46e5);
  background:var(--theme-accent-soft, #eef2ff);
}

.cafe-theme-option strong,
.cafe-theme-option small {
  display:block;
}

.cafe-theme-option small {
  margin-top:2px;
  opacity:.68;
}

.cafe-theme-preview {
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.18);
}

.cafe-theme-preview-default {
  background:linear-gradient(135deg,#ffffff 50%,#4f46e5 50%);
}

.cafe-theme-preview-dark {
  background:linear-gradient(135deg,#111827 50%,#374151 50%);
}

.cafe-theme-preview-espresso {
  background:linear-gradient(135deg,#2b2118 50%,#8b5e3c 50%);
}

.cafe-theme-preview-warm {
  background:linear-gradient(135deg,#fff8ec 50%,#bd7b46 50%);
}

.cafe-theme-preview-minimal {
  background:linear-gradient(135deg,#fafafa 50%,#b8bec7 50%);
}

/* Shared theme variables */
html {
  --theme-page:#f3f4f8;
  --theme-surface:#ffffff;
  --theme-surface-2:#f7f8fa;
  --theme-muted-surface:#f3f4f6;
  --theme-text:#20232a;
  --theme-muted:#6b7280;
  --theme-border:#e5e7eb;
  --theme-accent:#3539dd;
  --theme-accent-soft:#eef2ff;
  --theme-input:#ffffff;
  --theme-shadow:rgba(15,23,42,.08);
}

/* DARK */
html[data-cafe-theme="dark"] {
  color-scheme:dark;
  --theme-page:#0b0f16;
  --theme-surface:#131923;
  --theme-surface-2:#181f2b;
  --theme-muted-surface:#202938;
  --theme-text:#eef2f7;
  --theme-muted:#a9b2c1;
  --theme-border:#2b3545;
  --theme-accent:#7c83ff;
  --theme-accent-soft:#262b55;
  --theme-input:#171d28;
  --theme-shadow:rgba(0,0,0,.35);
}

/* ESPRESSO */
html[data-cafe-theme="espresso"] {
  color-scheme:dark;
  --theme-page:#17120f;
  --theme-surface:#231b16;
  --theme-surface-2:#2b211a;
  --theme-muted-surface:#35281f;
  --theme-text:#f8eee4;
  --theme-muted:#cbb9a8;
  --theme-border:#4b382b;
  --theme-accent:#c88a55;
  --theme-accent-soft:#493223;
  --theme-input:#2a2019;
  --theme-shadow:rgba(0,0,0,.34);
}

/* WARM CAFÉ */
html[data-cafe-theme="warm"] {
  color-scheme:light;
  --theme-page:#f6efe5;
  --theme-surface:#fffaf3;
  --theme-surface-2:#f7eddf;
  --theme-muted-surface:#efe1d0;
  --theme-text:#3b2a20;
  --theme-muted:#756052;
  --theme-border:#dfcdb9;
  --theme-accent:#9a633b;
  --theme-accent-soft:#f1dfcc;
  --theme-input:#fffdf9;
  --theme-shadow:rgba(82,52,32,.10);
}

/* MINIMAL LIGHT */
html[data-cafe-theme="minimal"] {
  color-scheme:light;
  --theme-page:#f7f7f7;
  --theme-surface:#ffffff;
  --theme-surface-2:#fafafa;
  --theme-muted-surface:#f1f1f1;
  --theme-text:#191919;
  --theme-muted:#727272;
  --theme-border:#dedede;
  --theme-accent:#444b55;
  --theme-accent-soft:#eceef1;
  --theme-input:#ffffff;
  --theme-shadow:rgba(0,0,0,.06);
}

/* Apply palette broadly without changing layout */
html[data-cafe-theme] body {
  background:var(--theme-page) !important;
  color:var(--theme-text) !important;
}

html[data-cafe-theme] .card,
html[data-cafe-theme] .customer-channel-card,
html[data-cafe-theme] .business-summary-card,
html[data-cafe-theme] .analytics-summary-card,
html[data-cafe-theme] .notification-summary-card,
html[data-cafe-theme] .subscription-summary-card,
html[data-cafe-theme] .control-summary-card,
html[data-cafe-theme] .control-action-card,
html[data-cafe-theme] .inline-cafe-player,
html[data-cafe-theme] .subscription-filter-card,
html[data-cafe-theme] .analytics-filter-card {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
  box-shadow:0 6px 20px var(--theme-shadow);
}

html[data-cafe-theme] input,
html[data-cafe-theme] select,
html[data-cafe-theme] textarea {
  background:var(--theme-input) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

html[data-cafe-theme] input::placeholder,
html[data-cafe-theme] textarea::placeholder {
  color:var(--theme-muted) !important;
}

html[data-cafe-theme] .muted,
html[data-cafe-theme] small {
  color:var(--theme-muted) !important;
}

html[data-cafe-theme] a:not(.button) {
  color:var(--theme-accent);
}

html[data-cafe-theme] .button.primary {
  background:var(--theme-accent) !important;
  border-color:var(--theme-accent) !important;
  color:#fff !important;
}

html[data-cafe-theme] .button.secondary {
  background:var(--theme-surface-2) !important;
  border-color:var(--theme-border) !important;
  color:var(--theme-text) !important;
}

html[data-cafe-theme] table,
html[data-cafe-theme] th,
html[data-cafe-theme] td {
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

html[data-cafe-theme] .business-list-row,
html[data-cafe-theme] .analytics-ranking-row,
html[data-cafe-theme] .control-channel-row {
  border-color:var(--theme-border) !important;
}

html[data-cafe-theme] .business-system-grid > div,
html[data-cafe-theme] .control-detail-list > div,
html[data-cafe-theme] .onboarding-review {
  background:var(--theme-surface-2) !important;
  color:var(--theme-text) !important;
}

html[data-cafe-theme] .sidebar,
html[data-cafe-theme] nav,
html[data-cafe-theme] header {
  border-color:var(--theme-border) !important;
}

html[data-cafe-theme] .sidebar {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
}

html[data-cafe-theme] .sidebar a {
  color:var(--theme-text);
}

html[data-cafe-theme] .sidebar a:hover {
  background:var(--theme-muted-surface);
}

html[data-cafe-theme] audio {
  color-scheme:inherit;
}

html[data-cafe-theme] .notice.info {
  background:var(--theme-accent-soft) !important;
  border-color:var(--theme-border) !important;
  color:var(--theme-text) !important;
}

@media (max-width:640px) {
  .cafe-theme-control {
    right:12px;
    bottom:12px;
  }

  .cafe-theme-button span {
    display:none;
  }

  .cafe-theme-panel {
    width:min(310px, calc(100vw - 24px));
  }
}

/* CAFE_DASHBOARD_THEME_FIX_V0201 */

/*
 * v0.20.0 intentionally avoided changing layout.
 * v0.20.1 extends the palette to customer dashboard surfaces
 * that still had hard-coded white/light backgrounds.
 */

html[data-cafe-theme] .customer-hero,
html[data-cafe-theme] .cafe-hero,
html[data-cafe-theme] .dashboard-hero,
html[data-cafe-theme] .customer-dashboard-hero,
html[data-cafe-theme] .cafe-dashboard-hero,
html[data-cafe-theme] .welcome-card,
html[data-cafe-theme] .profile-card,
html[data-cafe-theme] .cafe-profile-card,
html[data-cafe-theme] .customer-profile-card,
html[data-cafe-theme] .logo-card,
html[data-cafe-theme] .cafe-logo-card,
html[data-cafe-theme] .customer-header,
html[data-cafe-theme] .cafe-header,
html[data-cafe-theme] .dashboard-header-card,
html[data-cafe-theme] .customer-info-card,
html[data-cafe-theme] .cafe-info-card,
html[data-cafe-theme] .service-card,
html[data-cafe-theme] .channel-count-card,
html[data-cafe-theme] .customer-stat-card,
html[data-cafe-theme] .cafe-stat-card,
html[data-cafe-theme] .dashboard-stat-card,
html[data-cafe-theme] .summary-card,
html[data-cafe-theme] .customer-summary-card,
html[data-cafe-theme] .cafe-summary-card {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
  box-shadow:0 6px 20px var(--theme-shadow) !important;
}

html[data-cafe-theme] .customer-hero *,
html[data-cafe-theme] .cafe-hero *,
html[data-cafe-theme] .dashboard-hero *,
html[data-cafe-theme] .customer-dashboard-hero *,
html[data-cafe-theme] .cafe-dashboard-hero *,
html[data-cafe-theme] .customer-header *,
html[data-cafe-theme] .cafe-header *,
html[data-cafe-theme] .dashboard-header-card *,
html[data-cafe-theme] .customer-info-card *,
html[data-cafe-theme] .cafe-info-card *,
html[data-cafe-theme] .service-card *,
html[data-cafe-theme] .channel-count-card * {
  border-color:var(--theme-border);
}

html[data-cafe-theme] .customer-hero h1,
html[data-cafe-theme] .customer-hero h2,
html[data-cafe-theme] .cafe-hero h1,
html[data-cafe-theme] .cafe-hero h2,
html[data-cafe-theme] .dashboard-hero h1,
html[data-cafe-theme] .dashboard-hero h2,
html[data-cafe-theme] .customer-header h1,
html[data-cafe-theme] .cafe-header h1,
html[data-cafe-theme] .dashboard-header-card h1,
html[data-cafe-theme] .customer-info-card strong,
html[data-cafe-theme] .cafe-info-card strong,
html[data-cafe-theme] .service-card strong,
html[data-cafe-theme] .channel-count-card strong {
  color:var(--theme-text) !important;
}

html[data-cafe-theme] .customer-hero p,
html[data-cafe-theme] .cafe-hero p,
html[data-cafe-theme] .dashboard-hero p,
html[data-cafe-theme] .customer-header p,
html[data-cafe-theme] .cafe-header p,
html[data-cafe-theme] .dashboard-header-card p,
html[data-cafe-theme] .customer-info-card span,
html[data-cafe-theme] .cafe-info-card span,
html[data-cafe-theme] .service-card span,
html[data-cafe-theme] .channel-count-card span {
  color:var(--theme-muted) !important;
}

/* Logo containers should blend with the selected theme. */
html[data-cafe-theme] .customer-logo,
html[data-cafe-theme] .cafe-logo,
html[data-cafe-theme] .logo-wrap,
html[data-cafe-theme] .logo-box,
html[data-cafe-theme] .cafe-logo-wrap,
html[data-cafe-theme] .customer-logo-wrap,
html[data-cafe-theme] .cafe-branding,
html[data-cafe-theme] .customer-branding {
  background:var(--theme-surface-2) !important;
  border-color:var(--theme-border) !important;
}

/* Service/subscription notices */
html[data-cafe-theme] .cafe-notification-banner,
html[data-cafe-theme] .cafe-notification-stack .notice,
html[data-cafe-theme] .service-notice,
html[data-cafe-theme] .subscription-banner,
html[data-cafe-theme] .subscription-notice,
html[data-cafe-theme] .customer-notice,
html[data-cafe-theme] .dashboard-notice {
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* Keep warnings visible but remove uncomfortable pure-white surfaces. */
html[data-cafe-theme="dark"] .cafe-notification-banner.notification-severity-warning,
html[data-cafe-theme="dark"] .service-notice,
html[data-cafe-theme="dark"] .subscription-banner,
html[data-cafe-theme="dark"] .subscription-notice {
  background:#2b2616 !important;
  border-color:#5d5127 !important;
  color:#f4e7ad !important;
}

html[data-cafe-theme="espresso"] .cafe-notification-banner.notification-severity-warning,
html[data-cafe-theme="espresso"] .service-notice,
html[data-cafe-theme="espresso"] .subscription-banner,
html[data-cafe-theme="espresso"] .subscription-notice {
  background:#35271a !important;
  border-color:#665038 !important;
  color:#f2d9b8 !important;
}

html[data-cafe-theme="warm"] .cafe-notification-banner.notification-severity-warning,
html[data-cafe-theme="warm"] .service-notice,
html[data-cafe-theme="warm"] .subscription-banner,
html[data-cafe-theme="warm"] .subscription-notice {
  background:#f3e4c9 !important;
  border-color:#d3b987 !important;
  color:#543a21 !important;
}

html[data-cafe-theme="minimal"] .cafe-notification-banner.notification-severity-warning,
html[data-cafe-theme="minimal"] .service-notice,
html[data-cafe-theme="minimal"] .subscription-banner,
html[data-cafe-theme="minimal"] .subscription-notice {
  background:#f0f0f0 !important;
  border-color:#d0d0d0 !important;
  color:#282828 !important;
}

/* Critical service states remain strong but theme-compatible. */
html[data-cafe-theme="dark"] .notification-severity-critical,
html[data-cafe-theme="espresso"] .notification-severity-critical {
  background:#3a1f22 !important;
  border-color:#6f343b !important;
  color:#ffd6da !important;
}

/*
 * Generic customer-dashboard fallback:
 * only inside the café dashboard main area, not global admin UI.
 */
html[data-cafe-theme] .customer-dashboard .card,
html[data-cafe-theme] .cafe-dashboard .card,
html[data-cafe-theme] main.customer-dashboard > section,
html[data-cafe-theme] main.cafe-dashboard > section {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

html[data-cafe-theme] .customer-dashboard [style*="background: white"],
html[data-cafe-theme] .customer-dashboard [style*="background:#fff"],
html[data-cafe-theme] .customer-dashboard [style*="background: #fff"],
html[data-cafe-theme] .cafe-dashboard [style*="background: white"],
html[data-cafe-theme] .cafe-dashboard [style*="background:#fff"],
html[data-cafe-theme] .cafe-dashboard [style*="background: #fff"] {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
}

/* The dashboard's first visual container is often the branding/profile area. */
html[data-cafe-theme] main .customer-dashboard:first-child,
html[data-cafe-theme] main .cafe-dashboard:first-child {
  color:var(--theme-text) !important;
}

/* CAFE_DASHBOARD_FULL_THEME_V0202 */

/*
 * Scoped customer-dashboard theming.
 * This deliberately targets the dashboard only, so admin UI is unaffected.
 */
html[data-cafe-theme] .cafe-dashboard-theme-scope {
  color:var(--theme-text) !important;
}

html[data-cafe-theme] .cafe-dashboard-theme-scope > div,
html[data-cafe-theme] .cafe-dashboard-theme-scope > section,
html[data-cafe-theme] .cafe-dashboard-theme-scope > article {
  border-color:var(--theme-border);
}

/*
 * Card-like / hero-like customer surfaces.
 * Broad on purpose, but safely scoped to the café dashboard.
 */
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="card"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="hero"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="panel"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="summary"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="profile"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="channel"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="branding"] {
  background-color:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/*
 * Nested information areas should use the secondary surface rather
 * than returning to white.
 */
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="card"] [class*="meta"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="card"] [class*="info"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="hero"] [class*="info"],
html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="summary"] [class*="item"] {
  background-color:var(--theme-surface-2) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/*
 * Covers explicit white background declarations in the current customer
 * dashboard without affecting images themselves.
 */
html[data-cafe-theme] .cafe-dashboard-theme-scope div[style*="background: white"],
html[data-cafe-theme] .cafe-dashboard-theme-scope section[style*="background: white"],
html[data-cafe-theme] .cafe-dashboard-theme-scope article[style*="background: white"],
html[data-cafe-theme] .cafe-dashboard-theme-scope div[style*="background:#fff"],
html[data-cafe-theme] .cafe-dashboard-theme-scope section[style*="background:#fff"],
html[data-cafe-theme] .cafe-dashboard-theme-scope article[style*="background:#fff"],
html[data-cafe-theme] .cafe-dashboard-theme-scope div[style*="background: #fff"],
html[data-cafe-theme] .cafe-dashboard-theme-scope section[style*="background: #fff"],
html[data-cafe-theme] .cafe-dashboard-theme-scope article[style*="background: #fff"] {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* Typography in the customer hero/profile/channel area */
html[data-cafe-theme] .cafe-dashboard-theme-scope h1,
html[data-cafe-theme] .cafe-dashboard-theme-scope h2,
html[data-cafe-theme] .cafe-dashboard-theme-scope h3,
html[data-cafe-theme] .cafe-dashboard-theme-scope h4,
html[data-cafe-theme] .cafe-dashboard-theme-scope strong {
  color:var(--theme-text) !important;
}

html[data-cafe-theme] .cafe-dashboard-theme-scope p,
html[data-cafe-theme] .cafe-dashboard-theme-scope small,
html[data-cafe-theme] .cafe-dashboard-theme-scope .muted {
  color:var(--theme-muted) !important;
}

/*
 * Service notices keep their semantic warning colors.
 * Must come after the broad card/channel selectors above.
 */
html[data-cafe-theme="dark"] .cafe-dashboard-theme-scope .cafe-notification-banner.notification-severity-warning {
  background:#2b2616 !important;
  border-color:#5d5127 !important;
  color:#f4e7ad !important;
}

html[data-cafe-theme="espresso"] .cafe-dashboard-theme-scope .cafe-notification-banner.notification-severity-warning {
  background:#35271a !important;
  border-color:#665038 !important;
  color:#f2d9b8 !important;
}

html[data-cafe-theme="warm"] .cafe-dashboard-theme-scope .cafe-notification-banner.notification-severity-warning {
  background:#f3e4c9 !important;
  border-color:#d3b987 !important;
  color:#543a21 !important;
}

html[data-cafe-theme="minimal"] .cafe-dashboard-theme-scope .cafe-notification-banner.notification-severity-warning {
  background:#f0f0f0 !important;
  border-color:#d0d0d0 !important;
  color:#282828 !important;
}

html[data-cafe-theme="dark"] .cafe-dashboard-theme-scope .cafe-notification-banner.notification-severity-warning *,
html[data-cafe-theme="espresso"] .cafe-dashboard-theme-scope .cafe-notification-banner.notification-severity-warning *,
html[data-cafe-theme="warm"] .cafe-dashboard-theme-scope .cafe-notification-banner.notification-severity-warning *,
html[data-cafe-theme="minimal"] .cafe-dashboard-theme-scope .cafe-notification-banner.notification-severity-warning * {
  color:inherit !important;
}

/*
 * Logo image itself is left untouched.
 * Only its frame/container follows the theme.
 */
html[data-cafe-theme] .cafe-dashboard-theme-scope img {
  color-scheme:normal;
}

html[data-cafe-theme] .cafe-dashboard-theme-scope [class*="logo"]:not(img) {
  background-color:var(--theme-surface-2) !important;
  border-color:var(--theme-border) !important;
}

/* ADMIN_THEME_COMPLETENESS_V0203 */

html[data-cafe-theme] body[data-admin-role="1"] {
  background:var(--theme-page) !important;
  color:var(--theme-text) !important;
}

/* Top account / name / logout area */
html[data-cafe-theme] body[data-admin-role="1"] .topbar,
html[data-cafe-theme] body[data-admin-role="1"] .top-bar,
html[data-cafe-theme] body[data-admin-role="1"] .app-header,
html[data-cafe-theme] body[data-admin-role="1"] .header-user,
html[data-cafe-theme] body[data-admin-role="1"] .user-menu,
html[data-cafe-theme] body[data-admin-role="1"] .user-card,
html[data-cafe-theme] body[data-admin-role="1"] .account-card,
html[data-cafe-theme] body[data-admin-role="1"] .profile-menu,
html[data-cafe-theme] body[data-admin-role="1"] .navbar-user,
html[data-cafe-theme] body[data-admin-role="1"] header {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* Generic admin cards */
html[data-cafe-theme] body[data-admin-role="1"] main .card,
html[data-cafe-theme] body[data-admin-role="1"] main [class*="card"],
html[data-cafe-theme] body[data-admin-role="1"] main [class*="panel"],
html[data-cafe-theme] body[data-admin-role="1"] main [class*="tile"],
html[data-cafe-theme] body[data-admin-role="1"] main [class*="stat"],
html[data-cafe-theme] body[data-admin-role="1"] main [class*="summary"],
html[data-cafe-theme] body[data-admin-role="1"] main [class*="metric"],
html[data-cafe-theme] body[data-admin-role="1"] main [class*="kpi"] {
  background-color:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
  box-shadow:0 6px 20px var(--theme-shadow) !important;
}

/* Overview / subscription cards */
html[data-cafe-theme] body[data-admin-role="1"] .business-list-row,
html[data-cafe-theme] body[data-admin-role="1"] .subscription-card,
html[data-cafe-theme] body[data-admin-role="1"] .subscription-row,
html[data-cafe-theme] body[data-admin-role="1"] .subscription-cafe-card,
html[data-cafe-theme] body[data-admin-role="1"] .subscription-item,
html[data-cafe-theme] body[data-admin-role="1"] [class*="subscription"] {
  background-color:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* Expiring semantic state */
html[data-cafe-theme="dark"] body[data-admin-role="1"] .subscription-state-expiring,
html[data-cafe-theme="dark"] body[data-admin-role="1"] .badge.expiring,
html[data-cafe-theme="dark"] body[data-admin-role="1"] .status-expiring {
  background:#2b2616 !important;
  color:#f4e7ad !important;
  border-color:#5d5127 !important;
}

html[data-cafe-theme="espresso"] body[data-admin-role="1"] .subscription-state-expiring,
html[data-cafe-theme="espresso"] body[data-admin-role="1"] .badge.expiring,
html[data-cafe-theme="espresso"] body[data-admin-role="1"] .status-expiring {
  background:#35271a !important;
  color:#f2d9b8 !important;
  border-color:#665038 !important;
}

/* Music Channels / AzuraCast station cards */
html[data-cafe-theme] body[data-admin-role="1"] .channel-card,
html[data-cafe-theme] body[data-admin-role="1"] .station-card,
html[data-cafe-theme] body[data-admin-role="1"] .azuracast-card,
html[data-cafe-theme] body[data-admin-role="1"] .music-channel-card,
html[data-cafe-theme] body[data-admin-role="1"] [class*="station"],
html[data-cafe-theme] body[data-admin-role="1"] [class*="channel"] {
  background-color:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* AzuraCast instruction/help blocks */
html[data-cafe-theme] body[data-admin-role="1"] .help,
html[data-cafe-theme] body[data-admin-role="1"] .help-text,
html[data-cafe-theme] body[data-admin-role="1"] .info-box,
html[data-cafe-theme] body[data-admin-role="1"] .instruction,
html[data-cafe-theme] body[data-admin-role="1"] .instructions,
html[data-cafe-theme] body[data-admin-role="1"] .azuracast-help,
html[data-cafe-theme] body[data-admin-role="1"] .notice.info {
  background:var(--theme-surface-2) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

html[data-cafe-theme] body[data-admin-role="1"] .help *,
html[data-cafe-theme] body[data-admin-role="1"] .help-text *,
html[data-cafe-theme] body[data-admin-role="1"] .info-box *,
html[data-cafe-theme] body[data-admin-role="1"] .instruction *,
html[data-cafe-theme] body[data-admin-role="1"] .instructions *,
html[data-cafe-theme] body[data-admin-role="1"] .azuracast-help * {
  color:inherit !important;
}

/* Devices & Sessions */
html[data-cafe-theme] body[data-admin-role="1"] .device-card,
html[data-cafe-theme] body[data-admin-role="1"] .session-card,
html[data-cafe-theme] body[data-admin-role="1"] .devices-card,
html[data-cafe-theme] body[data-admin-role="1"] .sessions-card,
html[data-cafe-theme] body[data-admin-role="1"] .device-row,
html[data-cafe-theme] body[data-admin-role="1"] .session-row,
html[data-cafe-theme] body[data-admin-role="1"] [class*="device"],
html[data-cafe-theme] body[data-admin-role="1"] [class*="session"] {
  background-color:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* Tables */
html[data-cafe-theme] body[data-admin-role="1"] table,
html[data-cafe-theme] body[data-admin-role="1"] th,
html[data-cafe-theme] body[data-admin-role="1"] td {
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

html[data-cafe-theme] body[data-admin-role="1"] thead {
  background:var(--theme-surface-2) !important;
}

/* Forms */
html[data-cafe-theme] body[data-admin-role="1"] input,
html[data-cafe-theme] body[data-admin-role="1"] select,
html[data-cafe-theme] body[data-admin-role="1"] textarea {
  background:var(--theme-input) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* Text */
html[data-cafe-theme] body[data-admin-role="1"] main h1,
html[data-cafe-theme] body[data-admin-role="1"] main h2,
html[data-cafe-theme] body[data-admin-role="1"] main h3,
html[data-cafe-theme] body[data-admin-role="1"] main h4,
html[data-cafe-theme] body[data-admin-role="1"] main strong {
  color:var(--theme-text) !important;
}

html[data-cafe-theme] body[data-admin-role="1"] main p,
html[data-cafe-theme] body[data-admin-role="1"] main small,
html[data-cafe-theme] body[data-admin-role="1"] main .muted {
  color:var(--theme-muted) !important;
}

/* Old hard-coded white surfaces in admin main */
html[data-cafe-theme] body[data-admin-role="1"] main div[style*="background: white"],
html[data-cafe-theme] body[data-admin-role="1"] main section[style*="background: white"],
html[data-cafe-theme] body[data-admin-role="1"] main article[style*="background: white"],
html[data-cafe-theme] body[data-admin-role="1"] main div[style*="background:#fff"],
html[data-cafe-theme] body[data-admin-role="1"] main section[style*="background:#fff"],
html[data-cafe-theme] body[data-admin-role="1"] main article[style*="background:#fff"],
html[data-cafe-theme] body[data-admin-role="1"] main div[style*="background: #fff"],
html[data-cafe-theme] body[data-admin-role="1"] main section[style*="background: #fff"],
html[data-cafe-theme] body[data-admin-role="1"] main article[style*="background: #fff"] {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* CUSTOMER_TOPBAR_THEME_V0204 */

/*
 * Customer-only top account/header theming.
 * Admin rules remain separate.
 */
html[data-cafe-theme] body[data-customer-role="1"] header,
html[data-cafe-theme] body[data-customer-role="1"] .topbar,
html[data-cafe-theme] body[data-customer-role="1"] .top-bar,
html[data-cafe-theme] body[data-customer-role="1"] .app-header,
html[data-cafe-theme] body[data-customer-role="1"] .customer-header,
html[data-cafe-theme] body[data-customer-role="1"] .cafe-header,
html[data-cafe-theme] body[data-customer-role="1"] .header-user,
html[data-cafe-theme] body[data-customer-role="1"] .user-menu,
html[data-cafe-theme] body[data-customer-role="1"] .user-card,
html[data-cafe-theme] body[data-customer-role="1"] .account-card,
html[data-cafe-theme] body[data-customer-role="1"] .profile-menu,
html[data-cafe-theme] body[data-customer-role="1"] .navbar-user,
html[data-cafe-theme] body[data-customer-role="1"] .user-info,
html[data-cafe-theme] body[data-customer-role="1"] .account-info {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
  box-shadow:0 4px 16px var(--theme-shadow) !important;
}

html[data-cafe-theme] body[data-customer-role="1"] header *,
html[data-cafe-theme] body[data-customer-role="1"] .topbar *,
html[data-cafe-theme] body[data-customer-role="1"] .top-bar *,
html[data-cafe-theme] body[data-customer-role="1"] .app-header *,
html[data-cafe-theme] body[data-customer-role="1"] .header-user *,
html[data-cafe-theme] body[data-customer-role="1"] .user-menu *,
html[data-cafe-theme] body[data-customer-role="1"] .user-card *,
html[data-cafe-theme] body[data-customer-role="1"] .account-card * {
  border-color:var(--theme-border) !important;
}

/* Customer name / email / role */
html[data-cafe-theme] body[data-customer-role="1"] header strong,
html[data-cafe-theme] body[data-customer-role="1"] header b,
html[data-cafe-theme] body[data-customer-role="1"] .user-card strong,
html[data-cafe-theme] body[data-customer-role="1"] .account-card strong,
html[data-cafe-theme] body[data-customer-role="1"] .user-info strong,
html[data-cafe-theme] body[data-customer-role="1"] .account-info strong {
  color:var(--theme-text) !important;
}

html[data-cafe-theme] body[data-customer-role="1"] header small,
html[data-cafe-theme] body[data-customer-role="1"] header span,
html[data-cafe-theme] body[data-customer-role="1"] .user-card small,
html[data-cafe-theme] body[data-customer-role="1"] .account-card small,
html[data-cafe-theme] body[data-customer-role="1"] .user-info small,
html[data-cafe-theme] body[data-customer-role="1"] .account-info small {
  color:var(--theme-muted) !important;
}

/* Logout / account buttons */
html[data-cafe-theme] body[data-customer-role="1"] header .button.secondary,
html[data-cafe-theme] body[data-customer-role="1"] header button,
html[data-cafe-theme] body[data-customer-role="1"] .user-card button,
html[data-cafe-theme] body[data-customer-role="1"] .account-card button,
html[data-cafe-theme] body[data-customer-role="1"] .logout-button,
html[data-cafe-theme] body[data-customer-role="1"] .logout-link {
  background:var(--theme-surface-2) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* Hard-coded white fallback in customer top area */
html[data-cafe-theme] body[data-customer-role="1"] header div[style*="background: white"],
html[data-cafe-theme] body[data-customer-role="1"] header div[style*="background:#fff"],
html[data-cafe-theme] body[data-customer-role="1"] header div[style*="background: #fff"],
html[data-cafe-theme] body[data-customer-role="1"] .topbar div[style*="background: white"],
html[data-cafe-theme] body[data-customer-role="1"] .topbar div[style*="background:#fff"],
html[data-cafe-theme] body[data-customer-role="1"] .topbar div[style*="background: #fff"] {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

/* CAFE_LANGUAGE_STYLE_V0210 */

.cafe-language-control {
  position:fixed;
  right:18px;
  bottom:72px;
  z-index:9999;
}

.cafe-language-button {
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 13px;
  border:1px solid var(--theme-border, #d9dde5);
  border-radius:999px;
  background:var(--theme-surface, #ffffff);
  color:var(--theme-text, #1f2937);
  box-shadow:0 8px 28px rgba(15,23,42,.14);
  cursor:pointer;
  font:inherit;
  font-weight:800;
}

.cafe-language-panel {
  position:absolute;
  right:0;
  bottom:52px;
  width:280px;
  padding:12px;
  border:1px solid var(--theme-border, #d9dde5);
  border-radius:16px;
  background:var(--theme-surface, #ffffff);
  color:var(--theme-text, #1f2937);
  box-shadow:0 18px 55px rgba(15,23,42,.20);
}

.cafe-language-panel[hidden] {
  display:none !important;
}

.cafe-language-panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 4px 10px;
}

.cafe-language-panel-head strong {
  display:block;
  margin-top:3px;
}

.cafe-language-close {
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:var(--theme-muted-surface, #f3f4f6);
  color:var(--theme-text, #1f2937);
  cursor:pointer;
  font-size:22px;
}

.cafe-language-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin-top:6px;
  padding:11px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  font:inherit;
}

.cafe-language-option:hover {
  background:var(--theme-muted-surface, #f6f7f9);
}

.cafe-language-option.active {
  border-color:var(--theme-accent, #4f46e5);
  background:var(--theme-accent-soft, #eef2ff);
}

.cafe-language-option strong,
.cafe-language-option small {
  display:block;
}

.cafe-language-option small {
  opacity:.68;
}

html[data-cafe-theme] .cafe-language-button,
html[data-cafe-theme] .cafe-language-panel {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

@media (max-width:640px) {
  .cafe-language-control {
    right:12px;
    bottom:62px;
  }

  .cafe-language-panel {
    width:min(
      280px,
      calc(100vw - 24px)
    );
  }
}

/* LANGUAGE_DISABLED_V0211 */
.cafe-language-control {
  display:none !important;
}

/* MAINTENANCE_STYLE_V0226 */

.maintenance-page {
  width:min(1240px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.maintenance-summary-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.maintenance-summary-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:14px;
  background:var(--theme-surface, #fff);
  color:var(--theme-text, #20232a);
}

.maintenance-summary-card span {
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.72;
}

.maintenance-summary-card strong {
  font-size:25px;
}

.maintenance-summary-card small {
  opacity:.7;
}

.maintenance-tool-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.maintenance-tool-grid > div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:12px;
  background:var(--theme-surface-2, #f7f8fa);
}

.maintenance-cleanup-form {
  display:flex;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
}

.maintenance-cleanup-form label {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.maintenance-table-wrap {
  overflow:auto;
}

.maintenance-table {
  width:100%;
  min-width:850px;
  border-collapse:collapse;
}

.maintenance-table th,
.maintenance-table td {
  padding:10px 9px;
  border-bottom:1px solid var(--theme-border, #e5e7eb);
  text-align:left;
  vertical-align:top;
}

.maintenance-table th {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.65;
}

.maintenance-actions {
  display:flex;
  align-items:flex-start;
  gap:7px;
  flex-wrap:wrap;
}

.maintenance-danger summary {
  cursor:pointer;
  padding:8px 10px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:9px;
  background:var(--theme-surface-2, #f7f8fa);
  font-weight:700;
}

.maintenance-danger form {
  width:340px;
  max-width:80vw;
  margin-top:8px;
  padding:12px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:12px;
  background:var(--theme-surface, #fff);
}

.maintenance-danger label {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:9px;
}

.button.danger {
  background:#b91c1c;
  border-color:#b91c1c;
  color:#fff;
}

html[data-cafe-theme] .maintenance-summary-card,
html[data-cafe-theme] .maintenance-danger form {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

@media (max-width:900px) {
  .maintenance-summary-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .maintenance-tool-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:600px) {
  .maintenance-summary-grid {
    grid-template-columns:1fr;
  }
}

/* STATION_HEALTH_STYLE_V0230 */

.station-health-page {
  width:min(1240px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.station-health-summary {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.station-health-summary-card {
  padding:16px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:14px;
  background:var(--theme-surface, #fff);
}

.station-health-summary-card span {
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  opacity:.68;
}

.station-health-summary-card strong {
  font-size:28px;
}

.station-health-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:16px;
}

.station-health-card-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.station-health-badge,
.channel-health-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--theme-border, #d7dbe0);
  font-size:11px;
  font-weight:850;
}

.station-health-online,
.channel-health-online {
  border-color:#86c99a;
  background:#eaf8ee;
  color:#166534;
}

.station-health-offline,
.channel-health-offline {
  border-color:#e5a1a1;
  background:#fff0f0;
  color:#991b1b;
}

.station-health-degraded,
.channel-health-degraded {
  border-color:#e7c56b;
  background:#fff8df;
  color:#854d0e;
}

.station-health-details {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.station-health-details > div {
  padding:10px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:10px;
}

.station-health-details dt {
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  opacity:.65;
}

.station-health-details dd {
  margin:4px 0 0;
  font-weight:700;
}

.station-health-error {
  margin-top:8px;
  padding:9px;
  border-radius:9px;
  background:#fff0f0;
  color:#991b1b;
  overflow-wrap:anywhere;
}

.station-health-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.channel-health-content {
  min-height:56px;
}

.customer-channel-card.channel-is-offline {
  opacity:.82;
}

@media (max-width:900px) {
  .station-health-summary {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .station-health-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:600px) {
  .station-health-summary,
  .station-health-details {
    grid-template-columns:1fr;
  }
}

/* SYSTEM_HEALTH_STYLE_V0251 */

.system-health-page {
  width:min(1280px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.system-health-page-head,
.system-health-card-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.system-health-page-head {
  margin-bottom:18px;
}

.system-health-head-actions {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.system-health-head-actions form {
  margin:0;
}

.system-health-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-bottom:14px;
}

.system-health-primary-grid {
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.system-health-card {
  min-width:0;
}

.system-health-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--theme-border, #d7dbe0);
  font-size:10px;
  font-weight:850;
  letter-spacing:.045em;
  white-space:nowrap;
}

.system-health-online,
.system-health-connected {
  border-color:#86c99a;
  background:#eaf8ee;
  color:#166534;
}

.system-health-error,
.system-health-offline {
  border-color:#e5a1a1;
  background:#fff0f0;
  color:#991b1b;
}

.system-health-warning,
.system-health-degraded {
  border-color:#e7c56b;
  background:#fff8df;
  color:#854d0e;
}

.system-health-unknown,
.system-health-disabled,
.system-health-unlinked {
  opacity:.7;
}

.system-health-details {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin:12px 0;
}

.system-health-details > div,
.system-health-count-grid > div {
  min-width:0;
  padding:10px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:10px;
  background:var(--theme-surface-2, #f7f8fa);
}

.system-health-details dt,
.system-health-count-grid span {
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  opacity:.65;
}

.system-health-details dd {
  margin:4px 0 0;
  font-weight:700;
  overflow-wrap:anywhere;
}

.system-health-section {
  margin-bottom:14px;
}

.system-health-count-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin:12px 0;
}

.system-health-count-grid strong {
  display:block;
  margin-top:4px;
  font-size:23px;
}

.system-health-station-list {
  display:grid;
  gap:7px;
}

.system-health-station-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:10px;
}

.system-health-station-row > div {
  display:flex;
  flex-direction:column;
}

.system-health-station-row small {
  opacity:.65;
}

.system-health-error-log {
  display:grid;
  gap:5px;
  max-height:420px;
  overflow:auto;
  padding:10px;
  border:1px solid var(--theme-border, #e5e7eb);
  border-radius:10px;
  background:var(--theme-surface-2, #f7f8fa);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  line-height:1.45;
}

.system-health-good-state {
  padding:12px;
  border:1px solid #86c99a;
  border-radius:10px;
  background:#eaf8ee;
  color:#166534;
}

html[data-cafe-theme]
.system-health-details > div,
html[data-cafe-theme]
.system-health-count-grid > div,
html[data-cafe-theme]
.system-health-station-row,
html[data-cafe-theme]
.system-health-error-log {
  background:var(--theme-surface) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}

@media (max-width:1100px) {
  .system-health-primary-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:760px) {
  .system-health-page-head {
    flex-direction:column;
  }

  .system-health-head-actions,
  .system-health-head-actions form,
  .system-health-head-actions .button {
    width:100%;
  }

  .system-health-grid,
  .system-health-primary-grid {
    grid-template-columns:1fr;
  }

  .system-health-count-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:480px) {
  .system-health-count-grid,
  .system-health-details {
    grid-template-columns:1fr;
  }
}

/* MARKETING_TRIAL_V102_TEST1 */
.trial-campaign-page,
.trial-results-page {
  width: min(1320px, 100%);
}

.trial-default-form {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.trial-default-form label {
  max-width: 180px;
}

.trial-config-grid {
  margin-top: 18px;
}

.trial-table-wrap {
  overflow-x: auto;
}

.trial-table {
  width: 100%;
  border-collapse: collapse;
}

.trial-table th,
.trial-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--theme-border, #e5e7eb);
}

.trial-table td code {
  white-space: nowrap;
  font-size: 12px;
}

.subscription-state-trial_not_started {
  background: #f3f4f6;
  border-color: #cbd5e1;
  color: #475569;
}

.subscription-state-trial_active {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}

.subscription-state-trial_expired {
  background: #fff1f2;
  border-color: #fda4af;
  color: #9f1239;
}

.trial-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trial-customer-banner {
  margin-bottom: 14px;
}

.trial-actions-card {
  border-width: 2px;
}

@media (max-width: 1000px) {
  .trial-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .trial-summary-grid {
    grid-template-columns: 1fr;
  }
}