/* Trivus dashboard styles (loaded when the dashboard opens).
 * Merged from 23 stylesheets that used to load one by one. Sections keep their original order, so the cascade is unchanged. */

/* ===================== royal.css ===================== */
:root {
  --bg: #09090b;
  --surface: #111216;
  --surface-2: #191a20;
  --line: #2a3034;
  --text: #fffaf0;
  --muted: #a2b9b4;
  --primary: var(--t-accent, #9fdcc8);
  --primary-2: #27b7a3;
  --danger: #ef6f79;
  --warning: #f2c66d;
  --focus: #7deddd;
  --shadow: 0 24px 70px #00000080;
  color-scheme: dark;
}

html {
  scrollbar-color: #3a4246 #111216;
}

body {
  background:
    radial-gradient(circle at 88% -8%, #9fdcc81b 0, transparent 30%),
    radial-gradient(circle at 10% 18%, #9fb5d41a 0, transparent 27%),
    linear-gradient(145deg, #08090c 0%, #0d0d10 48%, #100d08 100%);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 46%, #8bf7de08 46.2% 46.35%, transparent 46.55%),
    radial-gradient(circle at 72% 30%, transparent 0 180px, #9fdcc80a 181px 182px, transparent 183px);
}

::selection {
  color: #17110a;
  background: #6fedd0;
}

.sidebar {
  background: linear-gradient(180deg, #0b0c10 0%, #100e0a 100%);
  border-inline-end-color: #244039;
  box-shadow: 12px 0 42px #00000026;
}

.brand {
  color: #d5fff5;
  letter-spacing: .01em;
}

.brand-mark {
  color: #06211b;
  background: linear-gradient(145deg, #bdfff0 0%, var(--t-accent, #9fdcc8) 48%, #16a987 100%);
  border: 1px solid #87f6dc;
  box-shadow: 0 8px 24px #26bd9a38, inset 0 1px #dcfff7;
}

.brand-mark.has-avatar {
  border: 0;
  box-shadow: none;
}

.guild-picker,
.module-card,
.audit-item {
  background: linear-gradient(145deg, #191a20, #15151a);
  border-color: #20332f;
}

.guild-picker:focus-within {
  border-color: #3dc9a8;
  box-shadow: 0 0 0 3px #9fdcc817;
}

.nav-heading,
.eyebrow {
  color: #4fd6b6;
}

.nav-item {
  color: #9eafab;
}

.nav-item:hover {
  color: #e5fff9;
  background: #172a26;
}

.nav-item.active {
  color: #cafff3;
  background: linear-gradient(90deg, #1d5a4c75, #142b2666);
  box-shadow: inset 3px 0 var(--t-accent, #9fdcc8);
}

[dir="rtl"] .nav-item.active {
  box-shadow: inset -3px 0 var(--t-accent, #9fdcc8);
}

.system-nav-group { display:grid; gap:4px; margin-block:3px; }
.system-nav-group > summary { list-style:none; }
.system-nav-group > summary::-webkit-details-marker { display:none; }
.system-nav-trigger { display:flex; align-items:center; gap:12px; width:100%; min-height:40px; padding:7px 10px; border:0; border-radius:0; color:#8ed9c8; background:transparent; cursor:pointer; transition:color .18s; }
.system-nav-trigger:hover,.system-nav-group.has-active > .system-nav-trigger { color:#cafff3; background:transparent; }
.system-nav-icon,.system-nav-chevron { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.system-nav-trigger > span:first-of-type { min-width:0; flex:1; font-weight:750; text-align:start; }
.system-nav-chevron { width:16px; height:16px; flex-basis:16px; transition:transform .2s ease; }
.system-nav-group[open] .system-nav-chevron { transform:rotate(180deg); }
.system-nav-items { display:grid; gap:3px; margin-inline-start:12px; padding:6px 0 3px 10px; border-inline-start:1px solid #1e443b; animation:systemNavReveal .18s ease; }
.auto-response-row { display:grid; grid-template-columns:1fr 150px 2fr 1fr 38px; gap:8px; align-items:start; padding:10px; margin-bottom:8px; border:1px solid #1f493f; border-radius:10px; background:#121214; }
@media (max-width:760px){.auto-response-row{grid-template-columns:1fr;}}
[dir="rtl"] .system-nav-items { padding:6px 10px 3px 0; }
.nav-item.nested { min-height:40px; padding-block:9px; font-size:13px; }
.nav-item.nested svg { width:17px; height:17px; }
#nav.purchase-entry .nav-heading,#nav.purchase-entry .system-nav-group,#nav.purchase-entry .nav-item:not([data-page="commerce"]):not(#developerNav) { display:none; }
@keyframes systemNavReveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }

.status-dot {
  background: #445a55;
}

.status-dot.on,
.pulse {
  background: var(--t-accent, #9fdcc8);
  box-shadow: 0 0 12px #9fdcc89c;
}

.topbar {
  border-bottom-color: #233833;
  background: linear-gradient(180deg, #0c0d11b8, transparent);
}

.topbar .button { margin-inline-start: 0; }
.topbar [data-install-app] { margin-inline-start: auto; }
.topbar [data-install-app].hidden + #languageButton { margin-inline-start: auto; }

.login-view {
  background:
    radial-gradient(circle at 50% 8%, #6ae9cb2b 0, transparent 35%),
    radial-gradient(circle at 14% 35%, #a8bdd428 0, transparent 32%),
    #09090b;
}

.login-card {
  background: linear-gradient(155deg, #17181deF, #0f0f12f2);
  border-color: #295a4f;
  box-shadow: 0 28px 90px #00000099, inset 0 1px #a5f8e51f;
}

.button.primary {
  color: #06211b;
  background: linear-gradient(135deg, #a6ffea 0%, var(--t-accent, #9fdcc8) 52%, #21bf9a 100%);
  border-color: #79f2d6;
  box-shadow: 0 8px 24px #25b99630, inset 0 1px #dffff8;
}

.button.primary:hover {
  color: #041612;
  background: linear-gradient(135deg, #befff0, #66edce 52%, #2ccea8);
  box-shadow: 0 10px 30px #3bd9b43d, inset 0 1px #fffdf2;
}

.button.ghost {
  color: #c4e2db;
  border-color: #2b4a43;
  background: #17161266;
}

.button.ghost:hover {
  color: #ccfff3;
  border-color: #37b89a;
  background: #152a25;
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 0%, #7af7da2b, transparent 34%),
    radial-gradient(circle at 8% 100%, #9fb5d41c, transparent 38%),
    linear-gradient(120deg, #15161b, #0e211d);
  border-color: #2b5b50;
  box-shadow: inset 0 1px #8df5dd1c;
}

.hero::after {
  position: absolute;
  inset-inline-end: -58px;
  top: -92px;
  width: 230px;
  height: 230px;
  content: "";
  border: 1px solid #9fdcc83d;
  border-radius: 50%;
  box-shadow: 0 0 0 22px #9fdcc808, 0 0 0 48px #9fdcc805;
  pointer-events: none;
}

.health {
  color: #aaf6e4;
  background: #0e211d;
  border-color: #26705f;
}

.stat-card,
.panel,
.settings-head,
.field-group {
  background: linear-gradient(150deg, #131419, #101115);
  border-color: #233833;
  box-shadow: inset 0 1px #a5f8e50a;
}

.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  content: "";
  background: linear-gradient(#9bffe8, #16a987);
}

.stat-card strong {
  color: #c2fff1;
}

.module-card:hover {
  border-color: #2f806d;
}

.module-badge {
  color: #a2b9b4;
  background: #2d2b29;
}

.module-badge.on {
  color: #b2ffed;
  background: #194b3f;
  border: 1px solid #287a67;
}

.switch {
  background: #49443c;
  box-shadow: inset 0 0 0 1px #46625b;
}

.switch-row input:checked + .switch {
  background: linear-gradient(90deg, #21b794, var(--t-accent, #9fdcc8));
  box-shadow: 0 0 18px #39d9b43d;
}

.switch::after {
  background: #fffaf0;
  box-shadow: 0 2px 7px #0008;
}

.field input,
.field select,
.field textarea,
.role-catalog-head input {
  color: #fffaf0;
  background: #0d0e12;
  border-color: #2a3034;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.role-catalog-head input:focus {
  border-color: #49d7b6;
  box-shadow: 0 0 0 3px #9fdcc818;
}

.field label,
.log-event-card h4 {
  color: #cce9e2;
}

.check-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.preference-toggle {
  justify-content: flex-start;
  min-height: 62px;
  padding: 10px 13px;
  border: 1px solid #263b36;
  border-radius: 13px;
  background: linear-gradient(135deg, #15151a, #101014);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.preference-toggle:hover {
  border-color: #2f806d;
  background: linear-gradient(135deg, #19181c, #121114);
  transform: translateY(-1px);
}

.preference-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: #52d6b7;
  border: 1px solid #295b4f;
  border-radius: 10px;
  background: #201a11;
}

.preference-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preference-copy {
  min-width: 0;
  margin-inline-end: auto;
  color: #e4f7f3;
  white-space: normal;
}

.preference-copy strong {
  display: block;
  font-size: 14px;
  line-height: 1.45;
}

.preference-toggle .switch {
  width: 46px;
  height: 25px;
  flex-basis: 46px;
}

.preference-toggle .switch::after {
  width: 17px;
  height: 17px;
}

.preference-toggle input:checked + .switch::after,
[dir="rtl"] .preference-toggle input:checked + .switch::after {
  transform: translateX(21px);
}

.save-bar {
  background: #121114ed;
  border-color: #295b4f;
  box-shadow: 0 18px 55px #0000008c, inset 0 1px #a6ffea1a;
}

.loading {
  background: #09090bf0;
}

.loading span {
  border-color: #2b403b;
  border-top-color: var(--t-accent, #9fdcc8);
}

.toast {
  color: #cffff4;
  background: #133b32;
  border-color: #2f9f85;
}

.toast.error {
  background: #3b181f;
  border-color: #87404a;
}

.ticket-type,
.faq-item,
.moderation-duration,
.log-event-card {
  background: #121318;
  border-color: #253a35;
}

.log-event-card h4 {
  background: #1b1813;
  border-bottom-color: #25453e;
}

.log-event-item {
  border-bottom-color: #20302c;
}

.log-event-item:hover {
  background: #201a12;
}

.moderation-behavior-switch {
  margin-top: 16px;
}

.moderation-actions-hint {
  margin: -5px 0 16px;
}

.moderation-action-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.moderation-action-group {
  overflow: hidden;
  border: 1px solid #253a35;
  border-radius: 12px;
  background: #121318;
}

.moderation-action-group h4 {
  margin: 0;
  padding: 14px 16px;
  color: #caf4ea;
  background: linear-gradient(135deg, #211b12, #171512);
  border-bottom: 1px solid #25453e;
  font-size: 13px;
}

.moderation-action-item {
  justify-content: space-between;
  min-height: 54px;
  padding: 11px 15px;
  border-bottom: 1px solid #20302c;
  font-size: 13px;
  font-weight: 650;
  transition: background-color .16s ease;
}

.moderation-action-item:last-child {
  border-bottom: 0;
}

.moderation-action-item:hover {
  background: #201a12;
}

.moderation-action-item:focus-within {
  background: #132420;
}

.moderation-action-controls,
.moderation-action-controls label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.moderation-action-controls {
  flex: 1;
  justify-content: flex-end;
}

.moderation-level-picker {
  width: min(230px, 100%);
  flex: 0 1 230px;
  text-align: start;
}

.moderation-level-picker summary {
  min-height: 42px;
  padding-block: 7px;
  font-size: 11px;
}

.moderation-level-picker .resource-picker-body {
  position: relative;
  z-index: 2;
}

.moderation-level-picker .resource-option {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.moderation-level-select {
  max-width: 138px;
  padding: 7px 9px;
  color: #caf4ea;
  background: #0d0e12;
  border: 1px solid #29554b;
  border-radius: 8px;
  outline: none;
  font-size: 11px;
  font-weight: 700;
}

.moderation-level-select:focus {
  border-color: #49d7b6;
  box-shadow: 0 0 0 3px #9fdcc818;
}

.resource-picker {
  background: #0d0e12;
  border-color: #2a3034;
}

.resource-picker[open] {
  border-color: #34b698;
  box-shadow: 0 0 0 3px #9fdcc814;
}

.resource-picker-body {
  background: #0b0c0f;
  border-top-color: #2a3034;
}

.resource-search,
.resource-option {
  background: #15151a;
  border-color: #2f2921;
}

.resource-search:focus-within {
  border-color: #49d7b6;
  box-shadow: 0 0 0 3px #9fdcc818;
}

.resource-option:hover {
  background: #211b13;
  border-color: #2f806d;
}

.resource-option.selected {
  background: #13342c;
  border-color: #37b89a;
}

.resource-summary-icon,
.resource-option-icon,
.resource-chevron,
.resource-search {
  color: #58cdb2;
}

.resource-check {
  border-color: #365c53;
}

.resource-option.selected .resource-check {
  color: #05201a;
  background: var(--t-accent, #9fdcc8);
  border-color: #7bf3d7;
}

.color-role-browser-count,
.role-order-number,
.role-position {
  color: #b4eadd;
  background: #172a26;
}

.color-role-item,
.role-catalog-item {
  background: #111217;
  border-color: #233430;
}

.color-role-item:hover,
.role-catalog-item:hover {
  background: #1e1912;
  border-color: #2f806d;
}

.role-catalog-item.selected {
  background: #113029;
  border-color: #31a78b;
}

.role-order-actions button {
  color: #81cfbd;
  background: #1b1813;
  border-color: #294a42;
}

.role-order-actions button:hover {
  color: #70f1d3;
  border-color: #48d4b3;
}

.ticket-type {
  grid-template-columns: .7fr .8fr 1fr 1fr auto;
}

.moderation-duration {
  display: grid;
  grid-template-columns: 1fr .65fr 1.4fr auto;
  gap: 10px;
  align-items: end;
  margin-top: 11px;
  padding: 14px;
  border: 1px solid #253a35;
  border-radius: 11px;
}

.moderation-duration .field { margin: 0; }

.color-role-item {
  grid-template-columns: auto auto auto minmax(140px, 1fr) minmax(130px, .55fr) auto;
}

.color-role-emoji {
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  color: #fffaf0;
  background: #0d0e12;
  border: 1px solid #294a42;
  border-radius: 8px;
  outline: none;
}

.color-role-emoji:focus {
  border-color: #49d7b6;
  box-shadow: 0 0 0 3px #9fdcc818;
}

.text-button:hover,
a:hover {
  color: #6ef0d2;
}

/* Public landing */
.landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fffaf0;
  background:
    radial-gradient(circle at 74% 8%, #26b79530 0, transparent 26%),
    radial-gradient(circle at 10% 34%, #8098b91c 0, transparent 25%),
    linear-gradient(145deg, #08090c 0%, #0d0e12 48%, #120e08 100%);
}

.landing::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .23;
  background-image: linear-gradient(#64e9ca10 1px, transparent 1px), linear-gradient(90deg, #64e9ca10 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.landing-orb {
  position: absolute;
  width: 440px;
  height: 440px;
  border: 1px solid #9fdcc822;
  border-radius: 50%;
  pointer-events: none;
  animation: landingFloat 20s ease-in-out infinite;
}

.landing-orb::before,
.landing-orb::after {
  position: absolute;
  inset: 42px;
  content: "";
  border: 1px solid #9fdcc817;
  border-radius: inherit;
}

.landing-orb::after { inset: 92px; }
.orb-one { inset-inline-end: -180px; top: 100px; }
.orb-two { inset-inline-start: -290px; top: 720px; animation-delay: -4s; }

.landing-nav,
.landing-hero,
.landing-section,
.landing-final,
.landing-footer {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.landing-nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid #255b4e2e;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #d5fff5;
  font-size: 19px;
  font-weight: 850;
  text-decoration: none;
}

.landing-links {
  display: flex;
  gap: 28px;
  margin-inline-start: 34px;
}

.landing-links a {
  color: #99aaa6;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

.landing-links a:hover { color: #6ef0d2; }
.landing-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.button.compact { margin: 0; padding: 9px 14px; font-size: 13px; }

.landing-hero {
  min-height: 700px;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  align-items: center;
  gap: 70px;
  padding-block: 82px 92px;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  color: #83ecd3;
  background: #122c2683;
  border: 1px solid #2b7967;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.landing-kicker > span:first-child {
  width: 7px;
  height: 7px;
  background: #6ef1d2;
  border-radius: 50%;
  box-shadow: 0 0 14px #efc66d;
}

.landing-copy h1 {
  max-width: 650px;
  margin: 24px 0 20px;
  color: #fffaf0;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -.045em;
  white-space: pre-line;
}

.landing-copy > p {
  max-width: 590px;
  margin: 0;
  color: #a2b9b4;
  font-size: 17px;
  line-height: 1.9;
}

.landing-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.landing-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.landing-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .landing-primary svg { transform: scaleX(-1); }
.landing-secondary { display: inline-flex; align-items: center; }

.landing-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
  color: #8f8a80;
  font-size: 12px;
}

.landing-trust > span { display: inline-flex; align-items: center; gap: 7px; }
.landing-trust svg { width: 15px; height: 15px; fill: none; stroke: #5fdfc1; stroke-width: 2.4; }

.landing-visual { position: relative; }
.preview-glow { position: absolute; inset: 12% 8%; background: #3bd9b426; filter: blur(70px); border-radius: 50%; }
.dashboard-preview {
  position: relative;
  min-height: 500px;
  display: grid;
  grid-template-columns: 132px 1fr;
  overflow: hidden;
  background: #0d0e12e8;
  border: 1px solid #2e7363;
  border-radius: 20px;
  box-shadow: 0 45px 110px #000a, inset 0 1px #aaffeb21;
  transform: none;
}

.dashboard-preview::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, #a5ffea10 48%, transparent 61%);
  translate: -120% 0;
  animation: previewSheen 38s cubic-bezier(.45,0,.55,1) infinite;
}
.preview-sidebar { padding: 20px 12px; background: #0a0b0e; border-inline-end: 1px solid #1e342f; }
.preview-logo { display: flex; align-items: center; gap: 8px; margin: 0 4px 30px; font-size: 13px; }
.preview-logo .brand-mark.small { width: 28px; height: 28px; min-width: 28px; font-size: 12px; border-radius: 8px; }
.preview-nav { display: flex; align-items: center; gap: 8px; margin: 5px 0; padding: 9px; color: #77746d; border-radius: 7px; font-size: 9px; }
.preview-nav i { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 3px; }
.preview-nav.active { color: #90f4dd; background: #14372f; }
.preview-main { padding: 27px 24px; }
.preview-top { display: flex; align-items: center; justify-content: space-between; }
.preview-top small,.preview-card > small { display: block; color: #48b99f; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.preview-top strong { display: block; margin-top: 5px; font-size: 17px; }
.preview-online { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: #9fd8cb; background: #10201c; border: 1px solid #1f493f; border-radius: 999px; font-size: 8px; }
.preview-online i { width: 6px; height: 6px; background: var(--t-accent, #9fdcc8); border-radius: 50%; box-shadow: 0 0 8px var(--t-accent, #9fdcc8); }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 25px 0 13px; }
.preview-stats > span,.preview-card { padding: 14px; background: #15161a; border: 1px solid #1f302c; border-radius: 10px; }
.preview-stats small { display: block; min-height: 20px; color: #817d75; font-size: 8px; }
.preview-stats b { display: block; margin-top: 8px; color: #aaf8e6; font-size: 18px; }
.preview-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; }
.preview-system { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 10px; padding: 8px; background: #101115; border-radius: 7px; font-size: 8px; }
.preview-system > span { width: 7px; height: 7px; border-radius: 2px; border: 1px solid #358d78; }
.preview-system i { width: 6px; height: 6px; background: #58ddbe; border-radius: 50%; box-shadow: 0 0 7px #58ddbe80; }
.preview-activity span { display: block; height: 7px; margin-top: 14px; border-radius: 99px; background: #2a2824; }
.preview-activity span:nth-child(3) { width: 82%; }.preview-activity span:nth-child(4) { width: 63%; }.preview-activity span:nth-child(5) { width: 72%; }

.landing-section { padding-block: 108px; }
.section-heading { max-width: 670px; margin: 0 auto 48px; text-align: center; }
.section-heading h2,.workflow-copy h2,.landing-final h2 { margin: 10px 0 14px; color: #e6fff9; font-size: clamp(31px, 4vw, 48px); line-height: 1.2; letter-spacing: -.025em; }
.section-heading > p:last-child,.workflow-copy > p { color: #98aaa6; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card { position: relative; min-height: 225px; padding: 27px; overflow: hidden; background: linear-gradient(145deg, #15161b, #101115); border: 1px solid #233833; border-radius: 16px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.feature-card::after { position: absolute; inset-inline-end: -50px; bottom: -70px; width: 150px; height: 150px; content: ""; background: #3bd9b40b; border: 1px solid #9fdcc817; border-radius: 50%; }
.feature-card:hover { transform: translateY(-6px); border-color: #328975; box-shadow: 0 22px 50px #0005; }
.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #6eeccf; background: #122c26; border: 1px solid #256858; border-radius: 12px; }
.feature-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-card h3 { margin: 21px 0 10px; font-size: 18px; }
.feature-card p { margin: 0; color: #8d9d99; font-size: 13px; line-height: 1.8; }

.workflow-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.workflow-copy .button { display: inline-block; margin-top: 14px; }
.workflow-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.workflow-list li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px; background: #121318bd; border: 1px solid #233833; border-radius: 14px; }
.workflow-list li > span { color: #59debf; font: 800 19px/1.3 ui-monospace, monospace; }
.workflow-list b { color: #d6f8f0; }
.workflow-list p { margin: 7px 0 0; color: #8f8a80; font-size: 13px; line-height: 1.7; }
.community-section { display: grid; grid-template-columns: 1fr 430px; gap: 90px; align-items: center; }
.community-copy h2 { max-width: 650px; margin: 10px 0 18px; color: #e6fff9; font-size: clamp(31px, 4vw, 48px); line-height: 1.2; letter-spacing: -.025em; }
.community-copy > p:not(.eyebrow) { max-width: 620px; color: #98aaa6; line-height: 1.9; }
.community-points { display: grid; gap: 12px; margin-top: 25px; color: #b1c8c3; font-size: 13px; }
.community-points > span { display: flex; align-items: center; gap: 10px; }
.community-points svg { width: 17px; height: 17px; fill: none; stroke: #5fdfc1; stroke-width: 2.3; }
.community-live { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 8px 12px; color: #a9d8cd; background: #1d1a12; border: 1px solid #224e44; border-radius: 999px; font-size: 12px; }
.community-live i { width: 7px; height: 7px; background: #57d38c; border-radius: 50%; box-shadow: 0 0 10px #57d38c; animation: livePulse 3.8s ease-in-out infinite; }
.community-live strong { color: #bdfff0; font-variant-numeric: tabular-nums; }
.community-join { display: inline-block; margin-top: 24px; }
.discord-widget-shell { position: relative; width: 390px; min-height: 540px; display: grid; place-items: center; justify-self: center; overflow: hidden; background: linear-gradient(145deg,#17181d,#0e0f12); border: 1px solid #286758; border-radius: 22px; box-shadow: 0 28px 80px #0008, inset 0 1px #a5ffea1c; }
.discord-widget-shell iframe { position: relative; z-index: 1; display: block; max-width: calc(100% - 28px); border-radius: 12px; }
.widget-light { position: absolute; top: -120px; inset-inline-start: -90px; width: 290px; height: 290px; background: #9fdcc81a; border-radius: 50%; filter: blur(48px); animation: widgetGlow 24s ease-in-out infinite; }
.landing-final { min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-block: 50px 100px; padding: 44px 52px; overflow: hidden; background: radial-gradient(circle at 82% 20%, #6ef0d222, transparent 32%), linear-gradient(130deg,#17181d,#0d211c); border: 1px solid #296b5c; border-radius: 22px; box-shadow: inset 0 1px #a5ffea1f; }
.landing-final::after { position: absolute; inset-inline-end: -50px; width: 230px; height: 230px; content: ""; border: 1px solid #9fdcc824; border-radius: 50%; box-shadow: 0 0 0 28px #9fdcc808; }
.landing-final > * { position: relative; z-index: 1; }
.landing-final h2 { margin-bottom: 0; }
.landing-footer { display: flex; justify-content: space-between; padding-block: 26px; color: #77736b; border-top: 1px solid #1f493f; font-size: 12px; }

/* Commerce and developer operations */
.pricing-section { padding-top: 34px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 34px; align-items:stretch; }
.pricing-card { position: relative; display:flex; flex-direction:column; overflow: hidden; min-height: 560px; padding: 30px; border: 1px solid #225a4d; border-radius: 26px; background: linear-gradient(145deg,rgba(21,21,22,.97),rgba(10,10,11,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.3); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.25,1),border-color .28s ease,box-shadow .28s ease; }
.pricing-card::after { content:""; position:absolute; inset:auto -80px -100px auto; width:220px; height:220px; border-radius:50%; background:color-mix(in srgb, var(--t-accent, #9fdcc8) 8%, transparent); filter:blur(8px); }
.pricing-card.featured { border-color: #2e9d83; box-shadow: 0 28px 90px rgba(143,97,19,.18); }
.pricing-card.custom-plan { border-color:#2f5149; }
.pricing-card:hover { transform:translateY(-7px); border-color:#3ec0a2; box-shadow:0 32px 90px rgba(0,0,0,.48); }
.pricing-card.reveal:nth-child(2) { transition-delay:.12s; }.pricing-card.reveal:nth-child(3) { transition-delay:.24s; }
.pricing-card-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.plan-badge { padding:6px 10px; color:#a7bdb8; border:1px solid #334b45; border-radius:999px; background:#171612; font-size:10px; font-weight:800; }
.plan-badge.recommended { color:#06241d; border-color:#efc66d; background:linear-gradient(135deg,#86f3da,#4bdbb9); }
.pricing-card h3 { margin: 19px 0 10px; font-size: clamp(25px,3vw,35px); }
.pricing-card > p:not(.eyebrow) { min-height: 86px; max-width: 540px; color:#9aaaa6; line-height:1.85; }
.plan-benefits { position:relative; z-index:1; display:grid; gap:13px; margin:22px 0 28px; padding:20px 0 0; border-top:1px solid #253531; list-style:none; }
.plan-benefits li { position:relative; padding-inline-start:26px; color:#bdd2cd; font-size:12px; line-height:1.65; }
.plan-benefits li::before { position:absolute; inset-inline-start:0; top:.2em; display:grid; place-items:center; width:17px; height:17px; content:"✓"; color:#06201a; border-radius:50%; background:var(--t-accent, #9fdcc8); font-size:10px; font-weight:900; }
.pricing-card .plan-action { position:relative; z-index:1; display:flex; justify-content:center; margin-top:auto; }
.pricing-icon { display:grid; place-items:center; width:58px; height:58px; border:1px solid #277261; border-radius:18px; color:#6fefd1; background:linear-gradient(145deg,#122b25,#15120d); }
.pricing-icon svg { width:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pricing-card:hover .pricing-icon { transform:translateY(-3px) rotate(-2deg); transition:transform .35s ease; }
.pricing-note { display:flex; align-items:center; justify-content:center; gap:10px; width:max-content; max-width:100%; margin:24px auto 0; padding:11px 16px; color:#90a6a1; border:1px solid #24413a; border-radius:999px; background:#12110e; font-size:12px; }
.pricing-note p { margin:0; }.pricing-note > span { width:7px; height:7px; border-radius:50%; background:var(--t-accent, #9fdcc8); box-shadow:0 0 12px #9fdcc870; }
.commerce-hero { position:relative; overflow:hidden; margin-bottom:24px; padding:30px 34px; border:1px solid #1f6051; border-radius:24px; background:linear-gradient(115deg,#0d1d19,#101011 62%); }
.commerce-hero::after { content:""; position:absolute; width:260px; height:260px; inset:-170px auto auto -70px; border-radius:50%; background:color-mix(in srgb, var(--t-accent, #9fdcc8) 14%, transparent); filter:blur(22px); }
.commerce-hero h2 { margin:4px 0 8px; font-size:clamp(26px,3vw,40px); }
.commerce-hero p:last-child { margin:0; color:#9aaaa6; }
.commerce-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:22px; align-items:start; }
.purchase-builder { padding:26px; }
.plan-selector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.plan-selector label { cursor:pointer; }
.plan-selector input { position:absolute; opacity:0; }
.plan-selector > label > span { display:block; min-height:118px; padding:19px; border:1px solid #39342b; border-radius:18px; background:#121214; transition:.2s ease; }
.plan-selector strong,.plan-selector small { display:block; }
.plan-selector strong { color:#e2f4f0; font-size:17px; }
.plan-selector small { margin-top:9px; color:#8e8980; line-height:1.6; }
.plan-selector input:checked + span { border-color:#4fd5b6; background:linear-gradient(145deg,#102d26,#17140f); box-shadow:0 0 0 3px color-mix(in srgb, var(--t-accent, #9fdcc8) 9%, transparent); }
.builder-section { margin-top:25px; }
.builder-section h3 { margin-bottom:14px; }
.product-module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.product-module { display:flex; align-items:center; gap:11px; min-height:62px; padding:11px 13px; border:1px solid #34312b; border-radius:14px; background:#111113; cursor:pointer; }
.product-module input { position:absolute; opacity:0; pointer-events:none; }
.product-module-check { display:grid; flex:0 0 28px; place-items:center; width:28px; height:28px; border:1px solid #2c5b50; border-radius:9px; color:#15110a; }
.product-module-check svg { width:17px; fill:none; stroke:currentColor; stroke-width:2.4; }
.product-module input:checked + .product-module-check { border-color:var(--t-accent, #9fdcc8); background:var(--t-accent, #9fdcc8); }
.product-module strong,.product-module small { display:block; }
.product-module small { margin-top:3px; color:#7d8f8b; }
.purchase-total { display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding:20px; border:1px solid #235f51; border-radius:16px; background:#17140f; }
.purchase-total strong { color:#6ff1d3; font-size:24px; }
.purchase-submit { width:100%; margin-top:13px; }
.commerce-history { display:grid; gap:22px; }
.commerce-history > section > h3 { margin:0 0 12px; }
.record-stack { display:grid; gap:12px; }
.commerce-record { padding:18px; border:1px solid #34312b; border-radius:18px; background:linear-gradient(145deg,#151516,#101011); }
.commerce-record.pending { border-color:#276657; }.commerce-record.approved,.commerce-record.subscription-card { border-color:#3f432f; }.commerce-record.rejected { opacity:.78; }
.record-head,.entity,.buyer-line,.record-actions { display:flex; align-items:center; }
.record-head { justify-content:space-between; gap:12px; }
.entity { min-width:0; gap:12px; }.entity > div { min-width:0; }.entity strong,.entity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.entity small { margin-top:3px; color:#837e75; font-size:11px; direction:ltr; text-align:start; }
.entity-avatar { width:44px; height:44px; flex:0 0 44px; border:1px solid #2a3034; border-radius:13px; object-fit:cover; background:#201b13; }
.entity-avatar.fallback { display:grid; place-items:center; color:#6eedcf; font-weight:800; }
.commerce-status,.runtime-status,.count-badge { display:inline-flex; align-items:center; width:max-content; padding:6px 9px; border-radius:999px; font-size:11px; font-weight:750; }
.commerce-status { color:#a5b9b4; background:#252326; }.commerce-status.active,.commerce-status.approved { color:#dff5c5; background:#26321f; }.commerce-status.pending { color:#87f7dd; background:#173830; }.commerce-status.suspended,.commerce-status.rejected,.commerce-status.expired { color:#f4b2a7; background:#3b211f; }
.runtime-status { gap:6px; margin-inline-start:5px; color:#8b9b97; background:#1d1d1f; }.runtime-status i { width:7px; height:7px; border-radius:50%; background:#756f66; }.runtime-status.online { color:#cbeeb0; }.runtime-status.online i { background:#92cf68; box-shadow:0 0 10px rgba(146,207,104,.55); }
.record-meta { display:grid; gap:8px; margin-top:15px; color:#b2ada4; font-size:12px; }.record-meta > span { display:flex; gap:7px; align-items:center; }.record-meta b { color:#716b62; font-weight:600; }.record-meta .entity-avatar { width:28px; height:28px; flex-basis:28px; border-radius:8px; }
.module-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }.module-tags span { padding:5px 8px; border:1px solid #23423b; border-radius:8px; color:#8fc9bb; background:#1b1812; font-size:11px; }
.record-actions { flex-wrap:wrap; gap:8px; margin-top:16px; }.button.danger { color:#ffc5bc; border-color:#6b3832; background:#321d1b; }.token-inline { min-width:220px; flex:1; }
.empty-state,.commerce-loading { padding:28px; border:1px dashed #2c443e; border-radius:17px; color:#89847b; text-align:center; }
.developer-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; }.developer-stats article { padding:21px; border:1px solid #1f463d; border-radius:18px; background:#141414; }.developer-stats span,.developer-stats strong { display:block; }.developer-stats span { color:#7f918d; }.developer-stats strong { margin-top:10px; color:#6bf0d1; font-size:31px; }
.developer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }.developer-section { padding:22px; }.developer-section.wide { grid-column:1/-1; }.developer-section .panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }.count-badge { color:#63e8c9; background:#162e28; }
.catalog-editor { display:grid; gap:9px; }.catalog-row { display:grid; grid-template-columns:minmax(0,1fr) 90px 38px auto; gap:8px; align-items:center; padding:10px; border:1px solid #302e29; border-radius:13px; background:#111113; }.catalog-row strong,.catalog-row small { display:block; }.catalog-row small { margin-top:3px; color:#716d66; }.catalog-row input[type="number"] { min-width:0; }
.mini-switch input { position:absolute; opacity:0; }.mini-switch span { display:block; width:36px; height:21px; padding:3px; border-radius:999px; background:#393638; cursor:pointer; }.mini-switch span::after { content:""; display:block; width:15px; height:15px; border-radius:50%; background:#99938a; transition:.2s ease; }.mini-switch input:checked + span { background:#1e7d67; }.mini-switch input:checked + span::after { transform:translateX(15px); background:#6ff0d2; }[dir="rtl"] .mini-switch input:checked + span::after { transform:translateX(-15px); }
.manual-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.manual-form .full,.manual-form > button { grid-column:1/-1; }
.subscriptions-admin .commerce-record { padding:22px; }.subscriptions-admin .product-module-grid { margin-top:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.nav-item.unlicensed,.module-card.unlicensed { opacity:.48; filter:saturate(.45); }.nav-item.unlicensed { cursor:not-allowed; }.module-card.unlicensed .module-badge { max-width:150px; }

/* Premium commerce V2 — Lucide-style outline icon system */
.module-visual { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border:1px solid #255c4f; border-radius:13px; color:#6cedcf; background:linear-gradient(145deg,#122b25,#15130f); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.module-visual svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.module-visual.large { width:54px; height:54px; border-radius:17px; }.module-visual.large svg { width:27px; }
.module-visual.tiny { width:24px; height:24px; flex-basis:24px; border-radius:7px; }.module-visual.tiny svg { width:14px; }
.commerce-hero-pro,.developer-hero { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:180px; }
.commerce-security { position:relative; z-index:1; display:flex; align-items:center; gap:14px; max-width:390px; padding:16px 18px; border:1px solid #295e52; border-radius:17px; background:rgba(8,8,9,.58); }
.commerce-security > svg { width:29px; flex:0 0 29px; fill:none; stroke:#61e8c8; stroke-width:1.7; }
.commerce-security strong,.commerce-security small { display:block; }.commerce-security small { margin-top:4px; color:#7d8d89; line-height:1.5; }
.purchase-stepper { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0 0 20px; padding:14px 18px; border:1px solid #273d38; border-radius:18px; background:#111112; }
.purchase-stepper span { position:relative; display:flex; align-items:center; gap:10px; color:#716d66; }
.purchase-stepper span:not(:last-child)::after { content:""; position:absolute; top:50%; inset-inline-start:calc(50% + 35px); width:calc(100% - 70px); height:1px; background:#25413a; }
.purchase-stepper i { display:grid; place-items:center; width:28px; height:28px; border:1px solid #2b443e; border-radius:9px; font-style:normal; }
.purchase-stepper .active { color:#77e7cd; }.purchase-stepper .active i { color:#171108; border-color:var(--t-accent, #9fdcc8); background:var(--t-accent, #9fdcc8); }
.premium-layout { grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr); }
.purchase-builder { padding:30px; }.premium-plans > label > span { position:relative; min-height:190px; padding:22px; }.premium-plans > label > span > .module-visual { margin-bottom:18px; }.premium-plans > label > span > i { display:inline-flex; margin-top:14px; padding:5px 9px; border-radius:999px; color:#59c8ae; background:#142723; font-size:11px; font-style:normal; }
.builder-divider { display:flex; align-items:center; gap:12px; margin:30px 0 16px; }.builder-divider::after { content:""; flex:1; height:1px; background:#302d27; }.builder-divider > span,.step-number { display:grid; place-items:center; width:32px; height:32px; border:1px solid #245e50; border-radius:10px; color:#66e9ca; background:#10211d; }
.secure-token-field { margin-top:13px; padding:16px; border:1px solid #24574b; border-radius:15px; background:#17140e; }.token-input-wrap { position:relative; }.token-input-wrap svg { position:absolute; top:50%; inset-inline-start:13px; width:19px; transform:translateY(-50%); fill:none; stroke:#439683; stroke-width:1.7; }.token-input-wrap input { padding-inline-start:44px; }
.module-catalog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; }.module-catalog-head > div:first-child { display:flex; align-items:center; gap:11px; }.module-catalog-head h3,.module-catalog-head p { margin:0; }.module-catalog-head p { margin-top:3px; color:#777169; font-size:12px; }.catalog-actions { display:flex; gap:14px; }.catalog-actions .text-button { color:#52c8ac; }
.premium-layout .product-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.product-module { position:relative; align-items:flex-start; min-height:128px; padding:16px; gap:13px; transition:border-color .2s ease,background .2s ease,transform .2s ease; }
.product-module:hover { transform:translateY(-2px); border-color:#2e6155; }.product-module.selected,.product-module:has(input:checked) { border-color:#2fa489; background:linear-gradient(145deg,#10241f,#141311); box-shadow:0 10px 30px rgba(0,0,0,.15); }
.product-module-select { position:relative; }.product-module-check { position:absolute; z-index:2; top:-6px; inset-inline-start:-6px; width:20px; height:20px; border-radius:7px; background:#151515; }.product-module-check svg { width:13px; }.product-module-copy { flex:1; min-width:0; }.product-module-copy strong { display:block; color:#f1ece3; font-size:15px; }.product-module-copy small { display:block; margin-top:7px; color:#858078; font-size:11px; line-height:1.55; }.product-module-price { position:absolute; inset-inline-end:13px; bottom:11px; color:#6ee9cc; font-size:14px; font-weight:800; }.product-module-price small { font-size:9px; color:#607570; }
.system-product-bundle { display:block; grid-column:1/-1; min-height:0; padding:0; overflow:hidden; cursor:default; }
.system-product-bundle:hover { transform:none; }
.system-bundle-select { position:relative; display:flex; align-items:flex-start; gap:13px; min-height:126px; padding:16px; cursor:pointer; }
.system-bundle-details { border-top:1px solid #233a35; background:#0f0f10; }
.system-bundle-details > summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:11px 15px; color:#5fc7af; cursor:pointer; list-style:none; font-size:12px; font-weight:750; }
.system-bundle-details > summary::-webkit-details-marker { display:none; }
.system-bundle-details > summary > span { flex:1; }
.system-bundle-details > summary > b { display:grid; place-items:center; min-width:25px; height:23px; border:1px solid #245e50; border-radius:7px; background:#0e211d; font-size:10px; }
.system-bundle-details > summary svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .18s; }
.system-bundle-details[open] > summary svg { transform:rotate(180deg); }
.system-bundle-tags { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:0 14px 14px; }
.system-bundle-tags > span { display:flex; align-items:center; gap:7px; min-width:0; padding:8px 9px; overflow:hidden; border:1px solid #302c25; border-radius:9px; color:#88a69f; background:#151413; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.system-bundle-tags > span .module-visual { flex:0 0 auto; }
.purchase-summary { position:sticky; top:24px; overflow:hidden; padding:27px; border-color:#257361; background:radial-gradient(circle at 80% -20%,color-mix(in srgb, var(--t-accent, #9fdcc8) 15%, transparent),transparent 42%),linear-gradient(160deg,#18140e,#0f0f10 65%); }.summary-crown { margin-bottom:19px; }.purchase-summary h3 { margin:5px 0 22px; font-size:25px; }.summary-server { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid #2b3d39; border-radius:14px; background:#101011; }.summary-server strong,.summary-server small { display:block; }.summary-server small { margin-top:3px; color:#777169; direction:ltr; text-align:start; }.summary-server .entity-avatar { width:38px; height:38px; flex-basis:38px; }
.purchase-summary dl { display:grid; gap:0; margin:18px 0; }.purchase-summary dl div { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #302b22; }.purchase-summary dt { color:#72827e; }.purchase-summary dd { margin:0; color:#d0e7e2; font-weight:750; }
.summary-module-list { display:flex; flex-wrap:wrap; gap:7px; min-height:34px; }.summary-module-list > span { display:flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid #233d37; border-radius:9px; color:#7eb7aa; background:#15130f; font-size:10px; }.summary-module-list > small { color:#746f67; }
.purchase-submit svg { width:18px; fill:none; stroke:currentColor; stroke-width:2; }.summary-footnote { margin:13px 0 0; color:#706a61; font-size:10px; line-height:1.55; text-align:center; }
.premium-history { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:24px; }.premium-history > section { padding:22px; }.premium-history .panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.record-type { display:block; margin-bottom:3px; color:#49a993; font-size:9px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }.record-state { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.record-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:16px; }.record-kpis > span { min-width:0; padding:10px; border:1px solid #2e2c28; border-radius:11px; background:#101011; }.record-kpis b,.record-kpis small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.record-kpis b { color:#c4d8d3; font-size:12px; }.record-kpis small { margin-top:4px; color:#706b63; font-size:9px; }
.record-details { margin-top:13px; border-top:1px solid #2e2b26; }.record-details > summary { display:flex; align-items:center; justify-content:space-between; padding-top:13px; color:#58b7a1; cursor:pointer; list-style:none; font-size:12px; font-weight:700; }.record-details > summary::-webkit-details-marker { display:none; }.record-details > summary svg { width:17px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .2s ease; }.record-details[open] > summary svg { transform:rotate(180deg); }.record-details-body { padding-top:15px; }
.icon-tags span { display:flex; align-items:center; gap:6px; }.button.compact { min-height:34px; padding:7px 11px; font-size:11px; }
.subscription-modules-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:19px 0 12px; }.subscription-modules-head strong,.subscription-modules-head small { display:block; }.subscription-modules-head small { margin-top:4px; color:#756f67; }.subscription-modules-head > span { color:#5ecfb5; font-size:11px; }
.admin-identity-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.identity-tile { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #37332c; border-radius:13px; background:#111112; }.identity-tile small,.identity-tile strong { display:block; }.identity-tile small { color:#777168; }.sticky-actions { position:sticky; bottom:0; z-index:3; padding:12px; border:1px solid #21443c; border-radius:14px; background:rgba(15,15,16,.94); backdrop-filter:blur(12px); }

/* Developer operations center */
.developer-live { display:flex; align-items:center; gap:12px; padding:14px 17px; border:1px solid #2b4f47; border-radius:16px; background:rgba(9,9,10,.65); }.developer-live > span { width:10px; height:10px; border-radius:50%; background:#8bc865; box-shadow:0 0 16px rgba(139,200,101,.7); }.developer-live strong,.developer-live small { display:block; }.developer-live small { margin-top:3px; color:#817b72; }
.developer-commandbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; padding:12px; border:1px solid #283d38; border-radius:17px; background:#111112; }.developer-search { position:relative; flex:1; max-width:500px; }.developer-search svg { position:absolute; top:50%; inset-inline-start:13px; width:19px; transform:translateY(-50%); fill:none; stroke:#6c8b84; stroke-width:1.7; }.developer-search input { width:100%; padding-inline-start:42px; background:#0c0c0d; }.developer-filters { display:flex; flex-wrap:wrap; gap:6px; }.developer-filters button { padding:8px 11px; border:1px solid #38342d; border-radius:10px; color:#7b8b87; background:#171719; cursor:pointer; }.developer-filters button.active { color:#171108; border-color:#b8e8d8; background:#b8e8d8; }
.developer-stats.expanded { grid-template-columns:repeat(3,minmax(0,1fr)); }.developer-stats.expanded article { display:flex; align-items:center; gap:14px; min-height:106px; }.developer-stats.expanded .stat-icon { display:block; }.developer-stats.expanded .stat-icon .module-visual { width:44px; height:44px; }.developer-stats.expanded article > div > span { font-size:11px; }.developer-stats.expanded strong { margin-top:5px; font-size:25px; }.developer-stats.expanded strong i { color:#496962; font-size:15px; font-style:normal; }.revenue-stat { border-color:#277261 !important; background:linear-gradient(145deg,#0e211d,#121212) !important; }
.professional-grid { grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr); }.professional-grid .enhanced > div small { display:block; margin-top:5px; color:#777168; }.professional-grid .enhanced h3 { margin:3px 0 0; }.product-console { grid-column:1; }.manual-console { grid-column:2; }.manual-console > .panel-head > .module-visual { width:42px; }
.catalog-row { grid-template-columns:42px minmax(0,1fr) 110px 38px auto; min-height:76px; padding:12px; }.catalog-copy { min-width:0; }.catalog-copy small { max-width:430px; white-space:normal; line-height:1.45; }.price-input { position:relative; }.price-input input { width:100%; padding-inline-end:38px; }.price-input span { position:absolute; top:50%; inset-inline-end:10px; color:#5d756f; transform:translateY(-50%); font-size:9px; }
.manual-console .product-module-grid { grid-template-columns:1fr; max-height:390px; padding-inline-end:4px; overflow:auto; }.manual-console .product-module { min-height:100px; }.manual-modules { margin-top:8px; }.filter-empty { grid-column:1/-1; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.reveal.visible { opacity: 1; transform: none; }
.pricing-card.reveal.visible:hover { transform:translateY(-7px); transition-delay:0s; }
.feature-card:nth-child(2),.workflow-list li:nth-child(2) { transition-delay: .08s; }
.feature-card:nth-child(3),.workflow-list li:nth-child(3) { transition-delay: .16s; }
.feature-card:nth-child(4) { transition-delay: .08s; }.feature-card:nth-child(5) { transition-delay: .16s; }.feature-card:nth-child(6) { transition-delay: .24s; }

@keyframes previewSheen { 0%,66% { translate: -120% 0; } 92%,100% { translate: 120% 0; } }
@keyframes widgetGlow { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(90px,70px) scale(1.15); } }
@keyframes livePulse { 0%,100% { opacity: 1; scale: 1; } 50% { opacity: .55; scale: .78; } }
@keyframes landingFloat { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(0,-22px,0) rotate(5deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media (max-width: 720px) {
  .moderation-action-groups {
    grid-template-columns: 1fr;
  }
  .moderation-action-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .moderation-action-controls {
    width: 100%;
    justify-content: space-between;
  }
  .ticket-type,
  .moderation-duration,
  .color-role-item {
    grid-template-columns: 1fr;
  }

  .role-order-actions {
    grid-column: auto;
  }
}

@media (max-width: 960px) {
  .landing-links { display: none; }
  .landing-hero { grid-template-columns: 1fr; gap: 65px; text-align: center; }
  .landing-copy > p { margin-inline: auto; }
  .landing-kicker,.landing-primary,.landing-secondary { justify-content: center; }
  .landing-cta,.landing-trust { justify-content: center; }
  .landing-visual { width: min(780px, 100%); margin-inline: auto; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-section,.community-section { grid-template-columns: 1fr; gap: 45px; }
  .commerce-layout,.developer-grid { grid-template-columns:1fr; }
  .developer-section.wide { grid-column:auto; }
  .subscriptions-admin .product-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .landing-nav,.landing-hero,.landing-section,.landing-final,.landing-footer { width: min(100% - 28px, 1280px); }
  .landing-nav { min-height: 72px; }
  .landing-actions .button.primary { display: none; }
  .landing-hero { min-height: auto; padding-block: 65px 75px; }
  .landing-copy h1 { font-size: 42px; }
  .landing-copy > p { font-size: 15px; }
  .landing-cta { display: grid; }
  .landing-primary,.landing-secondary { width: 100%; }
  .dashboard-preview { min-height: 340px; grid-template-columns: 1fr; transform: none; }
  [dir="rtl"] .dashboard-preview { transform: none; }
  .preview-sidebar { display: none; }
  .preview-main { padding: 21px 16px; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-activity { display: none; }
  .landing-section { padding-block: 76px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 205px; }
  .landing-final { align-items: flex-start; flex-direction: column; padding: 34px 26px; margin-block: 30px 70px; }
  .discord-widget-shell { width: 100%; min-height: 535px; }
  .landing-footer { gap: 12px; flex-direction: column; text-align: center; }
  .pricing-grid,.plan-selector,.product-module-grid,.developer-stats,.manual-form,.subscriptions-admin .product-module-grid { grid-template-columns:1fr; }
  .pricing-card,.pricing-card.custom-plan { min-height:0; padding:25px; grid-column:auto; }
  .commerce-hero { padding:24px; }
  .purchase-builder,.developer-section { padding:17px; }
  .catalog-row { grid-template-columns:minmax(0,1fr) 78px 36px; }
  .catalog-row .button { grid-column:1/-1; }
}

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pricing-card.custom-plan { grid-column:1/-1; min-height:480px; }
  .premium-layout,.professional-grid { grid-template-columns:1fr; }
  .purchase-summary { position:relative; top:auto; }
  .product-console,.manual-console { grid-column:auto; }
  .developer-commandbar { align-items:stretch; flex-direction:column; }
  .developer-search { max-width:none; }
}

@media (max-width: 760px) {
  .pricing-grid { grid-template-columns:1fr; }
  .pricing-card.custom-plan { grid-column:auto; min-height:0; }
  .commerce-hero-pro,.developer-hero { align-items:flex-start; flex-direction:column; }
  .commerce-security,.developer-live { width:100%; max-width:none; }
  .purchase-stepper b { display:none; }
  .purchase-stepper span { justify-content:center; }
  .premium-layout .product-module-grid,.premium-history,.developer-stats.expanded,.admin-identity-grid { grid-template-columns:1fr; }
  .module-catalog-head { align-items:flex-start; flex-direction:column; }
  .catalog-row { grid-template-columns:42px minmax(0,1fr) 38px; }
  .catalog-row .price-input { grid-column:1/3; }
  .catalog-row .button { grid-column:1/-1; }
  .record-kpis { grid-template-columns:1fr; }
  .record-head { align-items:flex-start; }
  .record-state { flex-direction:column; align-items:flex-end; }
}

/* Subscription management and corrected icon geometry */
.ui-icon { display:inline-grid; place-items:center; width:22px; height:22px; flex:0 0 22px; color:currentColor; }
.ui-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ui-icon.stat { width:48px; height:48px; padding:12px; border:1px solid #245a4d; border-radius:15px; color:var(--t-accent, #9fdcc8); background:linear-gradient(145deg,#10241f,#15130f); }
.developer-stats .ui-icon.stat { display:grid; color:var(--t-accent, #9fdcc8); }
.developer-stats.expanded article > .ui-icon.stat {
  display:grid !important;
  place-items:center;
  width:54px;
  min-width:54px;
  height:54px;
  flex:0 0 54px;
  padding:13px;
  overflow:visible;
  color:#6ef0d2 !important;
  border-color:#277664;
  border-radius:16px;
  background:linear-gradient(145deg,#122b25,#15120d);
  box-shadow:inset 0 1px #acffec1c,0 10px 26px #0004;
}
.developer-stats.expanded article > .ui-icon.stat > svg {
  display:block !important;
  width:26px !important;
  height:26px !important;
  min-width:26px;
  overflow:visible;
  fill:none !important;
  stroke:#6ef0d2 !important;
  stroke-width:1.9;
  opacity:1 !important;
  visibility:visible !important;
}
.developer-stats.expanded article > .ui-icon.stat > svg :is(path,rect,circle,line,polyline) {
  fill:none;
  stroke:inherit;
  vector-effect:non-scaling-stroke;
}
.ui-icon.tiny,.ui-icon.button-icon { width:15px; height:15px; flex-basis:15px; }
.developer-stats.expanded article > .ui-icon + div { min-width:0; }
.guild-purchase-picker { position:relative; }
.guild-purchase-picker > summary { display:flex; align-items:center; gap:12px; min-height:67px; padding:11px 14px; border:1px solid #245e50; border-radius:15px; background:#0d0d0e; cursor:pointer; list-style:none; }
.guild-purchase-picker > summary::-webkit-details-marker { display:none; }
.guild-purchase-picker > summary > span { min-width:0; flex:1; }
.guild-purchase-picker > summary strong,.guild-purchase-picker > summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guild-purchase-picker > summary small { margin-top:3px; color:#79736a; direction:ltr; text-align:start; }
.guild-purchase-picker > summary .entity-avatar { width:43px; height:43px; flex-basis:43px; }
.guild-purchase-picker .resource-chevron { width:19px; fill:none; stroke:#4baa94; stroke-width:2; }
.guild-purchase-picker[open] .resource-chevron { transform:rotate(180deg); }
.guild-purchase-options { position:absolute; z-index:25; top:calc(100% + 8px); inset-inline:0; display:grid; gap:7px; max-height:330px; padding:9px; overflow:auto; border:1px solid #266959; border-radius:16px; background:#0b0b0c; box-shadow:0 24px 70px rgba(0,0,0,.55); }
.guild-purchase-option { display:flex; align-items:center; gap:11px; width:100%; padding:11px; border:1px solid transparent; border-radius:12px; color:#ccddd9; background:#131315; cursor:pointer; text-align:start; }
.guild-purchase-option:hover,.guild-purchase-option.selected { border-color:#2a8b74; background:#0e211d; }
.guild-purchase-option > span:nth-child(2) { min-width:0; flex:1; }
.guild-purchase-option strong,.guild-purchase-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guild-purchase-option small { margin-top:3px; color:#756f66; direction:ltr; text-align:start; }
.guild-choice-check { display:grid; place-items:center; width:25px; height:25px; border:1px solid #2e4c45; border-radius:8px; color:transparent; }
.guild-choice-check svg { width:15px; fill:none; stroke:currentColor; stroke-width:2.3; }
.guild-purchase-option.selected .guild-choice-check { color:#171108; border-color:var(--t-accent, #9fdcc8); background:var(--t-accent, #9fdcc8); }
.official-bot-requirement { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:11px; padding:12px 14px; border:1px solid #298a73; border-radius:13px; color:#9af0dc; background:linear-gradient(135deg,#26180f,#17120d); }
.official-bot-requirement span { font-size:12px; line-height:1.7; }
.official-bot-requirement .button { flex:0 0 auto; }
.official-bot-requirement.hidden { display:none; }
.subscription-key-notice { display:flex; align-items:center; gap:12px; margin-top:15px; padding:13px 14px; border:1px solid #298a73; border-radius:14px; color:#9af0dc; background:linear-gradient(135deg,#26180f,#17120d); }
.subscription-key-notice > .ui-icon { width:24px; height:24px; flex-basis:24px; color:var(--t-accent, #9fdcc8); }
.subscription-key-notice > span { min-width:0; flex:1; }
.subscription-key-notice strong,.subscription-key-notice small { display:block; }
.subscription-key-notice small { margin-top:4px; color:#78ada1; font-size:10px; line-height:1.55; }
.subscription-key-notice .button { flex:0 0 auto; }
@media (max-width:620px) { .system-bundle-tags { grid-template-columns:1fr 1fr; } }
.nav-item.unlicensed,.module-card.unlicensed { opacity:.58; filter:saturate(.4); }
.status-dot.locked { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; color:#718b85; background:#282522; }
.status-dot.locked .ui-icon { width:13px; height:13px; }
.module-badge.locked { display:flex; align-items:center; gap:5px; max-width:175px; color:#96aaa5; background:#292724; }
.nav-item.unlicensed .status-dot::after { display:none; }
.bot-identity-preview { overflow:hidden; margin-bottom:16px; border:1px solid #29443e; border-radius:17px; background:#111113; }
.bot-banner-preview { height:92px; background:var(--bot-banner,linear-gradient(125deg,#10382f,#17130d 58%,#1f5448)) center/cover; }
.bot-profile-row { display:flex; align-items:center; gap:12px; padding:0 15px 14px; }
.bot-profile-row .entity-avatar { width:58px; height:58px; flex-basis:58px; margin-top:-25px; border:3px solid #111113; border-radius:17px; }
.bot-profile-row > span:nth-child(2) { min-width:0; flex:1; }
.bot-profile-row strong,.bot-profile-row small { display:block; }
.bot-profile-row small { color:#777169; direction:ltr; text-align:start; }
.identity-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.identity-editor-grid .full { grid-column:1/-1; }
.file-field input { padding:10px; }
.ownership-transfer { display:grid; grid-template-columns:minmax(170px,1fr) minmax(190px,1fr) auto; gap:10px; align-items:center; margin-top:17px; padding:14px; border:1px solid #5a302b; border-radius:14px; background:#201312; }
.ownership-transfer strong,.ownership-transfer small { display:block; }
.ownership-transfer small { margin-top:3px; color:#907873; }
.button .ui-icon { margin-inline-end:5px; }
.order-history-panel { min-width:0; }

/* Subscription duration picker */
.subscription-duration-field {
  margin-top:16px;
  padding:16px;
  border:1px solid #244a41;
  border-radius:16px;
  background:linear-gradient(145deg,#15130f,#101011);
}
.subscription-duration-field > label {
  display:block;
  margin-bottom:11px;
  color:#c2e8df;
  font-size:13px;
  font-weight:700;
}
.subscription-duration-picker {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.duration-choice { position:relative; min-width:0; cursor:pointer; }
.duration-choice > input {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  opacity:0;
  pointer-events:none;
}
.duration-choice > span {
  position:relative;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:70px;
  padding:11px 12px;
  overflow:hidden;
  border:1px solid #363128;
  border-radius:12px;
  color:#95aaa5;
  background:#101011;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.duration-choice > span > svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:#4c9f8c;
  stroke-width:1.7;
  stroke-linecap:round;
}
.duration-choice b {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  color:#171108;
  background:#5be2c3;
  font-size:12px;
}
.duration-choice strong {
  min-width:0;
  overflow:hidden;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.duration-choice i {
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border:1px solid #304a44;
  border-radius:50%;
  color:transparent;
  font-style:normal;
}
.duration-choice i svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; }
.duration-choice:hover > span { transform:translateY(-2px); border-color:#2d7665; background:#19150f; }
.duration-choice > input:checked + span {
  border-color:#43d8b5;
  color:#d2fff4;
  background:linear-gradient(145deg,#122b25,#15120d);
  box-shadow:0 8px 24px #0004,inset 0 1px #acffec18;
}
.duration-choice > input:checked + span i { color:#171108; border-color:var(--t-accent, #9fdcc8); background:var(--t-accent, #9fdcc8); }
.duration-choice > input:focus-visible + span { outline:2px solid #6ef0d2; outline-offset:2px; }
.subscription-duration-field > small { display:block; margin-top:10px; color:#6c8d85; line-height:1.6; }

@media (max-width: 760px) {
  .identity-editor-grid,.ownership-transfer { grid-template-columns:1fr; }
  .guild-purchase-options { position:fixed; z-index:80; top:auto; right:14px; bottom:14px; left:14px; max-height:65vh; }
  .subscription-duration-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 420px) { .subscription-duration-picker { grid-template-columns:1fr; } }

/* Overview intelligence and notifications */
.topbar { position:relative; }
.topbar-actions { display:flex; align-items:center; gap:9px; margin-inline-start:auto; }
.notification-button { position:relative; color:#5fd8bc; border:1px solid #204c42; background:#15120d; }
.notification-button svg { fill:none; stroke:currentColor; stroke-width:1.8; }
.notification-count { position:absolute; top:-6px; inset-inline-end:-6px; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border:2px solid #0d0d0e; border-radius:999px; color:#171108; background:#59efcc; font-size:9px; font-weight:900; }
.notification-panel { position:absolute; z-index:90; top:calc(100% + 10px); inset-inline-end:0; width:min(420px,calc(100vw - 28px)); max-height:520px; overflow:auto; border:1px solid #245f51; border-radius:18px; background:#0d0d0f; box-shadow:0 24px 80px #000a; }
.notification-panel-head { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; border-bottom:1px solid #20342f; background:#111112; }
.notification-item { display:grid; grid-template-columns:34px 1fr; gap:11px; padding:14px 17px; border-bottom:1px solid #26231e; color:#a2b7b2; }
.notification-item.unread { background:linear-gradient(90deg,#0e211d,#111112); }
.notification-item > span { display:grid; place-items:center; width:32px; height:32px; border:1px solid #235b4e; border-radius:10px; color:#60e8c8; background:#1d170e; }
.notification-item strong,.notification-item p,.notification-item time { display:block; }
.notification-item strong { color:#d7f6ef; font-size:13px; }.notification-item p { margin:4px 0; font-size:11px; line-height:1.6; }.notification-item time { color:#5e706c; font-size:9px; }
.overview-command { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:18px; padding:25px 28px; border:1px solid #1f574a; border-radius:21px; background:radial-gradient(circle at 10% 0,#0e342b55,transparent 45%),linear-gradient(135deg,#171719,#0e0e0f); }
.overview-command h2 { margin:5px 0 7px; color:#dcfff7; font-size:clamp(22px,3vw,35px); }.overview-command p:last-child { margin:0; }
.overview-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.overview-stats .stat-card { position:relative; min-height:126px; overflow:hidden; border-color:#1f443b; background:linear-gradient(145deg,#171719,#111112); }
.overview-stats .stat-card::before { position:absolute; width:68px; height:68px; inset:-24px auto auto -22px; content:""; border-radius:50%; background:#9fdcc818; box-shadow:0 0 35px #9fdcc81f; }
.overview-stats .stat-card strong { color:#6fefd1; font-size:29px; }.overview-stats .stat-card small { display:block; margin-top:7px; color:#6f837e; }
.overview-subscription { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin:16px 0 22px; padding:17px 19px; border:1px solid #22584b; border-radius:18px; background:linear-gradient(135deg,#0e211d,#111112 60%); }
.overview-subscription > div:first-child { display:flex; align-items:center; gap:11px; }.overview-subscription small,.overview-subscription strong { display:block; }.overview-subscription small { color:#6f8d86; font-size:10px; }.overview-subscription strong { margin-top:3px; color:#cef4eb; }
.overview-subscription-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid #297261; border-radius:13px; color:#58e8c6; background:#122a24; }.overview-subscription-icon svg { width:22px; }
.overview-subscription-tags { display:flex; flex-wrap:wrap; gap:7px; }.overview-subscription-tags > span { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid #273e39; border-radius:9px; color:#9bb9b2; background:#151414; font-size:10px; }.overview-subscription-tags .module-visual { width:18px; height:18px; }
.overview-expiry { min-width:110px; text-align:end; }
.queue-decision-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px; padding-top:15px; border-top:1px solid #243430; }
.queue-decision-actions .button { justify-content:center; min-height:43px; }
.four-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:900px){.overview-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.overview-command{align-items:flex-start;flex-direction:column}.overview-stats,.four-products,.queue-decision-actions{grid-template-columns:1fr}.overview-subscription{grid-template-columns:1fr}.overview-expiry{text-align:start}.topbar-actions .button[data-install-app]{display:none}}
.menu-action-editor { display:grid; gap:9px; }
.menu-action-row { display:grid; grid-template-columns:22px 38px 105px minmax(130px,1fr) minmax(130px,1fr) auto; align-items:center; gap:9px; padding:10px; border:1px solid #273935; border-radius:12px; background:#111112; }
.menu-action-row > input { min-width:0; padding:10px; }.menu-action-row .drag-handle { color:#427e70; cursor:grab; }
.hosting-actions { display:flex; flex-wrap:wrap; gap:9px; }.package-output { max-height:230px; margin:16px 0 0; padding:14px; overflow:auto; border:1px solid #342e25; border-radius:12px; color:#8daaa3; background:#0b0b0c; direction:ltr; text-align:left; white-space:pre-wrap; }
.maintenance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:15px 0; }.maintenance-option { position:relative; cursor:pointer; }.maintenance-option>input { position:absolute; opacity:0; }.maintenance-option>span { display:grid; grid-template-columns:26px 1fr; gap:3px 9px; align-items:center; padding:11px; border:1px solid #373128; border-radius:11px; background:#111112; }.maintenance-option .module-visual { grid-row:1/3; width:25px; height:25px; }.maintenance-option small { color:#647773; }.maintenance-option>input:checked+span { border-color:#a25f36; background:#281812; }.maintenance-option>input:checked+span small { color:#efa985; }
.hosting-bot { display:grid; grid-template-columns:48px minmax(140px,1fr) minmax(130px,1fr) 150px 150px auto; align-items:center; gap:9px; padding:12px; border:1px solid #373128; border-radius:13px; background:#111112; }.hosting-bot .entity-avatar { width:44px; height:44px; }.hosting-bot strong,.hosting-bot small { display:block; }.hosting-bot small { color:#647773; }
@media(max-width:1000px){.hosting-bot{grid-template-columns:48px 1fr 1fr}.hosting-bot [type=file]{grid-column:span 1}}
@media(max-width:620px){.maintenance-grid,.hosting-bot{grid-template-columns:1fr}.hosting-bot .entity-avatar{display:none}}
@media(max-width:850px){.menu-action-row{grid-template-columns:22px 38px 1fr 1fr}.menu-action-row>[data-action-emoji]{grid-column:3/-1}.menu-action-row .role-order-actions{grid-column:3/-1}}

/* Server-first workspace selection */
.workspace-view { min-height:100vh; padding:0 5vw 64px; }
.workspace-header { display:flex; align-items:center; justify-content:space-between; min-height:88px; border-bottom:1px solid #203933; }
.workspace-header .landing-brand { position:static; }
.workspace-account { display:flex; align-items:center; gap:11px; }
.workspace-account .avatar { width:38px; height:38px; }
.workspace-main { width:min(1180px,100%); margin:0 auto; padding-top:70px; }
.workspace-heading { max-width:720px; margin-bottom:30px; }
.workspace-heading h1 { margin:0; color:#e8fffa; font-size:clamp(28px,4vw,48px); }
.workspace-heading > p:last-child { margin:12px 0 0; color:#8a9f9a; font-size:16px; line-height:1.8; }
.workspace-back { margin-bottom:20px; padding:9px 14px; border:1px solid #244b42; border-radius:10px; color:#7cd9c3; background:#17130d; cursor:pointer; }
.workspace-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.workspace-card { display:flex; align-items:center; gap:15px; min-width:0; min-height:118px; padding:18px; border:1px solid #1f443b; border-radius:18px; color:#e8fffa; background:linear-gradient(145deg,#171719,#111113); box-shadow:0 18px 50px #0004; text-align:start; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.workspace-card.installed:hover,.workspace-card.bot-choice:not(.missing):hover { transform:translateY(-3px); border-color:#32b99a; background:linear-gradient(145deg,#10211d,#121214); }
.workspace-card .entity-avatar { width:58px; height:58px; flex:0 0 58px; border-radius:17px; }
.workspace-card-copy { min-width:0; flex:1; }
.workspace-card-copy strong,.workspace-card-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-card-copy strong { font-size:17px; }
.workspace-card-copy small { margin-top:5px; color:#746e65; direction:ltr; text-align:start; }
.workspace-card-copy p { margin:8px 0 0; color:#889d98; font-size:12px; line-height:1.6; }
.workspace-state { display:inline-flex; align-items:center; gap:6px; margin-top:11px; color:#8ea39e; font-size:11px; }
.workspace-state::before { width:7px; height:7px; content:""; border-radius:50%; background:#5c716c; }
.workspace-state.online { color:#75e5cb; }.workspace-state.online::before { background:var(--t-accent, #9fdcc8); box-shadow:0 0 10px #9fdcc899; }
.workspace-card.missing { border-style:dashed; opacity:.82; }
.workspace-card > .button { flex:0 0 auto; }
.workspace-switcher { display:grid; grid-template-columns:38px minmax(0,1fr) 18px; align-items:center; gap:10px; width:100%; color:inherit; text-align:start; cursor:pointer; }
.workspace-switcher .entity-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#182024 center/cover; color:var(--t-accent, #9fdcc8); font-weight:800; }
.workspace-switcher span:nth-child(2) { min-width:0; }
.workspace-switcher small,.workspace-switcher strong,.workspace-switcher em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-switcher small { color:#778c87; font-size:10px; }.workspace-switcher strong { margin-top:2px; }.workspace-switcher em { margin-top:3px; color:#59d4b7; font-size:10px; font-style:normal; }
.workspace-switcher > svg { width:18px; fill:none; stroke:#3eb196; stroke-width:1.8; }

@media (max-width: 900px) { .workspace-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .workspace-view { padding-inline:16px; }.workspace-header { align-items:flex-start; gap:16px; padding:16px 0; }.workspace-account { flex-wrap:wrap; justify-content:flex-end; }.workspace-account strong { display:none; }.workspace-main { padding-top:42px; }.workspace-grid { grid-template-columns:1fr; }.workspace-card { min-height:105px; } }

/* Purchase selection and customer subscription state */
.product-module input:checked + .product-module-select .product-module-check { color:#171108; border-color:var(--t-accent, #9fdcc8); background:var(--t-accent, #9fdcc8); box-shadow:0 0 0 3px color-mix(in srgb, var(--t-accent, #9fdcc8) 16%, transparent); }
.product-module-check svg { opacity:0; transform:scale(.65); transition:opacity .16s ease,transform .16s ease; }
.product-module input:checked + .product-module-select .product-module-check svg { opacity:1; transform:scale(1); }
.commerce-status.frozen { color:#8cf5dd; background:#1c3a33; }
.subscription-freeze-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:13px 14px; border:1px solid #20423a; border-radius:13px; background:#14120e; }
.subscription-freeze-bar span strong,.subscription-freeze-bar span small { display:block; }.subscription-freeze-bar span small { margin-top:4px; color:#6c817c; font-size:10px; }
@media (max-width:620px) { .subscription-freeze-bar { align-items:stretch; flex-direction:column; }.subscription-freeze-bar .button { width:100%; } }

/* Hosting console alignment */
.hosting-grid { align-items:start; }
.hosting-grid .control-matrix { grid-column:1/-1; }
.hosting-stats article { min-height:112px; align-items:center; }.hosting-stats article small { display:block; margin-top:5px; color:#647773; font-size:9px; }
.control-matrix-divider { display:grid; gap:4px; margin-top:24px; padding-top:20px; border-top:1px solid #253b36; }.control-matrix-divider small { color:#6e827d; line-height:1.6; }
.standard-option>input:checked+span { border-color:#2d8b75; background:#102822; }.standard-option>input:checked+span small { color:#6de7cb; }
.wide-control-save { width:100%; justify-content:center; margin-top:8px; }
.catalog-editor .catalog-row { grid-template-columns:42px minmax(0,1fr) 130px 42px; }
.catalog-save-bar { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; position:sticky; bottom:12px; margin-top:14px; padding:12px; border:1px solid #234b42; border-radius:13px; background:rgba(14,14,15,.94); backdrop-filter:blur(12px); }
.paddle-sync-state { display:inline-flex; width:max-content; margin-top:6px; padding:3px 8px; border:1px solid #344a45; border-radius:999px; color:#91a9a3; font-size:10px; font-style:normal; }
.paddle-sync-state.synchronized { border-color:#315f43; color:#79d99b; }.paddle-sync-state.failed,.paddle-sync-state.requires_configuration { border-color:#704044; color:#f09595; }
@media(max-width:620px){.catalog-editor .catalog-row{grid-template-columns:42px minmax(0,1fr) 42px}.catalog-editor .price-input{grid-column:1/-1}.catalog-save-bar .button{width:100%}}

/* ===================== dashboard-quality.css ===================== */
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #6ef0d2;
  outline-offset: 3px;
}

.nav-item,
.button,
.icon-button,
.resource-option,
.system-nav-trigger { min-height: 42px; }

/* Lucide-style outline icon controls: 20px, 1.8px stroke, rounded joins. */
.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  border: 1px solid color-mix(in srgb, #6ef0d2 30%, transparent);
  border-radius: 11px;
}
.icon-button:hover { background: color-mix(in srgb, #6ef0d2 10%, transparent); color: #8ef7df; }
.icon-button svg { width: 20px; height: 20px; }
#menuButton { display: none; }
[data-remove-auto-response] { font-size: 0; }
[data-remove-auto-response]::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;
}

.page,
.panel,
.field-group,
.commerce-record { min-width: 0; }

.page:not(.hidden) { animation: dashboard-page-enter .16s ease-out; }
.record-stack,
.resource-options,
.role-catalog { overscroll-behavior: contain; scrollbar-gutter: stable; }
.module-card,
.commerce-record,
.field-group { contain: layout paint; }

@keyframes dashboard-page-enter {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .topbar { gap: 8px; }
  .topbar-actions { gap: 5px; }
  .topbar .button { padding-inline: 10px; }
  .commerce-record,
  .field-group,
  .panel { overflow-wrap: anywhere; }
  .record-actions > *,
  .queue-decision-actions > * { flex: 1 1 140px; }
}

@media (max-width: 900px) {
  #menuButton { display: inline-grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===================== dashboard-human.css ===================== */
/* Quiet, task-first layer. It intentionally overrides the decorative theme. */
:root {
  --human-bg: #0b0e10;
  --human-surface: #14181b;
  --human-surface-raised: #181d20;
  --human-border: #2a3034;
  --human-border-strong: #3a4246;
  --human-text: #f5f2eb;
  --human-muted: #97aaa6;
  --human-gold: var(--t-accent, #9fdcc8);
}

body { background: var(--human-bg); color: var(--human-text); }
body { font-size: 14px; }
body::before,
.landing-orb,
.preview-glow,
.widget-light,
.landing-visual::before,
.landing-visual::after,
.preview-window::before,
.preview-window::after { display: none !important; }

.landing,
.workspace-view,
.app-shell,
.sidebar,
.main { background-image: none !important; }

.landing-nav {
  background: rgba(11, 11, 13, .92);
  border-bottom: 1px solid color-mix(in srgb, var(--t-accent, #9fdcc8) 14%, transparent);
  backdrop-filter: blur(14px);
}

.landing-hero { min-height: auto; padding-top: 84px; padding-bottom: 72px; }
.landing-copy { max-width: 680px; }
.landing-copy h1 {
  max-width: 650px;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -.045em;
  white-space: pre-line;
}
.landing-copy > p { max-width: 620px; line-height: 1.8; }
.landing-kicker,
.eyebrow { letter-spacing: .04em !important; text-transform: none !important; }
.landing-kicker span:first-child { width: 22px; box-shadow: none; }

.landing-visual,
.preview-window,
.feature-card,
.plan-showcase,
.workflow-list li,
.discord-widget-shell,
.landing-final,
.panel,
.stat-card,
.overview-command,
.overview-subscription,
.workspace-card {
  background: var(--human-surface) !important;
  background-image: none !important;
  border-color: var(--human-border) !important;
  box-shadow: none !important;
}

.preview-window { transform: none !important; }
.preview-sidebar,
.preview-stat,
.preview-chart,
.preview-system,
.preview-module,
.feature-icon,
.plan-showcase-icon { background: var(--human-surface-raised) !important; box-shadow: none !important; }

.feature-card,
.plan-showcase,
.workflow-list li,
.workspace-card,
.module-card,
.button,
.nav-item { transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease !important; }
.feature-card:hover,
.plan-showcase:hover,
.workspace-card:hover { transform: translateY(-2px) !important; border-color: var(--human-border-strong) !important; }

.feature-card h3,
.plan-showcase h3,
.panel h3 { letter-spacing: -.015em; }
.feature-card p,
.plan-showcase p,
.muted { color: var(--human-muted) !important; }

.landing-section { padding-block: 82px; }
.section-heading { max-width: 720px; }
.features-grid { gap: 14px; }
.feature-card { min-height: 230px; padding: 25px; border-radius: 14px; }
.pricing-showcase { gap: 16px; }
.plan-showcase { border-radius: 16px; }
.workflow-list li { border-radius: 12px; }
.landing-final { border-radius: 16px; }

.app-shell { grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { padding: 18px 12px; border-inline-end-color: color-mix(in srgb, var(--t-accent, #9fdcc8) 15%, transparent) !important; }
.brand { padding: 0 7px 17px; font-size: 18px; }
.brand-mark.small { width: 32px; height: 32px; border-radius: 9px; }
.workspace-switcher {
  grid-template-columns: 34px minmax(0,1fr) 16px !important;
  gap: 9px !important;
  min-height: 62px;
  margin-bottom: 14px;
  padding: 9px 10px;
  color: var(--human-text) !important;
  background: var(--human-surface) !important;
  border: 1px solid var(--human-border) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  font: inherit;
}
.workspace-switcher:hover { border-color: var(--human-border-strong) !important; background: var(--human-surface-raised) !important; }
.workspace-switcher .entity-avatar { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
.workspace-switcher strong { font-size: 14px; }
.workspace-control { position: relative; z-index: 12; }
.workspace-switcher[aria-expanded="true"] { border-color: var(--human-border-strong) !important; background: #18140e !important; }
.workspace-switcher[aria-expanded="true"] > svg { transform: rotate(180deg); }
.workspace-switcher > svg { transition: transform .18s ease; }
.workspace-quick-menu {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% - 8px);
  width: min(340px, calc(100vw - 28px));
  overflow: hidden;
  color: var(--human-text);
  background: #111113;
  border: 1px solid var(--human-border-strong);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.48);
}
[dir="rtl"] .workspace-quick-menu { inset-inline-start: 0; }
.quick-workspace-head { display:flex; align-items:center; justify-content:space-between; padding:12px 13px 9px; color:var(--human-muted); font-size:11px; font-weight:700; }
.quick-workspace-head small { display:grid; place-items:center; min-width:22px; height:22px; border-radius:7px; color:var(--human-gold); background:#10211d; }
.quick-workspace-list { display:grid; gap:4px; max-height:min(430px,calc(100vh - 190px)); padding:0 7px 7px; overflow:auto; }
.quick-workspace-item { display:grid; grid-template-columns:34px minmax(0,1fr) 16px; align-items:center; gap:9px; width:100%; min-height:52px; padding:8px; border:0; border-radius:9px; color:inherit; background:transparent; text-align:start; text-decoration:none; cursor:pointer; }
.quick-workspace-item:hover,.quick-workspace-item.active { background:#10211d; }
.quick-workspace-item.active { box-shadow:inset 2px 0 0 var(--human-gold); }
[dir="rtl"] .quick-workspace-item.active { box-shadow:inset -2px 0 0 var(--human-gold); }
.quick-workspace-item .entity-avatar,.quick-workspace-identity .entity-avatar { width:34px; height:34px; border-radius:9px; }
.quick-workspace-copy { min-width:0; }
.quick-workspace-copy strong,.quick-workspace-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quick-workspace-copy strong { font-size:13px; }
.quick-workspace-copy small { margin-top:3px; color:var(--human-muted); font-size:10px; }
.quick-workspace-item > svg { width:16px; fill:none; stroke:var(--human-gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.quick-workspace-item.missing { opacity:.7; }
.quick-workspace-group { padding:8px; border-radius:9px; }
.quick-workspace-group.active { background:color-mix(in srgb, var(--t-accent, #9fdcc8) 4.5%, transparent); }
.quick-workspace-identity { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:9px; }
.quick-bot-options { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 0 43px; }
[dir="rtl"] .quick-bot-options { margin:8px 43px 0 0; }
.quick-bot-options button { padding:5px 8px; border:1px solid var(--human-border); border-radius:7px; color:var(--human-muted); background:#0c0c0e; font-size:10px; cursor:pointer; }
.quick-bot-options button:hover,.quick-bot-options button.active { color:var(--human-text); border-color:var(--human-border-strong); background:#10211d; }
.nav-item { border-radius: 9px !important; }
.nav-item { min-height: 38px; padding: 8px 10px; }
.nav-heading { padding-block: 11px 4px; }
.nav-item:hover { transform: none !important; }
.nav-item.active { background: #10211d !important; box-shadow: inset 3px 0 0 var(--human-gold) !important; }
[dir="rtl"] .nav-item.active { box-shadow: inset -3px 0 0 var(--human-gold) !important; }

.sidebar-footer { align-items: center; }
.sidebar-account { min-width: 0; flex: 1; }
.sidebar-account > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sidebar-account-actions > span { width: 1px; height: 12px; background: var(--human-border); }
.sidebar-account-actions .text-button { margin: 0; padding: 0; font-size: 11px; }
.language-short { min-width: 22px; color: var(--human-gold) !important; font-weight: 750; }

.main { padding: 0 28px 34px; }
.topbar { position:relative; z-index:100; height:76px; overflow:visible; background:rgba(11,11,13,.9) !important; backdrop-filter:blur(12px); }
.notification-panel { z-index:110; }
.page { position:relative; z-index:1; }
.topbar h1 { letter-spacing: -.02em; }
.page { max-width: 1220px; padding-top: 22px; }
.panel,
.overview-command,
.overview-subscription { border-radius: 14px !important; }
.stat-card { border-radius: 12px !important; }
.button.primary { box-shadow: none !important; }

/* Module settings are one workspace with quiet dividers, not separate floating cards. */
#settingsForm {
  background: var(--human-surface);
  border: 1px solid var(--human-border);
  border-radius: 14px;
}
#settingsForm .settings-head {
  margin: 0;
  padding: 20px 22px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--human-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#settingsForm .settings-head h2 { font-size: 23px; }
#settingsForm .form-layout {
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  padding: 0 22px 8px;
}
#settingsForm .field-group {
  display: block;
  margin: 7px 0;
  padding: 0 14px;
  background: rgba(255,255,255,.012) !important;
  border: 1px solid rgba(103,82,47,.42) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background-color .16s ease;
}
#settingsForm .field-group[open] { background:rgba(230,184,79,.025) !important; border-color:rgba(230,184,79,.48) !important; }
#settingsForm .field-group > summary { display:flex; align-items:center; gap:12px; min-height:58px; padding:14px 0; list-style:none; cursor:pointer; }
#settingsForm .field-group > summary::-webkit-details-marker { display:none; }
#settingsForm .field-group h3 { position:relative; flex:1; margin:0; padding-inline-start:12px; font-size:15px; }
#settingsForm .field-group h3::before { position:absolute; inset-inline-start:0; top:2px; bottom:2px; width:3px; border-radius:4px; background:var(--human-gold); content:""; opacity:.8; }
#settingsForm .group-chevron { box-sizing:content-box; width:17px; height:17px; padding:6px; fill:none; stroke:#56e1c1; stroke-width:2.1; background:rgba(230,184,79,.07); border:1px solid rgba(230,184,79,.28); border-radius:8px; transition:transform .18s ease,background-color .18s ease; }
#settingsForm .field-group[open] > summary .group-chevron { transform:rotate(180deg); }
#settingsForm .field-group[open] > summary .group-chevron { background:rgba(230,184,79,.14); }
#settingsForm .field-group-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:0 18px; padding:0 0 20px; animation:group-open .16s ease-out; }
#settingsForm .field-group-body > :not(.field) { grid-column:1/-1; }
#settingsForm .field-group-body > .field.full { grid-column:1/-1; }
@keyframes group-open { from { opacity:.5; transform:translateY(-3px); } to { opacity:1; transform:none; } }
#settingsForm .field { align-self:start; min-width:0; margin-top:11px; }
#settingsForm .field input,
#settingsForm .field select,
#settingsForm .field textarea { padding: 9px 11px; }
#settingsForm .resource-field { width:min(620px,100%); height:max-content; }
#settingsForm .resource-picker > summary { min-height: 42px; padding:7px 10px; font-size:13px; }
#settingsForm .resource-picker-body { gap:7px; padding:8px; }
#settingsForm .resource-search { min-height:38px; }
#settingsForm .resource-options { gap:4px; max-height:270px; }
#settingsForm .resource-option { min-height:42px; padding:6px 9px; border-radius:8px; }
#settingsForm .resource-option.channel { grid-template-columns:auto minmax(0,1fr) auto; }
#settingsForm .resource-option.role { grid-template-columns:auto auto minmax(0,1fr) auto; }
#settingsForm .resource-option-copy { gap:1px; }
#settingsForm .resource-option-copy strong { font-size:12px; }
#settingsForm .resource-option-copy small { font-size:9px; }
#settingsForm .resource-check { width:22px; height:22px; border-radius:50%; }
#settingsForm .resource-check svg { width:14px; height:14px; }
#settingsForm .preference-toggle { min-height: 54px; }
.style-hidden { display:none !important; }

.message-style-field { padding:14px !important; border:1px solid rgba(230,184,79,.18); border-radius:12px; background:rgba(0,0,0,.13); }
.message-style-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.message-style-heading > span { display:grid; gap:3px; }
.message-style-heading label { color:var(--human-text); font-size:12px; }
.message-style-heading small { color:var(--human-muted); font-size:9px; }
.message-style-picker { display:flex; flex-wrap:wrap; gap:6px; width:fit-content; max-width:100%; padding:5px; border:1px solid #1f302c; border-radius:11px; background:#0b0c0f; }
.message-style-option { position:relative; display:flex; align-items:center; gap:8px; min-width:132px; min-height:40px; padding:7px 10px; overflow:hidden; border:1px solid transparent; border-radius:8px; color:var(--human-muted); background:transparent; text-align:start; cursor:pointer; transition:border-color .16s,background .16s,color .16s,transform .16s; }
.message-style-option:hover { color:var(--human-text); border-color:#2f806d; background:#17140f; }
.message-style-option.selected { color:#dcfff7; border-color:#3dc4a4; background:linear-gradient(135deg,#13342c,#0d211c); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t-accent, #9fdcc8) 8%, transparent),0 5px 16px rgba(0,0,0,.16); }
.message-style-option svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.message-style-option span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
.message-style-option i { width:9px; height:9px; margin-inline-start:auto; border:1px solid #3e6159; border-radius:50%; }
.message-style-option.selected i { border:3px solid #112a24; background:#68edce; box-shadow:0 0 0 1px #68edce; }
.message-live-preview { grid-column:1/-1; min-width:0; margin-top:18px; overflow:hidden; border:1px solid rgba(230,184,79,.28); border-radius:13px; background:#0b0d11; }
.message-live-preview > header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:10px 14px; border-bottom:1px solid rgba(230,184,79,.16); background:#101216; }
.preview-heading,.preview-tools { display:flex; align-items:center; gap:9px; }
.preview-heading > span:last-child { display:grid; gap:2px; }
.preview-heading strong { color:#eee9df; font-size:12px; }
.preview-heading small { color:#747a84; font-size:9px; }
.preview-tools > span { padding:4px 8px; color:#53d7b8; background:rgba(230,184,79,.08); border:1px solid rgba(230,184,79,.18); border-radius:999px; font-size:9px; }
.preview-tools button { display:flex; align-items:center; gap:6px; min-height:32px; padding:6px 9px; color:#b7bbc3; background:#17191e; border:1px solid #32353b; border-radius:8px; cursor:pointer; }
.preview-tools button:hover { color:#6df0d1; border-color:#308d77; }
.preview-tools button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.preview-tools button span { font-size:9px; }
.message-live-preview > p { margin:0; padding:10px 14px; color:#7f858e; font-size:10px; line-height:1.55; }
.preview-live-dot { width:7px; height:7px; background:#43d889; border-radius:50%; box-shadow:0 0 9px rgba(67,216,137,.7); }
.discord-preview-stage { min-height:190px; padding:0 18px 22px; background:#313338; border-top:1px solid rgba(255,255,255,.04); }
.discord-channel-bar { display:flex; align-items:center; gap:7px; height:42px; margin-bottom:14px; color:#b5bac1; border-bottom:1px solid #26272b; }
.discord-channel-bar > span { color:#80848e; font-size:20px; }.discord-channel-bar strong { color:#f2f3f5; font-size:11px; }.discord-channel-bar small { margin-inline-start:auto; color:#80848e; font-size:9px; }
.discord-preview-message { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; max-width:760px; color:#dbdee1; font-family:"gg sans","Noto Sans","Helvetica Neue",Arial,sans-serif; }
.discord-preview-message > img { width:40px; height:40px; object-fit:cover; border-radius:50%; background:#1e1f22; }
.discord-preview-copy { min-width:0; }
.discord-preview-author { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:20px; }
.discord-preview-author strong { color:#f2f3f5; font-size:14px; }
.discord-preview-author span { padding:1px 4px; color:#fff; background:#5865f2; border-radius:3px; font-size:9px; font-weight:700; }
.discord-preview-author time { color:#949ba4; font-size:10px; }
.discord-preview-plain { max-width:680px; margin-top:2px; color:#dbdee1; font-size:13px; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap; }
.discord-preview-plain a,.discord-preview-card a { color:#00a8fc; text-decoration:none; }.discord-preview-plain a:hover,.discord-preview-card a:hover { text-decoration:underline; }
.discord-preview-card { position:relative; width:min(520px,100%); min-height:58px; margin-top:5px; padding:13px 15px 13px 18px; overflow:hidden; background:#2b2d31; border-radius:4px; }
.discord-preview-card::before { position:absolute; inset:0 auto 0 0; width:4px; background:#41d9b6; content:""; }
[dir="rtl"] .discord-preview-card::before { inset:0 0 0 auto; }
.message-live-preview[data-style="components-v2"] .discord-preview-card { padding:15px; border:1px solid #41444a; border-radius:8px; }
.message-live-preview[data-style="components-v2"] .discord-preview-card::before { display:none; }
.discord-preview-card > strong { display:block; max-width:calc(100% - 92px); margin-bottom:6px; color:#f2f3f5; font-size:14px; line-height:1.35; }
.discord-preview-card > div { color:#dbdee1; font-size:12px; line-height:1.5; overflow-wrap:anywhere; white-space:pre-wrap; }
.discord-preview-thumbnail { float:inline-end; width:80px; height:80px; margin-inline-start:14px; object-fit:cover; border-radius:4px; }
.discord-preview-banner { display:block; clear:both; width:100%; max-height:290px; margin-top:12px; object-fit:cover; border-radius:4px; }
.discord-preview-image { display:block; width:min(520px,100%); max-height:360px; margin-top:6px; object-fit:contain; object-position:left top; border-radius:6px; background:#25262a; }
[dir="rtl"] .discord-preview-image { object-position:right top; }
.discord-preview-empty { margin-top:5px; padding:12px; color:#949ba4; border:1px dashed #4a4d52; border-radius:6px; font-size:11px; }
.discord-preview-image-error { display:block; clear:both; margin-top:9px; color:#f08b92; font-size:10px; }

.ticket-type,.auto-response-row { display:block !important; padding:0 !important; margin:8px 0 0; overflow:hidden; border:1px solid #253a35 !important; border-radius:11px !important; background:#111113 !important; }
.ticket-type > summary,.auto-response-row > summary { display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:center; gap:10px; min-height:56px; padding:9px 12px; list-style:none; cursor:pointer; }
.ticket-type > summary::-webkit-details-marker,.auto-response-row > summary::-webkit-details-marker { display:none; }
.ticket-type > summary:hover,.auto-response-row > summary:hover { background:#17140f; }
.ticket-type > summary > span:nth-child(2),.auto-response-row > summary > span:nth-child(2) { min-width:0; }
.ticket-type > summary strong,.ticket-type > summary small,.auto-response-row > summary strong,.auto-response-row > summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ticket-type > summary small,.auto-response-row > summary small { margin-top:3px; color:var(--human-muted); font-size:9px; }
.ticket-type-mark,.response-index { display:grid; place-items:center; width:30px; height:30px; border:1px solid #26574c; border-radius:9px; color:var(--human-gold); background:#1d170e; font-size:10px; font-weight:800; }
.ticket-type-mark svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.ticket-type[open] > summary,.auto-response-row[open] > summary { border-bottom:1px solid #1f312d; }
.ticket-type[open] > summary .resource-chevron,.auto-response-row[open] > summary .resource-chevron { transform:rotate(180deg); }
.ticket-type-body,.auto-response-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; padding:5px 12px 13px; }
.ticket-type-body > .field.full,.auto-response-body > .field.full,.ticket-type-body > .remove-type,.auto-response-body > .remove-type { grid-column:1/-1; }
.ticket-type-body .remove-type,.auto-response-body .remove-type { justify-self:end; margin-top:10px; }
.auto-response-body .message-style-picker { width:fit-content; }
#settingsForm .save-bar {
  position: fixed;
  z-index: 45;
  inset-inline-end: 24px;
  bottom: 22px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: save-control-enter .18s ease-out both;
}
#settingsForm .save-bar .muted { display:none; }
#settingsForm .save-changes-button { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:10px 15px; border:1px solid #74f1d4; border-radius:11px; box-shadow:0 10px 30px rgba(0,0,0,.34) !important; }
#settingsForm .save-changes-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#settingsForm.is-dirty { border-color:color-mix(in srgb, var(--t-accent, #9fdcc8) 42%, transparent); }
@keyframes save-control-enter { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }

.workspace-main { max-width: 1080px; }
.workspace-heading { margin-bottom: 24px; }
.workspace-heading h1 { font-size: clamp(28px,4vw,42px); }
.workspace-grid { gap: 12px; }
.workspace-card { min-height: 96px; padding: 16px; border-radius: 12px !important; }
.workspace-card .entity-avatar { width: 48px; height: 48px; }

/* Sales workspace: one clear stage at a time instead of a long admin wall. */
.sales-navigation { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 12px; padding:7px; border:1px solid var(--human-border); border-radius:13px; background:#0e0e10; }
.sales-navigation button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:45px; padding:9px 11px; border:1px solid transparent; border-radius:9px; color:var(--human-muted); background:transparent; cursor:pointer; transition:background .16s,border-color .16s,color .16s; }
.sales-navigation button:hover { color:var(--human-text); background:#17140f; }
.sales-navigation button.active { color:#d5fff5; border-color:#297664; background:#0f2520; }
.sales-navigation .ui-icon { width:18px; height:18px; }
.sales-navigation b { min-width:21px; padding:3px 6px; border-radius:999px; color:#071915; background:#57e6c5; font-size:9px; }
.sales-workspace { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:14px; align-items:start; }
.sales-workspace > [data-sales-view="orders"],.sales-workspace > [data-sales-view="subscriptions"] { grid-column:1/-1; }
.sales-workspace .developer-section { min-width:0; margin:0; }
.sales-workspace .record-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sales-workspace [data-sales-view="subscriptions"] .record-stack { grid-template-columns:1fr; }
.developer-commandbar.compact-context .developer-filters { display:none; }

.official-profile-panel .panel-head { align-items:flex-start; }
.official-profile-panel .panel-head img { width:58px; height:58px; flex:0 0 58px; object-fit:contain; filter:drop-shadow(0 8px 16px rgba(220,165,70,.18)); }
.official-profile-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.official-profile-form .full { grid-column:1/-1; }
.official-profile-form textarea { min-height:112px; }
.sales-manager-panel > .panel-head > .ui-icon { width:38px; height:38px; padding:9px; border:1px solid var(--human-border); border-radius:10px; color:var(--human-gold); }
.sales-manager-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; }
.sales-manager-add .field { margin:0; }
.sales-manager-list { display:grid; gap:6px; margin:13px 0; }
.sales-manager-row { display:grid; grid-template-columns:30px minmax(0,1fr) 36px; align-items:center; gap:10px; min-height:52px; padding:7px 8px 7px 11px; border:1px solid #302b23; border-radius:10px; background:#101012; }
.sales-manager-row > .ui-icon { width:17px; height:17px; color:var(--human-gold); }
.sales-manager-row strong,.sales-manager-row small { display:block; }
.sales-manager-row strong { font-size:13px; letter-spacing:.02em; }
.sales-manager-row small { margin-top:2px; color:var(--human-muted); font-size:9px; }
.sales-manager-row .icon-button { width:34px; height:34px; }
.empty-state.compact { padding:14px; border-radius:10px; }

/* Subscription desk: compact, task-led and readable without oversized cards. */
#commerceContent { max-width:1180px; margin-inline:auto; }
#commerceContent .commerce-hero { min-height:auto; margin-bottom:14px; padding:21px 24px; border-radius:16px; }
#commerceContent .commerce-hero h2 { max-width:720px; margin:3px 0 6px; font-size:clamp(23px,2.6vw,32px); }
#commerceContent .commerce-security { max-width:330px; padding:11px 13px; border-radius:12px; }
#commerceContent .purchase-stepper { margin-bottom:12px; padding:9px 13px; border-radius:12px; }
#commerceContent .purchase-stepper i { width:24px; height:24px; border-radius:50%; font-size:10px; }
#commerceContent .commerce-layout { grid-template-columns:minmax(0,1fr) 310px; gap:14px; }
#commerceContent .purchase-builder { padding:20px; border-radius:14px; }
#commerceContent .panel-head { margin-bottom:12px; }
#commerceContent .premium-plans { gap:9px; margin-bottom:15px; }
#commerceContent .premium-plans > label > span { display:grid; grid-template-columns:36px minmax(0,1fr); grid-template-rows:auto auto; column-gap:11px; min-height:102px; padding:14px; border-radius:12px; }
#commerceContent .premium-plans > label > span > .module-visual { grid-row:1/3; width:34px; height:34px; margin:0; }
#commerceContent .premium-plans strong { font-size:14px; }
#commerceContent .premium-plans small { margin-top:4px; font-size:10px; line-height:1.45; }
#commerceContent .premium-plans > label > span > i { position:absolute; inset-inline-end:11px; bottom:9px; margin:0; padding:3px 7px; font-size:9px; }
#commerceContent .builder-divider { margin:14px 0 10px; }
#commerceContent .guild-purchase-picker > summary { min-height:56px; padding:8px 11px; border-radius:11px; }
#commerceContent .guild-purchase-picker > summary .entity-avatar { width:36px; height:36px; flex-basis:36px; border-radius:9px; }
#commerceContent .subscription-duration-picker { gap:7px; }
#commerceContent .duration-choice > span { min-height:56px; padding:8px 10px; border-radius:10px; }
#commerceContent .builder-section { margin-top:16px; }
#commerceContent .module-catalog-head { margin-bottom:10px; }
#commerceContent .premium-layout .product-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
#commerceContent .product-module { min-height:84px; padding:11px; border-radius:11px; }
#commerceContent .product-module-select > .module-visual { width:29px; height:29px; }
#commerceContent .product-module-copy strong { font-size:13px; }
#commerceContent .product-module-copy small { margin-top:4px; font-size:9px; line-height:1.4; }
#commerceContent .product-module-copy em { display:inline-flex; margin-top:5px; color:#5cc9b0; font-size:9px; font-style:normal; }
#commerceContent .product-module-price { inset-inline-end:10px; bottom:8px; font-size:12px; }
#commerceContent .system-product-details { margin-top:9px; overflow:hidden; border:1px solid #243934; border-radius:11px; background:#101012; }
#commerceContent .system-product-details > summary { display:flex; align-items:center; justify-content:space-between; min-height:43px; padding:8px 11px; list-style:none; color:#c3d9d4; cursor:pointer; }
#commerceContent .system-product-details > summary::-webkit-details-marker { display:none; }
#commerceContent .system-product-details > summary > span { display:flex; align-items:center; gap:8px; }
#commerceContent .system-product-details > summary > svg { width:17px; fill:none; stroke:#45b99e; stroke-width:2; transition:transform .16s; }
#commerceContent .system-product-details[open] > summary > svg { transform:rotate(180deg); }
#commerceContent .system-product-details > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:8px; border-top:1px solid #1f302c; }
#commerceContent .system-product-details > div > span { display:flex; align-items:center; gap:7px; min-width:0; padding:7px 8px; border-radius:8px; color:#8b9e9a; background:#151416; }
#commerceContent .system-product-details > div b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
#commerceContent .system-product-details .module-visual.tiny { width:19px; height:19px; flex:0 0 19px; }
#commerceContent .purchase-summary { top:16px; padding:19px; border-radius:14px; }
#commerceContent .summary-crown { margin-bottom:9px; }
#commerceContent .summary-crown .module-visual { width:34px; height:34px; }
#commerceContent .purchase-summary h3 { margin:3px 0 13px; font-size:19px; }
#commerceContent .summary-server { padding:9px; border-radius:10px; }
#commerceContent .purchase-summary dl { margin:12px 0; }
#commerceContent .purchase-summary dl div { padding:9px 0; }
#commerceContent .summary-module-list { max-height:150px; overflow:auto; }
#commerceContent .purchase-total { margin-top:13px; padding:13px; border-radius:11px; }
#commerceContent .purchase-total strong { font-size:18px; }
#commerceContent .commerce-history { margin-top:14px; gap:14px; }
#commerceContent .commerce-history > .panel { padding:18px; border-radius:14px; }
#commerceContent .commerce-record { padding:14px; border-radius:12px; }
.brand .brand-mark.small { width:38px; height:38px; flex:0 0 38px; }
.landing-brand .brand-mark.small,.workspace-header .brand-mark.small { width:36px; height:36px; flex:0 0 36px; }

.reveal { opacity: 1; transform: none; animation: human-reveal .32s ease both; }
.reveal:nth-child(n) { animation-delay: 0s !important; }
@keyframes human-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .landing-hero { padding-top: 62px; }
  .landing-copy h1 { font-size: clamp(38px, 10vw, 58px); }
  .app-shell { grid-template-columns: 1fr; }
  .main { padding-inline: 16px; }
  #settingsForm .form-layout { grid-template-columns: 1fr; }
  .sales-workspace { grid-template-columns:1fr; }
  .sales-workspace > [data-sales-view] { grid-column:1; }
}

@media (max-width: 620px) {
  .message-style-field { padding:10px !important; }
  .message-style-picker { width:100%; }
  .message-style-option { flex:1 1 calc(50% - 4px); min-width:0; }
  .discord-preview-stage { padding-inline:12px; }
  .discord-preview-message { grid-template-columns:34px minmax(0,1fr); gap:9px; }
  .discord-preview-message > img { width:34px; height:34px; }
}

@media (max-width: 720px) {
  #settingsForm .field-group-body,.ticket-type-body,.auto-response-body { grid-template-columns:1fr; }
  #settingsForm .field-group-body > .field,.ticket-type-body > .field,.auto-response-body > .field { grid-column:1; }
  .message-style-picker,.auto-response-body .message-style-picker { width:100%; }
  .sales-navigation { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sales-workspace .record-stack { grid-template-columns:1fr; }
  .official-profile-form { grid-template-columns:1fr; }
  .official-profile-form .field,.official-profile-form .full { grid-column:1; }
  .sales-manager-add { grid-template-columns:1fr; }
  #commerceContent .commerce-layout { grid-template-columns:1fr; }
  #commerceContent .purchase-summary { position:relative; top:auto; }
  #commerceContent .premium-layout .product-module-grid { grid-template-columns:1fr; }
  #commerceContent .system-product-details > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #settingsForm .save-bar { inset-inline:12px; bottom:12px; }
  #settingsForm .save-changes-button { width:100%; justify-content:center; }
}

/* Compact Discord message preview: the message itself is the preview. */
.message-live-preview{width:min(680px,100%);min-width:0;margin-top:12px;justify-self:start;overflow:hidden;border:1px solid #25272c;border-radius:8px;background:#313338;box-shadow:none}
.discord-preview-stage{min-height:0;padding:14px 16px;background:#313338;border:0}
.discord-preview-message{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;width:100%;max-width:648px}
.discord-preview-copy{width:fit-content;max-width:100%}
.discord-preview-card{display:flow-root;width:fit-content;min-width:180px;max-width:min(520px,100%);min-height:0;padding:12px 14px 12px 17px}
.message-live-preview[data-style="components-v2"] .discord-preview-card{padding:12px 14px}
.discord-preview-card>strong{max-width:420px}.discord-preview-card>div{max-width:480px}
.discord-preview-banner{width:auto;max-width:100%;max-height:280px}.discord-preview-image{width:auto;max-width:min(520px,100%);max-height:340px}
.discord-preview-empty{width:fit-content;max-width:420px;margin-top:4px;padding:8px 10px}
@media(max-width:620px){.message-live-preview{width:100%}.discord-preview-stage{padding:12px}.discord-preview-message{grid-template-columns:34px minmax(0,1fr);gap:9px}.discord-preview-card{min-width:0}.discord-preview-message>img{width:34px;height:34px}}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ===================== dashboard-reference.css ===================== */
:root {
  --triva-bg: #07090c;
  --triva-sidebar: #090b0f;
  --triva-panel: #0d1015;
  --triva-panel-raised: #11151b;
  --triva-gold: var(--t-accent, #9fdcc8);
  --triva-gold-soft: #c4ece0;
  --triva-gold-deep: #5e7a72;
  --triva-line: rgba(230, 184, 79, .25);
  --triva-line-soft: rgba(230, 184, 79, .12);
  --triva-text: #f5f3ed;
  --triva-muted: #969aa4;
  --triva-success: #39d98a;
  --triva-danger: #f16372;
  --triva-focus: #c4ece0;
}

/* Reference shell: one disciplined black-and-gold surface system. */
.app-shell {
  grid-template-columns: 272px minmax(0, 1fr) !important;
  color: var(--triva-text);
  background: var(--triva-bg) !important;
}

.app-shell .sidebar {
  z-index: 120;
  padding: 22px 14px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 18%),
    linear-gradient(180deg, #090b0f, #0b0b0c) !important;
  border-inline-end: 1px solid var(--triva-line) !important;
  box-shadow: 18px 0 48px rgba(0,0,0,.22);
}

[dir="rtl"] .app-shell .sidebar { box-shadow: -18px 0 48px rgba(0,0,0,.22); }

.app-shell .brand {
  min-height: 58px;
  padding: 0 11px 18px;
  color: #cffff4;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.02em;
}

.app-shell .brand .brand-mark.small {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 13px;
  background: #15120d;
  border: 1px solid var(--triva-line);
}

.app-shell .workspace-switcher {
  min-height: 66px;
  margin-bottom: 15px;
  padding: 10px 11px;
  background: #101217 !important;
  border-color: rgba(230,184,79,.22) !important;
  border-radius: 13px !important;
}

.app-shell .workspace-switcher:hover,
.app-shell .workspace-switcher[aria-expanded="true"] {
  background: #17140e !important;
  border-color: rgba(230,184,79,.62) !important;
}

.app-shell #nav { gap: 3px; }
.app-shell .nav-heading {
  padding: 13px 12px 5px;
  color: #62736f;
  font-size: 10px;
  letter-spacing: .14em;
}

.app-shell .nav-item,
.app-shell .system-nav-trigger {
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px !important;
  color: #aaaeb8;
  font-size: 13px;
  font-weight: 680;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.app-shell .nav-item:hover,
.app-shell .system-nav-trigger:hover {
  color: #dff7f1;
  background: rgba(230,184,79,.07) !important;
  border-color: rgba(230,184,79,.12);
}

.app-shell .nav-item.active {
  color: #081b17 !important;
  background: linear-gradient(135deg, #85f4da, #32d8b1) !important;
  border-color: #83f7dc;
  box-shadow: 0 7px 18px rgba(177,117,22,.2), inset 0 1px rgba(255,255,255,.45) !important;
}

.app-shell .nav-item.active svg { stroke-width: 2.1; }
.app-shell .nav-item.active .status-dot { background: #105b4a; box-shadow: none; }
.app-shell .system-nav-items { border-inline-start-color: rgba(230,184,79,.22); }

.app-shell .sidebar-footer {
  margin-top: 16px;
  padding: 14px 9px 2px;
  border-top-color: rgba(230,184,79,.17);
}

.app-shell .main {
  padding: 0 26px 40px;
  background:
    radial-gradient(circle at 18% 0, rgba(230,184,79,.04), transparent 28%),
    var(--triva-bg) !important;
}

.app-shell .topbar {
  height: 78px;
  border-bottom: 1px solid rgba(230,184,79,.16);
  background: rgba(7,9,12,.9) !important;
  backdrop-filter: blur(14px);
}

.app-shell .topbar h1 { font-size: 22px; font-weight: 820; }
.app-shell .topbar .eyebrow { margin-bottom: 5px; color: #688c84; }
.app-shell .notification-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(230,184,79,.16);
  border-radius: 11px;
  color: #c6cad2;
  background: #0c0f14;
}
.app-shell .notification-button:hover { color: var(--triva-gold-soft); border-color: rgba(230,184,79,.45); }
.app-shell .page { max-width: 1480px; padding-top: 20px; }

#developerContent { display: grid; gap: 16px; }

.hosting-command-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(360px, 1.45fr) minmax(240px, .78fr);
  align-items: stretch;
  min-height: 218px;
  overflow: hidden;
  background:
    linear-gradient(98deg, rgba(7,9,12,.96), rgba(16,16,14,.78) 50%, rgba(7,11,17,.9)),
    radial-gradient(circle at 52% 45%, rgba(230,184,79,.13), transparent 34%);
  border: 1px solid rgba(230,184,79,.34);
  border-radius: 18px;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 60px rgba(0,0,0,.18);
}

.hosting-command-hero::before,
.hosting-command-hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.hosting-command-hero::before {
  inset: 0;
  opacity: .26;
  background-image: linear-gradient(rgba(230,184,79,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(230,184,79,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
}
.hosting-command-hero::after {
  width: 420px;
  height: 420px;
  inset-inline-start: 42%;
  top: -270px;
  border: 1px solid rgba(230,184,79,.2);
  border-radius: 50%;
}

.hosting-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border-inline-end: 1px solid rgba(230,184,79,.13);
}
.hosting-hero-visual img {
  position: relative;
  z-index: 2;
  width: min(158px, 72%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 34px;
  filter: saturate(.92) contrast(1.04);
  box-shadow: 0 20px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(244,211,126,.28);
}
.hosting-portrait-ring {
  position: absolute;
  width: 184px;
  aspect-ratio: 1;
  border: 1px solid rgba(230,184,79,.32);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(230,184,79,.025), 0 0 0 44px rgba(230,184,79,.012);
}

.hosting-hero-copy {
  align-self: center;
  padding: 30px clamp(24px, 3vw, 48px);
}
.hosting-hero-copy .eyebrow { margin-bottom: 11px; color: var(--triva-gold); font-size: 11px; letter-spacing: .2em; }
.hosting-hero-copy h2 { max-width: 680px; margin: 0; color: #e9fffa; font-size: clamp(28px, 2.5vw, 42px); line-height: 1.2; letter-spacing: -.035em; }
.hosting-hero-copy > p:not(.eyebrow) { max-width: 680px; margin: 13px 0 18px; color: #a6a7aa; font-size: 15px; line-height: 1.8; }
.hosting-live-caption { display: inline-flex; align-items: center; gap: 8px; color: #8dd8c7; font-size: 11px; font-weight: 720; }
.hosting-live-caption::before { width: 7px; height: 7px; content: ""; border-radius: 50%; background: var(--triva-success); box-shadow: 0 0 0 4px rgba(57,217,138,.09); }

.hosting-live-panel {
  align-self: center;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  margin: 20px;
  padding: 18px;
  background: rgba(9,12,16,.82);
  border: 1px solid rgba(57,217,138,.26);
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255,255,255,.02);
}
.hosting-live-panel.is-offline { border-color: rgba(241,99,114,.34); }
.hosting-status-icon { width: 44px; height: 44px; color: var(--triva-gold-soft); background: rgba(230,184,79,.09); border: 1px solid rgba(230,184,79,.25); border-radius: 12px; }
.hosting-status-icon svg { width: 22px; height: 22px; }
.hosting-live-status span { display: block; color: #8f939d; font-size: 11px; }
.hosting-live-status strong { display: block; margin-top: 5px; color: var(--triva-success); font-size: 12px; line-height: 1.5; }
.hosting-live-panel.is-offline .hosting-live-status strong { color: var(--triva-danger); }
.hosting-live-panel dl { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.hosting-live-panel dl div { padding: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.045); border-radius: 9px; }
.hosting-live-panel dt { color: #838892; font-size: 10px; }
.hosting-live-panel dd { margin: 4px 0 0; color: var(--triva-gold-soft); font-size: 19px; font-weight: 850; }

.hosting-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.host-metric-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-height: 112px;
  padding: 18px;
  background: linear-gradient(145deg, #11141a, #0c0f13);
  border: 1px solid var(--triva-line-soft);
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255,255,255,.018);
  transition: border-color .18s ease, transform .18s ease;
}
.host-metric-card:hover { transform: translateY(-2px); border-color: rgba(230,184,79,.32); }
.host-metric-icon { width: 54px; height: 54px; color: var(--triva-gold-soft); background: rgba(230,184,79,.09); border: 1px solid rgba(230,184,79,.25); border-radius: 14px; }
.host-metric-icon svg { width: 25px; height: 25px; }
.host-metric-card span:not(.ui-icon) { display: block; color: #b5b5b2; font-size: 12px; font-weight: 680; }
.host-metric-card strong { display: block; margin-top: 5px; color: var(--triva-gold-soft); font-size: clamp(23px, 2vw, 31px); line-height: 1.15; font-weight: 880; letter-spacing: -.03em; }
.host-metric-card small { display: block; margin-top: 5px; overflow: hidden; color: #737883; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.hosting-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start;
}
.hosting-grid > .developer-section {
  padding: 21px;
  background: linear-gradient(145deg, #101319, #0b0e12) !important;
  border: 1px solid var(--triva-line-soft) !important;
  border-radius: 15px !important;
  box-shadow: none !important;
}
.hosting-grid > .official-profile-panel { order: 1; }
.hosting-grid > .runtime-panel { order: 2; }
.hosting-grid > .sales-manager-panel { order: 3; }
.hosting-grid > .control-matrix { order: 4; grid-column: 1/-1 !important; }
.hosting-grid > .developer-section:nth-last-child(2) { order: 5; }
.hosting-grid > .developer-section:last-child { order: 6; }
.hosting-grid .panel-head.enhanced { align-items: flex-start; padding-bottom: 15px; margin-bottom: 17px; border-bottom: 1px solid rgba(230,184,79,.11); }
.hosting-grid .panel-head h3 { margin: 0; color: #f5f1e7; font-size: 18px; }
.hosting-grid .panel-head small { display: block; max-width: 560px; margin-top: 7px; color: #858a94; line-height: 1.65; }
.hosting-grid .section-icon { width: 42px; height: 42px; color: var(--triva-gold); background: #17130c; border: 1px solid var(--triva-line); border-radius: 11px; }
.hosting-grid .section-icon svg { width: 20px; height: 20px; }

.runtime-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.runtime-facts span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; color: #858a94; background: #0a0d11; border: 1px solid rgba(255,255,255,.05); border-radius: 9px; font-size: 11px; }
.runtime-facts strong { color: #c9dfda; font-size: 12px; }
.hosting-actions { gap: 8px; }
.hosting-actions .button { min-height: 40px; }
.package-output { max-height: 150px; margin-top: 13px; color: #a7acb6; background: #080a0d; border-color: rgba(230,184,79,.12); }
.official-profile-panel .panel-head img { width: 54px; height: 54px; border-radius: 14px; border: 1px solid rgba(230,184,79,.28); }

.app-shell :is(button, input, select, textarea, summary, a):focus-visible {
  outline: 2px solid var(--triva-focus);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 244px minmax(0, 1fr) !important; }
  .hosting-command-hero { grid-template-columns: 180px minmax(300px, 1fr); }
  .hosting-live-panel { grid-column: 1/-1; grid-row: 2; margin: 0 18px 18px; grid-template-columns: 44px 1fr auto; }
  .hosting-live-panel dl { grid-column: 3; grid-row: 1; min-width: 230px; margin: 0; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .app-shell .sidebar { position: fixed; width: min(288px, 86vw); }
  .app-shell .main { padding-inline: 16px; }
  .hosting-command-hero { grid-template-columns: 150px 1fr; }
  .hosting-hero-copy { padding: 24px; }
  .hosting-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hosting-grid { grid-template-columns: 1fr !important; }
  .hosting-grid > .control-matrix { grid-column: 1 !important; }
}

@media (max-width: 620px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .app-shell,
  .app-shell .main,
  .app-shell .page,
  #developerPage,
  #developerContent,
  .hosting-command-hero,
  .hosting-metrics-grid,
  .hosting-grid { width: 100%; min-width: 0; max-width: 100%; }
  .app-shell .main { padding-inline: 11px; }
  .app-shell .topbar > div { min-width: 0; }
  .app-shell .topbar h1 { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
  .app-shell .page { padding-top: 12px; }
  .hosting-command-hero { display: block; min-height: 0; }
  .hosting-hero-visual { min-height: 146px; border-inline-end: 0; border-bottom: 1px solid rgba(230,184,79,.12); }
  .hosting-hero-visual img { width: 104px; border-radius: 24px; }
  .hosting-portrait-ring { width: 124px; }
  .hosting-hero-copy { min-width: 0; padding: 22px 19px 17px; overflow: hidden; }
  .hosting-hero-copy .eyebrow { white-space: normal; }
  .hosting-hero-copy h2 { font-size: 27px; }
  .hosting-live-panel { width: calc(100% - 24px); max-width: calc(100% - 24px); margin: 0 12px 12px; }
  .hosting-live-panel dl { grid-column: 1/-1; grid-row: auto; min-width: 0; }
  .hosting-metrics-grid { grid-template-columns: 1fr; gap: 9px; }
  .host-metric-card { width: 100%; min-width: 0; min-height: 96px; padding: 14px; overflow: hidden; }
  .host-metric-card > div { min-width: 0; }
  .runtime-facts { grid-template-columns: 1fr; }
  .hosting-actions { display: grid; grid-template-columns: 1fr; }
  .hosting-actions .button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .host-metric-card { transition: none; }
}

/* Triva command center — fixed physical left rail with locale-aware content. */
.app-shell { direction: ltr; }
[dir="rtl"] .app-shell { direction: rtl; }
.app-shell .sidebar,
.app-shell .main { direction: ltr; }
[dir="rtl"] .app-shell .sidebar,
[dir="rtl"] .app-shell .main { direction: rtl; }
[dir="rtl"] .app-shell .sidebar { box-shadow: -18px 0 48px rgba(0,0,0,.22); }

.brand-copy { display:grid; gap:2px; line-height:1; }
.brand-copy strong { color:#d7fff6; font-size:22px; letter-spacing:-.035em; }
.brand-copy small { color:#2cba99; font-size:8px; font-weight:800; letter-spacing:.22em; }

.app-shell .topbar {
  position:sticky;
  z-index:100;
  top:0;
  display:grid;
  grid-template-columns:auto minmax(260px,405px) minmax(160px,1fr) auto;
  gap:14px;
  direction:inherit;
  overflow:visible;
}
.topbar-page-title { min-width:0; direction:ltr; }
[dir="rtl"] .topbar-page-title { direction:rtl; }
.topbar-search { position:relative; display:flex; align-items:center; min-width:0; height:43px; color:#858d9a; background:#0d1117; border:1px solid rgba(148,160,179,.18); border-radius:11px; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.topbar-search > svg { width:18px; height:18px; margin:0 12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.topbar-search input { min-width:0; width:100%; height:100%; padding:0; color:#e6e8ec; background:transparent; border:0; outline:0; }
.topbar-search input::placeholder { color:#68707d; }
.topbar-search kbd { margin:0 7px; padding:3px 7px; color:#888f9c; background:#181e27; border:1px solid #242b35; border-radius:6px; font:600 10px/1.2 inherit; white-space:nowrap; }
.global-search-results { position:absolute; z-index:320; inset:calc(100% + 8px) 0 auto; display:grid; gap:4px; max-height:360px; overflow:auto; padding:7px; background:#0c1016; border:1px solid rgba(230,184,79,.26); border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.65); }
.global-search-results button { display:flex; align-items:center; gap:10px; width:100%; padding:10px; color:#d9dce2; text-align:start; background:transparent; border:1px solid transparent; border-radius:8px; cursor:pointer; }
.global-search-results button:hover { color:#d2fff4; background:rgba(230,184,79,.075); border-color:rgba(230,184,79,.14); }
.global-search-results button > span:not(.module-visual):not(.entity-mark) { display:grid; gap:2px; }
.global-search-results strong { font-size:12px; }
.global-search-results small { color:#777f8b; font-size:10px; }
.global-search-results p { margin:0; padding:18px; color:#777f8b; text-align:center; font-size:12px; }
.topbar-actions { display:flex; align-items:center; gap:8px; direction:ltr; margin:0 !important; }
.topbar-tool { display:grid !important; }
.topbar-language { min-width:54px; height:42px; color:#d8dbe2; background:#0c0f14; border:1px solid rgba(230,184,79,.16); border-radius:11px; cursor:pointer; }
.topbar-language:hover { color:#c4ece0; border-color:rgba(230,184,79,.45); }
.header-account { position:relative; }
.header-account summary { display:flex; align-items:center; gap:9px; min-width:132px; height:46px; padding:5px 9px; color:#f2eee5; background:#101216; border:1px solid rgba(230,184,79,.13); border-radius:12px; list-style:none; cursor:pointer; }
.header-account summary::-webkit-details-marker { display:none; }
.header-account summary .avatar { flex:0 0 32px; width:32px; height:32px; }
.header-account summary span:nth-child(2) { display:grid; min-width:0; text-align:start; }
.header-account summary strong { max-width:80px; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.header-account summary small { color:#34b496; font-size:9px; }
.header-account summary svg { width:14px; height:14px; fill:none; stroke:#a6aab3; stroke-width:1.8; }
.header-account[open] summary { border-color:rgba(230,184,79,.45); }
.header-account > div { position:absolute; z-index:310; inset:calc(100% + 7px) 0 auto; min-width:100%; padding:7px; background:#0c0f14; border:1px solid rgba(230,184,79,.22); border-radius:10px; box-shadow:0 18px 45px rgba(0,0,0,.5); }
.header-account > div button { width:100%; padding:8px; color:#d4d7dd; text-align:start; }
.notification-panel { z-index:330 !important; }

html[data-dashboard-theme="light"] { color-scheme:light; --triva-bg:#f2f8f6; --triva-panel:#fffdf8; --triva-panel-raised:#e3f7f2; --human-surface:#fffdf8; --human-border:#aad8cd; --human-text:#211c15; --human-muted:#58726c; }
html[data-dashboard-theme="light"] .app-shell { color:#211c15; background:#f2f8f6; }
html[data-dashboard-theme="light"] .app-shell .main { background:radial-gradient(circle at 16% 0,rgba(190,140,45,.08),transparent 30%),#f2f8f6 !important; }
html[data-dashboard-theme="light"] .app-shell .sidebar,
html[data-dashboard-theme="light"] .app-shell .topbar { background:#fffdf8 !important; border-color:#b5ddd4 !important; }
html[data-dashboard-theme="light"] .app-shell .panel,
html[data-dashboard-theme="light"] .app-shell .settings-head,
html[data-dashboard-theme="light"] #settingsForm,
html[data-dashboard-theme="light"] .overview-panel,
html[data-dashboard-theme="light"] .overview-kpi,
html[data-dashboard-theme="light"] .commerce-record,
html[data-dashboard-theme="light"] .workspace-card { color:#211c15; background:#fffdf8 !important; border-color:#a9dacf !important; box-shadow:0 10px 28px rgba(80,57,22,.06); }
html[data-dashboard-theme="light"] .app-shell h1,
html[data-dashboard-theme="light"] .app-shell h2,
html[data-dashboard-theme="light"] .app-shell h3,
html[data-dashboard-theme="light"] .app-shell strong,
html[data-dashboard-theme="light"] .overview-panel header h3,
html[data-dashboard-theme="light"] .overview-kpi strong { color:#211c15; }
html[data-dashboard-theme="light"] .app-shell .muted,
html[data-dashboard-theme="light"] .app-shell small,
html[data-dashboard-theme="light"] .overview-kpi span:not(.kpi-icon) { color:#5f7771; }
html[data-dashboard-theme="light"] .nav-item { color:#4f625e; }
html[data-dashboard-theme="light"] .nav-item:hover { color:#211c15; background:#dcf2ed; }
html[data-dashboard-theme="light"] .nav-item.active { color:#0b231d; background:linear-gradient(100deg,#66edce,#31d8b1); }
html[data-dashboard-theme="light"] .topbar-search,
html[data-dashboard-theme="light"] .topbar-language,
html[data-dashboard-theme="light"] .header-account summary,
html[data-dashboard-theme="light"] .workspace-switcher { color:#2d271e; background:#fffaf0 !important; border-color:#a3d7cb !important; }
html[data-dashboard-theme="light"] .global-search-results,
html[data-dashboard-theme="light"] .header-account > div,
html[data-dashboard-theme="light"] .notification-panel,
html[data-dashboard-theme="light"] .workspace-quick-menu { color:#211c15; background:#fffdf8 !important; border-color:#a3d7cb !important; box-shadow:0 18px 45px rgba(68,48,18,.16); }
html[data-dashboard-theme="light"] #settingsForm .field-group { background:#fffaf1 !important; border-color:#b6ddd4 !important; }
html[data-dashboard-theme="light"] #settingsForm .field-group[open] { background:#e9fffa !important; border-color:#38c8a6 !important; }
html[data-dashboard-theme="light"] #settingsForm input,
html[data-dashboard-theme="light"] #settingsForm textarea,
html[data-dashboard-theme="light"] #settingsForm select,
html[data-dashboard-theme="light"] #settingsForm .resource-picker,
html[data-dashboard-theme="light"] #settingsForm .resource-picker-body,
html[data-dashboard-theme="light"] #settingsForm .resource-search,
html[data-dashboard-theme="light"] #settingsForm .resource-option { color:#2b251d; background:#fffdf8 !important; border-color:#b2d9d0; }
html[data-dashboard-theme="light"] #settingsForm .resource-option:hover { background:#d6f7ef !important; border-color:#43c8a9; }
html[data-dashboard-theme="light"] #settingsForm .resource-option.selected { background:#b0f4e4 !important; border-color:#1eb995; }
html[data-dashboard-theme="light"] .analytics-summary,
html[data-dashboard-theme="light"] .analytics-legend.comparative span,
html[data-dashboard-theme="light"] .hierarchy-tier,
html[data-dashboard-theme="light"] .metric-pairs > div,
html[data-dashboard-theme="light"] .overview-plan,
html[data-dashboard-theme="light"] .primary-system-card { color:#211c15; background:#fffaf1; border-color:#b6ddd4; }
html[data-dashboard-theme="light"] .chart-grid line { stroke:rgba(63,48,26,.13); }
html[data-dashboard-theme="light"] .chart-days text,
html[data-dashboard-theme="light"] .chart-scale text { fill:#5c756f; }

.dashboard-overview { display:grid; gap:16px; }
.overview-showcase { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(430px,1.2fr) minmax(380px,.9fr); min-height:248px; overflow:hidden; direction:ltr; background:#080a0d; border:1px solid rgba(230,184,79,.34); border-radius:18px; box-shadow:0 18px 60px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.025); }
.overview-showcase::after { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,rgba(230,184,79,.08),transparent 27%,transparent 72%,rgba(230,184,79,.04)); pointer-events:none; }
.overview-hero-copy { align-self:center; z-index:2; padding:28px clamp(20px,3vw,46px); text-align:center; direction:ltr; }
[dir="rtl"] .overview-hero-copy { direction:rtl; }
.overview-hero-copy .eyebrow { color:#37c9a7; letter-spacing:.2em; }
.overview-hero-copy h2 { margin:5px 0 3px; color:#e9fffa; font-size:clamp(30px,3.1vw,47px); line-height:1.1; letter-spacing:-.04em; }
.overview-hero-copy h2 b { color:#5defcd; }
.overview-hero-copy h3 { margin:10px 0 4px; color:#f2eee4; font-size:clamp(15px,1.35vw,20px); }
.overview-hero-copy > p:last-of-type { max-width:620px; margin:0 auto; color:#989da7; font-size:13px; line-height:1.7; }
.hero-actions { display:flex; justify-content:center; gap:10px; margin-top:18px; }
.hero-actions .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:158px; min-height:43px; }
.hero-actions svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; }
.overview-castle { position:relative; min-width:0; min-height:248px; overflow:hidden; background:#101319; }
.overview-castle::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,#080a0d 0%,rgba(8,10,13,.18) 32%,transparent 68%); pointer-events:none; }
.overview-castle img { display:block; width:100%; height:100%; min-height:248px; object-fit:cover; object-position:center; }

.overview-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.overview-kpi { --tone:var(--t-accent, #9fdcc8); display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:13px; min-height:94px; padding:16px; overflow:hidden; background:linear-gradient(145deg,#11141a,#0b0e12); border:1px solid color-mix(in srgb,var(--tone) 34%,transparent); border-radius:14px; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.overview-kpi.tickets { --tone:#f06473; }.overview-kpi.members { --tone:#718cff; }.overview-kpi.servers { --tone:#b8e8d8; }
.overview-kpi .kpi-icon { display:grid; place-items:center; width:52px; height:52px; color:var(--tone); background:color-mix(in srgb,var(--tone) 10%,transparent); border:1px solid color-mix(in srgb,var(--tone) 36%,transparent); border-radius:13px; }
.overview-kpi svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.overview-kpi div { min-width:0; }
.overview-kpi span:not(.kpi-icon) { display:block; color:#9ca1aa; font-size:11px; }
.overview-kpi strong { display:block; margin:3px 0; color:#f7f4ec; font-size:25px; line-height:1.1; letter-spacing:-.03em; }
.overview-kpi small { display:block; color:color-mix(in srgb,var(--tone) 78%,#999); font-size:9px; white-space:nowrap; }
.overview-kpi small.offline { color:var(--triva-danger); }

.overview-intelligence { display:grid; grid-template-columns:minmax(480px,1.5fr) minmax(280px,.7fr); gap:14px; }
.overview-panel { min-width:0; padding:18px; background:linear-gradient(145deg,#101319,#0b0e12); border:1px solid rgba(230,184,79,.18); border-radius:15px; box-shadow:inset 0 1px rgba(255,255,255,.018); }
.overview-panel > header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.overview-panel header h3 { margin:2px 0 0; color:#f3f0e8; font-size:16px; }
.overview-panel header > span { padding:6px 9px; color:#989ca5; background:#0c0f14; border:1px solid #262b33; border-radius:8px; font-size:9px; }
.overview-panel .eyebrow { margin:0; color:#33a68b; font-size:8px; }
.overview-analytics { min-height:225px; }
.analytics-empty { display:grid; place-items:center; align-content:center; gap:7px; min-height:220px; color:#838993; text-align:center; border:1px dashed rgba(230,184,79,.18); border-radius:11px; }
.analytics-empty .ui-icon { width:28px; height:28px; color:#3bc6a6; }
.analytics-empty strong { color:#d9d5cb; font-size:13px; }.analytics-empty span:last-child { max-width:320px; font-size:10px; line-height:1.6; }
.analytics-summaries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.analytics-summary { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:10px 11px; background:#0a0d12; border:1px solid color-mix(in srgb,var(--series) 20%,rgba(255,255,255,.05)); border-radius:9px; }
.analytics-summary > span { display:flex; align-items:center; gap:6px; color:#a9adb5; font-size:9px; }.analytics-summary > span i { width:7px; height:7px; background:var(--series); border-radius:50%; box-shadow:0 0 9px color-mix(in srgb,var(--series) 55%,transparent); }
.analytics-summary strong { grid-row:2; color:#f0f1f3; font-size:17px; }.analytics-summary small { grid-row:3; color:#707681; font-size:8px; }
.analytics-summary em { grid-column:2; grid-row:2/4; align-self:center; padding:4px 6px; color:#8d939c; background:#11151b; border-radius:999px; font-size:8px; font-style:normal; }.analytics-summary em.up { color:#52df91; }.analytics-summary em.down { color:#f0717f; }
.analytics-legend { display:flex; justify-content:center; gap:18px; margin-bottom:8px; color:#aeb1b8; font-size:9px; }
.analytics-legend span { display:flex; align-items:center; gap:6px; }.analytics-legend i { width:7px; height:7px; background:var(--series); border-radius:50%; }
.analytics-legend.comparative span { padding:6px 9px; background:#0a0d12; border:1px solid color-mix(in srgb,var(--series) 20%,transparent); border-radius:999px; }.analytics-legend.comparative b { color:#d9dce1; font-size:9px; }.analytics-legend.comparative em { color:#8e949e; font-size:8px; font-style:normal; }.analytics-legend.comparative em.up { color:#48dc90; }.analytics-legend.comparative em.down { color:#ef7180; }
.analytics-chart { display:block; width:100%; height:260px; overflow:visible; }
.chart-grid line { stroke:rgba(255,255,255,.075); stroke-width:1; }.chart-area { pointer-events:none; }.chart-line { fill:none; stroke:var(--series); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--series) 34%,transparent)); }.chart-point { fill:#0c0f14; stroke:var(--series); stroke-width:2.4; transition:r .15s ease; }.chart-point:hover { r:6; }.chart-days text,.chart-scale text { fill:#737984; font-size:8px; }.chart-scale text { text-anchor:start; }
.overview-status-list { display:grid; gap:4px; }
.overview-status-list button { display:grid; grid-template-columns:minmax(0,1fr) auto 16px; align-items:center; gap:8px; min-height:35px; padding:6px 8px; color:#cfd2d8; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.045); border-radius:7px; cursor:pointer; }
.overview-status-list button:hover { background:rgba(230,184,79,.06); }.overview-status-list button:disabled { cursor:not-allowed; opacity:.58; }
.overview-status-list button > span { display:flex; align-items:center; gap:8px; min-width:0; }.overview-status-list button strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.overview-status-list .module-visual { width:24px; height:24px; }.overview-status-list em { color:#7f858f; font-size:8px; font-style:normal; }.overview-status-list em.online { color:#42df91; }.overview-status-list em.locked { color:#45d5b3; }.overview-status-list button > svg { width:14px; height:14px; fill:none; stroke:#5f6671; stroke-width:1.8; }
.bot-identity { display:grid; grid-template-columns:52px 1fr 8px; align-items:center; gap:10px; }.bot-identity img { width:52px; height:52px; object-fit:cover; border:1px solid rgba(230,184,79,.28); border-radius:50%; }.bot-identity span { display:grid; gap:3px; min-width:0; }.bot-identity strong { overflow:hidden; color:#5ff1cf; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.bot-identity small { color:#838892; font-size:9px; }.bot-identity i { width:8px; height:8px; background:#59616d; border-radius:50%; }.bot-identity i.online { background:#38d98a; box-shadow:0 0 8px rgba(56,217,138,.7); }
.bot-panel #overviewBotInfo > p { max-height:42px; overflow:hidden; margin:12px 0; color:#8f949d; font-size:9px; line-height:1.55; }.bot-panel dl { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:13px 0; }.bot-panel dl div { padding:9px; background:#0a0d11; border:1px solid rgba(255,255,255,.05); border-radius:8px; }.bot-panel dt { color:#737984; font-size:8px; }.bot-panel dd { margin:3px 0 0; color:#d5d8de; font-size:10px; font-weight:700; }.bot-panel .button { display:flex; justify-content:center; gap:7px; width:100%; margin:0; }.bot-panel .restart-note { display:block; margin-top:7px; color:#6f7580; font-size:8px; line-height:1.45; text-align:center; }

.overview-server-insights { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.insight-panel { min-height:168px; }.insight-panel > header { margin-bottom:10px; }
.hierarchy-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.hierarchy-tier,.metric-pairs > div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px; background:#0a0d12; border:1px solid rgba(255,255,255,.055); border-radius:9px; }.hierarchy-tier { border-inline-start:3px solid #3b9c85; }.hierarchy-tier:nth-child(2){border-inline-start-color:#41bda0}.hierarchy-tier:nth-child(3){border-inline-start-color:#48dfbc}.hierarchy-tier:nth-child(4){border-inline-start-color:#70f4d5}.hierarchy-tier span,.metric-pairs span { color:#989ea8; font-size:9px; }.hierarchy-tier strong,.metric-pairs strong { color:#79f4d7; font-size:18px; }
.metric-pairs { display:grid; gap:8px; }.metric-pairs .danger-value { color:#f0717f; }.metric-pairs .success-value { color:#4bdf94; }
#overviewPlans { display:grid; gap:7px; }.overview-plan { padding:10px; background:#0a0d12; border:1px solid rgba(255,255,255,.06); border-radius:9px; }.overview-plan > div { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:7px; }.overview-plan strong { overflow:hidden; color:#ebe7df; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.overview-plan em { color:#9da2ab; font-size:8px; font-style:normal; }.overview-plan > small { display:block; margin:6px 0 0 15px; color:#58c9af; font-size:8px; }.overview-plan p { margin:7px 0 0; padding:7px; color:#6df3d4; background:rgba(230,144,48,.09); border-radius:6px; font-size:8px; line-height:1.45; }.overview-plan.urgent,.overview-plan.expired { border-color:rgba(240,96,115,.38); }.plan-live { width:7px; height:7px; background:#59616d; border-radius:50%; }.plan-live.online { background:#38d98a; box-shadow:0 0 8px rgba(56,217,138,.65); }
.clans-overview > header small { display:block; margin-top:4px; color:#777d87; font-size:9px; }.clan-table { overflow:auto; border:1px solid rgba(255,255,255,.055); border-radius:10px; }.clan-row { display:grid; grid-template-columns:70px minmax(140px,1.3fr) repeat(3,minmax(110px,.8fr)); align-items:center; gap:10px; min-width:650px; padding:11px 13px; border-bottom:1px solid rgba(255,255,255,.045); }.clan-row:last-child { border-bottom:0; }.clan-row span { color:#abb0b8; font-size:9px; }.clan-row strong { color:var(--t-accent, #9fdcc8); font-size:11px; }.clan-head { background:#0a0d12; }.clan-head span { color:#757b86; font-weight:700; }
.developer-bot-information { margin-bottom:14px; }.developer-bot-information .runtime-state { padding:6px 9px; color:#a1a6af; background:#0b0e13; border:1px solid #282d35; border-radius:999px; font-size:9px; }.developer-bot-information .runtime-state.online { color:#43df92; border-color:rgba(67,223,146,.28); }.developer-bot-runtime { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(240px,1.4fr) minmax(220px,.8fr); align-items:center; gap:16px; }.developer-bot-runtime > p { margin:0; color:#999fa9; font-size:10px; line-height:1.65; }.developer-bot-runtime dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }.developer-bot-runtime dl div { padding:10px; background:#0a0d12; border:1px solid rgba(255,255,255,.055); border-radius:8px; }.developer-bot-runtime dt { color:#727985; font-size:8px; }.developer-bot-runtime dd { margin:3px 0 0; color:#ece9e2; font-size:10px; font-weight:700; }

.primary-systems { scroll-margin-top:94px; }.primary-systems > header { align-items:center; }.primary-systems header small { display:block; margin-top:4px; color:#777d87; font-size:9px; }.primary-system-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }.primary-system-card { --tone:var(--t-accent, #9fdcc8); position:relative; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; min-height:82px; padding:13px; overflow:hidden; color:#e7e9ed; text-align:start; background:#0d1015; border:1px solid color-mix(in srgb,var(--tone) 25%,transparent); border-radius:11px; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background-color .16s ease; }.primary-system-card.tone-2{--tone:#a56cf2}.primary-system-card.tone-3{--tone:#579dea}.primary-system-card.tone-4{--tone:#f06483}.primary-system-card.tone-5{--tone:#39d98a}.primary-system-card:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--tone) 5%,#0d1015);border-color:color-mix(in srgb,var(--tone) 58%,transparent)}.primary-system-card:disabled{cursor:not-allowed;opacity:.55;transform:none}.primary-system-card .module-visual{width:38px;height:38px;color:var(--tone);background:color-mix(in srgb,var(--tone) 10%,transparent);border-color:color-mix(in srgb,var(--tone) 25%,transparent)}.primary-system-card > span{display:grid;gap:4px;min-width:0}.primary-system-card strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.primary-system-card small{color:#767c86;font-size:8px}.primary-system-card em{position:absolute;inset:auto 10px 8px auto;color:#a9adb5;font-size:8px;font-style:normal}.activity-panel .audit-list { grid-template-columns:repeat(4,minmax(0,1fr)); }.activity-panel .audit-item { background:#0b0e12; }

@media (max-width:1280px){
  .app-shell .topbar{grid-template-columns:auto minmax(230px,340px) minmax(130px,1fr) auto}.overview-showcase{grid-template-columns:minmax(390px,1.15fr) minmax(300px,.85fr)}.overview-intelligence{grid-template-columns:1.2fr .8fr}.overview-server-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.primary-system-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){.header-account summary span:nth-child(2),.header-account summary>svg,.topbar-page-title{display:none}.header-account summary{min-width:44px;width:44px;padding:5px}.overview-showcase{grid-template-columns:minmax(360px,1.1fr) minmax(250px,.9fr)}.overview-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-intelligence{grid-template-columns:1fr}.activity-panel .audit-list{grid-template-columns:repeat(2,minmax(0,1fr))}.developer-bot-runtime{grid-template-columns:1fr 1fr}.developer-bot-runtime>p{grid-column:1/-1}}
@media (max-width:900px){.app-shell .sidebar{left:0;right:auto;transform:translateX(-105%)!important}[dir="rtl"] .app-shell .sidebar{left:auto;right:0;transform:translateX(105%)!important}.app-shell .sidebar.open{transform:none!important}.app-shell .topbar{grid-template-columns:auto minmax(180px,1fr) auto}.topbar-actions{grid-column:3}.topbar-search{grid-column:2}.overview-showcase{grid-template-columns:minmax(330px,1.15fr) minmax(230px,.85fr)}.overview-hero-copy{padding:22px 18px}}
@media (max-width:620px){.app-shell .topbar{height:auto;min-height:72px;grid-template-columns:auto 1fr auto;padding:10px 0}.topbar-search{grid-column:1/-1;grid-row:2}.topbar-search kbd,.header-account{display:none}.overview-showcase{display:flex;flex-direction:column-reverse;min-height:0}.overview-castle{display:block;width:100%;min-height:160px}.overview-castle img{min-height:160px}.overview-castle::after{background:linear-gradient(0deg,#080a0d 0%,transparent 42%)}.overview-hero-copy{padding:22px 16px}.overview-hero-copy h2{font-size:29px}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions .button{min-width:0;padding-inline:9px}.overview-kpis{gap:8px}.overview-kpi{grid-template-columns:42px 1fr;min-height:80px;padding:11px;gap:9px}.overview-kpi .kpi-icon{width:42px;height:42px}.overview-kpi strong{font-size:20px}.analytics-summaries{grid-template-columns:1fr}.overview-server-insights,.hierarchy-grid,.primary-system-grid,.activity-panel .audit-list,.developer-bot-runtime,.developer-bot-runtime dl{grid-template-columns:1fr}.overview-panel{padding:14px}}
@media (max-width:620px){.analytics-legend.comparative{align-items:stretch;flex-direction:column}.analytics-legend.comparative span{justify-content:center}.analytics-chart{height:220px}}
@media (prefers-reduced-motion:reduce){.primary-system-card,.chart-point{transition:none}.primary-system-card:hover{transform:none}}
/* Commerce currency and access identity refinements */
.currency-selector{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:14px 0 18px;padding:5px;border:1px solid rgba(218,168,65,.24);border-radius:14px;background:#0e0f11}.currency-selector>span{padding-inline:10px;color:#8c9d99;font-size:12px}.currency-selector button{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border:1px solid transparent;border-radius:10px;background:transparent;color:#d5d0c7;font-weight:800;cursor:pointer}.currency-selector button small{color:#777268;font-size:10px;font-weight:500}.currency-selector button.active{border-color:color-mix(in srgb, var(--t-accent, #9fdcc8) 52%, transparent);background:#112b25;color:#64f2d1}.currency-selector button.active small{color:#70c6b2}
.dual-price-inputs{display:grid;grid-template-columns:repeat(2,minmax(118px,1fr));gap:8px}.dual-price-inputs .price-input{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px;padding:6px 8px;border:1px solid #302c25;border-radius:10px;background:#0c0d0f}.dual-price-inputs .price-input>span{position:static;grid-column:1/-1;transform:none;color:#7d8f8b;font-size:9px}.dual-price-inputs .price-input input{padding:0;border:0;background:transparent}.dual-price-inputs .price-input b{color:#59d6b9;font-size:9px}.catalog-editor .catalog-row{grid-template-columns:42px minmax(0,1fr) minmax(260px,330px) 42px}
.sales-manager-row>.entity-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.sales-manager-row{grid-template-columns:36px minmax(0,1fr) auto}.access-owner-badge{padding:5px 8px;border:1px solid color-mix(in srgb, var(--t-accent, #9fdcc8) 30%, transparent);border-radius:999px;color:#5fd7bb;font-size:9px;white-space:nowrap}.developer-access-panel{align-self:start}.log-mention-note{grid-column:1/-1;margin:0;padding:9px 11px;border-inline-start:2px solid #289a7f;background:color-mix(in srgb, var(--t-accent, #9fdcc8) 4%, transparent)}
.log-test-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border:1px solid #302c25;border-radius:12px;background:#0e0f11}.log-test-row strong,.log-test-row small{display:block}.log-test-row small{margin-top:4px;color:#817b72;font-size:10px}
@media(max-width:760px){.currency-selector{width:100%;flex-wrap:wrap}.currency-selector>span{width:100%}.currency-selector button{flex:1;justify-content:center}.catalog-editor .catalog-row{grid-template-columns:42px minmax(0,1fr) 42px}.dual-price-inputs{grid-column:1/-1}}
@media(max-width:460px){.dual-price-inputs{grid-template-columns:1fr}}

/* Protection control center */
.protection-workspace{grid-column:1/-1;display:grid;background:#0c0e12;border:1px solid rgba(220,172,73,.2);border-radius:13px;overflow:hidden}
.protection-section{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.065)}.protection-section:last-child{border-bottom:0}.protection-section>header{display:flex;align-items:center;gap:9px;margin-bottom:13px}.protection-section>header::before{width:3px;height:17px;content:"";background:#3fd3b0;border-radius:999px}.protection-section>header h4{margin:0;color:#f0ece4;font-size:14px}.protection-section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.protection-section>div>.check-grid,.protection-section>div>.protection-rule-hint,.protection-section>div>.protection-rule-table,.protection-section>div>.message-style-field,.protection-section>div>.message-live-preview{grid-column:1/-1}
.protection-rule-hint{margin:0 0 10px;padding:9px 11px;border-inline-start:3px solid #3dd5b2;background:rgba(213,161,61,.055);border-radius:7px;line-height:1.6}
.protection-rule-table{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#090b0e}
.protection-preview-host{grid-column:1/-1;display:grid}
.protection-rule-section{overflow:hidden;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.075);border-radius:0}.protection-rule-section:last-child{border-bottom:0}.protection-rule-section>header{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:8px 14px;background:#111318;border-bottom:1px solid rgba(255,255,255,.055)}.protection-rule-section>header strong{color:#eeeae2;font-size:12px}.protection-rule-section>header small{min-width:34px;padding:4px 8px;color:#50d5b6;text-align:center;background:rgba(213,170,80,.09);border-radius:999px;font-size:9px}
.protection-rule-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,260px) 42px;align-items:center;gap:14px;min-height:58px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.045)}.protection-rule-row:last-child{border-bottom:0}.protection-rule-row:hover{background:rgba(218,170,69,.035)}
.protection-rule-name{min-width:0}.protection-rule-name strong{display:block;overflow:hidden;color:#e8e5de;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.protection-rule-row select{width:100%;min-width:0;min-height:38px;padding:0 11px;color:#d7d4ce;background:#111419;border:1px solid #30343b;border-radius:8px;font-size:11px}
.protection-rule-toggle{position:relative;display:block;width:38px!important;height:22px!important;margin:0}.protection-rule-toggle input{position:absolute;opacity:0;pointer-events:none}.protection-rule-toggle span{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;padding:0!important;background:#292d34;border:1px solid #414650;border-radius:999px;transition:.18s}.protection-rule-toggle span::after{position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;content:"";background:#8d929a;border-radius:50%;transform:none!important;transition:.18s}.protection-rule-toggle input:checked+span{background:#1b8f74;border-color:#3ed5b2;box-shadow:0 0 14px rgba(213,164,62,.12)}.protection-rule-toggle input:checked+span::after{inset-inline-start:19px;background:#9affe7;transform:none!important}.protection-rule-toggle input:focus-visible+span{outline:2px solid #5af0cd;outline-offset:2px}
@media(max-width:720px){.protection-section{padding:14px}.protection-section>div{grid-template-columns:1fr}.protection-rule-row{grid-template-columns:minmax(120px,1fr) 42px;gap:10px}.protection-rule-row select{grid-column:1/-1;grid-row:2}.protection-rule-toggle{grid-column:2;grid-row:1}}

/* Developer workspace */
.hosting-workspace-tabs{position:sticky;z-index:20;top:8px;display:flex;gap:6px;margin:0 0 16px;padding:6px;overflow-x:auto;border:1px solid rgba(218,170,69,.2);border-radius:13px;background:rgba(10,11,14,.94);box-shadow:0 12px 35px rgba(0,0,0,.2);backdrop-filter:blur(14px)}
.hosting-workspace-tabs button{flex:0 0 auto;min-height:38px;padding:0 15px;border:1px solid transparent;border-radius:9px;color:#9aaaa6;background:transparent;font:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:.18s ease}.hosting-workspace-tabs button:hover{color:#dceeea;background:#151516}.hosting-workspace-tabs button.active{color:#171109;border-color:#57e3c2;background:linear-gradient(135deg,#81f6db,#2dd9b1);box-shadow:0 7px 18px rgba(199,139,31,.18)}
.hosting-panel-hidden{display:none!important}.platform-status-panel{grid-column:1/-1}.developer-section:has(#hostNotificationForm){grid-column:1/-1}
.platform-status-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.platform-status-form>.full{grid-column:1/-1}.platform-status-form textarea{min-height:170px;font-family:inherit;line-height:1.65}.platform-status-form .field small{display:block;margin-top:7px;color:#768884;font-size:9px;line-height:1.7;overflow-wrap:anywhere}
.platform-status-snapshot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px;border:1px solid rgba(218,170,69,.17);border-radius:11px;background:#0b0d10}.platform-status-snapshot>strong{margin-inline-end:auto;color:#dbeeea;font-size:11px}.platform-status-snapshot span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #292a2d;border-radius:999px;color:#918b82;background:#101216;font-size:9px}.platform-status-snapshot b{color:#69edce;font-size:10px}
@media(max-width:720px){.hosting-workspace-tabs{top:4px}.hosting-workspace-tabs button{padding-inline:11px}.platform-status-form{grid-template-columns:1fr}.platform-status-form>.full{grid-column:1}.platform-status-snapshot>strong{width:100%;margin:0}}

/* ===================== triva-interface.css ===================== */
/* ProBot-inspired surface, scale and spacing. Triva retains its original gold identity.
   This final presentation layer never hides configuration controls or replaces data. */
:root {
  --ui-bg: #0b0e10;
  --ui-sidebar: #0c1011;
  --ui-panel: #14181b;
  --ui-raised: #181d20;
  --ui-input: #121619;
  --ui-border: #2a3034;
  --ui-text: #e6f1ef;
  --ui-muted: #aac1ba;
  --ui-accent: var(--t-accent, #9fdcc8);
  --ui-accent-hover: #58e8d2;
  --ui-accent-soft: color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent);
  --ui-on-accent: #062722;
  --ui-hover: #ffffff06;
  --ui-sidebar-width: 252px;
  --bg: var(--ui-bg);
  --surface: var(--ui-panel);
  --surface-2: var(--ui-raised);
  --line: var(--ui-border);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --primary: var(--ui-accent);
  --primary-2: var(--ui-accent-hover);
  --focus: var(--ui-accent-hover);
  --human-bg: var(--ui-bg);
  --human-surface: var(--ui-panel);
  --human-surface-raised: var(--ui-raised);
  --human-border: var(--ui-border);
  --human-border-strong: #417166;
  --human-text: var(--ui-text);
  --human-muted: var(--ui-muted);
  --human-gold: var(--ui-accent);
  --triva-bg: var(--ui-bg);
  --triva-sidebar: var(--ui-sidebar);
  --triva-panel: var(--ui-panel);
  --triva-panel-raised: var(--ui-raised);
  --triva-line: var(--ui-border);
  --triva-line-soft: var(--ui-border);
  --triva-text: var(--ui-text);
  --triva-muted: var(--ui-muted);
  --triva-gold: var(--ui-accent);
  --triva-gold-soft: var(--ui-accent-hover);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
html[data-dashboard-theme="light"] {
  --ui-bg: #f1f2f6;
  --ui-sidebar: #ffffff;
  --ui-panel: #ffffff;
  --ui-raised: #f5f5f8;
  --ui-input: #f5f5f8;
  --ui-border: #dddde5;
  --ui-text: #252631;
  --ui-muted: #636574;
  --ui-accent: #209479;
  --ui-accent-hover: #23aa8b;
  --ui-accent-soft: #20947910;
  --ui-on-accent: #ffffff;
  --ui-hover: #00000004;
}
html { scrollbar-color: #51525f var(--ui-bg); }
body { background: var(--ui-bg) !important; color: var(--ui-text); font-size: 14px; line-height: 1.6; }
body::before { display: none; }
button, input, textarea, select { font-family: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
.app-shell .muted, .landing p, .workspace-view p { color: var(--ui-muted) !important; }
.app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4 { color: var(--ui-text) !important; }
.button, .app-shell .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 18px; border-radius: 6px !important;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  box-shadow: none !important; transform: none !important;
}
.button.primary, .app-shell .button.primary {
  color: var(--ui-on-accent) !important; background: var(--ui-accent) !important;
  border: 1px solid var(--ui-accent) !important; text-shadow: none;
}
.button.primary:hover, .app-shell .button.primary:hover { background: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; }
.button.ghost, .button.secondary, .app-shell .button.ghost {
  color: var(--ui-text) !important; background: var(--ui-raised) !important; border-color: var(--ui-border) !important;
}
.button.ghost:hover, .button.secondary:hover { background: var(--ui-hover) !important; }
.button.compact { min-height: 36px; padding: 7px 13px; font-size: 13px; }
.button:disabled { opacity: .5; }
svg { flex-shrink: 0; }
.app-shell :is(button, input, textarea, select, a, summary):focus-visible,
.workspace-view :is(button, input, a):focus-visible, .landing :is(button, a):focus-visible {
  outline: 2px solid var(--ui-accent-hover); outline-offset: 3px;
}
.app-shell :is(.ui-icon, .module-visual, .section-icon) {
  color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important;
  border-color: transparent !important; border-radius: 8px !important; box-shadow: none !important;
}
.app-shell :is(.ui-icon, .module-visual) svg { stroke-width: 1.8; }

/* Public home: reference-like center alignment, Triva mascot, real links. */
.landing { background: var(--ui-bg) !important; }
.landing::before, .landing::after { display: none !important; }
.landing-nav { position: relative; max-width: 1200px; margin-inline: auto; padding: 20px 28px; background: transparent !important; border: 0; backdrop-filter: none; }
.landing-brand { color: var(--ui-text); font-size: 24px; gap: 10px; }
.landing-brand .brand-mark.small { width: 44px; height: 44px; }
.landing-links a { color: var(--ui-muted); font-size: 14px; }
.landing-links a:hover { color: var(--ui-text); }
.landing-hero { display: flex; flex-direction: column; align-items: center; max-width: 1080px; min-height: 0; padding: 86px 24px 48px; margin: auto; gap: 36px; }
.landing-copy { max-width: 760px; width: 100%; text-align: center; }
.landing-kicker { display: inline-flex; padding: 7px 17px; margin-bottom: 22px; border: 1px solid var(--ui-border); border-radius: 24px; color: var(--ui-accent-hover); background: transparent; font-size: 13px; }
.landing-kicker span:first-child { display: none; }
.landing-copy h1 { max-width: 760px; margin: 0 auto 22px; color: var(--ui-text); font-size: clamp(32px, 4.5vw, 54px); font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }
.landing-copy > p { max-width: 680px; margin: 0 auto; font-size: 17px; line-height: 1.85; }
.landing-cta { justify-content: center; gap: 12px; margin-top: 30px; }
.landing-cta .button { min-height: 50px; padding-inline: 28px; }
.landing-trust { justify-content: center; margin-top: 22px; font-size: 12px; }
.landing-visual.triva-mascot { position: relative; display: flex; flex-direction: column; align-items: center; width: min(360px, 90%); min-height: 0; padding: 0; overflow: hidden; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; transform: none; }
.triva-mascot > img { display: block; width: 100%; height: auto; border-radius: 50%; }
.mascot-caption { display: grid; gap: 3px; text-align: center; margin-top: 12px; }
.mascot-caption > span { color: var(--ui-text); font-size: 20px; font-weight: 700; }
.mascot-caption small { color: var(--ui-muted); }
.landing-section { max-width: 1160px; margin-inline: auto; padding: 60px 28px; }
.section-heading h2, .workflow-copy h2, .community-copy h2 { color: var(--ui-text); font-size: clamp(26px, 3vw, 36px); line-height: 1.4; font-weight: 700; letter-spacing: -.02em; }
.section-heading > p:not(.eyebrow) { max-width: 690px; margin-inline: auto; line-height: 1.8; }
.feature-grid { gap: 20px; }
.feature-card, .pricing-card, .workflow-list li { border: 1px solid var(--ui-border) !important; background: var(--ui-panel) !important; border-radius: 8px !important; box-shadow: none !important; }
.feature-card { padding: 26px; }
.feature-card h3, .pricing-card h3 { font-size: 19px; color: var(--ui-text); }
.feature-icon, .pricing-icon { width: 46px; height: 46px; background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; border: 0 !important; border-radius: 8px; }
.pricing-card.featured { border-color: var(--ui-accent) !important; }
.pricing-card .plan-badge { background: var(--ui-raised); border-color: var(--ui-border); color: var(--ui-muted); }
.pricing-card .plan-badge.recommended { color: var(--ui-accent-hover); background: var(--ui-accent-soft); }
.landing-final { border-radius: 8px !important; background: var(--ui-panel) !important; border-color: var(--ui-border) !important; }
.landing-footer { border-color: var(--ui-border); color: var(--ui-muted); }

/* Server chooser: same authentication, access and bot-instance choices. */
.workspace-view { min-height: 100vh; background: var(--ui-bg) !important; }
.workspace-header { min-height: 80px; border-color: var(--ui-border); background: var(--ui-sidebar) !important; padding-inline: max(24px, calc((100vw - 1140px) / 2)); }
.workspace-main { max-width: 1140px; padding: 46px 24px 80px; }
.workspace-heading { text-align: start; margin-bottom: 26px; }
.workspace-heading h1 { font-size: clamp(25px, 3vw, 34px); color: var(--ui-text); line-height: 1.4; }
.workspace-filter { display: flex; align-items: center; gap: 12px; min-height: 46px; max-width: 440px; margin-bottom: 28px; padding: 0 14px; border: 1px solid var(--ui-border); background: var(--ui-panel); border-radius: 6px; color: var(--ui-muted); }
.workspace-filter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.workspace-filter input { width: 100%; min-width: 0; min-height: 44px; background: transparent; border: 0; color: var(--ui-text); outline: 0; }
.workspace-filter:focus-within { border-color: var(--ui-accent); }
.workspace-filter > span { white-space: nowrap; font-size: 12px; }
.workspace-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.workspace-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 232px; padding: 26px 20px 20px; gap: 16px; border: 1px solid var(--ui-border) !important; border-radius: 8px !important; background: var(--ui-panel) !important; transform: none !important; }
.workspace-card:hover { border-color: #626374 !important; transform: none !important; }
.workspace-card .entity-avatar { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; border-color: var(--ui-border); background-color: var(--ui-raised); font-size: 28px; color: var(--ui-text); }
.workspace-card-copy { display: grid; justify-items: center; text-align: center; min-width: 0; width: 100%; }
.workspace-card-copy > strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 17px; color: var(--ui-text); }
.workspace-card-copy small { color: var(--ui-muted); }
.workspace-card .workspace-state { display: inline-flex; margin-top: 7px; font-size: 12px; }
.workspace-card > .button { width: 100%; margin: auto 0 0; }
.workspace-back { margin-bottom: 22px; color: var(--ui-muted); }

/* Dashboard shell and route navigation. RTL mirrors the existing layout. */
.app-shell { grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr) !important; background: var(--ui-bg) !important; }
.app-shell .sidebar { position: sticky; top: 0; display: flex; min-width: 0; height: 100dvh; padding: 20px 12px 12px; overflow: hidden; background: var(--ui-sidebar) !important; border-inline-end: 1px solid var(--ui-border) !important; box-shadow: none !important; overscroll-behavior: contain; }
.app-shell .sidebar > .brand, .app-shell .workspace-control, .app-shell .sidebar-footer { flex-shrink: 0; }
.app-shell .brand { min-height: 56px; padding: 0 12px 16px; gap: 10px; }
.brand-copy strong { color: var(--ui-text); font-size: 23px; }
.brand-copy small { color: var(--ui-muted); letter-spacing: .1em; font-size: 9px; }
.app-shell .brand .brand-mark.small { width: 38px; height: 38px; flex-basis: 38px; border: 0; background: transparent; border-radius: 50%; }
.app-shell .workspace-switcher { min-height: 66px; margin-bottom: 16px; padding: 10px; border-color: var(--ui-border) !important; background: var(--ui-input) !important; border-radius: 6px !important; }
.app-shell .workspace-switcher:hover, .app-shell .workspace-switcher[aria-expanded="true"] { background: var(--ui-raised) !important; border-color: #626374 !important; }
.workspace-switcher strong { color: var(--ui-text); font-size: 13px; }
.workspace-switcher :is(small, em) { color: var(--ui-muted); font-size: 11px; }
.app-shell #nav { display: grid; align-content: start; flex: 1; min-height: 0; gap: 3px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.app-shell .nav-heading { margin: 0; padding: 20px 12px 8px; color: var(--ui-muted); font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.app-shell .nav-item, .app-shell .system-nav-trigger { min-height: 42px; padding: 10px 12px; gap: 12px; background: transparent !important; color: var(--ui-muted) !important; border: 0 !important; border-radius: 5px !important; font-size: 13px; font-weight: 500; box-shadow: none !important; }
.app-shell .nav-item svg, .app-shell .system-nav-icon { width: 19px; height: 19px; stroke-width: 1.8; color: inherit; }
.app-shell .nav-item:hover, .app-shell .system-nav-trigger:hover { background: var(--ui-hover) !important; color: var(--ui-text) !important; }
.app-shell .nav-item.active { background: var(--ui-accent-soft) !important; color: var(--ui-accent-hover) !important; box-shadow: inset 3px 0 var(--ui-accent) !important; }
[dir="rtl"] .app-shell .nav-item.active { box-shadow: inset -3px 0 var(--ui-accent) !important; }
.app-shell .nav-item.active .status-dot { background: #3cce91; }
.app-shell .system-nav-group { border: 0; background: transparent; }
.app-shell .system-nav-items { margin-inline-start: 21px; padding-inline-start: 9px; border-inline-start: 1px solid var(--ui-border); }
.app-shell .nav-item.nested { min-height: 38px; padding: 8px; font-size: 12px; }
.app-shell .nav-item.nested svg { width: 17px; height: 17px; }
.app-shell .status-dot { width: 6px; height: 6px; box-shadow: none; }
.app-shell .sidebar-footer { padding: 18px 10px 5px; margin-top: auto; border-color: var(--ui-border) !important; }
.app-shell .sidebar-footer strong { color: var(--ui-text); }
.app-shell .main { min-width: 0; padding: 0 32px 80px; background: var(--ui-bg) !important; }
.app-shell .topbar { height: 76px; grid-template-columns: minmax(220px, 360px) minmax(140px, 1fr) auto; gap: 20px; padding: 10px 0; border-color: var(--ui-border); background: var(--ui-bg) !important; box-shadow: none; }
.app-shell .topbar #menuButton { display: none; }
.app-shell .topbar-search { height: 40px; background: var(--ui-input) !important; border-color: var(--ui-border) !important; border-radius: 6px; }
.topbar-search input { color: var(--ui-text); font-size: 13px; }
.topbar-search input::placeholder { color: var(--ui-muted); }
.topbar-search kbd { color: var(--ui-muted); background: var(--ui-raised); border-color: var(--ui-border); border-radius: 3px; }
.app-shell .topbar h1 { font-size: 17px; font-weight: 600; }
.app-shell .topbar .eyebrow { color: var(--ui-muted); font-size: 10px; }
.app-shell .topbar :is(.topbar-language, .notification-button, .topbar-tool), .header-account summary { height: 38px; min-height: 38px; color: var(--ui-muted) !important; background: var(--ui-panel) !important; border-color: var(--ui-border) !important; border-radius: 6px !important; box-shadow: none !important; }
.header-account summary strong { color: var(--ui-text); }
.header-account summary small { color: var(--ui-muted); }
.app-shell :is(.global-search-results, .workspace-quick-menu, .notification-panel), .header-account > div { background: var(--ui-panel) !important; border-color: var(--ui-border) !important; border-radius: 6px; }
.app-shell .page { width: 100%; max-width: 1280px; padding-top: 28px; }
.dashboard-menu-backdrop { position: fixed; z-index: 115; inset: 0; border: 0; background: #0009; }

/* Overview retains every live statistic, graph, system shortcut and audit item. */
.overview-showcase { grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); min-height: 200px; background: var(--ui-panel) !important; border-color: var(--ui-border); border-radius: 8px; box-shadow: none; }
.overview-showcase::after { display: none; }
.overview-hero-copy { padding: 30px; text-align: start; direction: inherit; }
.overview-hero-copy h2 { font-size: clamp(25px, 2.7vw, 34px); line-height: 1.35; letter-spacing: -.02em; }
.overview-hero-copy h2 b { color: var(--ui-accent-hover); }
.overview-hero-copy h3 { font-size: 15px; font-weight: 500; }
.overview-hero-copy > p:last-of-type { color: var(--ui-muted); margin-inline: 0; font-size: 13px; }
.overview-hero-copy .hero-actions { justify-content: start; margin-top: 20px; }
.overview-castle, .overview-castle img { min-height: 200px; background: var(--ui-panel); }
.overview-castle::after { background: linear-gradient(90deg, var(--ui-panel), transparent 40%); }
[dir="rtl"] .overview-castle::after { background: linear-gradient(-90deg, var(--ui-panel), transparent 40%); }
.overview-kpis { gap: 16px; }
.overview-kpi { grid-template-columns: 44px minmax(0,1fr); min-height: 108px; gap: 14px; padding: 20px; background: var(--ui-panel) !important; border: 1px solid var(--ui-border); border-radius: 8px; box-shadow: none; }
.overview-kpi .kpi-icon { width: 44px; height: 44px; background: var(--ui-raised); border: 0; border-radius: 8px; }
.overview-kpi strong { margin: 7px 0; color: var(--ui-text) !important; font-size: 27px; font-weight: 600; }
.overview-kpi span:not(.kpi-icon), .overview-kpi small { color: var(--ui-muted) !important; font-size: 12px; white-space: normal; }
.overview-kpi small { font-size: 10px; }
.overview-intelligence { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 20px; }
.overview-panel, .app-shell .panel { padding: 22px; background: var(--ui-panel) !important; border-color: var(--ui-border) !important; border-radius: 8px !important; box-shadow: none !important; }
.overview-panel > header { margin-bottom: 18px; }
.overview-panel header h3 { color: var(--ui-text); font-size: 16px; font-weight: 600; }
.overview-panel header > span { color: var(--ui-muted); background: var(--ui-raised); border-color: var(--ui-border); border-radius: 4px; font-size: 11px; }
.overview-panel .eyebrow { color: var(--ui-muted); font-size: 10px; }
.overview-status-list button { min-height: 44px; border-radius: 4px; }
.overview-status-list button strong { color: var(--ui-text); font-size: 12px; }
.overview-status-list em { font-size: 11px; }
.primary-system-grid { gap: 12px; }
.primary-system-card { min-height: 88px; padding: 16px; background: var(--ui-raised) !important; border: 1px solid var(--ui-border) !important; border-radius: 6px !important; box-shadow: none !important; transform: none !important; }
.primary-system-card:hover { border-color: #626374 !important; }
.primary-system-card strong { color: var(--ui-text); font-size: 13px; }
.primary-system-card :is(small, em) { color: var(--ui-muted); font-size: 11px; }
.overview-server-insights { gap: 16px; }
.app-shell :is(.hierarchy-tier, .metric-pairs > div, .overview-plan, .audit-item) { background: var(--ui-raised) !important; border-color: var(--ui-border) !important; border-radius: 6px; }
.app-shell .empty-state { color: var(--ui-muted); font-size: 13px; }

/* Shared editors cover all 17 existing settings pages; fields retain their IDs. */
#settingsForm { border: 0; border-radius: 0; background: transparent !important; }
#settingsForm .settings-head { align-items: center; gap: 24px; margin: 0 0 22px; padding: 0; border: 0 !important; background: transparent !important; }
#settingsForm .settings-head > div { min-width: 0; }
#settingsForm .settings-head h2 { font-size: 27px; line-height: 1.4; font-weight: 600; }
#settingsForm .settings-head p.muted { max-width: 760px; margin: 9px 0 0; font-size: 14px; line-height: 1.8; }
#settingsForm .settings-head .eyebrow { margin-bottom: 8px; color: var(--ui-muted); font-size: 12px; }
#moduleToggleWrap { padding: 10px 14px; background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: 6px; font-size: 13px; }
.settings-sections { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; padding: 0; margin-bottom: 20px; border-bottom: 1px solid var(--ui-border); scrollbar-width: thin; }
.settings-sections button { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; color: var(--ui-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 13px; cursor: pointer; }
.settings-sections button:hover, .settings-sections button:focus-visible { color: var(--ui-accent-hover); background: var(--ui-accent-soft); border-bottom-color: var(--ui-accent); }
#settingsForm .form-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; padding: 0; }
#settingsForm .field-group { margin: 0; padding: 0; overflow: visible; background: var(--ui-panel) !important; border: 1px solid var(--ui-border) !important; border-radius: 8px !important; scroll-margin-top: 100px; }
#settingsForm .field-group[open] { background: var(--ui-panel) !important; border-color: var(--ui-border) !important; }
#settingsForm .field-group > summary { min-height: 60px; padding: 17px 22px; border-bottom: 0; }
#settingsForm .field-group[open] > summary { border-bottom: 1px solid var(--ui-border); }
#settingsForm .field-group h3 { padding: 0; font-size: 15px; font-weight: 600; color: var(--ui-text); }
#settingsForm .field-group h3::before { display: none; }
#settingsForm .group-chevron { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; background: transparent !important; color: var(--ui-muted); stroke: currentColor; }
#settingsForm .field-group-body { gap: 20px 24px; padding: 22px; animation: none; }
#settingsForm .field { min-width: 0; margin-top: 0; gap: 9px; }
#settingsForm .field label { color: var(--ui-text); font-size: 13px; font-weight: 500; }
#settingsForm .field small { color: var(--ui-muted); font-size: 12px; line-height: 1.7; }
.app-shell .field :is(input, select, textarea), #settingsForm .field :is(input, select, textarea),
.app-shell :is(.role-catalog-head input, .protection-rule-row select) {
  min-height: 44px; min-width: 0; color: var(--ui-text) !important; background: var(--ui-input) !important;
  border: 1px solid var(--ui-border) !important; border-radius: 5px !important;
  padding: 11px 13px; font-size: 14px; box-shadow: none !important;
}
.app-shell .field textarea { min-height: 118px; line-height: 1.7; }
.app-shell .field input[type="checkbox"] { min-height: 0; }
.app-shell .field :is(input, select, textarea):focus { border-color: var(--ui-accent) !important; }
#settingsForm .resource-field { width: 100%; }
#settingsForm .resource-picker { background: var(--ui-input) !important; border-color: var(--ui-border) !important; border-radius: 5px; box-shadow: none !important; }
#settingsForm .resource-picker > summary { min-height: 44px; padding: 10px 13px; color: var(--ui-text); font-weight: 500; }
#settingsForm .resource-picker[open] { border-color: var(--ui-accent) !important; }
#settingsForm .resource-picker-body { padding: 10px; background: var(--ui-input); border-color: var(--ui-border); }
#settingsForm :is(.resource-search, .resource-option, .role-catalog-item, .color-role-item) { background: var(--ui-raised) !important; border-color: var(--ui-border) !important; border-radius: 5px; }
#settingsForm .resource-search input { background: transparent !important; border: 0 !important; min-height: 38px; }
#settingsForm :is(.resource-option.selected, .role-catalog-item.selected) { background: var(--ui-accent-soft) !important; border-color: var(--ui-accent) !important; }
#settingsForm :is(.resource-option-copy strong, .color-role-item strong, .role-catalog-name strong) { color: var(--ui-text) !important; }
#settingsForm .resource-option-copy small { color: var(--ui-muted) !important; font-size: 11px; }
#settingsForm .resource-check { border-color: #656674; }
#settingsForm .resource-option.selected .resource-check { color: var(--ui-on-accent); background: var(--ui-accent); border-color: var(--ui-accent); }
#settingsForm :is(.preference-toggle, .log-event-item, .moderation-action-row) { min-height: 52px; background: transparent !important; border-color: var(--ui-border) !important; }
#settingsForm .preference-toggle { padding: 14px; border-radius: 5px; gap: 12px; }
#settingsForm .preference-copy { min-width: 0; }
#settingsForm .preference-copy strong { font-size: 13px; font-weight: 500; color: var(--ui-text); }
#settingsForm .check-grid { gap: 12px; }
#settingsForm .switch-row { white-space: normal; }
#settingsForm .switch { width: 42px; height: 24px; flex: 0 0 42px; background: #575865 !important; border: 0; box-shadow: none !important; direction: ltr; }
#settingsForm .switch::after { top: 3px; left: 3px; width: 18px; height: 18px; background: #f4f4f7 !important; }
#settingsForm .switch-row input:checked + .switch { background: var(--ui-accent) !important; }
#settingsForm .switch-row input:checked + .switch::after,
[dir="rtl"] #settingsForm .switch-row input:checked + .switch::after { transform: translateX(18px) !important; }
#settingsForm :is(.message-style-field, .log-event-card, .ticket-type, .auto-response-row, .faq-item, .moderation-duration, .moderation-level-picker, .log-test-row) { background: var(--ui-input) !important; border-color: var(--ui-border) !important; border-radius: 6px !important; box-shadow: none !important; }
#settingsForm .message-style-picker { display: flex; flex-wrap: wrap; gap: 8px; }
#settingsForm .message-style-option { min-height: 44px; padding: 10px 14px; background: var(--ui-raised) !important; color: var(--ui-muted) !important; border: 1px solid var(--ui-border) !important; border-radius: 5px; box-shadow: none; }
#settingsForm .message-style-option.selected { background: var(--ui-accent-soft) !important; color: var(--ui-accent-hover) !important; border-color: var(--ui-accent) !important; }
#settingsForm .message-style-option > span { color: inherit !important; }
#settingsForm :is(.ticket-type summary, .auto-response-row summary, .log-event-card h4) { color: var(--ui-text); background: var(--ui-raised) !important; border-color: var(--ui-border); }
#settingsForm .protection-workspace, #settingsForm .protection-rule-table { background: var(--ui-input); border-color: var(--ui-border); border-radius: 6px; }
#settingsForm .protection-section { padding: 22px; border-color: var(--ui-border); }
#settingsForm .protection-section > header h4 { color: var(--ui-text); font-weight: 600; }
#settingsForm .protection-section > div { gap: 20px; }
#settingsForm .protection-rule-section > header { background: var(--ui-raised); }
#settingsForm .protection-rule-row { padding-block: 12px; min-height: 66px; }
#settingsForm .protection-rule-name strong { color: var(--ui-text); font-size: 13px; }
#settingsForm .protection-rule-toggle input:checked + span { background: var(--ui-accent); border-color: var(--ui-accent); box-shadow: none; }
#settingsForm .protection-rule-toggle input:checked + span::after { background: #fff; }
#settingsForm .message-live-preview { margin-top: 0; }
#settingsForm .save-bar {
  position: fixed; z-index: 110; bottom: 20px; left: calc(var(--ui-sidebar-width) + 32px); right: 32px;
  inset-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1280px; margin: 0 auto; padding: 14px 18px;
  background: var(--ui-panel) !important; border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important; box-shadow: 0 8px 32px #0004 !important; animation: none;
}
[dir="rtl"] #settingsForm .save-bar { left: 32px; right: calc(var(--ui-sidebar-width) + 32px); }
#settingsForm .save-status { color: var(--ui-text); font-size: 13px; }
#settingsForm .save-actions { display: flex; align-items: center; gap: 10px; }
#settingsForm .save-changes-button { width: auto; min-height: 40px; box-shadow: none !important; }
.app-shell #settingsPage { padding-bottom: 100px; }

/* Financial and hosting screens share the same surfaces; workflows remain intact. */
.app-shell :is(.commerce-record, .purchase-summary, .catalog-editor, .system-product-bundle, .product-module, .hosting-live-panel) { background: var(--ui-panel) !important; border-color: var(--ui-border) !important; border-radius: 8px !important; box-shadow: none !important; }
.app-shell :is(.commerce-hero, .purchase-stepper, .commerce-security, .summary-server, .guild-purchase-picker) { background: var(--ui-panel) !important; border-color: var(--ui-border) !important; border-radius: 8px !important; box-shadow: none !important; }
.app-shell .commerce-hero { padding: 24px; }
.app-shell .commerce-hero h2 { font-size: clamp(24px, 2.5vw, 32px); font-weight: 600; }
.app-shell .plan-selector label > span { background: var(--ui-input) !important; border-color: var(--ui-border) !important; border-radius: 6px !important; box-shadow: none !important; }
.app-shell .plan-selector input:checked + span { background: var(--ui-accent-soft) !important; border-color: var(--ui-accent) !important; }
.app-shell :is(.commerce-tabs, .sales-navigation, .hosting-workspace-tabs, .currency-selector) { background: var(--ui-panel) !important; border-color: var(--ui-border) !important; border-radius: 6px !important; box-shadow: none !important; }
.app-shell :is(.commerce-tabs, .sales-navigation, .hosting-workspace-tabs) button { color: var(--ui-muted); border-radius: 5px; }
.app-shell :is(.commerce-tabs, .sales-navigation, .hosting-workspace-tabs) button.active { color: var(--ui-accent-hover) !important; background: var(--ui-accent-soft) !important; border-color: var(--ui-accent) !important; box-shadow: none !important; }
.app-shell .hosting-command-hero { background: var(--ui-panel) !important; border-color: var(--ui-border); border-radius: 8px; box-shadow: none; }
.app-shell .hosting-command-hero::before, .app-shell .hosting-command-hero::after { display: none; }
.app-shell .host-metric-card { background: var(--ui-panel) !important; border-color: var(--ui-border); border-radius: 8px; box-shadow: none !important; }
.app-shell :is(.sales-manager-row, .runtime-list > div, .control-matrix-row) { background: var(--ui-input); border-color: var(--ui-border); }

@media (max-width: 1180px) {
  :root { --ui-sidebar-width: 236px; }
  .app-shell .main { padding-inline: 24px; }
  .app-shell .topbar { gap: 12px; }
  .topbar-page-title { display: none; }
  .app-shell .topbar { grid-template-columns: minmax(180px, 1fr) auto; }
  .overview-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .overview-server-insights { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #settingsForm .save-bar { left: calc(var(--ui-sidebar-width) + 24px); right: 24px; }
  [dir="rtl"] #settingsForm .save-bar { left: 24px; right: calc(var(--ui-sidebar-width) + 24px); }
}
@media (max-width: 900px) {
  .app-shell { display: block; }
  .app-shell .sidebar { position: fixed; z-index: 120; width: 260px; }
  .app-shell .main { padding-inline: 20px; }
  .app-shell .topbar { grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; }
  .app-shell .topbar #menuButton { display: grid; }
  .app-shell .topbar-search { grid-column: 2; }
  .app-shell .topbar-actions { grid-column: 3; gap: 6px; }
  .app-shell .page { padding-top: 24px; }
  .overview-intelligence { grid-template-columns: minmax(0,1fr); }
  .workspace-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #settingsForm .save-bar, [dir="rtl"] #settingsForm .save-bar { left: 20px; right: 20px; }
}
@media (max-width: 620px) {
  .landing-nav { padding: 16px; flex-wrap: wrap; gap: 16px; }
  .landing-links { display: none; }
  .landing-actions { gap: 6px; }
  .landing-actions .button { min-height: 36px; padding-inline: 10px; font-size: 12px; }
  .landing-hero { padding: 52px 20px 32px; gap: 28px; }
  .landing-copy > p { font-size: 15px; }
  .landing-cta { display: flex; flex-direction: column; gap: 8px; }
  .landing-cta .button { width: 100%; }
  .landing-trust { flex-wrap: wrap; gap: 10px; }
  .triva-mascot { max-width: 270px; }
  .landing-section { padding: 40px 20px; }
  .pricing-grid, .feature-grid { grid-template-columns: minmax(0,1fr); }
  .workspace-header { padding: 16px; gap: 16px; flex-wrap: wrap; }
  .workspace-account { flex-wrap: wrap; gap: 8px; }
  .workspace-main { padding: 30px 16px 60px; }
  .workspace-filter { max-width: none; }
  .workspace-grid { grid-template-columns: minmax(0,1fr); }
  .workspace-card { min-height: 210px; }
  .app-shell .main { padding-inline: 16px; }
  .app-shell .topbar { min-height: 112px; height: auto; grid-template-columns: 40px minmax(0,1fr) auto; padding-block: 12px; }
  .app-shell .topbar-search { grid-column: 1/-1; grid-row: 2; width: 100%; }
  .app-shell .topbar-actions { grid-column: 3; }
  .topbar-search kbd { display: none; }
  .overview-showcase { display: flex; flex-direction: column-reverse; }
  .overview-castle, .overview-castle img { min-height: 150px; max-height: 180px; }
  .overview-castle::after, [dir="rtl"] .overview-castle::after { background: linear-gradient(0deg, var(--ui-panel), transparent 40%); }
  .overview-hero-copy { padding: 22px; }
  .overview-hero-copy .hero-actions { display: flex; flex-wrap: wrap; }
  .overview-kpis { gap: 12px; }
  .overview-kpi { display: flex; flex-direction: column; align-items: start; padding: 16px; gap: 8px; }
  .overview-kpi strong { font-size: 24px; }
  .overview-panel, .app-shell .panel { padding: 18px; }
  .overview-server-insights, .primary-system-grid { grid-template-columns: minmax(0,1fr); }
  #settingsForm .settings-head { align-items: start; flex-direction: column; gap: 18px; }
  #settingsForm .settings-head h2 { font-size: 24px; }
  #settingsForm .field-group > summary { padding: 16px; }
  #settingsForm .field-group { scroll-margin-top: 142px; }
  #settingsForm .field-group-body { grid-template-columns: minmax(0,1fr); padding: 18px 16px; gap: 20px; }
  #settingsForm .field-group-body > .field { grid-column: 1; }
  #settingsForm .message-style-option { flex: 1 1 calc(50% - 8px); }
  #settingsForm .protection-section { padding: 16px; }
  #settingsForm .protection-section > div { grid-template-columns: minmax(0,1fr); }
  #settingsForm .save-bar, [dir="rtl"] #settingsForm .save-bar { left: 12px; right: 12px; bottom: 12px; padding: 12px; flex-direction: column; align-items: stretch; gap: 8px; }
  #settingsForm .save-status { font-size: 12px; }
  #settingsForm .save-actions { justify-content: end; }
  #settingsForm .save-actions .button { padding-inline: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================== triva-reference-home.css ===================== */
:root{font-family:'Open Sans',Vazirmatn,sans-serif}
.reference-home{--home-bg:#0b0e10;--home-text:#f0f0fa;--home-muted:#9394a7;--home-line:#292a38;--home-panel:#171820;--home-accent:#5fd9bd;font-family:'Open Sans',Vazirmatn,sans-serif;color:var(--home-text);background:var(--home-bg)!important;overflow:clip;padding-top:var(--home-header-height,88px)}
.reference-home .landing-nav{position:fixed;top:0;left:0;right:0;z-index:150;display:grid;grid-template-columns:1fr auto 1fr;width:100%;max-width:none;min-height:88px;padding:16px max(32px,calc((100% - 1450px)/2));gap:36px;background:#0b0e10f2!important;border-bottom:1px solid #ffffff03;backdrop-filter:blur(12px)}
.reference-home .landing-brand{justify-self:start;font-size:27px;font-weight:700}
.reference-home .landing-brand .brand-mark.small{width:52px;height:52px}
.reference-home .landing-links{display:flex;align-items:center;justify-content:center;gap:38px;direction:ltr}
.reference-home .landing-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.reference-home .landing-nav .button{min-height:46px;padding-inline:22px;font-size:15px;font-weight:700}
.reference-home .landing-actions .button.primary{display:inline-flex}
.reference-home .landing-links a,.reference-home .landing-nav-dropdown summary{font-size:16px;font-weight:600;color:var(--home-muted)}
.reference-home .landing-premium-link{display:flex;flex-direction:row-reverse;gap:9px;align-items:center;color:var(--home-accent)!important;white-space:nowrap}
.reference-home .landing-premium-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.landing-nav-dropdown{position:relative}
.landing-nav-dropdown summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;min-height:44px}
.landing-nav-dropdown summary::-webkit-details-marker{display:none}
.landing-nav-dropdown summary>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s}
.landing-nav-dropdown[open] summary>svg{transform:rotate(180deg)}
.landing-nav-dropdown>div{position:absolute;top:calc(100% + 12px);inset-inline-start:0;display:grid;min-width:240px;padding:9px;background:#1b1c26;border:1px solid var(--home-line);border-radius:8px;box-shadow:0 14px 38px #0005}
.reference-home .landing-nav-dropdown>div>a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:5px;color:var(--home-text);font-size:14px}
.landing-nav-dropdown>div>a:hover{background:#ffffff07}
.landing-nav-dropdown>div svg{width:19px;height:19px;fill:var(--home-muted)}
.reference-home .landing-hero{max-width:1100px;min-height:calc(100svh - var(--home-header-height,88px));justify-content:flex-start;padding:74px 24px 105px;gap:0}
.reference-home .landing-copy{max-width:680px;margin:0 auto;text-align:center}
.reference-home .landing-kicker{margin:0 0 47px;padding:10px 21px;color:#85d7c4;border:1px solid #3c6b6055;border-radius:28px;font-size:15px;font-weight:500}
.reference-home .landing-copy h1{max-width:650px;margin:0 auto 42px;white-space:pre-line;font-size:clamp(38px,4vw,56px);font-weight:700;line-height:1.5;color:var(--home-text);letter-spacing:0}
.reference-home .landing-copy>p{max-width:590px;margin:auto;color:var(--home-muted)!important;font-size:19px;font-weight:500;line-height:1.85}
.reference-home .landing-cta{display:flex;flex-direction:row;justify-content:center;gap:20px;margin-top:57px}
.reference-home .landing-cta .button{min-height:58px;padding:15px 28px;font-size:16px;font-weight:700;border-radius:7px!important}
.reference-home .landing-cta .button svg{display:none}
.reference-home .landing-trust{margin-top:23px;font-size:12px;color:var(--home-muted);opacity:.7}
.reference-home #features{width:100%;max-width:1450px;padding:0 30px 40px}
.reference-home #features>.section-heading{max-width:700px;margin:0 auto 30px;text-align:center}
.reference-home #features>.section-heading .eyebrow{font-size:13px}
.reference-home #features>.section-heading h2{font-size:28px;font-weight:600}
.reference-feature-rows{display:grid;gap:0}
.reference-home :is(#features,#pricing,#workflow,#community){scroll-margin-top:calc(var(--home-header-height,88px) + 24px)}
.reference-feature-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(50px,7vw,140px);min-height:520px;padding:64px 0;direction:ltr;scroll-margin-top:calc(var(--home-header-height,88px) + 30px)}
.reference-feature-row.copy-first .reference-feature-copy{grid-column:1;grid-row:1}
.reference-feature-row.copy-first .reference-demo{grid-column:2;grid-row:1}
.reference-feature-row.visual-first .reference-feature-copy{grid-column:2;grid-row:1}
.reference-feature-row.visual-first .reference-demo{grid-column:1;grid-row:1}
.reference-feature-copy{direction:ltr;text-align:start;max-width:620px}
[dir="rtl"] .reference-feature-copy{direction:rtl}
.reference-feature-label{display:flex;align-items:center;gap:20px;margin-bottom:31px;color:var(--home-muted);font-size:16px;font-weight:600}
.reference-feature-symbol{display:grid;place-items:center;flex-shrink:0;width:53px;height:53px;color:var(--home-muted);background:radial-gradient(circle,#262833,#13141b);border:1px solid #383947;border-radius:5px;box-shadow:inset 0 0 20px #0005}
.reference-feature-symbol svg{width:26px;height:26px;fill:currentColor}
.reference-feature-copy h2{max-width:620px;margin:0 0 25px;line-height:1.5;font-size:clamp(27px,2.6vw,38px);font-weight:700;letter-spacing:0;color:#fafaff}
.reference-feature-copy>p{margin:0 0 34px;line-height:1.85;font-size:18px;font-weight:500;color:var(--home-muted)!important}
.reference-feature-copy>.button{min-height:61px;padding:14px 30px;font-size:17px;font-weight:700;border-color:var(--home-line)!important;background:#171820!important;white-space:normal;text-align:center}
.reference-demo{position:relative;min-width:0;min-height:378px;padding:53px 55px 38px;overflow:visible;border:1px solid var(--home-line);border-radius:15px;background:radial-gradient(ellipse at 80% 18%,#5fd9bd09,transparent 70%),linear-gradient(#171820aa,#0b0e10);direction:ltr;isolation:isolate}
.reference-demo::before{position:absolute;z-index:-1;inset:0;border-radius:inherit;content:"";background-image:linear-gradient(#ffffff02 1px,transparent 1px),linear-gradient(90deg,#ffffff02 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.reference-demo::after{position:absolute;z-index:2;bottom:0;left:0;right:0;height:75px;content:"";background:linear-gradient(transparent,var(--home-bg));pointer-events:none}
.demo-spark{position:absolute;z-index:3;top:17px;right:20px;width:39px;height:39px;fill:var(--home-accent)}
.reference-demo[data-demo="botSender"] .demo-spark,.reference-demo[data-demo="tempChannels"] .demo-spark{fill:#38df89}
.sample-conversation{padding:23px;border:1px solid #353746;border-radius:9px;background:linear-gradient(145deg,#181d20,#181922);box-shadow:0 18px 35px #0002}
.sample-message{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
.sample-message>img{width:44px;height:44px;border-radius:50%;object-fit:contain;background:#0f1016}
.sample-message-body{min-width:0}
.sample-author{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:23px;color:#999caf;font-size:15px}
.sample-author strong{font-weight:500;font-size:16px}
.sample-author small{font-size:11px;color:#999caf}
.sample-bot-tag{padding:1px 5px;border-radius:2px;background:#2f917a;color:#d9fff6;font-size:10px;font-weight:700}
.sample-message-body>p{margin:5px 0 12px;font-size:14px;color:#e4e4eb;line-height:1.65}
.sample-line{display:block;max-width:100%;width:var(--sample-width);height:13px;margin:9px 0;border-radius:8px;background:#3d3f4d}
.sample-welcome-image{display:grid;grid-template-columns:57px 1fr;align-items:center;gap:26px;padding:25px 20px;margin-top:10px;min-height:108px;background:linear-gradient(145deg,#2a2c38,#181d20);border-radius:5px}
.sample-avatar-placeholder{width:57px;height:57px;border:5px solid #191b25;border-inline-start-color:transparent;border-radius:50%;background:#272936}
.sample-embed{margin-top:13px;padding:17px;border-inline-start:3px solid var(--home-accent);border-radius:3px;background:#22232e;font-size:14px;line-height:1.65}
.sample-embed strong{color:#d4d5df;font-size:14px;font-weight:500}
.sample-embed>p{margin:9px 0;font-size:13px;color:#adaebe}
.sample-embed-image{width:80%;height:70px;margin-top:18px;border-radius:5px;background:linear-gradient(145deg,#30323d,#252630)}
.sample-select{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:10px 0;padding:13px 15px;background:#15161e;border-radius:4px;color:#8f92a7;font-size:13px}
.sample-role-menu{width:86%;margin:0 0 -23px 18%;position:relative;z-index:3;overflow:hidden;border:1px solid #353746;border-radius:6px;background:#1b1d28;box-shadow:0 15px 28px #0004}
.sample-role-menu>div{display:flex;align-items:center;gap:11px;padding:14px;font-size:13px;color:#ccced8}
.sample-role-menu>div:nth-child(2){background:#252731}
.sample-role-dot{display:block;flex-shrink:0;width:16px;height:16px;border-radius:50%}
.role-gold{background:#57d6b8}.role-blue{background:#598bbd}.role-green{background:#53ab86}
.sample-reply{display:flex;gap:16px;align-items:center;margin-top:31px;opacity:.42}
.sample-user-avatar{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:#333541}
.sample-reply>div{flex:1}
.sample-reply .sample-line{height:11px}
.sample-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.sample-controls>span{display:flex;gap:7px;align-items:center;padding:7px 10px;border:1px solid #464753;background:#353643;border-radius:4px;color:#d1d2df;font-size:11px}
.sample-controls svg{width:14px;height:14px;fill:currentColor}.sample-controls b{font-weight:500}
.sample-voice-channel{display:flex;align-items:center;gap:10px;margin:20px 0;padding:15px;background:#252732;border-radius:5px;color:#b3b6c9}
.sample-voice-channel svg{width:22px;height:22px;fill:currentColor}
.sample-voice-channel strong{font-size:13px;font-weight:500}
.sample-protection>strong{display:flex;align-items:center;gap:8px}
.sample-protection>strong>svg{width:19px;height:19px;fill:#5fd9bd}
.demo-caption{position:absolute;z-index:3;bottom:8px;inset-inline-start:0;width:100%;text-align:center;color:#686b7c;font-size:10px}
.reference-more-systems{padding:40px 0 70px;text-align:center}
.reference-more-systems h3{font-size:24px;font-weight:600;margin:0 0 28px}
.reference-more-systems>div{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.reference-more-systems a{display:flex;gap:10px;align-items:center;min-height:45px;padding:8px 14px;border:1px solid var(--home-line);border-radius:6px;color:var(--home-muted);font-size:13px}
.reference-more-systems a:hover{color:var(--home-text);background:var(--home-panel)}
.reference-more-systems .module-visual{width:24px;height:24px;background:transparent;border:0;color:var(--home-muted)}
.reference-home .reference-banner{position:relative;display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);direction:ltr;align-items:center;width:calc(100% - 60px);max-width:1450px;min-height:350px;margin:50px auto 100px;padding:35px 70px;overflow:visible;background:linear-gradient(120deg,#29a387,#4dd1b2)!important;border:0!important;border-radius:12px!important;isolation:isolate}
.reference-home .reference-banner::after{display:none}
.reference-banner::before{position:absolute;inset:0;z-index:-1;content:"";border-radius:inherit;background:linear-gradient(150deg,transparent 48%,#ffffff0d 48% 74%,transparent 74%);pointer-events:none}
.reference-banner-mascot{position:relative;min-width:0;max-width:330px;align-self:center}
.reference-banner-mascot>img{display:block;width:100%;height:auto;transform:scale(1.16);border-radius:50%;box-shadow:0 14px 40px #0e453844}
.reference-banner-copy{direction:ltr;text-align:start;padding-inline-start:45px}
[dir="rtl"] .reference-banner-copy{direction:rtl;text-align:start}
.reference-home .reference-banner-copy h2{margin:0 0 22px;color:#fffaf0;line-height:1.5;font-size:clamp(28px,3vw,41px);font-weight:700}
.reference-home .reference-banner-copy>p:not(.eyebrow){margin:0 0 26px;color:#cefff4!important;font-size:18px;line-height:1.8}
.reference-banner-copy .eyebrow{display:none}
.reference-home .reference-banner-copy .button.primary{min-height:58px;padding:14px 28px;background:#a2fce733!important;border-color:transparent!important;color:#fff!important;font-weight:700;font-size:16px}
.banner-orbit{position:absolute;display:grid;place-items:center;width:58px;height:58px;background:#3b3e54;border:1px solid #cbd2ef;border-radius:50%;box-shadow:0 8px 20px #0003;animation:reference-orbit-float 6s ease-in-out infinite}
.banner-orbit svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.8}
.banner-orbit.orbit-a{top:-25px;left:10px;background:#49809b}.banner-orbit.orbit-b{right:-10px;top:35px;background:#65569b;animation-delay:-3s}
.reference-home .pricing-section{max-width:1240px;padding:30px 30px 90px}
.reference-home .pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.reference-home .pricing-card{position:relative;display:flex;flex-direction:column;min-height:540px;padding:44px 32px 32px;overflow:visible;border:1px solid var(--home-line)!important;background:#171820!important;border-radius:6px!important;box-shadow:none!important}
.reference-home .pricing-card h3{margin:0 0 14px;font-size:27px;line-height:1.5;font-weight:600;color:#fff}
.reference-home .pricing-card>p:not(.eyebrow){margin:0 0 20px;font-size:16px;line-height:1.85;color:var(--home-muted)!important}
.reference-home .pricing-card-top{height:0;min-height:0;margin:0;padding:0}
.reference-home .pricing-card>.eyebrow,.reference-home .pricing-icon,.reference-home .plan-badge:not(.recommended){display:none}
.reference-home .pricing-card.featured{border-color:#3d786a!important}
.reference-home .pricing-card .recommended{position:absolute;top:-23px;inset-inline-start:24px;border:5px solid #2d2920;border-radius:28px;padding:7px 16px;background:#5fd9bd;color:#0d241f;font-size:15px;font-weight:700}
.reference-plan-price{display:grid;gap:7px;margin:18px 0 7px}
.reference-plan-price strong{font-size:30px;font-weight:600;line-height:1.55;color:#fff}
.reference-plan-price small{font-size:12px;line-height:1.8;color:var(--home-muted)}
.reference-home .plan-benefits{padding:0;margin:24px 0 35px;list-style:none;display:grid;gap:14px;color:var(--home-muted);font-size:15px;line-height:1.7}
.reference-home .plan-benefits li{display:flex;gap:12px;align-items:start}
.reference-home .plan-benefits li::before{content:'✓';position:static;display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;margin-top:1px;background:#272936;border-radius:50%;color:#b2accd;font-size:13px}
.reference-home .plan-benefits li::after{content:none}
.reference-home .plan-action{margin-top:auto;min-height:58px;padding:15px;font-size:16px;font-weight:700}
.reference-home .workflow-section,.reference-home .community-section{max-width:1240px;padding-block:70px}
.reference-home .landing-footer{width:100%;max-width:1450px;margin:auto;padding:32px 30px;border-top:1px solid var(--home-line);flex-wrap:wrap;gap:20px}
.reference-home .reveal{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.reference-home .reference-feature-row.reveal:not(.visible){opacity:0;transform:translateY(22px)}
@keyframes reference-orbit-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media(max-width:1100px){.reference-home .landing-nav{padding-inline:24px;gap:20px}.reference-home .landing-links{gap:22px}.reference-feature-row{gap:45px;min-height:480px}.reference-demo{padding:40px 26px 36px}.sample-conversation{padding:17px}.reference-home .reference-banner{margin-inline:30px;padding:35px 42px}.reference-home .pricing-grid{gap:18px}.reference-home .pricing-card{padding-inline:24px}}
@media(max-width:800px){.reference-home .landing-nav{grid-template-columns:1fr auto;gap:15px;min-height:80px}.reference-home .landing-links{grid-column:1/-1;grid-row:2;justify-self:center;gap:28px}.reference-home .landing-actions{grid-column:2;grid-row:1}.reference-home .landing-hero{min-height:650px;padding:60px 24px 90px}.reference-home .landing-copy h1{font-size:44px}.reference-feature-row{gap:26px}.reference-feature-copy h2{font-size:27px}.reference-feature-copy>p{font-size:16px}.reference-demo{padding:40px 15px 36px;min-height:330px}.sample-conversation{padding:14px}.sample-message{grid-template-columns:34px minmax(0,1fr);gap:9px}.sample-message>img{width:34px;height:34px}.sample-author{gap:5px}.sample-author strong{font-size:12px}.sample-author small{font-size:9px}.sample-welcome-image{grid-template-columns:38px 1fr;gap:12px;padding:16px 12px}.sample-avatar-placeholder{width:38px;height:38px}.reference-home .pricing-grid{grid-template-columns:minmax(0,1fr);gap:40px;max-width:560px;margin:auto}.reference-home .pricing-card{min-height:470px}.reference-home .reference-banner{grid-template-columns:.65fr 1fr;padding:30px}.reference-banner-copy{padding-inline-start:25px}.reference-home .reference-banner-copy h2{font-size:28px}}
@media(max-width:620px){.reference-home .landing-nav{padding:12px 16px;min-height:76px;gap:10px}.reference-home .landing-brand{font-size:22px}.reference-home .landing-brand .brand-mark.small{width:38px;height:38px}.reference-home .landing-nav .button{min-height:38px;padding-inline:11px;font-size:12px}.reference-home .landing-links{display:flex;gap:25px}.reference-home .landing-links a,.reference-home .landing-nav-dropdown summary{font-size:13px;min-height:35px}.landing-nav-dropdown>div{min-width:200px;inset-inline-start:auto;inset-inline-end:-15px}.reference-home .landing-hero{min-height:620px;padding:51px 20px 82px}.reference-home .landing-kicker{font-size:12px;margin-bottom:33px;padding:8px 16px}.reference-home .landing-copy h1{font-size:36px;line-height:1.55;margin-bottom:28px}.reference-home .landing-copy>p{font-size:16px;line-height:1.85}.reference-home .landing-cta{display:flex;flex-direction:column;margin-top:37px;gap:10px}.reference-home .landing-cta .button{width:100%;min-height:54px;padding-inline:18px;font-size:14px}.reference-home .landing-trust{font-size:11px}.reference-home #features{padding-inline:20px}.reference-home #features>.section-heading h2{font-size:24px}.reference-feature-row{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:34px 0 60px;gap:29px}.reference-feature-label{margin-bottom:23px;font-size:14px;gap:14px}.reference-feature-symbol{width:46px;height:46px}.reference-feature-copy h2{font-size:28px;line-height:1.55}.reference-feature-copy>p{font-size:16px;margin-bottom:25px}.reference-feature-copy>.button{width:100%;min-height:53px;font-size:14px;padding:14px 18px}.reference-demo{min-height:330px;padding:42px 22px 35px}.sample-message{grid-template-columns:36px minmax(0,1fr);gap:10px}.sample-message>img{width:36px;height:36px}.sample-message-body>p{font-size:12px}.sample-embed{padding:12px}.sample-role-menu{width:90%;margin-inline-start:10%}.reference-more-systems{padding-bottom:45px}.reference-more-systems a{font-size:12px;padding:8px 10px}.reference-home .reference-banner{display:flex;flex-direction:column;min-height:0;margin:25px 20px 65px;padding:35px 24px;gap:33px;overflow:hidden}.reference-banner-mascot{max-width:190px;margin:15px auto}.reference-banner-mascot>img{transform:none}.reference-banner-copy{padding:0;text-align:center!important}.reference-home .reference-banner-copy h2{font-size:29px}.reference-home .reference-banner-copy>p:not(.eyebrow){font-size:16px}.reference-home .reference-banner-copy .button.primary{width:100%;min-height:52px;font-size:14px}.banner-orbit{width:43px;height:43px}.banner-orbit svg{width:21px;height:21px}.reference-home .pricing-section{padding-inline:20px}.reference-home .pricing-card{padding:35px 25px 25px;min-height:470px}.reference-home .pricing-card h3{font-size:26px}.reference-home .workflow-section,.reference-home .community-section{padding-block:45px}.reference-home .landing-footer{padding:25px 20px}}
@media(prefers-reduced-motion:reduce){.reference-home .reference-feature-row.reveal:not(.visible){opacity:1;transform:none}.reference-home .reveal{transition:none}.banner-orbit{animation:none}}

/* ===================== clan-workspace.css ===================== */
.clan-workspace { grid-column:1/-1; }
[data-clan-message-editor] input[type="color"] { width:64px; min-width:64px; max-width:64px; height:40px; padding:4px; cursor:pointer; border-radius:8px; }
.clan-workspace .panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.clan-workspace details { border:1px solid var(--line,#34302a); border-radius:10px; padding:16px; margin-block:16px; }
.clan-workspace summary { cursor:pointer; font-weight:700; margin-bottom:12px; }
.clan-create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-block:16px; }
.clan-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.clan-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px; white-space:normal; text-align:start; }
.clan-card span,.clan-workspace p { color:var(--muted,#a7a4a0); }
.clan-detail { border-top:1px solid var(--line,#34302a); margin-top:24px; padding-top:24px; }
.clan-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.clan-metrics>div { display:grid; gap:8px; border:1px solid var(--line,#34302a); border-radius:8px; padding:16px; }
.clan-metrics strong { font-size:24px; color:#37d4af; }
.clan-workspace .clan-table { overflow-x:auto; }
.clan-workspace .clan-row { grid-template-columns:minmax(170px,2fr) repeat(2,minmax(70px,1fr)); }
@media(max-width:620px) { .clan-create-grid {grid-template-columns:1fr;} .clan-metrics{grid-template-columns:repeat(2,minmax(0,1fr));} .clan-cards{grid-template-columns:1fr;} }

/* ===================== overview.css ===================== */
/* Overview v2: compact server strip, trend KPIs, growth, support, leaderboards and peak hours */
.overview-v2{display:grid;gap:16px}
.overview-v2 .ov-strip{display:flex;flex-wrap:wrap;align-items:center;gap:18px 20px;padding:18px 22px}
.ov-strip-id{display:flex;align-items:center;gap:12px;min-width:0}
.ov-strip-id .entity-avatar{flex:0 0 46px;width:46px;height:46px;border-radius:13px}
.ov-strip-id strong{display:block;font-size:17px;line-height:1.3}
.ov-strip-id small{color:#8a8b9c;font-size:12px}
.ov-strip-facts{display:flex;flex:1;flex-wrap:wrap;gap:8px}
.ov-fact{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border:1px solid #ffffff10;border-radius:999px;background:#ffffff08;color:#c9c9d6;font-size:12.5px}
.ov-fact b{color:var(--t-accent, #9fdcc8);font-weight:700}
.ov-fact.warn{border-color:#f59e0b55;color:#fbbf24}
.ov-dot{width:7px;height:7px;border-radius:50%;background:#6b7280}
.ov-dot.ok{background:#4ade80;box-shadow:0 0 0 3px #4ade8026}
.ov-strip-actions{display:flex;flex-wrap:wrap;gap:8px}
.ov-trend{color:#8a8b9c}
.ov-trend b{font-weight:700}
.ov-up{color:#4ade80!important}
.ov-down{color:#f87171!important}
.ov-chip{padding:4px 10px;border:1px solid #ffffff12;border-radius:999px;background:#ffffff0a;color:#c9c9d6;font-size:12px;white-space:nowrap}
.ov-chip:empty{display:none}
.ov-chip.ov-up{border-color:#4ade8033;background:#4ade8014}
.ov-chip.ov-down{border-color:#f8717133;background:#f8717114}
.ov-muted{color:#8a8b9c;font-size:12px}
.ov-empty{margin:14px 0 0;color:#8a8b9c;font-size:12.5px;line-height:1.7}
.overview-v2 .overview-intelligence{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.ov-growth-bars{display:flex;align-items:flex-end;gap:10px;height:170px;margin:22px 0 10px;padding:0 6px;border-bottom:1px dashed #ffffff14}
.ov-growth-bars>div{position:relative;display:grid;flex:1;grid-template-columns:1fr 1fr;align-items:end;gap:3px;height:100%;padding-bottom:4px}
.ov-growth-bars span{min-height:2px;height:var(--h,2px);border-radius:4px 4px 1px 1px}
.ov-growth-bars small{position:absolute;bottom:-22px;left:0;right:0;color:#8a8b9c;font-size:11px;text-align:center}
.ov-growth-bars .join,.ov-legend i.join{background:var(--t-accent, #9fdcc8)}
.ov-growth-bars .leave,.ov-legend i.leave{background:#5b6274}
.ov-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px;color:#a9aabb;font-size:12.5px}
.ov-legend span{display:inline-flex;align-items:center;gap:6px}
.ov-legend i{width:9px;height:9px;border-radius:3px}
.ov-legend b{color:#e6f1ef}
.overview-v2 .overview-server-insights .metric-pairs{grid-template-columns:1fr 1fr}
.ov-gold{color:var(--t-accent, #9fdcc8)!important}
.ov-leader-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ov-bottom-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.ov-guard-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr);gap:16px}
.ov-leader ol{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.ov-leader li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;overflow:hidden;border-radius:10px;background:#ffffff05}
.ov-leader li.with-avatar{grid-template-columns:24px 26px minmax(0,1fr) auto}
.ov-leader li img,.ov-leader li .entity-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;font-size:11px}
.ov-leader li i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w,0%);background:linear-gradient(90deg,#5fd9bd1a,#5fd9bd05);pointer-events:none}
[dir="rtl"] .ov-leader li i{background:linear-gradient(270deg,#5fd9bd1a,#5fd9bd05)}
.ov-leader li b{position:relative;color:var(--t-accent, #9fdcc8);font-size:13px}
.ov-leader li span{position:relative;overflow:hidden;font-size:13.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.ov-leader li em{position:relative;color:#9394a7;font-size:12px;font-style:normal;white-space:nowrap}
.ov-heat-grid{display:grid;grid-template-columns:56px repeat(24,minmax(0,1fr));align-items:center;gap:3px;margin-top:18px}
.ov-heat-grid small{overflow:hidden;color:#8a8b9c;font-size:11px;white-space:nowrap}
.ov-heat-grid i{aspect-ratio:1;border-radius:3px;background:rgba(159,220,200,var(--a,.06))}
.ov-heat-empty{grid-column:1/-1}
.ov-leader li.ov-empty-row{display:block;padding:0;background:none}
.ov-heat-grid em{color:#6f7085;font-size:10px;font-style:normal;text-align:center}
.overview-v2 .activity-panel .audit-list{display:block;margin-top:10px}
.ov-audit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #ffffff0a}
.ov-audit:last-child{border-bottom:0}
.ov-tag{padding:3px 9px;border-radius:7px;background:#ffffff0a;color:#c9c9d6;font-size:11.5px;white-space:nowrap}
.ov-audit strong{overflow:hidden;font-size:13.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.ov-audit time{color:#8a8b9c;font-size:12px;white-space:nowrap}
/* Phase 4: text/voice switch, staff and protection feeds, clan stats, special roles */
.ov-leader header,.ov-feed header,.ov-roles header{gap:12px}
.ov-seg{display:inline-flex;flex:0 0 auto;gap:2px;padding:3px;border:1px solid #ffffff10;border-radius:10px;background:#ffffff06}
.ov-seg button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:0;border-radius:7px;background:none;color:#8a8b9c;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.ov-seg button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ov-seg button:hover{color:#d9d9e3}
.ov-seg button[aria-pressed="true"]{background:#9fdcc81f;color:var(--t-accent, #9fdcc8)}
.ov-seg button:focus-visible{outline:2px solid color-mix(in srgb,var(--t-accent,#9fdcc8) 50%,transparent);outline-offset:1px}
.ov-feed-list{display:grid;margin-top:12px}
.ov-feed-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid #ffffff0a}
.ov-feed-item:last-child{border-bottom:0}
.ov-feed-item .entity-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;font-size:12px;box-shadow:0 0 0 2px #ffffff10}
.ov-feed-item.severe .entity-avatar{box-shadow:0 0 0 2px #f8717166}
.ov-feed-item.guard .entity-avatar{box-shadow:0 0 0 2px color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent)}
.ov-feed-item>div{min-width:0}
.ov-feed-item strong,.ov-feed-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-feed-item strong{font-size:13.5px;font-weight:600}
.ov-feed-item small{margin-top:2px;color:#9394a7;font-size:12px}
.ov-feed-item.severe small{color:#f0a3a3}
.ov-feed-item time,.ov-role-list time{color:#8a8b9c;font-size:11.5px;white-space:nowrap}
.ov-leader li.ov-clan{grid-template-columns:24px minmax(0,1fr);padding:11px 12px}
.ov-clan>div{position:relative;min-width:0}
.ov-clan>div>span{display:block;overflow:hidden;font-size:13.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.ov-leader li.ov-clan small{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;color:#9394a7;font-size:11.5px}
.ov-leader li.ov-clan small span{display:inline-flex;align-items:center;gap:4px;overflow:visible;font-size:11.5px;font-weight:500;white-space:nowrap}
.ov-clan small svg{width:13px;height:13px;fill:none;stroke:var(--t-accent, #9fdcc8);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ov-role-total{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.ov-role-total strong{color:var(--t-accent, #9fdcc8);font-size:34px;font-weight:700;line-height:1}
.ov-role-total span{color:#a9aabb;font-size:13px}
.ov-role-list{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.ov-role-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#ffffff05}
.ov-role-dot{width:12px;height:12px;border-radius:50%;background:var(--role,#99aab5);box-shadow:0 0 0 3px #ffffff0a}
.ov-role-list div{min-width:0}
.ov-role-list strong,.ov-role-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-role-list strong{font-size:13px;font-weight:600}
.ov-role-list small{color:#8a8b9c;font-size:11.5px}
@media (max-width:1180px){
  .ov-guard-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-guard-row>:last-child{grid-column:1/-1}
  .ov-bottom-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-bottom-row .activity-panel{grid-column:1/-1}
  .ov-leader-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-leader-row .ov-heat{grid-column:1/-1}
}
@media (max-width:900px){
  .overview-v2 .overview-intelligence,.ov-bottom-row,.ov-leader-row,.ov-guard-row{grid-template-columns:1fr}
  .ov-guard-row>:last-child,.ov-bottom-row .activity-panel{grid-column:auto}
  .ov-strip-actions{width:100%}
  .ov-strip-actions .button{flex:1}
  .ov-heat-grid{grid-template-columns:44px repeat(24,minmax(0,1fr));gap:2px}
}
@media (max-width:480px){
  .ov-leader header,.ov-feed header,.ov-roles header{flex-wrap:wrap}
  .ov-seg{width:100%}
  .ov-seg button{flex:1;justify-content:center}
  .ov-feed-item{grid-template-columns:28px minmax(0,1fr)}
  .ov-feed-item .entity-avatar{width:28px;height:28px}
  .ov-feed-item time{grid-column:2}
}

/* ===================== nav.css ===================== */
/* Sidebar navigation: System card with labelled sections, then the main systems */
/* The menu scrolls as one column; no entry may shrink, otherwise the open System card collapses on short screens. */
html .app-shell #nav{display:flex;flex-direction:column}
html .app-shell #nav>*{flex-shrink:0}
#nav .system-nav-group{margin:2px 0 4px;border:1px solid #ffffff0d;border-radius:12px;background:#ffffff04}
#nav .system-nav-group[open]{background:#ffffff06}
#nav .system-nav-group>.system-nav-trigger{border-radius:11px 11px 0 0!important}
#nav .system-nav-group:not([open])>.system-nav-trigger{border-radius:11px!important}
#nav .system-nav-group.has-active>.system-nav-trigger{color:#8ff3dc!important}
#nav .system-nav-count{flex:0 0 auto;min-width:34px;padding:2px 8px;border:1px solid #9fdcc833;border-radius:999px;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent);color:var(--t-accent, #9fdcc8);font-size:11px;font-weight:700;line-height:1.5;text-align:center}
#nav .system-nav-count:empty{display:none}
#nav .system-nav-items{display:grid;gap:1px;margin:0!important;padding:0 6px 8px!important;border:0!important;border-top:1px solid #ffffff0a!important}
#nav .system-nav-section{display:flex;align-items:center;gap:8px;margin:0;padding:12px 8px 5px;color:#7d7e90;font-size:10.5px;font-weight:700;letter-spacing:.02em}
#nav .system-nav-section::after{content:"";flex:1;height:1px;background:#ffffff0a}
#nav .nav-item.nested{min-height:34px;padding:7px 10px!important;font-size:12.5px}
#nav .nav-item.nested svg{width:16px;height:16px}
#nav .nav-item .status-dot{flex:0 0 auto;margin-inline-start:auto}
#nav .nav-item:not(.active):has(.status-dot:not(.on):not(.locked))>span[data-i18n]{opacity:.62}
#nav .nav-heading-standalone{margin-top:6px}
@media (prefers-reduced-motion:reduce){#nav .system-nav-items{animation:none}}
html[data-dashboard-theme="light"] #nav .system-nav-group{border-color:#00000012;background:#0000000a}
html[data-dashboard-theme="light"] #nav .system-nav-items{border-top-color:#00000010!important}
html[data-dashboard-theme="light"] #nav .system-nav-section{color:#738a85}
html[data-dashboard-theme="light"] #nav .system-nav-section::after{background:#00000012}
html[data-dashboard-theme="light"] #nav .system-nav-count{color:#129a7a;background:#9fdcc826}
/* Sidebar header: larger bot avatar, single-row server switcher, primary destinations side by side */
html .app-shell .sidebar>.brand{align-items:center;gap:12px;min-height:0;padding:2px 8px 14px}
html .app-shell .brand .brand-mark.small{width:46px;height:46px;flex-basis:46px}
html .app-shell .brand .brand-mark.small img{width:100%;height:100%;object-fit:cover;border-radius:50%}
html .app-shell .brand-copy strong{font-size:21px;line-height:1.1}
html .app-shell .workspace-switcher{display:flex;align-items:center;gap:10px;min-height:0;margin-bottom:12px;padding:8px 10px;border-radius:10px!important}
html .app-shell .workspace-switcher>.entity-avatar{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background-size:cover;background-position:center}
html .app-shell .workspace-switcher>span:not(.entity-avatar){display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
html .app-shell .workspace-switcher small{display:none}
html .app-shell .workspace-switcher strong{max-width:100%;overflow:hidden;font-size:13.5px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
html .app-shell .workspace-switcher em{padding:1px 7px;border-radius:999px;background:#9fdcc817;color:var(--t-accent, #9fdcc8);font-size:10.5px;font-style:normal;font-weight:600;line-height:1.6}
html .app-shell .workspace-switcher>svg{flex:0 0 16px;width:16px;height:16px}
html .app-shell #nav .nav-primary{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}
html .app-shell #nav .nav-primary .nav-item{flex-direction:column;justify-content:center;gap:5px;min-height:58px;padding:8px 6px!important;border:1px solid #ffffff0d!important;border-radius:10px!important;background:#ffffff05!important;font-size:12px;text-align:center}
html .app-shell #nav .nav-primary .nav-item svg{width:18px;height:18px}
html .app-shell #nav .nav-primary .nav-item.active{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent)!important;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent)!important;box-shadow:none!important}
html .app-shell #nav .nav-primary .nav-item span{overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}
html[data-dashboard-theme="light"] .app-shell #nav .nav-primary .nav-item{border-color:#00000012!important;background:#0000000a!important}
html[data-dashboard-theme="light"] .app-shell .workspace-switcher em{color:#129a7a;background:#9fdcc826}

/* ===================== compact.css ===================== */
/* Compact density for laptop screens and Windows display scaling (small viewport heights or widths).
   Only spacing and type sizes shrink; layout and colours stay the same. Phones keep their own layout. */
@media (min-width:901px) and (max-height:900px), (min-width:901px) and (max-width:1600px){
  html .app-shell .sidebar{padding:14px 10px 8px}
  html .app-shell #nav{gap:2px}
  html .app-shell .nav-heading{padding:12px 12px 5px}
  html .app-shell .nav-item,html .app-shell .system-nav-trigger{min-height:36px;padding:7px 11px!important;font-size:12.5px}
  html .app-shell .nav-item svg,html .app-shell .system-nav-icon{width:17px;height:17px}
  html .app-shell #nav .nav-item.nested{min-height:30px;padding:5px 10px!important;font-size:12px}
  html .app-shell #nav .nav-item.nested svg{width:15px;height:15px}
  html .app-shell #nav .system-nav-section{padding:9px 8px 3px}
  html .app-shell .sidebar-footer{padding:10px 10px 4px}
  html .app-shell .topbar{min-height:60px;padding-block:6px}
  html .app-shell .main{padding-inline:24px;padding-bottom:56px}
  html .app-shell #overviewPage{padding-top:18px;gap:12px}
  html .app-shell .overview-panel{padding:16px 18px}
  html .app-shell .overview-kpi{padding:15px}
  html .app-shell .overview-kpis,html .app-shell .overview-intelligence,html .app-shell .overview-server-insights,html .app-shell .ov-leader-row,html .app-shell .ov-guard-row,html .app-shell .ov-bottom-row{gap:12px}
}

/* ===================== settings.css ===================== */
/* Unified system settings pages: one header card, a side list of sections, section cards with icons,
   one style for fields, pickers, toggles and rows. Loaded last so it wins over the older layered styles. */
html .app-shell #settingsForm{--set-line:#ffffff0d;--set-dim:#7d7e90;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1240px;margin-inline:auto}
html .app-shell #settingsForm.has-section-nav{grid-template-columns:250px minmax(0,1fr);column-gap:18px;align-items:start}

/* Header */
html .app-shell #settingsForm .settings-head{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:0;padding:18px 20px!important;border:1px solid var(--set-line)!important;border-radius:14px!important;background:var(--ui-panel)!important}
html .app-shell #settingsForm .settings-head>div{flex:1;min-width:0}
html .app-shell #settingsForm .settings-head-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:12px;background:var(--ui-accent-soft);color:var(--ui-accent)}
html .app-shell #settingsForm .settings-head-icon:empty{display:none}
html .app-shell #settingsForm .settings-head-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .app-shell #settingsForm .settings-head .eyebrow{display:none}
html .app-shell #settingsForm .settings-head h2{margin:0;font-size:21px;line-height:1.35}
html .app-shell #settingsForm .settings-head p.muted{margin:3px 0 0;font-size:13px;line-height:1.7}
html .app-shell #settingsForm #moduleToggleWrap{flex:0 0 auto;gap:10px;padding:8px 12px;border-radius:10px;font-weight:600}

/* Section list */
html .app-shell #settingsForm .settings-sections{grid-column:1;position:sticky;top:88px;display:flex;flex-direction:column;gap:2px;max-width:none;margin:0;padding:8px;overflow:visible;border:1px solid var(--set-line);border-radius:14px;background:var(--ui-panel)}
html .app-shell #settingsForm .settings-sections.hidden{display:none}
html .app-shell #settingsForm .settings-sections-title{margin:0;padding:6px 10px;color:var(--set-dim);font-size:11px;font-weight:700}
html .app-shell #settingsForm .settings-sections button{display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 10px;border:0;border-radius:9px;background:transparent;color:var(--ui-muted);font-size:13px;text-align:start;white-space:nowrap}
html .app-shell #settingsForm .settings-sections button span{overflow:hidden;text-overflow:ellipsis}
html .app-shell #settingsForm .settings-sections button svg{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .app-shell #settingsForm .settings-sections button:hover{background:var(--ui-hover);color:var(--ui-text)}
html .app-shell #settingsForm .settings-sections button[aria-current]{background:var(--ui-accent-soft);color:var(--ui-accent-hover);font-weight:600}
html .app-shell #settingsForm .settings-sections button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
html .app-shell #settingsForm.has-section-nav #formFields{grid-column:2}
html .app-shell #settingsForm #formFields{gap:16px;min-width:0}

/* Section tabs: the side list shows one section at a time (icon, title and hint per tab) */
html .app-shell #settingsForm.section-tabs .settings-sections{gap:4px;padding:10px}
html .app-shell #settingsForm.section-tabs .settings-sections button{position:relative;align-items:flex-start;gap:11px;min-height:0;padding:10px;border:1px solid transparent;border-radius:11px;white-space:normal}
html .app-shell #settingsForm.section-tabs .settings-sections button .section-tab-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:#ffffff08;color:var(--set-dim);transition:background-color .15s,color .15s}
html .app-shell #settingsForm.section-tabs .settings-sections button .section-tab-icon svg{width:16px;height:16px}
html .app-shell #settingsForm.section-tabs .settings-sections .section-tab-copy{display:grid;gap:2px;min-width:0;padding-top:1px}
html .app-shell #settingsForm.section-tabs .settings-sections .section-tab-copy b{overflow:hidden;color:var(--ui-text);font-size:13.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #settingsForm.section-tabs .settings-sections .section-tab-copy small{display:-webkit-box;overflow:hidden;color:var(--set-dim);font-size:11.5px;font-weight:400;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
html .app-shell #settingsForm.section-tabs .settings-sections button:hover{background:var(--ui-hover)}
html .app-shell #settingsForm.section-tabs .settings-sections button[aria-current]{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent);background:var(--ui-accent-soft)}
html .app-shell #settingsForm.section-tabs .settings-sections button[aria-current] .section-tab-icon{background:var(--ui-accent);color:#14181b}
html .app-shell #settingsForm.section-tabs .settings-sections button[aria-current] .section-tab-copy b{color:var(--ui-accent-hover)}
html .app-shell #settingsForm.section-tabs .settings-sections button[aria-current]::before{content:"";position:absolute;inset-block:12px;inset-inline-start:-11px;width:3px;border-radius:3px;background:var(--ui-accent)}
/* Only the chosen section is shown, always open, with a plain header (no collapse control). */
html .app-shell #settingsForm.section-tabs #formFields>.tab-hidden{display:none!important}
html .app-shell #settingsForm.section-tabs #formFields>.field-group>summary{pointer-events:none;cursor:default}
html .app-shell #settingsForm.section-tabs #formFields>.field-group>summary:hover{background:none}
html .app-shell #settingsForm.section-tabs #formFields>.field-group>summary .group-toggle{display:none}
html .app-shell #settingsForm.section-tabs #formFields>.field-group>summary .section-icon{flex-basis:40px;width:40px;height:40px;background:var(--ui-accent-soft)}
html .app-shell #settingsForm.section-tabs #formFields>.field-group>summary .section-heading h3{font-size:17px}
html .app-shell #settingsForm.section-tabs #formFields>.field-group>summary .section-heading p{font-size:12.5px}
/* Previous / next at the end of each section */
html .app-shell #settingsForm .section-pager{display:none}
html .app-shell #settingsForm.section-tabs .section-pager{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--set-line)}
html .app-shell #settingsForm .section-pager-button{display:grid;grid-template-columns:auto auto;grid-template-areas:"label icon" "name icon";align-items:center;column-gap:10px;min-width:0;padding:8px 14px;border:1px solid var(--set-line);border-radius:10px;background:#ffffff05;color:var(--ui-text);text-align:start;cursor:pointer;transition:border-color .15s,background-color .15s}
html .app-shell #settingsForm .section-pager-button.previous{grid-template-areas:"icon label" "icon name"}
html .app-shell #settingsForm .section-pager-button.next{margin-inline-start:auto}
html .app-shell #settingsForm .section-pager-button small{grid-area:label;color:var(--set-dim);font-size:11px}
html .app-shell #settingsForm .section-pager-button b{grid-area:name;overflow:hidden;max-width:220px;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #settingsForm .section-pager-button svg{grid-area:icon;width:18px;height:18px;fill:none;stroke:var(--ui-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html .app-shell #settingsForm .section-pager-button:hover{border-color:var(--ui-accent);background:var(--ui-accent-soft)}

/* Section cards */
/* dashboard-quality.css sets contain:layout paint on sections; paint containment clipped open pickers at the card edge. */
html .app-shell #settingsForm .field-group{contain:none!important;border:1px solid var(--set-line)!important;border-radius:14px!important;background:var(--ui-panel)!important;scroll-margin-top:96px}
html .app-shell #settingsForm .field-group>summary{gap:12px;min-height:0;padding:15px 20px}
html .app-shell #settingsForm .field-group[open]>summary{border-bottom:1px solid var(--set-line)}
html .app-shell #settingsForm .section-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#ffffff08;color:var(--ui-accent)}
html .app-shell #settingsForm .section-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .app-shell #settingsForm .section-heading{display:grid;flex:1;gap:1px;min-width:0;margin:0!important;text-align:start}
html .app-shell #settingsForm .section-heading h3{flex:none;font-size:15px}
html .app-shell #settingsForm .section-heading p{margin:0;color:var(--set-dim);font-size:12px;line-height:1.5}
html .app-shell #settingsForm .field-group-body{gap:18px 20px;padding:20px}

/* Collapse control: the whole header row opens and closes the section; the end of the row carries a labelled pill
   ("إخفاء" / "عرض") with a chevron, pushed to the far edge so it lines up on every card whatever the title length. */
html .app-shell #settingsForm .field-group>summary{cursor:pointer;transition:background-color .15s}
html .app-shell #settingsForm .field-group>summary:hover{background:#ffffff05}
html .app-shell #settingsForm .field-group:not([open])>summary{border-bottom:0}
html .app-shell #settingsForm .group-toggle{display:inline-flex;flex:none;align-items:center;gap:6px;height:30px;margin-inline-start:auto;padding:0 10px 0 12px;border:1px solid var(--set-line);border-radius:999px;background:#ffffff06;color:var(--set-dim);font-size:12.5px;font-weight:600;white-space:nowrap;transition:border-color .15s,color .15s,background-color .15s}
html .app-shell #settingsForm .group-toggle-closed,html .app-shell #settingsForm .field-group:not([open])>summary .group-toggle-open{display:none}
html .app-shell #settingsForm .field-group:not([open])>summary .group-toggle-closed{display:inline}
html .app-shell #settingsForm .field-group>summary .group-toggle .group-chevron{box-sizing:content-box;flex:none;width:16px!important;height:16px!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:currentColor!important;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
html .app-shell #settingsForm .field-group[open]>summary .group-toggle .group-chevron{transform:rotate(180deg)}
html .app-shell #settingsForm .field-group:not([open])>summary .group-toggle .group-chevron{transform:none}
html .app-shell #settingsForm .field-group>summary:hover .group-toggle{border-color:var(--ui-accent);color:var(--ui-accent);background:var(--ui-accent-soft)}
html .app-shell #settingsForm .field-group:not([open])>summary .group-toggle{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent);color:var(--ui-accent)}
html .app-shell #settingsForm .field-group>summary:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
@media (max-width:560px){html .app-shell #settingsForm .group-toggle{width:30px;padding:0;justify-content:center}html .app-shell #settingsForm .group-toggle>span{display:none!important}}

/* Message style: a compact segmented control instead of a box inside a box */
html .app-shell #settingsForm .message-style-field{gap:8px;padding:0!important;border:0!important;background:transparent!important}
html .app-shell #settingsForm .message-style-heading small{display:none}
html .app-shell #settingsForm .message-style-picker{display:grid!important;width:100%;box-sizing:border-box;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:4px!important;padding:4px!important;border:1px solid var(--ui-border)!important;border-radius:11px!important;background:var(--ui-input)!important}
html .app-shell #settingsForm .message-style-option{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px!important;padding:6px 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;font-size:12.5px}
html .app-shell #settingsForm .message-style-option svg{width:16px;height:16px}
html .app-shell #settingsForm .message-style-option>i{display:none}
html .app-shell #settingsForm .message-style-option.selected{background:var(--ui-accent-soft)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-accent,#9fdcc8) 40%,transparent)}

/* Message preview in the site's own colours, like the showcase on the home and subscriptions pages */
html .app-shell #settingsForm .message-live-preview{position:relative;width:100%;margin:0;overflow:hidden;border:1px solid var(--set-line)!important;border-radius:14px!important;background:radial-gradient(ellipse at 85% 0%,#9fdcc80f,transparent 55%),var(--ui-input)!important;box-shadow:none!important}
html .app-shell #settingsForm .message-live-preview::before{content:attr(aria-label);display:block;padding:12px 18px 0;color:var(--set-dim);font-size:11px;font-weight:700}
html .app-shell #settingsForm .discord-preview-stage{min-height:0;padding:12px 18px 18px;border:0;background:transparent!important}
html .app-shell #settingsForm .discord-preview-message{grid-template-columns:40px minmax(0,1fr);gap:12px;max-width:640px;color:var(--ui-text);font-family:inherit}
html .app-shell #settingsForm .discord-preview-message>img{width:40px;height:40px;box-shadow:0 0 0 2px #9fdcc833}
html .app-shell #settingsForm .discord-preview-author{display:none}
html .app-shell #settingsForm .discord-preview-copy{width:100%}
html .app-shell #settingsForm .discord-preview-plain{color:var(--ui-text);font-size:13px}
html .app-shell #settingsForm .discord-preview-card{width:100%;max-width:520px;margin-top:0;padding:14px 16px!important;border:1px solid var(--set-line)!important;border-radius:10px!important;background:var(--ui-raised)!important}
html .app-shell #settingsForm .discord-preview-card::before{width:3px;background:var(--ui-accent)}
html .app-shell #settingsForm .message-live-preview[data-style="components-v2"] .discord-preview-card::before{display:none}
html .app-shell #settingsForm .discord-preview-card>strong{color:var(--ui-text)}
html .app-shell #settingsForm .discord-preview-card>div{color:var(--ui-muted);font-size:12.5px}
html .app-shell #settingsForm .discord-preview-empty,html .app-shell #settingsForm .discord-preview-image-error{margin-top:8px;padding:10px 12px;border:1px dashed var(--ui-border);border-radius:9px;color:var(--set-dim);font-size:11.5px}

/* Fields */
html .app-shell #settingsForm .field label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
html .app-shell #settingsForm .field-tag{padding:1px 7px;border-radius:999px;background:#ffffff0a;color:var(--set-dim);font-size:10.5px;font-weight:600}
html .app-shell #settingsForm .field small{font-size:11.5px}
html .app-shell #settingsForm .field :is(input:not([type="checkbox"]):not([type="search"]),select,textarea){min-height:42px;padding:10px 12px;border-radius:10px!important;font-size:13px}

/* Channel / role / category picker */
html .app-shell #settingsForm .resource-picker{position:relative;overflow:visible;border-radius:10px!important}
html .app-shell #settingsForm .resource-picker[open]{z-index:30}
/* The list floats over the page so opening it never pushes the other fields around. */
html .app-shell #settingsForm .resource-picker-body{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:30;border:1px solid var(--ui-border)!important;border-radius:12px!important;background:#1a1b22!important;box-shadow:0 18px 40px #0009}
html .app-shell #settingsForm .resource-picker[open]{box-shadow:0 0 0 3px #9fdcc81a!important}
html .app-shell #settingsForm .resource-picker>summary{display:flex;align-items:center;gap:8px;min-height:42px;padding:6px 10px}
html .app-shell #settingsForm .resource-chips{display:flex;flex:1;flex-wrap:wrap;gap:6px;min-width:0}
html .app-shell #settingsForm .resource-placeholder{padding-inline:2px;color:var(--set-dim);font-size:13px;font-weight:500}
html .app-shell #settingsForm .resource-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:28px;padding-inline:9px 4px;border:1px solid #ffffff12;border-radius:8px;background:var(--ui-raised);color:var(--ui-text);font-size:12.5px;font-weight:600}
html .app-shell #settingsForm .resource-chip>span:nth-last-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #settingsForm .resource-chip .resource-option-icon{display:inline-grid;width:auto;height:auto;padding:0;border:0;background:none;color:var(--ui-muted)}
html .app-shell #settingsForm .resource-chip .resource-option-icon svg{width:14px;height:14px}
html .app-shell #settingsForm .resource-role-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--resource-color,#60738b);box-shadow:0 0 0 3px #ffffff08}
html .app-shell #settingsForm .resource-chip-remove{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:6px;color:var(--set-dim);cursor:pointer}
html .app-shell #settingsForm .resource-chip-remove svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
html .app-shell #settingsForm .resource-chip-remove:hover,html .app-shell #settingsForm .resource-chip-remove:focus-visible{background:#ffffff12;color:var(--ui-text);outline:none}
html .app-shell #settingsForm .resource-chevron{flex:0 0 16px;width:16px;height:16px;margin-inline-start:auto;color:var(--set-dim)}
html .app-shell #settingsForm .resource-picker-body{padding:8px}
html .app-shell #settingsForm .resource-search{display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:8px}
html .app-shell #settingsForm .resource-options{display:grid;gap:1px;max-height:280px;margin-top:6px;overflow-y:auto}
html .app-shell #settingsForm .resource-group{display:grid;gap:1px}
html .app-shell #settingsForm .resource-group.hidden{display:none}
html .app-shell #settingsForm .resource-group-title{display:flex;align-items:center;gap:6px;margin:0;padding:8px 10px 4px;color:var(--set-dim);font-size:10.5px;font-weight:700}
html .app-shell #settingsForm .resource-group-title svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
html .app-shell #settingsForm .resource-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:38px;padding:7px 10px;border:0!important;border-radius:8px;background:transparent!important}
html .app-shell #settingsForm .resource-option:hover{background:#ffffff07!important}
html .app-shell #settingsForm .resource-option.selected{background:#9fdcc80f!important}
html .app-shell #settingsForm .resource-option .resource-option-icon{display:grid;place-items:center;width:auto;height:auto;padding:0;border:0;background:none;color:var(--ui-muted)}
html .app-shell #settingsForm .resource-option .resource-option-icon svg{width:15px;height:15px}
html .app-shell #settingsForm .resource-option-copy{display:flex;align-items:baseline;gap:8px;min-width:0}
html .app-shell #settingsForm .resource-option-copy strong{overflow:hidden;font-size:13px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #settingsForm .resource-option-copy small{flex:0 0 auto;color:var(--set-dim)!important;font-size:11px}
html .app-shell #settingsForm .resource-check{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--ui-border);border-radius:5px;background:transparent;color:transparent}
html .app-shell #settingsForm .resource-check svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3}
html .app-shell #settingsForm .resource-picker[data-multiple="false"] .resource-check{border-radius:50%}
html .app-shell #settingsForm .resource-option.selected .resource-check{border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-on-accent)}
html .app-shell #settingsForm .resource-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:8px 6px 2px;border-top:1px solid var(--set-line);color:var(--set-dim);font-size:11.5px}
html .app-shell #settingsForm .resource-footer b{color:var(--ui-accent)}
html .app-shell #settingsForm .resource-footer .text-button{padding:2px 6px;border:0;background:none;color:var(--ui-muted);font-size:11.5px;cursor:pointer}
html .app-shell #settingsForm .resource-footer .text-button:hover{color:var(--ui-text)}

/* Toggle lists: one bordered list with dividers instead of separate boxes */
html .app-shell #settingsForm .check-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;border:1px solid var(--ui-border);border-radius:12px}
html .app-shell #settingsForm .check-grid .preference-toggle{min-height:52px;padding:12px 14px;border:0!important;border-bottom:1px solid var(--set-line)!important;border-radius:0!important;background:transparent!important}
html .app-shell #settingsForm .check-grid .preference-toggle:last-child{border-bottom:0!important}
html .app-shell #settingsForm .check-grid .preference-toggle:hover{background:#ffffff04!important}
html .app-shell #settingsForm .check-grid .preference-icon{display:none}

/* Rows inside sections (ticket menu actions, protection rules, types, responses) share one surface */
html .app-shell #settingsForm :is(.message-style-field,.ticket-type,.auto-response-row,.faq-item,.moderation-duration,.log-test-row,.log-event-card){border-color:var(--set-line)!important;border-radius:12px!important}
html .app-shell #settingsForm .protection-rule-table{overflow:hidden;border:1px solid var(--ui-border);border-radius:12px}
html .app-shell #settingsForm .protection-rule-section>header{padding:9px 14px;border-bottom:1px solid var(--set-line)}
html .app-shell #settingsForm .protection-rule-row{min-height:54px;padding:8px 14px;border-color:var(--set-line)}
html .app-shell #settingsForm .protection-rule-row select{min-height:36px;border-radius:9px!important;font-size:12.5px}
html .app-shell #settingsForm .protection-rule-hint{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#ffffff05;font-size:12.5px}

/* Menu action rows (ticket and temporary room control menus) */
html .app-shell #settingsForm .menu-action-editor{display:grid;gap:0;overflow:hidden;border:1px solid var(--ui-border);border-radius:12px}
html .app-shell #settingsForm .menu-action-row{gap:10px;min-height:56px;padding:8px 12px;border:0!important;border-bottom:1px solid var(--set-line)!important;border-radius:0!important;background:transparent!important}
html .app-shell #settingsForm .menu-action-row:last-child{border-bottom:0!important}
html .app-shell #settingsForm .menu-action-row input:not([type="checkbox"]){min-height:38px;padding:8px 11px;border:1px solid var(--ui-border)!important;border-radius:9px!important;background:var(--ui-input)!important;color:var(--ui-text)!important;font-size:13px}
html .app-shell #settingsForm .menu-action-row .drag-handle{color:var(--set-dim)}

/* Buttons & menus editor (js/component-editor.js) */
html .app-shell #settingsForm .component-editor{display:grid;gap:14px;padding:16px;border:1px solid var(--set-line);border-radius:12px;background:#ffffff03}
html .app-shell #settingsForm .component-editor-title{display:grid;gap:2px}
html .app-shell #settingsForm .component-editor-title strong{font-size:13.5px}
html .app-shell #settingsForm .component-editor-title small{color:var(--set-dim);font-size:11.5px}
html .app-shell #settingsForm .component-editor-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
html .app-shell #settingsForm .component-control{display:grid;gap:7px;min-width:0}
html .app-shell #settingsForm .component-control.hidden{display:none}
html .app-shell #settingsForm .component-control>span,html .app-shell #settingsForm .component-items-head span,html .app-shell #settingsForm .component-placeholder label{font-size:12.5px;font-weight:600}
html .app-shell #settingsForm .component-control small,html .app-shell #settingsForm .component-items-head small{color:var(--set-dim);font-size:11px;font-weight:400}
html .app-shell #settingsForm .component-seg{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-input)}
html .app-shell #settingsForm .component-seg button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:4px 8px;border:0;border-radius:8px;background:transparent;color:var(--ui-muted);font:inherit;font-size:12.5px;cursor:pointer}
html .app-shell #settingsForm .component-seg button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html .app-shell #settingsForm .component-seg button:hover{color:var(--ui-text)}
html .app-shell #settingsForm .component-seg button[aria-pressed="true"]{background:var(--ui-accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-accent,#9fdcc8) 40%,transparent);color:var(--ui-accent-hover);font-weight:600}
html .app-shell #settingsForm .component-seg button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:1px}
html .app-shell #settingsForm .component-placeholder{display:grid;gap:7px}
html .app-shell #settingsForm .component-editor[data-mode="buttons"] .component-placeholder{display:none}
html .app-shell #settingsForm .component-placeholder input{min-height:40px;padding:8px 12px;border:1px solid var(--ui-border)!important;border-radius:10px!important;background:var(--ui-input)!important;color:var(--ui-text)!important;font-size:13px}
html .app-shell #settingsForm .component-items-head{display:flex;align-items:baseline;gap:8px;margin-bottom:-6px}
html .app-shell #settingsForm .component-items{display:grid;overflow:hidden;border:1px solid var(--ui-border);border-radius:12px}
html .app-shell #settingsForm .component-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--set-line)}
html .app-shell #settingsForm .component-item .component-emoji{flex:0 0 56px;width:56px}
html .app-shell #settingsForm .component-item .component-label{flex:1 1 auto;width:auto}
html .app-shell #settingsForm .component-item:last-child{border-bottom:0}
html .app-shell #settingsForm .component-item.is-off>:not(.mini-switch){opacity:.45}
html .app-shell #settingsForm .component-item input:not([type="checkbox"]){min-width:0;min-height:36px;padding:6px 10px;border:1px solid var(--ui-border)!important;border-radius:9px!important;background:var(--ui-input)!important;color:var(--ui-text)!important;font-size:13px}
html .app-shell #settingsForm .component-item .component-emoji{text-align:center}
html .app-shell #settingsForm .component-colors{display:flex;gap:5px;padding:4px;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-input)}
html .app-shell #settingsForm .component-colors button{width:22px;height:22px;padding:0;border:0;border-radius:6px;cursor:pointer}
html .app-shell #settingsForm .component-colors button[aria-pressed="true"]{outline:2px solid var(--ui-text);outline-offset:2px}
html .app-shell #settingsForm .component-colors button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
html .app-shell #settingsForm .component-editor[data-mode="select"] .component-colors{visibility:hidden}
html .app-shell #settingsForm .component-order{display:flex;gap:4px}
html .app-shell #settingsForm .component-order button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--ui-border);border-radius:7px;background:var(--ui-raised);color:var(--ui-muted);cursor:pointer}
html .app-shell #settingsForm .component-order button:hover{border-color:var(--ui-accent);color:var(--ui-accent)}
html .app-shell #settingsForm .component-order svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
html .app-shell #settingsForm .component-hint{margin:0;color:var(--set-dim);font-size:11.5px;line-height:1.6}
.swatch-secondary,.preview-button.style-secondary{background:#4e5058!important}
.swatch-primary,.preview-button.style-primary{background:#5865f2!important}
.swatch-success,.preview-button.style-success{background:#248046!important}
.swatch-danger,.preview-button.style-danger{background:#da373c!important}

/* Buttons and menus in the message preview */
html .app-shell #settingsForm .preview-components{display:grid;gap:8px;margin-top:8px}
html .app-shell #settingsForm .preview-components.inside{margin-top:12px;padding-top:12px;border-top:1px solid #ffffff10}
html .app-shell #settingsForm .preview-buttons{display:flex;flex-wrap:wrap;gap:6px}
html .app-shell #settingsForm .preview-buttons[data-moderation-category-preview]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
html .app-shell #settingsForm .preview-buttons[data-moderation-category-preview] .preview-button{justify-content:center;min-width:0;padding:6px;font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:center}
html .app-shell #settingsForm .component-editor[data-component-layout="moderationPanelLayout"] .component-item{flex-wrap:wrap}
@media(max-width:480px){html .app-shell #settingsForm .preview-buttons[data-moderation-category-preview]{grid-template-columns:repeat(2,minmax(0,1fr))}}
html .app-shell #settingsForm .preview-button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 14px;border-radius:7px;color:#fff;font-size:12.5px;font-weight:600}
html .app-shell #settingsForm .preview-emoji{display:inline-block;width:auto;height:16px;font-size:14px;line-height:16px}
html .app-shell #settingsForm .preview-select{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:420px;min-height:40px;padding:0 12px;border:1px solid #ffffff14;border-radius:8px;background:var(--ui-input);color:var(--ui-muted);font-size:13px}
html .app-shell #settingsForm .preview-select svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
@media (max-width:640px){
  html .app-shell #settingsForm .component-item{flex-wrap:wrap}
  html .app-shell #settingsForm .component-item .component-label{flex-basis:calc(100% - 140px)}
  html .app-shell #settingsForm .component-order{margin-inline-start:auto}
}

/* Save bar */
html .app-shell #settingsForm .save-bar{border-color:#9fdcc833!important;border-radius:12px!important}

/* Light theme */
html[data-dashboard-theme="light"] .app-shell #settingsForm{--set-line:#00000012;--set-dim:#80808f}
html[data-dashboard-theme="light"] .app-shell #settingsForm .section-icon{background:#0000000a}
html[data-dashboard-theme="light"] .app-shell #settingsForm .resource-chip{border-color:#00000014}
html[data-dashboard-theme="light"] .app-shell #settingsForm .resource-picker-body{background:#fff!important;box-shadow:0 18px 40px #0002}

/* Narrow screens: one column; the section list becomes a horizontal strip */
@media (max-width:1100px){
  html .app-shell #settingsForm.has-section-nav{grid-template-columns:minmax(0,1fr)}
  html .app-shell #settingsForm.has-section-nav #formFields{grid-column:1}
  html .app-shell #settingsForm .settings-sections{top:64px;z-index:5;flex-direction:row;gap:4px;padding:6px;overflow-x:auto;scrollbar-width:none}
  html .app-shell #settingsForm .settings-sections::-webkit-scrollbar{display:none}
  html .app-shell #settingsForm .settings-sections-title{display:none}
  html .app-shell #settingsForm .settings-sections button{flex:0 0 auto}
  html .app-shell #settingsForm.section-tabs .settings-sections{padding:6px}
  html .app-shell #settingsForm.section-tabs .settings-sections button{align-items:center;gap:8px;padding:6px 10px 6px 12px}
  html .app-shell #settingsForm.section-tabs .settings-sections button .section-tab-icon{flex-basis:26px;width:26px;height:26px;border-radius:7px}
  html .app-shell #settingsForm.section-tabs .settings-sections .section-tab-copy small{display:none}
  html .app-shell #settingsForm.section-tabs .settings-sections button[aria-current]::before{display:none}
  html .app-shell #settingsForm .section-pager-button b{max-width:120px}
}
@media (max-width:640px){
  html .app-shell #settingsForm .settings-head{flex-wrap:wrap;padding:16px!important}
  html .app-shell #settingsForm .settings-head-icon{flex-basis:42px;width:42px;height:42px}
  html .app-shell #settingsForm #moduleToggleWrap{width:100%;justify-content:space-between}
  html .app-shell #settingsForm .field-group>summary{padding:14px 16px}
  html .app-shell #settingsForm .field-group-body{padding:16px}
}
/* The switch's hidden input is absolutely positioned; anchor it to the switch so it cannot cover the row. */
html .app-shell #settingsForm .component-item .mini-switch{position:relative;flex:0 0 auto;display:inline-flex}
html .app-shell #settingsForm .component-item .mini-switch input{inset:0;width:100%;height:100%;margin:0;cursor:pointer}
/* Moderation presets reuse existing fields, units and the shared live emoji preview. */
html .app-shell #settingsForm .moderation-duration{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}
html .app-shell #settingsForm .moderation-duration-time{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
html .app-shell #settingsForm .moderation-duration-reason{grid-column:span 2;min-width:0}
html .app-shell #settingsForm .moderation-duration .component-emoji-field{display:flex;width:100%;min-width:0}
html .app-shell #settingsForm .moderation-duration input.component-emoji{min-width:0;width:100%;border:0!important;border-radius:0!important;background:transparent!important}
html .app-shell #settingsForm .moderation-duration input:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:640px){
  html .app-shell #settingsForm .moderation-duration{grid-template-columns:minmax(0,1fr)}
  html .app-shell #settingsForm .moderation-duration-reason{grid-column:1}
  html .app-shell #settingsForm .moderation-duration .remove-type{justify-self:end}
}

/* Auto-setup prompt shown when a system that needs rooms is turned on. */
.auto-setup-dialog{width:min(480px,calc(100% - 32px));max-height:min(88vh,720px);padding:0;border:1px solid var(--ui-border,#2b3a39);border-radius:18px;background:var(--ui-bg,#0f1516);color:var(--text,#e6f1ef);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.auto-setup-dialog::backdrop{background:rgba(3,7,9,.72)}
.auto-setup-dialog form{display:grid;gap:14px;padding:22px}
.auto-setup-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.auto-setup-dialog h2{margin:0;font-size:20px}
.auto-setup-dialog p{margin:0;color:var(--muted,#9fb3ae);line-height:1.7}
.auto-setup-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--ui-border,#2b3a39);border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.auto-setup-close svg,.auto-setup-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auto-setup-dialog ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:46vh;overflow:auto}
.auto-setup-dialog li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--ui-border,#2b3a39);border-radius:12px;background:var(--ui-input,#141c1d)}
.auto-setup-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:var(--ui-accent-soft,color-mix(in srgb, var(--t-accent, #9fdcc8) 12%, transparent));color:var(--ui-accent,var(--t-accent, #9fdcc8))}
.auto-setup-dialog li span:last-child{display:grid;min-width:0}
.auto-setup-dialog li strong{overflow-wrap:anywhere}
.auto-setup-dialog li small,.auto-setup-hint{color:var(--muted,#9fb3ae);font-size:12px}
.auto-setup-dialog footer{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.auto-setup-dialog footer .button{min-width:130px}
@media (max-width:520px){.auto-setup-dialog footer .button{flex:1}}

/* Protection: watched permissions as a grid of switches. */
.protection-permission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:8px}
.protection-permission{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ui-border,#2b3a39);border-radius:12px;background:var(--ui-input,#141c1d);cursor:pointer;font-size:14px}
.protection-permission input{width:18px;height:18px;margin:0;accent-color:var(--ui-accent,var(--t-accent, #9fdcc8));flex:none}
.protection-permission:has(input:checked){border-color:var(--ui-accent,var(--t-accent, #9fdcc8))}
#profanityWords{min-height:260px}

/* ===================== billing.css ===================== */
/* Subscriptions page: plan comparison, durations with totals, developer trial. Sales centre: header, side
   navigation, compact order rows, subscription messages and trials. Loaded after the older billing styles. */

/* ---------- Plan comparison ---------- */
.app-shell .plan-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.app-shell .plan-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid #ffffff12;border-radius:16px;background:var(--ui-panel);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.app-shell .plan-card>input{position:absolute;opacity:0;pointer-events:none}
.app-shell .plan-card:hover{border-color:#ffffff24}
.app-shell .plan-card:has(input:checked){border-color:#9fdcc899;background:linear-gradient(180deg,#9fdcc812,transparent 55%),var(--ui-panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent)}
.app-shell .plan-card.custom:has(input:checked){border-color:#7c8cff99;background:linear-gradient(180deg,#7c8cff12,transparent 55%),var(--ui-panel);box-shadow:0 0 0 3px #7c8cff14}
.app-shell .plan-card:has(input:focus-visible){outline:2px solid var(--ui-accent);outline-offset:3px}
.app-shell .plan-badge{position:absolute;top:-11px;inset-inline-start:18px;padding:2px 10px;border-radius:999px;background:var(--ui-accent);color:var(--ui-on-accent);font-size:11px;font-weight:700}
.app-shell .plan-card-head{display:flex;align-items:center;gap:12px}
.app-shell .plan-card-head strong{display:block;font-size:17px}
.app-shell .plan-card-head small{display:block;color:var(--ui-muted);font-size:12.5px;line-height:1.5}
.app-shell .plan-card-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--ui-accent-soft);color:var(--ui-accent)}
.app-shell .plan-card.custom .plan-card-icon{background:#7c8cff1a;color:#8e9bff}
.app-shell .plan-card svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app-shell .plan-card-price{color:var(--ui-muted);font-size:13px}
.app-shell .plan-card-price b{color:var(--ui-text);font-size:22px}
.app-shell .plan-card-fit{color:var(--ui-muted);font-size:12.5px;line-height:1.6}
.app-shell .plan-card-features{display:grid;gap:7px;margin:0;padding:12px 0 0;border-top:1px solid #ffffff0d;list-style:none;font-size:13px}
.app-shell .plan-card-features li{display:flex;align-items:center;gap:8px}
.app-shell .plan-card-features li svg{flex:0 0 16px;width:16px;height:16px;color:#4ade80;stroke-width:2.4}
.app-shell .plan-card-features li.off{color:#7d7e90}
.app-shell .plan-card-features li.off svg{color:#6b6c7c}
.app-shell .plan-card-cta{display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:auto;border:1px solid var(--ui-border);border-radius:10px;font-weight:600;font-size:13px}
.app-shell .plan-card-cta::after{content:attr(data-choose)}
.app-shell .plan-card:has(input:checked) .plan-card-cta{border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-on-accent)}
.app-shell .plan-card.custom:has(input:checked) .plan-card-cta{border-color:#7c8cff;background:#7c8cff;color:#fff}
.app-shell .plan-card:has(input:checked) .plan-card-cta::after{content:attr(data-chosen)}
.app-shell .plan-compare-note{margin:10px 0 0;color:#7d7e90;font-size:12px}

/* ---------- Durations with totals ---------- */
.app-shell .subscription-duration-field.with-totals .duration-choice>span{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"icon num label check" "total total total total" "monthly monthly monthly monthly";align-items:center;gap:4px 8px;min-height:84px}
.app-shell .with-totals .duration-choice>span>svg{grid-area:icon}
.app-shell .with-totals .duration-choice>span>b{grid-area:num}
.app-shell .with-totals .duration-choice>span>strong{grid-area:label}
.app-shell .with-totals .duration-choice>span>i{grid-area:check}
.app-shell .with-totals .duration-choice [data-duration-total]{grid-area:total;color:var(--ui-accent-hover);font-size:14px;font-style:normal;font-weight:700}
.app-shell .with-totals .duration-choice [data-duration-monthly]{grid-area:monthly;color:#7d7e90;font-size:11.5px}
.app-shell .with-totals .duration-choice [data-duration-total]:empty,.app-shell .with-totals .duration-choice [data-duration-monthly]:empty{display:none}

/* ---------- Developer trial ---------- */
.app-shell .trial-card{display:grid;gap:10px;margin-top:16px;padding:14px;border:1px dashed #7c8cff66;border-radius:14px;background:#7c8cff0a;text-align:start}
.app-shell .trial-card-head{display:flex;align-items:center;gap:8px}
.app-shell .trial-card-head svg,.app-shell .trial-start svg{width:17px;height:17px;fill:none;stroke:#8e9bff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app-shell .trial-card-head strong{font-size:14px}
.app-shell .trial-card-head span{padding:1px 8px;border-radius:999px;background:#7c8cff22;color:#a5b0ff;font-size:11px;font-weight:600}
.app-shell .trial-card p{margin:0;color:var(--ui-muted);font-size:12px;line-height:1.7}
.app-shell .trial-hours{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input)}
.app-shell .trial-hours button{min-height:32px;border:0;border-radius:7px;background:transparent;color:var(--ui-muted);font:inherit;font-size:12px;cursor:pointer}
.app-shell .trial-hours button[aria-pressed="true"]{background:#7c8cff26;color:#c3caff;font-weight:600}
.app-shell .trial-start{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;border:1px solid #7c8cff99!important;border-radius:10px!important;background:transparent!important;color:#a5b0ff!important;font-weight:700}
.app-shell .trial-start:hover{background:#7c8cff14!important}

/* ---------- Sales centre ---------- */
.app-shell .sales-desk{display:grid;gap:16px}
.app-shell .sales-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.app-shell .sales-top h2{margin:2px 0 0;font-size:24px}
.app-shell .sales-live{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #4ade8033;border-radius:10px;background:#4ade800d;color:#86efac;font-size:12.5px}
.app-shell .sales-live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px #4ade8026}
.app-shell .sales-kpis{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:12px}
.app-shell .sales-kpi{position:relative;display:grid;gap:2px;min-width:0;padding:14px 16px;border:1px solid #ffffff0d;border-radius:14px;background:var(--ui-panel)}
.app-shell .sales-kpi svg{position:absolute;top:14px;inset-inline-end:14px;width:18px;height:18px;fill:none;stroke:#7d7e90;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell .sales-kpi span{color:var(--ui-muted);font-size:12px}
.app-shell .sales-kpi strong{font-size:24px;line-height:1.3}
.app-shell .sales-kpi strong i{color:#7d7e90;font-size:13px;font-style:normal;font-weight:600}
.app-shell .sales-kpi small{overflow:hidden;color:#7d7e90;font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
.app-shell .sales-kpi.revenue{border-color:#9fdcc833;background:linear-gradient(135deg,#9fdcc81a,transparent 60%),var(--ui-panel)}
.app-shell .sales-kpi.revenue strong{color:var(--ui-accent-hover)}
.app-shell .sales-kpi.attention svg{stroke:var(--ui-accent)}
.app-shell .sales-kpi.warn strong{color:#fbbf24}
.app-shell .sales-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:start}
.app-shell .sales-desk .sales-navigation{position:sticky;top:88px;display:flex!important;flex-direction:column;gap:2px;margin:0;padding:8px;border:1px solid #ffffff0d;border-radius:14px;background:var(--ui-panel)}
.app-shell .sales-desk .sales-navigation button{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:38px;padding:8px 10px;border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important;color:var(--ui-muted);font-size:13px;text-align:start}
.app-shell .sales-desk .sales-navigation button svg{flex:0 0 17px;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell .sales-desk .sales-navigation button:hover{background:#ffffff06!important;color:var(--ui-text)}
.app-shell .sales-desk .sales-navigation button.active{background:var(--ui-accent-soft)!important;color:var(--ui-accent-hover);font-weight:600}
.app-shell .sales-desk .sales-navigation button b{min-width:20px;margin-inline-start:auto;padding:0 6px;border-radius:999px;background:#ffffff0d;color:var(--ui-text);font-size:11px;text-align:center}
.app-shell .sales-desk .sales-navigation button.active b{background:var(--ui-accent);color:var(--ui-on-accent)}
.app-shell .sales-desk .sales-navigation button em{margin-inline-start:auto;padding:0 6px;border-radius:999px;background:#7c8cff22;color:#a5b0ff;font-size:10px;font-style:normal}
.app-shell .sales-main{display:grid;gap:14px;min-width:0}
.app-shell .sales-desk .developer-commandbar{margin:0}
.app-shell .sales-desk .sales-workspace{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px;margin:0}
.app-shell .sales-desk .sales-workspace>*{grid-column:1/-1!important}
.app-shell .sales-desk .developer-section{border-color:#ffffff0d!important;border-radius:14px!important}
.app-shell .sales-desk .panel-head.enhanced{margin-bottom:12px}
.app-shell .sales-desk .panel-head.enhanced .eyebrow{display:none}

/* Orders as compact rows */
.app-shell .sales-desk .record-stack{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px}
.app-shell .sales-desk .order-record{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(0,1.6fr) auto;grid-template-areas:"head kpis actions" "details details details";align-items:center;gap:10px 16px;padding:12px 14px!important;border-radius:12px!important}
.app-shell .sales-desk .order-record>.record-head{grid-area:head;min-width:0;margin:0;padding:0;border:0}
.app-shell .sales-desk .order-record>.record-kpis{grid-area:kpis;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.app-shell .sales-desk .order-record>.record-kpis span{padding:6px 10px;border-radius:9px}
.app-shell .sales-desk .order-record>.queue-decision-actions{grid-area:actions;display:flex;gap:6px;margin:0;padding:0;border:0}
.app-shell .sales-desk .order-record>.queue-decision-actions .button{min-height:36px;padding:0 14px;font-size:12.5px}
.app-shell .sales-desk .order-record>.record-details{grid-area:details;margin:0}
.app-shell .sales-desk .order-record:not(:has(.queue-decision-actions)){grid-template-areas:"head kpis kpis" "details details details"}

/* Subscription messages */
.app-shell .sales-messages{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
.app-shell .sales-messages.hidden{display:none}
.app-shell .messages-editor{display:grid;gap:12px}
.app-shell .messages-tabs,.app-shell .messages-locale{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input)}
.app-shell .messages-locale{justify-self:start;min-width:220px}
.app-shell .messages-tabs button,.app-shell .messages-locale button{min-height:32px;border:0;border-radius:7px;background:transparent;color:var(--ui-muted);font:inherit;font-size:12.5px;cursor:pointer}
.app-shell .messages-tabs button[aria-selected="true"],.app-shell .messages-locale button[aria-pressed="true"]{background:var(--ui-accent-soft);color:var(--ui-accent-hover);font-weight:600}
.app-shell .messages-note{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border-radius:10px;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 5%,transparent);color:var(--ui-muted);font-size:12px}
.app-shell .messages-note svg{width:16px;height:16px;fill:none;stroke:var(--ui-accent);stroke-width:1.9}
.app-shell .messages-field{display:grid;gap:6px}
.app-shell .messages-field span{font-size:12.5px;font-weight:600}
.app-shell .messages-field :is(input,textarea){width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input);color:var(--ui-text);font:inherit;font-size:13px;line-height:1.7;resize:vertical}
.app-shell .messages-field :is(input,textarea):focus{border-color:var(--ui-accent);outline:none}
.app-shell .messages-vars{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.app-shell .messages-vars span{color:#7d7e90;font-size:12px}
.app-shell .messages-vars button{padding:2px 8px;border:1px solid #ffffff12;border-radius:7px;background:#ffffff08;color:var(--ui-muted);font:12px/1.6 ui-monospace,monospace;cursor:pointer;direction:ltr}
.app-shell .messages-vars button:hover{border-color:var(--ui-accent);color:var(--ui-accent-hover)}
.app-shell .messages-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.app-shell .messages-test{display:inline-flex;align-items:center;gap:7px;border-color:#7c8cff88!important;color:#a5b0ff!important}
.app-shell .messages-test svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app-shell .message-dm-preview{padding:14px;border:1px solid #ffffff0d;border-radius:12px;background:radial-gradient(ellipse at 85% 0%,#9fdcc80f,transparent 55%),var(--ui-input)}
.app-shell .dm-preview{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px}
.app-shell .dm-preview>img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px #9fdcc833}
.app-shell .dm-embed{position:relative;padding:12px 14px;border:1px solid #ffffff0d;border-radius:10px;background:var(--ui-raised)}
.app-shell .dm-embed::before{position:absolute;inset-block:0;inset-inline-start:0;width:3px;border-radius:10px 0 0 10px;content:"";background:#4ade80}
[dir="rtl"] .app-shell .dm-embed::before{border-radius:0 10px 10px 0}
.app-shell .dm-embed.type-rejected::before{background:#f87171}
.app-shell .dm-embed.type-expiring::before{background:var(--t-accent, #9fdcc8)}
.app-shell .dm-embed.type-expired::before{background:#8a8b9c}
.app-shell .dm-embed strong{display:block;font-size:14px}
.app-shell .dm-embed p{margin:4px 0 0;color:var(--ui-muted);font-size:12.5px;line-height:1.7;white-space:pre-wrap}
.app-shell .dm-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;font-size:12px}
.app-shell .dm-fields .wide{grid-column:1/-1}
.app-shell .dm-fields small{display:block;color:#7d7e90;font-size:11px}

/* Trials */
.app-shell .trial-list{display:grid;gap:8px}
.app-shell .trial-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ffffff0d;border-radius:12px;background:#ffffff03}
.app-shell .trial-row .entity-avatar{width:36px;height:36px;border-radius:10px}
.app-shell .trial-row strong{display:block;font-size:13px}
.app-shell .trial-row small{color:#7d7e90;font-size:11.5px}
.app-shell .trial-row>div{min-width:0}
.app-shell .trial-row>div small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .trial-row.ended{opacity:.6}
.app-shell .trial-pill{padding:2px 9px;border-radius:999px;background:#4ade801a;color:#86efac;font-size:11.5px;font-weight:600}

@media (max-width:1180px){
  .app-shell .sales-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-shell .sales-kpi.revenue{grid-column:1/-1}
  .app-shell .sales-desk .order-record{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head actions" "kpis kpis" "details details"}
  .app-shell .sales-messages{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .app-shell .plan-compare{grid-template-columns:minmax(0,1fr)}
  .app-shell .sales-shell{grid-template-columns:minmax(0,1fr)}
  .app-shell .sales-desk .sales-navigation{position:static;flex-direction:row!important;overflow-x:auto;scrollbar-width:none}
  .app-shell .sales-desk .sales-navigation button{flex:0 0 auto}
  .app-shell .sales-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .app-shell .sales-kpis{grid-template-columns:minmax(0,1fr)}
  .app-shell .sales-desk .order-record{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "kpis" "actions" "details"}
  .app-shell .trial-row{grid-template-columns:36px minmax(0,1fr) auto}
  .app-shell .trial-row .trial-time,.app-shell .trial-row .button{grid-column:2/-1}
}

/* ===================== developer.css ===================== */
/* Developer centre: compact header, live resource cards, side navigation, systems table and bot lists. */
.app-shell .dev-desk{display:grid;gap:14px}
.app-shell .dev-desk svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell .dev-desk .button svg{width:16px;height:16px;flex:0 0 16px}
.app-shell .dev-desk .hidden{display:none!important}

/* Header */
.app-shell .dev-top{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid #ffffff0d;border-radius:16px;background:var(--ui-panel)}
.app-shell .dev-avatar{flex:0 0 52px;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #ffffff14}
.app-shell .dev-avatar.on{box-shadow:0 0 0 2px #4ade8066}
.app-shell .dev-avatar.small{flex-basis:40px;width:40px;height:40px}
.app-shell .dev-top h2{margin:0;font-size:19px}
.app-shell .dev-top>div{min-width:0}
.app-shell .dev-top p{overflow:hidden;margin:2px 0 0;text-overflow:ellipsis;white-space:nowrap;color:#7d7e90;font-size:12.5px;direction:ltr;text-align:start;unicode-bidi:plaintext}
.app-shell .dev-top-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-inline-start:auto}
.app-shell .dev-pill{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border:1px solid #ffffff12;border-radius:999px;background:#ffffff06;color:var(--ui-muted);font-size:12.5px;white-space:nowrap}
.app-shell .dev-pill svg{width:15px;height:15px}
.app-shell .dev-pill>i{width:8px;height:8px;border-radius:50%;background:#7d7e90}
.app-shell .dev-pill.ok{border-color:#4ade8033;background:#4ade800f;color:#86efac}
.app-shell .dev-pill.ok>i{background:#4ade80;box-shadow:0 0 0 3px #4ade8026}
.app-shell .dev-pill.bad{border-color:#f8717133;background:#f871710f;color:#fca5a5}
.app-shell .dev-pill.bad>i{background:#f87171}

/* Resource cards */
.app-shell .dev-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.app-shell .dev-kpi{display:grid;align-content:start;gap:4px;min-width:0;padding:13px 15px;border:1px solid #ffffff0d;border-radius:14px;background:var(--ui-panel)}
.app-shell .dev-kpi>span{display:flex;align-items:center;gap:7px;color:var(--ui-muted);font-size:12px}
.app-shell .dev-kpi>span svg{flex:0 0 16px;width:16px;height:16px;color:#7d7e90}
.app-shell .dev-kpi strong{font-size:22px;line-height:1.3;white-space:nowrap}
.app-shell .dev-kpi small{overflow:hidden;color:#7d7e90;font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
.app-shell .dev-kpi.warn{border-color:#fbbf2433}
.app-shell .dev-kpi.warn strong{color:#fbbf24}
.app-shell .dev-bar{display:block;height:5px;margin:2px 0;overflow:hidden;border-radius:999px;background:#ffffff0d}
.app-shell .dev-bar b{display:block;width:var(--fill,0%);height:100%;border-radius:inherit;background:var(--ui-accent);transition:width .4s ease}
.app-shell .dev-bar.green b{background:#4ade80}

/* Shell and navigation */
.app-shell .dev-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:start}
.app-shell .dev-nav{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px;padding:8px;border:1px solid #ffffff0d;border-radius:14px;background:var(--ui-panel)}
.app-shell .dev-nav>p{margin:4px 10px 6px;color:#7d7e90;font-size:11px;font-weight:600}
.app-shell .dev-nav button{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--ui-muted);font:inherit;font-size:13px;text-align:start;cursor:pointer}
.app-shell .dev-nav button svg{flex:0 0 17px;width:17px;height:17px}
.app-shell .dev-nav button:hover{background:#ffffff06;color:var(--ui-text)}
.app-shell .dev-nav button.active{background:var(--ui-accent-soft);color:var(--ui-accent-hover);font-weight:600}
.app-shell .dev-nav button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:1px}
.app-shell .dev-nav button em{min-width:20px;margin-inline-start:auto;padding:0 6px;border-radius:999px;background:#fbbf2426;color:#fbbf24;font-size:11px;font-style:normal;text-align:center}
.app-shell .dev-main{min-width:0}
.app-shell .dev-panel{display:grid;gap:14px;min-width:0}
.app-shell .dev-panel>.panel{margin:0}
.app-shell .dev-overview{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.app-shell .dev-access{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.app-shell .dev-bots{grid-template-columns:minmax(0,1fr)}
.app-shell .dev-bots .official-profile-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.app-shell .dev-bots .official-profile-form .full{grid-column:1/-1}
.app-shell .dev-bots .official-profile-form textarea{min-height:90px}
.app-shell .dev-muted{color:#7d7e90;font-size:12px}

/* Tags and live chart */
.app-shell .dev-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:#ffffff0a;color:var(--ui-muted);font-size:11.5px;font-weight:600;white-space:nowrap}
.app-shell .dev-tag.ok{background:#4ade801a;color:#86efac}
.app-shell .dev-tag.bad{background:#fbbf241f;color:#fbbf24}
.app-shell .dev-chart{position:relative;display:grid;place-items:center;height:160px;padding:6px 0;padding-inline-end:36px;direction:ltr}
.app-shell .dev-scale{position:absolute;right:0;color:#7d7e90;font-size:10.5px}
.app-shell .dev-scale.top{top:2px}
.app-shell .dev-scale.mid{top:calc(50% - 7px)}
.app-shell .dev-chart svg{width:100%;height:100%;overflow:visible}
.app-shell .dev-chart .grid line{stroke:#ffffff0d;stroke-width:1;vector-effect:non-scaling-stroke}
.app-shell .dev-chart polyline{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke}
.app-shell .dev-chart polyline.cpu{stroke:#4ade80}
.app-shell .dev-chart polyline.mem{stroke:var(--ui-accent)}
.app-shell .dev-legend{display:flex;gap:16px;color:var(--ui-muted);font-size:12px}
.app-shell .dev-legend span{display:inline-flex;align-items:center;gap:6px}
.app-shell .dev-legend i{width:10px;height:3px;border-radius:2px}
.app-shell .dev-legend i.cpu{background:#4ade80}
.app-shell .dev-legend i.mem{background:var(--ui-accent)}

/* Bot rows */
.app-shell .dev-bot-list,.app-shell .dev-identity-list{display:grid;gap:8px}
.app-shell .dev-bot-row{display:flex;align-items:center;gap:11px;min-width:0;padding:9px 11px;border:1px solid #ffffff0a;border-radius:11px;background:#ffffff04}
.app-shell .dev-bot-row>div{display:grid;flex:1;min-width:0}
.app-shell .dev-bot-row strong,.app-shell .dev-bot-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .dev-bot-row strong{font-size:13.5px}
.app-shell .dev-bot-row small{color:#7d7e90;font-size:11.5px}
.app-shell .dev-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#6b6c7c}
.app-shell .dev-dot.on{background:#4ade80;box-shadow:0 0 0 3px #4ade8026}
.app-shell .dev-restart{flex:0 0 32px;width:32px;height:32px}
.app-shell .dev-restart svg{width:16px;height:16px}

/* Systems table */
.app-shell .dev-table-wrap{overflow-x:auto;border:1px solid #ffffff0a;border-radius:12px}
.app-shell .dev-table{width:100%;min-width:520px;border-collapse:collapse;font-size:13px}
.app-shell .dev-table th{padding:10px 14px;background:#ffffff05;color:#7d7e90;font-size:11.5px;font-weight:600;text-align:start;white-space:nowrap}
.app-shell .dev-table th:nth-child(n+3),.app-shell .dev-table td:nth-child(n+3){width:140px;text-align:center}
.app-shell .dev-table td{padding:8px 14px;border-top:1px solid #ffffff08;vertical-align:middle}
.app-shell .dev-table tr:hover td{background:#ffffff03}
.app-shell .dev-system{display:flex;align-items:center;gap:10px}
.app-shell .dev-system b{font-weight:600}
.app-shell .dev-switch{position:relative;display:inline-block;width:38px;height:22px;vertical-align:middle;cursor:pointer}
.app-shell .dev-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.app-shell .dev-switch span{position:absolute;inset:0;border-radius:999px;background:#ffffff1a;transition:background .15s;pointer-events:none}
.app-shell .dev-switch span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#d6d7e0;transition:transform .15s}
.app-shell .dev-switch input:checked+span{background:var(--ui-accent)}
.app-shell .dev-switch.danger input:checked+span{background:#f59e0b}
.app-shell .dev-switch input:checked+span::after{transform:translateX(16px);background:#fff}
[dir="rtl"] .app-shell .dev-switch input:checked+span::after,.app-shell[dir="rtl"] .dev-switch input:checked+span::after{transform:translateX(-16px)}
.app-shell .dev-switch input:focus-visible+span{outline:2px solid var(--ui-accent);outline-offset:2px}

/* Custom bot identity */
.app-shell .dev-identity{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #ffffff0a;border-radius:12px;background:#ffffff04}
.app-shell .dev-identity-name{display:grid;gap:3px;min-width:0}
.app-shell .dev-identity-name input{width:100%;min-width:0;min-height:36px;padding:0 10px}
.app-shell .dev-identity-name small{overflow:hidden;color:#7d7e90;font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
.app-shell .dev-file{position:relative;display:inline-flex;align-items:center;gap:7px;max-width:150px;min-height:34px;padding:0 11px;border:1px dashed #ffffff26;border-radius:9px;color:var(--ui-muted);font-size:12px;cursor:pointer}
.app-shell .dev-file svg{flex:0 0 15px;width:15px;height:15px}
.app-shell .dev-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .dev-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.app-shell .dev-file:hover{border-color:#ffffff40;color:var(--ui-text)}
.app-shell .dev-file.chosen{border-style:solid;border-color:#4ade8055;color:#86efac}
.app-shell .dev-file:focus-within{outline:2px solid var(--ui-accent);outline-offset:2px}

/* Responsive */
@media (max-width:1250px){
  .app-shell .dev-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .app-shell .dev-overview,.app-shell .dev-access{grid-template-columns:minmax(0,1fr)}
  .app-shell .dev-identity{grid-template-columns:auto minmax(0,1fr) auto;}
  .app-shell .dev-identity .button{grid-column:1/-1}
}
@media (max-width:900px){
  .app-shell .dev-shell{grid-template-columns:minmax(0,1fr)}
  .app-shell .dev-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .app-shell .dev-nav::-webkit-scrollbar{display:none}
  .app-shell .dev-nav>p{display:none}
  .app-shell .dev-nav button{flex:0 0 auto;white-space:nowrap}
  .app-shell .dev-top{flex-wrap:wrap}
  .app-shell .dev-top-actions{justify-content:flex-start;width:100%;margin:0}
}
@media (max-width:600px){
  .app-shell .dev-table{min-width:0}
  .app-shell .dev-table th:nth-child(2),.app-shell .dev-table td:nth-child(2){display:none}
  .app-shell .dev-table th,.app-shell .dev-table td{padding:8px 10px}
  .app-shell .dev-table th:nth-child(n+3),.app-shell .dev-table td:nth-child(n+3){width:80px;white-space:normal;overflow-wrap:normal;word-break:normal;font-size:10.5px}
  .app-shell .dev-system .module-visual{display:none}
  .app-shell .dev-bots .official-profile-form{grid-template-columns:minmax(0,1fr)}
  .app-shell .dev-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .dev-identity{grid-template-columns:auto minmax(0,1fr)}
  .app-shell .dev-identity .dev-file{max-width:none}
  .app-shell .dev-top-actions .button{flex:1 1 140px}
}
.app-shell .dev-desk .eyebrow{display:none}

/* p40: the platform status is one picture; the editor shows it as a preview. */
html .app-shell .platform-status-preview { display: grid; place-items: center; min-height: 160px; padding: 10px; border: 1px solid var(--ui-border); border-radius: 12px; background: #0c1011; }
html .app-shell .platform-status-preview img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ===================== domain-email.css ===================== */
.mail-workspace{min-width:0;color:var(--brand-text,#e6f1ef)}.mail-workspace .hidden{display:none!important}.mail-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}.mail-workspace button[aria-pressed="true"]{border-color:var(--brand-primary,var(--t-accent, #9fdcc8));background:var(--ui-accent-soft,color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent));color:var(--brand-mint-soft,#c0ece0)}
.mail-workspace :is(button,input,select,textarea,summary):focus-visible{outline:2px solid var(--brand-focus,#7deddd);outline-offset:3px}.mail-workspace :is(input,select,textarea){width:100%;min-width:0;background:var(--ui-input,#121619);color:var(--brand-text,#e6f1ef);border:1px solid var(--brand-border,#2a3034);border-radius:9px;padding:10px;font:inherit}.mail-workspace label{display:grid;gap:7px;font-size:.88rem}.mail-workspace textarea{resize:vertical;line-height:1.7}.mail-workspace [readonly]{opacity:.7}
.mail-config{padding:16px 0;border-block:1px solid var(--brand-border,#2a3034)}.mail-config summary{cursor:pointer;font-weight:600}.mail-connection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.mail-connection>div{min-width:0}.mail-connection dt{color:var(--brand-muted,#aac1ba);font-size:.8rem}.mail-connection dd{margin:5px 0 0;overflow-wrap:anywhere;font-size:.88rem}.mail-dns{padding-inline-start:20px;font-size:.85rem;overflow-wrap:anywhere}
.mail-sections{padding-block:4px;border-bottom:1px solid var(--brand-border,#2a3034)}.mail-folders{gap:7px}.mail-folders>[data-mail-refresh]{margin-inline-start:auto}.mail-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-block:20px}.mail-search{flex:1;min-width:160px}.mail-filters>label:not(.mail-search){min-width:100px}.mail-workspace .mail-check{display:flex;align-items:center;gap:7px;min-height:42px}.mail-workspace .mail-check input{width:17px;height:17px;accent-color:var(--brand-primary,var(--t-accent, #9fdcc8))}
.mail-split{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.35fr);border:1px solid var(--brand-border,#2a3034);border-radius:14px;overflow:hidden;min-height:370px}.mail-index{border-inline-end:1px solid var(--brand-border,#2a3034);min-width:0;display:flex;flex-direction:column}.mail-list{display:grid;align-content:start;max-height:760px;overflow-y:auto}.mail-list[aria-busy="true"]{opacity:.55;pointer-events:none}
.mail-row{display:grid;gap:7px;width:100%;text-align:start;background:transparent;color:inherit;padding:17px;border:0;border-bottom:1px solid var(--brand-border,#2a3034);cursor:pointer;font:inherit;min-width:0}.mail-row:hover,.mail-row:focus-visible{background:var(--ui-accent-soft,color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent))}.mail-row[aria-pressed="true"]{box-shadow:inset 3px 0 var(--brand-primary,var(--t-accent, #9fdcc8))}.mail-row-top{display:flex;justify-content:space-between;gap:8px}.mail-row strong{font-weight:500}.mail-row.is-unread strong{font-weight:750}.mail-row.is-unread{border-inline-start:3px solid var(--brand-primary,var(--t-accent, #9fdcc8))}.mail-row :is(strong,span,small){overflow-wrap:anywhere;min-width:0}.mail-excerpt{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.82rem;color:var(--brand-muted,#aac1ba)}.mail-row small,.mail-address{font-size:.75rem;color:var(--brand-muted,#aac1ba)}.mail-row .mail-address{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.mail-pagination{justify-content:space-between;margin:0;padding:14px;margin-block-start:auto}.mail-pagination span{font-variant-numeric:tabular-nums}.mail-detail{min-width:0;padding:22px;background:var(--brand-surface,#14181b);max-height:850px;overflow-y:auto;scroll-margin-top:24px}.mail-thread-head{border-bottom:1px solid var(--brand-border,#2a3034);padding-bottom:8px}.mail-thread-head h4{font-size:1.2rem;line-height:1.6;margin:0;overflow-wrap:anywhere}.mail-thread-head .mail-toolbar{gap:7px}.mail-thread-head select{max-width:140px;padding:7px}.mail-thread-head label{display:flex;align-items:center;font-size:.78rem;gap:6px}
.mail-message{padding-block:22px;border-bottom:1px solid var(--brand-border,#2a3034)}.mail-message:last-child{border:0}.mail-message header{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.mail-message header b{font-size:.85rem;overflow-wrap:anywhere;max-width:100%}.mail-message time{font-size:.72rem;color:var(--brand-muted,#aac1ba)}.mail-message pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.85;font-size:.9rem;max-width:78ch;margin:18px 0}.mail-message .mail-address{overflow-wrap:anywhere;line-height:1.8}.mail-badge{font-size:.68rem;border:1px solid var(--brand-border,#2a3034);border-radius:6px;padding:3px 6px;color:var(--brand-mint-soft,#c0ece0)}.mail-attachments{list-style:none;padding:0;display:grid;gap:7px}.mail-attachments li{display:grid;gap:4px;border-inline-start:2px solid var(--brand-border,#2a3034);padding-inline-start:10px;font-size:.8rem;overflow-wrap:anywhere}.mail-attachments span{color:var(--brand-muted,#aac1ba)}.mail-empty{color:var(--brand-muted,#aac1ba);line-height:1.8;padding:20px;font-size:.9rem}
.mail-compose{display:grid;gap:16px;margin-top:22px;min-width:0}.mail-compose h4{margin:0}.mail-compose details summary{cursor:pointer;padding-block:8px}.mail-compose .mail-toolbar{margin-block:4px}.mail-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mail-template-list{display:grid;gap:0;margin:20px 0}.mail-template-list article{display:flex;gap:10px;align-items:center;padding:15px 0;border-bottom:1px solid var(--brand-border,#2a3034)}.mail-template-list article>div{flex:1;display:grid;gap:5px;min-width:0;overflow-wrap:anywhere}.mail-template-list small{color:var(--brand-muted,#aac1ba);font-size:.75rem}.mail-payment-locales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.mail-payment-locales fieldset{display:grid;gap:16px;border:1px solid var(--brand-border,#2a3034);border-radius:12px;padding:18px;min-width:0}.mail-payment-locales legend{padding-inline:8px;color:var(--brand-mint-soft,#c0ece0)}
.mail-preview{display:block;width:100%;min-height:350px;margin-top:20px;border:1px solid var(--brand-border,#2a3034);border-radius:12px;background:#14181b}.mail-warning{color:var(--brand-warning,#efc479);font-size:.86rem;line-height:1.8}.mail-workspace [data-mail-error]{color:var(--brand-error,#ff8796);overflow-wrap:anywhere;line-height:1.8}.mail-workspace [data-mail-notice]{color:var(--brand-mint-soft,#c0ece0);line-height:1.8}.mail-workspace :is([data-mail-error],[data-mail-notice]):empty{display:none}.mail-workspace button:disabled{opacity:.45;cursor:default}.mail-keyboard{margin-top:24px;font-size:.78rem}.mail-workspace .dev-muted{line-height:1.8;overflow-wrap:anywhere}
@media(max-width:1100px){.mail-split{grid-template-columns:minmax(200px,.75fr) minmax(0,1fr)}.mail-payment-locales{grid-template-columns:1fr}.mail-detail{padding:16px}}
@media(max-width:760px){.mail-split{grid-template-columns:1fr}.mail-index{border-inline-end:0;border-bottom:1px solid var(--brand-border,#2a3034)}.mail-list{max-height:330px}.mail-detail{max-height:none;min-height:200px}.mail-connection,.mail-field-grid{grid-template-columns:1fr}.mail-filters{gap:10px}.mail-search{flex-basis:100%}.mail-sections{gap:7px}.mail-sections button{flex:1;min-width:120px}.mail-workspace .panel-head{align-items:start;gap:15px;flex-wrap:wrap}.mail-row{padding:14px}.mail-keyboard{display:none}}

/* ===================== landing.css ===================== */
/* Public landing page: hero with a live-looking Discord preview, systems, plans, comparison, price builder, steps,
   questions and a closing call to action. Everything is scoped to #loginView.lp so dashboard styles stay untouched. */
.lp{--lp-bg:#0b0e10;--lp-panel:#121619;--lp-raised:#181d20;--lp-line:#ffffff10;--lp-line2:#ffffff1c;--lp-text:#f2f2f6;--lp-muted:#a3a4b5;--lp-dim:#7a7b8a;--lp-gold:var(--t-accent, #9fdcc8);--lp-gold2:#c0ece0;--lp-violet:#8e9bff;--lp-green:#4ade80;--lp-red:#f87171;position:relative;min-height:100vh;overflow-x:clip;background:var(--lp-bg);color:var(--lp-text);line-height:1.6}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp a{color:inherit;text-decoration:none}
.lp svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp h1,.lp h2,.lp h3,.lp h4,.lp p{margin:0}
.lp-wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.lp :focus-visible{outline:2px solid var(--lp-gold2);outline-offset:3px;border-radius:8px}

/* Buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 22px;border:1px solid transparent;border-radius:12px;background:none;color:var(--lp-text);font:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.lp-btn svg{flex:0 0 18px;width:18px;height:18px}
.lp-btn.gold{background:linear-gradient(135deg,var(--lp-gold2),var(--lp-gold));color:#062722;box-shadow:0 10px 30px -10px #9fdcc899}
.lp-btn.gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px color-mix(in srgb,var(--t-accent,#9fdcc8) 73%,transparent)}
.lp-btn.ghost{border-color:var(--lp-line2);background:#ffffff06}
.lp-btn.ghost:hover{border-color:#ffffff30;background:#ffffff0d}
.lp-btn.violet{background:linear-gradient(135deg,#aab4ff,var(--lp-violet));color:#11132b;box-shadow:0 10px 30px -12px #8e9bff99}
.lp-btn.violet:hover{transform:translateY(-2px)}
.lp-btn.sm{min-height:38px;padding:0 15px;border-radius:10px;font-size:13.5px}
[dir="ltr"] .lp-flip{transform:scaleX(-1)}

/* Navigation */
.lp-nav{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--lp-line);background:#0b0e10b8;backdrop-filter:blur(14px)}
.lp-nav .lp-wrap{display:flex;align-items:center;gap:28px;height:68px}
.lp-brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700}
.lp-brand img{width:36px;height:36px;border-radius:50%}
.lp-links{display:flex;gap:24px;color:var(--lp-muted);font-size:14px}
.lp-links a{transition:color .2s}
.lp-links a:hover{color:var(--lp-text)}
.lp-nav-actions{display:flex;gap:10px;margin-inline-start:auto}

/* Hero */
.lp-hero{position:relative;padding:72px 0 0;overflow:hidden}
.lp-aurora{position:absolute;inset:-20% -10% auto;height:760px;filter:blur(70px);opacity:.55;pointer-events:none}
.lp-aurora i{position:absolute;border-radius:50%}
.lp-aurora i:nth-child(1){top:40px;inset-inline-start:8%;width:520px;height:520px;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent);animation:lpDrift 14s ease-in-out infinite}
.lp-aurora i:nth-child(2){top:160px;inset-inline-end:6%;width:460px;height:460px;background:#8e9bff3d;animation:lpDrift 18s ease-in-out infinite reverse}
.lp-aurora i:nth-child(3){top:380px;left:40%;width:300px;height:300px;background:#4ade8022;animation:lpDrift 22s ease-in-out infinite}
@keyframes lpDrift{50%{transform:translate(40px,-30px) scale(1.08)}}
.lp-gridbg{position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 72%);pointer-events:none}
.lp-hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.lp-pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;border:1px solid color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent);border-radius:999px;background:#9fdcc812;color:var(--lp-gold2);font-size:13px;font-weight:500}
[dir="rtl"] .lp-pill{padding:6px 8px 6px 14px}
.lp-pill b{padding:1px 9px;border-radius:999px;background:var(--lp-gold);color:#062722;font-size:11.5px}
.lp h1{margin:20px 0 16px;font-size:clamp(34px,4.6vw,58px);line-height:1.18;letter-spacing:-.01em}
.lp h1 span{display:block}
.lp-shine{background:linear-gradient(90deg,var(--lp-gold2),#d6fff5,var(--lp-gold),var(--lp-gold2));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lpShine 6s linear infinite}
@keyframes lpShine{to{background-position:-300% 0}}
.lp-lead{max-width:540px;margin-bottom:28px!important;color:var(--lp-muted);font-size:17.5px}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px}
.lp-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;color:var(--lp-muted);font-size:13.5px}
.lp-trust span{display:inline-flex;align-items:center;gap:7px}
.lp-trust svg{width:16px;height:16px;color:var(--lp-green)}

/* Discord preview */
.lp-stage{position:relative;height:520px}
.lp-window{position:absolute;inset:24px 20px 64px 40px;overflow:hidden;border:1px solid var(--lp-line2);border-radius:18px;background:linear-gradient(180deg,#1d1e27,#16171e);box-shadow:0 40px 90px -30px #000c,inset 0 0 0 1px #ffffff05}
.lp-win-head{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-bottom:1px solid var(--lp-line);color:var(--lp-muted);font-size:13px}
.lp-win-head i{width:10px;height:10px;border-radius:50%;background:#ffffff1a}
.lp-win-head>span{display:inline-flex;align-items:center;gap:6px;margin-inline-start:10px}
.lp-win-head svg{width:15px;height:15px}
.lp-win-head em{margin-inline-start:4px;padding:1px 8px;border-radius:999px;background:#ffffff0d;color:var(--lp-dim);font-size:11px;font-style:normal}
.lp-feed{display:flex;flex-direction:column;gap:14px;padding:18px}
.lp-msg{display:flex;gap:11px;opacity:0;animation:lpMsg 10s cubic-bezier(.2,.8,.2,1) infinite}
.lp-msg:nth-child(2){animation-delay:1.1s}
.lp-msg:nth-child(3){animation-delay:2.2s}
@keyframes lpMsg{0%{opacity:0;transform:translateY(14px)}6%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
.lp-msg img{flex:0 0 36px;width:36px;height:36px;border-radius:50%}
.lp-who{font-size:13.5px;font-weight:600}
.lp-who em{margin-inline-start:6px;padding:0 5px;border-radius:4px;background:#5865f2;color:#fff;font-size:10px;font-style:normal}
.lp-card{min-width:240px;max-width:360px;margin-top:6px;padding:12px 14px;border-inline-start:3px solid var(--lp-gold);border-radius:8px;background:#ffffff08;color:#d6d7e0;font-size:13px}
.lp-card.green{border-color:var(--lp-green)}
.lp-card.red{border-color:var(--lp-red)}
.lp-card strong{display:block;margin-bottom:3px;color:var(--lp-text)}
.lp-btns{display:flex;gap:6px;margin-top:9px}
.lp-btns span{padding:4px 11px;border-radius:6px;background:#ffffff12;font-size:12px}
.lp-btns .p{background:#5865f2;color:#fff}
.lp-btns .g{background:#248046;color:#fff}
.lp-float{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--lp-line2);border-radius:14px;background:#181d20e6;backdrop-filter:blur(10px);box-shadow:0 18px 40px -16px #000;font-size:13px;animation:lpBob 6s ease-in-out infinite}
.lp-float b{display:block;font-size:15px}
.lp-float small{color:var(--lp-dim);font-size:11.5px}
.lp-ic{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px}
.lp-ic svg{width:18px;height:18px}
.lp-float.f1{top:0;inset-inline-end:0}
.lp-float.f1 .lp-ic{background:#4ade801f;color:var(--lp-green)}
.lp-float.f2{bottom:0;inset-inline-start:12%;animation-delay:-2s}
.lp-float.f2 .lp-ic{background:#f871711f;color:var(--lp-red)}
.lp-float.f3{bottom:0;inset-inline-end:4%;animation-delay:-4s}
.lp-float.f3 .lp-ic{background:#9fdcc81f;color:var(--lp-gold)}
@keyframes lpBob{50%{transform:translateY(-12px)}}

/* Numbers */
.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border:1px solid var(--lp-line);border-radius:18px;background:#0d131499}
.lp-stats.three{grid-template-columns:repeat(3,1fr)}
.lp-stats>div{padding:22px;text-align:center}
.lp-stats>div+div{border-inline-start:1px solid var(--lp-line)}
.lp-stats b{display:inline-flex;align-items:center;gap:8px;font-size:30px;line-height:1.2}
.lp-stats>div>span{display:block;color:var(--lp-muted);font-size:13px}
.lp-stats i{width:9px;height:9px;border-radius:50%;background:var(--lp-green);animation:lpPing 1.8s infinite}
@keyframes lpPing{0%{box-shadow:0 0 0 0 #4ade8080}70%,100%{box-shadow:0 0 0 10px #4ade8000}}

/* Systems ribbon */
.lp-marquee{margin-top:56px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lp-track{display:flex;gap:12px;width:max-content;animation:lpScrollRtl 40s linear infinite}
[dir="ltr"] .lp-track{animation-name:lpScrollLtr}
.lp-marquee:hover .lp-track{animation-play-state:paused}
.lp-track span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--lp-line);border-radius:999px;background:var(--lp-panel);color:var(--lp-muted);font-size:13.5px;white-space:nowrap}
.lp-track svg{width:16px;height:16px;color:var(--lp-gold)}
@keyframes lpScrollRtl{to{transform:translateX(50%)}}
@keyframes lpScrollLtr{to{transform:translateX(-50%)}}

/* Section heads */
.lp-block{padding-top:96px;scroll-margin-top:60px}
.lp-head{max-width:660px;margin:0 auto 44px;text-align:center}
.lp-eyebrow{margin-bottom:10px!important;color:var(--lp-gold);font-size:13px;font-weight:600}
.lp-head h2{margin-bottom:12px;font-size:clamp(28px,3.4vw,40px);line-height:1.25}
.lp-head p:last-child{color:var(--lp-muted);font-size:16px}

/* Systems bento */
.lp-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:230px;gap:16px}
.lp-tile{position:relative;grid-column:span 2;display:flex;flex-direction:column;padding:22px;overflow:hidden;border:1px solid var(--lp-line);border-radius:20px;background:linear-gradient(180deg,#191a22,#14151b);transition:border-color .25s,transform .25s}
.lp-tile:hover{border-color:var(--lp-line2);transform:translateY(-3px)}
.lp-tile.w3{grid-column:span 3}
.lp-tile h3{margin-bottom:4px;padding-inline-end:70px;font-size:17px}
.lp-tile p{color:var(--lp-muted);font-size:13.5px}
.lp-lvl{position:absolute;top:18px;inset-inline-end:18px;padding:2px 10px;border-radius:999px;background:#4ade801a;color:#86efac;font-size:11.5px;font-weight:600}
.lp-lvl.pro{background:#9fdcc81f;color:var(--lp-gold)}
.lp-viz{display:flex;flex:1;align-items:flex-end;gap:8px;margin-top:14px}
.lp-bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--lp-gold),#9fdcc833);transform-origin:bottom;animation:lpGrow 2.6s ease-in-out infinite alternate}
.lp-bars i:nth-child(1){height:40%}
.lp-bars i:nth-child(2){height:75%;animation-delay:.2s}
.lp-bars i:nth-child(3){height:55%;animation-delay:.4s}
.lp-bars i:nth-child(4){height:90%;animation-delay:.6s}
.lp-bars i:nth-child(5){height:65%;animation-delay:.8s}
@keyframes lpGrow{from{transform:scaleY(.45)}}
.lp-shield{align-items:center;justify-content:center}
.lp-ring{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#4ade8014;color:var(--lp-green)}
.lp-ring::before,.lp-ring::after{content:"";position:absolute;inset:0;border:1.5px solid #4ade8066;border-radius:50%;animation:lpWave 2.4s ease-out infinite}
.lp-ring::after{animation-delay:1.2s}
.lp-ring svg{width:36px;height:36px}
@keyframes lpWave{to{transform:scale(1.9);opacity:0}}
.lp-tickets{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:7px}
.lp-tickets div{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;background:#ffffff07;font-size:12.5px;animation:lpNudge 4s ease-in-out infinite}
.lp-tickets div:nth-child(2){animation-delay:.3s}
.lp-tickets div:nth-child(3){animation-delay:.6s}
.lp-tickets i{width:8px;height:8px;border-radius:50%;background:var(--lp-green)}
.lp-tickets div:nth-child(2) i{background:var(--lp-gold)}
.lp-tickets div:nth-child(3) i{background:var(--lp-violet)}
.lp-tickets em{margin-inline-start:auto;color:var(--lp-dim);font-style:normal}
@keyframes lpNudge{50%{transform:translateX(-6px)}}
.lp-swatches{align-items:center;gap:10px}
.lp-swatches i{width:38px;height:38px;border-radius:12px;animation:lpPop 3s ease-in-out infinite}
.lp-swatches i:nth-child(1){background:#f87171}
.lp-swatches i:nth-child(2){background:#fbbf24;animation-delay:.2s}
.lp-swatches i:nth-child(3){background:#4ade80;animation-delay:.4s}
.lp-swatches i:nth-child(4){background:#60a5fa;animation-delay:.6s}
.lp-swatches i:nth-child(5){background:#c084fc;animation-delay:.8s}
@keyframes lpPop{0%,100%{transform:none}30%{transform:translateY(-10px) rotate(-6deg)}}
.lp-voice{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:6px;font-size:12.5px}
.lp-voice div{display:flex;align-items:center;gap:8px;color:var(--lp-muted)}
.lp-voice svg{width:15px;height:15px}
.lp-voice .new{color:var(--lp-text);animation:lpFade 3s ease-in-out infinite}
@keyframes lpFade{0%,20%{opacity:0;transform:translateY(6px)}40%,100%{opacity:1;transform:none}}
.lp-welcome{align-items:center;justify-content:center}
.lp-wcard{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--lp-line2);border-radius:14px;background:linear-gradient(135deg,#9fdcc826,#8e9bff1a);animation:lpBob 5s ease-in-out infinite}
.lp-wcard i{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--lp-gold2),var(--lp-violet))}
.lp-wcard b{display:block;font-size:14px}
.lp-wcard small{color:var(--lp-muted);font-size:12px}
.lp-chips{flex-wrap:wrap;align-content:flex-end;gap:7px}
.lp-chips span{padding:5px 11px;border:1px solid var(--lp-line);border-radius:999px;background:#ffffff05;color:var(--lp-muted);font-size:12px;transition:border-color .2s,color .2s}
.lp-tile:hover .lp-chips span{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent);color:var(--lp-text)}

/* Plans */
.lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.lp-plan{position:relative;display:flex;flex-direction:column;gap:16px;padding:28px;border:1px solid var(--lp-line);border-radius:22px;background:linear-gradient(180deg,#191a22,#14151b);transition:transform .25s,border-color .25s}
.lp-plan:hover{transform:translateY(-6px);border-color:var(--lp-line2)}
@property --lp-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.lp-plan.pro{border:1.5px solid transparent;background:linear-gradient(180deg,#1f1c17,#16151a) padding-box,conic-gradient(from var(--lp-angle),var(--t-accent, #9fdcc8),#9fdcc810,#c0ece0,#9fdcc810,var(--t-accent, #9fdcc8)) border-box;box-shadow:0 30px 70px -30px color-mix(in srgb,var(--t-accent,#9fdcc8) 40%,transparent);animation:lpSpin 6s linear infinite}
@keyframes lpSpin{to{--lp-angle:360deg}}
.lp-tag{position:absolute;top:-13px;inset-inline-start:24px;padding:3px 12px;border-radius:999px;background:var(--lp-gold);color:#062722;font-size:12px;font-weight:700}
.lp-plan-top{display:flex;align-items:center;gap:12px}
.lp-plan-ic{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:13px;background:#ffffff0a;color:var(--lp-muted)}
.lp-plan-ic svg{width:22px;height:22px}
.lp-plan.pro .lp-plan-ic{background:#9fdcc81f;color:var(--lp-gold)}
.lp-plan.custom .lp-plan-ic{background:#8e9bff1f;color:var(--lp-violet)}
.lp-plan h3{font-size:20px}
.lp-for{color:var(--lp-dim);font-size:13px}
.lp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-height:42px}
.lp-price b{font-size:38px;line-height:1}
.lp-price small{color:var(--lp-muted)}
.lp-plan ul{display:grid;gap:10px;margin:0;padding:18px 0 0;border-top:1px solid var(--lp-line);list-style:none;font-size:14px}
.lp-plan li{display:flex;align-items:flex-start;gap:9px}
.lp-plan li svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:var(--lp-green)}
.lp-plan li.off{color:var(--lp-dim)}
.lp-plan li.off svg{color:#55566a}
.lp-plan .lp-btn{margin-top:auto}

/* Comparison */
.lp-compare{overflow-x:auto;border:1px solid var(--lp-line);border-radius:20px;background:var(--lp-panel)}
.lp-compare table{width:100%;min-width:620px;border-collapse:collapse;font-size:14.5px}
.lp-compare th,.lp-compare td{padding:14px 22px;text-align:center}
.lp-compare th:first-child,.lp-compare td:first-child{text-align:start}
.lp-compare thead th{background:#1a1b23;font-size:15px}
.lp-compare thead th small{display:block;color:var(--lp-dim);font-size:12px;font-weight:400}
.lp-compare thead th.pro{color:var(--lp-gold)}
.lp-compare thead th.custom{color:var(--lp-violet)}
.lp-compare tbody tr{border-top:1px solid var(--lp-line)}
.lp-compare tbody tr:not(.lp-group):hover{background:#ffffff04}
.lp-compare td svg{width:20px;height:20px;vertical-align:middle}
.lp-compare td small{display:block;color:var(--lp-dim);font-size:11.5px}
.lp-compare .y{color:var(--lp-green)}
.lp-compare .n{color:#4d4e5c}
.lp-compare td.pro{background:#9fdcc808}
.lp-compare .lp-group td{padding-top:20px;color:var(--lp-gold);font-size:12.5px;font-weight:600}

/* Price builder */
.lp-builder{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.lp-box{padding:26px;border:1px solid var(--lp-line);border-radius:22px;background:var(--lp-panel)}
.lp-box h3{margin:0 0 12px;color:var(--lp-muted);font-size:14px;font-weight:500}
.lp-box h3+.lp-mods,.lp-box .lp-seg+h3{margin-top:0}
.lp-seg{display:inline-flex;flex-wrap:wrap;gap:2px;margin-bottom:22px;padding:4px;border-radius:12px;background:#ffffff08}
.lp-seg button{min-height:34px;padding:0 16px;border:0;border-radius:9px;background:none;color:var(--lp-muted);font:inherit;font-size:14px;cursor:pointer;transition:background .2s,color .2s}
.lp-seg button:hover{color:var(--lp-text)}
.lp-seg button[aria-pressed="true"]{background:var(--lp-gold);color:#062722;font-weight:600}
.lp-builder-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.lp-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.lp-mod{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--lp-line);border-radius:14px;background:#ffffff04;color:var(--lp-text);font:inherit;font-size:14px;text-align:start;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.lp-mod:hover{border-color:var(--lp-line2)}
.lp-mod:active{transform:scale(.98)}
.lp-mod small{color:var(--lp-dim)}
.lp-mod em{position:absolute;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--lp-line2);border-radius:6px}
.lp-mod em svg{width:13px;height:13px;opacity:0;stroke-width:3}
.lp-mod[aria-pressed="true"]{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 53%,transparent);background:#9fdcc810}
.lp-mod[aria-pressed="true"] small{color:var(--lp-gold2)}
.lp-mod[aria-pressed="true"] em{border-color:var(--lp-gold);background:var(--lp-gold);color:#062722}
.lp-mod[aria-pressed="true"] em svg{opacity:1}
.lp-total{position:sticky;top:90px;display:flex;flex-direction:column;gap:14px}
.lp-sum{font-size:44px;font-weight:700;line-height:1.1}
.lp-sum small{color:var(--lp-muted);font-size:16px;font-weight:400}
.lp-sum.empty{color:var(--lp-dim);font-size:20px;font-weight:500}
.lp-note{align-self:flex-start;padding:3px 10px;border-radius:999px;background:#4ade801a;color:var(--lp-green);font-size:12.5px}
.lp-rows{display:grid;gap:8px;padding:14px 0;border-block:1px solid var(--lp-line);color:var(--lp-muted);font-size:14px}
.lp-rows div{display:flex;justify-content:space-between;gap:16px}
.lp-rows b{color:var(--lp-text);font-weight:500;text-align:end}
.lp-total .lp-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* Steps */
.lp-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none}
.lp-steps::before{content:"";position:absolute;top:34px;right:16%;left:16%;height:2px;background:linear-gradient(90deg,transparent,var(--lp-gold),transparent);background-size:200% 100%;animation:lpFlow 3s linear infinite}
@keyframes lpFlow{to{background-position:-200% 0}}
.lp-steps li{position:relative;padding:0 12px;text-align:center}
.lp-steps li>span{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 16px;border:1px solid color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent);border-radius:50%;background:var(--lp-bg);box-shadow:0 0 0 8px var(--lp-bg);color:var(--lp-gold);font-size:22px;font-weight:700}
.lp-steps h3{margin-bottom:6px;font-size:17px}
.lp-steps p{color:var(--lp-muted);font-size:14px}

/* Questions */
.lp-faq{display:grid;gap:10px;max-width:820px;margin:0 auto}
.lp-faq details{border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-panel);transition:border-color .2s}
.lp-faq details[open]{border-color:#9fdcc833}
.lp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;font-weight:600;list-style:none;cursor:pointer}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary svg{flex:0 0 18px;width:18px;height:18px;color:var(--lp-dim);transition:transform .2s,color .2s}
.lp-faq details[open] summary svg{transform:rotate(45deg);color:var(--lp-gold)}
.lp-faq details p{padding:0 20px 18px;color:var(--lp-muted);font-size:14.5px}

/* Closing call */
.lp-final{position:relative;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;margin:110px 0 60px;padding:56px;overflow:hidden;border:1px solid #9fdcc833;border-radius:28px;background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent),transparent 50%),radial-gradient(circle at 10% 90%,#8e9bff30,transparent 50%),#17181f}
[dir="rtl"] .lp-final{background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent),transparent 50%),radial-gradient(circle at 90% 90%,#8e9bff30,transparent 50%),#17181f}
.lp-final h2{margin-bottom:10px;font-size:clamp(26px,3vw,36px)}
.lp-final p{color:var(--lp-muted);font-size:16px}
.lp-final .lp-cta{margin-top:22px}
.lp-final img{width:170px;height:170px;border-radius:50%;box-shadow:0 0 0 10px color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent),0 0 0 22px #9fdcc80a;animation:lpBob 6s ease-in-out infinite}
.lp-online{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--lp-muted);font-size:13.5px}
.lp-online i{width:8px;height:8px;border-radius:50%;background:var(--lp-green);animation:lpPing 1.8s infinite}
.lp-online strong{color:var(--lp-text)}
.lp-footer{padding:26px 0;border-top:1px solid var(--lp-line);color:var(--lp-dim);font-size:13px}
.lp-footer .lp-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}

/* Scroll reveal (setupLandingMotion adds .visible) */
.lp .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.lp .reveal.visible{opacity:1;transform:none}
.lp-plans .reveal:nth-child(2),.lp-steps .reveal:nth-child(2){transition-delay:.12s}
.lp-plans .reveal:nth-child(3),.lp-steps .reveal:nth-child(3){transition-delay:.24s}

/* Responsive */
@media (max-width:1100px){
  .lp-links{gap:18px}
}
@media (max-width:980px){
  .lp-links{display:none}
  .lp-hero{padding-top:48px}
  .lp-hero-grid{grid-template-columns:minmax(0,1fr)}
  .lp-stage{height:500px}
  .lp-plans,.lp-builder{grid-template-columns:minmax(0,1fr)}
  .lp-total{position:static}
  .lp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-tile,.lp-tile.w3{grid-column:span 1}
  .lp-stats,.lp-stats.three{grid-template-columns:repeat(2,1fr)}
  .lp-stats>div:nth-child(3){border-inline-start:0}
  .lp-stats>div:nth-child(n+3){border-top:1px solid var(--lp-line)}
  .lp-stats.three>div:nth-child(3){grid-column:1/-1}
  .lp-final{grid-template-columns:minmax(0,1fr);padding:36px 22px;text-align:center}
  .lp-final img{grid-row:1;margin:0 auto}
  .lp-final .lp-cta{justify-content:center}
}
@media (max-width:600px){
  .lp-block{padding-top:72px}
  .lp-bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:210px}
  .lp-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-steps{grid-template-columns:minmax(0,1fr);gap:30px}
  .lp-steps::before{display:none}
  .lp-float.f1,.lp-float.f3{display:none}
  .lp-stage{height:480px}
  .lp-window{inset:0 0 56px}
  .lp-card{min-width:0}
  .lp-nav-actions .ghost{display:none}
  .lp-nav .lp-wrap{gap:12px}
  .lp-cta .lp-btn{flex:1 1 100%}
  .lp-sum{font-size:36px}
  .lp-plan{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  .lp *,.lp *::before,.lp *::after{animation:none!important;transition:none!important}
  .lp .reveal,.lp-msg{opacity:1;transform:none}
}
.lp-track .module-visual{display:inline-grid;place-items:center;flex:0 0 18px;width:18px;height:18px;padding:0;border:0;border-radius:0;background:none;color:var(--lp-gold)}
.lp-track .module-visual svg{width:16px;height:16px}

/* ===================== games.css ===================== */
/* Games settings page: tabs, game tiles with an on/off switch, the per-game settings drawer, image cards and the
   Discord commands list. Builds on the shared settings layout from settings.css. */
#settingsForm .games-tabs{display:inline-flex;justify-self:start;width:max-content;max-width:100%;gap:2px;margin-bottom:14px;padding:4px;border-radius:11px;background:#ffffff08}
#settingsForm .games-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--ui-muted);font:inherit;font-size:13px;cursor:pointer}
#settingsForm .games-tabs button em{padding:0 7px;border-radius:999px;background:#ffffff0d;color:var(--ui-text);font-size:11px;font-style:normal}
#settingsForm .games-tabs button[aria-pressed="true"]{background:var(--ui-accent);color:var(--ui-on-accent);font-weight:600}
#settingsForm .games-tabs button[aria-pressed="true"] em{background:#00000026;color:inherit}
#settingsForm .games-tabs button:focus-visible{outline:2px solid var(--ui-accent-hover);outline-offset:2px}

#settingsForm .games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
#settingsForm .game-tile{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid #ffffff10;border-radius:12px;background:#ffffff04;transition:border-color .15s,background .15s,opacity .15s}
[dir="rtl"] #settingsForm .game-tile{padding:6px 6px 6px 12px}
#settingsForm .game-tile:hover{border-color:#ffffff22}
#settingsForm .game-tile.selected{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 53%,transparent);background:color-mix(in srgb,var(--t-accent,#9fdcc8) 5%,transparent)}
#settingsForm .game-tile.off .game-tile-main{opacity:.5}
#settingsForm .game-tile-main{display:flex;flex:1;align-items:center;gap:10px;min-width:0;padding:5px;border:0;border-radius:9px;background:none;color:var(--ui-text);font:inherit;text-align:start;cursor:pointer}
#settingsForm .game-tile-main:focus-visible{outline:2px solid var(--ui-accent-hover);outline-offset:1px}
#settingsForm .game-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent);color:var(--ui-accent)}
#settingsForm .game-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#settingsForm .game-tile-copy{display:grid;flex:1;min-width:0}
#settingsForm .game-tile-copy b{overflow:hidden;font-size:13.5px;text-overflow:ellipsis;white-space:nowrap}
#settingsForm .game-tile-copy small{color:#7b9a90;font-size:11.5px}
#settingsForm .game-gear{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid #ffffff12;border-radius:8px;color:var(--ui-muted)}
#settingsForm .game-gear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
#settingsForm .game-tile.selected .game-gear{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 40%,transparent);color:var(--ui-accent)}

#settingsForm .game-drawer{display:grid;gap:14px;margin-top:14px;padding:16px;border:1px solid color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent);border-radius:14px;background:#121619;animation:gameDrawerIn .2s ease}
#settingsForm .game-drawer[hidden]{display:none}
@keyframes gameDrawerIn{from{opacity:0;transform:translateY(-4px)}}
#settingsForm .game-drawer-head{display:flex;align-items:center;gap:10px}
#settingsForm .game-drawer-head h4{margin:0;font-size:15px}
#settingsForm .game-drawer-head small{margin-inline-start:auto;color:#7b9a90;font-size:12px}
#settingsForm .game-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
#settingsForm .game-fields .field{margin:0}
#settingsForm .game-toggles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
#settingsForm .game-switch-row{justify-content:space-between;min-height:46px;padding:0 14px;border:1px solid #ffffff10;border-radius:11px;background:#ffffff04;font-size:13.5px;font-weight:500;cursor:pointer}
#settingsForm .game-color{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input)}
html .app-shell #settingsForm .game-color input[type="color"]{flex:0 0 28px;min-height:0;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:none;cursor:pointer}
#settingsForm .game-color span{flex:1;color:var(--ui-muted);font-size:12.5px}
#settingsForm .text-button{border:0;background:none;color:var(--ui-accent);font:inherit;font-size:12.5px;cursor:pointer}
#settingsForm .text-button:hover{text-decoration:underline}

#settingsForm .game-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
#settingsForm .game-image{display:flex;align-items:center;gap:12px;padding:8px;border:1px dashed #ffffff26;border-radius:12px;transition:opacity .2s}
#settingsForm .game-image.custom{border-style:solid;border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent)}
#settingsForm .game-image.busy{opacity:.5;pointer-events:none}
#settingsForm .game-image-thumb{display:grid;place-items:center;flex:0 0 72px;width:72px;height:48px;overflow:hidden;border-radius:8px;background:#ffffff08;color:#5f7a72}
#settingsForm .game-image-thumb img{width:100%;height:100%;object-fit:cover}
#settingsForm .game-image-thumb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
#settingsForm .game-image-copy{display:grid;flex:1;min-width:0}
#settingsForm .game-image-copy b{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
#settingsForm .game-image-copy small{color:#7b9a90;font-size:11.5px}
#settingsForm .game-image.custom .game-image-copy small{color:var(--ui-accent-hover)}
#settingsForm .game-image-actions{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
#settingsForm .game-image-actions label{position:relative;overflow:hidden;cursor:pointer}
#settingsForm .game-image-actions input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}

#settingsForm .game-commands{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
#settingsForm .game-command{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#ffffff05;font-size:13px}
#settingsForm .game-command code{unicode-bidi:plaintext;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent);color:var(--ui-accent-hover);font-family:inherit;white-space:nowrap}
#settingsForm .game-note{margin:0;padding:10px 12px;border:1px solid #9fdcc826;border-radius:10px;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 5%,transparent);color:var(--ui-muted);font-size:12.5px;line-height:1.7}

@media (max-width:600px){
  #settingsForm .games-grid{grid-template-columns:minmax(0,1fr)}
  #settingsForm .game-image{flex-wrap:wrap}
  #settingsForm .game-image-actions{flex-direction:row;align-items:center;width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){#settingsForm .game-drawer{animation:none}}
html .app-shell #settingsForm .game-color input[type="color"]{-webkit-appearance:none;appearance:none;width:28px!important;min-width:28px!important;height:28px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
#settingsForm .game-color input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
#settingsForm .game-color input[type="color"]::-webkit-color-swatch{border:1px solid #ffffff30;border-radius:7px}
#settingsForm .game-color input[type="color"]::-moz-color-swatch{border:1px solid #ffffff30;border-radius:7px}
#settingsForm .game-color input[data-color-set="false"]{opacity:.3}
#settingsForm .game-tile-main.static{cursor:default}
/* New engine: tags, notes and the old points converter */
.game-tile-copy .game-tag{justify-self:start;align-self:start;width:max-content;margin-top:3px;padding:1px 7px;border-radius:999px;background:#ffffff0d;color:var(--ui-muted);font-size:10.5px;font-style:normal;white-space:nowrap}
.game-note{margin:0 0 12px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:10px;background:#ffffff06;color:var(--ui-muted);font-size:12.5px;line-height:1.6}
.game-note.warn{border-color:#f5a62466;background:#f5a62414;color:#f7c66b}
.games-points{display:grid;gap:10px}
.games-points p{margin:0}
.games-points-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.games-points-row .field{flex:1 1 220px;margin:0}
@media (max-width:560px){.games-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.games-tabs button{justify-content:center;padding:0 6px;font-size:12px}.games-tabs button em{display:none}.games-points-row .button{flex:1 1 100%;justify-content:center}}
html[dir="rtl"] .game-tile-copy small[dir="ltr"]{text-align:right}

/* Image look of a game: colour swatches, background and a live preview of a game picture. */
#settingsForm .game-look,#settingsForm .game-shop{display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--ui-border)}
#settingsForm .game-look-head{display:grid;gap:2px}
#settingsForm .game-look-head b{font-size:14px}
#settingsForm .game-look-head small{color:var(--ui-muted);font-size:12px}
#settingsForm .game-look-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:16px;align-items:start}
#settingsForm .game-look-controls{display:grid;gap:10px;min-width:0}
#settingsForm .game-swatches{display:flex;flex-wrap:wrap;gap:8px}
#settingsForm .game-swatch{position:relative;width:30px;height:30px;padding:0;border:2px solid #121619;border-radius:50%;background:var(--swatch,var(--t-accent, #9fdcc8));box-shadow:0 0 0 1px #ffffff1f;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
#settingsForm .game-swatch:hover{transform:scale(1.08)}
#settingsForm .game-swatch:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#settingsForm .game-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ui-text)}
#settingsForm .game-swatch.custom{overflow:hidden;background:conic-gradient(#ef5f67,#efc479,#5fcf80,var(--t-accent, #9fdcc8),#5b9dff,#a78bfa,#ef5f67)}
#settingsForm .game-swatch.custom input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer}
#settingsForm .game-look-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#settingsForm .game-look-actions small,#settingsForm .game-look-controls>small{font-size:11.5px;line-height:1.6}
#settingsForm .game-look-preview{display:grid;place-items:center;min-height:150px;overflow:hidden;border:1px solid var(--ui-border);border-radius:12px;background:#ffffff05;transition:opacity .2s}
#settingsForm .game-look-preview.busy{opacity:.5}
#settingsForm .game-look-preview img{display:block;width:100%;height:auto}
#settingsForm .image-designs{display:grid;gap:10px;min-width:0}
#settingsForm .image-design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#settingsForm .image-design-field{display:grid;gap:8px;min-width:0}
#settingsForm .image-design-field select,#settingsForm .image-preview-kind select{width:100%;min-width:0;padding:12px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-panel,#151a1b);color:var(--ui-text,#e6f1ef);font:inherit}
#settingsForm .image-preview-kind{display:grid;gap:6px;min-width:0;flex:1}
#settingsForm .image-look-preview{align-self:start;min-width:0}
#settingsForm .image-frame-control{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 0;border-block:1px solid var(--ui-border)}
#settingsForm .image-frame-control label{display:flex;align-items:center;gap:12px;font-size:13px}
#settingsForm .image-frame-control input[type=color]{inline-size:48px;block-size:34px;padding:3px;border:1px solid var(--ui-border);border-radius:9px;background:transparent;cursor:pointer}
#settingsForm .image-frame-control small{flex-basis:100%;font-size:11.5px}
@media(max-width:600px){#settingsForm .image-design-grid{grid-template-columns:minmax(0,1fr)}}
#settingsForm .game-look-preview .game-icon{opacity:.5}
@media (max-width:760px){#settingsForm .game-look-body{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){#settingsForm .game-swatch{transition:none}}
#settingsForm .game-fields .field.full{grid-column:1/-1}

/* ===================== levels.css ===================== */
/* Levels page. Reuses the dashboard's shared pieces (resource pickers, choice buttons, game-fields grids) and only
   adds the reward cards, multiplier rows, command list and members table. */
#settingsForm .levels-choice-field{margin-bottom:14px}
html .app-shell #settingsForm .levels-choice-field .message-style-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
html .app-shell #settingsForm .levels-choice-field .message-style-option{min-width:0;justify-content:center}
#settingsForm .levels-announce-room{margin-bottom:14px}
#settingsForm .levels-announce-room.hidden,#settingsForm .levels-empty.hidden,#settingsForm .levels-warning.hidden{display:none}
#settingsForm .levels-currency-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
#settingsForm .levels-gap{margin-top:14px}
#settingsForm .levels-note{margin:0 0 12px;font-size:12.5px;line-height:1.7}
#settingsForm .levels-empty{margin:0;padding:18px;border:1px dashed var(--ui-border);border-radius:10px;text-align:center;font-size:13px}
#settingsForm .levels-items{display:grid;gap:8px;margin-bottom:10px}
#settingsForm .add-row{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}
#settingsForm .add-row svg,#settingsForm .levels-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#settingsForm .add-row+.switch-row{margin-top:12px}

/* Reward role cards: the same collapsible card as auto replies and ticket types. */
#settingsForm .levels-item{overflow:hidden;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input)}
#settingsForm .levels-item>summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto 18px;align-items:center;gap:12px;min-height:60px;padding:10px 14px;list-style:none;cursor:pointer}
#settingsForm .levels-item>summary::-webkit-details-marker{display:none}
#settingsForm .levels-item>summary:hover{background:var(--ui-hover)}
#settingsForm .levels-item[open]>summary{border-bottom:1px solid var(--ui-border)}
#settingsForm .levels-item[open]>summary .resource-chevron{transform:rotate(180deg)}
#settingsForm .levels-item-index{display:grid;place-items:center;width:34px;height:34px;border:1px solid color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent);border-radius:8px;background:var(--ui-accent-soft);color:var(--ui-accent);font-size:12px;font-weight:700}
#settingsForm .levels-item-copy{display:grid;gap:3px;min-width:0}
#settingsForm .levels-item-title{display:flex;align-items:center;gap:8px;min-width:0}
#settingsForm .levels-item-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
#settingsForm .levels-item-copy small{overflow:hidden;color:var(--ui-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
#settingsForm .levels-item-copy small.levels-missing{color:#5be5c5}
#settingsForm .levels-item .role-color-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--role-color,#60738b)}
#settingsForm .levels-item-flag{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#5be5c514;color:#8af0d8}
#settingsForm .levels-item-flag.hidden{visibility:hidden}
#settingsForm .levels-item-flag svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#settingsForm .levels-item .resource-chevron{width:18px;height:18px;fill:none;stroke:var(--ui-muted);stroke-width:2;transition:transform .2s}
#settingsForm .levels-item-body{display:grid;gap:12px;padding:14px}
#settingsForm .levels-item-body>.field{margin:0}
#settingsForm .levels-conditions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#settingsForm .levels-conditions .field{margin:0}
#settingsForm .levels-item-body .remove-type{justify-self:end;margin:0}
#settingsForm .levels-warning{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border:1px solid #5be5c540;border-radius:8px;background:#5be5c512;color:#8af0d8;font-size:12.5px}
#settingsForm .levels-warning svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Multiplier rows. */
#settingsForm .levels-subhead{display:grid;gap:3px;margin-bottom:10px}
#settingsForm .levels-subhead b{font-size:13.5px}
#settingsForm .levels-subhead small{color:var(--ui-muted);font-size:12px}
#settingsForm .levels-boost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end;padding:12px 14px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input)}
#settingsForm .levels-boost>.field{margin:0}
#settingsForm .levels-boost-side{display:flex;align-items:flex-end;gap:8px}
#settingsForm .levels-boost-side .levels-choice-field{flex:1;margin:0}
#settingsForm .levels-remove{flex:none;width:42px;height:42px}
#settingsForm .levels-divider{height:1px;margin:18px 0;background:var(--ui-border)}

/* Discord commands list. */
#settingsForm .levels-commands{display:grid;margin-bottom:16px;border:1px solid var(--ui-border);border-radius:10px;overflow:hidden}
#settingsForm .levels-command{display:grid;grid-template-columns:38px minmax(0,1fr) auto minmax(150px,220px);align-items:center;gap:12px;padding:10px 14px;background:var(--ui-input)}
#settingsForm .levels-command+.levels-command{border-top:1px solid var(--ui-border)}
#settingsForm .levels-command-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--ui-accent-soft);color:var(--ui-accent)}
#settingsForm .levels-command-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#settingsForm .levels-command-copy{display:grid;gap:2px;min-width:0}
#settingsForm .levels-command-copy b{font-size:13.5px}
#settingsForm .levels-command-copy small{overflow:hidden;color:var(--ui-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
#settingsForm .levels-command-tag{padding:3px 9px;border-radius:999px;background:#ffffff0a;color:var(--ui-muted);font-size:11px;white-space:nowrap}
#settingsForm .levels-command-tag.staff{background:var(--ui-accent-soft);color:var(--ui-accent)}
#settingsForm .levels-command input{width:100%;min-height:40px;padding:0 12px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-panel);color:var(--ui-text);font:inherit;font-weight:600}
#settingsForm .levels-command input:focus{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 3px #9fdcc822}

/* Members table. */
#settingsForm .levels-search{position:relative;margin-bottom:12px}
#settingsForm .levels-search svg{position:absolute;inset-inline-start:13px;top:50%;width:17px;height:17px;transform:translateY(-50%);fill:none;stroke:var(--ui-muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
#settingsForm .levels-search input{width:100%;min-height:42px;padding:0 14px;padding-inline-start:40px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input);color:var(--ui-text);font:inherit}
#settingsForm .levels-search input:focus{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 3px #9fdcc822}
#settingsForm .levels-table-wrap{overflow-x:auto;border:1px solid var(--ui-border);border-radius:10px}
#settingsForm .levels-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13.5px}
#settingsForm .levels-table th{padding:10px 14px;background:#ffffff05;color:#7d7e90;font-size:11.5px;font-weight:600;text-align:start;white-space:nowrap}
#settingsForm .levels-table td{padding:9px 14px;border-top:1px solid #ffffff08;vertical-align:middle;white-space:nowrap}
#settingsForm .levels-table td:first-child{width:44px;color:#7d7e90;font-weight:600}
#settingsForm .levels-table tbody tr:nth-child(-n+3) td:first-child{color:var(--ui-accent)}
#settingsForm .levels-table td small{color:#7d7e90;font-size:11.5px}
#settingsForm .levels-level{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:999px;background:var(--ui-accent-soft);color:var(--ui-accent)}
#settingsForm .levels-member{display:flex;align-items:center;gap:10px;min-width:0}
#settingsForm .levels-member>span:last-child{display:grid;min-width:0}
#settingsForm .levels-member b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#settingsForm .levels-member-bio{overflow:hidden;max-width:260px;color:var(--ui-accent);text-overflow:ellipsis;white-space:nowrap}
#settingsForm .levels-actions{display:flex;gap:6px;justify-content:flex-end}
#settingsForm .levels-actions .button{display:inline-flex;align-items:center;gap:5px}
#settingsForm .levels-adjust td{padding:0 14px 12px;border-top:0;background:#9fdcc808}
#settingsForm .levels-adjust-body{display:grid;grid-template-columns:150px 150px minmax(0,1fr) auto;gap:10px;align-items:end;padding:12px;border:1px solid #9fdcc833;border-radius:10px}
#settingsForm .levels-adjust-body .field{margin:0}
#settingsForm .levels-adjust-actions{display:flex;gap:6px}

@media (max-width:900px){
  #settingsForm .levels-boost{grid-template-columns:1fr}
  #settingsForm .levels-command{grid-template-columns:38px minmax(0,1fr) auto}
  #settingsForm .levels-command input{grid-column:1/-1}
}
@media (max-width:760px){
  #settingsForm .levels-adjust-body{grid-template-columns:1fr 1fr}
  #settingsForm .levels-adjust-body .field:nth-child(3),#settingsForm .levels-adjust-actions{grid-column:1/-1}
}
@media (max-width:600px){
  html .app-shell #settingsForm .levels-choice-field .message-style-picker:not(.compact){grid-template-columns:repeat(2,minmax(0,1fr))}
  #settingsForm .levels-currency-fields{grid-template-columns:1fr}
  #settingsForm .levels-conditions{gap:8px}
  #settingsForm .levels-conditions label{font-size:12px}
  }

/* ===================== statistics.css ===================== */
/* Statistics page: one card per ranking board, with its switch and channel. */
#settingsForm .stats-how{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;padding:12px 14px;border:1px solid #9fdcc833;border-radius:10px;background:var(--ui-accent-soft)}
#settingsForm .stats-how>svg{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--ui-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#settingsForm .stats-how span{display:grid;gap:3px}
#settingsForm .stats-how b{font-size:13.5px}
#settingsForm .stats-how small{color:var(--ui-muted);font-size:12.5px;line-height:1.6}
#settingsForm .stats-hide{margin-top:0}
#settingsForm .stats-hide>span:first-child{display:grid;gap:2px}
#settingsForm .stats-hide small{color:var(--ui-muted);font-size:12px;font-weight:400}
#settingsForm .stats-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
#settingsForm .stats-board{display:grid;gap:12px;padding:14px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-input);transition:border-color .15s}
#settingsForm .stats-board.on{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent)}
#settingsForm .stats-board-head{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center}
#settingsForm .stats-board-icon{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--ui-accent-soft);color:var(--ui-accent)}
#settingsForm .stats-board-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#settingsForm .stats-board-icon i{position:absolute;bottom:-5px;inset-inline-end:-5px;display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--ui-input);border-radius:50%;background:var(--ui-raised);color:var(--ui-accent)}
#settingsForm .stats-board-icon i svg{width:11px;height:11px}
#settingsForm .stats-board-copy{display:grid;gap:2px;min-width:0}
#settingsForm .stats-board-copy b{font-size:14px}
#settingsForm .stats-board-copy small{color:var(--ui-muted);font-size:12px;line-height:1.5}
#settingsForm .stats-board-switch{grid-column:1/-1;margin:0;min-height:42px}
#settingsForm .stats-board-switch>span:first-child{color:var(--ui-muted);font-size:12.5px;font-weight:600}
#settingsForm .stats-board.on .stats-board-switch>span:first-child{color:var(--ui-accent)}
#settingsForm .stats-board-body>.field{margin:0}
#settingsForm .stats-board:not(.on) .stats-board-body{opacity:.55}

/* ===================== store.css ===================== */
/* Member store (/store): one page for every member, in the dashboard look (charcoal panels, gold accent). */
.store-view{min-height:100vh;background:var(--ui-bg);color:var(--ui-text)}
.store-view .workspace-header{position:sticky;top:0;z-index:20}
.store-view .workspace-account .button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.store-main{width:min(1180px,100% - 32px);margin:24px auto 64px;display:grid;gap:16px}
.store-main svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.store-loading{display:grid;place-items:center;min-height:320px}
.store-empty{display:grid;justify-items:center;gap:8px;padding:56px 20px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-panel);text-align:center}
.store-empty svg{width:40px;height:40px;color:var(--ui-accent)}
.store-empty b{font-size:16px}.store-empty small{color:var(--ui-muted)}
.store-empty.error svg{color:#f87171}

/* Header: title, server picker and balance */
.store-head{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-panel)}
.store-head-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:12px;background:var(--ui-accent-soft);color:var(--ui-accent)}
.store-head-icon svg{width:24px;height:24px}
.store-head-copy{flex:1;min-width:0}
.store-head h1{margin:0;font-size:21px}.store-head p{margin:3px 0 0;color:var(--ui-muted);font-size:13px}
.store-server{position:relative}
.store-server-button{display:flex;align-items:center;gap:10px;min-width:220px;padding:8px 12px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-raised);color:var(--ui-text);font:inherit;text-align:start;cursor:pointer}
.store-server-button:hover,.store-server.open .store-server-button{border-color:var(--ui-accent)}
.store-server-button>span:not(.entity-avatar),.store-server-menu button>span:not(.entity-avatar){display:grid;flex:1;min-width:0}
.store-server b{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.store-server small{color:var(--ui-muted);font-size:11.5px}
.store-server-button>svg{flex:none;width:16px;height:16px;color:var(--ui-muted);transition:transform .2s}
.store-server.open .store-server-button>svg{transform:rotate(180deg)}
.store-server .entity-avatar{flex:0 0 32px;width:32px;height:32px;border-radius:9px}
.store-server-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:30;display:none;max-height:320px;overflow:auto;padding:6px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-raised);box-shadow:0 20px 40px -12px #000c}
.store-server.open .store-server-menu{display:grid;gap:2px}
.store-server-menu button{display:flex;align-items:center;gap:10px;padding:8px;border:0;border-radius:9px;background:none;color:var(--ui-text);font:inherit;text-align:start;cursor:pointer}
.store-server-menu button:hover,.store-server-menu button[aria-selected="true"]{background:var(--ui-accent-soft)}
.store-balance{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent);border-radius:12px;background:var(--ui-accent-soft)}
.store-balance svg{width:22px;height:22px;color:var(--ui-accent)}
.store-balance b{display:block;font-size:20px;line-height:1.2}.store-balance small{color:var(--ui-muted);font-size:11.5px}

/* Item card and side panels */
.store-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.store-card,.store-panel{border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-panel)}
.store-price{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;padding:6px 12px;border-radius:999px;background:var(--ui-accent-soft);color:var(--ui-accent);font-size:13.5px;font-weight:700;white-space:nowrap}
.store-price svg{width:16px;height:16px}
.store-card-body{display:grid;gap:14px;padding:16px 20px 20px}
.store-off{margin:0;padding:10px 14px;border:1px solid #f8717155;border-radius:10px;background:#f871711a;color:#fca5a5;font-size:13px}
.store-preview{position:relative;margin:16px 16px 0;overflow:hidden;border:1px solid var(--ui-border);border-radius:14px;background:#121619;aspect-ratio:1000/380}
.store-preview img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.store-preview.loading img{opacity:.45}
.store-preview.draft{border-color:var(--ui-accent);box-shadow:0 0 0 1px var(--ui-accent)}
.store-preview figcaption{position:absolute;top:12px;inset-inline-start:12px;padding:4px 10px;border-radius:999px;background:#000000a6;color:#fff;font-size:12px;font-weight:600}
.store-drop{display:flex;align-items:center;gap:14px;padding:18px;border:1.5px dashed color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent);border-radius:12px;background:#9fdcc80a;cursor:pointer;transition:border-color .15s,background-color .15s}
.store-drop:hover,.store-drop.over{border-color:var(--ui-accent);background:var(--ui-accent-soft)}
.store-drop.chosen{border-style:solid}
.store-drop.disabled{opacity:.5;cursor:not-allowed}
.store-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.store-drop-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:11px;background:var(--ui-accent-soft);color:var(--ui-accent)}
.store-drop-icon svg{width:22px;height:22px}
.store-drop>span:last-child{display:grid;gap:2px;min-width:0}
.store-drop b{overflow:hidden;font-size:14.5px;text-overflow:ellipsis;white-space:nowrap}.store-drop small{color:var(--ui-muted);font-size:12.5px}
.store-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.store-actions .button svg{width:18px;height:18px}
.store-actions small{margin-inline-start:auto;color:var(--ui-muted);font-size:12.5px}
.store-actions small.short{color:#fca5a5}
.store-side{display:grid;gap:16px}
.store-panel h3{margin:0;padding:14px 16px 6px;color:var(--ui-muted);font-size:12px;font-weight:700}
.store-history{padding:4px 16px 12px}
.store-history-item{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:13px}
.store-history-item+.store-history-item{border-top:1px solid var(--ui-border)}
.store-history-item i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ui-accent)}
.store-history-item span{flex:1;min-width:0}.store-history-item em{color:var(--ui-muted);font-size:12px;font-style:normal}.store-history-item b{color:#fca5a5}
.store-history-empty{margin:0;padding:6px 0;color:var(--ui-muted);font-size:12.5px}
.store-entry svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Tabs: one per item, with its price */
.store-tabs{display:flex;gap:6px;margin:16px 16px 0;padding:5px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-input);overflow-x:auto;scrollbar-width:none}
.store-tabs::-webkit-scrollbar{display:none}
.store-tab{display:flex;flex:1 0 auto;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--ui-muted);font:inherit;font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.store-tab svg{width:17px;height:17px}
.store-tab em{padding:1px 7px;border-radius:999px;background:#ffffff0d;color:var(--ui-muted);font-size:11px;font-style:normal;font-weight:600}
.store-tab:hover{color:var(--ui-text)}
.store-tab.active{background:var(--ui-raised);color:var(--ui-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent)}
.store-tab:focus-visible,.store-effect:focus-visible,.store-flag:focus-visible,.store-chip:focus-visible,.store-swatch:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.store-panel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.store-panel-head p{flex:1;min-width:200px;margin:0;color:var(--ui-muted);font-size:13px}
.store-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.store-label{display:inline-flex;align-items:center;gap:6px;margin-inline-end:4px;color:var(--ui-muted);font-size:12.5px;font-weight:700}
.store-label svg{width:16px;height:16px}
.store-chip{min-height:32px;padding:0 14px;border:1px solid var(--ui-border);border-radius:999px;background:none;color:var(--ui-muted);font:inherit;font-size:13px;cursor:pointer}
.store-chip:hover{color:var(--ui-text)}
.store-chip.active{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent)}

/* Effects grid and colours */
.store-effects{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.store-effect{position:relative;display:grid;justify-items:center;gap:2px;padding:8px 6px 10px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-input);color:var(--ui-text);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.store-effect:hover:not(:disabled){border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 53%,transparent);transform:translateY(-1px)}
.store-effect img{width:84px;height:84px}
.store-effect b{font-size:13px}
.store-effect em{color:var(--ui-accent);font-size:11px;font-style:normal}
.store-effect em.cute{color:#ff8fb8}
.store-effect.active{border-color:var(--ui-accent);background:#9fdcc812;box-shadow:inset 0 0 0 1px var(--ui-accent)}
.store-effect.active::after{content:"";position:absolute;top:8px;inset-inline-end:8px;width:10px;height:10px;border:3px solid var(--ui-panel);border-radius:50%;background:var(--ui-accent)}
.store-effect:disabled,.store-flag:disabled,.store-swatch:disabled{opacity:.5;cursor:not-allowed}
.store-swatch{width:30px;height:30px;padding:0;border:2px solid var(--ui-panel);border-radius:50%;background:var(--swatch,var(--t-accent, #9fdcc8));box-shadow:0 0 0 1px var(--ui-border);cursor:pointer}
.store-swatch.active{box-shadow:0 0 0 2px var(--ui-accent)}
.store-color-custom{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 12px 3px 4px;border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-muted);font-size:12.5px;cursor:pointer}
.store-color-custom.active{border-color:var(--ui-accent);color:var(--ui-accent)}
.store-color-custom span{width:24px;height:24px;border-radius:50%;background:conic-gradient(#e5484d,#43ffd3,#4cf5ce,#5fcf80,#4fd1c5,#5b9dff,#a78bfa,#ff8fb8,#e5484d)}
.store-color-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* Flags */
.store-search{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input);color:var(--ui-muted)}
.store-search:focus-within{border-color:var(--ui-accent)}
.store-search svg{flex:none;width:17px;height:17px}
.store-search input{flex:1;min-width:0;min-height:42px;border:0;background:none;color:var(--ui-text);font:inherit;outline:none}
.store-flags{max-height:420px;overflow:auto;padding-inline-end:4px}
.store-section{margin:6px 0 8px;color:var(--ui-muted);font-size:12px;font-weight:700}
.store-section:not(:first-child){margin-top:16px}
.store-flag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.store-flag{display:flex;align-items:center;gap:8px;min-width:0;padding:8px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input);color:var(--ui-text);font:inherit;font-size:13px;text-align:start;cursor:pointer}
.store-flag:hover:not(:disabled){border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 53%,transparent)}
.store-flag img{flex:none;width:30px;height:20px;border-radius:3px;box-shadow:0 0 0 1px #ffffff1f}
.store-flag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-flag.active{border-color:var(--ui-accent);background:#9fdcc812}

/* Bio */
.store-bio{width:100%;min-height:76px;padding:12px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input);color:var(--ui-text);font:inherit;font-size:14.5px;resize:none}
.store-bio:focus{outline:none;border-color:var(--ui-accent)}
.store-bio-meta{display:flex;justify-content:space-between;gap:10px;margin-top:-6px}
.store-bio-meta small{color:var(--ui-muted);font-size:12px}
.store-bio-meta small.error{color:#fca5a5}
.store-bio-meta small:last-child{color:var(--ui-accent);white-space:nowrap}

/* What the member wears now */
.store-own{display:flex;align-items:center;gap:12px;padding:11px 16px}
.store-own+.store-own{border-top:1px solid var(--ui-border)}
.store-own>div{display:grid;flex:1;min-width:0}
.store-own b{overflow:hidden;font-size:13.5px;text-overflow:ellipsis;white-space:nowrap}
.store-own small{color:var(--ui-muted);font-size:12px}
.store-own em{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#5fcf8022;color:#5fcf80}
.store-own em svg{width:13px;height:13px;stroke-width:2.6}
.store-own-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:#ffffff08;color:var(--ui-muted)}
.store-own-icon svg{width:18px;height:18px}
.store-own-icon.swatch{background:color-mix(in srgb,var(--swatch) 20%,transparent);color:var(--swatch)}
.store-own-flag{flex:0 0 36px;width:36px;height:24px;margin-block:6px;border-radius:4px;box-shadow:0 0 0 1px #ffffff1f}

@media (max-width:980px){.store-grid{grid-template-columns:minmax(0,1fr)}.store-head{flex-wrap:wrap}.store-head-copy{flex-basis:calc(100% - 64px)}.store-server{flex:1}.store-server-button{min-width:0;width:100%}}
@media (max-width:560px){.store-main{margin-top:16px}.store-server,.store-balance{flex:1 1 100%}.store-preview,.store-tabs{margin-inline:12px}.store-card-body{padding:14px 12px 16px}.store-preview figcaption{display:none}.store-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.store-tab{flex-direction:column;gap:3px;min-height:56px;padding:6px 4px;font-size:11.5px;line-height:1.25;white-space:normal;text-align:center}.store-tab em{display:none}.store-effects{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.store-effect img{width:64px;height:64px}.store-flag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.store-swatch{width:28px;height:28px}.store-price{margin-inline-start:0}.store-actions .button{flex:1;justify-content:center}.store-actions small{flex-basis:100%;margin:0}}
/* Developer center: store prices */
.dev-table [data-store-price]{width:130px;min-height:36px;padding:0 10px;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-input);color:var(--ui-text);font:inherit;font-weight:600}
.dev-table [data-store-price]:focus{outline:none;border-color:var(--ui-accent)}
.dev-table td small.dev-muted{display:block;margin-top:2px;font-size:12px}

/* ===================== shell.css ===================== */
/* Dashboard shell: the top bar (notifications, language, account) and the systems menu.
   Loaded last, so these rules settle the older layered styles for the same elements. */

/* ---------- Top bar ---------- */
html .app-shell .topbar{grid-template-columns:minmax(0,1fr) auto;gap:16px}
html .app-shell .topbar-actions{display:flex;align-items:center;gap:8px}
html .app-shell .topbar .icon-button.notification-button{position:relative;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid var(--ui-border)!important;border-radius:12px!important;background:transparent!important;color:var(--ui-muted)!important;transition:color .15s,border-color .15s,background .15s}
html .app-shell .topbar .notification-button:hover{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent)!important;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 5%,transparent)!important;color:var(--ui-accent)!important}
html .app-shell .topbar .notification-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .app-shell .topbar .notification-count{position:absolute;top:-5px;inset-inline-end:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border:2px solid var(--ui-bg);border-radius:999px;background:var(--ui-accent);color:var(--ui-on-accent);font-size:10px;font-weight:700;line-height:1}
html .app-shell .topbar .notification-count.hidden{display:none}

/* Language: two flags, the active one highlighted. */
html .app-shell .topbar-lang{display:inline-flex;align-items:center;gap:2px;height:40px;padding:3px;border:1px solid var(--ui-border);border-radius:12px}
html .app-shell .topbar-lang button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--ui-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
html .app-shell .topbar-lang button:hover{color:var(--ui-text)}
html .app-shell .topbar-lang button[aria-pressed="true"]{background:var(--ui-raised);color:var(--ui-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent)}
html .app-shell .topbar-lang .flag{flex:none;width:21px;height:14px;border-radius:3px;box-shadow:0 0 0 1px #ffffff1f}
html .app-shell .topbar-lang button:not([aria-pressed="true"]) .flag{opacity:.72;filter:saturate(.75)}
html .app-shell .topbar-lang button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:1px}

/* Account: transparent chip with the avatar, the menu opens below. */
html .app-shell .header-account.account-chip{position:relative}
html .app-shell .header-account.account-chip>summary{display:flex;align-items:center;gap:10px;height:44px;min-height:44px;padding:0 8px 0 6px;border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important;list-style:none;cursor:pointer;transition:background .15s}
html .app-shell .header-account.account-chip>summary::-webkit-details-marker{display:none}
html .app-shell .header-account.account-chip>summary:hover,html .app-shell .header-account.account-chip[open]>summary{background:#ffffff08!important}
html .app-shell .header-account.account-chip .avatar{flex:none;width:34px;height:34px;border-radius:50%;background-color:var(--ui-raised);background-size:cover;background-position:center;box-shadow:0 0 0 2px var(--ui-bg),0 0 0 3px color-mix(in srgb,var(--t-accent,#9fdcc8) 40%,transparent)}
html .app-shell .header-account.account-chip summary>span:not(.avatar){display:grid;gap:1px;text-align:start}
html .app-shell .header-account.account-chip summary strong{max-width:140px;overflow:hidden;color:var(--ui-text);font-size:13px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
html .app-shell .header-account.account-chip summary small{color:var(--ui-muted);font-size:11px;line-height:1.2}
html .app-shell .header-account.account-chip summary>svg{width:16px;height:16px;fill:none;stroke:var(--ui-muted);stroke-width:2;transition:transform .15s}
html .app-shell .header-account.account-chip[open] summary>svg{transform:rotate(180deg)}
html .app-shell .header-account.account-chip>.account-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:190px;padding:6px;border:1px solid var(--ui-border)!important;border-radius:12px!important;background:var(--ui-panel)!important;box-shadow:0 18px 40px #00000059}
html .app-shell .account-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ui-text);font:inherit;font-size:13px;cursor:pointer}
html .app-shell .account-menu-item svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html .app-shell .account-menu-item:hover{background:#ffffff08}
html .app-shell .account-menu-item.danger{color:#f08a8a}
html .app-shell .account-menu-item.danger:hover{background:#f08a8a14}

/* ---------- Systems menu ---------- */
/* The account and language moved to the top bar; the menu holds the systems only. */
html .app-shell .sidebar{padding-bottom:10px}
html .app-shell #nav{padding-bottom:0}
html .app-shell #nav>.nav-heading{margin:10px 8px 6px;color:#7d7e90;font-size:10.5px;font-weight:700;letter-spacing:.02em}
html .app-shell #nav .system-nav-group+.system-nav-group{margin-top:8px}
html .app-shell #nav .system-nav-group .system-nav-items{padding-top:6px!important}
html .app-shell #nav #mainNavGroup .system-nav-items{padding-top:6px!important}
/* Subscriptions, sales and developer tools stay at the bottom as small tiles while the systems scroll above them. */
html .app-shell #nav .nav-settings-block{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;margin-top:auto;padding:10px 0 2px;border-top:1px solid var(--ui-border);background:var(--ui-sidebar)}
html .app-shell #nav .nav-settings-block>.nav-heading{display:none}
html .app-shell #nav .nav-settings-block .nav-item{flex-direction:column;justify-content:center;gap:4px;min-height:54px;padding:7px 4px!important;border:1px solid #ffffff0d!important;border-radius:10px!important;background:#ffffff05!important;font-size:11px;line-height:1.25;text-align:center}
html .app-shell #nav .nav-settings-block .nav-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #nav .nav-settings-block .nav-item svg{width:17px;height:17px}
html .app-shell #nav .nav-settings-block .nav-item.active{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent)!important;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent)!important;box-shadow:none!important}
html .app-shell #nav .nav-settings-block .nav-item.hidden{display:none}

/* ---------- Small screens ---------- */
/* The search bar is gone, so the page title and the account stay visible on narrow screens too. */
@media (max-width:1000px){
  html .app-shell .topbar-page-title{display:block;min-width:0}
  html .app-shell .header-account.account-chip>summary{width:auto;min-width:0}
}
@media (max-width:900px){
  html .app-shell .topbar{grid-template-columns:40px minmax(0,1fr) auto}
  html .app-shell .topbar-page-title{grid-column:2}
  html .app-shell .topbar-actions{grid-column:3}
}
@media (max-width:700px){
  html .app-shell .topbar{height:auto;min-height:64px;gap:10px}
  html .app-shell .topbar .eyebrow{display:none}
  html .app-shell .topbar h1{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
  html .app-shell .topbar-actions{gap:6px}
  html .app-shell .header-account.account-chip{display:block}
  html .app-shell .topbar-lang button{padding:0 7px}
  html .app-shell .topbar-lang button span{display:none}
  html .app-shell .header-account.account-chip summary>span:not(.avatar),html .app-shell .header-account.account-chip summary>svg{display:none}
  html .app-shell .header-account.account-chip>summary{padding:0 3px}
}

/* ---------- Overview: special roles and clan ranking ---------- */
/* Each row starts with the role icon, or the owner's avatar when the role has no icon. */
.ov-mark{position:relative;display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:var(--ui-raised);overflow:hidden}
.ov-mark img{width:100%;height:100%;object-fit:contain;padding:4px}
.ov-mark-emoji{font-size:20px;line-height:1}
.ov-mark-owner{border-radius:50%;overflow:visible;background:transparent}
.ov-mark-owner .entity-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--ui-panel),0 0 0 3.5px var(--role,#99aab5)}
.ov-mark-owner .entity-avatar.fallback{display:grid;place-items:center;background:var(--ui-raised);color:var(--ui-accent);font-size:15px;font-weight:700}
html .app-shell .ov-role-list li{grid-template-columns:38px minmax(0,1fr) auto;gap:12px;padding:10px 12px}
.ov-role-side{display:grid;justify-items:end;gap:4px}
.ov-role-side em{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent);color:var(--ui-accent);font-size:11.5px;font-style:normal;font-weight:600;white-space:nowrap}
.ov-role-side em svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html .app-shell .ov-leader li.ov-clan{grid-template-columns:22px 38px minmax(0,1fr);gap:12px}

/* ---------- System pages ---------- */
/* Slim page head: icon, name and one line of description, with the on/off switch beside them. */
html .app-shell #settingsForm .settings-head{gap:14px;padding:12px 16px!important;border-radius:12px!important}
html .app-shell #settingsForm .settings-head-icon{flex:0 0 40px;width:40px;height:40px;border-radius:10px}
html .app-shell #settingsForm .settings-head-icon svg{width:20px;height:20px}
html .app-shell #settingsForm .settings-head h2{font-size:17px;line-height:1.35}
html .app-shell #settingsForm .settings-head p.muted{margin:2px 0 0;overflow:hidden;font-size:12.5px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #settingsForm #moduleToggleWrap{display:inline-flex;align-items:center;gap:10px;min-height:0;margin:0;padding:6px 8px 6px 12px!important;border:1px solid var(--ui-border)!important;border-radius:999px!important;background:var(--ui-input)!important;box-shadow:none!important}
html .app-shell #settingsForm #moduleToggleWrap.hidden{display:none}
html .app-shell #settingsForm #moduleToggleWrap>span:first-child{font-size:12.5px;font-weight:600;color:var(--ui-muted)}
html .app-shell #settingsForm #moduleToggleWrap:has(input:checked){border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent)!important}
html .app-shell #settingsForm #moduleToggleWrap:has(input:checked)>span:first-child{color:var(--ui-accent)}

/* Message type: one compact row, the name on one side and the choices on the other. */
html .app-shell #settingsForm .message-style-field:not(.levels-choice-field){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
html .app-shell #settingsForm .message-style-field:not(.levels-choice-field) .message-style-heading label{margin:0;font-size:13px}
html .app-shell #settingsForm .message-style-field:not(.levels-choice-field) .message-style-picker{display:inline-flex!important;flex-wrap:wrap;width:auto!important;max-width:100%;gap:2px!important;padding:3px!important;border-radius:10px!important}
html .app-shell #settingsForm .message-style-field:not(.levels-choice-field) .message-style-option{min-width:0;min-height:32px!important;padding:0 12px!important;font-size:12px;border-radius:7px!important}
html .app-shell #settingsForm .message-style-field:not(.levels-choice-field) .message-style-option svg{width:15px;height:15px}

/* Message images: a source list (member, server, bot or a link) with a small thumbnail. */
html .app-shell #settingsForm .image-source{display:grid;gap:6px}
html .app-shell #settingsForm .image-source-picker{position:relative}
html .app-shell #settingsForm .image-source-picker>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 10px 5px 6px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-input);list-style:none;cursor:pointer}
html .app-shell #settingsForm .image-source-picker>summary::-webkit-details-marker{display:none}
html .app-shell #settingsForm .image-source-picker[open]>summary{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 40%,transparent)}
html .app-shell #settingsForm .image-source-picker .resource-chevron{flex:none;width:16px;height:16px;margin-inline-start:auto;fill:none;stroke:var(--ui-muted);stroke-width:2;transition:transform .15s}
html .app-shell #settingsForm .image-source-picker[open] .resource-chevron{transform:rotate(180deg)}
html .app-shell #settingsForm .image-source-thumb{display:grid;place-items:center;flex:none;width:32px;height:32px;overflow:hidden;border-radius:8px;background:var(--ui-accent-soft);color:var(--ui-accent)}
html .app-shell #settingsForm .image-source-thumb.none{background:var(--ui-raised);color:var(--ui-muted)}
html .app-shell #settingsForm .image-source-thumb img{width:100%;height:100%;object-fit:cover}
html .app-shell #settingsForm .image-source svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .app-shell #settingsForm .image-source-copy{display:grid;min-width:0;text-align:start}
html .app-shell #settingsForm .image-source-copy strong{font-size:13px;font-weight:600}
html .app-shell #settingsForm .image-source-copy small{overflow:hidden;color:var(--ui-muted);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #settingsForm .image-source-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:30;display:grid;gap:2px;max-height:320px;overflow:auto;padding:6px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-panel);box-shadow:0 18px 40px #00000066}
html .app-shell #settingsForm .image-source-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--ui-text);font:inherit;text-align:start;cursor:pointer}
html .app-shell #settingsForm .image-source-menu button>svg{flex:none;color:var(--ui-accent)}
html .app-shell #settingsForm .image-source-menu button span{display:grid}
html .app-shell #settingsForm .image-source-menu button b{font-size:13px;font-weight:600}
html .app-shell #settingsForm .image-source-menu button small{color:var(--ui-muted);font-size:11.5px}
html .app-shell #settingsForm .image-source-menu button:hover{background:#ffffff08}
html .app-shell #settingsForm .image-source-menu button[aria-selected="true"]{background:var(--ui-accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent)}
html .app-shell #settingsForm .image-source-url.hidden{display:none}

/* Questions and answers: one card per question, closed until opened. */
html .app-shell #settingsForm .faq-card{display:block!important;padding:0!important;overflow:hidden;border:1px solid var(--ui-border)!important;border-radius:10px!important;background:var(--ui-input)!important}
html .app-shell #settingsForm .faq-card+.faq-card{margin-top:8px}
html .app-shell #settingsForm .faq-card>summary{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:12px;min-height:56px;padding:9px 14px;list-style:none;cursor:pointer}
html .app-shell #settingsForm .faq-card>summary::-webkit-details-marker{display:none}
html .app-shell #settingsForm .faq-card>summary:hover{background:var(--ui-hover)}
html .app-shell #settingsForm .faq-card[open]>summary{border-bottom:1px solid var(--ui-border)}
html .app-shell #settingsForm .faq-card .resource-chevron{width:18px;height:18px;fill:none;stroke:var(--ui-muted);stroke-width:2;transition:transform .2s}
html .app-shell #settingsForm .faq-card[open] .resource-chevron{transform:rotate(180deg)}
html .app-shell #settingsForm .faq-index{display:grid;place-items:center;width:34px;height:34px;border:1px solid color-mix(in srgb,var(--t-accent,#9fdcc8) 25%,transparent);border-radius:8px;background:var(--ui-accent-soft);color:var(--ui-accent);font-size:12px;font-weight:700}
html .app-shell #settingsForm .faq-card-copy{display:grid;gap:2px;min-width:0}
html .app-shell #settingsForm .faq-card-copy strong{overflow:hidden;font-size:13.5px;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #settingsForm .faq-card-copy small{overflow:hidden;color:var(--ui-muted);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
html .app-shell #settingsForm .faq-card-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px}
html .app-shell #settingsForm .faq-card-body>.field{margin:0}
html .app-shell #settingsForm .faq-card-body>.field.full{grid-column:1/-1}
html .app-shell #settingsForm .faq-card-body>.field.hidden{display:none}
html .app-shell #settingsForm .faq-card-body>.remove-type{grid-column:1/-1;justify-self:end;margin:0}

/* Panel items (buttons and menu entries): compact rows with a clear emoji box. */
html .app-shell #settingsForm .component-item{gap:8px;padding:6px 10px}
html .app-shell #settingsForm .component-item input:not([type="checkbox"]){min-height:36px!important;padding:4px 10px!important;font-size:13px}
html .app-shell #settingsForm .component-emoji-field{display:flex;align-items:center;flex:0 0 132px;gap:0;overflow:hidden;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-input)}
html .app-shell #settingsForm .component-emoji-field:focus-within{border-color:color-mix(in srgb,var(--t-accent,#9fdcc8) 53%,transparent)}
html .app-shell #settingsForm .component-emoji-preview{display:grid;place-items:center;flex:0 0 36px;height:36px;border-inline-end:1px solid var(--ui-border);background:var(--ui-raised);color:var(--ui-muted);font-size:17px;line-height:1}
html .app-shell #settingsForm .component-emoji-preview svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
html .app-shell #settingsForm .component-emoji-preview img{width:20px;height:20px;object-fit:contain}
html .app-shell #settingsForm .component-item .component-emoji-field input.component-emoji{flex:1 1 auto!important;width:100%!important;min-width:0;border:0!important;border-radius:0!important;background:transparent!important;text-align:start!important}
@media (max-width:700px){
  html .app-shell #settingsForm .faq-card-body{grid-template-columns:1fr}
  html .app-shell #settingsForm .component-emoji-field{flex-basis:110px}
  html .app-shell #settingsForm .settings-head p.muted{white-space:normal}
}
/* Button colours only apply to buttons, so a menu layout gives the text field their space. */
html .app-shell #settingsForm .component-editor[data-mode="select"] .component-colors{display:none}

/* Overview: clan ranking icons at full size (the list's small avatar rule must not shrink them). */
html .app-shell .ov-leader li .ov-mark{overflow:hidden;font-size:inherit;font-weight:400}
html .app-shell .ov-leader li .ov-mark img{width:100%;height:100%;padding:4px;border-radius:0;object-fit:contain}
html .app-shell .ov-leader li .ov-mark-owner{overflow:visible}
html .app-shell .ov-leader li .ov-mark-owner .entity-avatar,html .app-shell .ov-role-list .ov-mark-owner .entity-avatar{width:38px;height:38px;padding:0;border-radius:50%;object-fit:cover;font-size:15px}
html .app-shell .ov-leader li .ov-mark-emoji{font-size:20px}

/* Overview: recent changes with who made them and what changed. */
html .app-shell .ov-audit.with-actor{grid-template-columns:36px minmax(0,1fr) auto;align-items:start;gap:12px;padding:12px 4px}
html .app-shell .ov-audit-actor .entity-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--ui-raised);color:var(--ui-accent);font-size:14px;font-weight:700}
html .app-shell .ov-audit-actor .ov-audit-system svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .app-shell .ov-audit-copy{display:grid;gap:3px;min-width:0}
html .app-shell .ov-audit-copy p{display:flex;align-items:center;gap:8px;margin:0;min-width:0}
html .app-shell .ov-audit-copy p b{overflow:hidden;color:var(--ui-text);font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
html .app-shell .ov-audit-copy .ov-tag{flex:none;padding:1px 8px;font-size:11px}
html .app-shell .ov-audit-copy strong{font-size:13px;font-weight:500;color:#c9cad6}
html .app-shell .ov-audit-copy small{overflow:hidden;color:var(--ui-accent);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
html .app-shell .ov-audit.with-actor time{padding-top:2px}

/* ===================== workspace-polish.css ===================== */
html .app-shell #commerceContent.unified-subscriptions { max-width: 1250px; margin-inline: auto; padding-bottom: 36px; }
html .app-shell :is(#salesContent,#developerContent) { min-width: 0; max-width: 100%; }
html .app-shell .record-actions svg { width: 18px; height: 18px; flex-shrink: 0; }
html .app-shell .system-product-details { border: 1px solid var(--brand-border); border-radius: 12px; margin-top: 16px; padding: 12px; }
html .app-shell .system-product-details>summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
html .app-shell .system-product-details>summary>span { display: flex; align-items: center; gap: 8px; }
html .app-shell .system-product-details>summary>svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
html .app-shell .system-product-details>div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding-top: 16px; }
html .app-shell .system-product-details>div>span { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
@media(max-width:760px) { html .app-shell .system-product-details>div { grid-template-columns: repeat(2,minmax(0,1fr)); } }
html .app-shell .subscription-notice-preview { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid var(--brand-border); border-radius: 14px; }
html .app-shell .message-dm-preview { padding: 0; overflow: hidden; min-height: 200px; }
html .app-shell .message-dm-preview[aria-busy="true"] { opacity: .6; }
html .app-shell .message-dm-preview>.messages-note { padding: 10px 16px; }
html .app-shell .messages-editor { min-width: 0; }
html .app-shell .messages-field :is(select,input,textarea) { min-width: 0; width: 100%; box-sizing: border-box; }
html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; }
html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-head h2 { margin: 8px 0 12px; font-size: clamp(25px,3vw,35px); letter-spacing: -.03em; }
html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-head p:not(.eyebrow) { max-width: 660px; color: var(--brand-muted); font-size: 13px; line-height: 1.9; }
html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-head .tv-button { flex-shrink: 0; }
html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-tabs { display: flex; gap: 8px; padding: 7px; margin-block: 12px 28px; border: 1px solid var(--brand-border); border-radius: 14px; background: var(--brand-header); overflow-x: auto; }
html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; padding: 11px 18px; border-radius: 9px; color: var(--brand-muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-tabs button[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: #9fdcc82c; color: var(--brand-mint-soft); }
html .app-shell #commerceContent.unified-subscriptions [data-subscriptions-panel][hidden],html .app-shell #settingsSections button[hidden] { display: none !important; }
html .app-shell #commerceContent.unified-subscriptions .subscription-section-title h3 { font-size: 20px; margin: 0 0 8px; }
html .app-shell #commerceContent.unified-subscriptions .subscription-section-title p { color: var(--brand-muted); font-size: 13px; line-height: 1.8; margin: 0; }
html .app-shell #commerceContent.unified-subscriptions .subscription-editions { margin-bottom: 36px; }
html .app-shell #commerceContent.unified-subscriptions .plan-compare { gap: 14px; margin-top: 18px; }
html .app-shell #commerceContent.unified-subscriptions .plan-card { padding: 20px; min-height: 0; border-radius: 16px; background: var(--brand-surface); border: 1px solid var(--brand-border); gap: 10px; }
html .app-shell #commerceContent.unified-subscriptions .plan-card:has(input:checked) { border-color: var(--brand-primary); background: #9fdcc809; }
html .app-shell #commerceContent.unified-subscriptions :is(.plan-card-features,.plan-card-fit,.plan-card-price,.plan-badge) { display: none; }
html .app-shell #commerceContent.unified-subscriptions .plan-card-cta { margin: 0; padding: 0; border: 0; background: none; color: var(--brand-primary); font-size: 11px; }
html .app-shell #commerceContent.unified-subscriptions .plan-compare-note { font-size: 11px; margin-top: 12px; color: var(--brand-muted); }
html .app-shell #commerceContent.unified-subscriptions .tv-internal-store { min-height: 0; background: transparent; color: var(--brand-text); }
html .app-shell #commerceContent.unified-subscriptions .tv-pricing-top { margin-block: 16px 22px; }
html .app-shell #commerceContent.unified-subscriptions .tv-card { box-shadow: none; }
html .app-shell #commerceContent.unified-subscriptions .tv-grid { gap: 18px; }
html .app-shell #commerceContent.unified-subscriptions .tv-product { min-height: 345px; padding: 24px; }
html .app-shell #commerceContent.unified-subscriptions .tv-product h2 { font-size: 19px; }
html .app-shell #commerceContent.unified-subscriptions .tv-product .tv-price { margin-top: auto; }
html .app-shell #commerceContent.unified-subscriptions .tv-product .tv-price strong { font-size: 31px; }
html .app-shell #commerceContent.unified-subscriptions .tv-notice { margin-block: 12px; }
html .app-shell #settingsForm .settings-section-search { width: calc(100% - 12px); margin: 0 6px 8px; padding: 11px !important; min-width: 0; font-size: 12px; border-radius: 10px; }
html .app-shell #settingsForm .settings-appearance { grid-column: 1/-1; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-header); }
html .app-shell #settingsForm .settings-appearance>summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 15px; font-size: 13px; color: var(--brand-mint-soft); }
html .app-shell #settingsForm .settings-appearance>summary::after { content: "+"; margin-inline-start: auto; font-size: 20px; }
html .app-shell #settingsForm .settings-appearance[open]>summary::after { content: "−"; }
html .app-shell #settingsForm .settings-appearance summary small { font-size: 10px; color: var(--brand-muted); }
html .app-shell #settingsForm .settings-appearance-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding: 4px 18px 18px; }
html .app-shell #settingsForm .settings-appearance:not(:has(.image-source-field:not(.style-hidden))) { display: none; }
html .app-shell #nav .nav-item>svg { width: 19px; height: 19px; }
@media(max-width:1100px) {
  html .app-shell #commerceContent.unified-subscriptions .tv-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-head { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 8px; }
  html .app-shell #commerceContent.unified-subscriptions .subscription-workspace-head .tv-button { align-self: flex-start; }
  html .app-shell #commerceContent.unified-subscriptions .plan-compare { grid-template-columns: minmax(0,1fr); }
  html .app-shell #commerceContent.unified-subscriptions .tv-grid { grid-template-columns: minmax(0,1fr); }
  html .app-shell #commerceContent.unified-subscriptions .tv-product { min-height: 0; }
  html .app-shell #settingsForm .settings-section-search { flex: 0 0 160px; width: 160px; margin: 3px; }
  html .app-shell #settingsForm .settings-appearance-fields { grid-template-columns: minmax(0,1fr); padding-inline: 13px; }
}

/* ===================== systems.css ===================== */
/* System settings pages (p39): one compact page per system.
   A one-line head (icon, name, short description, on/off), a slim strip of section names that jumps and follows the
   scroll, and every section open below it in the same order on every page: basics, permissions, behaviour, message,
   then the system's own parts. Selectors start with `html body .app-shell #settingsForm.sys-layout` so they win over
   the older settings layers without new !important rules, except where those layers already use !important. */

html body .app-shell #settingsForm.sys-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* ---- head ---- */
html body .app-shell #settingsForm.sys-layout .settings-head {
  grid-column: 1;
  gap: 12px;
  padding: 2px 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--set-line, var(--ui-border)) !important;
  border-radius: 0 !important;
  background: none !important;
}
html body .app-shell #settingsForm.sys-layout .settings-head-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; }
html body .app-shell #settingsForm.sys-layout .settings-head-icon svg { width: 19px; height: 19px; }
html body .app-shell #settingsForm.sys-layout .settings-head h2 { font-size: 19px; line-height: 1.35; }
html body .app-shell #settingsForm.sys-layout .settings-head p.muted { margin: 1px 0 0; font-size: 12.5px; }

/* ---- section strip ---- */
html body .app-shell #settingsForm.sys-layout .settings-sections {
  grid-column: 1;
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin: 0;
  padding: 8px 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: var(--ui-bg, #0b0e10);
  box-shadow: 0 1px 0 var(--set-line, var(--ui-border));
  scrollbar-width: none;
}
html body .app-shell #settingsForm.sys-layout .settings-sections::-webkit-scrollbar { display: none; }
html body .app-shell #settingsForm.sys-layout .settings-sections.hidden { display: none; }
html body .app-shell #settingsForm.sys-layout .settings-sections button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid var(--set-line, var(--ui-border));
  border-radius: 999px;
  background: transparent;
  color: var(--ui-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
html body .app-shell #settingsForm.sys-layout .settings-sections button:hover { border-color: color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent); color: var(--ui-text); }
html body .app-shell #settingsForm.sys-layout .settings-sections button[aria-current] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-on-accent, #062722); }
html body .app-shell #settingsForm.sys-layout .settings-sections button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* ---- sections ---- */
html body .app-shell #settingsForm.sys-layout #formFields {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
html body .app-shell #settingsForm.sys-layout #formFields > .field-group { grid-column: 1; scroll-margin-top: 130px; }
html body .app-shell #settingsForm.sys-layout #formFields > .field-group > summary {
  gap: 10px;
  min-height: 0;
  padding: 11px 16px !important;
  pointer-events: none;
  cursor: default;
}
html body .app-shell #settingsForm.sys-layout #formFields > .field-group > summary .group-toggle { display: none; }
html body .app-shell #settingsForm.sys-layout #formFields > .field-group > summary .section-icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; }
html body .app-shell #settingsForm.sys-layout #formFields > .field-group > summary .section-icon svg { width: 16px; height: 16px; }
html body .app-shell #settingsForm.sys-layout #formFields > .field-group > summary .section-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
html body .app-shell #settingsForm.sys-layout #formFields > .field-group > summary .section-heading h3 { margin: 0; font-size: 15px; }
html body .app-shell #settingsForm.sys-layout #formFields > .field-group > summary .section-heading p { margin: 0; color: var(--set-dim, var(--ui-muted)); font-size: 12px; }

/* Fields sit side by side: up to three pickers or inputs in a row; long text, lists and editors take the full width. */
html body .app-shell #settingsForm.sys-layout #formFields > .field-group > .field-group-body {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px 16px;
  padding: 14px 16px 16px !important;
}
html body .app-shell #settingsForm.sys-layout .field-group-body > :is(.full, .check-grid, .settings-appearance, p, .hint, .message-style-picker, [data-message-style-picker], .moderation-action-groups, .color-role-manager, .log-test-row, #ticketTypes, #faqItems, #autoResponseRows, #moderationDurations, .add-row, .moderation-behavior-switch, .component-editor, [data-preview-host]),
html body .app-shell #settingsForm.sys-layout .field-group-body > .field:has(textarea) { grid-column: 1 / -1; }
html body .app-shell #settingsForm.sys-layout .field { margin: 0; }
html body .app-shell #settingsForm.sys-layout .field > small { font-size: 11.5px; line-height: 1.6; }
html body .app-shell #settingsForm.sys-layout .resource-picker > summary { min-height: 38px; }

/* On/off switches: compact rows, two per line on wide screens. */
html body .app-shell #settingsForm.sys-layout .check-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
}
html body .app-shell #settingsForm.sys-layout .check-grid .preference-toggle {
  min-height: 46px;
  padding: 9px 14px;
  border: 1px solid var(--set-line, var(--ui-border)) !important;
  border-radius: 10px !important;
  background: #ffffff05 !important;
}
html body .app-shell #settingsForm.sys-layout .check-grid .preference-toggle:last-child { border-bottom: 1px solid var(--set-line, var(--ui-border)) !important; }

/* A field whose choice needs attention (the ticket archive pointing at the open tickets category). */
html body .app-shell #settingsForm.sys-layout .field.has-warning .resource-picker > summary { border-color: #efc479aa; }
html body .app-shell #settingsForm .field-warning {
  display: flex;
  gap: 8px;
  margin: 2px 0 0;
  padding: 8px 10px;
  border: 1px solid #efc47940;
  border-radius: 9px;
  background: #efc47912;
  color: #efc479;
  font-size: 12px;
  line-height: 1.6;
}

/* Pager buttons from the old one-section-at-a-time view are not used any more. */
html body .app-shell #settingsForm.sys-layout .section-pager { display: none; }

@media (max-width: 700px) {
  html body .app-shell #settingsForm.sys-layout .settings-head { flex-direction: row !important; flex-wrap: wrap !important; row-gap: 10px !important; align-items: center !important; text-align: start !important; }
  html body .app-shell #settingsForm.sys-layout .settings-head > div { flex: 1 1 170px; min-width: 0; text-align: start !important; }
  html body .app-shell #settingsForm.sys-layout .settings-head:has(> .head-setup:not(.hidden)) > div { flex: 1 1 100%; }
  html body .app-shell #settingsForm.sys-layout .settings-head-icon { margin: 0 !important; flex-basis: 34px; width: 34px; height: 34px; }
  html body .app-shell #settingsForm.sys-layout .settings-head h2 { font-size: 17px; text-align: start !important; }
  html body .app-shell #settingsForm.sys-layout #moduleToggleWrap { flex: none; width: auto !important; min-height: 0 !important; padding: 6px 10px !important; }
  html body .app-shell #settingsForm.sys-layout .settings-head p.muted { display: none; }
  html body .app-shell #settingsForm.sys-layout #formFields > .field-group > summary .section-heading p { display: none; }
  html body .app-shell #settingsForm.sys-layout #formFields > .field-group > .field-group-body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  html body .app-shell #settingsForm.sys-layout .check-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Moderation chat commands: three ways to call commands, then one row per action (name, word, on/off). */
html body .app-shell #settingsForm .command-mode-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
html body .app-shell #settingsForm .command-mode-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--set-line, var(--ui-border)); border-radius: 10px; background: #ffffff05; cursor: pointer; }
html body .app-shell #settingsForm .command-mode-option:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
html body .app-shell #settingsForm .command-mode-option input { margin-top: 3px; accent-color: var(--ui-accent); }
html body .app-shell #settingsForm .command-mode-option span { display: grid; gap: 2px; }
html body .app-shell #settingsForm .command-mode-option small { color: var(--set-dim, var(--ui-muted)); font-size: 11.5px; line-height: 1.6; }
html body .app-shell #settingsForm .command-word-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
html body .app-shell #settingsForm .command-word-group { padding: 10px 12px; border: 1px solid var(--set-line, var(--ui-border)); border-radius: 12px; }
html body .app-shell #settingsForm .command-word-group h4 { margin: 0 0 8px; font-size: 13px; color: var(--ui-muted); }
html body .app-shell #settingsForm .command-word-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid #ffffff08; }
html body .app-shell #settingsForm .command-word-row:first-of-type { border-top: 0; }
html body .app-shell #settingsForm .command-word-row > span { font-size: 13px; }
html body .app-shell #settingsForm .command-word-row input[data-command-word] { min-height: 32px; padding: 5px 9px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-input, #0c1011); color: var(--ui-text); }
html body .app-shell #settingsForm .command-mode-option input[type="radio"] { flex: none; width: 16px !important; height: 16px !important; min-height: 0 !important; padding: 0 !important; margin: 3px 0 0; border: 0 !important; box-shadow: none !important; appearance: auto; }

/* Developer notices: where the notice goes */
html body .app-shell .dev-audience { margin: 0; padding: 0; border: 0; }
html body .app-shell .dev-audience legend { margin-bottom: 8px; font-weight: 700; font-size: 13px; }
html body .app-shell .dev-audience-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html body .app-shell .dev-audience-option { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line, #22282c); border-radius: 12px; background: var(--surface-2, #14181b); cursor: pointer; }
html body .app-shell .dev-audience-option:has(input:checked) { border-color: var(--accent, var(--t-accent, #9fdcc8)); background: #9fdcc80f; }
html body .app-shell .dev-audience-option input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--t-accent, #9fdcc8); flex: none; }
html body .app-shell .dev-audience-option span { display: grid; gap: 2px; }
html body .app-shell .dev-audience-option small { color: var(--muted, #7b9a90); font-size: 11.5px; }
@media (max-width: 760px) { html body .app-shell .dev-audience-options { grid-template-columns: minmax(0, 1fr); } }
html body .app-shell .dev-overview > .dev-kpis { grid-column: 1 / -1; margin: 0; }

/* Server logs: delivery choice and a channel per kind of log */
html body .app-shell .log-delivery { margin: 0 0 4px; padding: 0; border: 0; }
html body .app-shell .log-delivery legend { margin-bottom: 8px; font-weight: 700; font-size: 13px; }
html body .app-shell .log-delivery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html body .app-shell .log-delivery-option { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, #22282c); border-radius: 12px; background: var(--surface-2, #14181b); cursor: pointer; transition: border-color .15s, background-color .15s; }
html body .app-shell .log-delivery-option:has(input:checked) { border-color: var(--accent, var(--t-accent, #9fdcc8)); background: #9fdcc80f; }
html body .app-shell .log-delivery-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
html body .app-shell .log-delivery-option:has(input:focus-visible) { outline: 2px solid var(--accent, var(--t-accent, #9fdcc8)); outline-offset: 2px; }
html body .app-shell .log-delivery-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent); color: var(--accent, var(--t-accent, #9fdcc8)); }
html body .app-shell .log-delivery-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .app-shell .log-delivery-copy { display: grid; gap: 3px; }
html body .app-shell .log-delivery-copy small { color: var(--muted, #7b9a90); font-size: 12px; line-height: 1.6; }
html body .app-shell .log-route-groups { display: grid; gap: 14px; }
html body .app-shell .log-route-group h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted, #aac1ba); }
html body .app-shell .log-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
html body .app-shell .log-route-grid > .field { margin: 0; }
/* The per-kind channels only matter in "a channel per kind" mode. */
#settingsForm:has(input[name="logDelivery"][value="threads"]:checked) [data-settings-section="logRoutes"],
#settingsForm:has(input[name="logDelivery"][value="threads"]:checked) [data-section-tab="logRoutes"] { display: none; }
@media (max-width: 760px) {
  html body .app-shell .log-delivery-options, html body .app-shell .log-route-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Tickets: per-kind pickers sit in the kind's grid; the words guide lists what staff and members type. */
html body .app-shell .ticket-type-slot { display: contents; }
html body .app-shell .ticket-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html body .app-shell .ticket-words-block { min-width: 0; padding: 14px 16px; border: 1px solid var(--line, #22282c); border-radius: 12px; background: var(--surface-2, #14181b); }
html body .app-shell .ticket-words-block strong { display: block; margin-bottom: 10px; font-size: 13px; color: var(--ui-text, inherit); }
html body .app-shell .ticket-words-block ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body .app-shell .ticket-words-block li { display: grid; gap: 3px; min-width: 0; }
html body .app-shell .ticket-word { display: flex; flex-wrap: wrap; gap: 6px; }
html body .app-shell .ticket-word code { padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent); color: var(--accent, var(--t-accent, #9fdcc8)); font-size: 12px; white-space: nowrap; }
html body .app-shell .ticket-words-block small { color: var(--ui-muted, #8a9a97); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 760px) { html body .app-shell .ticket-words { grid-template-columns: minmax(0, 1fr); } }
/* Pickers inside an open ticket kind or auto-response row open over the content instead of being cut by the row. */
html body .app-shell .ticket-type[open], html body .app-shell .auto-response-row[open] { overflow: visible !important; }
html body .app-shell .ticket-type[open] .image-source-picker[open], html body .app-shell .ticket-type[open] .resource-picker[open] { z-index: 30; }

/* Message type: one dropdown in every system, then the side picture and banner side by side. */
html body .app-shell #settingsForm .message-style-field:not(.levels-choice-field) { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; }
html body .app-shell #settingsForm .message-style-dropdown { position: relative; }
html body .app-shell #settingsForm .message-style-dropdown > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; border: 1px solid var(--ui-border, #22282c); border-radius: 10px; background: var(--ui-input, #121619); list-style: none; cursor: pointer; }
html body .app-shell #settingsForm .message-style-dropdown > summary::-webkit-details-marker { display: none; }
html body .app-shell #settingsForm .message-style-dropdown[open] > summary { border-color: color-mix(in srgb,var(--t-accent,#9fdcc8) 40%,transparent); }
html body .app-shell #settingsForm .message-style-dropdown[open] > summary .resource-chevron { transform: rotate(180deg); }
html body .app-shell #settingsForm .message-style-dropdown .resource-chevron { flex: none; width: 16px; height: 16px; margin-inline-start: auto; fill: none; stroke: var(--ui-muted, #8a9a97); stroke-width: 2; transition: transform .15s; }
html body .app-shell #settingsForm .message-style-current { display: flex; align-items: center; gap: 10px; min-width: 0; }
html body .app-shell #settingsForm .message-style-field :is(.message-style-current, .message-style-menu .message-style-option) svg { flex: none; width: 30px !important; height: 30px !important; min-width: 30px; padding: 6px; border-radius: 8px; background: var(--ui-accent-soft, #9fdcc81a); color: var(--ui-accent, var(--t-accent, #9fdcc8)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html body .app-shell #settingsForm :is(.message-style-current, .message-style-menu .message-style-option) > span { display: grid; gap: 2px; min-width: 0; text-align: start; }
html body .app-shell #settingsForm :is(.message-style-current, .message-style-menu .message-style-option) b { color: var(--ui-text, #e8f2f0); font-size: 13px; font-weight: 700; }
html body .app-shell #settingsForm :is(.message-style-current, .message-style-menu .message-style-option) small { overflow: hidden; color: var(--ui-muted, #8a9a97); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
html body .app-shell #settingsForm .message-style-menu { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 35; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--ui-border, #22282c); border-radius: 12px; background: var(--ui-panel, #111817); box-shadow: 0 18px 40px #00000066; }
html body .app-shell #settingsForm .message-style-menu .message-style-option { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 10px; width: 100%; min-width: 0; min-height: 48px !important; padding: 6px 10px !important; border: 0 !important; border-radius: 8px; background: transparent !important; box-shadow: none !important; color: var(--ui-text, #e8f2f0); font: inherit; cursor: pointer; }
html body .app-shell #settingsForm .message-style-menu .message-style-option:hover, html body .app-shell #settingsForm .message-style-menu .message-style-option:focus-visible { background: #ffffff0a !important; outline: none; }
html body .app-shell #settingsForm .message-style-menu .message-style-option.selected { background: var(--ui-accent-soft, #9fdcc81a) !important; }
html body .app-shell #settingsForm .message-media-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
html body .app-shell #settingsForm .message-media-row > .field { margin: 0; min-width: 0; }
html body .app-shell #settingsForm .message-media-row:not(:has(> .field:not(.style-hidden))) { display: none; }
@media (max-width: 640px) { html body .app-shell #settingsForm .message-media-row { grid-template-columns: minmax(0, 1fr); } }

/* Moderation: punishment durations as one tidy table, a row each (cards on phones). */
html body .app-shell #settingsForm .duration-head,
html body .app-shell #settingsForm .moderation-duration.duration-row { display: grid !important; grid-template-columns: 150px minmax(0, 1.1fr) 220px minmax(0, 1.6fr) 38px; align-items: center; gap: 10px; }
html body .app-shell #settingsForm .duration-head { margin-top: 14px; padding: 0 12px 8px; color: var(--ui-muted, #8a9a97); font-size: 11px; font-weight: 700; }
html body .app-shell #settingsForm #moderationDurations { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--ui-border, #22282c); border-radius: 12px; }
html body .app-shell #settingsForm .moderation-duration.duration-row { margin: 0 !important; padding: 8px 12px !important; border: 0 !important; border-bottom: 1px solid var(--ui-border, #22282c) !important; border-radius: 0 !important; background: transparent !important; }
html body .app-shell #settingsForm .moderation-duration.duration-row:last-child { border-bottom: 0 !important; }
html body .app-shell #settingsForm .moderation-duration.duration-row:hover { background: #ffffff05 !important; }
html body .app-shell #settingsForm .duration-row :is(input, select) { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border, #22282c); border-radius: 8px; background: var(--ui-input, #121619); color: var(--ui-text, #e8f2f0); font: inherit; font-size: 13px; }
html body .app-shell #settingsForm .duration-row :is(input, select):focus { border-color: color-mix(in srgb,var(--t-accent,#9fdcc8) 50%,transparent); outline: none; }
html body .app-shell #settingsForm .duration-row .duration-emoji { display: flex; align-items: center; height: 38px; overflow: hidden; border: 1px solid var(--ui-border, #22282c); border-radius: 8px; background: var(--ui-input, #121619); }
html body .app-shell #settingsForm .duration-row .duration-emoji input { height: 36px; border: 0 !important; background: transparent !important; }
html body .app-shell #settingsForm .duration-row .duration-emoji .component-emoji-preview { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-inline-end: 1px solid var(--ui-border, #22282c); }
html body .app-shell #settingsForm .duration-row .duration-time { display: grid !important; grid-template-columns: 76px minmax(0, 1fr); gap: 6px; grid-column: auto !important; }
html body .app-shell #settingsForm .duration-row input:disabled { opacity: .45; cursor: not-allowed; }
html body .app-shell #settingsForm .duration-remove { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #5a2a32; border-radius: 8px; background: #2a1418; color: #ff9aa6; cursor: pointer; }
html body .app-shell #settingsForm .duration-remove:hover { background: #3a1820; }
html body .app-shell #settingsForm .duration-remove svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  html body .app-shell #settingsForm .duration-head { display: none !important; }
  html body .app-shell #settingsForm .moderation-duration.duration-row { grid-template-columns: 120px minmax(0, 1fr) 38px; padding: 12px !important; }
  html body .app-shell #settingsForm .duration-row .duration-time { grid-column: 1 / -1 !important; }
  html body .app-shell #settingsForm .duration-row .duration-reason { grid-column: 1 / -1; }
  html body .app-shell #settingsForm .duration-row .duration-remove { grid-row: 1; grid-column: 3; }
}

/* Moderation log emojis: one card per panel section, an action per row with its emoji preview. */
html body .app-shell #settingsForm .log-emoji-groups { columns: 3 280px; column-gap: 12px; margin-top: 14px; }
html body .app-shell #settingsForm .log-emoji-group { display: block; width: 100%; margin: 0 0 12px; break-inside: avoid; min-width: 0; overflow: hidden; border: 1px solid var(--ui-border, #22282c); border-radius: 12px; background: #ffffff03; }
html body .app-shell #settingsForm .log-emoji-group h4 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--ui-border, #22282c); color: var(--ui-text, #e8f2f0); font-size: 13px; }
html body .app-shell #settingsForm .log-emoji-list { display: grid; }
html body .app-shell #settingsForm .log-emoji-item { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 10px; margin: 0; padding: 7px 14px; border-bottom: 1px solid #ffffff08; }
html body .app-shell #settingsForm .log-emoji-item:last-child { border-bottom: 0; }
html body .app-shell #settingsForm .log-emoji-name { overflow: hidden; color: var(--ui-text, #e8f2f0); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
html body .app-shell #settingsForm .log-emoji-item .component-emoji-field { display: flex; align-items: center; height: 36px; overflow: hidden; border: 1px solid var(--ui-border, #22282c); border-radius: 8px; background: var(--ui-input, #121619); }
html body .app-shell #settingsForm .log-emoji-item .component-emoji-preview { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-inline-end: 1px solid var(--ui-border, #22282c); }
html body .app-shell #settingsForm .log-emoji-item input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 0 !important; background: transparent !important; color: var(--ui-text, #e8f2f0); font: inherit; font-size: 13px; }

/* Moderation command levels: the list opens over the page; each level shows its name and the roles it holds. */
html body .app-shell #settingsForm .moderation-level-picker { position: relative; }
html body .app-shell #settingsForm .moderation-level-picker .resource-picker-body { position: absolute !important; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; width: min(320px, 86vw); padding: 6px; border: 1px solid var(--ui-border, #22282c); border-radius: 12px; background: var(--ui-panel, #111817); box-shadow: 0 18px 40px #00000066; }
html body .app-shell #settingsForm .moderation-level-picker .resource-options { display: grid; gap: 2px; max-height: none; }
html body .app-shell #settingsForm .moderation-level-picker .level-option { display: grid !important; grid-template-columns: 10px minmax(0, 1fr) 18px !important; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px; border: 0; border-radius: 8px; }
html body .app-shell #settingsForm .moderation-level-picker .level-option .resource-option-copy { display: grid; gap: 2px; min-width: 0; text-align: start; }
html body .app-shell #settingsForm .moderation-level-picker .level-option strong { font-size: 13px; }
html body .app-shell #settingsForm .moderation-level-picker .level-option small { overflow: hidden; color: var(--ui-muted, #8a9a97); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
html body .app-shell #settingsForm .moderation-level-picker .level-option .resource-check { width: 18px; height: 18px; }

/* Jail channels fill the row instead of leaving an empty column. */
html body .app-shell #settingsForm details.field-group[data-settings-section="moderationJail"] > .field-group-body { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body .app-shell #settingsForm details.field-group[data-settings-section="moderationJail"] > .field-group-body > :is(p, .muted) { grid-column: 1 / -1; }
@media (max-width: 900px) { html body .app-shell #settingsForm details.field-group[data-settings-section="moderationJail"] > .field-group-body { grid-template-columns: minmax(0, 1fr) !important; } }
/* An open level list is never cut by its section card. */
html body .app-shell #settingsForm :is(.moderation-action-group, .moderation-action-groups, .moderation-action-group > div):has(.moderation-level-picker[open]) { overflow: visible !important; z-index: 6; position: relative; }
@media (max-width: 640px) { html body .app-shell #settingsForm .moderation-level-picker .resource-picker-body { width: auto; inset-inline: 0; } }
html body .app-shell #settingsForm .ticket-type-body > .ticket-type-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; }
/* Ticket kinds: the editor in four labelled parts with room between fields. */
html body .app-shell #settingsForm .ticket-type-body { row-gap: 14px !important; }
html body .app-shell #settingsForm .ticket-type-body > .field { margin: 0 !important; }
html body .app-shell #settingsForm .ticket-type-body > .ticket-type-section { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--ui-border, #22282c); color: var(--ui-accent, var(--t-accent, #9fdcc8)); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
html body .app-shell #settingsForm .ticket-type-body > .ticket-type-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html body .app-shell #settingsForm .ticket-type-body .field small { line-height: 1.5; }

/* Bot texts (developers' page and each system page). */
html body .app-shell .bot-texts-toolbar { display: grid; gap: 10px; margin-bottom: 12px; }
html body .app-shell .bot-texts-systems { display: flex; flex-wrap: wrap; gap: 6px; }
html body .app-shell .bot-texts-systems button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--ui-border, #22282c); border-radius: 999px; background: transparent; color: var(--ui-muted, #8a9a97); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
html body .app-shell .bot-texts-systems button span { padding: 1px 7px; border-radius: 999px; background: #ffffff0d; font-size: 11px; }
html body .app-shell .bot-texts-systems button[aria-selected="true"] { border-color: color-mix(in srgb,var(--t-accent,#9fdcc8) 40%,transparent); background: var(--ui-accent-soft, #9fdcc81a); color: var(--ui-accent, var(--t-accent, #9fdcc8)); }
html body .app-shell .bot-texts-search { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--ui-border, #22282c); border-radius: 10px; background: var(--ui-input, #121619); color: var(--ui-text, #e8f2f0); font: inherit; }
html body .app-shell .bot-texts-list { display: grid; gap: 8px; }
html body .app-shell .bot-text-row { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--ui-border, #22282c); border-radius: 10px; background: #ffffff03; }
html body .app-shell .bot-text-row.changed { border-color: color-mix(in srgb,var(--t-accent,#9fdcc8) 33%,transparent); }
html body .app-shell .bot-text-row > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
html body .app-shell .bot-text-row > header strong { min-width: 0; overflow: hidden; color: var(--ui-text, #e8f2f0); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 260px; }
html body .app-shell .bot-text-tags { display: inline-flex; align-items: center; gap: 6px; }
html body .app-shell .bot-text-tags em { padding: 2px 8px; border-radius: 999px; background: #ffffff0d; color: var(--ui-muted, #8a9a97); font-size: 11px; font-style: normal; }
html body .app-shell .bot-text-tags em.on { background: var(--ui-accent-soft, #9fdcc81a); color: var(--ui-accent, var(--t-accent, #9fdcc8)); }
html body .app-shell .bot-text-tags code { color: #6f7f7c; font-size: 10px; direction: ltr; }
html body .app-shell .bot-text-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px 36px; align-items: end; gap: 8px; }
html body .app-shell .bot-text-fields.server { grid-template-columns: minmax(0, 1fr) 150px; }
html body .app-shell .bot-text-fields label { display: grid; gap: 4px; min-width: 0; margin: 0; }
html body .app-shell .bot-text-fields label > span { overflow: hidden; color: var(--ui-muted, #8a9a97); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
html body .app-shell .bot-text-fields :is(textarea, input) { width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--ui-border, #22282c); border-radius: 8px; background: var(--ui-input, #121619); color: var(--ui-text, #e8f2f0); font: inherit; font-size: 13px; resize: vertical; }
html body .app-shell .bot-text-fields :is(textarea, input):focus { border-color: color-mix(in srgb,var(--t-accent,#9fdcc8) 50%,transparent); outline: none; }
html body .app-shell .bot-text-reset { width: 36px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ui-border, #22282c); border-radius: 8px; background: transparent; color: var(--ui-muted, #8a9a97); cursor: pointer; }
html body .app-shell .bot-text-reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .app-shell .bot-text-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--ui-muted, #8a9a97); font-size: 11px; }
html body .app-shell .bot-text-vars code { padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb,var(--t-accent,#9fdcc8) 8%,transparent); color: var(--ui-accent, var(--t-accent, #9fdcc8)); direction: ltr; }
html body .app-shell .bot-texts-server { display: grid; gap: 10px; }
html body .app-shell .bot-texts-server > .button.primary { justify-self: start; }
@media (max-width: 760px) {
  html body .app-shell .bot-text-fields { grid-template-columns: minmax(0, 1fr) 36px; }
  html body .app-shell .bot-text-fields label { grid-column: 1 / -1; }
  html body .app-shell .bot-text-fields label.bot-text-emoji { grid-column: 1; }
  html body .app-shell .bot-text-fields.server { grid-template-columns: minmax(0, 1fr); }
}

/* ===================== dashboard-polish.css ===================== */
/* Dashboard polish — aligns the control panel with the v5 brand identity.
   Additive and scoped to the app shell; relies on the shared design tokens. */

/* Pro-only badge in the systems menu */
.app-shell .nav-item .nav-pro-chip {
  margin-inline-start: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--brand-primary, var(--t-accent, #9fdcc8));
  background: color-mix(in srgb, var(--t-accent, #9fdcc8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent, #9fdcc8) 28%, transparent);
}
/* When a Pro item also carries a status dot, keep both and let the chip hug the dot. */
.app-shell .nav-item .nav-pro-chip + .status-dot { margin-inline-start: 8px; }

/* Slightly stronger active state so the current system reads at a glance */
.app-shell #nav .nav-item.active {
  box-shadow: inset 2px 0 0 var(--brand-primary, var(--t-accent, #9fdcc8));
}
[dir="rtl"] .app-shell #nav .nav-item.active {
  box-shadow: inset -2px 0 0 var(--brand-primary, var(--t-accent, #9fdcc8));
}

/* System settings header: a package / Pro chip above the title (added by renderSettingsCrumb) */
html .app-shell #settingsForm .settings-crumb { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
html .app-shell #settingsForm .settings-crumb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 700; line-height: 1; }
html .app-shell #settingsForm .settings-crumb-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html .app-shell #settingsForm .settings-crumb-chip.pkg { background: var(--ui-accent-soft); color: var(--ui-accent-hover); }
html .app-shell #settingsForm .settings-crumb-chip.pro { background: rgba(239, 196, 121, .16); color: var(--brand-warning, #efc479); }

/* Message live preview → a cleaner Discord-style window (header bar + framed message) */
html .app-shell #settingsForm .message-live-preview { border-radius: 16px !important; background: #0b1011 !important; border-color: var(--brand-border, #243a37) !important; overflow: hidden; }
html .app-shell #settingsForm .message-live-preview::before { margin: 0 !important; padding: 11px 16px !important; border-bottom: 1px solid var(--brand-border, #243a37); background: #0e1617; color: var(--brand-muted, #9db4ad) !important; font-weight: 700 !important; }
html .app-shell #settingsForm .discord-preview-stage { padding: 16px !important; background: radial-gradient(520px 260px at 88% -10%, color-mix(in srgb, var(--t-accent, #9fdcc8) 5%, transparent), transparent 60%) !important; }
html .app-shell #settingsForm .discord-preview-card { border-radius: 10px !important; }

/* ── Voice bots (customer page, sales inventory, purchase count) ── */
.voice-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.voice-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-panel); }
.voice-stat small { color: var(--ui-muted); font-size: .8rem; }
.voice-stat strong { color: var(--ui-text); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.voice-stat.good strong { color: var(--ui-accent); }
.voice-stat.warn { border-color: var(--ui-accent-soft); }
.voice-panel { margin-top: 16px; }
.voice-invite-list, .voice-bot-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.voice-invite-row, .voice-bot-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-raised); min-width: 0; }
.voice-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.voice-invite-row strong, .voice-bot-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text); }
.voice-invite-row small, .voice-bot-row small { color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-bot-row img, .voice-avatar-fallback { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.voice-avatar-fallback { display: grid; place-items: center; background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 700; }
.voice-state { font-style: normal; font-size: .75rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ui-border); color: var(--ui-muted); white-space: nowrap; }
.voice-state.available { color: var(--ui-accent); border-color: var(--ui-accent-soft); background: var(--ui-accent-soft); }
.voice-state.reserved, .voice-state.transfer { color: var(--ui-text); background: var(--ui-input); }
.voice-activate-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.voice-activate-bar .field { flex: 1 1 240px; margin: 0; }
.voice-all-active { display: flex; align-items: center; gap: 8px; color: var(--ui-accent); margin: 16px 0; }
.voice-discord-note { margin-top: 16px; }
.voice-import { display: grid; gap: 10px; margin-bottom: 16px; }
.voice-import textarea { width: 100%; min-height: 96px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.voice-import-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-search { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-input); color: var(--ui-muted); }
.voice-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.voice-search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; color: var(--ui-text); outline: none; }
.voice-import textarea::placeholder { font-family: inherit; letter-spacing: normal; }
.voice-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; color: var(--ui-muted); }
.voice-quantity { display: block; margin-top: 10px; }
.voice-quantity label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--ui-muted); }
.voice-quantity input { width: 96px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--ui-border); background: var(--ui-input); color: var(--ui-text); text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .voice-invite-row { flex-wrap: wrap; }
  .voice-invite-row .button, .voice-activate-bar .button { width: 100%; justify-content: center; }
}

.voice-invite-row.central { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.voice-central-badge { display: inline-block; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-bg); font-size: .7rem; font-style: normal; font-weight: 700; vertical-align: middle; }
.voice-central-hint { color: var(--ui-text) !important; white-space: normal !important; }

/* Custom bot source: own token or a bot from the TRIVUS central inventory */
.bot-source-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bot-source-choice label { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-raised); cursor: pointer; }
.bot-source-choice label:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.bot-source-choice input { margin-top: 3px; accent-color: var(--ui-accent); }
.bot-source-choice span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bot-source-choice small { color: var(--ui-muted); }
.voice-state.custom { color: var(--ui-accent); border-color: var(--ui-accent); }

/* Voice bots dialog (opened from a subscription card) */
.voice-bots-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 20px; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-bg); color: var(--ui-text); }
.voice-bots-dialog::backdrop { background: rgb(0 0 0 / .55); }
.voice-dialog-close { display: flex; justify-content: flex-end; margin: 0; }
.voice-activate-bar input#voiceCentralRoom { width: 100%; }

/* Voice bots page: section heads keep the count beside the title; the texts editor is a panel of its own. */
.voice-panel .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.voice-panel .panel-head > div { display: grid; gap: 4px; min-width: 0; }
.voice-panel .panel-head small { color: var(--ui-muted); line-height: 1.6; }
.voice-panel .panel-head .count-badge { flex: none; background: var(--ui-accent-soft); color: var(--ui-accent); }
.bot-texts-panel > .muted { margin: 8px 0 12px; }
.bot-texts-panel .bot-texts-server > [data-load-bot-texts] { justify-self: start; }
#voiceBotsContent svg { max-width: 24px; max-height: 24px; }
.voice-locations { display: grid; gap: 6px; margin: 4px 0 16px; padding: 14px; border: 1px dashed var(--ui-border); border-radius: 14px; }
.voice-locations h4 { margin: 0; font-size: .95rem; }
.voice-locations .voice-bot-list { margin: 8px 0 0; }
.voice-locations .voice-avatar-fallback { font-size: .8rem; }

/* ===== Voice bots page: bots with pictures and the /voice settings (voice-panel.js) ===== */
.vp-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--ui-raised); }
.vp-avatar.fallback { display: grid; place-items: center; color: var(--ui-accent); background: var(--ui-accent-soft); font-weight: 800; }
.voice-invite-row .vp-avatar { width: 36px; height: 36px; }
.vp-bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.vp-bot { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-raised); }
.vp-bot-face { position: relative; flex: none; }
.vp-dot { position: absolute; bottom: 0; inset-inline-end: 0; width: 12px; height: 12px; border: 2px solid var(--ui-raised); border-radius: 50%; background: #6b7280; }
.vp-bot.online .vp-dot { background: #22c55e; }
.vp-bot-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.vp-bot-copy strong { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--ui-text); white-space: nowrap; text-overflow: ellipsis; }
.vp-bot-copy small { overflow: hidden; color: var(--ui-muted); white-space: nowrap; text-overflow: ellipsis; }
.vp-leader { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 8px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: .7rem; font-style: normal; font-weight: 700; }
.vp-leader svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.vp-warn { color: #fbbf24; font-weight: 600; }
.vp-edit { flex: none; gap: 6px; min-height: 36px; padding: 0 12px; }
.vp-edit svg, .vp-tile svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vp-controls .vp-group + .vp-group { margin-top: 16px; }
.vp-group h4 { margin: 14px 0 8px; color: var(--ui-muted); font-size: .8rem; font-weight: 700; }
.vp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.vp-tiles.single { grid-template-columns: 1fr; }
.vp-tile { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-raised); color: var(--ui-text); font: inherit; font-size: .88rem; font-weight: 600; text-align: start; cursor: pointer; transition: border-color .15s, background .15s; }
.vp-tile:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.vp-tile:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.vp-tile svg { color: var(--ui-accent); }
.vp-tile.danger svg { color: #f87171; }
.vp-tile.danger:hover { border-color: #f8717180; background: #f871711a; }
/* Forms */
.vp-dialog { width: min(560px, calc(100vw - 24px)); padding: 0; }
.vp-form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.vp-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ui-border); }
.vp-form-head h3 { margin: 0 0 3px; font-size: 1.05rem; }
.vp-form-head small { color: var(--ui-muted); }
.vp-bot-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vp-form-body { display: grid; gap: 14px; padding: 16px 20px; overflow-y: auto; }
.vp-field { display: grid; gap: 6px; margin: 0; }
.vp-field[hidden] { display: none; }
.vp-field > label { font-weight: 700; font-size: .85rem; }
.vp-field > label small { color: var(--ui-muted); font-weight: 500; }
.vp-field input[type="text"], .vp-field select, .vp-field input[inputmode] { width: 100%; min-height: 42px; }
.vp-hint { color: var(--ui-muted); font-size: .78rem; line-height: 1.6; }
.vp-confirm { margin: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-raised); color: var(--ui-text); line-height: 1.7; }
.vp-upload { display: grid; gap: 8px; cursor: pointer; }
.vp-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vp-upload-face { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px; border: 1.5px dashed var(--ui-border); border-radius: 12px; background: var(--ui-input); color: var(--ui-muted); text-align: center; }
.vp-upload:hover .vp-upload-face, .vp-upload input:focus-visible + .vp-upload-face { border-color: var(--ui-accent); color: var(--ui-text); }
.vp-upload-face svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vp-upload-face b { overflow: hidden; max-width: 100%; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.vp-preview { max-width: 100%; max-height: 160px; justify-self: center; border-radius: 12px; object-fit: contain; }
.vp-checks { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; padding: 8px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-input); }
.vp-checks label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-raised); font-size: .82rem; cursor: pointer; }
.vp-checks label:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.vp-checks input { accent-color: var(--ui-accent); }
.vp-result { margin: 0 20px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-raised); color: var(--ui-text); line-height: 1.7; white-space: pre-line; }
.vp-result p { margin: 0; }
.vp-result.ok { border-color: color-mix(in srgb, var(--ui-accent) 50%, transparent); }
.vp-result.error { border-color: #f8717180; color: #fecaca; }
.vp-result pre { max-height: 220px; margin: 10px 0 0; padding: 10px; overflow: auto; border-radius: 10px; background: var(--ui-input); font-size: .75rem; white-space: pre-wrap; direction: ltr; text-align: left; }
.vp-form-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--ui-border); margin-top: 14px; }
@media (max-width: 560px) {
  .vp-bot { flex-wrap: wrap; }
  .vp-edit { width: 100%; justify-content: center; }
  .vp-form-foot .button { flex: 1; justify-content: center; }
}

/* ===== Welcome card studio (welcome-card.js) ===== */
.wc-sender { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.wc-sender-option { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-raised); cursor: pointer; transition: border-color .15s, background .15s; }
.wc-sender-option:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); }
.wc-sender-option:has(input:checked) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-raised)); }
.wc-sender-option:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.wc-sender-option input { position: absolute; opacity: 0; pointer-events: none; }
.wc-sender-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--ui-input); color: var(--ui-muted); }
.wc-sender-option:has(input:checked) .wc-sender-icon { background: var(--ui-accent); color: var(--ui-bg, #0b0e10); }
.wc-sender-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wc-sender-copy { display: grid; gap: 3px; min-width: 0; }
.wc-sender-copy small { color: var(--ui-muted); font-size: .8rem; line-height: 1.6; }

.wc-studio { display: grid; gap: 14px; }
.wc-studio svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wc-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.wc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.wc-toggle-track { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; background: var(--ui-border); transition: background .18s; }
.wc-toggle-track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; }
.wc-toggle input:checked + .wc-toggle-track { background: var(--ui-accent); }
html[dir="rtl"] .wc-toggle input:checked + .wc-toggle-track::after { transform: translateX(-18px); }
html:not([dir="rtl"]) .wc-toggle input:checked + .wc-toggle-track::after { transform: translateX(18px); }
.wc-toggle input:focus-visible + .wc-toggle-track { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.wc-toggle-copy { display: grid; gap: 1px; }
.wc-toggle-copy small { color: var(--ui-muted); font-size: .78rem; }
.wc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wc-actions .button { gap: 8px; min-height: 38px; }
.wc-actions svg { width: 17px; height: 17px; }
.wc-actions .button[aria-pressed="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
.wc-actions [hidden] { display: none !important; }
.wc-upload { cursor: pointer; }
.wc-remove { color: #f87171; }
.wc-remove svg { width: 17px; height: 17px; }
.wc-remove:disabled, .wc-actions .button:disabled { opacity: .4; cursor: not-allowed; }

.wc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 14px; align-items: start; }
.wc-studio.empty .wc-body { grid-template-columns: minmax(0, 1fr); }
.wc-studio.empty .wc-inspector { display: none; }
.wc-stage { position: relative; overflow: hidden; border-radius: 16px; touch-action: none; user-select: none;
  background-color: #14181b; background-image: linear-gradient(45deg, #1b2024 25%, transparent 25%), linear-gradient(-45deg, #1b2024 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1b2024 75%), linear-gradient(-45deg, transparent 75%, #1b2024 75%);
  background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; box-shadow: inset 0 0 0 1px var(--ui-border); }
.wc-studio.busy .wc-stage { opacity: .6; pointer-events: none; }
.wc-bg { display: block; width: 100%; height: auto; pointer-events: none; }
.wc-render { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #14181b; }
.wc-stage [hidden] { display: none !important; }
.wc-drop { display: grid; justify-items: center; gap: 10px; min-height: 260px; padding: 36px 20px; place-content: center; border: 1.5px dashed color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border)); border-radius: 16px; color: var(--ui-muted); text-align: center; line-height: 1.7; cursor: pointer; direction: rtl; transition: border-color .15s, background .15s; }
html:not([dir="rtl"]) .wc-drop { direction: ltr; }
.wc-drop:hover, .wc-drop.over { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 7%, transparent); }
.wc-drop b { color: var(--ui-text); font-size: 1.05rem; }
.wc-drop span:not(.wc-drop-icon) { max-width: 440px; }
.wc-drop small { color: var(--ui-muted); font-size: .76rem; }
.wc-drop-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: color-mix(in srgb, var(--ui-accent) 14%, transparent); color: var(--ui-accent); }
.wc-drop-icon svg { width: 26px; height: 26px; }
.wc-layer { position: absolute; cursor: grab; outline: none; }
.wc-avatar { display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a4148, #22272b); color: #ffffffb3; box-shadow: none; }
.wc-avatar svg { width: 42%; height: 42%; stroke-width: 1.5; }
.wc-text { padding: 2px 8px; border-radius: 8px; font-family: 'Vazirmatn', 'Open Sans', sans-serif; line-height: 1.2; white-space: nowrap; }
.wc-layer::after { content: ''; position: absolute; inset: -6px; border: 1.5px dashed transparent; border-radius: inherit; pointer-events: none; transition: border-color .12s; }
.wc-avatar::after { border-radius: 50%; }
.wc-text::after { border-radius: 10px; }
.wc-layer:hover::after { border-color: #ffffff80; }
.wc-layer.selected::after, .wc-layer:focus-visible::after { border-color: var(--ui-accent); border-style: solid; }
.wc-layer.dragging { cursor: grabbing; }
.wc-guide { position: absolute; z-index: 2; background: var(--ui-accent); pointer-events: none; }
.wc-guide.v { top: 0; bottom: 0; left: 50%; width: 1px; }
.wc-guide.h { left: 0; right: 0; top: 50%; height: 1px; }
.wc-tip { margin: 8px 2px 0; color: var(--ui-muted); font-size: .8rem; line-height: 1.7; }

.wc-inspector { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-raised); }
.wc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--ui-input); }
.wc-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-muted); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.wc-tabs button svg { width: 16px; height: 16px; }
.wc-tabs button[aria-selected="true"] { background: var(--ui-raised); color: var(--ui-text); box-shadow: 0 1px 0 #ffffff0d, 0 2px 8px #0000004d; }
.wc-tabs button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.wc-panel { display: grid; gap: 16px; }
.wc-panel[hidden] { display: none; }
.wc-prop { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; }
.wc-prop.wide { grid-template-columns: 1fr; }
.wc-prop > label, .wc-prop-label { font-size: .84rem; font-weight: 700; }
.wc-prop output { color: var(--ui-accent); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-prop input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--ui-accent); }
.wc-prop input[type="text"] { width: 100%; min-height: 40px; }
.wc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-chips button { padding: 3px 9px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-input); color: var(--ui-muted); font: inherit; font-size: .74rem; cursor: pointer; }
.wc-chips button:hover { border-color: var(--ui-accent); color: var(--ui-text); }
.wc-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wc-swatch { position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px #ffffff26; cursor: pointer; }
.wc-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ui-raised), 0 0 0 4px var(--ui-accent); }
.wc-swatch:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.wc-swatch.custom { background: conic-gradient(from 90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6, #f87171); color: #fff; }
.wc-swatch.custom svg { width: 14px; height: 14px; stroke-width: 2.5; filter: drop-shadow(0 1px 1px #0008); }
.wc-swatch.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wc-segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--ui-input); }
.wc-segment button { display: grid; place-items: center; min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-muted); font: inherit; font-family: 'Vazirmatn', 'Open Sans', sans-serif; font-size: 1rem; cursor: pointer; }
.wc-segment button svg { width: 18px; height: 18px; }
.wc-segment button[aria-checked="true"] { background: var(--ui-raised); color: var(--ui-accent); box-shadow: 0 2px 8px #0000004d; }
.wc-segment button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.wc-check { display: flex; align-items: flex-start; gap: 10px; color: var(--ui-muted); font-size: .84rem; line-height: 1.6; cursor: pointer; }
.wc-check input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--ui-accent); }
@media (max-width: 900px) { .wc-body { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .wc-toggle-track, .wc-toggle-track::after, .wc-layer::after { transition: none; } }

/* Voice page polish: bot numbers, missing bots, check results, rich tiles, no sideways scroll */
.vp-dialog, .vp-form, .vp-form-body { overflow-x: hidden; }
.vp-result { overflow-wrap: anywhere; }
.vp-num { position: absolute; top: -4px; inset-inline-start: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--ui-raised); border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: .65rem; font-weight: 800; }
.vp-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vp-id { color: var(--ui-faint, var(--ui-muted)) !important; font-size: .72rem; font-variant-numeric: tabular-nums; text-align: start; }
.vp-bot.missing { border-color: #fbbf2455; }
.vp-bot .button.primary.vp-edit { text-decoration: none; }
.vp-edit svg { width: 16px; height: 16px; }
.vp-tile.rich { align-items: flex-start; min-height: 58px; }
.vp-tile.rich svg { margin-top: 2px; }
.vp-tile-copy { display: grid; gap: 2px; min-width: 0; }
.vp-tile-copy b { font-weight: 700; }
.vp-tile-copy small { color: var(--ui-muted); font-size: .76rem; font-weight: 500; line-height: 1.5; }
.vp-check-sum { margin: 0 0 10px !important; font-weight: 700; }
.vp-checks-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vp-check { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-input); }
.vp-check.missing { border-color: #fbbf2455; }
.vp-check .vp-avatar { width: 36px; height: 36px; }
.vp-check-copy { display: grid; flex: 1; min-width: 0; }
.vp-check-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-check-copy small { color: var(--ui-muted); font-size: .72rem; text-align: start; }
.vp-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.vp-badge { padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.vp-badge.good { background: #22c55e1f; color: #4ade80; }
.vp-badge.bad { background: #f871711f; color: #fca5a5; }
.vp-check-invite { flex: none; min-height: 34px; padding: 0 12px; text-decoration: none; }
@media (max-width: 560px) {
  .vp-check { flex-wrap: wrap; }
  .vp-badges { justify-content: flex-start; width: 100%; }
  .vp-check-invite { width: 100%; justify-content: center; }
}
/* The settings form styles labels and inputs with margins; the studio sets its own rhythm. */
.wc-studio .wc-prop > *, .wc-studio .wc-panel > *, .wc-studio .wc-prop label, .wc-studio .wc-prop input, .wc-sender-option > * { margin: 0; }
.wc-studio .wc-panel { gap: 18px; }
/* See-through while aligning, so the artwork's own frame shows under the circle. */
.wc-avatar { background: radial-gradient(circle at 50% 40%, #3a4148b3, #22272bb3); backdrop-filter: blur(1px); }
/* Developer centre: section headings in the side navigation and the team members with their sections. */
.app-shell .dev-nav>p:not(:first-child){margin-top:14px;padding-top:12px;border-top:1px solid #24252c}
.dev-team-list{display:grid;gap:8px;margin:12px 0}
.dev-team-member{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px 10px;padding:10px;border:1px solid #2a2b33;border-radius:10px;background:#101012}
.dev-team-member>.entity-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.dev-team-name{display:grid;min-width:0}.dev-team-name strong,.dev-team-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-team-name small{color:#8b8c9c;font-size:12px}
.dev-team-sections{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:6px}
.dev-team-section{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #2f3039;border-radius:999px;font-size:12.5px;cursor:pointer;user-select:none}
.dev-team-section input{margin:0;accent-color:var(--t-accent,#37dac3)}
.dev-team-section:has(input:checked){border-color:color-mix(in srgb,var(--t-accent,#37dac3) 55%,transparent);background:color-mix(in srgb,var(--t-accent,#37dac3) 12%,transparent)}
.dev-team-section:has(input:disabled){opacity:.6;cursor:not-allowed}
/* Picture look: theme tiles, colour pairs, colour fields, background shade and the preview beside the controls. */
#settingsForm .look-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:20px;align-items:start}
#settingsForm .look-controls{display:grid;gap:18px;min-width:0}
#settingsForm .look-block{display:grid;gap:12px;min-width:0;padding-top:16px;border-top:1px solid var(--ui-border)}
#settingsForm .look-block:first-child{padding-top:0;border-top:0}
#settingsForm .look-block>header{display:grid;gap:3px}
#settingsForm .look-block>header b{font-size:14px}
#settingsForm .look-block>header small{color:var(--ui-muted);font-size:12px;line-height:1.6}
#settingsForm .look-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
#settingsForm .look-theme{display:grid;gap:4px;padding:8px 8px 10px;border:1px solid var(--ui-border);border-radius:12px;background:transparent;color:var(--ui-text);text-align:start;cursor:pointer;transition:border-color .15s,background .15s}
#settingsForm .look-theme:hover{border-color:color-mix(in srgb,var(--look-one) 45%,var(--ui-border))}
#settingsForm .look-theme:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#settingsForm .look-theme[aria-pressed="true"]{border-color:var(--look-one);background:color-mix(in srgb,var(--look-one) 9%,transparent)}
#settingsForm .look-theme b{font-size:13px}
#settingsForm .look-theme small{color:var(--ui-muted);font-size:11px;line-height:1.45}
#settingsForm .look-theme-sample{position:relative;display:block;height:58px;margin-bottom:4px;overflow:hidden;border-radius:8px;background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--look-one) 55%,transparent),transparent 60%),radial-gradient(90% 80% at 0% 110%,color-mix(in srgb,var(--look-two) 55%,transparent),transparent 65%),var(--look-base)}
#settingsForm .look-theme-sample i{position:absolute;inset-inline:10px;height:7px;border-radius:4px;background:#ffffff14}
#settingsForm .look-theme-sample i:nth-child(1){top:12px;inset-inline-end:40%;background:#ffffffd0;height:8px}
#settingsForm .look-theme-sample i:nth-child(2){top:28px;background:linear-gradient(90deg,var(--look-two),var(--look-one))}
#settingsForm .look-theme-sample i:nth-child(3){top:42px;inset-inline-end:30%}
#settingsForm .look-palettes{display:flex;flex-wrap:wrap;gap:8px}
#settingsForm .look-palette{display:flex;width:44px;height:30px;padding:0;overflow:hidden;border:2px solid transparent;border-radius:9px;cursor:pointer;background:none;outline-offset:2px}
#settingsForm .look-palette i{flex:1;background:var(--look-one)}
#settingsForm .look-palette i+i{background:var(--look-two)}
#settingsForm .look-palette.default i{background:conic-gradient(#37dac3,#a78bfa,#ff8a4c,#37dac3)}
#settingsForm .look-palette.default i+i{background:#1b1f24}
#settingsForm .look-palette[aria-pressed="true"]{border-color:var(--ui-text)}
#settingsForm .look-palette:focus-visible{outline:2px solid var(--focus)}
#settingsForm .look-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#settingsForm .look-color{display:grid;gap:6px;padding:10px;border:1px solid var(--ui-border);border-radius:12px;min-width:0}
#settingsForm .look-color label{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer}
#settingsForm .look-color input[type=color]{flex:0 0 auto;inline-size:42px;block-size:34px;padding:3px;border:1px solid var(--ui-border);border-radius:9px;background:transparent;cursor:pointer}
#settingsForm .look-color span{display:grid;min-width:0}
#settingsForm .look-color b{font-size:13px}
#settingsForm .look-color small{color:var(--ui-muted);font-size:11px;line-height:1.45}
#settingsForm .look-color .text-button{justify-self:start;font-size:12px}
#settingsForm .look-color .text-button:disabled{opacity:.45;cursor:default}
#settingsForm .look-dim{display:grid;gap:6px}
#settingsForm .look-dim>span{display:flex;justify-content:space-between;align-items:center;font-size:13px}
#settingsForm .look-dim output{color:var(--ui-muted);font-variant-numeric:tabular-nums}
#settingsForm .look-dim input[type=range]{width:100%;accent-color:var(--t-accent,#37dac3)}
#settingsForm .look-dim small{color:var(--ui-muted);font-size:11.5px}
#settingsForm .look-preview-pane{position:sticky;top:80px;display:grid;gap:10px;min-width:0}
#settingsForm .look-kinds{display:flex;flex-wrap:wrap;gap:6px}
#settingsForm .look-kinds button{padding:6px 11px;border:1px solid var(--ui-border);border-radius:999px;background:transparent;color:var(--ui-muted);font-size:12.5px;cursor:pointer}
#settingsForm .look-kinds button[aria-selected="true"]{border-color:var(--t-accent,#37dac3);color:var(--ui-text);background:color-mix(in srgb,var(--t-accent,#37dac3) 12%,transparent)}
#settingsForm .look-kinds button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:1100px){#settingsForm .look-layout{grid-template-columns:minmax(0,1fr)}#settingsForm .look-preview-pane{position:static}}
@media (max-width:640px){#settingsForm .look-colors{grid-template-columns:minmax(0,1fr)}#settingsForm .look-themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sales: a subscription's bots with Replace. */
.sub-bots{display:grid;gap:10px;margin:14px 0;padding:14px;border:1px solid #2a2b33;border-radius:12px;background:#0f1013}
.sub-bots>header{display:grid;gap:4px}.sub-bots>header small{color:#8b8c9c;font-size:12px;line-height:1.6}
.sub-bots>.button{justify-self:start}
.sub-bots-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.sub-bots-row>span{display:flex;gap:8px;align-items:center;color:#a5a6b5;font-size:13px}.sub-bots-row b{color:#f2f3f7}
.sub-bots-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.sub-bot{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid #24252c;border-radius:10px}
.sub-bot>.entity-avatar{width:32px;height:32px;border-radius:50%}
.sub-bot>span{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.sub-bot strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-bot-state{padding:2px 8px;border-radius:999px;font-size:11px;font-style:normal}
.sub-bot-state.bad{background:#ef5f6722;color:#ff9aa0}.sub-bot-state.waiting{background:#e8a33d22;color:#f2c47a}
.sub-bots-invite{display:flex;flex-wrap:wrap;align-items:end;gap:8px}.sub-bots-invite label{display:grid;flex:1 1 260px;gap:4px;font-size:12px;color:#8b8c9c}
.sub-bots-invite input{width:100%;padding:8px 10px;border:1px solid #2a2b33;border-radius:8px;background:#0b0b0d;color:#e6e7ee;font-size:12px;direction:ltr}
@media (max-width:560px){.sub-bot{grid-template-columns:32px minmax(0,1fr)}.sub-bot>.button{grid-column:span 1}}
/* Voice bots page on phones: three compact counters in one row, each bot on one line with a small action, and the
   control tiles two to a row instead of a long single column. */
@media (max-width: 640px) {
  .voice-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .voice-stat { padding: 10px 12px; }
  .voice-stat strong { font-size: 22px; }
  .vp-bot { flex-wrap: nowrap; padding: 10px; gap: 10px; }
  .vp-edit { position: relative; width: auto; min-height: 34px; padding: 0 10px; }
  .vp-edit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vp-bot .button.primary.vp-edit span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .vp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .vp-tile { min-height: 46px; padding: 8px 10px; font-size: 12.5px; }
  .vp-tile span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* Custom bot identities: a status dot on the picture, a real text field, and Restart / Replace beside Save. */
.app-shell .dev-identity{grid-template-columns:auto minmax(0,1fr) auto auto auto auto}
.app-shell .dev-identity-face{position:relative;display:inline-flex}
.app-shell .dev-identity-face .dev-dot{position:absolute;inset-block-end:-1px;inset-inline-end:-1px;width:11px;height:11px;border:2px solid #111214;border-radius:50%;background:#6b6c7b}
.app-shell .dev-identity-face .dev-dot.on{background:#22c55e}
.app-shell .dev-identity-name input{border:1px solid var(--ui-border,#2a2b33);border-radius:9px;background:var(--ui-input,#0d0e10);color:var(--ui-text,#eceef4);font:inherit;font-weight:600}
.app-shell .dev-identity-name input:focus-visible{outline:2px solid var(--focus,#37dac3);outline-offset:1px}
.app-shell .dev-identity-more{display:flex;gap:6px}
.app-shell .dev-identity-more .button{gap:6px}
.app-shell .dev-identity-more svg{width:15px;height:15px}
.app-shell .button.danger-text{color:#ff9aa0}
@media (max-width:1100px){
  .app-shell .dev-identity{grid-template-columns:auto minmax(0,1fr) auto}
  .app-shell .dev-identity .dev-file,.app-shell .dev-identity [data-save-host-bot]{grid-column:auto}
  .app-shell .dev-identity-more{grid-column:1/-1;justify-content:flex-end}
}
@media (max-width:640px){
  .app-shell .dev-identity{display:flex;flex-wrap:wrap;gap:8px}
  .app-shell .dev-identity-name{flex:1 1 0;min-width:0}
  .app-shell .dev-identity .dev-file{flex:1 1 calc(50% - 4px);max-width:none}
  .app-shell .dev-identity [data-save-host-bot]{flex:1 1 100%;justify-content:center}
  .app-shell .dev-identity-more{flex:1 1 100%}
  .app-shell .dev-identity-more .button{flex:1;justify-content:center}
}
/* Bot centre: the inventory as a grid of compact cards; held and broken bots stand out. */
.voice-inventory-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.voice-state.held { color: #f2c47a; border-color: #e8a33d55; background: #e8a33d1a; }
.voice-state.broken { color: #ff9aa0; border-color: #ef5f6755; background: #ef5f671a; }
.voice-state.assigned { color: var(--ui-muted); }
/* Servers and control (developer centre): a searchable list of each bot's servers. */
.bm-search{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:0 12px;border:1px solid var(--ui-border,#2a2b33);border-radius:12px;background:var(--ui-input,#0d0e10)}
.bm-search svg{width:16px;height:16px;flex:none;color:var(--ui-muted,#8b8c9c)}
.bm-search input{flex:1;min-width:0;min-height:42px;border:0;background:transparent;color:inherit;font:inherit;outline:none}
.bm-bot{margin:0 0 16px;border:1px solid var(--ui-border,#2a2b33);border-radius:14px;overflow:hidden}
.bm-bot>header{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#ffffff05;border-bottom:1px solid var(--ui-border,#2a2b33)}
.bm-bot>header>div{display:grid;flex:1;min-width:0}
.bm-bot>header small{color:var(--ui-muted,#8b8c9c);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-dot{width:10px;height:10px;flex:none;border-radius:50%;background:#6b6c7b}.bm-dot.on{background:#22c55e;box-shadow:0 0 0 3px #22c55e26}
.bm-rows{display:grid}
.bm-row{border-bottom:1px solid #ffffff08}.bm-row:last-child{border-bottom:0}
.bm-row>summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto auto;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none}
.bm-row>summary::-webkit-details-marker{display:none}
.bm-row>summary:hover{background:#ffffff05}
.bm-row>summary:focus-visible{outline:2px solid var(--focus,#37dac3);outline-offset:-2px}
.bm-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#ffffff0d;color:var(--ui-text,#eceef4);font-weight:700}
.bm-icon.blocked{background:#ef5f671f;color:#ff9aa0}.bm-icon svg{width:16px;height:16px}
.bm-name{display:grid;min-width:0}.bm-name b,.bm-name bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-name bdi,.dev-management-block bdi{justify-self:start;color:var(--ui-muted,#8b8c9c);font-size:11.5px}
.bm-members{display:inline-flex;align-items:center;gap:5px;color:var(--ui-muted,#8b8c9c);font-size:12.5px;font-variant-numeric:tabular-nums}
.bm-members svg{width:14px;height:14px}
.bm-tag{padding:3px 9px;border-radius:999px;font-size:11.5px;white-space:nowrap;border:1px solid transparent}
.bm-tag.ok{color:var(--ui-accent,#37dac3);background:color-mix(in srgb,var(--ui-accent,#37dac3) 12%,transparent)}
.bm-tag.warn{color:#f2c47a;background:#e8a33d1a}.bm-tag.bad{color:#ff9aa0;background:#ef5f671a}.bm-tag.none{color:var(--ui-muted,#8b8c9c);border-color:#ffffff12}
.bm-more{color:var(--ui-muted,#8b8c9c);font-size:12px}
.bm-row[open] .bm-more{color:var(--ui-text,#eceef4)}
.bm-body{padding:4px 14px 14px 14px}
.dev-management-block{display:flex;align-items:center;gap:12px}
.dev-management-block>div{flex:1;min-width:0;display:grid}
.dev-management-block bdi{color:var(--ui-muted,#8b8c9c);font-size:11.5px}
@media (max-width:640px){
  .bm-row>summary{grid-template-columns:34px minmax(0,1fr) auto;row-gap:6px}
  .bm-members{grid-column:2}
  .bm-row>summary .bm-tag{grid-column:3;grid-row:1}
  .bm-more{grid-column:3;grid-row:2;justify-self:end}
}

/* Auto-play list (voice bots page and developer centre) */
.auto-playlist .panel-head h3 { display: flex; align-items: center; gap: 8px; }
.auto-playlist-form { display: grid; gap: 10px; margin-top: 12px; }
.auto-playlist-form textarea { min-height: 180px; resize: vertical; line-height: 1.7; font-variant-numeric: tabular-nums; }
.auto-playlist-note:empty { display: none; }
.auto-playlist-note { margin: 0; font-size: .86rem; }
.auto-playlist-actions { display: flex; justify-content: flex-end; }
.auto-playlist .count-badge.warn { color: var(--warning, #f5b74e); border-color: currentColor; }
@media (max-width: 640px) { .auto-playlist-actions .button { width: 100%; justify-content: center; } }

/* Icons inside filled (primary) buttons take the button's text colour: the accent rule above would paint them the
   same colour as the button and hide them. */
.app-shell :is(.button.primary, button.primary) .ui-icon { color: currentColor !important; background: none !important; }

/* Live preview: words under the big picture (welcome «text position»). */
.discord-preview-card.text-below { display:flex; flex-direction:column; }
.discord-preview-card.text-below [data-preview-banner] { order:-1; margin:0 0 10px; }
.discord-preview-card.text-below [data-preview-thumbnail] { order:0; }