/* Legacy feature layout. Visual ownership: interface.css. */
@layer legacy {
/* ========================================================================== 
   DARKNESS MATURE 4.0
   Consolidated visual system replacing the historical polish/refinement/
   redesign/studio override stack. This file contains only product-level visual
   decisions; feature logic remains in each module's own stylesheet/JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Page contexts
   -------------------------------------------------------------------------- */
.dashboard-body,
.status-page { --accent: var(--info); --accent-strong: #4b94b8; --accent-soft: var(--info-soft); --accent-faint: rgba(105,183,220,.055); }
.workspace-body { --accent: #76b8cf; --accent-strong: #4f91aa; --accent-soft: rgba(118,184,207,.10); --accent-faint: rgba(118,184,207,.05); }
.support-area,
.support-chat-page { --accent: var(--community); --accent-strong: #8670c9; --accent-soft: var(--community-soft); --accent-faint: rgba(170,145,232,.05); }
.ticket-central-body { --accent: #7eabd7; --accent-strong: #5f89b4; --accent-soft: rgba(126,171,215,.10); --accent-faint: rgba(126,171,215,.05); }
.legal-body { --accent: #9caab6; --accent-strong: #7d8b97; --accent-soft: rgba(156,170,182,.09); --accent-faint: rgba(156,170,182,.04); }
.config-workspace-body[data-config-section="automod"],
.config-workspace-body[data-config-section="security"],
.config-workspace-body[data-config-section="reports"] { --accent: var(--security); --accent-strong: #4e7fc2; --accent-soft: var(--security-soft); --accent-faint: rgba(108,159,229,.05); }
.config-workspace-body[data-config-section="economy"],
.config-workspace-body[data-config-section="shop"] { --accent: var(--economy); --accent-strong: #b98a43; --accent-soft: var(--economy-soft); --accent-faint: rgba(213,170,98,.05); }
.config-workspace-body[data-config-section="giveaways"],
.config-workspace-body[data-config-section="suggestions"],
.config-workspace-body[data-config-section="polls"],
.config-workspace-body[data-config-section="roles"],
.config-workspace-body[data-config-section="starboard"],
.config-workspace-body[data-config-section="tempvoice"],
.config-workspace-body[data-config-section="faq"] { --accent: var(--community); --accent-strong: #8870cc; --accent-soft: var(--community-soft); --accent-faint: rgba(170,145,232,.05); }
.config-workspace-body[data-config-section="embeds"] { --accent: var(--creative); --accent-strong: #6e75d2; --accent-soft: var(--creative-soft); --accent-faint: rgba(139,145,237,.05); }

/* --------------------------------------------------------------------------
   02. Shared navigation and chrome
   -------------------------------------------------------------------------- */
.topbar {
  height: 68px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 11, 15, .92);
  backdrop-filter: blur(14px) saturate(115%);
}
.topbar-inner {
  width: min(calc(100% - 40px), var(--container-wide));
  gap: 20px;
}
.brand {
  gap: 10px;
  font-weight: 650;
  letter-spacing: -.025em;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-color: var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: var(--shadow-xs);
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.brand-name { font-size: 15px; }
.brand-name span { color: var(--brand-300); }
.nav { gap: 2px; }
.nav a {
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--text-400);
  font-size: 12.5px;
  font-weight: 520;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.nav a:hover { color: var(--text-200); background: var(--surface-hover); }
.nav a.active { color: var(--text-100); background: var(--accent-soft); }
.mobile-menu-button,
.icon-button {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-300);
  box-shadow: none;
}
.mobile-menu-button:hover,
.icon-button:hover { border-color: var(--line-strong); color: var(--text-100); background: var(--surface-2); }

.discord-header-button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.discord-header-button:hover { border-color: var(--line-strong); background: var(--surface-2); box-shadow: var(--shadow-xs); }
.discord-header-button:focus-visible { outline-color: var(--action-primary); }
.discord-header-button picture { width: 22px; height: 22px; display: grid; place-items: center; }
.discord-header-button img { width: 22px; height: 22px; max-width: 22px; max-height: 22px; display: block; border-radius: 6px; object-fit: cover; object-position: center; }
.topbar-actions { flex: 0 0 auto; }

.account-trigger {
  min-height: 40px;
  max-width: 188px;
  padding: 4px 8px 4px 5px;
  border-color: var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-300);
}
.account-trigger img { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; object-fit: cover; object-position: center; }
.account-trigger strong { min-width: 0; font-size: 12px; font-weight: 550; }
.account-avatar-fallback {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; color: var(--brand-300);
  background: var(--brand-faint); font-size: 12px; font-weight: 650; text-transform: uppercase;
}
.account-avatar-fallback[hidden] { display: none; }
.account-menu {
  top: calc(100% + 8px);
  border-color: var(--line);
  border-radius: 12px;
  background: #0d1218;
  box-shadow: var(--shadow-raised);
}
.account-menu a,
.account-menu button {
  min-height: 38px;
  border-radius: 8px;
  color: var(--text-300);
  font-size: 12.5px;
  font-weight: 520;
}
.account-menu a:hover,
.account-menu button:hover { color: var(--text-100); background: var(--surface-hover); }

.language-switcher {
  min-height: 38px;
  border-color: var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-400);
}
.language-switcher:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text-200); }
.language-switcher select { font-size: 12px; font-weight: 520; }

/* --------------------------------------------------------------------------
   03. Buttons, fields, cards and feedback
   -------------------------------------------------------------------------- */
.button {
  min-height: 42px;
  gap: 8px;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: none;
  transform: none;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.button:hover { transform: none; }
.button.primary {
  color: var(--action-primary-text);
  border-color: color-mix(in srgb, var(--action-primary) 80%, white 0%);
  background: var(--action-primary);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--action-primary) 14%, transparent);
}
.button.primary:hover { background: var(--action-primary-hover); box-shadow: 0 9px 24px color-mix(in srgb, var(--action-primary) 18%, transparent); }
.button.primary:active { background: var(--action-primary-pressed); }
.button.secondary {
  color: var(--text-300);
  border-color: var(--line);
  background: var(--surface-1);
}
.button.secondary:hover { color: var(--text-100); border-color: var(--line-strong); background: var(--surface-2); }
.button.ghost {
  min-height: 38px;
  color: var(--text-400);
  border-color: transparent;
  background: transparent;
}
.button.ghost:hover { color: var(--text-200); background: var(--surface-hover); }
.button.compact { min-height: 38px; padding-inline: 12px; }
.button.danger,
.danger-soft { color: #f1a0a3; border-color: rgba(226,115,118,.24); background: rgba(226,115,118,.075); }
.button.danger:hover,
.danger-soft:hover { color: #ffc0c2; border-color: rgba(226,115,118,.38); background: rgba(226,115,118,.11); }
.button:disabled { opacity: .42; box-shadow: none; }
.button.is-loading::after { border-color: currentColor; border-right-color: transparent; }

.card,
.surface,
.glass,
.console-card,
.system-card,
.ecosystem-card,
.flow-shell,
.dashboard-mock,
.server-facts,
.rule-card {
  border: 1px solid var(--line);
  background: var(--surface-1);
  box-shadow: none;
}
.card { border-radius: var(--radius-lg); }

input,
textarea,
select,
.search-box,
.command-search,
.switcher-search,
.config-search,
.tc-search input,
.config-field input,
.config-field textarea,
.config-field select {
  border-color: var(--line);
  background: var(--surface-0);
  color: var(--text-200);
  box-shadow: none;
}
input:hover,
textarea:hover,
select:hover { border-color: var(--line-strong); }
input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  box-shadow: 0 0 0 3px var(--accent-faint);
}

.status-pill {
  gap: 7px;
  padding: 6px 9px;
  border-color: var(--line);
  background: var(--surface-1);
  color: var(--text-400);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .08em;
}
.status-pill i { width: 6px; height: 6px; background: var(--success); box-shadow: none; }
.status-pill.degraded i { background: var(--warning); box-shadow: none; }
.status-pill.offline i { background: var(--danger); box-shadow: none; }

.toast {
  border-color: var(--line);
  border-left: 3px solid var(--info);
  border-radius: 12px;
  background: #10161d;
  box-shadow: var(--shadow);
}
.toast::after { height: 1px; background: var(--info); }
.toast:hover { background: #131a22; }
.toast.info { border-left-color: var(--info); }
.toast.info .toast-icon { color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); background: var(--info-soft); }
.toast.info::after { background: var(--info); }
.toast.success { border-left-color: var(--success); }
.toast.success .toast-icon { color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); background: var(--success-soft); }
.toast.success::after { background: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.warning::after { background: var(--warning); }
.toast.error { border-left-color: var(--danger); }
.toast.error::after { background: var(--danger); }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.055), rgba(255,255,255,.025));
  background-size: 220% 100%;
}

/* --------------------------------------------------------------------------
   04. Landing — editorial, less template-like
   -------------------------------------------------------------------------- */
.landing-page {
  --accent: var(--brand-400);
  --accent-strong: var(--brand-500);
  --accent-soft: var(--brand-soft);
  --accent-faint: var(--brand-faint);
}
.landing-page .hero {
  position: relative;
  isolation: isolate;
  min-height: min(820px, calc(100svh - 68px));
  padding: 76px 0 68px;
  background: var(--bg-950);
}
.landing-page .hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,9,13,.18) 0%, rgba(7,9,13,.32) 48%, rgba(7,9,13,.52) 100%),
    linear-gradient(180deg, rgba(7,9,13,.12), rgba(7,9,13,.48)),
    url('/assets/images/fundo-produto-clean.webp') center / cover no-repeat;
  opacity: .58;
}
.landing-page .hero-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 48px;
  transform: none;
}
.hero-copy .status-pill { margin-bottom: 20px; }
.hero-copy .lead {
  max-width: 650px;
  margin-top: 22px;
  color: var(--text-400);
  font-size: clamp(15px, 1.55vw, 17.5px);
  line-height: 1.72;
}
.hero-actions { margin-top: 28px; gap: 9px; }
.hero-metrics {
  gap: 0;
  margin-top: 38px;
  padding-top: 22px;
  border-top-color: var(--line-soft);
}
.metric {
  min-width: 0;
  padding: 0 22px;
  border-right: 1px solid var(--line-soft);
}
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric strong { font-size: 22px; font-weight: 620; letter-spacing: -.03em; }
.metric span { margin-top: 2px; color: var(--text-500); font-size: 10.5px; font-weight: 550; letter-spacing: .07em; }

.hero-art {
  min-height: 480px;
  display: grid;
  place-items: center;
  perspective: none;
  user-select: none;
}
.hero-aura {
  inset: 8% 1% 10%;
  background: radial-gradient(circle at center, rgba(100,187,133,.09), transparent 55%);
}
.logo-planet {
  position: relative;
  inset: auto;
  right: auto;
  top: auto;
  width: min(340px, 92%);
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  align-self: center;
  border-color: var(--line-soft);
  background: radial-gradient(circle, rgba(100,187,133,.05), rgba(10,15,20,.16) 60%, transparent 70%);
}
.logo-planet::before { inset: -26px; border-color: var(--line-soft); }
.logo-planet::after { display: none; }
.logo-planet img {
  width: 112%;
  height: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: .96;
  transform: translate(-2.5%, 1.5%);
  pointer-events: none;
}

.command-console {
  left: 2%;
  right: 0;
  bottom: 2%;
  padding: 16px;
  transform: none;
  border-radius: 18px;
  background: rgba(13, 19, 26, .95);
  box-shadow: var(--shadow-raised);
}
.console-head { padding-bottom: 11px; border-bottom-color: var(--line-soft); }
.console-head strong { font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.console-head span { font-size: 11px; }
.console-body { grid-template-columns: 145px 1fr; min-height: 232px; }
.console-nav { border-right-color: var(--line-soft); gap: 2px; }
.console-nav span { padding: 8px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 520; }
.console-nav span.active { color: var(--text-100); background: var(--brand-soft); }
.console-main small { color: var(--brand-300); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; }
.console-main h3 { margin: 5px 0 13px; font-size: 19px; font-weight: 620; }
.console-stat { border-color: var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.018); }
.console-stat strong { font-size: 15px; font-weight: 600; }
.console-stat span { font-size: 10.5px; }
.console-line { background: rgba(255,255,255,.018); font-size: 11.5px; }
.console-line i { background: var(--brand-400); }

.system-rail {
  border-color: var(--line-soft);
  background: rgba(10,14,19,.72);
}
.rail-track {
  min-height: 56px;
  gap: 30px;
  color: var(--text-500);
  font-size: 10.5px;
  font-weight: 560;
  letter-spacing: .08em;
}
.rail-track b { color: var(--brand-300); }

.heading-row { margin-bottom: 36px; align-items: end; }
.system-grid { gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--line); }
.system-card {
  min-height: 220px;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
  transition: background var(--motion-normal), color var(--motion-normal);
}
.system-card:hover { transform: none; border-color: transparent; background: var(--surface-2); }
.system-card::after { top: 21px; right: 22px; color: var(--text-500); opacity: .16; font-size: 24px; font-weight: 600; }
.system-card h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 610; letter-spacing: -.025em; }
.system-card p { color: var(--text-400); font-size: 13px; line-height: 1.65; }
.system-card li {
  padding: 5px 7px;
  border-color: var(--line-soft);
  border-radius: 6px;
  color: var(--text-500);
  font-size: 10.5px;
  font-weight: 520;
  background: rgba(255,255,255,.012);
}

.flow-shell { padding: 30px; border-radius: var(--radius-xl); background: var(--surface-0); }
.flow-grid { margin-top: 34px; gap: 0; }
.flow-node {
  min-height: 145px;
  padding: 18px;
  border-color: var(--line-soft);
  border-radius: 0;
  background: transparent;
}
.flow-node:first-child { border-radius: 12px 0 0 12px; }
.flow-node:last-child { border-radius: 0 12px 12px 0; }
.flow-node + .flow-node { border-left: 0; }
.flow-node:not(:last-child)::after { right: -10px; color: var(--text-500); font-size: 12px; }
.flow-node small { color: var(--brand-300); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.flow-node strong { font-size: 15px; font-weight: 600; }
.flow-node span { color: var(--text-500); font-size: 11.5px; }

.showcase { gap: 66px; }
.showcase-list { gap: 0; margin-top: 26px; }
.showcase-point {
  grid-template-columns: 30px 1fr;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.showcase-point:last-child { border-bottom: 0; }
.showcase-point b {
  width: 30px;
  height: 30px;
  border-color: var(--line);
  border-radius: 8px;
  color: var(--brand-300);
  background: var(--surface-1);
}
.showcase-point strong { font-size: 13px; font-weight: 600; }
.showcase-point span { font-size: 12px; line-height: 1.55; }
.dashboard-mock { padding: 13px; transform: none; border-radius: 18px; background: var(--surface-0); box-shadow: var(--shadow-soft); }
.mock-sidebar span.active { color: var(--text-100); background: var(--info-soft); }
.mock-card,
.mock-chart { border-color: var(--line-soft); background: rgba(255,255,255,.014); }
.mock-chart i { background: linear-gradient(to top, rgba(105,183,220,.16), rgba(105,183,220,.70)); }

.ecosystem-grid { grid-template-columns: 1.25fr .875fr .875fr; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.ecosystem-card,
.ecosystem-card.featured { min-height: 260px; border: 0; border-radius: 0; background: var(--surface-1); }
.ecosystem-card.featured { background: linear-gradient(145deg, rgba(100,187,133,.065), var(--surface-1) 58%); }
.ecosystem-card .number { color: var(--text-500); opacity: .16; font-size: 27px; font-weight: 600; }
.ecosystem-card h3 { font-size: 20px; font-weight: 610; }
.ecosystem-card p { font-size: 13px; }
.ecosystem-card a { color: var(--brand-300); font-size: 12px; font-weight: 600; }

.cta-panel {
  min-height: 310px;
  padding: 48px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(120deg, rgba(100,187,133,.075), transparent 42%),
    var(--surface-1);
}
.cta-panel::after { display: none; }
.cta-copy p { color: var(--text-400); }
.server-facts { padding: 22px 24px; border-radius: var(--radius-lg); }
.server-fact { border-bottom-color: var(--line-soft); }
.server-fact span { color: var(--text-500); font-size: 10.5px; font-weight: 520; letter-spacing: .07em; }
.server-fact strong { font-size: 12.5px; font-weight: 570; }
.rule-grid { gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--line); }
.rule-card { border: 0; border-radius: 0; background: var(--surface-1); }
.rule-card b { color: var(--brand-300); font-size: 18px; font-weight: 600; }
.rule-card strong { font-size: 13px; font-weight: 600; }
.rule-card p { font-size: 12.5px; }

.site-footer { border-top-color: var(--line-soft); background: #070a0e; }
.footer-inner { min-height: 170px; align-items: center; }
.site-footer .brand-mark img { object-fit: cover; object-position: center; }
.footer-note,
.footer-links a,
.footer-status small { font-size: 11.5px; }
.footer-links strong { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; }
.footer-links a:hover { color: var(--text-200); }

/* --------------------------------------------------------------------------
   05. Server list dashboard
   -------------------------------------------------------------------------- */
.dashboard-main { padding: 56px 0 72px; }
.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 28px;
  margin-bottom: 34px;
  padding: 0;
  border: 0;
  background: transparent;
}
.dashboard-hero h1 {
  margin: 0;
  color: var(--text-100);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 620;
  letter-spacing: -.035em;
}
.dashboard-hero p { max-width: 660px; margin: 9px 0 0; color: var(--text-400); font-size: 14px; }
.dashboard-summary {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-1);
}
.summary-card {
  min-width: 118px;
  padding: 13px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.summary-card + .summary-card { border-left: 1px solid var(--line-soft); }
.summary-card strong { font-size: 18px; font-weight: 620; }
.summary-card span { font-size: 10.5px; font-weight: 520; letter-spacing: .06em; color: var(--text-500); }
.dashboard-toolbar {
  gap: 10px;
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-0);
}
.search-box { border: 0; background: transparent; }
.search-box input { border: 0; background: transparent; }
.guild-filters { padding: 3px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.018); }
.guild-filters button { border-radius: 7px; font-weight: 530; }
.guild-filters button.active { color: var(--text-100); background: var(--info-soft); }
.guild-grid { gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.guild-card {
  min-height: 170px;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
  box-shadow: none;
  transition: background var(--motion-normal);
}
.guild-card:hover { transform: none; background: var(--surface-2); }
.guild-card h2 { font-size: 16px; font-weight: 610; }
.guild-card p { font-size: 12.5px; color: var(--text-400); }
.guild-status { font-size: 10.5px; font-weight: 600; }
.integration-alert { border-color: rgba(213,164,84,.2); background: rgba(213,164,84,.06); }
.empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: transparent; }

/* --------------------------------------------------------------------------
   06. Guild workspace dashboard
   -------------------------------------------------------------------------- */
.workspace-body {
  background: var(--bg-950);
}
.workspace-sidebar,
.config-sidebar {
  border-right-color: var(--line-soft);
  background: #090d12;
  box-shadow: none;
}
.sidebar-brand-row,
.config-sidebar-head { border-bottom-color: var(--line-soft); }
.workspace-nav,
.config-nav { gap: 2px; }
.nav-label,
.config-nav-label {
  margin: 14px 10px 6px;
  color: #66727d;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .12em;
}
.workspace-nav-item,
.config-nav button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: var(--text-400);
  background: transparent;
  font-size: 12.5px;
  font-weight: 520;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.workspace-nav-item:hover,
.config-nav button:hover { color: var(--text-200); background: var(--surface-hover); }
.workspace-nav-item.active,
.config-nav button.active {
  color: var(--text-100);
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.workspace-nav-item .ui-icon,
.config-nav button .ui-icon { opacity: .72; }
.workspace-nav-item.active .ui-icon,
.config-nav button.active .ui-icon { color: var(--accent); opacity: 1; }

/* Config category color cues stay subtle until active. */
.config-nav button[data-config-section="automod"] .ui-icon,
.config-nav button[data-config-section="security"] .ui-icon,
.config-nav button[data-config-section="reports"] .ui-icon { color: var(--security); }
.config-nav button[data-config-section="economy"] .ui-icon,
.config-nav button[data-config-section="shop"] .ui-icon { color: var(--economy); }
.config-nav button[data-config-section="giveaways"] .ui-icon,
.config-nav button[data-config-section="suggestions"] .ui-icon,
.config-nav button[data-config-section="polls"] .ui-icon,
.config-nav button[data-config-section="roles"] .ui-icon,
.config-nav button[data-config-section="starboard"] .ui-icon,
.config-nav button[data-config-section="tempvoice"] .ui-icon,
.config-nav button[data-config-section="faq"] .ui-icon { color: var(--community); }
.config-nav button[data-config-section="embeds"] .ui-icon { color: var(--creative); }

.sidebar-health,
.sidebar-command,
.resource-indicator { border-color: var(--line-soft); background: rgba(255,255,255,.018); }
.workspace-topbar,
.config-topbar {
  min-height: 62px;
  border-bottom-color: var(--line-soft);
  background: rgba(9, 13, 18, .91);
  backdrop-filter: blur(12px);
}
.topbar-breadcrumb,
.config-breadcrumb { font-size: 12px; color: var(--text-400); }
.topbar-breadcrumb strong,
.config-breadcrumb strong { color: var(--text-200); font-weight: 600; }
.sync-time,
.config-sync-state { font-size: 11px; color: var(--text-500); }

.workspace-main,
.config-main { background: transparent; }
.workspace-hero,
.config-hero {
  position: relative;
  padding: 4px 0 26px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.workspace-hero::before,
.config-hero::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 74px;
  height: 1px;
  background: var(--accent);
}
.workspace-hero h1,
.config-hero h1 {
  margin: 0;
  color: var(--text-100);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 620;
  letter-spacing: -.034em;
}
.workspace-hero p,
.config-hero p { max-width: 680px; margin: 8px 0 0; color: var(--text-400); font-size: 13.5px; line-height: 1.65; }

.metric-grid,
.runtime-grid,
.operational-grid,
.progression-grid,
.system-grid,
.dashboard-grid { gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.metric-card,
.panel-card,
.operational-item,
.system-item,
.progression-callout {
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
  box-shadow: none;
}
.metric-card:hover,
.operational-item:hover,
.system-item:hover { transform: none; background: var(--surface-2); }
.metric-card strong { font-size: 21px; font-weight: 620; }
.metric-card span { color: var(--text-500); font-size: 11px; font-weight: 520; }
.metric-symbol,
.system-item-icon,
.activity-icon { border-color: var(--line-soft); background: var(--accent-faint); color: var(--accent); box-shadow: none; }
.panel-card { border-radius: var(--radius-lg); border: 1px solid var(--line); }
.panel-header { border-bottom-color: var(--line-soft); }
.panel-header h2 { font-size: 15px; font-weight: 610; }
.panel-header p { font-size: 12px; color: var(--text-500); }
.activity-item,
.detector-row,
.community-signal-list > * { border-bottom-color: var(--line-soft); }
.activity-copy strong,
.system-item strong { font-weight: 590; }
.activity-copy span,
.system-item span { color: var(--text-500); }
.worker-strip,
.overview-alert { border-color: var(--line); background: var(--surface-1); box-shadow: none; }
.owner-chip,
.worker-chip,
.source-badge,
.command-pill { border-color: var(--line); background: rgba(255,255,255,.018); color: var(--text-400); }

/* --------------------------------------------------------------------------
   07. Configuration — clearer rows, fewer nested cards
   -------------------------------------------------------------------------- */
.config-main { padding-top: 30px; }
.config-view { gap: 24px; }
.config-section-grid { gap: 24px; }
.config-column { gap: 18px; }
.config-card {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.config-card:last-child { border-bottom: 0; }
.config-card-head {
  padding: 4px 0 16px;
  border: 0;
  background: transparent;
}
.config-card-head small { color: var(--accent); font-size: 9.5px; font-weight: 620; letter-spacing: .10em; }
.config-card-head h2 { margin-top: 5px; font-size: 18px; font-weight: 610; letter-spacing: -.02em; }
.config-card-head p { max-width: 680px; margin-top: 6px; color: var(--text-400); font-size: 12.5px; line-height: 1.6; }
.config-card-body { padding: 0 0 22px; }
.config-fields { gap: 0; border-top: 1px solid var(--line-soft); }
.config-field,
.toggle-control {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(190px, .46fr);
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.config-field:last-child,
.toggle-control:last-child { border-bottom: 0; }
.config-field:hover,
.toggle-control:hover { background: linear-gradient(90deg, transparent, rgba(255,255,255,.012), transparent); }
.config-field > label,
.config-field > .field-label,
.toggle-copy strong { color: var(--text-200); font-size: 12.5px; font-weight: 580; }
.config-field p,
.config-field small,
.toggle-copy span { color: var(--text-500); font-size: 11.5px; line-height: 1.45; }
.config-field input,
.config-field textarea,
.config-field select { min-height: 40px; border-radius: 9px; background: var(--surface-0); }
.toggle-control { grid-template-columns: minmax(0,1fr) auto; }
.toggle-control input + span { box-shadow: none; }

.tags-control,
.multi-picker-trigger {
  border-color: var(--line);
  border-radius: 9px;
  background: var(--surface-0);
  box-shadow: none;
}
.multi-picker-panel {
  border-color: var(--line);
  border-radius: 12px;
  background: #0d131a;
  box-shadow: var(--shadow-raised);
}
.multi-picker-option { border-radius: 8px; color: var(--text-300); }
.multi-picker-option:hover { background: var(--surface-hover); }
.multi-picker-option.is-selected { color: var(--text-100); background: var(--accent-soft); }
.multi-picker-check { border-color: var(--line-strong); }
.multi-picker-option.is-selected .multi-picker-check { border-color: var(--accent); background: var(--accent); }

.management-zone,
.manager-item {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: none;
}
.manager-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
.management-blocked-state,
.preview-note,
.tc-note { border-color: var(--line); background: var(--surface-1); color: var(--text-400); }

.config-savebar {
  border-color: var(--line-strong);
  border-radius: 14px;
  background: rgba(13, 19, 26, .96);
  box-shadow: var(--shadow-raised);
  backdrop-filter: blur(12px);
}

.modal-backdrop { background: rgba(3,5,8,.72); backdrop-filter: blur(5px); }
.management-modal,
.command-palette {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: #0e141b;
  box-shadow: var(--shadow-raised);
  animation: matureModalIn var(--motion-normal) var(--ease-out);
}
@keyframes matureModalIn { from { opacity: 0; transform: translateY(6px) scale(.992); } to { opacity: 1; transform: none; } }

/* Embedded Studio gets a creative accent without changing its logic. */
.embed-config-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  box-shadow: none;
}
.es-header-tools { border-bottom-color: var(--line-soft); }
.embed-config-editor .es-layout { gap: 18px; }
.embed-config-editor .es-editor,
.embed-config-editor .es-preview {
  border-color: var(--line);
  background: var(--surface-1);
  box-shadow: none;
}
.embed-config-editor input:focus,
.embed-config-editor textarea:focus,
.embed-config-editor select:focus { border-color: var(--creative); box-shadow: 0 0 0 3px var(--creative-soft); }

/* --------------------------------------------------------------------------
   08. Ticket Central — visual polish only, flow untouched
   -------------------------------------------------------------------------- */
.tc-main { padding-top: 30px; }
.tc-heading { padding: 0 0 24px; border-bottom: 1px solid var(--line-soft); }
.tc-heading h1 { font-size: clamp(28px, 3vw, 36px); font-weight: 620; letter-spacing: -.034em; }
.tc-heading p { color: var(--text-400); font-size: 13px; }
.tc-toolbar { border-color: var(--line); border-radius: 12px; background: var(--surface-0); }
.tc-grid { gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.tc-card {
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
  box-shadow: none;
}
.tc-card:hover { transform: none; background: var(--surface-2); }
.tc-card-heading h3 { font-size: 15px; font-weight: 610; }
.tc-meta { color: var(--text-500); font-size: 11.5px; }
.tc-metrics { gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.tc-metrics > * { border: 0; border-radius: 0; background: var(--surface-1); }
.tc-table-scroll { border-color: var(--line); border-radius: 12px; }
.tc-table-scroll table { background: var(--surface-0); }
.tc-table-scroll th { color: var(--text-500); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; }
.tc-table-scroll td { border-top-color: var(--line-soft); }
.tc-editor { border-color: var(--line); background: var(--surface-0); box-shadow: none; }
.tc-editor-form,
.tc-editor-preview { border-color: var(--line-soft); }

/* --------------------------------------------------------------------------
   09. Support — community tone without purple overload
   -------------------------------------------------------------------------- */
.support-page,
.support-chat-wrap { padding-top: 54px; padding-bottom: 72px; }
.support-heading { margin-bottom: 30px; }
.support-heading .section-title { font-size: clamp(28px, 3vw, 38px); }
.support-layout { gap: 20px; }
.support-panel,
.support-tips,
.moderator-box,
.support-chat-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: none;
}
.support-summary { gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.support-summary-card { border: 0; border-radius: 0; background: var(--surface-1); }
.ticket-grid { gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.ticket-card { border: 0; border-radius: 0; background: var(--surface-1); box-shadow: none; }
.ticket-card:hover { transform: none; background: var(--surface-2); }
.ticket-card h3 { font-size: 14px; font-weight: 600; }
.ticket-meta { color: var(--text-500); }
.chat-header { border-bottom-color: var(--line-soft); }
.chat-messages { background: #0a0f15; }
.chat-message { border-color: var(--line-soft); background: var(--surface-1); box-shadow: none; }
.chat-message.staff { border-color: rgba(170,145,232,.18); background: rgba(170,145,232,.055); }
.chat-composer { border-top-color: var(--line-soft); background: var(--surface-0); }
.composer-row { border-color: var(--line); background: var(--surface-1); }

/* --------------------------------------------------------------------------
   10. Status, legal and error pages
   -------------------------------------------------------------------------- */
.platform-page-shell,
.legal-shell { width: min(calc(100% - 48px), 1080px); margin-inline: auto; }
.platform-page-shell { padding: 42px 0 72px; }
.platform-page-head,
.legal-hero { padding: 58px 0 28px; border-bottom: 1px solid var(--line-soft); }
.platform-page-head h1,
.legal-hero h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 620; letter-spacing: -.036em; }
.platform-page-head p,
.legal-hero p { color: var(--text-400); font-size: 14px; }
.status-overall {
  min-width: 190px;
  display: grid;
  justify-items: end;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: none;
}
.status-overall small { color: var(--text-500); font-size: 12px; }
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
}
.status-card { padding: 20px; border: 0; border-radius: 0; background: var(--surface-1); }
.status-card h2 { margin: 0; font-size: 15px; font-weight: 610; }
.status-card p { margin: 12px 0 0; color: var(--text-500); font-size: 12.5px; line-height: 1.6; }
.status-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--info-soft);
  color: var(--info);
}
.status-history { margin-top: 20px; padding: 20px; border-color: var(--line); background: var(--surface-1); box-shadow: none; }
.status-history h2 { margin: 0; color: var(--text-100); font-size: 15px; font-weight: 610; }
.status-history p { margin: 8px 0 0; color: var(--text-500); font-size: 12.5px; line-height: 1.6; }

.legal-main { background: transparent; }
.legal-layout { gap: 42px; }
.legal-nav { border-color: var(--line); border-radius: 12px; background: var(--surface-0); }
.legal-nav a { color: var(--text-400); font-size: 12px; font-weight: 520; }
.legal-nav a:hover { color: var(--text-200); background: var(--surface-hover); }
.legal-content { color: var(--text-300); }
.legal-section { padding: 26px 0; border-bottom: 1px solid var(--line-soft); }
.legal-section h2 { font-size: 19px; font-weight: 610; letter-spacing: -.02em; }
.legal-section p,
.legal-section li { color: var(--text-400); font-size: 13.5px; line-height: 1.72; }
.legal-callout { border-color: var(--line); border-left: 3px solid var(--accent); background: var(--surface-1); }
.legal-footer { border-top-color: var(--line-soft); background: #070a0e; }

.error-page { background: radial-gradient(640px 380px at 50% 20%, var(--accent-faint), transparent 66%); }
.error-card {
  max-width: 640px;
  padding: 42px;
  border-color: var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-soft);
}
.error-code { color: var(--accent); font-size: clamp(54px, 10vw, 92px); font-weight: 620; letter-spacing: -.06em; opacity: .84; }

/* --------------------------------------------------------------------------
   11. Motion and interaction consistency
   -------------------------------------------------------------------------- */
.workspace-nav-item,
.config-nav button,
.guild-card,
.system-card,
.ecosystem-card,
.ticket-card,
.tc-card,
.manager-item,
.status-card,
.button,
.icon-button,
.account-trigger,
.language-switcher,
.multi-picker-option {
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-standard);
}

/* Avoid decorative hover movement across the product. */
.guild-card:hover,
.system-card:hover,
.ecosystem-card:hover,
.ticket-card:hover,
.tc-card:hover,
.manager-item:hover,
.status-card:hover,
.metric-card:hover { translate: none; transform: none; }

/* --------------------------------------------------------------------------
   12. Responsive composition
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .landing-page .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { max-width: 680px; width: 100%; margin-inline: auto; min-height: 390px; }
  .logo-planet { width: min(300px, 72vw); }
  .dashboard-hero { grid-template-columns: 1fr; align-items: start; }
  .dashboard-summary { width: fit-content; }
  .config-field { grid-template-columns: minmax(0,1fr) minmax(180px,.55fr); }
}

@media (max-width: 940px) {
  .nav {
    top: 76px;
    left: 12px;
    right: 12px;
    padding: 8px;
    border-color: var(--line);
    border-radius: 12px;
    background: #0d1218;
    box-shadow: var(--shadow-raised);
  }
  .workspace-sidebar,
  .config-sidebar { box-shadow: var(--shadow-raised); }
  .metric-grid,
  .runtime-grid,
  .operational-grid,
  .progression-grid { border-radius: 14px; }
}

@media (max-width: 760px) {
  .topbar { height: 62px; }
  .topbar-inner { width: calc(100% - 24px); }
  .brand-name { font-size: 14px; }
  .landing-page .hero { padding: 52px 0 50px; }
  .landing-page .hero-background { opacity: .46; background-position: 56% center; }
  .landing-page .hero-grid { gap: 26px; }
  .hero-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
  .metric { padding: 12px 14px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .metric:first-child { padding-left: 14px; }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-last-child(-n+2) { border-bottom: 0; }
  .hero-art { min-height: 300px; }
  .logo-planet { position: relative; width: min(230px, 68vw); height: auto; right: auto; top: auto; transform: none; }
  .logo-planet img { width: 112%; height: auto; transform: translate(-2%, 1%); }
  .command-console { left: 0; right: 0; bottom: 0; }
  .console-body { grid-template-columns: 86px 1fr; }
  .system-grid,
  .ecosystem-grid,
  .rule-grid { grid-template-columns: 1fr; }
  .ecosystem-card.featured { grid-column: auto; }
  .flow-grid { gap: 0; }
  .flow-node { border-radius: 0; }
  .flow-node:first-child { border-radius: 12px 12px 0 0; }
  .flow-node:last-child { border-radius: 0 0 12px 12px; }
  .flow-node + .flow-node { border-left: 1px solid var(--line-soft); border-top: 0; }
  .flow-node:not(:last-child)::after { right: 50%; bottom: -8px; top: auto; transform: translateX(50%); }
  .cta-panel { padding: 30px 22px; }

  .dashboard-main { padding-top: 36px; }
  .dashboard-summary { width: 100%; grid-auto-flow: row; grid-template-columns: repeat(2,1fr); }
  .summary-card + .summary-card { border-left: 0; }
  .summary-card:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .summary-card:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .dashboard-toolbar { align-items: stretch; }
  .guild-grid { grid-template-columns: 1fr; }

  .workspace-main,
  .config-main { padding-inline: 16px; }
  .workspace-hero,
  .config-hero { padding-bottom: 22px; }
  .config-field,
  .toggle-control { grid-template-columns: 1fr; gap: 9px; padding: 14px 0; }
  .toggle-control { grid-template-columns: minmax(0,1fr) auto; }
  .config-field > input,
  .config-field > textarea,
  .config-field > select,
  .config-field > .tags-control,
  .config-field > .multi-picker { width: 100%; }

  .support-layout { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; }
  .platform-page-shell,
  .legal-shell { width: min(calc(100% - 28px), 1080px); }
}

@media (max-width: 520px) {
  .topbar { height: auto; min-height: 62px; padding-block: 8px; }
  .topbar-inner { flex-wrap: wrap; gap: 8px; }
  .topbar-inner > .brand { min-width: 0; margin-right: auto; }
  .topbar-actions { min-width: 0; flex-wrap: wrap; }
  .status-page .topbar-inner > .brand { flex-basis: 100%; }
  .config-topbar { gap: 8px; }
  .config-breadcrumb { flex: 1; min-width: 0; gap: 4px; }
  .config-breadcrumb strong { min-width: 0; max-width: 10ch; }
  .config-breadcrumb > span:last-child, .config-breadcrumb > b:last-of-type { display: none; }
  .config-topbar-actions { flex: 0 0 auto; }
  .button { min-height: 42px; }
  .account-trigger strong { display: none; }
  .command-console { padding: 12px; }
  .console-head span { display: none; }
  .console-stats { grid-template-columns: 1fr 1fr; }
  .console-stat:nth-child(3) { display: none; }
  .console-main { padding-left: 10px; }
  .dashboard-toolbar { padding: 8px; }
  .dashboard-summary { grid-template-columns: 1fr 1fr; }
  .summary-card { min-width: 0; }
  .config-main { padding-inline: 12px; }
  .config-card-head h2 { font-size: 17px; }
  .management-modal { border-radius: 14px 14px 0 0; }
  .embed-config-editor .es-layout { grid-template-columns: 1fr; }
  .tc-toolbar { align-items: stretch; }
  .error-card { padding: 30px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .management-modal,
  .command-palette { animation: none; }
}

/* --------------------------------------------------------------------------
   13. Compact workspace behavior (structural, consolidated from 2.6.x)
   -------------------------------------------------------------------------- */
:root { --workspace-sidebar-open: 286px; --workspace-sidebar-compact: 82px; }
.sidebar-brand-row,
.config-sidebar-head { gap: 8px; }
.sidebar-compact-toggle {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-1);
  color: var(--text-400);
  cursor: pointer;
  transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast), transform var(--motion-normal) var(--ease-out);
}
.sidebar-compact-toggle:hover { color: var(--text-100); border-color: var(--line-strong); background: var(--surface-2); }
.sidebar-compact-toggle .ui-icon { width: 15px; height: 15px; transition: transform var(--motion-normal) var(--ease-out); }
.sidebar-compact .sidebar-compact-toggle .ui-icon { transform: rotate(180deg); }
.workspace-sidebar,
.config-sidebar,
.workspace-shell,
.config-shell,
.config-savebar { transition: width var(--motion-normal) var(--ease-out), margin-left var(--motion-normal) var(--ease-out), left var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out); }
.compact-sidebar-tooltip {
  position: fixed;
  z-index: 190;
  max-width: 230px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111820;
  box-shadow: var(--shadow-soft);
  color: var(--text-200);
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.compact-sidebar-tooltip.visible { opacity: 1; transform: none; }

@media (min-width: 1041px) {
  body.workspace-body.sidebar-compact .workspace-sidebar { width: var(--workspace-sidebar-compact); padding-inline: 10px; }
  body.workspace-body.sidebar-compact .workspace-shell { margin-left: var(--workspace-sidebar-compact); }
  body.workspace-body.sidebar-compact .sidebar-brand-row { justify-content: center; flex-direction: column; min-height: 84px; padding-inline: 0; }
  body.workspace-body.sidebar-compact .sidebar-brand { justify-content: center; }
  body.workspace-body.sidebar-compact .brand-name,
  body.workspace-body.sidebar-compact .switcher-copy,
  body.workspace-body.sidebar-compact .switcher-chevron,
  body.workspace-body.sidebar-compact .nav-label,
  body.workspace-body.sidebar-compact .workspace-nav-item > span,
  body.workspace-body.sidebar-compact .workspace-nav-item > em,
  body.workspace-body.sidebar-compact .sidebar-health > span,
  body.workspace-body.sidebar-compact .sidebar-command > strong,
  body.workspace-body.sidebar-compact .sidebar-command > kbd,
  body.workspace-body.sidebar-compact .sidebar-account-trigger > strong,
  body.workspace-body.sidebar-compact .sidebar-account-trigger .account-chevron { display: none; }
  body.workspace-body.sidebar-compact .guild-switcher { margin-inline: 0; }
  body.workspace-body.sidebar-compact .guild-switcher-trigger,
  body.workspace-body.sidebar-compact .workspace-nav-item,
  body.workspace-body.sidebar-compact .sidebar-command,
  body.workspace-body.sidebar-compact .sidebar-account-trigger {
    justify-content: center;
    width: 52px;
    min-width: 52px;
    margin-inline: auto;
    padding-inline: 0;
  }
  body.workspace-body.sidebar-compact .workspace-nav { gap: 4px; }
  body.workspace-body.sidebar-compact .workspace-nav-item b,
  body.workspace-body.sidebar-compact .sidebar-command > span { margin: 0; }
  body.workspace-body.sidebar-compact .sidebar-health { justify-content: center; padding-inline: 0; }
  body.workspace-body.sidebar-compact .guild-switcher-menu { left: 62px; width: 280px; top: 0; }
  body.workspace-body.sidebar-compact .sidebar-account-menu { left: 62px; right: auto; bottom: 0; min-width: 270px; }
}

@media (min-width: 881px) {
  body.config-workspace-body.sidebar-compact .config-sidebar { width: var(--workspace-sidebar-compact); padding-inline: 10px; }
  body.config-workspace-body.sidebar-compact .config-shell { margin-left: var(--workspace-sidebar-compact); }
  body.config-workspace-body.sidebar-compact .config-savebar {
    left: calc(var(--workspace-sidebar-compact) + 50%);
    width: min(760px, calc(100vw - var(--workspace-sidebar-compact) - 58px));
  }
  body.config-workspace-body.sidebar-compact .config-sidebar-head { justify-content: center; flex-direction: column; min-height: 84px; padding-inline: 0; }
  body.config-workspace-body.sidebar-compact .brand-name,
  body.config-workspace-body.sidebar-compact .config-guild-card > span:nth-child(2),
  body.config-workspace-body.sidebar-compact .config-guild-card > b,
  body.config-workspace-body.sidebar-compact .config-search,
  body.config-workspace-body.sidebar-compact .config-search-empty,
  body.config-workspace-body.sidebar-compact .config-nav-label,
  body.config-workspace-body.sidebar-compact .config-nav button > span,
  body.config-workspace-body.sidebar-compact .resource-indicator > span,
  body.config-workspace-body.sidebar-compact .config-sidebar-foot .button { display: none; }
  body.config-workspace-body.sidebar-compact .config-sidebar-head .brand { justify-content: center; transform: none; }
  body.config-workspace-body.sidebar-compact .config-guild-card,
  body.config-workspace-body.sidebar-compact .config-nav button {
    width: 52px;
    min-width: 52px;
    margin-inline: auto;
    padding-inline: 0;
    justify-content: center;
  }
  body.config-workspace-body.sidebar-compact .config-guild-card { grid-template-columns: 42px; place-items: center; }
  body.config-workspace-body.sidebar-compact .config-nav button { grid-template-columns: 1fr; place-items: center; }
  body.config-workspace-body.sidebar-compact .config-nav button b { margin: 0; }
  body.config-workspace-body.sidebar-compact .config-sidebar-foot { justify-items: center; }
  body.config-workspace-body.sidebar-compact .resource-indicator { justify-content: center; padding-inline: 0; }
}

@media (max-width: 1040px) { .workspace-body .sidebar-compact-toggle { display: none; } }
@media (max-width: 880px) { .config-workspace-body .sidebar-compact-toggle { display: none; } }

/* --------------------------------------------------------------------------
   14. Typography normalization for legacy module selectors
   -------------------------------------------------------------------------- */
.workspace-body :is(.switcher-icon,.switcher-copy small,.switcher-guild-icon,.switcher-all,.owner-chip,.metric-symbol,.metric-top small,.source-badge,.panel-total,.activity-icon,.status-dot-label,.operational-item span,.panel-footer-link a,.progression-grid small,.progression-callout small,.system-item-icon,.runtime-metrics small,.command-palette header small),
.config-workspace-body :is(.config-guild-icon,.config-guild-card small,.config-nav-label,.config-nav button span,.config-field > span:first-child,.manager-actions button,.manager-table th,.multi-picker-check),
.support-area :is(.field-label,.upload-action,.priority,.attachment-link,.ticket-status,.chat-back,.priority-control,.chat-avatar,.team-badge),
.support-chat-page :is(.field-label,.upload-action,.priority,.attachment-link,.ticket-status,.chat-back,.priority-control,.chat-avatar,.team-badge) {
  font-weight: 600;
}
.workspace-body .nav-label,
.config-workspace-body .config-nav-label { font-weight: 620; }
.config-workspace-body .manager-table th { font-size: 10.5px; letter-spacing: .055em; color: var(--text-500); }
.config-workspace-body .manager-actions button { font-size: 11.5px; }
.support-area .field-label,
.support-chat-page .field-label { font-weight: 570; }
.support-area .priority,
.support-chat-page .priority,
.support-area .ticket-status,
.support-chat-page .ticket-status { letter-spacing: .045em; }


/* MATURE 4.0.1 status responsive recovery */
@media (max-width: 720px) {
  .platform-page-shell { padding-top: 26px; }
  .platform-page-head { display: grid; gap: 18px; }
  .status-overall { min-width: 0; justify-items: start; }
  .status-grid { grid-template-columns: 1fr; }
}


/* ========================================================================== 
   DARKNESS MATURE 4.0.3 — UI/UX CONSISTENCY PASS
   Structural refinements only. Identity, feature behavior and business rules
   remain unchanged.
   ========================================================================== */

/* Legal/institutional layouts: wider, centered shell with balanced rails. */
.legal-shell,
.legal-footer-inner {
  width: min(calc(100% - 48px), 1180px);
  margin-inline: auto;
}
.legal-layout {
  grid-template-columns: minmax(210px, 228px) minmax(0, 1fr);
  gap: clamp(34px, 3.4vw, 48px);
}
.legal-content,
.legal-section { min-width: 0; }

/* Hero mark: alpha bounds are nearly centered; remove the old left/down bias. */
.logo-planet img {
  width: 112%;
  transform: translate(-.4%, -.45%);
  transform-origin: center;
}

/* Final CTA: reserve a real composition column for the Discord mark. */
.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 280px);
  align-items: center;
  gap: clamp(24px, 4vw, 54px);
  padding: 48px 50px;
}
.cta-copy { max-width: 680px; }
.cta-discord-art {
  position: relative;
  right: auto;
  bottom: auto;
  width: clamp(190px, 18vw, 238px);
  justify-self: center;
  align-self: center;
  opacity: .82;
}
.cta-discord-art picture { width: 76%; }

/* Configuration shell: a preview is the only reason to reserve a second column. */
.config-section-grid {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.config-section-grid.has-preview {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .82fr);
}
.config-section-grid,
.config-column,
.config-card,
.config-card-body,
.config-fields,
.config-field { min-width: 0; }

/* One setting per row: avoids four competing columns inside half-width cards. */
.config-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.config-card-head { padding-bottom: 18px; }
.config-card-head small { font-size: 10.5px; line-height: 1.35; }
.config-card-head h2 { font-size: 20px; line-height: 1.2; }
.config-card-head p { max-width: 760px; font-size: 13.5px; line-height: 1.62; }

/* Shared FormField: the outer grid owns columns; each field owns a vertical flow. */
.config-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 16px; }
.config-field, .modal-fields .config-field {
 display: flex; flex-direction: column; align-items: stretch; min-width: 0;
 min-height: 0; padding: 0; gap: 7px; border: 0;
}
.config-field > span:first-child { align-self: stretch; color: var(--text-200); font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.config-field > * { min-width: 0; overflow-wrap: anywhere; }
.config-field > :is(input:not([type="checkbox"]), textarea, select, .config-control, .tags-control, .multi-picker, .multi-picker-unavailable, .static-field-value) {
 align-self: stretch; width: 100%; min-width: 0; box-sizing: border-box;
}
.config-field .field-help { color: var(--text-400); font-size: 12.5px; line-height: 1.55; }
.config-field .field-example { color: var(--text-500); font-size: 11.75px; line-height: 1.5; }
.config-field textarea { min-height: 112px; }
.config-field.full { grid-column: 1 / -1; }
.config-field.toggle-field { display: block; min-height: 0; padding: 0; border: 0; }
.config-field.toggle-field > .toggle-control,
.management-modal .modal-fields .config-field.toggle-field > .toggle-control {
 display: grid; position: relative; grid-template-columns: minmax(0, 1fr) 44px;
 align-items: center; gap: 18px; width: 100%; min-height: 56px; padding: 8px 0; box-sizing: border-box;
}
.toggle-copy { min-width: 0; grid-column: 1; }
.toggle-copy strong { display: block; font-size: 13.5px; line-height: 1.4; }
.toggle-copy small { display: block; margin-top: 4px; }
.toggle-control .switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.toggle-control .switch-ui {
 display: block; grid-column: 2; grid-row: 1; justify-self: end; position: relative;
 width: 44px; height: 26px; min-width: 44px; box-sizing: border-box;
 border: 1px solid #52615a; border-radius: 999px; background: #25312b;
 transition: background .18s, border-color .18s;
}
.toggle-control .switch-ui::after { width: 18px; height: 18px; top: 3px; left: 3px; background: #c1ccc6; box-shadow: none; transition: transform .18s; }
.switch-input:checked + .switch-ui { background: var(--green-400); border-color: var(--green-400); }
.switch-input:checked + .switch-ui::after { transform: translateX(18px); background: #061009; box-shadow: none; }
.toggle-control:hover .switch-input:not(:disabled) + .switch-ui { border-color: #acdfbd; }
.switch-input:focus-visible + .switch-ui { outline: 3px solid var(--green-400); outline-offset: 4px; }
.switch-input:disabled + .switch-ui { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .toggle-control .switch-ui, .toggle-control .switch-ui::after { transition: none; } }
@media (max-width: 760px) { .config-fields { grid-template-columns: minmax(0, 1fr); } }

/* Managers/list editors: equal visual weight and aligned actions. */
.manager-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
}
.manager-item {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.manager-item h3 { font-size: 14px; line-height: 1.35; }
.manager-item p { font-size: 12.5px; line-height: 1.55; }
.manager-meta { margin-top: 12px; }
.manager-chip { font-size: 11.5px; }
.manager-actions {
  margin-top: auto;
  padding-top: 14px;
  align-items: center;
}
.config-workspace-body .manager-actions button { min-height: 34px; font-size: 12px; }
.config-workspace-body .manager-table th { font-size: 11px; }
.manager-table td { font-size: 12.5px; }

/* Preview pages become single-column before the fixed sidebar squeezes the editor. */
@media (max-width: 1320px) {
  .config-section-grid.has-preview { grid-template-columns: minmax(0, 1fr); }
  .config-section-grid.has-preview > .config-column[data-preview-slot] { max-width: 760px; width: 100%; }
}

@media (max-width: 940px) {
  .legal-shell,
  .legal-footer-inner { width: min(calc(100% - 32px), 1180px); }
  .legal-layout { grid-template-columns: 1fr; gap: 24px; }
  .legal-nav { position: static; }
}

@media (max-width: 760px) {
  .cta-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 34px 24px 30px;
  }
  .cta-discord-art {
    position: relative;
    right: auto;
    bottom: auto;
    width: clamp(140px, 42vw, 190px);
    justify-self: center;
    opacity: .76;
  }
  .logo-planet img { width: 112%; transform: translate(-.4%, -.45%); }

  .config-field,
  .config-field.toggle-field > .toggle-control {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  .config-field { min-height: 0; padding: 15px 0; }
  .config-workspace-body .config-field > * {
    grid-column: 1;
    grid-row: auto;
  }
  .config-field > :is(input:not([type="checkbox"]), textarea, select, .config-control, .tags-control, .multi-picker, .multi-picker-unavailable, .static-field-value) { margin-top: 5px; }
  .config-field.toggle-field > .toggle-control { grid-template-columns: minmax(0, 1fr) auto; }
  .manager-item { min-height: 0; }
}

@media (max-width: 520px) {
  .legal-shell,
  .legal-footer-inner { width: min(calc(100% - 24px), 1180px); }
  .config-field input:not([type="checkbox"]),
  .config-field textarea,
  .config-field select,
  .config-control,
  .tags-control input,
  .multi-picker-trigger { font-size: 16px; }
  .modal-fields { grid-template-columns: minmax(0, 1fr); }
}


/* ========================================================================== 
   DARKNESS MATURE 4.0.4 — OPTICAL ALIGNMENT + MANAGEMENT SURFACES
   Final cascade layer for the 05/10 refinement. Keeps the MATURE identity and
   fixes repeated spacing/branding causes instead of per-screen patches.
   ========================================================================== */

/* The visible alpha centroid of darkness-hero.webp sits ~3.1% right and 5.3%
   below the canvas centre. Counter that intrinsic transparent-space bias. */
.logo-planet img {
  width: 112%;
  transform: translate(-3.1%, -5.3%);
  transform-origin: center;
}

/* Real Darkness mark in compact brand actions. */
.account-menu-darkness-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
}
.account-menu-darkness-mark img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 5px;
}
.modal-brand-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  letter-spacing: .12em;
}
.modal-brand-kicker img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  border-radius: 5px;
}

/* Legal cards: MATURE 4.0.3 removed the horizontal padding. Restore an even
   inner rail without changing the legal page composition or text alignment. */
.legal-section {
  padding: clamp(22px, 2vw, 28px) clamp(20px, 2.4vw, 30px);
}
.legal-section ul { padding-left: 20px; }

/* Shared manager surface. Only manager bodies get panel padding; nested
   management-zone helpers stay compact and do not create empty padded boxes. */
.management-surface {
  width: 100%;
  min-width: 0;
  padding: clamp(16px, 1.8vw, 22px);
  gap: clamp(14px, 1.5vw, 18px);
}
.management-surface > :is(.management-toolbar, .manager-grid, .manager-table-wrap, .manager-empty-state, .preview-note, .management-blocked-state) {
  min-width: 0;
  width: 100%;
}
.management-toolbar { row-gap: 9px; }
.management-toolbar-group { align-items: center; gap: 8px; }
.manager-grid {
  width: 100%;
  gap: 14px;
}
.manager-item {
  min-width: 0;
  min-height: 176px;
  padding: 18px;
}
.manager-item h3 { font-size: 14px; line-height: 1.38; }
.manager-item p { margin-top: 6px; }
.manager-meta { margin-top: 14px; gap: 7px; }
.manager-actions { gap: 7px; padding-top: 16px; }

/* Empty states inside shared managers should read as intentional composition. */
.manager-empty-state {
  min-height: 132px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 28px 22px;
}
.manager-empty-state b { font-size: 13px; line-height: 1.4; }
.manager-empty-state p { margin: 0; font-size: 12.5px; line-height: 1.55; }

/* 4.0.3's auto-fit rule came after config.css's tablet override. Reassert the
   intended one-column manager layout before the fixed sidebar starts squeezing. */
@media (max-width: 1050px) {
  .manager-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .logo-planet img { width: 112%; transform: translate(-3.1%, -5.3%); }
  .legal-section { padding: 20px 18px; }
  .management-surface { padding: 15px; gap: 14px; }
  .manager-item { min-height: 0; padding: 16px; }
  .manager-empty-state { min-height: 118px; padding: 24px 16px; }
}

/* MATURE 4.0.6 — formulários/modais consistentes e responsivos */
.management-modal {
  width: min(860px, calc(100vw - 40px));
  max-height: min(90dvh, 900px);
}
.management-modal > header {
  flex: 0 0 auto;
}
.management-modal form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.management-modal .modal-fields {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.management-modal .modal-fields .config-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 7px;
  padding: 0;
  border: 0;
}
.management-modal .modal-fields .config-field:not(.toggle-field) > span:first-child {
  display: block;
  min-width: 0;
  color: var(--text-200);
  font-size: 13px;
  line-height: 1.35;
}
.management-modal .modal-fields .config-field .field-help,
.management-modal .modal-fields .config-field .field-example {
  display: block;
  margin: 0;
  color: var(--text-500);
  font-size: 12px;
  line-height: 1.5;
}
.management-modal .modal-fields .config-field :is(input:not([type="checkbox"]), textarea, select, .config-control, .tags-control, .multi-picker, .multi-picker-unavailable, .static-field-value) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 13px;
}
.management-modal .modal-fields .config-field textarea {
  min-height: 112px;
}
.management-modal .modal-fields .config-field.toggle-field {
  grid-column: 1 / -1;
}
.management-modal .modal-fields .config-field.toggle-field > .toggle-control {
  min-height: 62px;
  padding: 12px 0;
}
.management-modal .modal-fields .config-field.full,
.management-modal .modal-fields .modal-section {
  grid-column: 1 / -1;
}
.management-modal .modal-section {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin-top: 5px;
  padding: 13px 0 3px;
  border-top: 1px solid rgba(92,202,132,.10);
}
.management-modal .modal-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.management-modal .modal-section strong {
  color: var(--green-400);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.management-modal .modal-section small {
  max-width: 680px;
  color: var(--text-500);
  font-size: 12px;
  line-height: 1.5;
}
.management-modal form > footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  background: #061009;
}

@media (max-width: 760px) {
  .modal-backdrop { padding: 10px; }
  .management-modal {
    width: min(100%, 720px);
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }
  .management-modal .modal-fields {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
    gap: 16px;
  }
  .management-modal .modal-fields .config-field.full,
  .management-modal .modal-fields .config-field.toggle-field,
  .management-modal .modal-fields .modal-section {
    grid-column: 1;
  }
}

}