:root {
      color-scheme: dark;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #0f1117;
      color: #f4f4f5;
    }
    * { box-sizing: border-box; }
    body { margin: 0; background: #0f1117; color: #f4f4f5; }
    main { max-width: 1180px; margin: 0 auto; padding: 22px 14px 44px; }
    header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
    h1 { font-size: 24px; margin: 0; letter-spacing: 0; }
    h2 { font-size: 17px; margin: 0 0 12px; letter-spacing: 0; }
    h3 { font-size: 14px; margin: 14px 0 8px; letter-spacing: 0; color: #e4e4e7; }
    section { border: 1px solid #2b2f3a; border-radius: 8px; padding: 14px; background: #181b24; margin-bottom: 14px; }
    label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; color: #d4d4d8; }
    input, select, textarea, button {
      width: 100%;
      font: inherit;
      border-radius: 6px;
      border: 1px solid #343946;
      background: #10131a;
      color: #f4f4f5;
      padding: 10px 12px;
      min-width: 0;
    }
    textarea { min-height: 92px; resize: vertical; line-height: 1.35; }
    select[multiple] { min-height: 130px; }
    button {
      background: #5b5fe9;
      border-color: #5b5fe9;
      font-weight: 800;
      cursor: pointer;
      min-height: 41px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: filter 120ms ease, transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }
    button.secondary { background: #272b36; border-color: #3f4656; }
    button.danger { background: #dc2626; border-color: #dc2626; }
    button.success { background: #059669; border-color: #059669; }
    button:disabled { opacity: .55; cursor: not-allowed; }
    button:not(:disabled):hover { filter: brightness(1.1); }
    button:not(:disabled):active { transform: translateY(1px); filter: brightness(.94); }
    button.is-loading { cursor: progress; opacity: .82; }
    button.is-complete { box-shadow: 0 0 0 3px rgba(34, 197, 94, .28); border-color: #4ade80; }
    button.has-error { box-shadow: 0 0 0 3px rgba(248, 113, 113, .28); border-color: #f87171; }
    .spinner {
      width: 15px;
      height: 15px;
      flex: 0 0 15px;
      border: 2px solid rgba(255, 255, 255, .38);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    nav button { width: auto; padding: 8px 11px; background: #272b36; border-color: #3f4656; }
    nav button.active { background: #5b5fe9; border-color: #5b5fe9; }
    .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wide { grid-column: 1 / -1; }
    .row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
    .row > * { flex: 1 1 220px; }
    .muted { color: #a1a1aa; font-size: 13px; }
    .status { min-height: 22px; color: #c4b5fd; padding: 0 2px 10px; font-weight: 700; font-size: 13px; }
    .status[data-kind]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: currentColor; }
    .status[data-kind="success"] { color: #86efac; }
    .status[data-kind="error"] { color: #fca5a5; }
    .ok-text { color: #86efac; }
    .error-text { color: #fca5a5; }
    .hidden { display: none !important; }
    .cards { display: grid; gap: 8px; }
    .item {
      border: 1px solid #2b2f3a;
      border-radius: 8px;
      padding: 10px;
      background: #11151e;
      display: grid;
      gap: 5px;
    }
    .item strong { font-size: 14px; }
    .pill { display: inline-flex; width: fit-content; border: 1px solid #3f4656; border-radius: 999px; padding: 2px 8px; color: #d4d4d8; font-size: 12px; }
    .danger-text { color: #fca5a5; }
    .small-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
    .small-actions button { width: auto; min-height: 35px; padding: 7px 10px; font-size: 13px; }
    .embed-editor { display: grid; gap: 8px; }
    .embed-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .embed-editor-list { display: grid; gap: 8px; }
    .embed-editor-item {
      border: 1px solid #2b2f3a;
      border-radius: 8px;
      padding: 10px;
      background: #11151e;
      display: grid;
      gap: 10px;
    }
    .embed-editor-item textarea { min-height: 110px; }
    .embed-editor-item .small-actions { margin-top: 0; justify-content: flex-end; }
    .toast-region {
      position: fixed;
      z-index: 1000;
      top: 16px;
      right: 16px;
      width: min(360px, calc(100vw - 24px));
      display: grid;
      gap: 8px;
      pointer-events: none;
    }
    .toast {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr) 30px;
      gap: 10px;
      align-items: center;
      min-height: 52px;
      padding: 10px 10px 10px 12px;
      border: 1px solid #3f4656;
      border-radius: 8px;
      background: #1b1f29;
      color: #f4f4f5;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
      pointer-events: auto;
      animation: toast-in 180ms ease-out;
    }
    .toast::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #a78bfa; }
    .toast.success { border-color: #166534; }
    .toast.success::before { background: #4ade80; }
    .toast.error { border-color: #991b1b; }
    .toast.error::before { background: #f87171; }
    .toast-message { min-width: 0; line-height: 1.35; font-size: 14px; overflow-wrap: anywhere; }
    .toast-close {
      width: 30px;
      min-height: 30px;
      padding: 0;
      border-color: transparent;
      background: transparent;
      color: #a1a1aa;
      font-size: 20px;
      line-height: 1;
    }
    .toast.leaving { opacity: 0; transform: translateX(10px); transition: opacity 160ms ease, transform 160ms ease; }
    @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
    .user-list { display: grid; gap: 8px; }
    .user-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid #2b2f3a;
      border-radius: 8px;
      padding: 8px;
      background: #11151e;
    }
    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #272b36;
      object-fit: cover;
      display: grid;
      place-items: center;
      color: #d8b4fe;
      font-weight: 900;
    }
    .user-meta { min-width: 0; display: grid; gap: 2px; }
    .user-meta strong,
    .user-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .remove-user { width: auto; padding: 7px 10px; }
    .preview-overlay {
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: grid;
      place-items: center;
      padding: 16px;
      background: rgba(5, 7, 12, .78);
      opacity: 1;
      transition: opacity 190ms ease;
    }
    .preview-overlay.hidden { display: none; }
    .preview-overlay.is-opening,
    .preview-overlay.is-closing { opacity: 0; }
    .preview-dialog {
      width: min(640px, 100%);
      max-height: calc(100vh - 32px);
      overflow: auto;
      border: 1px solid #3f4656;
      border-radius: 8px;
      background: #1e1f22;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
      opacity: 1;
      transform: translateY(0) scale(1);
      transition: opacity 190ms ease, transform 210ms cubic-bezier(.2, .8, .2, 1);
    }
    .preview-overlay.is-opening .preview-dialog,
    .preview-overlay.is-closing .preview-dialog { opacity: 0; transform: translateY(12px) scale(.975); }
    .preview-header,
    .preview-footer {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
    }
    .preview-header { justify-content: space-between; border-bottom: 1px solid #343946; }
    .preview-header h2 { margin: 0; }
    .preview-footer { justify-content: flex-end; border-top: 1px solid #343946; }
    .preview-footer button { width: auto; min-width: 120px; }
    .icon-button {
      width: 36px;
      min-height: 36px;
      padding: 0;
      border-color: transparent;
      background: transparent;
      color: #b5bac1;
      font-size: 21px;
    }
    .message-preview { padding: 16px; background: #313338; }
    .message-composer-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    .message-composer-editor { min-width: 0; }
    .inline-discord-preview {
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #2b2d31;
    }
    .inline-discord-preview-header {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 13px;
      border-bottom: 1px solid #202225;
      background: #1e1f22;
      color: #b5bac1;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }
    .inline-discord-preview-header span:last-child {
      min-width: 0;
      overflow: hidden;
      color: #949ba4;
      font-weight: 650;
      text-overflow: ellipsis;
      text-transform: none;
      white-space: nowrap;
    }
    .inline-discord-preview > .message-preview {
      min-height: 220px;
      padding: 18px 16px 24px;
    }
    .discord-message {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;
      color: #dbdee1;
    }
    .preview-bot-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #11131d;
      color: #c4b5fd;
      font-weight: 900;
      border: 1px solid #65558f;
      overflow: hidden;
    }
    .preview-bot-avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; }
    .preview-message-body { min-width: 0; }
    .preview-author { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; font-weight: 800; color: #f2f3f5; }
    .preview-app { padding: 1px 4px; border-radius: 3px; background: #5865f2; color: white; font-size: 10px; }
    .preview-copy,
    .preview-embed-description,
    .preview-field-value { line-height: 1.4; overflow-wrap: anywhere; }
    .discord-embed {
      max-width: 520px;
      margin-top: 6px;
      padding: 12px 14px;
      border-left: 4px solid #5865f2;
      border-radius: 4px;
      background: #2b2d31;
    }
    .preview-embed-title { margin-bottom: 7px; color: #f2f3f5; font-weight: 800; overflow-wrap: anywhere; }
    .preview-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
    .preview-field { min-width: 0; }
    .preview-field.wide { grid-column: 1 / -1; }
    .preview-field-name { margin-bottom: 2px; color: #f2f3f5; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
    .preview-field-value { color: #dbdee1; font-size: 13px; }
    .preview-embed-footer { margin-top: 10px; color: #b5bac1; font-size: 12px; }
    .preview-embed-image {
      display: block;
      width: 100%;
      max-height: 320px;
      margin-top: 12px;
      border-radius: 4px;
      background: #1e1f22;
      object-fit: contain;
    }
    .preview-components { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .preview-component {
      width: auto;
      min-height: 32px;
      padding: 6px 12px;
      border: 0;
      background: #5865f2;
      color: white;
      font-size: 13px;
      cursor: default;
    }
    .preview-component.success { background: #248046; }
    .preview-component.secondary { background: #4e5058; }
    .preview-attachments { display: grid; gap: 6px; max-width: 520px; margin-top: 8px; }
    .preview-attachment {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 10px;
      border: 1px solid #3f4147;
      border-radius: 4px;
      background: #2b2d31;
    }
    .preview-attachment-kind {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 4px;
      background: #1e1f22;
      color: #f0b232;
      font-size: 10px;
      font-weight: 900;
    }
    .preview-attachment-copy { min-width: 0; }
    .preview-attachment-name { overflow: hidden; color: #00a8fc; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .preview-attachment-description { margin-top: 2px; color: #949ba4; font-size: 11px; }
    .preview-copy code,
    .preview-embed-description code,
    .preview-field-value code { padding: 1px 4px; border-radius: 3px; background: #1e1f22; font-family: Consolas, monospace; }
    .preview-markdown-line { display: block; min-height: 1.4em; }
    .preview-heading { display: block; margin: 3px 0 2px; font-weight: 800; line-height: 1.25; }
    .preview-heading-1 { font-size: 1.35em; }
    .preview-heading-2 { font-size: 1.2em; }
    .preview-heading-3 { font-size: 1.05em; }
    .preview-heading-4,
    .preview-heading-5,
    .preview-heading-6 { font-size: 1em; }
    .preview-markdown-rule { margin: 10px 0; border: 0; border-top: 1px solid #4e5058; }
    .preview-subtext { display: block; color: #949ba4; font-size: .82em; line-height: 1.3; }
    .preview-list-item {
      display: block;
      padding-left: calc(16px + (var(--preview-indent, 0) * 16px));
      text-indent: -14px;
    }
    .preview-code-block {
      display: block;
      max-width: 100%;
      margin: 4px 0;
      padding: 8px;
      overflow-x: auto;
      border: 1px solid #111214;
      border-radius: 4px;
      background: #1e1f22;
      color: #dbdee1;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .preview-code-block code { padding: 0; background: transparent; white-space: inherit; }
    .preview-link { color: #00a8fc; text-decoration: none; }
    .preview-link:hover { text-decoration: underline; }
    .preview-mention {
      display: inline;
      padding: 0 2px;
      border-radius: 3px;
      background: var(--mention-background, #3c4270);
      color: var(--mention-color, #c9cdfb);
      font-weight: 500;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .preview-channel-mention { --mention-background: #3c4270; --mention-color: #c9cdfb; }
    .preview-mention.unknown { --mention-background: #3f4147; --mention-color: #b5bac1; }
    .preview-spoiler { padding: 0 2px; border-radius: 2px; background: #1e1f22; color: transparent; }
    .preview-spoiler:hover { color: #dbdee1; }
    .preview-quote { display: block; min-height: 1.4em; padding-left: 8px; border-left: 3px solid #949ba4; }
    @media (max-width: 760px) {
      main { padding: 16px 10px 32px; }
      header { flex-direction: column; }
      .grid, .grid.three { grid-template-columns: 1fr; }
      nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      nav button { width: 100%; }
      .small-actions button { width: 100%; }
      .user-row { grid-template-columns: 38px minmax(0, 1fr); }
      .remove-user { grid-column: 1 / -1; width: 100%; }
      .toast-region { top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; }
      .preview-overlay { padding: 8px; }
      .preview-dialog { max-height: calc(100vh - 16px); }
      .preview-fields { grid-template-columns: 1fr; }
      .preview-field { grid-column: 1 / -1; }
      .preview-footer { display: grid; grid-template-columns: 1fr 1fr; }
      .preview-footer button { width: 100%; min-width: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      button, .toast { animation: none; transition: none; }
      .spinner { animation-duration: 1.4s; }
    }

    :root {
      --page: #0d0914;
      --sidebar: #140d20;
      --surface: #1b1327;
      --surface-raised: #241932;
      --surface-input: #100a18;
      --border: #38274a;
      --border-strong: #58406f;
      --text: #fff8ef;
      --text-soft: #e9dfea;
      --text-muted: #aa9aae;
      --muted: #aa9aae;
      --accent: #ffb52e;
      --accent-hover: #ffca62;
      --accent-soft: #342416;
      --accent-ink: #2d1700;
      --violet: #7657ff;
      --violet-hover: #9179ff;
      --violet-soft: #29204a;
      --coral: #ff6b5f;
      --success: #4eae87;
      --success-hover: #65c49b;
      --danger: #d95758;
      --danger-hover: #ee6d68;
      --warning: #ffb52e;
      color-scheme: dark;
      background: var(--page);
      color: var(--text);
    }
    html { min-width: 320px; background: var(--page); scrollbar-color: #5b456d var(--page); }
    body {
      min-width: 320px;
      min-height: 100vh;
      background: var(--page);
      color: var(--text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    ::selection { background: #704fd0; color: #fff; }
    .skip-link {
      position: fixed;
      z-index: 1500;
      top: 10px;
      left: 10px;
      transform: translateY(-160%);
      border-radius: 6px;
      padding: 9px 12px;
      background: var(--text);
      color: var(--page);
      font-weight: 800;
      text-decoration: none;
    }
    .skip-link:focus { transform: translateY(0); }
    body.is-loading { overflow: hidden; }
    .app-loader {
      position: fixed;
      z-index: 2000;
      inset: 0;
      display: grid;
      place-items: center;
      min-width: 320px;
      padding: 24px;
      background: var(--page);
    }
    .app-loader-content {
      width: min(320px, 100%);
      display: grid;
      justify-items: center;
      gap: 12px;
      text-align: center;
    }
    .app-loader-brand {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      border: 2px solid var(--accent);
      border-radius: 50%;
      background: #241536;
      color: #ffd77d;
      font-size: 19px;
      font-weight: 900;
    }
    .app-loader-spinner {
      width: 30px;
      height: 30px;
      border: 3px solid #48335d;
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }
    .app-loader-title { color: var(--text); font-size: 17px; font-weight: 850; }
    .app-loader-message { min-height: 20px; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 238px minmax(0, 1fr);
    }
    .app-sidebar {
      position: sticky;
      z-index: 30;
      top: 0;
      height: 100vh;
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 18px 13px 14px;
      border-right: 1px solid var(--border);
      background: var(--sidebar);
    }
    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 48px;
      margin-bottom: 8px;
      padding: 3px 7px 16px;
      border-bottom: 1px solid var(--border);
    }
    .brand-mark {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: grid;
      place-items: center;
      border: 2px solid var(--accent);
      border-radius: 50%;
      background: #241536;
      color: #ffd77d;
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 0 0 3px #2a1b3d;
    }
    .brand-copy { min-width: 0; }
    .brand-name { font-size: 15px; font-weight: 850; color: #fff2d2; }
    .brand-subtitle { margin-top: 2px; color: var(--muted); font-size: 11px; }
    #tabs {
      min-height: 0;
      display: grid;
      align-content: start;
      gap: 3px;
      margin: 0;
      overflow-y: auto;
      scrollbar-width: thin;
    }
    .nav-group-label {
      margin: 15px 9px 5px;
      color: #88778f;
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
    }
    .nav-group-label:first-child { margin-top: 0; }
    #tabs button {
      position: relative;
      width: 100%;
      min-height: 38px;
      justify-content: flex-start;
      padding: 8px 10px;
      border-color: transparent;
      border-radius: 6px;
      background: transparent;
      color: #c8b9cc;
      font-size: 13px;
      font-weight: 680;
      box-shadow: none;
    }
    #tabs button:hover:not(:disabled) {
      border-color: #463257;
      background: #20152c;
      color: var(--text);
      filter: none;
    }
    #tabs button.active {
      border-color: #5a4070;
      background: var(--accent-soft);
      color: #fff6e6;
      box-shadow: inset 3px 0 0 var(--accent);
    }
    .sidebar-footer {
      margin-top: auto;
      padding: 14px 8px 4px;
      border-top: 1px solid var(--border);
    }
    .sidebar-state {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 4px;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 750;
    }
    .state-dot,
    .connection-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 50%;
      background: #4fd19a;
      box-shadow: 0 0 0 3px rgba(79, 209, 154, .1);
    }
    .app-workspace { min-width: 0; }
    .workspace-progress {
      position: fixed;
      z-index: 120;
      top: 0;
      right: 0;
      left: 238px;
      height: 3px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 120ms ease;
    }
    .workspace-progress.is-active { opacity: 1; }
    .workspace-progress-bar {
      width: 38%;
      height: 100%;
      border-radius: 0 2px 2px 0;
      background: var(--accent);
      box-shadow: 0 0 12px rgba(255, 181, 46, .46);
      animation: workspace-progress 1.05s ease-in-out infinite;
    }
    @keyframes workspace-progress {
      from { transform: translateX(-110%); }
      to { transform: translateX(365%); }
    }
    .workspace-header {
      position: sticky;
      z-index: 20;
      top: 0;
      min-height: 86px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      margin: 0;
      padding: 15px 28px;
      border-bottom: 1px solid var(--border);
      background: #120c1c;
      box-shadow: inset 0 2px 0 var(--accent);
    }
    .page-heading { min-width: 0; }
    .eyebrow {
      margin-bottom: 4px;
      color: var(--accent);
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
    }
    h1 {
      margin: 0;
      color: var(--text);
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: 0;
    }
    .page-description {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .header-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .header-actions button { width: auto; min-height: 36px; padding: 7px 11px; }
    .connection-badge {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface);
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
    }
    .connection-badge[data-state="offline"] .connection-dot {
      background: var(--coral);
      box-shadow: 0 0 0 3px rgba(255, 107, 95, .12);
    }
    .connection-badge[data-state="checking"] .connection-dot {
      background: var(--warning);
      box-shadow: 0 0 0 3px rgba(211, 163, 65, .1);
    }
    main.dashboard-main {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 24px 28px 56px;
    }
    .control-bar {
      position: relative;
      margin: 0 0 14px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: inset 3px 0 0 var(--violet);
    }
    .control-bar-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .control-bar-title h2 { margin: 0; color: var(--text); font-size: 13px; }
    .control-bar-title span { color: var(--muted); font-size: 11px; }
    .connection-grid {
      display: grid;
      grid-template-columns: minmax(190px, .8fr) minmax(190px, .8fr) minmax(260px, 1.4fr);
      gap: 12px;
      align-items: end;
    }
    .auth-control { min-width: 0; }
    .auth-actions {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    .auth-actions button { width: auto; min-width: 0; flex: 1 1 0; }
    .connection-meta {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .connection-help { max-width: 760px; margin: 0; line-height: 1.45; }
    #loginStatus { flex: 0 0 auto; font-size: 12px; font-weight: 750; text-align: right; }
    .control-bar.is-authenticated .auth-control,
    .control-bar.is-authenticated .connection-meta { display: none; }
    .control-bar.is-authenticated .control-bar-title { display: none; }
    .control-bar.is-authenticated { padding: 12px 16px; }
    .control-bar.is-authenticated .connection-grid {
      grid-template-columns: minmax(210px, .65fr) minmax(320px, 1.35fr);
    }
    .control-bar:not(.is-authenticated) .server-control,
    .control-bar:not(.is-authenticated) .search-shell { display: none; }
    .control-bar:not(.is-authenticated) .connection-grid {
      grid-template-columns: minmax(260px, 520px);
    }
    .search-shell { position: relative; min-width: 0; }
    #searchResults {
      position: absolute;
      z-index: 60;
      top: calc(100% + 7px);
      right: 0;
      left: 0;
      max-height: min(380px, 55vh);
      overflow-y: auto;
      padding: 6px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-raised);
      box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    }
    #searchResults button {
      min-height: 38px;
      justify-content: space-between;
      border-color: transparent;
      background: transparent;
      text-align: left;
    }
    #searchResults button:hover { background: #302040; }
    .status {
      min-height: 0;
      margin: 0 0 18px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: #21162e;
      color: #ffd377;
      font-size: 12px;
      font-weight: 750;
    }
    .status:empty { display: none; }
    .status[data-kind="success"] { border-color: #336b59; color: #85d8b4; }
    .status[data-kind="error"] { border-color: #793c46; color: #ff9a91; }
    .panel-stack { min-width: 0; }
    .context-nav,
    .view-switcher {
      display: flex;
      align-items: center;
      gap: 5px;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    .context-nav {
      margin: -2px 0 16px;
      padding: 0 0 10px;
      border-bottom: 1px solid var(--border);
    }
    .context-nav button,
    .view-switcher button {
      width: auto;
      min-height: 34px;
      flex: 0 0 auto;
      padding: 7px 11px;
      border-color: transparent;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
    }
    .context-nav button:hover:not(:disabled),
    .view-switcher button:hover:not(:disabled) {
      border-color: var(--border);
      background: #2a1d38;
      color: var(--text);
    }
    .context-nav button.active {
      border-color: transparent;
      border-bottom-color: var(--accent);
      border-radius: 4px 4px 0 0;
      background: transparent;
      color: var(--text);
      box-shadow: inset 0 -2px 0 var(--accent);
    }
    .view-switcher {
      width: fit-content;
      max-width: 100%;
      margin-bottom: 18px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: #171021;
    }
    .view-switcher button.active {
      border-color: var(--violet);
      background: var(--violet-soft);
      color: #fff6e6;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }
    .view-panel { min-width: 0; }
    .view-panel > h3 {
      margin: 0 0 12px;
      color: var(--text);
      font-size: 14px;
    }
    .view-panel > h3:not(:first-child) {
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
    }
    .tool-disclosure {
      margin-top: 14px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: transparent;
    }
    .tool-disclosure > summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 2px;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 780;
      cursor: pointer;
      list-style: none;
    }
    .tool-disclosure > summary::-webkit-details-marker { display: none; }
    .tool-disclosure > summary::after {
      content: "+";
      color: var(--muted);
      font-size: 18px;
      font-weight: 500;
    }
    .tool-disclosure[open] > summary::after { content: "-"; }
    .tool-disclosure-body { padding: 4px 0 16px; }
    section[data-panel] {
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    section[data-panel] > h2:first-child { display: none; }
    section[data-panel] > h3 {
      margin: 26px 0 12px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      color: var(--text);
      font-size: 14px;
    }
    section[data-panel] > h3:first-of-type { margin-top: 18px; }
    .grid { gap: 14px; }
    .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .row { gap: 10px; }
    .muted { color: var(--muted); }
    label {
      gap: 7px;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 720;
    }
    input,
    select,
    textarea {
      min-height: 40px;
      border-color: var(--border-strong);
      border-radius: 6px;
      background: var(--surface-input);
      color: var(--text);
      padding: 9px 11px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
      transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    }
    input::placeholder,
    textarea::placeholder { color: #77677f; opacity: 1; }
    input:hover,
    select:hover,
    textarea:hover { border-color: #72588b; }
    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--accent);
      background: #171020;
      box-shadow: 0 0 0 3px rgba(255, 181, 46, .15);
    }
    textarea { min-height: 104px; line-height: 1.5; }
    button {
      min-height: 40px;
      border-color: var(--accent);
      border-radius: 6px;
      background: var(--accent);
      color: var(--accent-ink);
      padding: 9px 12px;
      font-size: 13px;
      font-weight: 760;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
      transition: background 130ms ease, border-color 130ms ease, transform 100ms ease, box-shadow 140ms ease;
    }
    button:not(:disabled):hover {
      border-color: var(--accent-hover);
      background: var(--accent-hover);
      filter: none;
    }
    button:not(:disabled):active { transform: translateY(1px); filter: none; }
    button:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 181, 46, .24);
    }
    button.secondary {
      border-color: #654c80;
      background: #302142;
      color: var(--text-soft);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }
    button.secondary:not(:disabled):hover { border-color: var(--violet-hover); background: #3c2a52; color: #fff; }
    button.success { border-color: var(--success); background: var(--success); color: #fff; }
    button.success:not(:disabled):hover { border-color: var(--success-hover); background: var(--success-hover); }
    button.danger { border-color: var(--danger); background: var(--danger); color: #fff; }
    button.danger:not(:disabled):hover { border-color: var(--danger-hover); background: var(--danger-hover); }
    .cards { gap: 10px; }
    .item {
      gap: 6px;
      padding: 12px;
      border-color: var(--border);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    }
    .item strong { color: var(--text); font-size: 13px; }
    #overviewCards .item { min-height: 98px; align-content: space-between; padding: 15px; }
    #overviewCards .item {
      border-top: 2px solid var(--violet);
      background: #1d1429;
    }
    #overviewCards .item:nth-child(3n + 1) { border-top-color: var(--accent); }
    #overviewCards .item:nth-child(3n + 2) { border-top-color: var(--violet); }
    #overviewCards .item:nth-child(3n) { border-top-color: var(--coral); }
    #overviewCards .item strong { color: #f2e7f0; font-size: 12px; }
    .pill { border-color: var(--border-strong); background: #2b1d39; color: var(--text-soft); }
    .pill[data-tone="success"] { border-color: rgba(52, 211, 153, .42); background: rgba(16, 185, 129, .1); color: #8ce8c4; }
    .pill[data-tone="warning"] { border-color: rgba(245, 158, 11, .42); background: rgba(245, 158, 11, .1); color: #f6cb72; }
    .pill[data-tone="danger"] { border-color: rgba(248, 113, 113, .42); background: rgba(239, 68, 68, .1); color: #fda4af; }
    .small-actions { gap: 7px; }
    .small-actions button { min-height: 34px; padding: 7px 10px; font-size: 12px; }
    .embed-editor-item,
    .user-row {
      border-color: var(--border);
      background: var(--surface);
    }
    .avatar { background: var(--violet-soft); color: #d8ccff; }
    .toast { border-color: var(--border-strong); background: #241832; color: var(--text); }
    .toast::before { background: var(--accent); }
    .toast-close:hover:not(:disabled) { border-color: transparent; background: #352445; color: #fff; }
    .preview-dialog { border-color: var(--border-strong); }
    .live-state,
    .dirty-state {
      width: auto;
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      padding: 6px 9px;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-muted);
      background: var(--surface);
      font-size: 11px;
      font-weight: 800;
    }
    .live-state[data-state="live"] { border-color: rgba(52, 211, 153, .42); color: #8ce8c4; }
    .live-state[data-state="editing"] { border-color: rgba(245, 158, 11, .42); color: #f6cb72; }
    .live-state[data-state="error"] { border-color: rgba(248, 113, 113, .42); color: #fda4af; }
    .dirty-state { border-color: rgba(245, 158, 11, .42); color: #f6cb72; }
    .overview-band {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
      gap: 24px;
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
    }
    .section-heading-row {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .section-heading-row h3 { margin: 0; }
    .section-heading-row h2 { margin: 0 0 4px; }
    .button-link,
    .table-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 13px;
      border: 1px solid #3f4656;
      border-radius: 6px;
      background: #272b36;
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
    }
    .table-link { min-height: 32px; padding: 6px 10px; }
    .button-link:hover,
    .table-link:hover { border-color: var(--violet-hover); background: #3c2a52; color: #fff; }
    .guide-mode-tabs {
      display: inline-flex;
      gap: 4px;
      margin-bottom: 16px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
    }
    .guide-mode-tabs button {
      width: auto;
      min-height: 34px;
      padding: 7px 12px;
      border-color: transparent;
      background: transparent;
      color: var(--text-muted);
      box-shadow: none;
    }
    .guide-mode-tabs button.active { background: var(--violet-soft); color: #fff; }
    .guide-editor-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
      gap: 18px;
      align-items: start;
    }
    .guide-editor-panel { min-width: 0; }
    .guide-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .guide-actions button { width: auto; }
    .guide-browser-preview {
      position: sticky;
      top: 112px;
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #11151c;
      color: #edf2f7;
    }
    .guide-preview-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 12px;
      border-bottom: 1px solid #2a3442;
      background: #171d26;
      color: #98a6b8;
      font-size: 11px;
      font-weight: 700;
    }
    .guide-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
    .guide-preview-image { width: 100%; max-height: 250px; display: block; object-fit: cover; background: #090c11; }
    .guide-preview-placeholder {
      min-height: 220px;
      display: grid;
      place-content: center;
      gap: 7px;
      padding: 24px;
      border-bottom: 1px solid #293341;
      background: repeating-linear-gradient(135deg, #171d26, #171d26 14px, #1d2530 14px, #1d2530 28px);
      color: #dce5ef;
      text-align: center;
    }
    .guide-preview-placeholder span { font-size: 17px; font-weight: 900; }
    .guide-preview-placeholder small { color: #91a0b2; font-size: 11px; }
    .guide-preview-body { padding: 20px; }
    .guide-preview-category {
      display: inline-block;
      margin-bottom: 10px;
      color: #72d6c9;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .guide-preview-body h3 { margin: 0 0 9px; color: #fff; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
    .guide-preview-summary { margin: 0 0 13px; color: #b7c2d0; line-height: 1.5; overflow-wrap: anywhere; }
    .guide-preview-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
    .guide-preview-tags span { padding: 4px 7px; border: 1px solid #344153; border-radius: 4px; color: #d6dee8; font-size: 10px; }
    .guide-preview-credit {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      margin: 2px 0 18px;
      padding: 10px;
      border: 1px solid #344153;
      border-radius: 6px;
      background: #171d26;
    }
    .guide-preview-credit img,
    .guide-preview-credit .credit-avatar-placeholder {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      object-fit: cover;
      display: grid;
      place-items: center;
      background: #2d3745;
      color: #fff;
      font-weight: 900;
    }
    .guide-preview-credit strong,
    .guide-preview-credit small { display: block; overflow-wrap: anywhere; }
    .guide-preview-credit small { margin-top: 2px; color: #91a0b2; }
    .contributor-picker-fieldset { min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--border); border-radius: 6px; }
    .contributor-picker-fieldset legend { padding: 0 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .contributor-picker-fieldset > small { display: block; margin-top: 8px; color: var(--muted); }
    .contributor-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 7px; }
    .contributor-picker label { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel); cursor: pointer; }
    .contributor-picker label:has(input:checked) { border-color: var(--accent); background: rgba(139, 116, 224, .12); }
    .contributor-picker input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
    .contributor-picker span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .guide-preview-credit.guide-preview-credit-list { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0; border: 0; background: transparent; }
    .guide-preview-content { padding-top: 16px; border-top: 1px solid #293341; color: #d9e0e8; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
    .contributor-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: 18px;
      align-items: start;
    }
    .contributor-preview-panel {
      position: sticky;
      top: 112px;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 15px;
      align-items: start;
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
    }
    .contributor-preview-avatar,
    .contributor-avatar-placeholder {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      object-fit: cover;
    }
    .contributor-avatar-placeholder {
      display: grid;
      place-items: center;
      background: var(--violet-soft);
      color: #fff;
      font-size: 25px;
      font-weight: 900;
    }
    .contributor-preview-panel h3 { margin: 4px 0 3px; overflow-wrap: anywhere; }
    .contributor-preview-panel strong { color: #ffc85f; overflow-wrap: anywhere; }
    .contributor-preview-panel p { margin: 9px 0 0; color: var(--text-soft); line-height: 1.5; overflow-wrap: anywhere; }
    .preview-markdown-image {
      display: block;
      width: 100%;
      height: auto;
      margin: 12px 0;
      border-radius: 6px;
    }
    .guide-inline-image-placeholder {
      min-height: 140px;
      display: grid;
      place-items: center;
      margin: 12px 0;
      border: 1px solid #344153;
      border-radius: 6px;
      background: repeating-linear-gradient(135deg, #171d26, #171d26 12px, #1d2530 12px, #1d2530 24px);
      color: #91a0b2;
      font-size: 12px;
      font-weight: 800;
    }
    .compact-button { width: auto; min-height: 32px; padding: 6px 10px; font-size: 12px; }
    .metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .metric {
      min-height: 74px;
      display: grid;
      align-content: space-between;
      gap: 8px;
      padding: 11px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
    }
    .metric:nth-child(4n + 1) { border-left: 3px solid var(--accent); }
    .metric:nth-child(4n + 2) { border-left: 3px solid var(--violet); }
    .metric:nth-child(4n + 3) { border-left: 3px solid var(--coral); }
    .metric:nth-child(4n) { border-left: 3px solid var(--success); }
    .metric strong { color: #ffd069; font-size: 22px; line-height: 1; }
    .metric span { color: var(--text-muted); font-size: 11px; font-weight: 800; }
    .health-list { display: grid; gap: 8px; }
    .health-item {
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .health-item:last-child { border-bottom: 0; }
    .health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
    .health-item[data-severity="error"] .health-dot { background: var(--danger); }
    .health-item[data-severity="ok"] .health-dot { background: var(--success); }
    .health-copy { min-width: 0; display: grid; gap: 3px; }
    .health-copy span { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
    .health-item button { width: auto; min-height: 32px; padding: 6px 9px; font-size: 11px; }
    .data-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
    .data-table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--surface); }
    .data-table th,
    .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
    .data-table th { color: var(--text-muted); background: #20152c; font-size: 11px; text-transform: uppercase; }
    .data-table td { color: var(--text-soft); font-size: 12px; }
    .data-table tr:last-child td { border-bottom: 0; }
    .data-table .table-actions { display: flex; justify-content: flex-end; gap: 6px; }
    .data-table .table-actions button { width: auto; min-height: 30px; padding: 5px 8px; font-size: 11px; }
    .data-table a { color: #ffc85f; font-weight: 800; text-decoration: none; }
    .data-table a:hover { text-decoration: underline; }
    .wizard-nav,
    .filter-switcher {
      display: inline-flex;
      max-width: 100%;
      gap: 4px;
      margin-bottom: 14px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      overflow-x: auto;
    }
    .wizard-nav button,
    .filter-switcher button {
      width: auto;
      min-height: 34px;
      flex: 0 0 auto;
      padding: 7px 11px;
      border-color: transparent;
      background: transparent;
      color: var(--text-muted);
      box-shadow: none;
    }
    .wizard-nav button.active,
    .filter-switcher button.active { background: var(--violet-soft); color: #fff; }
    .review-summary {
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
    }
    .review-summary > div { display: flex; justify-content: space-between; gap: 16px; }
    .review-summary > div span { color: var(--text-muted); font-weight: 800; }
    .review-summary > div strong { max-width: 65%; text-align: right; overflow-wrap: anywhere; }
    .inline-search { width: min(360px, 100%); }
    .confirmation-dialog { width: min(460px, calc(100vw - 24px)); padding: 18px; }
    .confirmation-dialog p { color: var(--text-soft); line-height: 1.55; }
    .confirmation-input { display: grid; gap: 7px; margin: 14px 0; }
    .confirmation-input span { font-weight: 800; }
    .confirmation-input textarea { min-height: 104px; resize: vertical; }
    .brand-mark,
    .app-loader-brand,
    .reaction-role-preview-avatar {
      position: relative;
      overflow: hidden;
    }
    .brand-avatar-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }
    .has-avatar .brand-avatar-fallback { display: none; }
    .reaction-role-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    .reaction-role-editor-panel,
    .reaction-role-live-preview {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
    }
    .reaction-role-editor-panel { padding: 16px; }
    .reaction-role-editor-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 10px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    .reaction-role-source-switcher { margin-bottom: 16px; }
    .reaction-role-mapping-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .reaction-role-mapping-header > div { display: grid; gap: 3px; }
    .reaction-role-mapping-header strong { color: var(--text); font-size: 13px; }
    .reaction-role-mapping-header span { color: var(--muted); font-size: 11px; font-weight: 800; }
    .reaction-role-mappings {
      display: grid;
      gap: 0;
      margin-top: 9px;
      border-top: 1px solid var(--border);
    }
    .reaction-role-mapping {
      display: grid;
      grid-template-columns: 112px minmax(180px, 1fr) 40px;
      align-items: end;
      gap: 10px;
      padding: 11px 0;
      border-bottom: 1px solid var(--border);
    }
    .reaction-role-mapping label { min-width: 0; }
    .reaction-role-role-control { position: relative; display: block; }
    .reaction-role-role-control i {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 11px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--role-swatch);
      transform: translateY(-50%);
      pointer-events: none;
    }
    .reaction-role-role-control select { padding-left: 30px; }
    .reaction-role-remove {
      width: 40px;
      min-width: 40px;
      padding: 0;
      font-size: 15px;
    }
    .reaction-role-gates { margin-top: 17px; }
    .reaction-role-gates select { min-height: 112px; }
    .reaction-role-actions {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .reaction-role-actions button { width: auto; }
    .reaction-role-live-preview {
      position: static;
      overflow: hidden;
      background: #2b2d31;
    }
    .reaction-role-preview-label {
      padding: 10px 13px;
      border-bottom: 1px solid #202225;
      background: #1e1f22;
      color: #b5bac1;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }
    .reaction-role-preview-message {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      min-height: 310px;
      padding: 18px 16px 22px;
      color: #dbdee1;
      font-family: "Segoe UI", system-ui, sans-serif;
    }
    .reaction-role-preview-avatar {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 2px solid var(--accent);
      background: #241536;
      color: #ffd77d;
      font-weight: 900;
    }
    .reaction-role-preview-body { min-width: 0; }
    .reaction-role-preview-author {
      margin-bottom: 5px;
      color: #f2f3f5;
      font-size: 14px;
      font-weight: 700;
    }
    .reaction-role-preview-author span {
      margin-left: 5px;
      padding: 1px 4px;
      border-radius: 3px;
      background: #5865f2;
      color: #fff;
      font-size: 9px;
      vertical-align: 1px;
    }
    .reaction-role-preview-embed {
      max-width: 520px;
      display: grid;
      gap: 10px;
      padding: 12px 14px;
      border-left: 4px solid var(--accent);
      border-radius: 4px;
      background: #242629;
      overflow-wrap: anywhere;
    }
    .reaction-role-preview-embed.attached-message {
      padding: 0;
      border-left: 0;
      background: transparent;
    }
    .reaction-role-preview-title { color: #f2f3f5; font-size: 15px; font-weight: 800; }
    .reaction-role-preview-copy { color: #dbdee1; font-size: 13px; line-height: 1.45; }
    .reaction-role-preview-options { display: grid; gap: 7px; }
    .reaction-role-preview-mapping { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .reaction-role-preview-emoji { width: 24px; flex: 0 0 24px; font-size: 18px; text-align: center; }
    .reaction-role-preview-footer { color: #949ba4; font-size: 10px; line-height: 1.4; }
    .reaction-role-preview-reactions {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }
    .reaction-role-preview-reactions span {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 4px 8px;
      border: 1px solid #3f4147;
      border-radius: 8px;
      background: #232428;
      color: #dbdee1;
    }
    .reaction-role-preview-reactions b { font-size: 16px; font-weight: 500; }
    .reaction-role-preview-reactions small { color: #b5bac1; font-size: 11px; }

    @media (max-width: 1080px) {
      .app-shell { grid-template-columns: 216px minmax(0, 1fr); }
      .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .search-shell { grid-column: 1 / -1; }
      .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .overview-band { grid-template-columns: 1fr; }
      .reaction-role-workspace { grid-template-columns: 1fr; }
      .reaction-role-live-preview { position: static; }
      .guide-editor-workspace,
      .contributor-workspace { grid-template-columns: 1fr; }
      .guide-browser-preview { position: static; }
      .contributor-preview-panel { position: static; }
    }
    @media (max-width: 900px) {
      .app-shell { display: block; }
      .app-sidebar {
        position: sticky;
        height: auto;
        padding: 9px 12px 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }
      .brand-lockup { min-height: 42px; padding: 0 4px 8px; }
      .brand-mark { width: 32px; height: 32px; flex-basis: 32px; font-size: 14px; }
      .brand-subtitle { display: none; }
      #tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        padding: 0 0 9px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
      }
      #tabs button {
        width: auto;
        min-height: 35px;
        flex: 0 0 auto;
        justify-content: center;
        padding: 7px 11px;
        scroll-snap-align: start;
      }
      #tabs button.active { box-shadow: inset 0 -3px 0 var(--accent); }
      .nav-group-label,
      .sidebar-footer { display: none; }
      .workspace-header { position: static; min-height: 78px; flex-direction: row; padding: 14px 20px; }
      main.dashboard-main { padding: 20px 20px 48px; }
      .workspace-progress { left: 0; }
    }
    @media (max-width: 640px) {
      .app-sidebar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 60;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        border-bottom: 0;
        background: rgba(20, 13, 32, .98);
      }
      .brand-lockup { display: none; }
      #tabs {
        display: flex;
        gap: 4px;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
      }
      #tabs button {
        width: auto;
        flex: 1 0 76px;
        min-width: 0;
        white-space: normal;
        font-size: 11px;
      }
      .workspace-header { min-height: 0; flex-direction: column; align-items: stretch; gap: 12px; padding: 15px 14px; }
      .header-actions { justify-content: flex-start; }
      .header-actions button { flex: 1 1 100px; }
      .connection-badge { margin-right: auto; }
      main.dashboard-main { padding: 14px 12px 104px; }
      .control-bar { padding: 13px; }
      .control-bar-title { align-items: flex-start; }
      .control-bar-title span { text-align: right; }
      .connection-grid { grid-template-columns: 1fr; }
      .control-bar.is-authenticated .connection-grid { grid-template-columns: 1fr; }
      .search-shell { grid-column: auto; }
      .connection-meta { display: grid; gap: 7px; }
      #loginStatus { grid-row: 1; text-align: left; }
      .connection-help { grid-row: 2; }
      .context-nav { margin-top: 0; }
      .view-switcher { width: 100%; }
      .section-heading-row { align-items: stretch; flex-direction: column; }
      .section-heading-row .button-link { width: 100%; }
      .guide-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .guide-actions button { width: 100%; }
      .inline-search { width: 100%; }
      .metric-grid { grid-template-columns: 1fr 1fr; }
      .health-item { grid-template-columns: 8px minmax(0, 1fr); }
      .health-item button { grid-column: 2; width: 100%; }
      .review-summary > div { display: grid; gap: 3px; }
      .review-summary > div strong { max-width: none; text-align: left; }
      .reaction-role-editor-heading { grid-template-columns: 1fr; }
      .reaction-role-editor-heading button { width: 100%; }
      .reaction-role-mapping { grid-template-columns: 88px minmax(0, 1fr) 40px; }
      .preview-dialog { width: 100vw; max-width: none; min-height: 100dvh; border-radius: 0; }
      .grid,
      .grid.three { grid-template-columns: 1fr; }
      .row > * { flex-basis: 100%; }
      .small-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .small-actions button { width: 100%; white-space: normal; overflow-wrap: anywhere; }
      #overviewCards .item { min-height: 84px; }
      section[data-panel] > h3 { margin-top: 22px; padding-top: 17px; }
      .toast-region { bottom: 10px; right: 10px; left: 10px; }
    }
    @media (max-width: 390px) {
      .small-actions { grid-template-columns: 1fr; }
      .guide-actions { grid-template-columns: 1fr; }
      .guide-mode-tabs { width: 100%; }
      .guide-mode-tabs button { flex: 1 1 0; }
      .contributor-preview-panel { grid-template-columns: 54px minmax(0, 1fr); padding: 14px; }
      .contributor-preview-avatar,
      .contributor-avatar-placeholder { width: 54px; height: 54px; }
      .header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .connection-badge { grid-column: 1 / -1; }
      .reaction-role-mapping {
        grid-template-columns: minmax(0, 1fr) 40px;
        align-items: end;
      }
      .reaction-role-emoji-field { grid-column: 1 / -1; }
      .reaction-role-role-field { grid-column: 1; }
      .reaction-role-remove { grid-column: 2; }
      .reaction-role-mapping-header { align-items: stretch; flex-direction: column; }
      .reaction-role-mapping-header button { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; }
      .app-loader-spinner,
      .workspace-progress-bar { animation-duration: 2.4s; }
      .preview-overlay,
      .preview-dialog { transition-duration: 0s !important; }
    }