/*
 * TRIVUS dashboard theme (v2). Loaded LAST: it is the single source of the dashboard's colours, surfaces and the look
 * of shared components. Older stylesheets still provide layout; anything visual they set is overridden here so the
 * whole dashboard reads as one system:
 *   - one dark canvas and ONE surface level (cards); nested blocks are separated by lines, not more boxes;
 *   - neutral borders and text; the teal accent marks actions and the current place only;
 *   - every system has its own tone (--mod) used for its icon, active marks and switches, so pages are easy to tell apart.
 * Scoped with html[data-theme="v2"] for specificity over the legacy layers; !important only where a legacy layer uses it.
 */

html[data-theme="v2"] {
  --t-bg: #0e1114;
  --t-sidebar: #0e1114;
  --t-surface: #14181b;
  --t-surface-hover: #181d20;
  --t-input: #14181b;
  --t-line: #1f2428;
  --t-line-strong: #2a3034;
  --t-text: #e8eceb;
  --t-text-soft: #c7cecf;
  --t-popover: #121619;
  --t-input-deep: #101416;
  --t-accent-strong: color-mix(in srgb, var(--t-accent) 70%, #ffffff);
  --t-accent-hover: color-mix(in srgb, var(--t-accent) 78%, #ffffff);
  --t-accent-line: color-mix(in srgb, var(--t-accent) 33%, transparent);
  --t-muted: #8e979a;
  --t-faint: #6b7477;
  --t-accent: #9fdcc8;
  --t-accent-ink: #0b1a16;
  --t-accent-soft: color-mix(in srgb, var(--t-accent) 12%, transparent);
  --t-success: var(--t-accent);
  --t-warning: #e6b86a;
  --t-danger: #e77b84;
  --t-radius: 12px;
  --t-radius-sm: 10px;
  --mod: var(--t-accent);

  /* Legacy token families, all pointed at the same palette. */
  --triva-bg: var(--t-bg); --triva-sidebar: var(--t-sidebar); --triva-panel: var(--t-surface); --triva-panel-raised: var(--t-surface-hover);
  --triva-gold: var(--t-accent); --triva-gold-soft: #c4ece0; --triva-text: var(--t-text); --triva-muted: var(--t-muted); --triva-focus: #c4ece0;
  --human-bg: var(--t-bg); --human-surface: var(--t-surface); --human-surface-raised: var(--t-surface-hover); --human-border: var(--t-line);
  --human-border-strong: var(--t-line-strong); --human-text: var(--t-text); --human-muted: var(--t-muted); --human-gold: var(--t-accent);
  --brand-bg: var(--t-bg); --brand-header: var(--t-bg); --brand-surface: var(--t-surface); --brand-surface-raised: var(--t-surface-hover);
  --ui-panel: var(--t-surface); --ui-border: var(--t-line); --ui-input: var(--t-input); --ui-text: var(--t-text); --ui-muted: var(--t-muted);
  --ui-accent: var(--t-accent); --ui-accent-hover: var(--t-accent-hover); --ui-on-accent: var(--t-accent-ink); --ui-accent-soft: var(--t-accent-soft); --set-line: var(--t-line);
  color-scheme: dark;
}


/* ---------- Dashboard themes (Pro and custom bots choose one for their server) ---------- */
html[data-theme="v2"][data-dash-theme="obsidian"] { --t-bg: #050607; --t-sidebar: #050607; --t-surface: #0d0f10; --t-surface-hover: #121517; --t-input: #0d0f10; --t-line: #191c1e; --t-line-strong: #24282b; --t-text: #ececec; --t-text-soft: #c9cccd; --t-muted: #8a8f92; --t-faint: #64696c; --t-popover: #101213; --t-input-deep: #0a0b0c; --t-accent: #9fdcc8; }
html[data-theme="v2"][data-dash-theme="ocean"] { --t-bg: #0a1020; --t-sidebar: #0a1020; --t-surface: #111a2e; --t-surface-hover: #162138; --t-input: #111a2e; --t-line: #1c2740; --t-line-strong: #283554; --t-text: #e7ecf7; --t-text-soft: #c4cde0; --t-muted: #8b97b3; --t-faint: #66708a; --t-popover: #131d33; --t-input-deep: #0d1527; --t-accent: #7cc4ff; }
html[data-theme="v2"][data-dash-theme="forest"] { --t-bg: #0a120e; --t-sidebar: #0a120e; --t-surface: #111c16; --t-surface-hover: #16231c; --t-input: #111c16; --t-line: #1b2a22; --t-line-strong: #26392e; --t-text: #e6efe9; --t-text-soft: #c3d2c9; --t-muted: #8aa196; --t-faint: #677a70; --t-popover: #13201a; --t-input-deep: #0d1712; --t-accent: #8ee0a6; }
html[data-theme="v2"][data-dash-theme="plum"] { --t-bg: #110c18; --t-sidebar: #110c18; --t-surface: #1a1324; --t-surface-hover: #21182e; --t-input: #1a1324; --t-line: #281e36; --t-line-strong: #352848; --t-text: #efe9f7; --t-text-soft: #d3c9e0; --t-muted: #a196b3; --t-faint: #7a708b; --t-popover: #1d1528; --t-input-deep: #150f1d; --t-accent: #c9a7ff; }
html[data-theme="v2"][data-dash-theme="ember"] { --t-bg: #140d0b; --t-sidebar: #140d0b; --t-surface: #1e1512; --t-surface-hover: #261b17; --t-input: #1e1512; --t-line: #2d201b; --t-line-strong: #3c2b24; --t-text: #f5ece8; --t-text-soft: #dccbc3; --t-muted: #b09a90; --t-faint: #85726a; --t-popover: #221814; --t-input-deep: #18100d; --t-accent: #ffb38a; }
html[data-theme="v2"][data-dash-theme="slate"] { --t-bg: #0f1217; --t-sidebar: #0f1217; --t-surface: #171b22; --t-surface-hover: #1d222a; --t-input: #171b22; --t-line: #232934; --t-line-strong: #2f3644; --t-text: #e9edf3; --t-text-soft: #c6ccd7; --t-muted: #8f98a8; --t-faint: #6a7281; --t-popover: #1a1f27; --t-input-deep: #12161b; --t-accent: #a5b4fc; }
/* One accent everywhere (the logo's mint); systems are told apart by name and icon, not colour. */

/* ---------- Canvas ---------- */
html[data-theme="v2"] body,
html[data-theme="v2"] body #appView.app-shell,
html[data-theme="v2"] body #appView.app-shell > .main,
html[data-theme="v2"] body #appView.app-shell .topbar { background: var(--t-bg) !important; color: var(--t-text); }
html[data-theme="v2"] body #appView.app-shell ::selection { background: var(--t-accent-soft); }
html[data-theme="v2"] body #appView.app-shell :focus-visible { outline: 2px solid var(--t-accent-strong); outline-offset: 2px; }
html[data-theme="v2"] body #appView.app-shell .muted,
html[data-theme="v2"] body #appView.app-shell .dev-muted { color: var(--t-muted) !important; }

/* ---------- Sidebar: flat, one level, tone per system ---------- */
html[data-theme="v2"] body #appView.app-shell .sidebar { background: var(--t-sidebar) !important; border-inline-end: 1px solid var(--t-line) !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .workspace-switcher { background: var(--t-surface) !important; border-color: var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell .workspace-switcher:hover { border-color: var(--t-line-strong) !important; }
html[data-theme="v2"] body #appView.app-shell .system-nav-group { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .system-nav-items { border: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .system-nav-trigger { color: var(--t-text); }
html[data-theme="v2"] body #appView.app-shell .system-nav-count { background: transparent !important; border-color: var(--t-line-strong) !important; color: var(--t-muted) !important; }
html[data-theme="v2"] body #appView.app-shell .system-nav-section,
html[data-theme="v2"] body #appView.app-shell .nav-heading { color: var(--t-faint) !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item { color: var(--t-text-soft) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: 10px; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item svg { color: var(--mod); stroke: currentColor; opacity: 0.9; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item:hover { background: var(--t-surface) !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item.active { background: color-mix(in srgb, var(--mod) 13%, transparent) !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item.active::before,
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item.active::after { background: var(--mod) !important; }
/* Running / stopped is visible in the menu: green dot when on, hollow when off. */
html[data-theme="v2"] body #appView.app-shell .sidebar .status-dot { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: transparent !important; box-shadow: inset 0 0 0 1.5px #4f5d5b !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .status-dot.on { background: var(--t-success) !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .status-dot.locked { width: 20px !important; height: 20px !important; border-radius: 6px !important; box-shadow: none !important; background: #1b2224 !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item.nested:not(:has(.status-dot.on)):not(.active) > span[data-i18n] { opacity: 0.7; }
html[data-theme="v2"] body #appView.app-shell .nav-pro-chip { background: rgba(169, 139, 255, 0.14) !important; color: #c9b8ff !important; border-color: transparent !important; }

/* ---------- Top bar: quiet links, the current one marked ---------- */
html[data-theme="v2"] body #appView.app-shell .topbar { border-bottom: 1px solid var(--t-line) !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .topbar .eyebrow { color: var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell .topbar .topbar-shortcut,
html[data-theme="v2"] body #appView.app-shell .topbar .topbar-shortcut.nav-item,
html[data-theme="v2"] body #appView.app-shell .topbar .icon-button { background: transparent !important; border-color: transparent !important; color: var(--t-text-soft) !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .topbar .topbar-shortcut:hover,
html[data-theme="v2"] body #appView.app-shell .topbar .icon-button:hover { background: var(--t-surface) !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .topbar .topbar-shortcut.active,
html[data-theme="v2"] body #appView.app-shell .topbar .topbar-shortcut[aria-current="page"] { background: var(--t-accent-soft) !important; color: var(--t-accent-strong) !important; }
html[data-theme="v2"] body #appView.app-shell .header-account,
html[data-theme="v2"] body #appView.app-shell .account-menu { background: var(--t-surface) !important; border-color: var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell .account-menu { inset-inline-start: auto !important; inset-inline-end: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-lang button[aria-pressed="true"],
html[data-theme="v2"] body #appView.app-shell .topbar-lang button.active { background: var(--t-surface-hover) !important; }

/* ---------- Surfaces: one card level ---------- */
html[data-theme="v2"] body #appView.app-shell :is(.panel, .overview-panel, .insight-panel, .field-group, .dev-desk > header, .overview-kpi, .home5-stat) {
  background: var(--t-surface) !important; border: 1px solid var(--t-line) !important; border-radius: var(--t-radius) !important; box-shadow: none !important;
}
/* A card inside a card loses its box: content is separated by spacing and a hairline instead. */
html[data-theme="v2"] body #appView.app-shell :is(.panel, .field-group, .overview-panel) :is(.panel, .developer-section, .record-details, .switch-row.preference-toggle, .bot-text-row) {
  background: transparent !important; box-shadow: none !important;
}
html[data-theme="v2"] body #appView.app-shell .field-group[open] { border-color: var(--t-line) !important; background: var(--t-surface) !important; }
html[data-theme="v2"] body #appView.app-shell .field-group > summary { padding-inline: 4px; }
html[data-theme="v2"] body #appView.app-shell .field-group h3 { color: var(--t-text); font-weight: 700; }
html[data-theme="v2"] body #appView.app-shell .field-group h3::before { background: var(--mod) !important; opacity: 1; }
html[data-theme="v2"] body #appView.app-shell :is(.section-icon, .settings-head-icon, .kpi-icon) { background: color-mix(in srgb, var(--mod) 14%, transparent) !important; border-color: transparent !important; color: var(--mod) !important; }
html[data-theme="v2"] body #appView.app-shell :is(.section-icon, .settings-head-icon, .kpi-icon) svg { stroke: var(--mod) !important; color: var(--mod) !important; }
html[data-theme="v2"] body #appView.app-shell #settingsForm .settings-head { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-inline: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .group-chevron { background: transparent !important; }

/* ---------- System page tabs: a plain underline row ---------- */
html[data-theme="v2"] body #appView.app-shell .settings-sections { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; padding: 0 !important; gap: 2px !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .settings-sections button { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--t-muted) !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .settings-sections button:hover { color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .settings-sections button:is(.active, [aria-current="true"], [aria-selected="true"]) { color: var(--t-text) !important; border-bottom-color: var(--mod) !important; background: transparent !important; }

/* ---------- Controls ---------- */
html[data-theme="v2"] body #appView.app-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, .resource-picker > summary, details.resource-picker) {
  background: var(--t-input) !important; border-color: var(--t-line-strong) !important; color: var(--t-text) !important;
}
html[data-theme="v2"] body #appView.app-shell :is(input, select, textarea):focus { border-color: var(--t-accent) !important; box-shadow: 0 0 0 3px var(--t-accent-soft) !important; outline: none; }
html[data-theme="v2"] body #appView.app-shell ::placeholder { color: #66736f !important; opacity: 1; }
html[data-theme="v2"] body #appView.app-shell .switch-row { background: transparent !important; border-color: var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell input:checked + .switch,
html[data-theme="v2"] body #appView.app-shell .switch-row input:checked ~ .switch { background: var(--mod) !important; border-color: var(--mod) !important; }
html[data-theme="v2"] body #appView.app-shell .switch { background: #2a3436 !important; border-color: transparent !important; }

html[data-theme="v2"] body #appView.app-shell .button { border-radius: 10px !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .button.primary { background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: var(--t-accent-ink) !important; }
html[data-theme="v2"] body #appView.app-shell .button.primary:hover { background: var(--t-accent-hover) !important; border-color: var(--t-accent-hover) !important; }
html[data-theme="v2"] body #appView.app-shell .button:is(.ghost, .secondary) { background: transparent !important; border: 1px solid var(--t-line-strong) !important; color: var(--t-text-soft) !important; }
html[data-theme="v2"] body #appView.app-shell .button:is(.ghost, .secondary):hover { background: var(--t-surface-hover) !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .button.danger { background: rgba(240, 113, 126, 0.12) !important; border-color: transparent !important; color: #f6a9b1 !important; }
html[data-theme="v2"] body #appView.app-shell .empty-state { background: transparent !important; border: 1px dashed var(--t-line-strong) !important; color: var(--t-muted) !important; }

/* ---------- Overview ---------- */


/* ---------- Developer centre ---------- */
html[data-theme="v2"] body #appView.app-shell .dev-shell > nav,
html[data-theme="v2"] body #appView.app-shell .dev-nav { background: var(--t-surface) !important; border-color: var(--t-line) !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell [data-hosting-tab].active { background: var(--t-accent-soft) !important; color: var(--t-accent-strong) !important; }

/* ---------- Bot texts (developers) ---------- */
html[data-theme="v2"] body #appView.app-shell .bot-texts-save { display: flex; align-items: center; gap: 12px; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-dirty { color: var(--t-warning); font-size: 13px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-layout > nav.bot-texts-systems { flex: 1 1 190px; max-width: 220px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 90px; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-systems button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--t-text-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: start; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-systems button span { background: transparent !important; padding: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-systems button b { color: var(--t-faint); font-size: 12px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-systems button:hover { background: var(--t-surface-hover); }
html[data-theme="v2"] body #appView.app-shell .bot-texts-systems button[aria-current="true"] { background: var(--t-accent-soft); color: var(--t-accent-strong); }
html[data-theme="v2"] body #appView.app-shell .bot-texts-main { flex: 999 1 520px; min-width: 0; display: grid; gap: 22px; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-search { flex: 1 1 260px; height: 42px; padding: 0 14px; border: 1px solid var(--t-line-strong); border-radius: 10px; font: inherit; font-size: 14px; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-filters { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-filters button { height: 36px; padding: 0 14px; border: 1px solid var(--t-line-strong); border-radius: 18px; background: transparent; color: var(--t-text-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-filters button[aria-pressed="true"] { background: var(--t-text); border-color: var(--t-text); color: var(--t-bg); }
html[data-theme="v2"] body #appView.app-shell .bot-texts-kind > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--t-text); }
html[data-theme="v2"] body #appView.app-shell .bot-texts-kind > h4 span { padding: 1px 8px; border-radius: 9px; background: var(--t-surface-hover); color: var(--t-muted); font-size: 12px; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-section { margin: 14px 0 2px; color: var(--t-faint); font-size: 12px; font-weight: 700; letter-spacing: 0.2px; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-list { display: grid; gap: 0; border: 1px solid var(--t-line); border-radius: 12px; padding: 0 14px; background: transparent; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-list > .bot-texts-section:first-child { margin-top: 12px; }
html[data-theme="v2"] body #appView.app-shell .bot-text-row { display: grid; gap: 10px; padding: 14px 0 !important; border: 0 !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; background: transparent !important; }
html[data-theme="v2"] body #appView.app-shell .bot-text-row:last-child { border-bottom: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .bot-text-row.changed > header strong { color: var(--t-accent-strong); }
html[data-theme="v2"] body #appView.app-shell .bot-text-row > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html[data-theme="v2"] body #appView.app-shell .bot-text-row > header strong { flex: 1 1 240px; min-width: 0; font-size: 14px; font-weight: 600; white-space: normal; }
html[data-theme="v2"] body #appView.app-shell .bot-text-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-theme="v2"] body #appView.app-shell .bot-text-tags em { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-style: normal; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .bot-text-tags em.aud.members { background: rgba(111, 168, 255, 0.14); color: #a9c9ff; }
html[data-theme="v2"] body #appView.app-shell .bot-text-tags em.aud.staff { background: rgba(242, 180, 90, 0.14); color: #f7d49c; }
html[data-theme="v2"] body #appView.app-shell .bot-text-tags em.on { background: var(--t-accent-soft); color: var(--t-accent-strong); }
html[data-theme="v2"] body #appView.app-shell .bot-text-tags code { color: var(--t-faint); font-size: 10px; direction: ltr; }
html[data-theme="v2"] body #appView.app-shell .bot-text-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px 40px; align-items: end; gap: 10px; }
html[data-theme="v2"] body #appView.app-shell .bot-text-fields.button { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) minmax(150px, auto) 40px; }
html[data-theme="v2"] body #appView.app-shell .bot-text-fields label,
html[data-theme="v2"] body #appView.app-shell .bot-text-preview { display: grid; gap: 6px; min-width: 0; margin: 0; }
html[data-theme="v2"] body #appView.app-shell .bot-text-fields label > span,
html[data-theme="v2"] body #appView.app-shell .bot-text-preview > span { color: var(--t-faint); font-size: 12px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .bot-text-fields :is(textarea, input) { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--t-line-strong); border-radius: 9px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
html[data-theme="v2"] body #appView.app-shell .bot-text-fields input.invalid { border-color: var(--t-danger) !important; }
html[data-theme="v2"] body #appView.app-shell .bot-text-reset { width: 40px; height: 40px; border: 1px solid var(--t-line-strong); border-radius: 9px; background: transparent; color: var(--t-muted); display: grid; place-items: center; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .bot-text-reset:hover { color: var(--t-text); background: var(--t-surface-hover); }
html[data-theme="v2"] body #appView.app-shell .bot-text-reset svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Discord-like button preview. */
html[data-theme="v2"] body #appView.app-shell .bt-preview { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 8px; background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; box-sizing: border-box; overflow: hidden; white-space: nowrap; }
html[data-theme="v2"] body #appView.app-shell .bt-preview-emoji { font-size: 18px; line-height: 1; }
html[data-theme="v2"] body #appView.app-shell img.bt-preview-emoji { width: 20px; height: 20px; object-fit: contain; }
html[data-theme="v2"] body #appView.app-shell .bot-text-only { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--t-muted); font-size: 13px; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .bot-text-only input { width: 16px; height: 16px; accent-color: var(--t-accent); }
html[data-theme="v2"] body #appView.app-shell .bot-text-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; color: var(--t-faint); font-size: 12px; }
html[data-theme="v2"] body #appView.app-shell .bot-text-vars code { padding: 1px 6px; border-radius: 5px; background: var(--t-surface-hover); color: var(--t-accent-strong); direction: ltr; }
html[data-theme="v2"] body #appView.app-shell .bot-texts-more { justify-self: start; margin-top: 10px; }

@media (max-width: 1100px) {
  html[data-theme="v2"] body #appView.app-shell .bot-text-fields,
  html[data-theme="v2"] body #appView.app-shell .bot-text-fields.button { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-theme="v2"] body #appView.app-shell .bot-texts-layout > nav.bot-texts-systems { position: static; max-width: none; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 620px) {
  html[data-theme="v2"] body #appView.app-shell .bot-text-fields,
  html[data-theme="v2"] body #appView.app-shell .bot-text-fields.button { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="v2"] body #appView.app-shell * { transition: none !important; animation: none !important; }
}

/* ---------- System pages (as in the approved mock-up) ---------- */
/* Header: the on/off switch is a coloured pill that says whether the system runs. */
html[data-theme="v2"] body #appView.app-shell #moduleToggleWrap { border-radius: 12px !important; border: 1px solid var(--t-line-strong) !important; background: transparent !important; padding: 8px 14px !important; }
html[data-theme="v2"] body #appView.app-shell #moduleToggleWrap:has(input:checked) { background: color-mix(in srgb, var(--mod) 16%, transparent) !important; border-color: transparent !important; color: var(--t-text) !important; font-weight: 700; }
html[data-theme="v2"] body #appView.app-shell .settings-head h2 { font-size: 24px; }

/* A section with a message: settings on one side, the live Discord preview beside them (sticky while scrolling). */
@media (min-width: 1180px) {
  html[data-theme="v2"] body #appView.app-shell .field-group-body:has(> .message-live-preview),
  html[data-theme="v2"] body #appView.app-shell [data-preview-host]:has(> .message-live-preview) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(340px, 0.95fr) !important; column-gap: 18px !important; row-gap: 0 !important; align-items: start;
  }
  html[data-theme="v2"] body #appView.app-shell .field-group-body:has(> .message-live-preview) > :not(.message-live-preview),
  html[data-theme="v2"] body #appView.app-shell [data-preview-host]:has(> .message-live-preview) > :not(.message-live-preview) { grid-column: 1 / 3 !important; }
  html[data-theme="v2"] body #appView.app-shell .field-group-body:has(> .message-live-preview) > .field:not(.full),
  html[data-theme="v2"] body #appView.app-shell [data-preview-host]:has(> .message-live-preview) > .field:not(.full) { grid-column: auto !important; }
  html[data-theme="v2"] body #appView.app-shell :is(.field-group-body, [data-preview-host]) > .message-live-preview {
    grid-column: 3 !important; grid-row: 1 / span 40 !important; align-self: start; position: sticky; top: 96px; margin-top: 0 !important;
  }
  /* 40 implicit rows hold the preview; gaps between them would add up, so fields carry their own spacing. */
  html[data-theme="v2"] body #appView.app-shell :is(.field-group-body, [data-preview-host]):has(> .message-live-preview) > :not(.message-live-preview) { margin-block-end: 16px; }
}
html[data-theme="v2"] body #appView.app-shell .message-live-preview { border: 1px solid var(--t-line) !important; border-radius: var(--t-radius) !important; background: var(--t-bg) !important; }
html[data-theme="v2"] body #appView.app-shell .message-live-preview > header { background: transparent !important; border-bottom: 1px solid var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell .message-live-preview .discord-preview-stage { background: #313338 !important; }

/* Options: a plain list, one row per switch, separated by hairlines (no box per option). */
html[data-theme="v2"] body #appView.app-shell .check-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; grid-column: 1 / -1; }
html[data-theme="v2"] body #appView.app-shell .check-grid > .switch-row,
html[data-theme="v2"] body #appView.app-shell .field-group-body > .switch-row { min-height: 56px; padding: 12px 2px !important; border: 0 !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; background: transparent !important; }
html[data-theme="v2"] body #appView.app-shell .check-grid > .switch-row:last-child { border-bottom: 0 !important; }

/* Field labels and hints read clearly; inputs get one height. */
html[data-theme="v2"] body #appView.app-shell .field > label { color: var(--t-text-soft) !important; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .field :is(small, .hint, .field-hint) { color: var(--t-faint) !important; }
html[data-theme="v2"] body #appView.app-shell .field :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 44px; border-radius: 10px !important; }

/* The save bar: one strip at the bottom, the unsaved note in amber. */
html[data-theme="v2"] body #appView.app-shell .save-bar,
html[data-theme="v2"] body #appView.app-shell [class*="save-bar"] { background: var(--t-surface) !important; border: 1px solid var(--t-line-strong) !important; border-radius: var(--t-radius) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; }
html[data-theme="v2"] body #appView.app-shell .save-status { color: var(--t-warning) !important; font-weight: 600; }

/* Server copy of bot texts (inside each system page): name beside its fields, like the mock-up. */
html[data-theme="v2"] body #appView.app-shell .bot-texts-server .bot-texts-list { padding: 0 16px; }
html[data-theme="v2"] body #appView.app-shell .bot-text-fields.server { grid-template-columns: minmax(0, 1fr) 150px !important; }

/* Inner blocks of a section (component editors, ticket kinds, word lists, extra appearance): no second card. A hairline
   frame keeps them grouped; the background stays the section's. */
html[data-theme="v2"] body #appView.app-shell .field-group :is(.component-editor, .ticket-type, .ticket-words-block, .settings-appearance, .preference-toggle) {
  background: transparent !important; border-color: var(--t-line) !important; box-shadow: none !important;
}
html[data-theme="v2"] body #appView.app-shell .field-group .ticket-type[open] { border-color: var(--t-line-strong) !important; }
html[data-theme="v2"] body #appView.app-shell .field-group :is(.component-seg, .component-colors) { background: var(--t-input) !important; border-color: var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell .field-group code { background: color-mix(in srgb, var(--mod) 12%, transparent) !important; color: color-mix(in srgb, var(--mod) 70%, white) !important; }
html[data-theme="v2"] body #appView.app-shell .discord-preview-card { background: #2b2d31 !important; border-color: #3f4147 !important; }
html[data-theme="v2"] body #appView.app-shell .discord-preview-card::before { background: var(--mod) !important; }

/* ---------- Domain email (developers) ---------- */
html[data-theme="v2"] body #appView.app-shell .mail-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html[data-theme="v2"] body #appView.app-shell .mail-state-badge { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--t-surface-hover); color: var(--t-muted); font-size: 13px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .mail-state-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html[data-theme="v2"] body #appView.app-shell .mail-state-badge[data-state="ok"] { background: rgba(76, 214, 142, 0.12); color: var(--t-success); }
html[data-theme="v2"] body #appView.app-shell .mail-state-badge[data-state="partial"] { background: rgba(242, 180, 90, 0.12); color: var(--t-warning); }
html[data-theme="v2"] body #appView.app-shell .mail-state-badge[data-state="off"] { background: rgba(240, 113, 126, 0.12); color: var(--t-danger); }
html[data-theme="v2"] body #appView.app-shell .mail-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--t-line); margin: 0 0 14px; padding: 0; background: transparent; border-radius: 0; }
html[data-theme="v2"] body #appView.app-shell .mail-tabs button { height: 42px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--t-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 0; }
html[data-theme="v2"] body #appView.app-shell .mail-tabs button:hover { color: var(--t-text); }
html[data-theme="v2"] body #appView.app-shell .mail-tabs button[aria-pressed="true"] { color: var(--t-text); border-bottom-color: var(--t-accent); }
html[data-theme="v2"] body #appView.app-shell .mail-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
html[data-theme="v2"] body #appView.app-shell .mail-bar .mail-folders { margin: 0; border-bottom: 0; }
html[data-theme="v2"] body #appView.app-shell .mail-bar .mail-folders button { height: 36px; border-bottom: 0; border-radius: 9px; }
html[data-theme="v2"] body #appView.app-shell .mail-bar .mail-folders button[aria-pressed="true"] { background: var(--t-accent-soft); color: var(--t-accent-strong); }
html[data-theme="v2"] body #appView.app-shell .mail-filters { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .mail-filters input[type="search"] { width: 240px; max-width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--t-line-strong); border-radius: 9px; font: inherit; font-size: 14px; }
html[data-theme="v2"] body #appView.app-shell .mail-filters select { height: 38px; padding: 0 10px; border: 1px solid var(--t-line-strong); border-radius: 9px; font: inherit; font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .mail-filters .mail-check { display: inline-flex; align-items: center; gap: 6px; color: var(--t-muted); font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .mail-split { border: 1px solid var(--t-line) !important; border-radius: 12px !important; background: transparent !important; }
html[data-theme="v2"] body #appView.app-shell .mail-config,
html[data-theme="v2"] body #appView.app-shell .mail-more { margin-top: 16px; border: 1px solid var(--t-line); border-radius: 12px; padding: 0 14px; background: transparent; }
html[data-theme="v2"] body #appView.app-shell .mail-config > summary,
html[data-theme="v2"] body #appView.app-shell .mail-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--t-muted); font-size: 14px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .mail-config[open],
html[data-theme="v2"] body #appView.app-shell .mail-more[open] { padding-bottom: 14px; }
html[data-theme="v2"] body #appView.app-shell .mail-filters > * { width: auto !important; min-width: 0; grid-column: auto !important; }
html[data-theme="v2"] body #appView.app-shell .mail-filters select { width: 150px !important; }

/* =====================================================================================================
   PRO LAYOUT (approved mock-up "النسخة الاحترافية"): fewer boxes, rows instead of cards, mint only on
   actions, key numbers, the current place and switches that are on.
   ===================================================================================================== */
html[data-theme="v2"] body #appView.app-shell { font-size: 14px; }
html[data-theme="v2"] body #appView.app-shell .sidebar a.nav-item { text-decoration: none; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item svg { color: var(--t-faint) !important; opacity: 1; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item.active svg { color: var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item.active { background: var(--t-surface-hover) !important; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item.active::before,
html[data-theme="v2"] body #appView.app-shell .sidebar .nav-item.active::after { display: none !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .status-dot { width: 6px !important; height: 6px !important; }
html[data-theme="v2"] body #appView.app-shell .nav-pro-chip { background: transparent !important; color: var(--t-faint) !important; border: 1px solid var(--t-line-strong) !important; }
html[data-theme="v2"] body #appView.app-shell .topbar .eyebrow { color: var(--t-faint) !important; }
html[data-theme="v2"] body #appView.app-shell :is(.section-icon, .settings-head-icon, .kpi-icon) { background: transparent !important; color: var(--t-faint) !important; }
html[data-theme="v2"] body #appView.app-shell :is(.section-icon, .settings-head-icon, .kpi-icon) svg { stroke: var(--t-faint) !important; color: var(--t-faint) !important; }

/* ---------- Overview ---------- */
/* The four numbers are one strip, split by hairlines. */
html[data-theme="v2"] body #appView.app-shell .overview-kpis { gap: 0 !important; border: 1px solid var(--t-line); border-radius: var(--t-radius); background: var(--t-surface); overflow: hidden; }
html[data-theme="v2"] body #appView.app-shell .overview-kpi { border: 0 !important; border-radius: 0 !important; background: transparent !important; border-inline-start: 1px solid var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell .overview-kpi:first-child { border-inline-start: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .overview-kpi .kpi-icon { display: none !important; }
html[data-theme="v2"] body #appView.app-shell .overview-kpi strong { font-size: 28px !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .overview-kpi .ov-trend { color: var(--t-muted) !important; }
/* Panels below lose their card: a heading, the content, and a hairline between blocks. */
html[data-theme="v2"] body #appView.app-shell #overviewPage :is(.overview-panel:not(.ov-strip), .insight-panel) { background: transparent !important; border: 0 !important; border-top: 1px solid var(--t-line) !important; border-radius: 0 !important; padding-inline: 0 !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage .ov-strip { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; padding-inline: 0 !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage .ov-fact { background: transparent !important; border: 1px solid var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage .ov-wizard-banner { background: transparent !important; border: 1px solid var(--t-line) !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage .ov-wizard-badge { background: transparent !important; color: var(--t-accent) !important; border: 0 !important; padding: 0 !important; }
/* Small number tiles inside a block become rows: label, then the number at the far end. */
html[data-theme="v2"] body #appView.app-shell #overviewPage :is(.metric-pairs, .hierarchy-grid) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage :is(.metric-pairs, .hierarchy-grid) > div { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: space-between !important; min-height: 0 !important; padding: 10px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage :is(.metric-pairs, .hierarchy-grid) > div:last-child { border-bottom: 0 !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage :is(.metric-pairs, .hierarchy-grid) > div :is(b, strong) { font-size: 15px !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage :is(.metric-pairs, .hierarchy-grid) > div:first-child :is(b, strong) { color: var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage :is(.metric-pairs, .hierarchy-grid) > div :is(span, small) { color: var(--t-muted) !important; font-size: 13px !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage .ov-growth-bars .join,
html[data-theme="v2"] body #appView.app-shell #overviewPage .ov-growth-bars span.join { background: var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage .ov-growth-bars .leave { background: #3c4a46 !important; }
html[data-theme="v2"] body #appView.app-shell #overviewPage .eyebrow,
html[data-theme="v2"] body #appView.app-shell #overviewPage header .eyebrow { color: var(--t-faint) !important; }

/* ---------- System pages: sections are headings, settings are rows ---------- */
html[data-theme="v2"] body #appView.app-shell #formFields .field-group { background: transparent !important; border: 0 !important; border-top: 1px solid var(--t-line) !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group:first-child { border-top: 0 !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group > summary { min-height: 0 !important; padding: 22px 0 6px !important; border: 0 !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group > summary .section-icon,
html[data-theme="v2"] body #appView.app-shell #formFields .field-group > summary .group-toggle { display: none !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group h3 { font-size: 13px !important; font-weight: 600 !important; color: var(--t-muted) !important; padding: 0 !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group h3::before { display: none !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .section-heading p { display: none !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group-body { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 0 18px !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group-body > * { grid-column: 1 / -1 !important; }
/* One row per setting: the name (and its short note) on one side, the control on the other. */
html[data-theme="v2"] body #appView.app-shell #formFields .field-group-body > .field:not(.full):not(.component-editor) {
  display: grid !important; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.3fr); grid-template-areas: "label control" "note control"; align-items: center; column-gap: 28px; row-gap: 2px; padding: 12px 0; margin: 0 !important; border-bottom: 1px solid var(--t-line);
}
html[data-theme="v2"] body #appView.app-shell #formFields .field-group-body > .field:not(.full):not(.component-editor) > label { grid-area: label; margin: 0 !important; font-size: 14px !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group-body > .field:not(.full):not(.component-editor) > :is(input, select, textarea, details, .resource-picker, div:not(.hint):not(.field-hint)) { grid-area: control; }
html[data-theme="v2"] body #appView.app-shell #formFields .field-group-body > .field:not(.full):not(.component-editor) > :is(small, p, .hint, .field-hint) { grid-area: note; margin: 0 !important; font-size: 12px !important; color: var(--t-faint) !important; line-height: 1.5; }
html[data-theme="v2"] body #appView.app-shell #formFields .field.full { padding: 12px 0; border-bottom: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell #formFields .field > label { font-size: 14px !important; }
html[data-theme="v2"] body #appView.app-shell #formFields :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, .resource-picker > summary) { min-height: 38px !important; height: auto; border-radius: 9px !important; font-size: 13px !important; }
html[data-theme="v2"] body #appView.app-shell #formFields .muted:not(.field *) { font-size: 12px !important; color: var(--t-faint) !important; }
/* Switches: a row, the name on one side and the switch on the other; mint only when on. */
html[data-theme="v2"] body #appView.app-shell #formFields .switch-row { min-height: 48px; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; background: transparent !important; }
html[data-theme="v2"] body #appView.app-shell .switch-row input[type="checkbox"] { width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; inset-inline-start: 0; top: 0; pointer-events: none; }
html[data-theme="v2"] body #appView.app-shell input:checked + .switch,
html[data-theme="v2"] body #appView.app-shell .switch-row input:checked ~ .switch { background: var(--t-accent) !important; border-color: var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell #moduleToggleWrap,
html[data-theme="v2"] body #appView.app-shell #moduleToggleWrap:has(input:checked) { background: transparent !important; border: 0 !important; padding: 0 !important; font-weight: 500; }
html[data-theme="v2"] body #appView.app-shell #settingsForm .settings-head-icon { display: none !important; }
html[data-theme="v2"] body #appView.app-shell #settingsForm .settings-head h2 { font-size: 22px !important; }
html[data-theme="v2"] body #appView.app-shell .settings-sections button:is(.active, [aria-current="true"], [aria-selected="true"]) { border-bottom-color: var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell .field-group code { background: var(--t-surface-hover) !important; color: var(--t-text) !important; }
/* The message preview keeps its side column next to the rows. */
@media (min-width: 1180px) {
  html[data-theme="v2"] body #appView.app-shell #formFields :is(.field-group-body, [data-preview-host]):has(> .message-live-preview) { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr) !important; column-gap: 32px !important; }
  html[data-theme="v2"] body #appView.app-shell #formFields :is(.field-group-body, [data-preview-host]):has(> .message-live-preview) > :not(.message-live-preview) { grid-column: 1 !important; }
  html[data-theme="v2"] body #appView.app-shell #formFields :is(.field-group-body, [data-preview-host]) > .message-live-preview { grid-column: 2 !important; }
}
html[data-theme="v2"] body #appView.app-shell .message-live-preview { border: 0 !important; background: transparent !important; }
html[data-theme="v2"] body #appView.app-shell .message-live-preview > header { padding: 0 0 8px !important; min-height: 0 !important; border: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .message-live-preview .discord-preview-stage { border-radius: 12px !important; }
html[data-theme="v2"] body #appView.app-shell .discord-preview-card::before { background: var(--t-accent) !important; }
/* Inner blocks (component editors, ticket kinds): one hairline frame, no fill. */
html[data-theme="v2"] body #appView.app-shell #formFields :is(.component-editor, .ticket-type, .ticket-words-block, .settings-appearance) { margin: 12px 0 !important; border-radius: 10px !important; }
/* Save bar: a plain strip. */
html[data-theme="v2"] body #appView.app-shell .save-bar { box-shadow: 0 -1px 0 var(--t-line), 0 12px 30px rgba(0, 0, 0, 0.4) !important; }

@media (max-width: 760px) {
  html[data-theme="v2"] body #appView.app-shell #formFields .field-group-body > .field:not(.full):not(.component-editor) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "note" "control"; row-gap: 6px; }
  html[data-theme="v2"] body #appView.app-shell .overview-kpi { border-inline-start: 0 !important; border-top: 1px solid var(--t-line) !important; }
  html[data-theme="v2"] body #appView.app-shell .overview-kpi:first-child { border-top: 0 !important; }
}
html[data-theme="v2"] body #appView.app-shell .overview-kpi { display: block !important; padding: 18px 22px !important; min-width: 0; }
html[data-theme="v2"] body #appView.app-shell .overview-kpi > div { display: flex !important; flex-direction: column; gap: 4px; width: 100% !important; min-width: 0; text-align: start; }
html[data-theme="v2"] body #appView.app-shell .overview-kpi > div > span { font-size: 12px !important; color: var(--t-muted) !important; white-space: nowrap; }
html[data-theme="v2"] body #appView.app-shell .overview-kpi > div > small { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================================================
   COMMAND CENTRE SHELL (approved concept C): icon rail, breadcrumb + search in the top bar, Systems page,
   settings with a section index on the side.
   ===================================================================================================== */
html[data-theme="v2"]:not([data-dash-theme]) { --t-bg: #0b0e10; --t-sidebar: #0b0e10; --t-line: #1c2124; }
html[data-theme="v2"] body #appView.app-shell:not(.hidden) { display: flex !important; flex-direction: row; min-height: 100vh; }
html[data-theme="v2"] body #appView.app-shell > .main { flex: 1 1 auto; min-width: 0; margin: 0 !important; max-width: none !important; padding: 0 !important; }

/* Rail */
html[data-theme="v2"] body #appView.app-shell .app-rail { position: sticky; top: 0; flex: 0 0 64px; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; border-inline-end: 1px solid var(--t-line); background: var(--t-bg); z-index: 30; }
html[data-theme="v2"] body #appView.app-shell .app-rail-logo { width: 36px; height: 36px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--t-line-strong); display: grid; place-items: center; overflow: hidden; }
html[data-theme="v2"] body #appView.app-shell .app-rail-logo img { width: 28px; height: 28px; border-radius: 7px; }
html[data-theme="v2"] body #appView.app-shell .app-rail-sep { width: 24px; height: 1px; margin: 6px 0; background: var(--t-line-strong); }
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item { position: relative; width: 42px !important; height: 42px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: grid !important; place-items: center; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--t-faint) !important; cursor: pointer; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item.hidden { display: none !important; }
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item > span { position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 5px 10px; border-radius: 7px; background: #20262a; color: var(--t-text); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 40; }
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item:is(:hover, :focus-visible) > span { opacity: 1; }
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item:hover { background: var(--t-surface) !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item.active { background: var(--t-surface-hover) !important; color: var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item.active::before,
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item.active::after { display: none !important; }

/* The long sidebar is replaced by the rail + Systems page on wide screens. */
@media (min-width: 901px) {
  html[data-theme="v2"] body #appView.app-shell > .sidebar { display: none !important; }
  html[data-theme="v2"] body #appView.app-shell #menuButton { display: none !important; }
}

/* Developer bot management uses the existing section surfaces, including on small screens. */
html[data-theme="v2"] body #appView.app-shell :is(.dev-managed-bot, .dev-managed-guild) { min-width: 0; padding-block: 12px; border-bottom: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell :is(.dev-managed-bot, .dev-managed-guild) > summary { cursor: pointer; overflow-wrap: anywhere; }
html[data-theme="v2"] body #appView.app-shell .dev-managed-guild > summary bdi { display: block; margin-block-start: 4px; }
html[data-theme="v2"] body #appView.app-shell .dev-management-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; padding-block: 12px; }
html[data-theme="v2"] body #appView.app-shell .dev-management-facts :is(dt, dd) { margin: 0; overflow-wrap: anywhere; }
html[data-theme="v2"] body #appView.app-shell .dev-management-facts dt { color: var(--t-muted); font-size: 12px; }
html[data-theme="v2"] body #appView.app-shell .dev-management-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-theme="v2"] body #appView.app-shell .dev-management-ban { margin-top: 24px; }
html[data-theme="v2"] body #appView.app-shell .dev-management-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-block: 16px; }
html[data-theme="v2"] body #appView.app-shell .dev-management-form label { flex: 1 1 200px; display: grid; gap: 6px; min-width: 0; }
html[data-theme="v2"] body #appView.app-shell .dev-management-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell .dev-management-block > div { min-width: 0; overflow-wrap: anywhere; }
html[data-theme="v2"] body #appView.app-shell .dev-management-block bdi { display: block; color: var(--t-muted); }
@media (max-width: 560px) {
  html[data-theme="v2"] body #appView.app-shell .dev-management-form { flex-direction: column; align-items: stretch; }
  html[data-theme="v2"] body #appView.app-shell .dev-management-form label { flex: none; width: 100%; }
}

/* Top bar: server breadcrumb, page name, search, then account controls. */
html[data-theme="v2"] body #appView.app-shell .topbar { position: sticky; top: 0; z-index: 20; display: flex !important; align-items: center; gap: 16px; height: 60px; min-height: 60px !important; padding: 0 28px !important; margin: 0 !important; border-bottom: 1px solid var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-page-title { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; min-width: 0; max-width: 46%; flex: 0 1 auto; }
html[data-theme="v2"] body #appView.app-shell .topbar-page-title .eyebrow { display: none !important; }
html[data-theme="v2"] body #appView.app-shell #pageTitle { margin: 0 !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px !important; font-weight: 500 !important; color: var(--t-muted) !important; white-space: nowrap; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .crumb-sep { color: #3a4246; }
/* Anchor the popover to the top bar, not the shrinking breadcrumb. */
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-control { position: static; flex: 1 1 auto; min-width: 0; max-width: 360px; margin: 0 !important; padding: 0 !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher:not(.hidden) { display: flex !important; align-items: center; gap: 8px; height: 34px; min-height: 0 !important; margin: 0; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--t-text) !important; width: 100% !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher:hover { background: var(--t-surface) !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher .entity-avatar { flex: 0 0 24px; width: 24px !important; height: 24px !important; min-width: 24px; border-radius: 50% !important; font-size: 11px; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher > span:not(.entity-avatar) { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher small { display: none !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher strong { flex: 1 1 auto; min-width: 0; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher em { flex: 0 0 auto; padding: 1px 7px !important; border-radius: 5px !important; border: 1px solid var(--t-line-strong) !important; background: transparent !important; color: var(--t-muted) !important; font-size: 11px !important; font-style: normal; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher > svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--t-faint); }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher.hidden + .crumb-sep { display: none; }
html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-quick-menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 28px; inset-inline-end: auto; z-index: 50; display: flex; flex-direction: column; width: 360px; min-width: 0; max-width: calc(100% - 56px); max-height: min(520px, calc(100vh - 84px)); max-height: min(520px, calc(100dvh - 84px)); }
html[data-theme="v2"] body #appView.app-shell .workspace-quick-menu.hidden { display: none; }
html[data-theme="v2"] body #appView.app-shell .quick-workspace-head { flex: 0 0 auto; }
html[data-theme="v2"] body #appView.app-shell .quick-workspace-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html[data-theme="v2"] body #appView.app-shell .quick-workspace-item { min-width: 0; }
html[data-theme="v2"] body #appView.app-shell .quick-workspace-item > svg { justify-self: center; }
html[dir="rtl"][data-theme="v2"] body #appView.app-shell button.quick-workspace-item > svg { transform: scaleX(-1); }
html[data-theme="v2"] body #appView.app-shell .quick-bot-options { margin-inline: 43px 0; }
html[data-theme="v2"] body #appView.app-shell .topbar-search { position: relative; flex: 0 1 360px; margin-inline-start: auto; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px; background: var(--t-surface); border: 1px solid var(--t-line-strong); color: var(--t-faint); box-sizing: border-box; }
html[data-theme="v2"] body #appView.app-shell .topbar-search:focus-within { border-color: var(--t-accent); }
html[data-theme="v2"] body #appView.app-shell .topbar-search > svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html[data-theme="v2"] body #appView.app-shell .topbar-search input { flex: 1 1 auto; min-width: 0; height: 34px; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--t-text) !important; font: inherit; font-size: 13px; outline: none; }
html[data-theme="v2"] body #appView.app-shell .topbar-search kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--t-line-strong); font-family: ui-monospace, monospace; font-size: 11px; white-space: nowrap; direction: ltr; }
html[data-theme="v2"] body #appView.app-shell .search-results { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 60; display: grid; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid var(--t-line-strong); background: var(--t-surface); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
html[data-theme="v2"] body #appView.app-shell .search-results.hidden { display: none; }
html[data-theme="v2"] body #appView.app-shell .search-results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--t-text); font: inherit; text-align: start; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .search-results button:is(:hover, :focus-visible) { background: #1b2125; }
html[data-theme="v2"] body #appView.app-shell .search-results button span { display: flex; flex-direction: column; }
html[data-theme="v2"] body #appView.app-shell .search-results small { color: var(--t-faint); font-size: 11px; }
html[data-theme="v2"] body #appView.app-shell .search-results p { margin: 0; padding: 10px; color: var(--t-muted); font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .topbar-actions { margin: 0 !important; flex: 0 0 auto; }
html[data-theme="v2"] body #appView.app-shell .topbar-shortcuts { display: none !important; }

/* Page body width */
html[data-theme="v2"] body #appView.app-shell > .main > .page { padding: 28px 32px 48px !important; max-width: 1240px; box-sizing: border-box; }

/* ---------- Systems page ---------- */
html[data-theme="v2"] body #appView.app-shell .systems-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
html[data-theme="v2"] body #appView.app-shell .systems-head h2 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
html[data-theme="v2"] body #appView.app-shell .systems-head p { margin: 0; color: var(--t-muted); font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .systems-filters { display: flex; gap: 4px; }
html[data-theme="v2"] body #appView.app-shell .systems-filters button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--t-muted); font: inherit; font-size: 13px; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .systems-filters button[aria-pressed="true"] { background: var(--t-surface-hover); color: var(--t-text); }
html[data-theme="v2"] body #appView.app-shell .systems-table { display: flex; flex-direction: column; }
html[data-theme="v2"] body #appView.app-shell .systems-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.3fr) 76px 112px; gap: 16px; align-items: center; width: 100%; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--t-line); border-radius: 0; background: transparent; color: var(--t-text); font: inherit; font-size: 13px; text-align: start; }
html[data-theme="v2"] body #appView.app-shell .systems-row:not(.systems-row-head):hover { background: var(--t-surface); }
html[data-theme="v2"] body #appView.app-shell .systems-row-head { padding-top: 0; border-bottom-color: var(--t-line-strong); color: var(--t-faint); font-size: 12px; cursor: default; }
html[data-theme="v2"] body #appView.app-shell .systems-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--t-line-strong); }
html[data-theme="v2"] body #appView.app-shell .systems-row.state-on .systems-dot { background: var(--t-accent); box-shadow: none; }
html[data-theme="v2"] body #appView.app-shell .systems-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-theme="v2"] body #appView.app-shell .systems-name svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--t-faint); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="v2"] body #appView.app-shell .systems-name b { font-size: 14px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .systems-name em { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--t-line-strong); color: var(--t-faint); font-size: 10px; font-style: normal; }
html[data-theme="v2"] body #appView.app-shell .systems-desc { color: var(--t-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="v2"] body #appView.app-shell .systems-state { color: var(--t-faint); }
html[data-theme="v2"] body #appView.app-shell .systems-row.state-on .systems-state { color: var(--t-text-soft); }
html[data-theme="v2"] body #appView.app-shell .systems-row.state-locked .systems-state { color: var(--t-warning); }
html[data-theme="v2"] body #appView.app-shell .systems-open svg { width: 16px; height: 16px; fill: none; stroke: var(--t-faint); stroke-width: 2; stroke-linecap: round; }
html[dir="ltr"][data-theme="v2"] body #appView.app-shell .systems-open svg { transform: scaleX(-1); }
html[data-theme="v2"] body #appView.app-shell .systems-empty { padding: 24px 6px; }

/* ---------- System page: header, section index on the side, rows in the middle ---------- */
@media (min-width: 1100px) {
  html[data-theme="v2"] body #appView.app-shell #settingsForm { display: grid !important; grid-template-columns: 180px minmax(0, 1fr) !important; column-gap: 40px !important; align-items: start; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm > .settings-head { grid-column: 1 / -1 !important; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm > #settingsSections { grid-column: 1 !important; grid-row: 2 !important; position: sticky !important; top: 84px !important; display: flex !important; flex-direction: column !important; align-items: stretch; gap: 2px !important; border: 0 !important; padding: 0 !important; overflow: visible !important; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm > #settingsSections.hidden { display: none !important; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm > #settingsSections button { justify-content: flex-start; height: auto !important; min-height: 32px !important; padding: 6px 10px !important; border: 0 !important; border-radius: 7px !important; color: var(--t-muted) !important; font-size: 13px !important; text-align: start; white-space: normal !important; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm > #settingsSections button:is(.active, [aria-current="true"], [aria-selected="true"]) { background: var(--t-surface-hover) !important; color: var(--t-text) !important; font-weight: 600; border: 0 !important; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm > #formFields { grid-column: 2 !important; grid-row: 2 !important; min-width: 0; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm > #settingsSections.hidden + #formFields { grid-column: 1 / -1 !important; }
}

/* ---------- Overview: one leading number ---------- */
@media (min-width: 900px) {
  html[data-theme="v2"] body #appView.app-shell .overview-kpis { grid-template-columns: 1.6fr 1fr 1fr 1fr !important; }
  html[data-theme="v2"] body #appView.app-shell .overview-kpi:first-child strong { font-size: 44px !important; line-height: 1.05; letter-spacing: -0.5px; }
}

/* ---------- Phones: the rail becomes a bottom bar ---------- */
@media (max-width: 900px) {
  html[data-theme="v2"] body #appView.app-shell { flex-direction: column; }
  html[data-theme="v2"] body #appView.app-shell .app-rail { position: fixed; inset: auto 0 0 0; top: auto; height: 60px; flex-direction: row; justify-content: space-around; padding: 0 6px; border-inline-end: 0; border-top: 1px solid var(--t-line); }
  html[data-theme="v2"] body #appView.app-shell .app-rail-logo,
  html[data-theme="v2"] body #appView.app-shell .app-rail-sep,
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item > span { display: none; }
  html[data-theme="v2"] body #appView.app-shell > .main { padding-bottom: 64px !important; }
  html[data-theme="v2"] body #appView.app-shell .topbar { padding: 0 12px !important; gap: 8px; }
  html[data-theme="v2"] body #appView.app-shell .topbar-page-title { flex: 0 1 160px; max-width: 38%; }
  html[data-theme="v2"] body #appView.app-shell .topbar-search { flex: 1 1 auto; width: 0; min-width: 48px; }
  html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-quick-menu { inset-inline-start: 12px; width: 360px; max-width: calc(100% - 24px); max-height: calc(100vh - 148px); max-height: calc(100dvh - 148px); }
  html[data-theme="v2"] body #appView.app-shell .topbar-search kbd,
  html[data-theme="v2"] body #appView.app-shell #pageTitle,
  html[data-theme="v2"] body #appView.app-shell .topbar-crumb .crumb-sep,
  html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-switcher em,
  html[data-theme="v2"] body #appView.app-shell .header-account summary > span:not(.avatar) { display: none !important; }
  html[data-theme="v2"] body #appView.app-shell > .main > .page { padding: 18px 14px 40px !important; }
  html[data-theme="v2"] body #appView.app-shell .systems-row { grid-template-columns: 12px minmax(0, 1fr) auto; row-gap: 4px; }
  html[data-theme="v2"] body #appView.app-shell .systems-row :is(.systems-desc, .systems-state) { display: none; }
  html[data-theme="v2"] body #appView.app-shell .systems-row .systems-now { grid-column: 2 / -1; grid-row: 2; }
  html[data-theme="v2"] body #appView.app-shell .systems-row .systems-cta { grid-column: 3; grid-row: 1; }
  html[data-theme="v2"] body #appView.app-shell .systems-row-head { display: none; }
}
@media (max-width: 560px) {
  html[data-theme="v2"] body #appView.app-shell .header-account .avatar { width: 30px !important; height: 30px !important; }
}

/* =====================================================================================================
   Same command-centre look for Sales, Subscriptions/Store and the Developer centre.
   ===================================================================================================== */
/* Number rows: one strip split by hairlines (sales, developer). */
html[data-theme="v2"] body #appView.app-shell :is(.sales-kpis, .dev-kpis) { gap: 0 !important; border: 1px solid var(--t-line) !important; border-radius: var(--t-radius) !important; background: var(--t-surface) !important; overflow: hidden; }
html[data-theme="v2"] body #appView.app-shell :is(.sales-kpi, .dev-kpi) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border-inline-start: 1px solid var(--t-line) !important; }
html[data-theme="v2"] body #appView.app-shell :is(.sales-kpi, .dev-kpi):first-child { border-inline-start: 0 !important; }
html[data-theme="v2"] body #appView.app-shell :is(.sales-kpi, .dev-kpi) svg { color: var(--t-faint) !important; stroke: var(--t-faint) !important; }
html[data-theme="v2"] body #appView.app-shell :is(.sales-kpi, .dev-kpi) strong { color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .sales-kpi.revenue strong { color: var(--t-accent) !important; }
/* Page sections: no card; a heading and hairlines. Side navigation: a plain list. */
html[data-theme="v2"] body #appView.app-shell :is(#salesPage, #developerPage, #commercePage) :is(.panel, .developer-section, .sales-view, .dev-top) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-inline: 0 !important; }
html[data-theme="v2"] body #appView.app-shell :is(#salesPage, #developerPage) :is(.sales-navigation, .dev-nav) { background: transparent !important; border: 0 !important; border-inline-start: 1px solid var(--t-line) !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell :is(.sales-navigation, .dev-nav) :is(button, a) { border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--t-muted) !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell :is(.sales-navigation, .dev-nav) :is(button, a):is(.active, [aria-current="page"], [aria-current="true"]) { background: var(--t-surface-hover) !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell :is(.sales-navigation, .dev-nav) svg { color: var(--t-faint) !important; stroke: currentColor; }
html[data-theme="v2"] body #appView.app-shell .developer-commandbar { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; padding-inline: 0 !important; }
/* Filter chips: quiet; the chosen one in the selection colour, not a filled mint block. */
html[data-theme="v2"] body #appView.app-shell :is(.developer-commandbar, .sales-view, #commercePage) [role="tablist"] button,
html[data-theme="v2"] body #appView.app-shell .developer-commandbar button { background: transparent !important; border: 0 !important; color: var(--t-muted) !important; border-radius: 8px !important; box-shadow: none !important; }
html[data-theme="v2"] body #appView.app-shell .developer-commandbar button.active,
html[data-theme="v2"] body #appView.app-shell .developer-commandbar button[aria-pressed="true"] { background: var(--t-surface-hover) !important; color: var(--t-text) !important; }
html[data-theme="v2"] body #appView.app-shell .dev-bot-row { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; }
html[data-theme="v2"] body #appView.app-shell :is(#salesPage, #developerPage) .eyebrow { color: var(--t-faint) !important; }

/* Subscriptions / store: products as rows of a list, the order summary as one quiet panel. */
html[data-theme="v2"] body #appView.app-shell #commercePage :is(.ustore-choice, .ustore-seg, .ustore-guild-menu, summary) { background: transparent !important; border-color: var(--t-line-strong) !important; box-shadow: none !important; }
/* Dropdown lists (server picker, subscription length) float over the page, so they need a solid surface. */
html[data-theme="v2"] body #appView.app-shell #commercePage .ustore-guild-picker[open] { position: relative; z-index: 40; }
html[data-theme="v2"] body #appView.app-shell #commercePage .ustore-guild-menu { background: var(--t-popover, var(--t-surface)) !important; border: 1px solid var(--t-line-strong) !important; box-shadow: 0 18px 40px rgba(0,0,0,.55) !important; z-index: 50 !important; }
html[data-theme="v2"] body #appView.app-shell #commercePage .ustore-guild-menu :is(button, [role="option"]) { background: transparent !important; }
html[data-theme="v2"] body #appView.app-shell #commercePage .ustore-guild-menu :is(button, [role="option"]):hover { background: var(--t-surface-hover) !important; }
html[data-theme="v2"] body #appView.app-shell #commercePage .ustore-guild-menu :is(button, [role="option"]):is([aria-selected="true"], [aria-pressed="true"], .active) { background: var(--t-surface-hover) !important; box-shadow: inset 3px 0 0 var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell #commercePage .ustore-choice[aria-pressed="true"],
html[data-theme="v2"] body #appView.app-shell #commercePage .ustore-choice.active,
html[data-theme="v2"] body #appView.app-shell #commercePage .ustore-choice[aria-checked="true"] { background: var(--t-surface-hover) !important; border-color: var(--t-accent) !important; }
html[data-theme="v2"] body #appView.app-shell #commercePage h1 { font-size: 30px !important; }
html[data-theme="v2"] body #appView.app-shell #commercePage .eyebrow { color: var(--t-faint) !important; }

/* ---------- Systems page: live numbers, on/off switch, auto-setup button ---------- */
html[data-theme="v2"] body #appView.app-shell .systems-name { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .systems-name:hover b { color: var(--t-accent); }
html[data-theme="v2"] body #appView.app-shell .systems-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--t-text-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
html[data-theme="v2"] body #appView.app-shell .systems-now i { color: var(--t-faint); font-style: normal; }
html[data-theme="v2"] body #appView.app-shell .systems-now .tone-warning { color: var(--t-warning); }
html[data-theme="v2"] body #appView.app-shell .systems-now .tone-muted { color: var(--t-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="v2"] body #appView.app-shell .systems-cta { display: flex; justify-content: flex-end; }
html[data-theme="v2"] body #appView.app-shell .systems-switch { position: relative; display: inline-flex; width: 38px; height: 22px; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .systems-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
html[data-theme="v2"] body #appView.app-shell .systems-switch span { width: 100%; height: 100%; border-radius: 999px; background: var(--t-line-strong); transition: background .18s ease; }
html[data-theme="v2"] body #appView.app-shell .systems-switch span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--t-muted); transition: transform .18s ease, background .18s ease; }
html[data-theme="v2"] body #appView.app-shell .systems-switch input:checked + span { background: var(--t-accent); }
html[data-theme="v2"] body #appView.app-shell .systems-switch input:checked + span::after { background: var(--t-accent-ink); transform: translateX(16px); }
html[dir="rtl"][data-theme="v2"] body #appView.app-shell .systems-switch input:checked + span::after { transform: translateX(-16px); }
html[data-theme="v2"] body #appView.app-shell .systems-switch input:focus-visible + span { outline: 2px solid var(--t-accent); outline-offset: 2px; }
html[data-theme="v2"] body #appView.app-shell .systems-switch input:disabled + span { opacity: .5; }
html[data-theme="v2"] body #appView.app-shell .systems-action { height: 28px; padding: 0 12px; border: 1px solid var(--t-line-strong); border-radius: 7px; background: transparent; color: var(--t-accent); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .systems-action:hover { border-color: var(--t-accent); }
html[data-theme="v2"] body #appView.app-shell .systems-action:disabled { opacity: .5; cursor: progress; }
html[data-theme="v2"] body #appView.app-shell .head-setup { margin-inline-end: 8px; }

/* A setting opened from search or from "missing fields" flashes once so the eye finds it. */
@keyframes trivus-setting-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-accent) 55%, transparent); background: color-mix(in srgb, var(--t-accent) 10%, transparent); } 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--t-accent) 0%, transparent); background: transparent; } }
html[data-theme="v2"] body #appView.app-shell .setting-flash { border-radius: 8px; animation: trivus-setting-flash 1.6s ease-out 2; }
html[data-theme="v2"] body #appView.app-shell .search-setting-icon { display: inline-flex; width: 16px; height: 16px; color: var(--t-faint); }
html[data-theme="v2"] body #appView.app-shell .search-setting-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { html[data-theme="v2"] body #appView.app-shell .setting-flash { animation: none; outline: 2px solid var(--t-accent); } }

/* ---------- Activity page ---------- */
html[data-theme="v2"] body #appView.app-shell .activity-list { display: flex; flex-direction: column; }
html[data-theme="v2"] body #appView.app-shell .activity-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 2fr) 90px; gap: 16px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--t-line); font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .activity-row time { white-space: nowrap; color: var(--t-faint); font-variant-numeric: tabular-nums; }
html[data-theme="v2"] body #appView.app-shell .activity-actor { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .activity-actor img, html[data-theme="v2"] body #appView.app-shell .activity-actor i { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--t-line-strong); }
html[data-theme="v2"] body #appView.app-shell .activity-text { color: var(--t-text-soft); }
html[data-theme="v2"] body #appView.app-shell .activity-source { color: var(--t-faint); font-size: 12px; text-align: end; }
html[data-theme="v2"] body #appView.app-shell .activity-more { margin: 18px auto 0; display: block; }
@media (max-width: 700px) {
  html[data-theme="v2"] body #appView.app-shell .activity-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  html[data-theme="v2"] body #appView.app-shell .activity-row .activity-text { grid-column: 1 / -1; }
  html[data-theme="v2"] body #appView.app-shell .activity-row .activity-source { display: none; }
}

/* ---------- Developers: bridge health ---------- */
html[data-theme="v2"] body #appView.app-shell .bridge-status { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 16px; }
html[data-theme="v2"] body #appView.app-shell .bridge-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--t-line-strong); }
html[data-theme="v2"] body #appView.app-shell .bridge-dot.on, html[data-theme="v2"] body #appView.app-shell .status-ok .bridge-dot { background: var(--t-accent); }
html[data-theme="v2"] body #appView.app-shell .status-degraded .bridge-dot { background: var(--t-warning); }
html[data-theme="v2"] body #appView.app-shell .status-down .bridge-dot { background: var(--t-danger); }
html[data-theme="v2"] body #appView.app-shell .bridge-problems { margin: 0 0 16px; padding-inline-start: 18px; color: var(--t-warning); font-size: 13px; line-height: 1.8; }
html[data-theme="v2"] body #appView.app-shell .bridge-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; border-top: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell .bridge-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 4px; border-bottom: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell .bridge-stat span { color: var(--t-faint); font-size: 12px; }
html[data-theme="v2"] body #appView.app-shell .bridge-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
html[data-theme="v2"] body #appView.app-shell .bridge-stat.warn b { color: var(--t-warning); }
html[data-theme="v2"] body #appView.app-shell .bridge-stat.bad b { color: var(--t-danger); }
html[data-theme="v2"] body #appView.app-shell .bridge-subhead { margin: 22px 0 6px; color: var(--t-muted); font-size: 13px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .bridge-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--t-line); font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .bridge-row.failure { grid-template-columns: auto minmax(0, 1fr) auto; }
html[data-theme="v2"] body #appView.app-shell .bridge-row code { color: var(--t-accent); font-size: 12px; }
html[data-theme="v2"] body #appView.app-shell .bridge-error { color: var(--t-text-soft); overflow-wrap: anywhere; }
@media (max-width: 700px) { html[data-theme="v2"] body #appView.app-shell .bridge-row, html[data-theme="v2"] body #appView.app-shell .bridge-row.failure { grid-template-columns: 1fr; } }

/* ---------- Colors: ready-made packs ---------- */
html[data-theme="v2"] body #appView.app-shell .color-pack-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 6px; color: var(--t-muted); font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .color-pack-meta .check-line { display: inline-flex; align-items: center; gap: 8px; }
html[data-theme="v2"] body #appView.app-shell .color-pack-head { margin: 18px 0 4px; color: var(--t-muted); font-size: 13px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .color-pack-head small { margin-inline-start: 6px; color: var(--t-faint); font-weight: 400; }
html[data-theme="v2"] body #appView.app-shell .color-pack { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell .color-pack-name { display: flex; flex-direction: column; gap: 2px; }
html[data-theme="v2"] body #appView.app-shell .color-pack-name small { color: var(--t-faint); font-size: 12px; }
html[data-theme="v2"] body #appView.app-shell .color-pack-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme="v2"] body #appView.app-shell .color-swatch { width: 22px; height: 22px; border-radius: 50%; background: var(--left); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="v2"] body #appView.app-shell .color-swatch.two { background: linear-gradient(90deg, var(--left), var(--right)); }
@media (max-width: 640px) {
  html[data-theme="v2"] body #appView.app-shell .color-pack { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-theme="v2"] body #appView.app-shell .color-pack-swatches { grid-column: 1 / -1; grid-row: 2; }
}
html[data-theme="v2"] body #appView.app-shell .auto-response-body > [data-response-channels] { grid-column: 1 / -1; }
html[data-theme="v2"] body #appView.app-shell .auto-response-body > [data-response-channels] > .field { width: 100%; max-width: none; }
html[data-theme="v2"] body #appView.app-shell .info-menu-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px 16px; padding: 14px 0; border-bottom: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell .info-menu-row > .resource-field, html[data-theme="v2"] body #appView.app-shell .info-menu-row > .remove-type { grid-column: 1 / -1; }
html[data-theme="v2"] body #appView.app-shell .info-menu-row > .remove-type { justify-self: start; }
html[data-theme="v2"] body #appView.app-shell .responsibility-scopes { border: 0; padding: 0; margin: 0; }
html[data-theme="v2"] body #appView.app-shell .responsibility-scopes legend { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .scope-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
html[data-theme="v2"] body #appView.app-shell .scope-chip { position: relative; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .scope-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
html[data-theme="v2"] body #appView.app-shell .scope-chip span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--t-line-strong); border-radius: 999px; color: var(--t-muted); font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .scope-chip input:checked + span { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 12%, transparent); color: var(--t-text); }
html[data-theme="v2"] body #appView.app-shell .scope-chip input:focus-visible + span { outline: 2px solid var(--t-accent); outline-offset: 2px; }

/* ---------- Protection: backups ---------- */
html[data-theme="v2"] body #appView.app-shell .backup-take { display: flex; gap: 10px; align-items: center; margin: 6px 0 10px; }
html[data-theme="v2"] body #appView.app-shell .backup-take input { flex: 1 1 auto; min-width: 0; }
html[data-theme="v2"] body #appView.app-shell .backup-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell .backup-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html[data-theme="v2"] body #appView.app-shell .backup-meta small, html[data-theme="v2"] body #appView.app-shell .backup-limit { color: var(--t-faint); font-size: 12px; }
html[data-theme="v2"] body #appView.app-shell .backup-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html[data-theme="v2"] body #appView.app-shell .danger-text { color: var(--t-danger); }
.backup-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--t-line-strong); border-radius: 14px; background: var(--t-input-deep); color: var(--t-text); overflow: hidden; }
.backup-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.backup-dialog-head, .backup-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--t-line); }
.backup-dialog-foot { justify-content: flex-end; border-top: 1px solid var(--t-line); border-bottom: 0; }
.backup-dialog-head h3 { margin: 0 0 2px; font-size: 17px; }
.backup-dialog-head small { color: var(--t-faint); }
.backup-preview-summary { padding: 12px 20px; color: var(--t-text-soft); font-size: 13px; border-bottom: 1px solid var(--t-line); }
.backup-preview-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; max-height: calc(100vh - 260px); overflow: auto; }
.backup-preview-cols section { padding: 14px 20px; }
.backup-preview-cols section + section { border-inline-start: 1px solid var(--t-line); }
.backup-preview-cols h4 { margin: 0 0 10px; color: var(--t-muted); font-size: 12px; font-weight: 600; }
.backup-tree, .backup-tree ul, .backup-roles { list-style: none; margin: 0; padding: 0; }
.backup-category { margin-bottom: 10px; }
.backup-category > b { display: inline-block; margin-bottom: 4px; color: var(--t-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.backup-tree li.backup-channel, .backup-roles li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 13.5px; }
.backup-tree li.backup-channel:hover, .backup-roles li:hover { background: var(--t-surface-hover); }
.backup-icon svg { width: 15px; height: 15px; fill: none; stroke: var(--t-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.backup-tag { margin-inline-start: auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-style: normal; }
.backup-tag.missing { background: rgba(231, 123, 132, .15); color: #e77b84; }
.backup-tag.changed { background: rgba(230, 184, 106, .15); color: #e6b86a; }
.backup-dialog .color-swatch.small { width: 12px; height: 12px; border-radius: 50%; background: var(--left); flex: 0 0 12px; }
.backup-dialog .color-swatch.small.two { background: linear-gradient(90deg, var(--left), var(--right)); }
@media (max-width: 700px) { .backup-preview-cols { grid-template-columns: 1fr; } .backup-preview-cols section + section { border-inline-start: 0; border-top: 1px solid var(--t-line); } }
html[data-theme="v2"] body #appView.app-shell .verify-transfer { display: flex; flex-direction: column; gap: 10px; }
html[data-theme="v2"] body #appView.app-shell .verify-count { margin: 0; font-size: 15px; font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .verify-transfer-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html[data-theme="v2"] body #appView.app-shell .verify-transfer-row select { flex: 1 1 220px; min-width: 0; }
html[data-theme="v2"] body #appView.app-shell .verify-transfer code { padding: 2px 6px; border-radius: 6px; background: var(--t-surface-hover); color: var(--t-accent); font-size: 12px; overflow-wrap: anywhere; }

/* ---------- Partners ---------- */
html[data-theme="v2"] body #appView.app-shell #partnersPage .scope-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
html[data-theme="v2"] body #appView.app-shell .partner-owner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--t-line); color: var(--t-muted); font-size: 13px; }
html[data-theme="v2"] body #appView.app-shell .partner-owner b, html[data-theme="v2"] body #appView.app-shell .partner-who { display: inline-flex; align-items: center; gap: 8px; color: var(--t-text); font-weight: 600; }
html[data-theme="v2"] body #appView.app-shell .partner-owner img, html[data-theme="v2"] body #appView.app-shell .partner-who img { border-radius: 50%; }
html[data-theme="v2"] body #appView.app-shell .partner-row { padding: 14px 0; border-bottom: 1px solid var(--t-line); }
html[data-theme="v2"] body #appView.app-shell .partner-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
html[data-theme="v2"] body #appView.app-shell .partner-main input { flex: 1 1 220px; min-width: 0; direction: ltr; }
html[data-theme="v2"] body #appView.app-shell .partner-main select { flex: 0 1 180px; }
html[data-theme="v2"] body #appView.app-shell .partner-modules { margin-top: 10px; }
html[data-theme="v2"] body #appView.app-shell .partner-actions { display: flex; gap: 10px; margin-top: 16px; }
html[data-theme="v2"] body #appView.app-shell .partner-main :is(input, select), html[data-theme="v2"] body #appView.app-shell .backup-take input, html[data-theme="v2"] body #appView.app-shell .verify-transfer-row select { height: 40px; padding: 0 12px; border: 1px solid var(--t-line-strong); border-radius: 8px; background: var(--t-input-deep); color: var(--t-text); font: inherit; font-size: 13.5px; }

/* =====================================================================================================
   Phones and small tablets
   ===================================================================================================== */
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item.rail-more { display: none !important; }
html[data-theme="v2"] body #appView.app-shell .sidebar .sidebar-close { display: none; }
@media (max-width: 900px) {
  /* Bottom bar: the four main pages and «more» (opens the full menu); everything else lives in the menu. */
  html[data-theme="v2"] body #appView.app-shell .app-rail { height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); z-index: 40; background: var(--t-bg); }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item:not([data-page="overview"]):not([data-page="systems"]):not([data-page="activity"]):not([data-page="partners"]):not(.rail-more) { display: none !important; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item.rail-more { display: flex !important; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; height: 52px; min-width: 0; padding: 0 !important; border-radius: 10px; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-item > span { display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; line-height: 1.2; position: static !important; opacity: 1 !important; transform: none !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: inherit !important; inset: auto !important; }
  html[data-theme="v2"] body #appView.app-shell > .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  html[data-theme="v2"] body #appView.app-shell #menuButton { display: none !important; }
  html[data-theme="v2"] body #appView.app-shell .dashboard-menu-backdrop { z-index: 115 !important; }
  html[data-theme="v2"] body #appView.app-shell .sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; left: auto !important; right: 0 !important; width: min(310px, 86vw) !important; height: 100vh !important; height: 100dvh !important; z-index: 120 !important; padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; border-inline-end: 0 !important; border-inline-start: 1px solid var(--t-line-strong) !important; background: var(--t-sidebar) !important; box-shadow: -18px 0 44px rgba(0, 0, 0, 0.55) !important; transform: translateX(105%) !important; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important; }
  html[dir="rtl"][data-theme="v2"] body #appView.app-shell .sidebar { right: auto !important; left: 0 !important; box-shadow: 18px 0 44px rgba(0, 0, 0, 0.55) !important; transform: translateX(-105%) !important; }
  html[data-theme="v2"] body #appView.app-shell .sidebar.open,
  html[dir="rtl"][data-theme="v2"] body #appView.app-shell .sidebar.open { transform: translateX(0) !important; }
  html[data-theme="v2"] body #appView.app-shell .sidebar .brand { display: flex !important; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--t-line); }
  html[data-theme="v2"] body #appView.app-shell .sidebar .sidebar-close { display: inline-grid !important; place-items: center; margin-inline-start: auto; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; }
  html[data-theme="v2"] body #appView.app-shell .head-setup { margin-inline-start: auto; }
  /* Top bar: server, search and the two icons, all on one row without squeezing. */
  html[data-theme="v2"] body #appView.app-shell .topbar { height: 56px !important; position: sticky; top: 0; z-index: 30; background: var(--t-bg); }
  html[data-theme="v2"] body #appView.app-shell .topbar-search { min-width: 0; height: 38px; }
  html[data-theme="v2"] body #appView.app-shell .topbar-search input { min-width: 0; font-size: 14px; }
  html[data-theme="v2"] body #appView.app-shell .header-account summary { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; }
  html[data-theme="v2"] body #appView.app-shell .topbar-actions { gap: 2px; }
  html[data-theme="v2"] body #appView.app-shell .header-account, html[data-theme="v2"] body #appView.app-shell .header-account > summary { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; }
  html[data-theme="v2"] body #appView.app-shell .header-account .avatar { width: 32px !important; height: 32px !important; }
  html[data-theme="v2"] body #appView.app-shell .topbar-actions .icon-button { width: 38px; height: 38px; }
  html[data-theme="v2"] body #appView.app-shell .search-results { position: fixed !important; inset: 56px 8px auto 8px !important; width: auto !important; max-height: calc(100vh - 140px); overflow: auto; z-index: 70; }
  html[data-theme="v2"] body #appView.app-shell .notification-panel { position: fixed !important; inset: 60px 8px auto 8px !important; width: auto !important; max-height: calc(100vh - 150px); overflow: auto; background: var(--t-popover) !important; border: 1px solid var(--t-line-strong) !important; border-radius: 12px !important; box-shadow: 0 18px 40px rgba(0,0,0,.55) !important; transform: none !important; }
  html[data-theme="v2"] body #appView.app-shell :is(.workspace-quick-menu, .account-menu) { background: var(--t-popover) !important; }
  /* Overview: server card stacks; its facts become a row of small chips. */
  html[data-theme="v2"] body #appView.app-shell .ov-strip { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  html[data-theme="v2"] body #appView.app-shell .ov-strip-facts { flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; }
  html[data-theme="v2"] body #appView.app-shell .ov-strip-facts .ov-fact { white-space: nowrap; }
  html[data-theme="v2"] body #appView.app-shell .ov-strip-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  html[data-theme="v2"] body #appView.app-shell .ov-wizard-banner { flex-direction: column !important; align-items: stretch !important; gap: 14px; }
  html[data-theme="v2"] body #appView.app-shell .ov-wizard-banner > .button { width: 100%; height: 44px; }
  html[data-theme="v2"] body #appView.app-shell .ov-wizard-banner-content { width: 100%; }
  /* Settings: the save bar sits above the bottom bar and fits the screen. */
  html[data-theme="v2"] body #appView.app-shell #settingsForm .save-bar { inset-inline: 8px !important; bottom: calc(68px + env(safe-area-inset-bottom)) !important; left: 8px !important; right: 8px !important; width: auto !important; flex-wrap: wrap; gap: 8px; padding: 10px 12px !important; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm .save-bar > * { flex: 1 1 auto; }
  html[data-theme="v2"] body #appView.app-shell #settingsForm .save-bar .muted, html[data-theme="v2"] body #appView.app-shell #settingsForm .save-bar span:first-child { flex-basis: 100%; }
  /* Tables and rows that were made for wide screens. */
  html[data-theme="v2"] body #appView.app-shell .activity-row time { font-size: 11.5px; }
  html[data-theme="v2"] body #appView.app-shell .backup-actions { width: 100%; }
  html[data-theme="v2"] body #appView.app-shell .backup-actions .button { flex: 1 1 auto; }
  html[data-theme="v2"] body #appView.app-shell .color-pack .button { justify-self: end; }
  html[data-theme="v2"] body #appView.app-shell .info-menu-row { grid-template-columns: 1fr; }
  html[data-theme="v2"] body #appView.app-shell .partner-main select { flex: 1 1 100%; }
  html[data-theme="v2"] body #appView.app-shell .settings-head { flex-wrap: wrap; gap: 12px; }
  /* Long words and links never push the page sideways. */
  html[data-theme="v2"] body #appView.app-shell :is(p, small, li, td, code, .muted) { overflow-wrap: anywhere; }
  html[data-theme="v2"] body #appView.app-shell :is(input, select, textarea) { font-size: 16px; } /* iOS zooms in on smaller text */
}
@media (max-width: 560px) {
  /* Give the search its own row instead of shrinking its input to zero. */
  html[data-theme="v2"] body #appView.app-shell .topbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; height: auto !important; padding: 10px 12px !important; }
  html[data-theme="v2"] body #appView.app-shell .topbar-page-title { grid-column: 1; grid-row: 1; width: 100%; max-width: 100%; }
  html[data-theme="v2"] body #appView.app-shell .topbar-actions { grid-column: 2; grid-row: 1; }
  html[data-theme="v2"] body #appView.app-shell .topbar-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  html[data-theme="v2"] body #appView.app-shell .topbar-crumb .workspace-quick-menu { max-height: calc(100vh - 212px); max-height: calc(100dvh - 212px); }
  html[data-theme="v2"] body #appView.app-shell .search-results { position: absolute !important; inset: calc(100% + 6px) 0 auto 0 !important; max-height: calc(100dvh - 212px); }
  html[data-theme="v2"] body #appView.app-shell .notification-panel { position: absolute !important; inset: calc(100% + 8px) 12px auto 12px !important; max-height: calc(100dvh - 212px); }
  html[data-theme="v2"] body #appView.app-shell .systems-head { align-items: flex-start; }
  html[data-theme="v2"] body #appView.app-shell .systems-filters { width: 100%; overflow-x: auto; scrollbar-width: none; }
  html[data-theme="v2"] body #appView.app-shell .systems-filters button { flex: 0 0 auto; }
  html[data-theme="v2"] body #appView.app-shell .overview-kpi strong { font-size: 26px !important; }
}
/* Public site on phones */
@media (max-width: 900px) {
  .tv-lead-magnet > *, .tv-outcomes-intro > * { flex: 0 0 auto !important; }
  .tv-lead-guarantee { flex-wrap: wrap; gap: 6px 16px; }
  .tv-lead-input-pill { flex-wrap: wrap; border-radius: 16px; padding: 6px; }
  .tv-lead-input-pill input { flex: 1 1 100%; height: 42px; padding-inline: 12px; font-size: 16px; }
  .tv-lead-btn { flex: 1 1 100%; }
}

/* Every system stays reachable from the desktop rail, even before hover/focus. */
html[data-theme="v2"] body #appView.app-shell .app-rail .rail-systems { display: none; }
html[data-theme="v2"] body #appView.app-shell .sidebar #nav :is(#salesNav, #developerNav) { display: none !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-shortcuts.has-platform-tools { display: flex !important; align-items: center; gap: 4px; flex: 0 0 auto; }
html[data-theme="v2"] body #appView.app-shell .topbar-shortcuts > :not([data-platform-tool]) { display: none !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-shortcuts [data-platform-tool] { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; min-width: 32px; height: 34px; min-height: 34px !important; padding: 0 7px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--t-muted); }
html[data-theme="v2"] body #appView.app-shell .topbar-shortcuts [data-platform-tool] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
@media (max-width: 1200px) {
  html[data-theme="v2"] body #appView.app-shell .topbar-shortcuts [data-platform-tool] > span { display: none; }
}
@media (min-width: 901px) {
  html[data-theme="v2"] body #appView.app-shell .app-rail { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
  html[data-theme="v2"] body #appView.app-shell .app-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
  html[data-theme="v2"] body #appView.app-shell .app-rail > * { flex-shrink: 0; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-systems,
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-heading { display: block; box-sizing: border-box; flex-shrink: 0; width: 100%; height: 18px; margin: 6px 0 4px; padding: 0 12px; line-height: 18px; overflow: hidden; white-space: nowrap; }
  html[data-theme="v2"] body #appView.app-shell .app-rail:not(.rail-open) .rail-heading { visibility: hidden; }
  html[data-theme="v2"] body #appView.app-shell .app-rail:not(.rail-open) .rail-sub-dot { display: none; }
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open .rail-systems,
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open .rail-group { align-items: stretch; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-sub { flex-shrink: 0; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-sub.locked { opacity: .45; }
}
@media (min-width: 901px) and (hover: hover) {
  /* Every system is listed in the opened rail, so the «Systems» page entry is not needed here (phones keep it). */
  html[data-theme="v2"] body #appView.app-shell #appRail.app-rail .rail-item[data-page="systems"] { display: none !important; }
  html[data-theme="v2"] body #appView.app-shell .app-rail { transition: flex-basis 0.18s ease, width 0.18s ease, margin 0.18s ease, box-shadow 0.18s ease; overflow-x: hidden; scrollbar-width: none; }
  /* Wider without pushing the page: the negative margin gives the extra width back, so it floats over the content. */
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open { flex-basis: 268px; width: 268px; margin-inline-end: -204px; align-items: stretch; padding: 14px 12px; overflow-y: auto; z-index: 55; box-shadow: 12px 0 36px rgba(0, 0, 0, 0.45); }
  html[dir="rtl"][data-theme="v2"] body #appView.app-shell .app-rail.rail-open { box-shadow: -12px 0 36px rgba(0, 0, 0, 0.45); }
  /* Items keep their size and the list scrolls (in a fixed-height column they would otherwise shrink). */
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open > * { flex-shrink: 0; }
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open .app-rail-logo { align-self: flex-start; margin-inline-start: 3px; }
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open .app-rail-sep { width: auto; margin: 8px 6px; }
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open .rail-item { width: 100% !important; display: flex !important; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px !important; flex: 0 0 auto; }
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open .rail-item > span { position: static; transform: none; opacity: 1; padding: 0; background: none; color: inherit; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open .rail-item:not(.active):not(:hover) { color: var(--t-text-soft) !important; }
  html[data-theme="v2"] body #appView.app-shell .app-rail.rail-open .rail-systems { display: flex; flex-direction: column; gap: 2px; margin-top: 0; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-heading { margin: 6px 0 4px; color: var(--t-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-sub { height: 36px !important; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-sub svg { width: 17px; height: 17px; flex: 0 0 auto; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-sub .rail-sub-label { flex: 1 1 auto; min-width: 0; text-align: start; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-sub .rail-sub-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--t-line-strong); }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-sub .rail-sub-dot.on { background: var(--t-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent); }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-sub.locked { opacity: 0.45; cursor: not-allowed; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group { margin-top: 4px; border-top: 1px solid var(--t-line); padding-top: 6px; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group > summary { list-style: none; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: 10px; color: var(--t-text); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group > summary::-webkit-details-marker { display: none; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group > summary:hover { background: var(--t-surface); }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group > summary svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group > summary span { flex: 1 1 auto; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group > summary .rail-chevron { width: 15px; height: 15px; color: var(--t-faint); transition: transform 0.15s; }
  html[data-theme="v2"] body #appView.app-shell .app-rail .rail-group:not([open]) > summary .rail-chevron { transform: rotate(-90deg); }
  html[dir="rtl"][data-theme="v2"] body #appView.app-shell .app-rail .rail-group:not([open]) > summary .rail-chevron { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="v2"] body #appView.app-shell .app-rail { transition: none !important; }
}

/* ---------- Language picker: a globe with the current language code; a list of the four languages ---------- */
.lang-picker { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px !important; min-width: 40px; height: 38px; padding: 0 10px !important; cursor: pointer; font: inherit; }
.lang-picker svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lang-picker .lang-globe { width: 17px; height: 17px; opacity: .85; }
.lang-picker .lang-caret { width: 13px; height: 13px; opacity: .6; transition: transform .16s ease; }
.lang-picker[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-picker .lang-code { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; direction: ltr; }
html[data-theme="v2"] body #appView.app-shell .topbar-lang { display: inline-flex !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html[data-theme="v2"] body #appView.app-shell .topbar-lang .lang-picker { width: auto; border: 1px solid var(--t-line) !important; border-radius: 10px !important; background: transparent !important; }
.lang-menu { position: fixed; z-index: 1000; display: grid; gap: 2px; width: 220px; padding: 6px; border: 1px solid var(--t-line-strong, #2a3034); border-radius: 14px; background: var(--t-popover, #121619); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.lang-menu[hidden] { display: none !important; }
.lang-menu button { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--t-text, #e6f1ef); text-align: start; cursor: pointer; font: inherit; }
.lang-menu button:hover { background: var(--t-surface-hover, #181d20); }
.lang-menu .lang-option-code { display: grid; place-items: center; height: 28px; border: 1px solid var(--t-line, #253033); border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--t-muted, #aac1ba); direction: ltr; }
.lang-menu .lang-option-text { display: grid; gap: 1px; min-width: 0; }
.lang-menu .lang-option-text strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.lang-menu .lang-option-text small { font-size: 11.5px; color: var(--t-muted, #aac1ba); line-height: 1.2; text-align: start; }
.lang-menu .lang-check { width: 18px; height: 18px; fill: none; stroke: var(--t-accent, #9fdcc8); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lang-menu button[aria-checked="true"] { background: color-mix(in srgb, var(--t-accent, #9fdcc8) 10%, transparent); }
.lang-menu button[aria-checked="true"] .lang-option-code { border-color: var(--t-accent, #9fdcc8); color: var(--t-accent, #9fdcc8); }
.lang-menu button[aria-checked="true"] .lang-check { opacity: 1; }
.lang-menu button:focus-visible { outline: 2px solid var(--t-accent, #9fdcc8); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .lang-picker .lang-caret { transition: none; } }

/* `.hidden` always wins. Many theme rules above set `display` with !important and an id selector, which used to
   outrank the base `.hidden { display: none !important }` — the dashboard shell then showed under the public home
   page footer. Two :not(#…) add id weight so this beats any single-id rule. */
html .hidden:not(#\31 _never):not(#\32 _never), html [hidden]:not(#\31 _never):not(#\32 _never) { display: none !important; }

/* ---------- Dashboard theme picker ---------- */
html[data-theme="v2"] body #appView.app-shell .theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
html[data-theme="v2"] body #appView.app-shell .theme-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--t-line-strong); border-radius: 12px; background: transparent; color: var(--t-text); font: inherit; font-size: 13px; cursor: pointer; text-align: start; }
html[data-theme="v2"] body #appView.app-shell .theme-card[aria-pressed="true"] { border-color: var(--t-accent); box-shadow: 0 0 0 1px var(--t-accent); }
html[data-theme="v2"] body #appView.app-shell .theme-card-preview { position: relative; display: block; height: 58px; border-radius: 8px; background: var(--card-bg); overflow: hidden; }
html[data-theme="v2"] body #appView.app-shell .theme-card-preview i { position: absolute; display: block; border-radius: 4px; }
html[data-theme="v2"] body #appView.app-shell .theme-card-preview i:nth-child(1) { inset: 8px auto 8px 8px; width: 14px; background: var(--card-surface); }
html[data-theme="v2"] body #appView.app-shell .theme-card-preview i:nth-child(2) { inset: 8px 8px auto 30px; height: 18px; background: var(--card-surface); }
html[data-theme="v2"] body #appView.app-shell .theme-card-preview i:nth-child(3) { inset: auto 8px 8px auto; width: 34px; height: 12px; background: var(--card-accent); }
html[data-theme="v2"] body #appView.app-shell .accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-theme="v2"] body #appView.app-shell .accent-swatch { width: 30px; height: 30px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html[data-theme="v2"] body #appView.app-shell .accent-swatch[aria-pressed="true"] { border-color: var(--t-text); }
html[data-theme="v2"] body #appView.app-shell .accent-swatch.theme-default { width: auto; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--t-line-strong); background: transparent; color: var(--t-muted); font: inherit; font-size: 12px; }
html[data-theme="v2"] body #appView.app-shell .accent-swatch.theme-default[aria-pressed="true"] { border-color: var(--t-accent); color: var(--t-text); }
html[data-theme="v2"] body #appView.app-shell .accent-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--t-muted); font-size: 12px; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .accent-custom input { width: 30px; height: 30px; padding: 0; border: 1px solid var(--t-line-strong); border-radius: 50%; background: none; cursor: pointer; }
html[data-theme="v2"] body #appView.app-shell .theme-actions { display: flex; justify-content: flex-end; }