/* VeyoSign structural shells (designs 6–11) — layout/IA, not color themes */

.shell-alt.hidden,
.shell-sec-nav.hidden,
.shell-pane.hidden,
.shell-empty.hidden { display: none !important; }

html[data-ui="6"] #classic-tabs,
html[data-ui="7"] #classic-tabs,
html[data-ui="8"] #classic-tabs,
html[data-ui="9"] #classic-tabs,
html[data-ui="10"] #classic-tabs,
html[data-ui="11"] #classic-tabs {
  display: none !important;
}

html[data-ui="6"] #shell-sec-nav,
html[data-ui="7"] #shell-sec-nav,
html[data-ui="8"] #shell-sec-nav,
html[data-ui="9"] #shell-sec-nav,
html[data-ui="10"] #shell-sec-nav {
  display: flex;
}

/* Design 11 uses in-rail nav — keep classic sec-nav hidden */
html[data-ui="11"] #shell-sec-nav {
  display: none !important;
}

/* Classic tabs visible for 1–5; shells hidden unless active */
.shell-alt { display: none; }
html[data-ui="6"] #shell-customer:not(.hidden),
html[data-ui="7"] #shell-fleet:not(.hidden),
html[data-ui="8"] #shell-cockpit:not(.hidden),
html[data-ui="9"] #shell-jobs:not(.hidden),
html[data-ui="10"] #shell-sites:not(.hidden) {
  display: block;
}

html[data-ui="11"] #shell-studio:not(.hidden) {
  display: contents;
}

.shell-sec-nav {
  display: none;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.65rem var(--space);
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  align-items: center;
}
.shell-sec-nav button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
}
.shell-sec-nav button.active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--tab-active-bg);
}
.shell-sec-nav .tab-unread-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.shell-sec-nav .tab-unread-dot[hidden] { display: none !important; }

.shell-layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 0;
  min-height: 60vh;
  border-top: 1px solid var(--border);
}
.shell-rail {
  border-right: 1px solid var(--border);
  padding: 0.75rem;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  overflow: auto;
  max-height: calc(100vh - 10rem);
}
.shell-workspace {
  padding: 0.75rem var(--space);
  overflow: auto;
  max-height: calc(100vh - 10rem);
}
.shell-rail-head {
  align-items: center;
  margin-bottom: 0.5rem;
}
.shell-rail-head h2 { margin: 0; font-size: 1.05rem; }
.shell-list { display: flex; flex-direction: column; gap: 0.35rem; }
.shell-list-item {
  text-align: left;
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 10px);
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}
.shell-list-item:hover { background: var(--tab-active-bg); }
.shell-list-item.active {
  border-color: var(--accent);
  background: var(--accent-soft, rgba(26, 106, 255, 0.15));
}
.shell-list-item .meta { font-size: 0.75rem; }
.shell-empty {
  padding: 2rem 1rem;
  text-align: center;
}
.shell-subtabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}
.shell-subtabs button {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  padding: 0.35rem 0.75rem;
}
.shell-subtabs button.active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--tab-active-bg);
}
.shell-hint { font-size: 0.78rem; margin: 0 0 0.75rem; }
.shell-hint code {
  font-size: 0.85em;
  background: var(--code-bg, #111);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

/* 7 — Fleet */
.fleet-toolbar {
  padding: 0.75rem var(--space) 0.5rem;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.fleet-toolbar h2 { margin: 0; margin-right: 0.5rem; }
.fleet-toolbar input[type="search"],
.fleet-toolbar select {
  max-width: 14rem;
  margin: 0;
}
.fleet-split {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 240px);
  gap: 0.75rem;
  padding: 0 var(--space) 1rem;
  align-items: start;
}
.fleet-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  max-height: calc(100vh - 14rem);
}
.fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.fleet-table th,
.fleet-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.fleet-table th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
  font-weight: 600;
  color: var(--muted);
}
.fleet-table tr:hover td { background: var(--tab-active-bg); }
.fleet-table .actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.fleet-table .actions button {
  padding: 0.2rem 0.45rem;
  font-size: 0.78rem;
}
.fleet-side { margin: 0; padding: 0.75rem; }
.fleet-side h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.facet-btn {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.3rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
}
.facet-btn.active { border-color: var(--accent); background: var(--accent-soft, rgba(26,106,255,0.12)); }
.facet-btn .count { color: var(--muted); }

/* 8 — Cockpit */
.cockpit-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(200px, 280px) 1fr;
  gap: 0;
  min-height: 55vh;
  border-top: 1px solid var(--border);
}
.cockpit-col {
  border-right: 1px solid var(--border);
  padding: 0.75rem;
  overflow: auto;
  max-height: calc(100vh - 12rem);
}
.cockpit-col:last-child { border-right: none; }
.cockpit-detail .device-detail-card { margin-top: 0.25rem; }
.cockpit-media {
  margin: 0.75rem var(--space) 1rem;
}
.cockpit-media summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* 9 — Jobs */
.job-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  padding: 0.5rem var(--space) 1rem;
}
.job-card {
  text-align: left;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 14px);
  padding: 1rem 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow, none);
  min-height: 5.5rem;
}
.job-card:hover { border-color: var(--accent); }
.job-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.job-card .meta { margin: 0; }
.job-card .job-count {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--accent);
  font-size: 1.25rem;
}
.job-panel {
  margin: 0 var(--space) 1rem;
}
.job-panel h3 { margin-top: 0; }

/* 10 — Sites tree */
.sites-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 0;
  min-height: 60vh;
  border-top: 1px solid var(--border);
}
.sites-tree { font-size: 0.9rem; }
.sites-node {
  margin: 0.15rem 0;
}
.sites-node > button.tree-toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  font-weight: 600;
}
.sites-node > button.tree-toggle:hover,
.sites-node > button.tree-toggle.active {
  background: var(--tab-active-bg);
  border-color: var(--border);
}
.sites-node.site-level > button.tree-toggle { font-weight: 500; padding-left: 1rem; }
.sites-node.device-level > button.tree-toggle {
  font-weight: 400;
  padding-left: 1.75rem;
  color: var(--muted);
}
.sites-node.device-level > button.tree-toggle.active { color: var(--text); border-color: var(--accent); }
.sites-children { margin-left: 0.25rem; }
.site-unassigned { opacity: 0.85; font-style: italic; }

.playlist-overlay {
  margin: 0.75rem var(--space) 1rem;
  position: relative;
  z-index: 4;
}

/* Compact switcher for 11 buttons */
.ui-design-switcher {
  gap: 0.3rem;
}
.ui-design-switcher button {
  min-width: 1.65rem;
  padding: 0.18rem 0.35rem;
}

/* Responsive */
@media (max-width: 900px) {
  .shell-layout,
  .sites-layout {
    grid-template-columns: 1fr;
  }
  .shell-rail { max-height: none; border-right: none; border-bottom: 1px solid var(--border); }
  .fleet-split { grid-template-columns: 1fr; }
  .cockpit-grid { grid-template-columns: 1fr; }
  .cockpit-col { max-height: none; border-right: none; border-bottom: 1px solid var(--border); }
}

/* Shell home mode: hide classic tab panels unless opened via sec-nav */
html.shell-mode #tab-devices,
html.shell-mode #tab-media,
html.shell-mode #tab-installer,
html.shell-mode #tab-guide,
html.shell-mode #tab-wiki,
html.shell-mode #tab-klanten,
html.shell-mode #tab-gebruikers,
html.shell-mode #tab-team {
  /* default: JS toggles .hidden; ensure they don't show under shell home */
}

html.shell-mode #main-view.team-fill {
  /* keep team-fill working when Team opened from sec-nav */
}


/* ========== Design 11 — VeyoSign / Brand studio (white rail + logo blue) ========== */
html[data-ui="11"] {
  --accent: #1A6AFF;
  --accent-soft: rgba(26, 106, 255, 0.14);
  --bg: #f4f6fa;
  --bg-grad-from: #f4f6fa;
  --panel: #ffffff;
  --text: #1a1a1a;
  --muted: #6b7a90;
  --border: #d8dee9;
  --input-bg: #ffffff;
  --topbar-bg: #ffffff;
  --tab-active-bg: #e8eefc;
  --banner-bg: #e8eefc;
  --code-bg: #eef1f7;
  --md-th-bg: #e8eefc;
  --md-body: #1a1a1a;
  --code-fg: #1a1a1a;
  --chat-thread-bg: #f0f3f8;
  --chat-msg-bg: #ffffff;
  --chat-msg-mine-bg: #e8eefc;
  --chat-msg-mine-border: #1A6AFF;
  --chat-msg-assistant-bg: #ffffff;
  --chat-body-fg: #1a1a1a;
  --chat-mine-author: #1A6AFF;
  --ok: #1A6AFF;
  --radius: 0.65rem;
  --radius-sm: 7px;
  --radius-card: 10px;
  --space: 1.25rem;
  --ms-sidebar: #ffffff;
  --ms-sidebar-fg: #1a1a1a;
  --ms-mint: #1A6AFF;
  --ms-mint-hot: #1A6AFF;
  --ms-sidebar-accent: #f0f3f8;
  --ms-sidebar-border: #e5e9f0;
}

html[data-ui="11"] body {
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

html[data-ui="11"] #main-view {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100dvh;
  max-width: none;
  padding: 0;
  gap: 0;
  background: var(--bg);
}

html[data-ui="11"] #main-view > .ui-design-switcher {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 8;
  background: #fff;
  border-bottom: 1px solid var(--ms-sidebar-border);
  color: var(--ms-sidebar-fg);
}

html[data-ui="11"] #main-view > .ui-design-switcher .ui-design-label {
  color: #6b7a90;
}

html[data-ui="11"] #main-view > #menus-model-switcher {
  background: #fff;
  border-bottom: 1px solid var(--ms-sidebar-border);
}

/* When menus-model (or legacy design) switcher is visible, stack above brand studio chrome */
html[data-ui="11"] #main-view:has(> .ui-design-switcher:not(.hidden)) {
  grid-template-rows: auto auto minmax(0, 1fr);
}
html[data-ui="11"] #main-view:has(> .ui-design-switcher:not(.hidden)) > .ui-design-switcher:not(.hidden) {
  grid-column: 1 / -1;
  grid-row: 1;
}
html[data-ui="11"] #main-view:has(> .ui-design-switcher:not(.hidden)) > .topbar {
  grid-column: 2;
  grid-row: 2;
}
html[data-ui="11"] #main-view:has(> .ui-design-switcher:not(.hidden)) .ms-rail {
  grid-row: 2 / 4;
}
html[data-ui="11"] #main-view:has(> .ui-design-switcher:not(.hidden)) > .tab,
html[data-ui="11"] #main-view:has(> .ui-design-switcher:not(.hidden)) > .banner,
html[data-ui="11"] #main-view:has(> .ui-design-switcher:not(.hidden)) > .playlist-overlay {
  grid-row: 3;
}

html[data-ui="11"] a.ms-nav-link {
  color: var(--ms-sidebar-fg);
  font-size: 0.95rem;
  padding: 0.65rem 1rem;
  margin: 0.1rem 0.65rem;
  width: auto;
  border-radius: 8px;
}
html[data-ui="11"] a.ms-nav-link:hover {
  background: var(--ms-sidebar-accent);
  color: var(--accent);
}


html[data-ui="11"] #main-view > .topbar {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
  padding: 0.85rem 1.5rem;
  margin: 0;
}

html[data-ui="11"] #main-view > .topbar .logo-sm {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
}

html[data-ui="11"] #main-view > .topbar::before {
  content: "VeyoSign · admin";
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-right: auto;
}


html[data-ui="11"] .ms-layout {
  display: contents;
}

html[data-ui="11"] .ms-rail {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--ms-sidebar);
  color: var(--ms-sidebar-fg);
  padding: 1.5rem 0.85rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--ms-sidebar-border);
}

html[data-ui="11"] .ms-brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  /* bleed to full rail width (rail padding is 0.85rem) */
  padding: 0 0 1.1rem;
  margin: 0 -0.85rem;
  width: calc(100% + 1.7rem);
  box-sizing: border-box;
  color: #1a1a1a;
}

html[data-ui="11"] .ms-logo-full {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
}

html[data-ui="11"] .ms-brand-role {
  display: block;
  padding: 0 0.85rem;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: #5a6578;
}

html[data-ui="11"] .ms-nav-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #5a6578;
  padding: 0.85rem 0.85rem 0.45rem;
  margin: 0;
}

html[data-ui="11"] .ms-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.35rem;
}

html[data-ui="11"] .ms-nav button,
html[data-ui="11"] .ms-home-btn {
  text-align: left;
  width: 100%;
  height: 2.6rem;
  padding: 0 0.85rem;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ms-sidebar-fg);
  font-size: 0.9rem;
  cursor: pointer;
}

html[data-ui="11"] .ms-nav button:hover,
html[data-ui="11"] .ms-home-btn:hover {
  background: var(--ms-sidebar-accent);
  color: #1a1a1a;
}

html[data-ui="11"] .ms-nav button.active {
  background: color-mix(in srgb, var(--ms-mint) 14%, #ffffff);
  color: var(--ms-mint);
  border-color: color-mix(in srgb, var(--ms-mint) 28%, transparent);
  box-shadow: inset 3px 0 0 var(--ms-mint);
  font-weight: 600;
}

html[data-ui="11"] .ms-nav button.platform-only.hidden,
html[data-ui="11"] .ms-nav button.customer-only.hidden,
html[data-ui="11"] .ms-action-card.platform-only.hidden {
  display: none !important;
}

html[data-ui="11"] .ms-home-btn {
  margin-top: auto;
  color: #6b7a90;
  font-size: 0.85rem;
}

html[data-ui="11"] .ms-nav .tab-unread-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: var(--ms-mint);
  vertical-align: middle;
}

html[data-ui="11"] .ms-nav .tab-unread-dot[hidden] {
  display: none !important;
}

html[data-ui="11"] .ms-main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  padding: 1.5rem 1.75rem 2rem;
  overflow: auto;
}

html[data-ui="11"].ms-panel-open .ms-main {
  display: none;
}

html[data-ui="11"] #main-view > .tab {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  padding: 1.5rem 1.75rem 2rem;
  overflow: auto;
}

html[data-ui="11"] #main-view > .banner,
html[data-ui="11"] #main-view > .playlist-overlay {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  z-index: 6;
  margin: 1rem 1.5rem;
}

html[data-ui="11"] .ms-page-heading {
  margin-bottom: 1.5rem;
}

html[data-ui="11"] .ms-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: #1A6AFF;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

html[data-ui="11"] .ms-page-heading h1 {
  margin: 0 0 0.45rem;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

html[data-ui="11"] .ms-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

html[data-ui="11"] .ms-stat-card,
html[data-ui="11"] .ms-action-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}

html[data-ui="11"] .ms-stat-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

html[data-ui="11"] .ms-stat-card strong {
  font-size: 1.6rem;
  color: var(--primary, var(--accent));
}

html[data-ui="11"] .ms-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

html[data-ui="11"] .ms-action-card {
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

html[data-ui="11"] .ms-action-card:hover {
  border-color: #b8c4dc;
  box-shadow: 0 2px 8px rgba(26, 106, 255, 0.10);
}

html[data-ui="11"] .card,
html[data-ui="11"] .panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}

html[data-ui="11"] button:not(.ghost):not(.ms-nav button):not(.ms-home-btn):not(.ms-action-card):not([data-ui-pick]) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

html[data-ui="11"] button:not(.ghost):not(.ms-nav button):not(.ms-home-btn):not(.ms-action-card):not([data-ui-pick]):hover {
  background: #0f56e0;
}

html[data-ui="11"] button.ghost {
  color: var(--accent);
  border-color: var(--border);
  background: #fff;
}

html[data-ui="11"] input,
html[data-ui="11"] select,
html[data-ui="11"] textarea {
  border: 1px solid #d0d7e4;
  border-radius: 7px;
  background: #fff;
  color: var(--text);
}

html[data-ui="11"] input:focus,
html[data-ui="11"] select:focus,
html[data-ui="11"] textarea:focus {
  border-color: #1A6AFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 106, 255, 0.18);
}

html[data-ui="11"] #main-view.team-fill {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

html[data-ui="11"] #main-view.team-fill #tab-team:not(.hidden) {
  overflow: hidden;
}

html[data-ui="11"] .design-d11-note {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.8rem;
  background: #e8eefc;
  border: 1px solid #b8c9f0;
  border-radius: 7px;
  color: #1a1a1a;
}

@media (max-width: 900px) {
  html[data-ui="11"] #main-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  html[data-ui="11"] .ms-rail {
    grid-column: 1;
    grid-row: 1;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--ms-sidebar-border);
  }
  html[data-ui="11"] #main-view > .topbar {
    grid-column: 1;
    grid-row: 2;
  }
  html[data-ui="11"] .ms-main,
  html[data-ui="11"] #main-view > .tab {
    grid-column: 1;
    grid-row: 3;
  }
}


/* team chat contrast — design 11 light canvas */
html[data-ui="11"] .chat-msg .chat-body {
  color: #1a1a1a;
}
html[data-ui="11"] .chat-msg .chat-meta,
html[data-ui="11"] .chat-msg .chat-time {
  color: #5a6578;
}
html[data-ui="11"] .chat-msg .chat-author {
  color: #1a1a1a;
}
html[data-ui="11"] .chat-msg.mine .chat-author {
  color: var(--chat-mine-author, #1A6AFF);
}
html[data-ui="11"] .chat-msg.assistant .chat-author {
  color: var(--accent);
}
html[data-ui="11"] .chat-composer textarea {
  color: #1a1a1a;
  background: #ffffff;
}


/* ========== Ideas board (internal post-its) ========== */
.ideas-board-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ideas-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.ideas-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
  padding: 1.25rem;
  min-height: 420px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(139, 90, 43, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(90, 60, 30, 0.1), transparent 45%),
    linear-gradient(145deg, #c4a574 0%, #b8956a 40%, #a67c52 100%);
  border-radius: 12px;
  border: 1px solid #9a7a4f;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.08);
}
.ideas-board-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #5a4530;
  padding: 3rem 1rem;
  font-size: 0.95rem;
}
.idea-note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 160px;
  padding: 0.85rem 0.75rem 0.65rem;
  border-radius: 2px;
  box-shadow:
    2px 3px 8px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.35) inset;
  transform: rotate(var(--note-tilt, -1deg));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.idea-note:nth-child(3n) { --note-tilt: 1.2deg; }
.idea-note:nth-child(3n+1) { --note-tilt: -1.5deg; }
.idea-note:nth-child(3n+2) { --note-tilt: 0.6deg; }
.idea-note:hover {
  transform: rotate(0deg) scale(1.03);
  z-index: 2;
  box-shadow: 4px 8px 18px rgba(0,0,0,0.22);
}
.idea-note[data-color="yellow"] { background: #fff59d; }
.idea-note[data-color="pink"] { background: #f8bbd0; }
.idea-note[data-color="blue"] { background: #bbdefb; }
.idea-note[data-color="green"] { background: #c8e6c9; }
.idea-note[data-color="orange"] { background: #ffe0b2; }
.idea-note[data-color="lavender"] { background: #e1bee7; }
.idea-note-body {
  flex: 1 1 auto;
  width: 100%;
  min-height: 5.5rem;
  border: none;
  background: transparent;
  resize: vertical;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #1a1a1a;
  padding: 0;
  outline: none;
  box-shadow: none;
}
.idea-note-body:focus {
  outline: none;
  box-shadow: none;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
}
.idea-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #4a5568;
}
.idea-note-author { font-weight: 600; color: #2d3748; }
.idea-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: space-between;
}
.idea-color-swatches {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.idea-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 0;
}
.idea-swatch[data-color="yellow"] { background: #fff59d; }
.idea-swatch[data-color="pink"] { background: #f8bbd0; }
.idea-swatch[data-color="blue"] { background: #bbdefb; }
.idea-swatch[data-color="green"] { background: #c8e6c9; }
.idea-swatch[data-color="orange"] { background: #ffe0b2; }
.idea-swatch[data-color="lavender"] { background: #e1bee7; }
.idea-swatch.active {
  outline: 2px solid #1A6AFF;
  outline-offset: 1px;
}
.idea-note-del {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  height: auto;
  border-radius: 4px;
}
html[data-ui="11"] .idea-note-body {
  color: #1a1a1a;
}


/* Installer / Guide / Wiki readability on design 11 */
html[data-ui="11"] .markdown-body,
html[data-ui="11"] .markdown-body p,
html[data-ui="11"] .markdown-body li,
html[data-ui="11"] .markdown-body td,
html[data-ui="11"] .docs-panel p,
html[data-ui="11"] #tab-installer,
html[data-ui="11"] #tab-guide,
html[data-ui="11"] #tab-wiki {
  color: #1a1a1a;
}
html[data-ui="11"] .markdown-body h1,
html[data-ui="11"] .markdown-body h2,
html[data-ui="11"] .markdown-body h3 {
  color: #1a1a1a;
}
html[data-ui="11"] .markdown-body code,
html[data-ui="11"] .markdown-body pre {
  color: #1a1a1a;
  background: #eef1f7;
}
html[data-ui="11"] .markdown-body th {
  background: #e8eefc;
  color: #1a1a1a;
}
html[data-ui="11"] .markdown-body blockquote {
  color: #5a6578;
  background: #f4f6fa;
}
html[data-ui="11"] .docs-stamp {
  color: #5a6578;
}
html[data-ui="11"] #tab-installer .panel,
html[data-ui="11"] #tab-guide .panel,
html[data-ui="11"] #tab-wiki .panel,
html[data-ui="11"] #tab-installer pre,
html[data-ui="11"] #installer-script,
html[data-ui="11"] #tab-installer code {
  color: #1a1a1a;
}


/* Team chat reactions — design 11 */
html[data-ui="11"] .chat-rx-pill {
  background: #f0f3f8;
  color: var(--chat-body-fg, #1a1a1a);
}
html[data-ui="11"] .chat-rx-pill.mine {
  background: color-mix(in srgb, #1A6AFF 14%, #fff);
}
html[data-ui="11"] .chat-rx-picker {
  background: #fff;
}
html[data-ui="11"] .chat-msg {
  max-width: min(92%, 920px);
}