/* Studio: presentation only. Account colours, media and interaction state
   remain owned by the existing components. */
:root {
  --studio-base: #191d22;
  --studio-panel: #1f242a;
  --studio-raised: #282f37;
  --studio-line: #343c45;
  --studio-text: #e6eaee;
  --studio-muted: #a3aeb9;
  --studio-action: #91a9be;
  --studio-action-ink: #17232d;
  --studio-selection: #2b3743;
  --studio-danger: #e7a096;
  --studio-danger-bg: #35292b;
  --bg: var(--studio-base);
  --dark: var(--studio-base);
  --panel: var(--studio-panel);
  --panel2: var(--studio-panel);
  --panel3: var(--studio-raised);
  --text: var(--studio-text);
  --muted: var(--studio-muted);
  --line: var(--studio-line);
  --brand: var(--studio-action);
  --accent: var(--studio-action);
  --accent2: #b4c5d4;
  --shadow: transparent;
}
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--studio-text); }
button, input, select, textarea { font-family: inherit; }
button { font-weight: 500; }
.primary, .composer .send-button {
  background: var(--studio-action);
  color: var(--studio-action-ink);
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 500;
}
.primary:hover, .composer .send-button:hover { background: #a4bacd; filter: none; }
input[type="checkbox"], input[type="range"], progress { accent-color: var(--studio-action); }
:focus-visible { outline: 2px solid var(--studio-action); outline-offset: 2px; }

/* Harmony web workspace. Keep its drawers, resizing and responsive layout. */
.auth-shell { background: var(--studio-base); }
.auth-card { max-width: 410px; padding: 30px; background: var(--studio-panel); border: 1px solid var(--studio-line); border-radius: 8px; box-shadow: none; }
.auth-card h1 { font-size: 23px; font-weight: 500; }
.auth-card .logo { background: transparent; }
.auth-card input, dialog input, dialog select { background: var(--studio-base); border-color: var(--studio-line); color: var(--studio-text); }
.auth-card label, dialog label { font-weight: 500; }
.brand { font-weight: 500; }
.channels-panel, .members, .side-panel, .right-panel { background: var(--studio-panel); }
.channels-panel > header, .content-header, .right-panel-tabs {
  background: var(--studio-panel);
  border-color: var(--studio-line);
  box-shadow: none;
}
.dm-rail { background: var(--studio-base); border-color: var(--studio-line); }
.dm-rail button, .dm-rail .avatar { border-radius: 8px; }
.channels-panel > header button, .user-panel button { border-radius: 5px; }
.channel { font-size: 13px; padding: 8px 10px; }
.channel:hover { background: var(--studio-raised); }
.channel.active, .channel.connected { background: var(--studio-selection); color: var(--studio-text); }
.section-title { font-size: 11px; font-weight: 500; }
.user-panel { background: var(--studio-panel); border-top: 1px solid var(--studio-line); gap: 5px; }
.user-panel > button { width: 22px; min-width: 22px; font-size: 15px; padding: 3px; }
.header-actions { gap: 5px; }
.content-header .feature-button { border-radius: 5px; font-weight: 500; }
.chat { padding-top: 16px; }
.message-row { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
.message-row > .avatar { width: 30px; height: 30px; border-radius: 8px; }
.message-row:hover { background: #20262d; }
.message-head b { font-size: 13px; font-weight: 500; }
.message-text { color: var(--studio-text); font-size: 13px; line-height: 1.55; }
.message-file { background: var(--studio-panel); border-color: var(--studio-line); border-radius: 6px; }
.message-file:hover { border-color: var(--studio-action); }
.file-icon { background: var(--studio-raised); }
.composer, .central-chat-slot .right-chat-view .composer { background: var(--studio-panel); border: 1px solid var(--studio-line); border-radius: 7px; }
.composer input { color: var(--studio-text); }
.composer button { color: var(--studio-muted); }
.composer .send-button { color: var(--studio-action-ink); }
.members h3 { font-size: 11px; font-weight: 500; }
.member { font-size: 13px; }
.member .avatar { width: 28px; height: 28px; border-radius: 8px; }
dialog { background: var(--studio-panel); border-color: var(--studio-line); border-radius: 8px; box-shadow: none; }
dialog::backdrop { background: #0d111680; backdrop-filter: none; }
.settings-nav button.active, .shared-category.active, .right-panel-tabs button.active,
.workspace-switcher button.active { background: var(--studio-selection); color: var(--studio-action); box-shadow: none; }
.right-panel-view, .right-chat-view .composer, .workspace-switcher, .collab-surface { background: var(--studio-base); }
.bulletin, .shared-file, .admin-user, .identity-color-editor, .queued-bulletin { background: var(--studio-panel); border-color: var(--studio-line); box-shadow: none; }
.user-context-menu, .media-picker { background: var(--studio-panel); border-color: var(--studio-line); box-shadow: none; }
.user-context-menu > button:hover, .user-context-menu > button:focus,
.media-picker-tabs button.active { background: var(--studio-selection); color: var(--studio-text); box-shadow: none; }
@media (min-width: 1101px) {
  .app { grid-template-columns: 56px 198px minmax(420px, 1fr) var(--side-panel-width); }
  .dm-rail { padding-inline: 6px; }
  .dm-rail-brand, .dm-rail-new { width: 38px; height: 38px; }
}