:root {
  --bg: #14171A;
  --surface: #1F2428;
  --on-surface: #E8E4D8;
  --on-surface-variant: rgba(232, 228, 216, 0.65);
  --accent: #F4BA7A;
  --error: #DC5050;
  --success: #4CAF50;
  --warning: #FFB300;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 340px;
  font: 14px/1.4 system-ui, sans-serif;
  background: var(--bg);
  color: var(--on-surface);
}
.hidden { display: none !important; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface);
}
.brand { font-family: Georgia, serif; font-size: 16px; font-weight: 500; color: var(--accent); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--on-surface-variant); }
.dot.connected { background: var(--success); }

.setup { padding: 20px; text-align: center; }
.alert {
  background: var(--surface); padding: 12px; border-radius: 6px;
  margin-bottom: 12px; border-left: 3px solid var(--accent);
}
.alert.alert-error { border-left-color: var(--error); }
.alert strong { display: block; margin-bottom: 4px; }
.alert p { margin: 0; color: var(--on-surface-variant); font-size: 13px; }

.tabs { display: flex; border-bottom: 1px solid var(--surface); }
.tab {
  flex: 1; padding: 10px 0; background: none; border: none;
  color: var(--on-surface-variant); cursor: pointer; font: inherit;
  border-bottom: 2px solid transparent;
}
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { padding: 10px; }

.platform-card, .source-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin-bottom: 6px; background: var(--surface);
  border-radius: 6px; cursor: pointer;
}
.platform-card.disabled { opacity: 0.5; cursor: not-allowed; }
.platform-card.loading { opacity: 0.6; cursor: wait; }
.platform-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; color: white;
}
.info { flex: 1; min-width: 0; }
.info .name { font-weight: 500; }
.info .status { font-size: 12px; color: var(--on-surface-variant); }
.info .status.ready { color: var(--success); }
.info .status.error { color: var(--error); }
.info .status.no-cookies { color: var(--warning); }
.action-icon { color: var(--on-surface-variant); }

.btn {
  padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer;
  font: 500 14px/1 system-ui, sans-serif;
}
.btn.primary { background: var(--accent); color: var(--bg); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.block { display: block; width: 100%; margin-top: 8px; }
.btn.link { background: none; color: var(--on-surface-variant); padding: 4px; }
.btn.link:hover { color: var(--accent); }

.source-row .play {
  background: none; border: none; color: var(--on-surface-variant);
  cursor: pointer; padding: 4px;
}
.source-row .play:hover { color: var(--accent); }
.source-row .url { font-size: 11px; color: var(--on-surface-variant); word-break: break-all; }

.status-message {
  padding: 10px 14px; margin: 8px 10px; border-radius: 6px;
  background: var(--surface); border-left: 3px solid;
}
.status-message.success { border-left-color: var(--success); }
.status-message.error { border-left-color: var(--error); }
.status-message.warning { border-left-color: var(--warning); }

.footer {
  border-top: 1px solid var(--surface);
  padding: 6px 10px; text-align: right;
}