/* ============================================================ */
/* PROJECT FORK - INDUSTRIAL GRAPHITE DARK THEME CSS            */
/* ============================================================ */

:root {
  --bg-body: #0a0a0c;
  --bg-header: #121215;
  --bg-sidebar: #101013;
  --bg-surface: #16161a;
  --bg-surface-subtle: #0e0e11;
  --bg-surface-hover: #1b1b20;
  --bg-surface-active: #222228;
  --bg-input: #0b0b0d;

  --border-color: #242429;
  --border-subtle: #1c1c20;
  --border-focus: #52525b;

  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;

  --accent-primary: #27272a;
  --accent-primary-hover: #3f3f46;
  --accent-blue: #3b82f6;
  --accent-discord: #5865f2;
  --accent-discord-hover: #4752c4;
  --accent-success: #16a34a;
  --accent-warning: #d97706;
  --accent-danger: #dc2626;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ============================================================ */
/* DASHBOARD DESIGN TOKENS                                        */
/* ============================================================ */

/*
 * Defined here, applied page by page. Nothing in this block changes rendering
 * on its own, so the rest of the stylesheet keeps working while the dashboard
 * is migrated onto it.
 *
 * Overview is the reference. Its language is: one surface value, one radius,
 * one hairline border, no shadows, no blur, and every gap either a spacing token
 * or a layout track. These tokens are that language, named.
 */

:root {
  /* Spacing. --card-space-1..6 already exist in cards.css and are 4/8/12/16/24/32.
     The same series is named here so pages that do not load the card scope can
     use it too, plus the two larger steps the landing needs. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius. Three steps, borrowed from Overview: surfaces, controls, and the
     flat rows that separate with a rule instead of a box. */
  --radius-card: 12px;
  --radius-control: 6px;
  --radius-row: 0px;
  --radius-pill: 999px;

  /*
   * Typography. This is the gap that made the dashboard read as a prototype:
   * ten raw pixel sizes with no names, and the non-Overview tabs had drifted
   * down to 8px labels while Overview's floor was 12px.
   *
   * --text-label is the floor for anything a user has to read. It is Overview's
   * current floor, which is why adopting it everywhere raises nothing and fixes
   * the pages that undershot.
   */
  --text-display: 32px;   /* page-level number or hero title */
  --text-title: 18px;     /* panel heading */
  --text-section: 15px;   /* sub-heading inside a panel */
  --text-body: 13px;      /* default running text */
  --text-label: 12px;     /* labels, captions, table cells — the floor */
  --text-micro: 11px;     /* badges and tertiary text, never below this */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /*
   * Surfaces. Overview neutralises the cool navy cast on purpose; these are its
   * resolved values, lifted out of overview.css so the rest of the dashboard
   * can reach the same neutral greys instead of inventing more blues.
   */
  --surface-page: #0b0d0f;
  --surface-shell: #090b0e;
  --surface-panel: #141618;
  --surface-raised: #191b1e;
  --surface-hover: #202327;

  /* Hairlines. Overview separates with a rule rather than a border around every
     box; these are the two weights it uses. */
  --hairline: rgba(255, 255, 255, .07);
  --hairline-strong: rgba(255, 255, 255, .13);

  /* Text ramp, matching the surfaces above. */
  --ink-primary: #ebedef;
  --ink-secondary: #a5a8ac;
  --ink-muted: #858a91;

  /* Accent has exactly two jobs in Overview: data ink and focus ring. */
  --accent: #3b82f6;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* Status. The only semantic colour names in the codebase today. */
  --pos: #68c89b;
  --neg: #ed8b8b;
  --warn-ink: #d9a441;

  /* Layout. */
  --shell-pad: 12px;
  --panel-pad: 24px;
  --panel-pad-compact: 16px;
  --sidebar-w: 235px;
  --read-max: 720px;      /* paragraph measure; never let a sentence run wider */
  --content-max: 1920px;  /* above this the page centres rather than stretching */
  --rail-min: 180px;      /* category/role rail */
  --detail-min: 320px;    /* inspector column */

  /*
   * Breakpoints, recorded rather than enforced — CSS has no custom media
   * queries in every engine yet, so these are documentation that the page
   * passes below must match. Sixteen ad-hoc values collapse to five.
   */
  --bp-compact: 560px;   /* single column */
  --bp-mobile: 760px;    /* rail becomes a horizontal scroller */
  --bp-tablet: 1024px;   /* three columns become two */
  --bp-desktop: 1280px;  /* two columns become three */
  --bp-wide: 1560px;     /* rails and table columns grow */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
  width: 100%;
  background-color: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
}

/* The header is sticky, so every in-page anchor would otherwise land underneath
   it. Applies to the landing sections, the legal page sections and any future
   deep link, without each of them having to remember the header height. */
:target {
  scroll-margin-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

a {
  color: var(--text-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
  background-color: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: #e4e4e7;
}

/* Utilities */
.hidden { display: none !important; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.text-muted { color: var(--text-muted); }

/* ============================================================ */
/* APP HEADER */
/* ============================================================ */
.app-header {
  height: 52px;
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* The brand was a <div> with a click handler, so keyboard and screen-reader
   users had no way back to the home page. It is a real link now; the wrapper
   keeps the id that app.js still toggles on. */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  border-radius: 6px;
}



/* First tab stop. Invisible until focused, which is the only state it needs. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--bg-surface-active);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  transition: top 140ms ease;
}

.skip-link:focus {
  top: 12px;
}

/* Footer previously had no links at all, so Privacy and Terms were unreachable
   from anywhere on the site. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
}

.footer-links a {
  color: var(--text-secondary);
  border-radius: 4px;
  transition: color 140ms ease;
}

.footer-links a:hover {
  color: var(--text-primary);
}



/* Legal page. Reuses .section-container / .legal-card so the policy text and the
   rest of the site share one surface treatment.

   The page background is deliberately opaque. The marketing pages sit on a
   full-bleed artwork layer, and body copy over that layer ends up with
   contrast that depends on which part of the image is behind the text. A
   reading page cannot be allowed to vary like that, so it gets a flat
   background and keeps the artwork out of the text entirely. */
.legal-page {
  padding-bottom: 48px;
  background-color: #02060b;
}

.legal-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 20px 8px;
}

.legal-intro h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.9px;
  line-height: 1.1;
  margin-top: 10px;
}

.legal-intro p {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.legal-intro .eyebrow {
  color: #6dafff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.legal-card code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  white-space: nowrap;
}

.brand-badge {
  background-color: #27272a;
  border: 1px solid #3f3f46;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.brand-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-link {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.nav-link:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.user-badge img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}

/* ============================================================ */
/* BUTTONS & FORMS */
/* ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-md {
  padding: 9px 16px;
  font-size: 13.5px;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background-color: #27272a;
  color: #f4f4f5;
  border-color: #3f3f46;
}

.btn-primary:hover {
  background-color: #3f3f46;
  border-color: #52525b;
}

.btn-discord {
  background-color: var(--accent-discord);
  color: #ffffff;
  border-color: var(--accent-discord);
}

.btn-discord:hover {
  background-color: var(--accent-discord-hover);
}

.btn-secondary {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-focus);
}

.btn-danger {
  background-color: var(--accent-danger);
  color: #ffffff;
  border-color: var(--accent-danger);
}

.btn-danger:hover {
  opacity: 0.9;
}

.form-input {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 7px 11px;
  font-size: 13px;
  border-radius: var(--radius-md);
  outline: none;
  font-family: var(--font-sans);
}

.form-input:focus {
  border-color: var(--border-focus);
}

.form-input-sm {
  padding: 5px 9px;
  font-size: 12px;
}

.textarea-input {
  resize: vertical;
  min-height: 70px;
}

.select-filter {
  max-width: 220px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-row {
  display: flex;
  gap: 12px;
}

.col-4 {
  flex: 1;
}

/* ============================================================ */
/* LANDING PAGE */
/* ============================================================ */
.hero-section {
  padding: 50px 20px 36px;
  background-color: var(--bg-surface-subtle);
  border-bottom: 1px solid var(--border-color);
}

.hero-container {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.status-indicator-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent-success);
}

.hero-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.hero-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.telemetry-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: var(--bg-header);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: left;
}

.telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  border-right: 1px solid var(--border-color);
}

.telemetry-item:last-child {
  border-right: none;
}

.telemetry-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.telemetry-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.section-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 20px;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
}

.section-header {
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 13.5px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.module-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
}

.module-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}

.module-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.module-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.security-card {
  background-color: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}

.security-card h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.security-card p {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.legal-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.legal-card strong {
  color: var(--text-primary);
}

/* ============================================================ */
/* DATA TABLES */
/* ============================================================ */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.data-table th {
  background-color: var(--bg-header);
  color: var(--text-secondary);
  font-weight: 600;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  font-size: 12px;
}

.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Badges & Pills */
.status-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-pill-active {
  background-color: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.status-pill-inactive {
  background-color: rgba(113, 113, 122, 0.15);
  color: #a1a1aa;
  border: 1px solid rgba(113, 113, 122, 0.3);
}

.status-pill-warn {
  background-color: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.status-pill-danger {
  background-color: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.role-badge {
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================================ */
/* SERVER SELECTION VIEW */
/* ============================================================ */
.view-inner-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px 20px;
}

.view-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
}

.view-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.guilds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.guild-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.guild-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.guild-card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.guild-card-meta h4 {
  font-size: 14.5px;
  font-weight: 600;
}

.guild-card-meta span {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ============================================================ */
/* DASHBOARD SHELL */
/* ============================================================ */
.dashboard-shell {
  display: flex;
  min-height: calc(100vh - 52px);
}

.dashboard-sidebar {
  width: 230px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  flex-shrink: 0;
}

.sidebar-guild-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.guild-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.sidebar-guild-info h3 {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.menu-item {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-item:hover {
  background-color: var(--bg-surface-hover);
  color: var(--text-primary);
}

.menu-item.active {
  background-color: #27272a;
  color: #ffffff;
  border: 1px solid #3f3f46;
}

.sidebar-bottom {
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.dashboard-body {
  flex: 1;
  padding: 24px 28px;
  background-color: var(--bg-body);
  overflow-y: auto;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

/* KALDIRILDI (dort sekmenin paylastigi temel kural) -- .tab-heading belirliyor: .tab-header h2
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 2px;
   }
   } */

.tab-header p {
  font-size: 12.5px;
}

.tab-header-actions {
  display: flex;
  gap: 8px;
}

/* ============================================================ */
/* OVERVIEW TAB METRICS & HEALTH */
/* ============================================================ */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.metric-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
}

.metric-counter {
  font-size: 11.5px;
  color: var(--text-muted);
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.metric-subtext {
  font-size: 11px;
  color: var(--text-muted);
}

.panel-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}

.panel-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.subsystem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.subsystem-item {
  background-color: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.subsystem-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-success);
  flex-shrink: 0;
}

.subsystem-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.subsystem-info strong {
  font-size: 12.5px;
}

.subsystem-info span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.button-row {
  display: flex;
  gap: 8px;
}

/* ============================================================ */
/* AI CHANNELS CATEGORIZED VIEW */
/* ============================================================ */
.channels-category-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.channel-category-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.category-card-header {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.category-count {
  font-size: 11.5px;
  color: var(--text-muted);
}

.category-channels-list {
  display: flex;
  flex-direction: column;
}

.channel-row-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-row-item:last-child {
  border-bottom: none;
}

.channel-info-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-hash {
  color: var(--text-muted);
  font-weight: 600;
}

.channel-name {
  font-size: 13px;
  font-weight: 500;
}

.channel-actions-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================ */
/* MODERATION STATS & FILTERS */
/* ============================================================ */
.mod-stats-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.mod-stat-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mod-stat-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.mod-stat-txt {
  font-size: 11px;
  color: var(--text-muted);
}

.filter-bar {
  display: flex;
  gap: 10px;
}

/* ============================================================ */
/* AI TOOLS CATEGORY FILTERS */
/* ============================================================ */
.tools-category-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-pill {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.filter-pill:hover {
  background-color: var(--bg-surface-hover);
  color: var(--text-primary);
}

.filter-pill.active {
  background-color: #27272a;
  border-color: #52525b;
  color: #ffffff;
  font-weight: 600;
}

/* ============================================================ */
/* ROLE PERMISSIONS STRUCTURED MANAGER */
/* ============================================================ */
.role-selector-bar {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.role-selector-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.role-pills-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.role-select-pill {
  background-color: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.role-select-pill:hover {
  background-color: var(--bg-surface-hover);
}

.role-select-pill.active {
  background-color: #27272a;
  border-color: #71717a;
  color: #ffffff;
  font-weight: 600;
}

.role-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.role-commands-matrix {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.command-category-group {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.group-header {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-title {
  font-size: 12.5px;
  font-weight: 600;
}

.group-commands-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--border-subtle);
}

.command-perm-item {
  background-color: var(--bg-surface);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cmd-name-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cmd-name-block strong {
  font-size: 12.5px;
}

.cmd-name-block span {
  font-size: 11px;
  color: var(--text-muted);
}

.toggle-switch-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}

.toggle-switch-btn.allowed {
  background-color: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border-color: rgba(22, 163, 74, 0.3);
}

.toggle-switch-btn.denied {
  background-color: rgba(113, 113, 122, 0.15);
  color: #a1a1aa;
  border-color: rgba(113, 113, 122, 0.3);
}

/* Log stream */
.log-stream-box {
  background-color: #050507;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #a1a1aa;
  max-height: 460px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 100;
}

.toast {
  background-color: var(--bg-header);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 9px 14px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Footer */
.app-footer {
  background-color: var(--bg-header);
  border-top: 1px solid var(--border-color);
  padding: 16px 20px;
  font-size: 12px;
  color: var(--text-muted);
}

.footer-container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Responsive */
@media (max-width: 1000px) {
  .metrics-grid, .mod-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .module-grid, .security-grid, .guilds-grid, .subsystem-grid, .group-commands-list {
    grid-template-columns: 1fr;
  }
  .telemetry-bar {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dashboard-shell {
    flex-direction: column;
  }
  .dashboard-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
}

/* ============================================================ */
/* FORK MARKETING LANDING PAGE                                   */
/* ============================================================ */
.legacy-landing { display: none !important; }

.app-header {
  height: 50px;
  background: rgba(3, 7, 13, 0.92);
  border-bottom: 1px solid #0b254c;
  backdrop-filter: blur(18px);
}

.header-container { max-width: 1280px; padding: 0 14px; }
.header-brand { gap: 8px; }
.brand-name { font-size: 21px; font-weight: 800; letter-spacing: -0.8px; }
.brand-badge { display: none; }
.header-nav { gap: 30px; margin-left: auto; margin-right: 38px; }
.nav-link { color: #a9bddf; font-size: 12px; }
.header-actions { gap: 10px; }
.header-actions .btn { border-radius: 9px; min-height: 36px; padding: 0 20px; font-size: 12px; font-weight: 700; }

.fork-landing {
  overflow: hidden;
  background: #03070d;
  color: #f5f8ff;
  font-family: "Cabinet Grotesk", "Arial", sans-serif;
}

.landing-shell { width: min(100% - 40px, 1280px); margin: 0 auto; }
.fork-hero { position: relative; isolation: isolate; min-height: 478px; overflow: hidden; border-bottom: 1px solid #0b2e62; }
.fork-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/fork-hero-art-v1.png") center 48% / cover no-repeat; opacity: .94; }
.fork-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2, 6, 11, .38) 0%, rgba(2, 6, 11, .06) 48%, rgba(2, 6, 11, .16) 100%); }
.hero-grid { display: grid; grid-template-columns: .94fr 1.06fr; min-height: 478px; align-items: center; }
.hero-copy { position: relative; z-index: 3; padding: 55px 0 48px 12px; max-width: 635px; }
.eyebrow { margin: 0 0 8px; color: #0782ff; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: 3.2px; }
.hero-copy h1, .feature-intro h2, .setup-layout h2, .quote-layout h2, .final-cta h2 { margin: 0; color: #f7f9ff; font-weight: 900; letter-spacing: -2.2px; line-height: .97; }
.hero-copy h1 { max-width: 640px; font-size: clamp(42px, 4.2vw, 62px); }
.hero-copy em, .feature-intro em, .setup-layout em, .quote-layout em { color: #0d67ff; font-style: normal; }
.hero-description { max-width: 520px; margin: 15px 0 0; color: #c3d2ec; font-size: 15px; line-height: 1.45; }
.hero-cta-row { justify-content: flex-start; margin: 21px 0 0; gap: 10px; }
.hero-cta-row .btn, .final-cta .btn { min-height: 42px; border-radius: 9px; padding: 0 20px; font-size: 13px; font-weight: 750; letter-spacing: -.1px; }
.hero-cta-row .btn-discord { min-width: 194px; }.hero-cta-row .btn-secondary { min-width: 178px; }.final-cta .btn-discord { min-width: 228px; }
.btn-discord { position: relative; gap: 10px; background: linear-gradient(180deg, #1878ff 0%, #0a58ed 100%); border-color: #2b83ff; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,25,96,.32), 0 0 0 1px rgba(8,61,175,.55), 0 9px 22px rgba(7,73,230,.34); }
.btn-discord::after, .btn-secondary::after { content: ""; position: absolute; inset: 1px; pointer-events: none; border-radius: 7px; border-top: 1px solid rgba(255,255,255,.11); }
.btn-discord:hover { background: linear-gradient(180deg, #318bff 0%, #1062f7 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(48,135,255,.75), 0 12px 28px rgba(7,73,230,.46); }
.btn-secondary { position: relative; gap: 10px; background: linear-gradient(180deg, rgba(8,31,68,.94), rgba(3,14,34,.96)); border-color: #1260c7; color: #f2f7ff; box-shadow: inset 0 1px 0 rgba(83,148,255,.15), inset 0 -1px 0 rgba(0,0,0,.72), 0 0 0 1px rgba(2,28,76,.75), 0 8px 20px rgba(0,0,0,.2); }
.btn-secondary:hover { border-color: #2c80ee; background: linear-gradient(180deg, rgba(13,46,96,.98), rgba(4,21,50,.98)); }
.discord-symbol { position: relative; display: inline-block; width: 17px; height: 13px; flex: 0 0 17px; border-radius: 5px 5px 7px 7px; background: #fff; transform: translateY(1px); }
.discord-symbol::before, .discord-symbol::after { content: ""; position: absolute; top: 5px; width: 3px; height: 3px; border-radius: 50%; background: #1261ef; }.discord-symbol::before { left: 4px; }.discord-symbol::after { right: 4px; }
.bar-symbol { position: relative; display: inline-block; width: 17px; height: 15px; flex: 0 0 17px; border-bottom: 2px solid #a8c7ff; background: linear-gradient(to top, #7eb0ff 0 64%, transparent 64%) 1px 100% / 3px 10px no-repeat, linear-gradient(to top, #7eb0ff 0 85%, transparent 85%) 7px 100% / 3px 13px no-repeat, linear-gradient(to top, #7eb0ff 0 100%, transparent 100%) 13px 100% / 3px 15px no-repeat; }
.hero-notes { display: flex; gap: 28px; margin-top: 15px; color: #9ab1d2; font-size: 10.5px; }
.hero-notes span { display: flex; align-items: center; gap: 6px; }
.hero-notes span::before { content: "✓"; color: #1576ff; font-weight: 900; }

.hero-art { height: 100%; min-height: 478px; position: relative; overflow: hidden; }
.hero-art::before, .hero-art::after, .ambient-orb { display: none; }
.orb-one { width: 94px; height: 94px; left: -28px; top: -34px; }
.orb-two { width: 114px; height: 114px; right: 10%; top: -41px; }
.orb-three { width: 52px; height: 52px; right: 19%; top: 154px; }
.hero-emblem { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 205px; height: 205px; border: 6px solid #0c62ff; border-radius: 50%; transform: translate(-47%, -48%); background: radial-gradient(circle, #060d19 5%, #02050a 67%); box-shadow: inset 0 0 26px rgba(25, 99, 255, .14), 0 0 0 1px rgba(51,134,255,.65), 0 0 39px rgba(18, 95, 255, .34); }
.wave { display: none; }
.hand-note { position: absolute; top: 190px; right: 52px; margin: 0; color: #d2e6ff; font-family: "Comic Sans MS", cursive; font-size: 17px; line-height: 1.05; transform: rotate(-9deg); }
.hero-side-copy { position: absolute; top: 50px; right: 5px; margin: 0; color: #8aa6d5; font-size: 9px; line-height: 2.5; letter-spacing: 2px; text-align: right; }
.hero-side-copy strong { color: #1282ff; }

.fork-mark { display: inline-block; width: 27px; height: 34px; background: url("assets/fork-mark-v2.png") center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(238,246,255,.8)) drop-shadow(0 0 8px rgba(47,130,255,.45)); }
.fork-mark i, .fork-mark b { display: none; }
.fork-mark-small { transform: scale(.78) rotate(-2deg); transform-origin: left center; margin-right: -5px; }
.fork-mark-hero { transform: scale(3.7) rotate(-2deg); }.fork-mark-mini { transform: scale(.48) rotate(-2deg); transform-origin: left top; height: 16px; }

.proof-strip { background: #03070d; padding: 9px 0 10px; border-bottom: 1px solid #071d3c; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.proof-grid article { min-height: 61px; display: flex; align-items: center; gap: 14px; padding: 10px 15px; border: 1px solid #0c3d83; border-radius: 12px; background: linear-gradient(110deg, rgba(7, 24, 52, .86), rgba(2, 7, 14, .88)); }
.metric-icon, .component-icon { display: grid; place-items: center; color: #5a96ff; border-radius: 9px; background: linear-gradient(145deg, #134aab 0%, #0a2861 48%, #061630 100%); box-shadow: inset 0 1px 1px rgba(123,177,255,.28), inset 0 -8px 14px rgba(0,12,42,.42), 0 0 16px rgba(17,94,255,.16); }
.metric-icon { width: 45px; height: 45px; }.metric-icon svg { width: 27px; height: 27px; }
.component-icon svg, .metric-icon svg { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(53,128,255,.48)); }.component-icon svg.solid-icon, .metric-icon svg.solid-icon { fill: currentColor; stroke: none; }
.proof-grid strong, .proof-grid small { display: block; }.proof-grid strong { font-size: 18px; letter-spacing: -.7px; }.proof-grid small { color: #9eb6dc; font-size: 10px; }
.sparkline { position: relative; margin-left: auto; width: 105px; height: 29px; border-bottom: 2px solid #1670ff; transform: skewY(-21deg); opacity: .9; }.sparkline::after { content: ""; position: absolute; width: 8px; height: 8px; right: -1px; bottom: -5px; border-radius: 50%; background: #4d91ff; box-shadow: 0 0 9px #2b73ff; }.sparkline.violet { border-color: #a350ff; }

.landing-section { padding: 71px 0; }.feature-section { padding-bottom: 60px; }
.feature-layout { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px 65px; align-items: center; }
.feature-intro h2, .setup-layout h2, .quote-layout h2 { font-size: clamp(31px, 3vw, 46px); }.feature-intro > p:last-child { max-width: 380px; margin: 15px 0 0; color: #abc1e3; line-height: 1.5; font-size: 14px; }
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.feature-card { display: grid; grid-template-columns: 44px 1fr 12px; min-height: 90px; gap: 10px; padding: 14px; border: 1px solid #0a376f; border-radius: 10px; background: linear-gradient(135deg, rgba(7, 25, 53, .9), rgba(3, 12, 25, .88)); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.feature-card:hover { transform: translateY(-5px); border-color: #1973ff; box-shadow: 0 14px 32px rgba(4, 51, 137, .24); text-decoration: none; }.feature-card > .component-icon { width: 44px; height: 44px; }.feature-card > .component-icon svg { width: 25px; height: 25px; }.feature-card h3 { margin: 0 0 3px; font-size: 12.5px; }.feature-card p { margin: 0; color: #9fb6d9; font-size: 10px; line-height: 1.35; }.feature-card b { align-self: center; color: #4792ff; font-size: 16px; }
.product-note { align-self: end; margin: 0 0 23px 33px; color: #c7dcfc; font-family: "Comic Sans MS", cursive; font-size: 16px; line-height: 1.05; transform: rotate(-11deg); }
/* KALDIRILDI -- sahte dashboard. height: 263px; display: grid; grid-template-columns: 67px 1 *//* KALDIRILDI -- sahte dashboard. display: flex; flex-direction: column; gap: 10px; padding: *//* KALDIRILDI -- sahte dashboard. color: #f6f9ff; font-size: 12px; *//* KALDIRILDI -- sahte dashboard. padding: 6px 4px; border-radius: 4px; background: #0d5edf; *//* KALDIRILDI -- sahte dashboard. padding: 8px; overflow: hidden; *//* KALDIRILDI -- sahte dashboard. display: flex; justify-content: space-between; height: 19px *//* KALDIRILDI -- sahte dashboard. color: #d9e9ff; *//* KALDIRILDI -- sahte dashboard. position: relative; height: 145px; display: flex; padding: *//* KALDIRILDI -- sahte dashboard. display: flex; flex-direction: column; gap: 6px; position: *//* KALDIRILDI -- sahte dashboard. color: #1481ff; text-transform: uppercase; font-size: 6px; *//* KALDIRILDI -- sahte dashboard. font-size: 20px; line-height: .9; letter-spacing: -.8px; *//* KALDIRILDI -- sahte dashboard. color: #176dff; font-style: normal; *//* KALDIRILDI -- sahte dashboard. color: #b9cee9; font-size: 7px; *//* KALDIRILDI -- sahte dashboard. position: absolute; display: grid; place-items: center; rig *//* KALDIRILDI -- sahte dashboard. display: grid; grid-template-columns: repeat(4, 1fr); gap: *//* KALDIRILDI -- sahte dashboard. height: 49px; border: 1px solid #0b3d83; border-radius: 5px */

.setup-section { border-top: 1px solid #082655; border-bottom: 1px solid #082655; padding: 35px 0; background: linear-gradient(90deg, #03070d, #041225 50%, #03070d); }.setup-layout { display: grid; grid-template-columns: .8fr 2.2fr; gap: 36px; align-items: center; }.setup-layout h2 { font-size: 30px; }.steps { display: flex; align-items: center; gap: 15px; }.steps article { flex: 1; display: grid; grid-template-columns: 25px 40px 1fr; gap: 9px; align-items: center; min-height: 74px; padding: 11px; border: 1px solid #0b3974; border-radius: 10px; background: rgba(4, 16, 34, .75); }.steps article > b { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #175bb9; border-radius: 50%; color: #6fa6ff; font-size: 11px; }.steps article > .component-icon { width: 40px; height: 40px; }.steps article > .component-icon svg { width: 25px; height: 25px; }.steps h3 { margin: 0 0 3px; font-size: 12px; }.steps p { margin: 0; color: #9bb3d7; font-size: 10px; line-height: 1.3; }.steps > i { color: #79a9f6; font-size: 22px; font-style: normal; }

.quote-section { padding: 66px 0 45px; }.quote-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }.quote-layout blockquote { position: relative; min-height: 132px; margin: 0; padding: 25px 38px; border: 1px solid #0b3d7d; border-radius: 12px; background: radial-gradient(circle at 20% 0%, rgba(26, 88, 190, .21), transparent 42%), #041124; }.quote-layout blockquote > span { position: absolute; left: 16px; top: 4px; color: #1777ff; font-size: 40px; line-height: 1; }.quote-layout blockquote p { margin: 0; color: #d5e3f8; font-size: 14px; line-height: 1.45; }.quote-layout blockquote footer { display: flex; gap: 13px; margin-top: 11px; color: #267dff; font-size: 10px; }.quote-layout blockquote small { color: #839fc9; }
.final-cta { display: grid; grid-template-columns: 85px 1fr auto; gap: 21px; align-items: center; min-height: 100px; margin-bottom: 31px; padding: 18px 26px; overflow: hidden; border: 1px solid #0d64e8; border-radius: 13px; background: linear-gradient(90deg, rgba(2, 11, 25, .65), rgba(2, 10, 24, .44)), url("assets/fork-hero-art-v1.png") center 65% / cover; }.cta-mark { display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid #1977ff; border-radius: 50%; background: #020814; }.final-cta h2 { font-size: 24px; letter-spacing: -1.1px; }.final-cta p { margin: 6px 0 0; color: #adc4e5; font-size: 12px; }.app-footer { padding: 17px 20px; background: #02060b; border-top-color: #0b254c; color: #6e89b2; }.footer-container { max-width: 1280px; }

@media (max-width: 900px) { .header-nav { display: flex; flex: 1 1 auto; min-width: 0; gap: 18px; margin-left: 16px; margin-right: 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .header-nav::-webkit-scrollbar { display: none; } .header-nav .nav-link { flex: 0 0 auto; white-space: nowrap; } .hero-grid, .feature-layout, .setup-layout, .quote-layout { grid-template-columns: 1fr; }.hero-copy { padding-left: 0; }.hero-art { min-height: 360px; }.feature-cards { grid-template-columns: repeat(2, 1fr); }.product-note { display: none; }.proof-grid { grid-template-columns: repeat(2, 1fr); }.steps { flex-wrap: wrap; }.steps article { min-width: 42%; }.steps > i { display: none; }.quote-layout { gap: 35px; } }
@media (max-width: 560px) { .header-container { padding: 0 11px; }.header-actions .btn { padding: 0 10px; }.header-actions .btn-discord { padding: 0 12px; }.landing-shell { width: min(100% - 28px, 1280px); }.fork-hero { min-height: auto; }.hero-copy { padding: 50px 0 24px; }.hero-copy h1 { font-size: 41px; letter-spacing: -1.7px; }.hero-art { min-height: 275px; }.hero-emblem { width: 160px; height: 160px; }.hand-note, .hero-side-copy { display: none; }.proof-grid, .feature-cards { grid-template-columns: 1fr; }.proof-grid article { min-height: 58px; }.feature-section, .quote-section { padding: 48px 0; }.steps { display: grid; }.steps article { min-width: 0; }.final-cta { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 25px 18px; }.final-cta h2 { font-size: 23px; }.final-cta .btn { width: 100%; }.hero-notes { gap: 11px; font-size: 9.5px; }.app-footer { font-size: 10px; }.footer-container { gap: 9px; flex-direction: column; } }

/* User-supplied brand artwork and liquid-glass refinements. */
.app-header { height: 62px; padding: 7px 0; background: transparent; border: 0; backdrop-filter: none; }
.header-container { position: relative; height: 48px; padding: 0 13px; border: 1px solid rgba(23, 93, 191, .72); border-radius: 15px; background: linear-gradient(115deg, rgba(5, 17, 38, .89), rgba(2, 8, 20, .76) 50%, rgba(7, 22, 50, .87)); box-shadow: inset 0 1px 0 rgba(124, 179, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .58), 0 12px 32px rgba(0, 0, 0, .38), 0 0 24px rgba(13, 86, 230, .1); backdrop-filter: blur(18px) saturate(135%); }
.header-container::before { content: ""; position: absolute; inset: 1px; pointer-events: none; border-radius: 14px; border-top: 1px solid rgba(127, 180, 255, .13); }
.header-brand, .header-nav, .header-actions { position: relative; z-index: 1; }

.fork-hero::before { background: url("assets/fork-hero-user-noback.png") center / cover no-repeat; opacity: 1; }
.fork-hero::after { background: linear-gradient(90deg, rgba(0,0,0,.10), transparent 55%); }
.hero-art { display: none; }
.fork-mark { width: 34px; height: 34px; margin: 0; background-image: url("assets/fork-emblem-user-v1.png"); filter: drop-shadow(0 0 5px rgba(38, 117, 255, .46)); }
.fork-mark-small { transform: scale(.82); transform-origin: center; margin: 0; }

.discord-symbol { width: 19px; height: 15px; border-radius: 0; background: url("assets/discord-mark.svg") center / contain no-repeat; transform: none; }
.discord-symbol::before, .discord-symbol::after { display: none; }

.final-cta { position: relative; isolation: isolate; min-height: 112px; padding: 22px 46px; overflow: hidden; border: 1px solid rgba(31, 108, 239, .78); border-radius: 28px 36px 30px 39px; background: linear-gradient(108deg, rgba(3, 13, 30, .96), rgba(3, 10, 22, .91) 48%, rgba(4, 18, 41, .95)); box-shadow: inset 0 1px 0 rgba(148, 194, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .64), 0 18px 42px rgba(0, 0, 0, .42), 0 0 26px rgba(14, 87, 235, .15); }
.final-cta::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(150px 120px at -3% 105%, rgba(20, 100, 255, .86) 0%, rgba(9, 50, 146, .46) 34%, transparent 71%), radial-gradient(170px 105px at 104% -12%, rgba(28, 112, 255, .72) 0%, rgba(8, 51, 147, .34) 40%, transparent 71%), radial-gradient(90px 64px at 14% 8%, rgba(83, 147, 255, .16), transparent 68%), radial-gradient(90px 64px at 88% 87%, rgba(38, 114, 255, .17), transparent 68%); pointer-events: none; }
.final-cta::after { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: 27px 35px 29px 38px; background: linear-gradient(113deg, rgba(166, 208, 255, .10), transparent 16%, transparent 73%, rgba(71, 141, 255, .09)); box-shadow: inset 0 1px 0 rgba(174, 211, 255, .14), inset 0 -20px 28px rgba(0, 8, 27, .2); pointer-events: none; }
.final-cta > * { position: relative; z-index: 1; }
.final-cta .cta-mark { width: 73px; height: 73px; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.final-cta .cta-mark .fork-mark { width: 68px; height: 68px; transform: none; }
.final-cta .btn-discord { min-width: 236px; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,25,96,.32), 0 0 0 1px rgba(34,115,255,.6), 0 10px 24px rgba(6,71,224,.32); }

@media (max-width: 900px) { .app-header { padding: 6px 11px; }.header-container { border-radius: 12px; }.final-cta { padding: 24px 30px; } }
@media (max-width: 560px) { .final-cta { padding: 25px 20px; border-radius: 24px 30px 26px 32px; }.final-cta::after { border-radius: 23px 29px 25px 31px; } }

/* Fixed landing downbar and the supplied full-page liquid backdrop. */
html, body { background-color: #02050a; background-image: url("assets/fork-page-background-4k-user-v1.png"); background-position: center top; background-size: 100% auto; background-repeat: no-repeat; background-attachment: scroll; }
.fork-landing { min-height: 100vh; padding-bottom: 150px; background: rgba(2, 5, 10, .30); }
.proof-strip { background: rgba(3, 7, 13, .76); backdrop-filter: blur(8px); }
.setup-section { background: linear-gradient(90deg, rgba(3, 7, 13, .87), rgba(4, 18, 37, .77) 50%, rgba(3, 7, 13, .87)); backdrop-filter: blur(6px); }

.app-header { height: 59px; padding: 5px 20px; background: transparent; }
.header-container { width: 100%; max-width: none; height: 49px; padding: 0 12px; border: 1px solid rgba(24, 93, 204, .42); border-radius: 14px; background: linear-gradient(106deg, rgba(3, 13, 29, .83), rgba(2, 9, 21, .72) 55%, rgba(4, 17, 38, .82)); box-shadow: inset 0 1px 0 rgba(118, 175, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .48), 0 8px 24px rgba(0, 0, 0, .24); backdrop-filter: blur(18px) saturate(125%); }
.header-container::before { border-radius: 13px; border-top-color: rgba(126, 182, 255, .09); }
.header-nav { gap: 33px; margin-left: 26px; margin-right: auto; }.header-actions { margin-left: auto; }

/* ============================================================ */
/* FORK SERVER DASHBOARD — REFERENCE MATCH                      */
/* ============================================================ */
#view-manage-guild { background: #02060b; }
.dashboard-shell { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 235px minmax(0, 1fr); min-height: 100vh; background: #02060b; color: #edf4ff; overflow: hidden; font-family: Geist, "Segoe UI", sans-serif; }
.dashboard-sidebar { width: auto; padding: 28px 15px 26px; border-right: 1px solid rgba(18, 106, 235, .7); background-color: #020912; background-image: url("assets/fork-sidebar-user-v1.png"); background-position: center top; background-size: auto 100%; background-repeat: no-repeat; }
.sidebar-guild-profile { display: grid; justify-items: center; gap: 5px; padding: 7px 0 23px; margin: 0 0 14px; border: 0; }
.guild-avatar { width: 112px; height: 112px; border-radius: 50%; border: 3px solid #0d6dff; box-shadow: 0 0 22px rgba(0,99,255,.37); background: #000; object-fit: cover; }
.sidebar-guild-info { text-align: center; }.sidebar-guild-info h3 { max-width: 180px; font-size: 29px; letter-spacing: -1.5px; color:#f8fbff; }.role-badge { display:block; font-size:9px; letter-spacing:2px; color:#7499d2; text-transform:uppercase; }
.sidebar-menu { gap: 5px; }.menu-item { position:relative; height:47px; padding:0 16px 0 62px; border:1px solid transparent; border-radius:14px; color:#d4e2f8; font-size:14px; font-weight:600; transition:background .24s ease, color .24s ease, transform .24s ease, box-shadow .24s ease; overflow:hidden; }
.menu-item::before { content:""; position:absolute; left:21px; top:14px; width:17px; height:17px; border:2px solid currentColor; border-radius:4px; opacity:.95; }
.menu-item:nth-child(1)::before { border-radius:5px 5px 3px 3px; transform:rotate(45deg) scale(.78); }
.menu-item:nth-child(4)::before { border:0; border-left:3px solid currentColor; border-bottom:3px solid currentColor; border-radius:0; transform:skew(-16deg); }
.menu-item:nth-child(5)::before { border-radius:2px; }.menu-item::after { content:""; position:absolute; top:7px; right:-22px; width:54px; height:34px; border-radius:50%; background:rgba(41,135,255,.34); filter:blur(16px); opacity:0; transition:opacity .24s ease, right .24s ease; pointer-events:none; }.menu-item.active { border-color:rgba(62,150,255,.34); background:linear-gradient(105deg,rgba(9,96,255,.96),rgba(12,52,143,.9) 72%,rgba(8,37,94,.76)); box-shadow:inset 0 1px 0 rgba(176,219,255,.25), inset 0 -1px 0 rgba(0,21,79,.32), 0 6px 18px rgba(0,68,255,.2); color:white; }.menu-item.active::after { right:3px; opacity:1; }.menu-item:hover { color:white; background:rgba(10,59,155,.35); transform:translateX(2px); }
.sidebar-bottom { border:0; padding:0; }.sidebar-bottom .btn { min-height:45px; border-color:#0b57c6; background:rgba(2,24,63,.72); color:#dceaff; }
.dashboard-body { overflow-y:auto; padding:18px 20px 34px; background:transparent; }
.tab-content.active { max-width:1400px; margin:0 auto; }.fork-dashboard-overview { display:block; }#tab-overview > .tab-header, #tab-overview > .metrics-grid, #tab-overview > .panel-box { display:none; }
.dashboard-toolbar { display:grid; grid-template-columns:minmax(280px,488px) 1fr 220px 32px 40px; align-items:center; gap:14px; height:42px; margin:0 3px 18px; }
.dashboard-search, .server-switcher { height:42px; border:1px solid rgba(20,95,209,.45); border-radius:13px; background:linear-gradient(110deg,rgba(4,17,38,.94),rgba(4,15,32,.76)); box-shadow:inset 0 1px 0 rgba(123,177,255,.08); }
.dashboard-search { display:flex; align-items:center; padding:0 10px 0 17px; gap:13px; }.dashboard-search span { width:16px; height:16px; border:2px solid #bfd5ff; border-radius:50%; position:relative; }.dashboard-search span::after { content:""; position:absolute; width:7px; height:2px; background:#bfd5ff; right:-6px; bottom:-3px; transform:rotate(45deg); }.dashboard-search input { flex:1; min-width:0; color:#e7f0ff; background:transparent; border:0; outline:0; font:13px inherit; }.dashboard-search input::placeholder { color:#7592be; }.dashboard-search kbd { padding:3px 7px; border:1px solid #213e68; border-radius:6px; color:#9bb4d9; font-size:10px; }
.server-switcher { display:flex; align-items:center; gap:12px; padding:0 14px; color:#e7f0ff; font-size:13px; text-align:left; }.server-switcher .discord-symbol { width:21px; height:16px; }.server-switcher b { flex:1; }.server-switcher i { font-style:normal; color:#b8d0f9; font-size:19px; }.toolbar-bell { width:28px; height:28px; border:0; background:transparent; position:relative; }.toolbar-bell::before { content:""; position:absolute; left:8px; top:6px; width:12px; height:14px; border:2px solid #d9e8ff; border-radius:8px 8px 4px 4px; }.toolbar-avatar { width:40px; height:40px; border-radius:50%; border:2px solid #1261dd; background:#132b52; object-fit:cover; }
.dashboard-hero-card { min-height:260px; overflow:hidden; position:relative; border:1px solid #0759cf; border-radius:16px; background:linear-gradient(90deg,rgba(0,4,9,.17),rgba(0,4,8,.83) 38%),url("assets/fork-hero-user-v1.png") center / cover no-repeat; box-shadow:inset 0 1px 0 rgba(89,161,255,.1), 0 10px 28px rgba(0,0,0,.28); }.dashboard-hero-copy { position:relative; z-index:2; padding:28px 0 0 60px; }.dashboard-hero-copy > p { color:#1490ff; font-size:10px; font-weight:800; letter-spacing:3px; margin-bottom:8px; }.dashboard-hero-copy h1 { color:#f6f8ff; font-size:41px; line-height:1.02; letter-spacing:-2.2px; }.dashboard-hero-copy h1 em { color:#086eff; font-style:normal; }.dashboard-hero-copy > span { display:block; margin:7px 0 14px; color:#e0eaff; font-size:14px; line-height:1.43; }.dashboard-hero-copy .btn { min-height:44px; padding:0 24px; border-radius:13px; margin-right:10px; font-weight:700; }.dashboard-hero-copy .btn-discord { box-shadow:0 0 20px rgba(0,103,255,.5); }.dashboard-hero-copy .btn-secondary { border-color:#075ccc; background:rgba(1,11,30,.78); }.dashboard-gear { margin-right:10px; color:#c8dcff; }.dashboard-hero-quote { position:absolute; z-index:2; left:69%; top:49%; color:#e5efff; font-family:cursive; font-size:16px; line-height:1.1; transform:rotate(-12deg); }.dashboard-hero-words { position:absolute; right:30px; top:29px; z-index:2; display:grid; gap:8px; text-align:right; letter-spacing:2px; font-size:10px; color:#84a8db; }.dashboard-hero-words strong { color:#1478ff; }.dashboard-hero-words::after { content:""; justify-self:end; width:30px; height:2px; margin-top:3px; background:#1377ff; }
.dashboard-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:13px 0; }.dashboard-stat-grid article { min-height:100px; display:grid; grid-template-columns:64px 1fr 112px; align-items:center; padding:14px; border:1px solid #0752bb; border-radius:14px; background:linear-gradient(135deg,rgba(6,20,43,.82),rgba(1,8,18,.86)); }.dashboard-stat-grid small { display:block; color:#bcd2f5; font-size:12px; }.dashboard-stat-grid b { display:block; font-size:24px; line-height:1.15; letter-spacing:-1px; }.dashboard-stat-grid em { color:#2cf09a; font-size:12px; font-style:normal; font-weight:700; }.dashboard-stat-grid em.negative { color:#3183ff; }.dashboard-stat-icon,.dashboard-panel-icon { display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:linear-gradient(135deg,#10356e,#09204d); box-shadow:inset 0 1px 0 rgba(111,177,255,.12); }.dashboard-stat-icon::before,.dashboard-panel-icon::before { color:#277cff; font-size:30px; font-weight:900; }.users-icon::before { content:"♟"; }.person-icon::before { content:"●"; }.command-icon::before { content:"›_"; }.shield-icon::before { content:"◇"; }.spark-line { height:37px; border-radius:50%; background:linear-gradient(145deg,transparent 39%,#0872ff 42%,#0872ff 47%,transparent 50%) 0 0/31px 31px repeat-x; filter:drop-shadow(0 0 6px #0068ff); }.spark-line.purple { filter:hue-rotate(70deg) drop-shadow(0 0 6px #7020ff); }
.dashboard-insight-grid { display:grid; grid-template-columns:5fr 3.65fr 2.85fr; gap:13px; }.dashboard-bottom-grid { display:grid; grid-template-columns:4fr 4fr 3.3fr; gap:13px; margin-top:13px; }.dashboard-panel,.dashboard-closing-card { min-width:0; border:1px solid #0752bb; border-radius:14px; background:linear-gradient(135deg,rgba(5,20,44,.82),rgba(1,8,17,.91)); overflow:hidden; }.dashboard-panel { padding:13px 15px; }.dashboard-panel header { display:flex; align-items:center; gap:10px; }.dashboard-panel-icon { width:36px; height:36px; border-radius:10px; }.dashboard-panel-icon::before { font-size:21px; }.dashboard-panel h2 { font-size:15px; line-height:1.1; }.dashboard-panel header p { color:#84a7db; font-size:11px; }.dashboard-panel header button { margin-left:auto; padding:7px 11px; border:1px solid #28528b; border-radius:10px; background:rgba(5,16,34,.8); color:#d8e6fb; font-size:11px; }.period-toggle { margin-left:auto; display:flex; border:1px solid #254571; border-radius:9px; overflow:hidden; }.period-toggle > * { padding:7px 12px; font-size:10px; font-weight:500; color:#9db8dc; }.period-toggle strong { background:#1173ff; color:#fff; }.usage-chart { height:103px; display:grid; grid-template-columns:34px 1fr; margin-top:10px; background:repeating-linear-gradient(0deg,transparent 0 24px,rgba(64,106,161,.13) 25px 26px); }.axis { display:grid; justify-items:start; align-content:space-between; color:#8ea9ce; font-size:10px; }.chart-bars { display:flex; align-items:end; gap:11px; height:100%; padding:0 11px; border-left:1px solid rgba(58,104,161,.3); }.chart-bars i { width:100%; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(90deg,#1167ff,#1c91ff 65%,#4c29ff); box-shadow:0 0 11px rgba(13,104,255,.35); }.usage-panel footer,.growth-panel footer { display:flex; justify-content:space-between; padding:6px 11px 0 40px; color:#a3bce0; font-size:10px; }.commands-panel ol { list-style:none; display:grid; gap:6px; margin-top:10px; }.commands-panel li { display:grid; grid-template-columns:28px 1fr 65px 1.5fr; align-items:center; gap:8px; }.commands-panel li > b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#112443; color:#d4e5ff; font-size:11px; }.commands-panel li span { font-weight:700; font-size:13px; }.commands-panel li small { text-align:right; color:#a9c2e7; font-size:11px; }.commands-panel li i { height:8px; overflow:hidden; border-radius:999px; background:#0b1a31; }.commands-panel li i::after { content:""; display:block; width:var(--w); height:100%; border-radius:inherit; background:linear-gradient(90deg,#0875ff,#3f61ff); }.growth-panel > b { display:block; text-align:right; margin:0 4px 2px; font-size:23px; }.growth-panel header em { margin-left:auto; color:#4bf6aa; font-size:12px; font-style:normal; font-weight:700; }.growth-graph { height:92px; margin-top:-4px; border-bottom:1px solid rgba(60,102,160,.35); }.growth-graph svg { width:100%; height:100%; }.growth-panel footer { padding-left:3px; }
.recent-panel ul,.server-panel ul { display:grid; gap:2px; margin-top:10px; list-style:none; }.recent-panel li,.server-panel li { display:grid; grid-template-columns:37px 1fr auto; align-items:center; gap:8px; min-height:38px; padding:3px 5px; border-radius:8px; background:rgba(9,29,58,.44); }.recent-panel li > i,.server-panel li > i { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; color:#fff; font-style:normal; }.activity-muted{background:#74223f}.activity-join{background:#106b48}.activity-command{background:#3b1ea4}.activity-ban{background:#8e4915}.recent-panel span,.server-panel span { display:grid; line-height:1.1; }.recent-panel b,.server-panel b { font-size:12px; }.recent-panel small,.server-panel small { color:#82a4d4; font-size:10px; }.recent-panel em { color:#94b2dc; font-size:10px; font-style:normal; }.server-panel li { background:transparent; }.server-panel li > i { background:linear-gradient(135deg,#5d29cf,#0c75d9); }.server-panel em { color:#f1f7ff; text-align:right; font-size:11px; font-style:normal; }.server-panel em::first-letter { color:#4bf19c; }.dashboard-closing-card { position:relative; padding:33px; background:linear-gradient(125deg,rgba(3,12,28,.86),rgba(3,10,20,.66)),url("assets/fork-hero-user-v1.png") right center / auto 100% no-repeat; }.dashboard-closing-card > div { position:relative; z-index:2; }.dashboard-closing-card strong { display:block; color:#0878ff; font-size:42px; height:25px; }.dashboard-closing-card p { font-size:22px; line-height:1.2; }.dashboard-closing-card p em { color:#0b76ff; font-style:normal; }.dashboard-closing-card div > i { display:block; width:22px; height:2px; margin:16px 0 8px; background:#0b76ff; }.dashboard-closing-card small { color:#1983ff; font-size:10px; letter-spacing:3px; font-weight:800; }.fork-mark-large { position:absolute; right:22px; bottom:-18px; width:155px; height:155px; opacity:.92; }
@media (max-width: 1180px) { .dashboard-insight-grid,.dashboard-bottom-grid { grid-template-columns:1fr 1fr; }.growth-panel,.dashboard-closing-card { grid-column:span 2; }.dashboard-stat-grid article { grid-template-columns:54px 1fr; }.spark-line { display:none; } }
@media (max-width: 820px) { .dashboard-shell { position:relative; grid-template-columns:1fr; overflow:visible; }.dashboard-sidebar { display:none; }.dashboard-body { padding:12px; overflow:visible; }.dashboard-toolbar { grid-template-columns:1fr 130px 34px; }.server-select-wrap { width:auto; }.toolbar-avatar { display:none; }.dashboard-stat-grid,.dashboard-insight-grid,.dashboard-bottom-grid { grid-template-columns:1fr; }.growth-panel,.dashboard-closing-card { grid-column:auto; }.dashboard-hero-copy { padding:24px; }.dashboard-hero-copy h1 { font-size:33px; }.dashboard-hero-words,.dashboard-hero-quote { display:none; }.dashboard-hero-card { min-height:230px; }.chart-bars { gap:5px; } body:has(#view-manage-guild:not(.hidden)) .app-header { display:none; } }

/* Dense liquid-glass pass: no visible wireframe borders. */
.dashboard-body { padding: 14px 12px 24px; }
.tab-content.active { max-width: none; }
.dashboard-toolbar { margin: 0 0 12px; }
.dashboard-stat-grid { gap: 9px; margin: 9px 0; }
.dashboard-insight-grid, .dashboard-bottom-grid { gap: 9px; }
.dashboard-bottom-grid { margin-top: 9px; }
.dashboard-hero-card, .dashboard-stat-grid article, .dashboard-panel, .dashboard-closing-card,
.dashboard-search, .server-switcher {
  border-color: rgba(73, 144, 255, .10);
  box-shadow: inset 0 1px 0 rgba(179, 215, 255, .10), inset 1px 0 0 rgba(79, 141, 255, .035), inset -1px -1px 0 rgba(0, 0, 0, .42), 0 12px 32px rgba(0, 8, 22, .20);
}
.dashboard-hero-card, .dashboard-stat-grid article, .dashboard-panel, .dashboard-closing-card { position: relative; }
.dashboard-stat-grid article::after, .dashboard-panel::after, .dashboard-closing-card::after {
  content: ""; position: absolute; pointer-events: none; inset: 0; border-radius: inherit;
  background: linear-gradient(112deg, rgba(112, 174, 255, .055), transparent 19%, transparent 74%, rgba(7, 100, 255, .045));
  mix-blend-mode: screen;
}
.dashboard-hero-card { border-color: rgba(27, 121, 255, .22); box-shadow: inset 0 1px 0 rgba(150, 201, 255, .15), inset 0 -1px 0 rgba(16, 89, 214, .12), 0 16px 38px rgba(0, 16, 52, .26); }
.dashboard-panel header, .dashboard-panel ol, .dashboard-panel ul, .dashboard-panel > b, .dashboard-panel > footer { position: relative; z-index: 1; }

/* Clean dashboard identity and animated sidebar selection. */
.fork-mark-sidebar { display:block; width:88px; height:88px; margin:0 auto 4px; background-image:url("assets/fork-emblem-user-v1.png"); filter:drop-shadow(0 0 7px rgba(36,123,255,.52)); }
.sidebar-guild-info h3 { font-size:30px; letter-spacing:-1.4px; }
.sidebar-wordmark { display:block; width:132px; height:auto; object-fit:contain; filter:drop-shadow(0 0 6px rgba(30,111,255,.48)); }
.sidebar-menu { position:relative; }
.sidebar-menu::before { content:""; position:absolute; z-index:0; left:0; top:0; width:100%; height:47px; border:1px solid rgba(62,150,255,.34); border-radius:14px; background:linear-gradient(105deg,rgba(9,96,255,.96),rgba(12,52,143,.9) 72%,rgba(8,37,94,.76)); box-shadow:inset 0 1px 0 rgba(176,219,255,.25), inset 0 -1px 0 rgba(0,21,79,.32), 0 6px 18px rgba(0,68,255,.2); transform:translateY(calc(var(--active-index, 0) * 52px)); transition:transform .42s cubic-bezier(.22,.8,.24,1); pointer-events:none; }
.menu-item { z-index:1; background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
.menu-item::before { display:none; }
.menu-item img { position:absolute; left:20px; top:7px; width:33px; height:33px; object-fit:contain; filter:drop-shadow(0 0 5px rgba(19,100,255,.34)); transition:transform .24s ease, filter .24s ease; }
.menu-item:hover img, .menu-item.active img { transform:scale(1.06); filter:drop-shadow(0 0 8px rgba(43,128,255,.62)); }
.menu-item.active::after { opacity:.72; right:3px; }
.server-select-wrap { position:relative; }
.server-select-wrap { width:220px; }
.server-dropdown { position:absolute; z-index:20; top:49px; right:0; width:100%; padding:6px; border:1px solid rgba(70,139,235,.26); border-radius:12px; background:rgba(4,15,31,.95); box-shadow:0 18px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(170,212,255,.1); opacity:0; transform:translateY(-5px) scale(.98); pointer-events:none; transition:opacity .18s ease, transform .18s ease; backdrop-filter:blur(18px); }
.server-dropdown.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.server-dropdown button { display:block; width:100%; padding:9px 11px; border:0; border-radius:8px; background:transparent; color:#dceaff; text-align:left; font:12px inherit; cursor:pointer; }.server-dropdown button:hover { background:rgba(20,101,221,.24); }
.dashboard-hero-copy > p, .dashboard-hero-quote, .dashboard-hero-words { display:none; }
.dashboard-hero-copy h1 { max-width:520px; font-size:42px; color:#f6f8ff; }
.dashboard-hero-copy h1 em { display:none; }
.dashboard-closing-card { background:linear-gradient(90deg,rgba(2,10,22,.17),rgba(2,10,22,.08)),url("assets/fork-slogan-section-user-v1.png") center / cover no-repeat; }
.dashboard-closing-card > div { display:none; }
.dashboard-closing-card::after { display:none; }
.dashboard-hero-card { background-image:url("assets/fork-hero-user-v1.png"); background-position:center center; background-size:cover; background-repeat:no-repeat; background-color:#02050a; }
.dashboard-hero-copy { padding-left:110px; }
.dashboard-closing-card > span, .dashboard-closing-card > .fork-mark-large { display:none; }

.final-cta { position: fixed; left: 50%; bottom: 17px; z-index: 60; width: min(calc(100% - 80px), 1280px); min-height: 82px; margin: 0; padding: 14px 30px; transform: translateX(-50%); grid-template-columns: 58px 1fr auto; gap: 17px; border-radius: 22px 28px 24px 30px; background: linear-gradient(106deg, rgba(2, 12, 29, .92), rgba(2, 8, 18, .89) 50%, rgba(4, 17, 38, .94)); box-shadow: inset 0 1px 0 rgba(148, 194, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .61), 0 16px 38px rgba(0, 0, 0, .49), 0 0 24px rgba(8, 81, 232, .13); }
.final-cta { transition: transform 260ms ease-in, opacity 180ms ease-in; }
.final-cta.downbar-hidden { pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(calc(100% + 34px)); }
@media (prefers-reduced-motion: reduce) { .final-cta { transition: none; } }
.final-cta::before { background: radial-gradient(125px 84px at -2% 108%, rgba(20, 98, 255, .76) 0%, rgba(9, 50, 146, .34) 34%, transparent 69%), radial-gradient(142px 82px at 103% -17%, rgba(28, 112, 255, .64) 0%, rgba(8, 51, 147, .28) 40%, transparent 70%), radial-gradient(65px 42px at 13% 6%, rgba(83, 147, 255, .13), transparent 70%), radial-gradient(65px 42px at 87% 92%, rgba(38, 114, 255, .14), transparent 70%); }
.final-cta::after { border-radius: 21px 27px 23px 29px; }.final-cta .cta-mark { width: 54px; height: 54px; }.final-cta .cta-mark .fork-mark { width: 52px; height: 52px; }.final-cta h2 { font-size: 21px; }.final-cta p { font-size: 11px; }.final-cta .btn-discord { min-width: 214px; min-height: 40px; }

@media (max-width: 900px) { .app-header { padding: 5px 12px; }.header-nav { gap: 20px; }.final-cta { width: calc(100% - 32px); bottom: 12px; padding: 14px 20px; } }
@media (max-width: 560px) { .fork-landing { padding-bottom: 175px; }.app-header { padding: 5px 8px; }.header-container { border-radius: 11px; }.final-cta { width: calc(100% - 20px); bottom: 9px; grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 14px 18px; border-radius: 18px 23px 19px 24px; }.final-cta .cta-mark { display: none; }.final-cta h2 { font-size: 18px; }.final-cta p { display: none; }.final-cta .btn-discord { width: 100%; }.final-cta::after { border-radius: 17px 22px 18px 23px; } }

/* AI Channels workspace: calm surfaces, real settings, and one clear hierarchy. */
#tab-channels .channels-dashboard {--channels-line:var(--card-line-interactive);--channels-line-soft:var(--card-line);--channels-surface:var(--card-raised);--channels-surface-raised:var(--card-hover); margin: 0 auto;color:var(--card-text)}
.channels-tab-header { display:flex; justify-content:space-between; align-items:flex-start; gap:22px; padding:5px 2px 17px; border-bottom:1px solid var(--channels-line-soft)}
/* KALDIRILDI (ust etiket kaldirildi) -- .tab-heading belirliyor: .channels-eyebrow
   } */
/* KALDIRILDI (AI Channels basligi 27px idi) -- .tab-heading belirliyor: .channels-tab-header h2
   } */
/* KALDIRILDI (aciklama 12.5px idi) -- .tab-heading belirliyor: .channels-tab-header p
   } */
/* padding-top:17px KALDIRILDI -- ust etiketi gecmek icin konulmustu; etiket gidince
   butonu basligin 17px altina indiriyordu. */
.channels-header-actions { display:flex; gap:8px; align-items:center}
.btn-quiet {border-color:var(--card-line);background:var(--card-raised);color:var(--card-secondary)}
.btn-quiet:hover {border-color:var(--card-line-interactive);background:var(--card-hover);color:var(--card-text)}
.channels-summary-strip { display:grid; grid-template-columns:repeat(3,1fr); margin:18px 0 14px; border:1px solid var(--channels-line); border-radius:10px;background:linear-gradient(110deg,var(--card-raised),var(--card-raised))}
.channels-summary-item { display:flex; align-items:center; gap:12px; min-height:84px; padding:14px 18px}
.channels-summary-item + .channels-summary-item { border-left:1px solid var(--channels-line)}
.channels-summary-icon { display:grid; place-items:center; width:35px; height:35px; flex:0 0 35px; border-radius:10px;background:var(--card-hover);color:var(--card-secondary); font-size:20px; font-weight:500}
.channels-summary-icon-active { position:relative; background:rgba(25,107,101,.23)}.channels-summary-icon-active::after { content:""; width:9px; height:9px; border-radius:50%; background:#56d59b; box-shadow:0 0 12px rgba(86,213,155,.42)}
.channels-summary-icon-rate {color:var(--card-secondary); font-size:16px}
.channels-summary-item small { display:block;color:var(--card-secondary); font-size:12px}.channels-summary-item strong { display:block; margin-top:1px;color:var(--card-text); font-size:22px; line-height:1.2; letter-spacing:-.5px}.channels-summary-item em { display:block; margin-top:2px;color:var(--card-muted); font-size: 12px; font-style:normal}
.channels-workspace { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:12px; align-items:start}
.channels-list-panel, .channels-settings-panel { min-width:0; border:1px solid var(--channels-line); border-radius:10px; background:var(--channels-surface)}
.channels-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px 13px; border-bottom:1px solid var(--channels-line-soft)}.channels-list-toolbar h3, .channels-settings-heading h3 { font-size:15px; font-weight:650; letter-spacing:-.15px}.channels-list-toolbar p, .channels-settings-heading p { margin-top:3px;color:var(--card-secondary); font-size:11px}
.channels-filter { display:flex; align-items:center; gap:8px; width:190px; height:32px; padding:0 10px;border:1px solid var(--card-line-interactive); border-radius:7px;background:var(--card-surface)}.channels-filter span { width:11px; height:11px;border:1.5px solid var(--card-line-interactive); border-radius:50%; position:relative}.channels-filter span::after { content:""; position:absolute; width:5px; height:1.5px; right:-4px; bottom:-2px;background:var(--card-hover); transform:rotate(45deg)}.channels-filter input { min-width:0; width:100%; border:0; outline:0;color:var(--card-text); background:transparent; font:12px var(--font-sans)}.channels-filter input::placeholder {color:var(--card-muted)}
.channels-category-container { display:flex; flex-direction:column; gap:0}.channel-category-card { border:0; border-radius: var(--radius-row); background:transparent; overflow:visible}.channel-category-card + .channel-category-card { border-top:1px solid var(--channels-line-soft)}.category-card-header { min-height:43px; padding:0 18px; border:0;background:var(--card-raised)}.category-title-group { gap:8px}.category-chevron {color:var(--card-secondary); font-size:15px; transform:translateY(-1px)}.category-title {color:var(--card-text); font-size:12.5px; font-weight:650}.category-count {color:var(--card-muted); font-size: 12px}.category-actions { display:flex; gap:4px}.category-actions .btn { padding:5px 7px; font-size: 12px}
.channel-row-item { min-height:59px; padding:9px 18px; border:0;border-top:1px solid var(--card-line); border-radius: var(--radius-row); background:transparent; transition:background .18s ease, padding-left .18s ease; cursor:pointer}.channel-row-item:hover {background:var(--card-hover)}.channel-info-group { gap:10px}.channel-glyph { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px;border:1px solid var(--card-line-interactive); border-radius:7px;background:var(--card-hover);color:var(--card-secondary); font-size:16px}.channel-info-group > span:last-child { display:grid; gap:2px}.channel-name {color:var(--card-text); font-size:12.5px; font-weight:600}.channel-info-group small {color:var(--card-muted); font-size: 12px}.channel-actions-group { gap:12px}.channel-status { display:flex; align-items:center; gap:5px; min-width:43px;color:var(--card-muted); font-size: 12px}.channel-status i { width:5px; height:5px; border-radius:50%;background:var(--card-hover)}.channel-status.is-active {color:var(--card-secondary)}.channel-status.is-active i { background:#54d69a; box-shadow:0 0 7px rgba(84,214,154,.4)}/*
 * The switch. There are two — this one and `.tool-toggle` — and both were invisible,
 * for the same reason.
 *
 * The palette migration mapped every colour to a token by *its own lightness*. A
 * switch is four colours that mean nothing alone: a recessed track, a knob visible
 * on it, a filled track when on, and a knob visible on that. Mapped by lightness,
 * all four resolved to `--card-hover`. Before the migration they were `#19283d`,
 * `#b3c2d8`, `#166bd3`, `#f3f8ff`; after it, four identical greys. An invisible knob
 * inside an invisible pill — present in the DOM, absent from the screen.
 *
 * So a switch is written as four *related* values now, differing in lightness in the
 * direction that reads: the track sits below the card surface, the knob above it,
 * and the on-state track one step lighter still. `--card-knob` and
 * `--card-track-on` exist for exactly this and are documented in cards.css.
 *
 * The animation covers the track as well as the knob, which it did not before: only
 * the `i` had a transition, so the fill snapped while the knob slid and the control
 * read as two parts that did not belong to each other. The inset shadow is what
 * makes the track a recess instead of a pill lying on the card.
 */
.channel-toggle { width:34px; height:19px; padding:2px; border:1px solid var(--card-line); border-radius: var(--radius-pill); background:var(--card-raised); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); cursor:pointer; transition: background 180ms var(--switch-ease), border-color 180ms ease, box-shadow 180ms ease }.channel-toggle i { display:block; width:13px; height:13px; border-radius:50%; background:var(--card-knob); box-shadow:0 1px 2px rgba(0, 0, 0, .4); transition: transform 200ms var(--switch-ease), background 180ms ease }.channel-toggle.is-on { border-color:var(--card-line-interactive); background:var(--card-track-on); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2) }.channel-toggle.is-on i { background:var(--card-text); transform:translateX(13px) }
.channels-settings-panel { padding:18px}.channels-settings-heading { display:flex; gap:10px; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--channels-line-soft)}.channels-settings-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius: var(--radius-lg);background:var(--card-hover);color:var(--card-secondary); font-size:15px}.channels-settings-empty { padding:22px 3px 8px;color:var(--card-muted); font-size:12px; line-height:1.55}.channels-settings-form { padding-top:15px}.channels-selected-channel { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--channels-line-soft); border-radius: var(--radius-lg);background:var(--card-hover)}.channels-selected-channel > span:first-child { display:grid; place-items:center; width:28px; height:28px; border-radius:7px;background:var(--card-hover);color:var(--card-secondary); font-size:16px}.channels-selected-channel > div { display:grid; gap:1px; min-width:0}.channels-selected-channel strong { overflow:hidden;color:var(--card-text); font-size:12px; text-overflow:ellipsis; white-space:nowrap}.channels-selected-channel small {color:var(--card-muted); font-size: 12px}.channels-state-badge { margin-left:auto; padding:3px 7px; border:1px solid rgba(82,197,151,.24); border-radius: var(--radius-pill); color:#70d9a9; font-size: 12px}.channels-state-badge.is-off {border-color:var(--card-line-interactive);color:var(--card-muted)}
.channels-health-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:12px 0 8px}.channels-health-grid > div { padding:8px; border:1px solid var(--channels-line-soft); border-radius:7px;background:var(--card-raised)}.channels-health-grid small { display:block;color:var(--card-muted); font-size: 12px}.channels-health-grid strong { display:block; margin-top:2px;color:var(--card-text); font-size:15px}.channels-last-seen { margin:0 0 14px;color:var(--card-muted); font-size: 12px}.channels-field { display:grid; gap:5px; margin-top:12px}.channels-field > span {color:var(--card-secondary); font-size:12px}.channels-field small {color:var(--card-muted); font-size: 12px}.channels-field .form-input { width:100%; height:34px;border-color:var(--card-line-interactive);background:var(--card-surface);color:var(--card-text); font-size:12px}.channels-settings-actions { display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--channels-line-soft)}.channels-settings-actions .btn { min-width:118px}.channels-settings-actions span { color:#70d9a9; font-size: 12px}
@media (max-width: 1180px) { .channels-workspace { grid-template-columns:1fr; }.channels-settings-panel { order:2; }.channels-list-panel { order:1; } #tab-channels .channels-settings-panel { position:relative; top:auto; max-height:none; overflow:visible; }}
@media (max-width: 640px) { .channels-tab-header { display:block; }.channels-header-actions { padding-top:12px; }.channels-summary-strip { grid-template-columns:1fr; }.channels-summary-item + .channels-summary-item { border-top:1px solid var(--channels-line); border-left:0; }.channels-list-toolbar { display:block; }.channels-filter { width:100%; margin-top:12px; }.category-card-header { padding:0 12px; }.category-actions .btn { display:none; }.channel-row-item { padding-inline:12px; }.channel-status { display:none; }.channels-settings-panel { padding:14px; } }

/* AI Channels density and navigation refinement. */
#tab-channels .channels-list-panel { overflow:hidden}
#tab-channels .channels-list-toolbar { position:sticky; top:0; z-index:5; display:flex; align-items:flex-start}
.channels-list-controls { display:grid; gap:7px; justify-items:end}
.channel-view-filters { display:flex; align-items:center; gap:4px}
.channel-view-filter, .channel-collapse-all { min-height:25px; padding:4px 8px; border:1px solid transparent; border-radius: var(--radius-control); background:transparent;color:var(--card-muted); font:12px var(--font-sans); cursor:pointer; transition:background .16s ease, border-color .16s ease, color .16s ease}
.channel-view-filter:hover, .channel-collapse-all:hover {color:var(--card-text);background:var(--card-hover)}
.channel-view-filter.is-active {border-color:var(--card-line-interactive);background:var(--card-hover);color:var(--card-text)}
.channel-collapse-all { margin-left:3px;color:var(--card-secondary)}
#tab-channels .channels-category-container { max-height:560px; overflow-y:auto; overscroll-behavior:contain}
#tab-channels .channel-category-card { border-radius: var(--radius-row)}
#tab-channels .category-card-header { min-height:39px; padding:0 14px;background:var(--card-raised)}
.category-toggle { display:flex; align-items:center; gap:8px; min-width:0; min-height:39px; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer}
.category-toggle .category-chevron { display:inline-block; width:12px; transition:transform .18s ease}
.channel-category-card.is-collapsed .category-toggle .category-chevron { transform:rotate(-90deg)}
.category-toggle .category-title { white-space:nowrap}
.category-toggle .category-count { white-space:nowrap}
.category-actions .btn { min-height:24px; padding:3px 6px; border-radius:5px; font-size: 12px}
.category-channels-reveal { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--fork-motion-medium, 240ms) cubic-bezier(.22, .8, .24, 1), opacity var(--fork-motion-fast, 160ms) ease}
.category-channels-reveal.is-collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none}
.category-channels-list { min-height: 0; overflow: hidden}
#tab-channels .channel-row-item { min-height:46px; padding:6px 14px;border-top:1px solid var(--card-line); border-bottom:0}
.channel-type-symbol { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px;color:var(--card-secondary); font-size:17px; font-weight:500; line-height:1}
#tab-channels .channel-row-item.is-selected .channel-type-symbol {color:var(--card-text)}
#tab-channels .channel-info-group { gap:8px}
#tab-channels .channel-name { font-size:12px}
#tab-channels .channel-info-group small { font-size: 12px}
#tab-channels .channel-actions-group { gap:10px}
#tab-channels .channel-toggle { width:30px; height:17px; padding:2px}
#tab-channels .channel-toggle i { width:11px; height:11px}
#tab-channels .channel-toggle.is-on i { transform:translateX(11px)}
.channels-empty-state { padding:30px 18px;color:var(--card-muted); font-size:11px; text-align:center}
#tab-channels .channels-settings-panel { position:sticky; top:16px; max-height:calc(100vh - 190px); overflow-y:auto}

@media (max-width: 640px) { #tab-channels .channels-list-toolbar { display:block; }.channels-list-controls { justify-items:stretch; margin-top:10px; }.channels-filter { width:auto; margin-top:0; }.channel-view-filters { justify-content:flex-start; }.channel-collapse-all { margin-left:auto; }.category-actions .btn { display:none; }#tab-channels .channels-category-container { max-height:470px; } }

/* ============================================================ */
/* MODERATION LEDGER — QUIET AUDIT WORKSPACE                    */
/* ============================================================ */
#tab-moderation {--ledger-surface:var(--card-line-interactive);--ledger-line:var(--card-line-interactive);--ledger-line-soft:var(--card-line);--ledger-blue:var(--card-line-interactive);
  padding-bottom: 28px}
#tab-moderation .tab-header { align-items: flex-end; margin-bottom: 18px}
/* KALDIRILDI -- .tab-heading belirliyor. Moderation basligi da pencereye gore degisiyordu:
   clamp(24px, 2.1vw, 32px), yani 24px ile 32px arasinda. Dort sekme 18px idi, diger
   ucu 24-32px arasi; sonradan anlasildi ki 18px olanlar dort taneydi, bes degil. */
#tab-moderation .tab-header p { max-width: 720px; font-size: 13px;color:var(--card-secondary)}
#tab-moderation .tab-header-actions { align-items: flex-end}
/* KALDIRILDI (breadcrumb kaldirildi) -- .tab-heading belirliyor: #tab-moderation .moderation-breadcrumb
   } */
/* KALDIRILDI (breadcrumb kaldirildi) -- .tab-heading belirliyor: #tab-moderation .moderation-breadcrumb i
   } */
#tab-moderation .moderation-refresh { gap: 7px; min-width: 100px}
#tab-moderation .moderation-refresh span { font-size: 16px; line-height: 10px; color: var(--ledger-blue)}
#tab-moderation .mod-stats-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px}
#tab-moderation .mod-stat-box { min-height: 94px; padding: 15px 17px; text-align: left; align-items: flex-start; justify-content: center; gap: 1px;background:linear-gradient(135deg, var(--card-hover), var(--card-raised)); border: 1px solid var(--ledger-line); border-radius: 10px}
#tab-moderation .mod-stat-kicker {color:var(--card-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em}
#tab-moderation .mod-stat-num { margin-top: 4px; font-size: 25px; line-height: 1.1; font-weight: 650; letter-spacing: -.4px}
#tab-moderation .mod-stat-txt {color:var(--card-secondary); font-size: 12px}
#tab-moderation .mod-stat-warnings .mod-stat-num { color: #efc46b}
#tab-moderation .mod-stat-resolved .mod-stat-num { color: #82dbb8}
#tab-moderation .moderation-filter-bar { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(132px, .7fr)) auto; gap: 8px; align-items: center}
#tab-moderation .moderation-search { min-width: 0; display: flex; align-items: center; gap: 7px; padding-left: 10px;background:var(--card-surface); border: 1px solid var(--ledger-line); border-radius: 7px}
#tab-moderation .moderation-search > span { color: var(--ledger-blue); font-size: 22px; line-height: 1; transform: rotate(-20deg)}
#tab-moderation .moderation-search .form-input { border: 0; background: transparent; padding-left: 0}
#tab-moderation .moderation-search:focus-within {border-color:var(--card-line-interactive)}
#tab-moderation .moderation-filter-bar .form-input { min-width: 0; height: 34px;color:var(--card-secondary);background:var(--card-raised); border-color: var(--ledger-line)}
#tab-moderation .moderation-filter-bar .btn { height: 34px; padding-inline: 13px}
#tab-moderation .moderation-quick-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px}
#tab-moderation .moderation-quick-filters .filter-pill { padding: 6px 11px; border-radius: var(--radius-pill); border-color: var(--ledger-line);background:var(--card-raised);color:var(--card-secondary)}
#tab-moderation .moderation-quick-filters .filter-pill span {color:var(--card-muted); margin-left: 3px; font-variant-numeric: tabular-nums}
#tab-moderation .moderation-quick-filters .filter-pill:hover {border-color:var(--card-line-interactive);color:var(--card-text)}
#tab-moderation .moderation-quick-filters .filter-pill.active {background:var(--card-hover);border-color:var(--card-line-interactive);color:var(--card-text)}
#tab-moderation .moderation-ledger-layout { display: grid; grid-template-columns: minmax(0, 1.78fr) minmax(290px, .82fr); gap: 12px; align-items: start}
#tab-moderation .moderation-ledger-panel, #tab-moderation .moderation-detail-panel { min-width: 0; background: var(--ledger-surface); border: 1px solid var(--ledger-line); border-radius: 11px; -webkit-}
#tab-moderation .moderation-ledger-panel { overflow: hidden}
#tab-moderation .moderation-table-meta { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 10px;color:var(--card-secondary); font-size: 11px}
#tab-moderation .moderation-live-dot { display: inline-flex; align-items: center; gap: 6px;color:var(--card-muted)}
#tab-moderation .moderation-live-dot i { width: 6px; height: 6px; border-radius: 50%; background: #63d5a5; box-shadow: 0 0 0 3px rgba(99, 213, 165, .1)}
#tab-moderation .moderation-table-wrapper { max-height: min(570px, calc(100vh - 370px)); min-height: 260px; overflow: auto; overscroll-behavior: contain; border: 0; border-top: 1px solid var(--ledger-line-soft); border-radius: var(--radius-row); background: transparent}
#tab-moderation .moderation-table { min-width: 720px}
#tab-moderation .moderation-table thead { position: sticky; top: 0; z-index: 2}
#tab-moderation .moderation-table th { padding: 10px 12px;color:var(--card-muted);background:var(--card-hover); border-bottom: 1px solid var(--ledger-line); font-size: 12px; text-transform: uppercase; letter-spacing: .08em}
#tab-moderation .moderation-table td { height: 55px; padding: 8px 12px;background:var(--card-raised); border-bottom: 1px solid var(--ledger-line-soft);color:var(--card-secondary); font-size: 12px}
#tab-moderation .moderation-table tbody tr { cursor: pointer; transition: background .18s ease, box-shadow .18s ease}
#tab-moderation .moderation-table tbody tr:hover td {background:var(--card-hover)}
#tab-moderation .moderation-time, #tab-moderation .moderation-member { white-space: nowrap}
#tab-moderation .moderation-time strong, #tab-moderation .moderation-member strong { display: block;color:var(--card-text); font-size: 12px; font-weight: 550}
#tab-moderation .moderation-time small, #tab-moderation .moderation-member small { display: block; margin-top: 2px;color:var(--card-muted); font-size: 12px}
#tab-moderation .moderation-action-label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;color:var(--card-secondary)}
#tab-moderation .moderation-row-symbol { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;color:var(--card-secondary); font-style: normal; font-size: 16px}
#tab-moderation .moderation-row-symbol[data-tone="warn"] { color: #efc46b}
#tab-moderation .moderation-row-symbol[data-tone="mute"] {color:var(--card-secondary)}
#tab-moderation .moderation-row-symbol[data-tone="ban"], #tab-moderation .moderation-row-symbol[data-tone="strike"] { color: #e87f8b}
#tab-moderation .moderation-row-symbol[data-tone="reversal"] { color: #72d5ad}
#tab-moderation .moderation-issuer {color:var(--card-secondary); white-space: nowrap}
#tab-moderation .moderation-reason-cell { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color:var(--card-secondary)}
#tab-moderation .moderation-table .status-pill { border: 0; border-radius: var(--radius-pill); padding: 4px 8px; text-transform: none; font-size: 12px; font-weight: 550}
#tab-moderation .moderation-table .status-pill-warn { background: rgba(217, 157, 44, .14); color: #e9be65}
#tab-moderation .moderation-table .status-pill-inactive { background: rgba(68, 179, 139, .12); color: #78d2b0}
#tab-moderation .moderation-empty-row td { height: 210px; text-align: center}
#tab-moderation .moderation-empty-row span, #tab-moderation .moderation-empty-row small { display: block}
#tab-moderation .moderation-empty-row span {color:var(--card-secondary); font-weight: 550}
#tab-moderation .moderation-empty-row small { margin-top: 5px;color:var(--card-muted)}
#tab-moderation .moderation-detail-panel { position: sticky; top: 14px; min-height: 460px; padding: 18px}
#tab-moderation .moderation-detail-empty { display: flex; min-height: 420px; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 30px}
#tab-moderation .moderation-detail-mark { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;border:1px solid var(--card-line-interactive); border-radius: var(--radius-card);color:var(--card-secondary); font-size: 24px;background:var(--card-hover)}
#tab-moderation .moderation-detail-empty strong {color:var(--card-text); font-size: 15px}
#tab-moderation .moderation-detail-empty p { max-width: 220px; margin-top: 6px;color:var(--card-muted); font-size: 12px; line-height: 1.55}
#tab-moderation .moderation-detail-content { display: flex; flex-direction: column; gap: 16px}
#tab-moderation .moderation-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px}
#tab-moderation .moderation-detail-eyebrow, #tab-moderation .moderation-detail-label { display: block;color:var(--card-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .09em}
#tab-moderation .moderation-detail-heading h3 { margin-top: 4px;color:var(--card-text); font-size: 18px; font-weight: 620}
#tab-moderation .moderation-detail-id { display: block; margin-top: 2px;color:var(--card-muted); font-family: var(--font-mono); font-size: 12px}
#tab-moderation .icon-btn { border: 0; background: transparent;color:var(--card-muted); font-size: 20px; cursor: pointer}
#tab-moderation .icon-btn:hover {color:var(--card-text)}
#tab-moderation .moderation-detail-status-row { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--ledger-line-soft)}
#tab-moderation .moderation-detail-status-row .status-pill { border: 0; border-radius: var(--radius-pill); padding: 4px 9px; text-transform: none; font-size: 12px}
#tab-moderation .moderation-detail-relative {color:var(--card-muted); font-size: 11px}
#tab-moderation .moderation-detail-action { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--ledger-line-soft); border-radius: var(--radius-lg);background:var(--card-hover)}
#tab-moderation .moderation-action-symbol { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px;color:var(--card-secondary);background:var(--card-hover); font-size: 21px}
#tab-moderation .moderation-action-symbol[data-tone="warn"] { color: #efc46b; background: rgba(209, 157, 54, .14)}
#tab-moderation .moderation-action-symbol[data-tone="mute"] {color:var(--card-secondary);background:var(--card-hover)}
#tab-moderation .moderation-action-symbol[data-tone="ban"], #tab-moderation .moderation-action-symbol[data-tone="strike"] { color: #ed8c98; background: rgba(203, 79, 96, .14)}
#tab-moderation .moderation-action-symbol[data-tone="reversal"] { color: #75d7af; background: rgba(58, 167, 125, .14)}
#tab-moderation .moderation-detail-action strong { display: block; margin-top: 2px;color:var(--card-text); font-size: 13px}
#tab-moderation .moderation-detail-action small { display: block; margin-top: 2px;color:var(--card-muted); font-size: 11px}
#tab-moderation .moderation-detail-facts { display: grid; gap: 13px}
#tab-moderation .moderation-detail-facts div { display: grid; gap: 4px}
#tab-moderation .moderation-detail-facts dt {color:var(--card-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em}
#tab-moderation .moderation-detail-facts dd {color:var(--card-secondary); font-size: 12px; overflow-wrap: anywhere}
#tab-moderation .moderation-detail-reason { padding: 11px 12px; border: 1px solid var(--ledger-line-soft); border-radius: var(--radius-lg);background:var(--card-surface)}
#tab-moderation .moderation-detail-reason p { margin-top: 6px;color:var(--card-secondary); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere}
#tab-moderation .moderation-detail-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 4px;color:var(--card-muted); font-size: 12px}
@media (max-width: 1180px) { #tab-moderation .moderation-filter-bar { grid-template-columns: minmax(210px, 1fr) repeat(2, minmax(130px, .65fr)) auto; } #tab-moderation .moderation-filter-bar #select-mod-date-filter { grid-column: 2; }  #tab-moderation .moderation-ledger-layout { grid-template-columns: 1fr; } #tab-moderation .moderation-detail-panel { position: static; min-height: 0; } #tab-moderation .moderation-detail-empty { min-height: 180px; } #tab-moderation .moderation-detail-content { gap: 13px; }  }

@media (max-width: 640px) { #tab-moderation .mod-stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tab-moderation .moderation-filter-bar { grid-template-columns: 1fr 1fr; } #tab-moderation .moderation-search { grid-column: 1 / -1; } #tab-moderation .moderation-filter-bar #select-mod-date-filter { grid-column: auto; } #tab-moderation .moderation-filter-bar #btn-clear-mod-filters { grid-column: 1 / -1; } #tab-moderation .moderation-table-wrapper { max-height: 60vh; } }

/* ============================================================ */
/* AI TOOLS & BRIDGE — POLICY WORKSPACE                         */
/* ============================================================ */
#tab-tools {--tools-line:var(--card-line-interactive);--tools-line-soft:var(--card-line);--tools-surface:var(--card-raised);--tools-surface-raised:var(--card-hover);--tools-text:var(--card-text);--tools-secondary:var(--card-secondary);--tools-muted:var(--card-muted);--tools-blue:var(--card-accent);
  padding-bottom: 30px}
#tab-tools .tools-dashboard { margin: 0 auto; color: var(--tools-text)}
#tab-tools .tools-tab-header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:7px 2px 20px; border-bottom:1px solid var(--tools-line-soft)}
/* KALDIRILDI (ust etiket kaldirildi) -- .tab-heading belirliyor: #tab-tools .tools-eyebrow
   } */
/* KALDIRILDI (AI Tools basligi clamp(26px,2.4vw,36px) idi, pencereye gore degisiyordu) -- .tab-heading belirliyor: #tab-tools .tools-tab-header h2
   } */
/* KALDIRILDI (aciklama 13px idi) -- .tab-heading belirliyor: #tab-tools .tools-tab-header p
   } */
#tab-tools .tools-header-actions { display:flex; align-items:center; gap:13px; padding-bottom:2px}
#tab-tools .tools-updated-label {color:var(--card-muted); font-size:11px; white-space:nowrap}
#tab-tools .tools-save-state { display:inline-flex; align-items:center; gap:6px; color:#77d6aa; font-size: 12px; white-space:nowrap}
#tab-tools .tools-save-state i { width:6px; height:6px; border-radius:50%; background:#5fd09c; box-shadow:0 0 8px rgba(95,208,156,.35)}
#tab-tools .tools-summary-strip { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin:17px 0 13px; border:1px solid var(--tools-line); border-radius:10px;background:var(--card-raised)}
#tab-tools .tools-summary-strip > div { min-height:76px; padding:13px 17px}
#tab-tools .tools-summary-strip > div + div { border-left:1px solid var(--tools-line-soft)}
#tab-tools .tools-summary-strip span, #tab-tools .tools-summary-strip small { display:block; color:var(--tools-muted); font-size: 12px}
#tab-tools .tools-summary-strip strong { display:block; margin-top:4px;color:var(--card-text); font-size:22px; line-height:1.1; letter-spacing:-.4px; font-weight:650}
#tab-tools .tools-summary-strip small { margin-top:2px;color:var(--card-muted)}
#tab-tools .tools-workspace { display:grid; grid-template-columns:174px minmax(0,1fr) minmax(300px, .72fr); min-height:640px; border:1px solid var(--tools-line); border-radius:11px; overflow:hidden;background:var(--card-raised); -webkit-}
#tab-tools .tools-category-rail { padding:16px 10px; border-right:1px solid var(--tools-line-soft);background:var(--card-raised)}
#tab-tools .tools-rail-heading { padding:0 9px 12px; border-bottom:1px solid var(--tools-line-soft)}
#tab-tools .tools-rail-heading span { display:block;color:var(--card-text); font-size:12px; font-weight:650}
#tab-tools .tools-rail-heading small { display:block; margin-top:3px;color:var(--card-muted); font-size: 12px}
#tab-tools .tools-category-list { display:grid; gap:3px; padding-top:10px}
#tab-tools .tools-category-item { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:7px; width:100%; min-height:36px; padding:6px 8px; border:1px solid transparent; border-radius:7px; background:transparent;color:var(--card-secondary); font:12px var(--font-sans); text-align:left; cursor:pointer; transition:background .16s ease, border-color .16s ease, color .16s ease}
#tab-tools .tools-category-item:hover {color:var(--card-text);background:var(--card-hover)}
#tab-tools .tools-category-item.is-active {border-color:var(--card-line-interactive);background:var(--card-selected);color:var(--card-text)}
#tab-tools .tools-category-item em {color:var(--card-muted); font-size: 12px; font-style:normal}
#tab-tools .tools-category-item.is-active em {color:var(--card-text)}
#tab-tools .tools-category-icon { display:grid; place-items:center; width:20px; height:20px;color:var(--card-secondary); line-height:1}
/*
 * The category rail draws its icons from the page sprite.
 *
 * This rule was missing entirely, which is the other half of why the icons read
 * as broken: the <svg> elements had no size of their own, so they fell back to the
 * replaced-element default of 300x150 and each category row carried a block far
 * wider than the 22px grid column holding it. Fixing the glyphs without this
 * would have swapped one wrong icon for a correct one at the wrong size.
 *
 * The stroke vocabulary is copied from `.card-icon` in cards.css rather than
 * invented here, so a category icon and an overview icon are the same object.
 */
#tab-tools .tool-category-glyph { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#tab-tools .tools-category-item.is-active .tool-category-glyph { color: var(--card-text)}
#tab-tools .tools-library { min-width:0; padding:17px 14px 22px}
#tab-tools .tools-library-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:13px; padding:0 2px 14px; border-bottom:1px solid var(--tools-line-soft)}
#tab-tools .tools-library-toolbar h3 {color:var(--card-text); font-size:16px; font-weight:650; letter-spacing:-.2px}
#tab-tools .tools-library-toolbar p { margin-top:3px;color:var(--card-muted); font-size: 12px}
#tab-tools .tools-search { display:flex; align-items:center; gap:8px; width:160px; height:30px; padding:0 9px;border:1px solid var(--card-line-interactive); border-radius:7px;background:var(--card-surface)}
#tab-tools .tools-search span { width:10px; height:10px;border:1.5px solid var(--card-line-interactive); border-radius:50%; position:relative; flex:0 0 10px}
#tab-tools .tools-search span::after { content:""; position:absolute; width:5px; height:1.5px; right:-4px; bottom:-2px;background:var(--card-hover); transform:rotate(45deg)}
#tab-tools .tools-search input { width:100%; min-width:0; border:0; outline:0; background:transparent;color:var(--card-text); font:12px var(--font-sans)}
#tab-tools .tools-search input::placeholder {color:var(--card-muted)}
/*
 * The card grid fills the space it is given instead of dividing it in two.
 *
 * This is where "the page is too wide" actually came from, and it is worth being
 * precise about it because the obvious fix is the wrong one.
 *
 * `@media (min-width: 1181px)` in overview.css already caps the side columns —
 * the category rail at `minmax(180px, 220px)` and the detail panel at
 * `minmax(320px, 400px)` — and `testDashboardNoFabricatedData` deliberately
 * forbids a tab from capping its own width, so that switching tabs does not
 * resize the product. Capping `.tools-dashboard` to 1400px fights that decision,
 * and a first pass here did exactly that.
 *
 * The unbounded column is the *middle* one: `minmax(0, 1fr)`, which soaks up
 * whatever the rails leave. On a 2560px display that is about 1940px, and
 * `repeat(2, minmax(0, 1fr))` then made each card about 960px wide — two cards
 * per row, each reading as a wide empty panel rather than a tool.
 *
 * `auto-fill` with a 272px floor keeps the tab as wide as the monitor, which is
 * what the architecture wants, and lets the *row count* grow instead of each
 * card: 1940px becomes 7 columns of ~268px, and 960px cards become readable
 * ones. The narrow behaviour is unchanged — below ~590px of middle column it
 * resolves to a single column, the same as the 820px breakpoint already forced.
 */
#tab-tools .tools-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); gap:9px; padding-top:13px}
#tab-tools .tool-card { min-width:0; padding:12px 11px 9px;border:1px solid var(--card-line); border-radius: var(--radius-lg);background:var(--card-raised); cursor:pointer; transition:background .16s ease, border-color .16s ease, transform .16s ease}
#tab-tools .tool-card:hover {border-color:var(--card-line-interactive);background:var(--card-hover); transform:translateY(-1px)}
#tab-tools .tool-card.is-selected {border-color:var(--card-line-interactive);background:var(--card-selected)}
#tab-tools .tool-card-main { display:grid; grid-template-columns:32px minmax(0,1fr) 30px; align-items:start; gap:9px}
#tab-tools .tool-icon { display:grid; place-items:center; width:32px; height:32px;border:1px solid var(--card-line-interactive); border-radius: var(--radius-lg);background:var(--card-hover);color:var(--card-secondary); font-size:19px; line-height:1}
#tab-tools .tool-card-copy { min-width:0}
#tab-tools .tool-card-title-row { display:flex; align-items:center; gap:7px; min-width:0}
#tab-tools .tool-card h4 { overflow:hidden;color:var(--card-text); font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap}
#tab-tools .tool-card p { display:-webkit-box; overflow:hidden; margin-top:4px;color:var(--card-secondary); font-size: 12px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2}
#tab-tools .tool-card code { display:block; overflow:hidden; margin-top:6px; padding:0; border:0; background:transparent;color:var(--card-muted); font-size: 12px; text-overflow:ellipsis; white-space:nowrap}
#tab-tools .tool-risk { display:inline-flex; align-items:center; flex:0 0 auto; min-height:18px; padding:2px 6px; border-radius: var(--radius-pill); font-size: 12px; text-transform:capitalize}
#tab-tools .risk-read { background:rgba(71,190,140,.12); color:#7ad5ad}
#tab-tools .risk-moderation { background:rgba(221,174,67,.13); color:#e8bf70}
#tab-tools .risk-high { background:rgba(226,92,105,.13); color:#ee949c}
#tab-tools .tool-toggle { display:grid; place-items:center; width:30px; height:18px; padding:2px; border:1px solid var(--card-line); border-radius: var(--radius-pill); background:var(--card-raised); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); cursor:pointer; transition: background 180ms var(--switch-ease), border-color 180ms ease, box-shadow 180ms ease }
#tab-tools .tool-toggle i { display:block; width:12px; height:12px; border-radius:50%; background:var(--card-knob); box-shadow:0 1px 2px rgba(0, 0, 0, .4); transition: transform 200ms var(--switch-ease), background 180ms ease }
#tab-tools .tool-toggle.is-on { border-color:var(--card-line-interactive); background:var(--card-track-on); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2) }
#tab-tools .tool-toggle.is-on i { background:var(--card-text); transform:translateX(12px) }
#tab-tools .tool-card-footer { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:10px; padding-top:8px;border-top:1px solid var(--card-line)}
#tab-tools .tool-state { display:flex; align-items:center; gap:5px;color:var(--card-muted); font-size: 12px}
#tab-tools .tool-state i { width:5px; height:5px; border-radius:50%;background:var(--card-hover)}
#tab-tools .tool-state.is-enabled { color:#8dbda8}
#tab-tools .tool-state.is-enabled i { background:#5fd09c; box-shadow:0 0 7px rgba(95,208,156,.32)}
#tab-tools .tool-mode-switch, #tab-tools .detail-mode-control { display:flex; align-items:center; padding:2px;border:1px solid var(--card-line-interactive); border-radius: var(--radius-control);background:var(--card-surface)}
#tab-tools .tool-mode-switch button, #tab-tools .detail-mode-control button { min-width:39px; padding:4px 7px; border:0; border-radius: var(--radius-sm); background:transparent;color:var(--card-secondary); font:12px var(--font-sans); cursor:pointer}
#tab-tools .tool-mode-switch button.is-active, #tab-tools .detail-mode-control button.is-active {background:var(--card-hover);color:var(--card-text)}
/*
 * Shown instead of a switch for a tool that supports only one execution mode.
 *
 * Styled to read as a settled fact rather than a disabled control: there is
 * nothing to press, and it should look like that rather than like a control that
 * failed to load. The muted colour is deliberate — it is informational, and
 * drawing attention to it would imply an action.
 */
#tab-tools .tool-mode-fixed { padding:4px 7px;color:var(--card-muted); font:12px var(--font-sans); font-style:italic}
#tab-tools .tools-detail-panel { min-width:0; border-left:1px solid var(--tools-line-soft);background:var(--card-raised)}
#tab-tools .tools-detail-content { padding:19px 18px 21px}
#tab-tools .tools-detail-empty { display:flex; min-height:620px; align-items:center; justify-content:center; flex-direction:column; padding:26px; text-align:center}
#tab-tools .tools-detail-mark { display:grid; place-items:center; width:42px; height:42px; margin-bottom:14px;border:1px solid var(--card-line-interactive); border-radius:11px;background:var(--card-hover);color:var(--card-secondary); font-size:22px}
#tab-tools .tools-detail-empty strong {color:var(--card-text); font-size:14px}
#tab-tools .tools-detail-empty p { max-width:220px; margin-top:6px;color:var(--card-muted); font-size:11px; line-height:1.55}
#tab-tools .tools-detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
#tab-tools .tools-detail-eyebrow { display:block;color:var(--card-muted); font-size: 12px; text-transform:uppercase; letter-spacing:.1em}
#tab-tools .tools-detail-heading h3 { margin-top:5px;color:var(--card-text); font-size:18px; line-height:1.15; font-weight:650; letter-spacing:-.35px}
#tab-tools .tools-detail-heading code { display:block; margin-top:4px; padding:0; border:0; background:transparent;color:var(--card-muted); font-size: 12px}
#tab-tools .tool-detail-icon { display:grid; place-items:center; width:34px; height:34px;border:1px solid var(--card-line-interactive); border-radius: var(--radius-lg);background:var(--card-hover);color:var(--card-secondary); font-size:19px}
#tab-tools .tools-detail-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px}
#tab-tools .detail-badge { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border-radius: var(--radius-pill);background:var(--card-hover);color:var(--card-secondary); font-size: 12px}
#tab-tools .tools-detail-description { margin-top:12px; padding-bottom:14px; border-bottom:1px solid var(--tools-line-soft);color:var(--card-secondary); font-size:11px; line-height:1.55}
#tab-tools .tools-detail-section { padding:14px 0; border-bottom:1px solid var(--tools-line-soft)}
#tab-tools .tools-detail-section h4 { margin-bottom:9px;color:var(--card-text); font-size:11px; font-weight:650}
#tab-tools .detail-mode-control { width:100%}
#tab-tools .detail-mode-control button { flex:1; padding:7px 8px; font-size: 12px}
#tab-tools .detail-check { display:flex; align-items:center; gap:8px; margin-top:11px;color:var(--card-secondary); font-size: 12px; cursor:pointer}
#tab-tools .detail-check input { width:13px; height:13px; accent-color:var(--card-accent)}
#tab-tools .detail-field { display:grid; gap:5px; margin-top:10px}
#tab-tools .detail-field:first-of-type { margin-top:0}
#tab-tools .detail-field > span { display:flex; justify-content:space-between; gap:7px;color:var(--card-secondary); font-size: 12px}
#tab-tools .detail-field > span small {color:var(--card-muted); font-size: 12px}
#tab-tools .detail-field select, #tab-tools .detail-field input { width:100%;border:1px solid var(--card-line-interactive); border-radius: var(--radius-control); outline:0;background:var(--card-surface);color:var(--card-text); font:12px var(--font-sans)}
#tab-tools .detail-field select { min-height:62px; padding:5px}
#tab-tools .detail-field select option { padding:3px;background:var(--card-raised)}
#tab-tools .detail-field input { height:32px; padding:0 9px}
#tab-tools .detail-field input:focus, #tab-tools .detail-field select:focus {border-color:var(--card-line-interactive)}
#tab-tools .detail-input-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px}
#tab-tools .tools-telemetry-heading { display:flex; align-items:center; justify-content:space-between; gap:10px}
#tab-tools .tools-telemetry-heading h4 { margin:0}
#tab-tools .tools-telemetry-heading span {color:var(--card-muted); font-size: 12px}
#tab-tools .tools-telemetry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
#tab-tools .tools-telemetry-grid > div { min-width:0; padding-right:5px; border-right:1px solid var(--tools-line-soft)}
#tab-tools .tools-telemetry-grid > div:last-child { border-right:0}
#tab-tools .tools-telemetry-grid strong { display:block;color:var(--card-text); font-size:13px; font-weight:650}
#tab-tools .tools-telemetry-grid small { display:block; margin-top:2px;color:var(--card-muted); font-size: 12px}
#tab-tools .tools-detail-actions { display:flex; align-items:center; gap:10px; padding-top:16px}
#tab-tools .tools-detail-actions .btn { min-width:105px}
#tab-tools .tools-detail-actions span { color:#73d4a9; font-size: 12px}
#tab-tools .tools-empty-state { padding:70px 15px;color:var(--card-muted); font-size:11px; text-align:center}
@media (max-width: 1180px) { #tab-tools .tools-workspace { grid-template-columns:160px minmax(0,1fr); } #tab-tools .tools-detail-panel { grid-column:1 / -1; border-top:1px solid var(--tools-line-soft); border-left:0; } #tab-tools .tools-detail-content { max-width:680px; margin:0 auto; } #tab-tools .tools-detail-empty { min-height:190px; } }
@media (max-width: 820px) { #tab-tools .tools-tab-header { display:block; } #tab-tools .tools-header-actions { justify-content:space-between; padding-top:13px; } #tab-tools .tools-summary-strip { grid-template-columns:repeat(2,1fr); } #tab-tools .tools-summary-strip > div:nth-child(odd) { border-left:0; } #tab-tools .tools-summary-strip > div:nth-child(n+3) { border-top:1px solid var(--tools-line-soft); } #tab-tools .tools-workspace { display:block; overflow:visible; } #tab-tools .tools-category-rail { border-right:0; border-bottom:1px solid var(--tools-line-soft); } #tab-tools .tools-category-list { display:flex; overflow:auto; padding-bottom:2px; } #tab-tools .tools-category-item { min-width:max-content; } #tab-tools .tools-library { padding:14px 11px 20px; } #tab-tools .tools-grid { grid-template-columns:1fr; } #tab-tools .tools-detail-panel { border-top:1px solid var(--tools-line-soft); } }
@media (max-width: 640px) { #tab-tools .tools-summary-strip > div { min-height:67px; padding:11px 12px; } #tab-tools .tools-summary-strip strong { font-size:19px; } #tab-tools .tools-library-toolbar { display:block; } #tab-tools .tools-search { width:100%; margin-top:11px; } #tab-tools .tools-detail-content { padding-inline:13px; } #tab-tools .detail-input-grid { grid-template-columns:1fr; } }

/* Shared calm glass treatment for channel surfaces. Selection is communicated
   by a soft fill only; no protruding accent rail on either workspace. */
#tab-channels .channels-summary-strip,
#tab-channels .channels-list-panel,
#tab-channels .channels-settings-panel {
  background: var(--surface-panel);
  border-color: var(--hairline);
  box-shadow: none}
#tab-channels .category-card-header {background:var(--card-hover)}
#tab-channels .channel-row-item.is-selected { background:var(--card-selected); box-shadow:none}
#tab-channels .channel-row-item:hover {background:var(--card-hover)}
#tab-moderation .moderation-table tbody tr.is-selected td { background:var(--card-selected); box-shadow:none}

/* ============================================================ */
/* ROLE PERMISSIONS — SECURITY CONTROL PLANE                     */
/* ============================================================ */
#tab-permissions {--permissions-line:var(--card-line-interactive);--permissions-line-soft:var(--card-line);--permissions-surface:var(--card-raised);--permissions-surface-raised:var(--card-hover);--permissions-text:var(--card-text);--permissions-secondary:var(--card-secondary);--permissions-muted:var(--card-muted);--permissions-blue:var(--card-accent);
  padding-bottom: 30px}
#tab-permissions .permissions-dashboard { margin: 0 auto; color: var(--permissions-text)}
#tab-permissions .permissions-tab-header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:7px 2px 20px; border-bottom:1px solid var(--permissions-line-soft)}
/* KALDIRILDI (ust etiket kaldirildi) -- .tab-heading belirliyor: #tab-permissions .permissions-eyebrow
   } */
/* KALDIRILDI (Permissions basligi clamp(26px,2.4vw,36px) idi, pencereye gore degisiyordu) -- .tab-heading belirliyor: #tab-permissions .permissions-tab-header h2
   } */
/* KALDIRILDI (aciklama 13px idi) -- .tab-heading belirliyor: #tab-permissions .permissions-tab-header p
   } */
#tab-permissions .permissions-header-actions { display:flex; align-items:center; gap:9px; padding-bottom:2px}
#tab-permissions .permissions-save-state { display:inline-flex; align-items:center; gap:6px; color:#e6bd70; font-size: 12px; white-space:nowrap}
#tab-permissions .permissions-save-state i { width:6px; height:6px; border-radius:50%; background:#e6bd70; box-shadow:0 0 8px rgba(230,189,112,.30)}
#tab-permissions .permissions-summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:17px 0 13px; border:1px solid var(--permissions-line); border-radius:10px;background:var(--card-raised)}
#tab-permissions .permissions-summary-strip > div { min-height:76px; padding:13px 17px}
#tab-permissions .permissions-summary-strip > div + div { border-left:1px solid var(--permissions-line-soft)}
#tab-permissions .permissions-summary-strip span, #tab-permissions .permissions-summary-strip small { display:block; color:var(--permissions-muted); font-size: 12px}
#tab-permissions .permissions-summary-strip strong { display:block; margin-top:4px;color:var(--card-text); font-size:22px; line-height:1.1; letter-spacing:-.4px; font-weight:650}
#tab-permissions .permissions-summary-strip small { margin-top:2px;color:var(--card-muted)}
#tab-permissions .permissions-workspace { display:grid; grid-template-columns:230px minmax(0,1fr) minmax(285px,.68fr); min-height:640px; border:1px solid var(--permissions-line); border-radius:11px; overflow:hidden;background:var(--card-raised); -webkit-}
#tab-permissions .permissions-role-rail { min-width:0; padding:14px 10px; border-right:1px solid var(--permissions-line-soft);background:var(--card-raised)}
#tab-permissions .permissions-rail-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 95px; gap:6px; padding-bottom:12px; border-bottom:1px solid var(--permissions-line-soft)}
#tab-permissions .permissions-search, #tab-permissions .permissions-command-search { display:flex; align-items:center; gap:8px; min-width:0; height:30px; padding:0 9px;border:1px solid var(--card-line-interactive); border-radius:7px;background:var(--card-surface)}
#tab-permissions .permissions-search span, #tab-permissions .permissions-command-search span { width:10px; height:10px;border:1.5px solid var(--card-line-interactive); border-radius:50%; position:relative; flex:0 0 10px}
#tab-permissions .permissions-search span::after, #tab-permissions .permissions-command-search span::after { content:""; position:absolute; width:5px; height:1.5px; right:-4px; bottom:-2px;background:var(--card-hover); transform:rotate(45deg)}
#tab-permissions .permissions-search input, #tab-permissions .permissions-command-search input { width:100%; min-width:0; border:0; outline:0; background:transparent;color:var(--card-text); font:12px var(--font-sans)}
#tab-permissions .permissions-search input::placeholder, #tab-permissions .permissions-command-search input::placeholder {color:var(--card-muted)}
#tab-permissions .permissions-rail-toolbar .form-input { min-width:0; height:30px; padding:0 7px;border-color:var(--card-line-interactive);background:var(--card-surface);color:var(--card-secondary); font-size: 12px}
#tab-permissions .permissions-rail-heading { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:14px 4px 8px}
#tab-permissions .permissions-rail-heading span {color:var(--card-text); font-size: 12px; text-transform:uppercase; letter-spacing:.08em}
#tab-permissions .permissions-rail-heading small {color:var(--card-muted); font-size: 12px}
#tab-permissions .permissions-role-list { display:flex; flex-direction:column; gap:2px; max-height:540px; overflow:auto}
#tab-permissions .permission-role-item { display:grid; grid-template-columns:17px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:49px; padding:7px 7px; border:1px solid transparent; border-radius:7px; background:transparent;color:var(--card-secondary); font:inherit; text-align:left; cursor:pointer; transition:background .16s ease,border-color .16s ease,color .16s ease}
#tab-permissions .permission-role-item:hover {background:var(--card-hover);color:var(--card-text)}
#tab-permissions .permission-role-item.is-selected {border-color:var(--card-line-interactive);background:var(--card-selected);color:var(--card-text)}
#tab-permissions .permission-role-dot, #tab-permissions .permission-inspector-dot { width:14px; height:14px; border-radius:50%}
#tab-permissions .permission-role-copy { display:grid; min-width:0; gap:2px}
#tab-permissions .permission-role-copy strong { overflow:hidden; color:inherit; font-size: 12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap}
#tab-permissions .permission-role-copy small { overflow:hidden;color:var(--card-muted); font-size: 12px; text-overflow:ellipsis; white-space:nowrap}
#tab-permissions .permission-role-tier { padding:3px 6px; border-radius: var(--radius-pill);background:var(--card-hover);color:var(--card-secondary); font-size: 12px; font-style:normal; white-space:nowrap}
#tab-permissions .tier-admin {background:var(--card-hover);color:var(--card-secondary)}.tier-moderator {background:var(--card-hover);color:var(--card-secondary)}.tier-configured { background:rgba(81,192,143,.13); color:#8fdbb4}.tier-member {background:var(--card-hover);color:var(--card-secondary)}
#tab-permissions .permissions-matrix-panel { min-width:0; padding:17px 12px 22px}
#tab-permissions .permissions-matrix-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:13px; padding:0 2px 13px; border-bottom:1px solid var(--permissions-line-soft)}
#tab-permissions .permissions-selected-role-kicker { display:block;color:var(--card-muted); font-size: 12px; text-transform:uppercase; letter-spacing:.09em}
#tab-permissions .permissions-matrix-toolbar h3 { margin-top:4px;color:var(--card-text); font-size:16px; font-weight:650; letter-spacing:-.2px}
#tab-permissions .permissions-matrix-toolbar p { margin-top:3px;color:var(--card-muted); font-size: 12px}
#tab-permissions .permissions-command-search { width:170px}
#tab-permissions .permissions-filter-row { display:flex; gap:4px; padding:10px 2px 8px}
#tab-permissions .permission-filter { min-height:24px; padding:4px 9px; border:1px solid transparent; border-radius: var(--radius-control); background:transparent;color:var(--card-muted); font:12px var(--font-sans); cursor:pointer}
#tab-permissions .permission-filter:hover {color:var(--card-text);background:var(--card-hover)}.permission-filter.is-active {border-color:var(--card-line-interactive);background:var(--card-hover);color:var(--card-text)}
#tab-permissions .permissions-command-groups { display:flex; flex-direction:column; gap:8px}
#tab-permissions .permission-command-group { overflow:hidden;border:1px solid var(--card-line); border-radius: var(--radius-lg);background:var(--card-raised)}
#tab-permissions .permission-command-group > header {border-bottom:1px solid var(--card-line);background:var(--card-hover)}
#tab-permissions .permission-group-toggle { display:flex; align-items:center; gap:8px; width:100%; min-height:34px; padding:0 10px; border:0; background:transparent;color:var(--card-text); font:12px var(--font-sans); text-align:left; cursor:pointer}
#tab-permissions .permission-group-toggle > span { width:11px;color:var(--card-secondary); font-size:14px; transition:transform .16s ease}.permission-group-toggle[aria-expanded="false"] > span { transform:rotate(-90deg)}.permission-group-toggle small { margin-left:auto;color:var(--card-muted); font-size: 12px}
#tab-permissions .permission-command-list.is-collapsed { display:none}
#tab-permissions .permission-command-row { display:grid; grid-template-columns:minmax(140px,1.4fr) 42px minmax(84px,.8fr) minmax(174px,1.15fr); align-items:center; gap:8px; min-height:46px; padding:6px 9px;border-top:1px solid var(--card-line); cursor:pointer; transition:background .16s ease}
#tab-permissions .permission-command-row:hover, #tab-permissions .permission-command-row.is-selected {background:var(--card-hover)}
#tab-permissions .permission-command-name { display:grid; min-width:0; gap:2px}.permission-command-name strong {color:var(--card-text); font:600 11px var(--font-mono)}.permission-command-name small { overflow:hidden;color:var(--card-muted); font-size: 12px; text-overflow:ellipsis; white-space:nowrap}
#tab-permissions .permission-risk { display:inline-flex; justify-self:start; padding:3px 5px; border-radius: var(--radius-pill); font-size: 12px; text-transform:capitalize}.permission-risk.risk-low { background:rgba(71,190,140,.12); color:#7ad5ad}.permission-risk.risk-medium { background:rgba(221,174,67,.13); color:#e8bf70}.permission-risk.risk-high,.permission-risk.risk-critical { background:rgba(226,92,105,.13); color:#ee949c}
#tab-permissions .permission-required-permission { overflow:hidden;color:var(--card-secondary); font-size: 12px; text-overflow:ellipsis; white-space:nowrap}
#tab-permissions .permission-state-control, #tab-permissions .permission-detail-state { display:flex; align-items:center; justify-self:end; padding:2px;border:1px solid var(--card-line-interactive); border-radius: var(--radius-control);background:var(--card-surface)}
#tab-permissions .permission-state-control button, #tab-permissions .permission-detail-state button { min-width:49px; padding:5px 5px; border:0; border-radius: var(--radius-sm); background:transparent;color:var(--card-secondary); font:12px var(--font-sans); cursor:pointer}/* Three states, and only one of them is an answer.
   `open` means "inherited, nothing decided here" and is deliberately the quietest.
   `allowed` is a decision, so it carries a fill. After the migration both were
   `--card-hover`, which made an explicitly granted permission look exactly like an
   inherited one -- on the one screen whose entire job is showing what has been
   decided. `denied` was untouched because it was never blue, so the red survived. */
.permission-state-control button.is-active.is-allowed,.permission-detail-state button.is-active.is-allowed {background:var(--card-selected);color:var(--card-text)}.permission-state-control button.is-active.is-denied,.permission-detail-state button.is-active.is-denied { background:rgba(188,72,89,.38); color:#ffdce0}.permission-state-control button.is-active.is-open,.permission-detail-state button.is-active.is-open {background:var(--card-raised);color:var(--card-muted)}
#tab-permissions .permissions-inspector { min-width:0; border-left:1px solid var(--permissions-line-soft);background:var(--card-raised)}.permissions-inspector-content { padding:19px 17px 21px}.permissions-inspector-empty { display:flex; min-height:620px; align-items:center; justify-content:center; flex-direction:column; padding:25px; text-align:center}.permissions-inspector-empty > span { display:grid; place-items:center; width:42px; height:42px; margin-bottom:13px;border:1px solid var(--card-line-interactive); border-radius:11px;background:var(--card-hover);color:var(--card-secondary); font-size:22px}.permissions-inspector-empty strong {color:var(--card-text); font-size:14px}.permissions-inspector-empty p { max-width:220px; margin-top:6px;color:var(--card-muted); font-size:11px; line-height:1.55}
#tab-permissions .permissions-inspector-role { display:flex; align-items:center; gap:10px}.permissions-inspector-role h3 { margin-top:4px;color:var(--card-text); font-size:18px; line-height:1.15; font-weight:650}.permissions-inspector-role small { display:block; margin-top:4px;color:var(--card-muted); font-size: 12px}.permissions-inspector-eyebrow { display:block;color:var(--card-muted); font-size: 12px; text-transform:uppercase; letter-spacing:.1em}
#tab-permissions .permissions-inspector-description { margin-top:13px; padding-bottom:14px; border-bottom:1px solid var(--permissions-line-soft);color:var(--card-secondary); font-size: 12px; line-height:1.55}
#tab-permissions .permission-inspector-section { padding:14px 0; border-bottom:1px solid var(--permissions-line-soft)}.permission-inspector-section h4 { margin-bottom:9px;color:var(--card-text); font-size:11px; font-weight:650}.permission-access-bar { display:flex; height:7px; overflow:hidden; border-radius: var(--radius-pill);background:var(--card-hover)}.permission-access-bar i { background:#64cf9b}.permission-access-bar b { background:#ea7c89}.permission-access-legend { display:flex; flex-wrap:wrap; gap:9px; margin-top:8px;color:var(--card-secondary); font-size: 12px}.permission-access-legend span { display:flex; align-items:center; gap:4px}.permission-access-legend i { width:6px; height:6px; border-radius:50%}.legend-allowed { background:#64cf9b}.legend-denied { background:#ea7c89}.legend-open {background:var(--card-hover)}
#tab-permissions .native-permission-note p {color:var(--card-secondary); font-size: 12px; line-height:1.55}.permission-selected-command { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px}.permission-selected-command strong {color:var(--card-text); font:600 13px var(--font-mono)}.permissions-inspector-section > p {color:var(--card-secondary); font-size: 12px; line-height:1.5}.permission-source-note { display:block; margin-top:8px;color:var(--card-muted); font-size: 12px; line-height:1.45}.permission-detail-state { margin-top:12px; width:max-content}.permissions-inspector-actions { display:flex; align-items:center; gap:9px; padding-top:15px}.permissions-inspector-actions span { color:#e5bd6f; font-size: 12px}.permissions-inspector-actions .btn { min-width:94px}
#tab-permissions .permission-preset-review { display:grid; grid-template-columns:35px minmax(0,1fr) auto; align-items:center; gap:13px; margin:13px 0; padding:13px 16px;border:1px solid var(--card-line-interactive); border-radius:9px;background:var(--card-hover)}.permission-preset-icon { display:grid; place-items:center; width:32px; height:32px; border-radius: var(--radius-lg);background:var(--card-hover);color:var(--card-secondary); font-size:19px}.permission-preset-copy h3 { margin-top:2px;color:var(--card-text); font-size:13px; font-weight:650}.permission-preset-copy p { max-width:660px; margin-top:4px;color:var(--card-secondary); font-size: 12px; line-height:1.45}.permission-preset-change-summary { display:flex; align-items:center; gap:9px; margin-top:7px;color:var(--card-text); font-size: 12px}.preset-add { color:#76d5a5}.preset-remove { color:#ef9299}.permission-preset-actions { display:flex; align-items:center; gap:7px}.permission-preset-close { align-self:flex-start; border:0; background:transparent;color:var(--card-secondary); font-size:19px; cursor:pointer}.permission-preset-diff { grid-column:2 / -1; max-height:180px; overflow:auto; margin-top:3px;border-top:1px solid var(--card-line); padding-top:8px}.permission-preset-diff > div { display:grid; grid-template-columns:18px 125px 110px minmax(0,1fr); gap:8px; align-items:center; min-height:24px;color:var(--card-secondary); font-size: 12px}.permission-preset-diff code { padding:0; border:0; background:transparent;color:var(--card-text); font-size: 12px}.permission-preset-diff small {color:var(--card-muted)}.preset-diff-direction.add { color:#76d5a5}.preset-diff-direction.remove { color:#ef9299}.permission-preset-error { color:#ef9299; font-size:11px}.permission-preset-loading { display:flex; align-items:center; gap:10px;color:var(--card-secondary); font-size: 12px}.permission-preset-loading > span { width:16px; height:16px;border:2px solid var(--card-line-interactive);border-top-color:var(--card-line-interactive); border-radius:50%; animation:permission-spin .8s linear infinite}.permission-preset-loading p { margin-top:3px;color:var(--card-muted); font-size: 12px}@keyframes permission-spin { to { transform:rotate(360deg); } }
#tab-permissions .permissions-empty-inline { padding:18px 8px;color:var(--card-muted); font-size: 12px; text-align:center}.permissions-empty-state { padding:65px 15px;color:var(--card-muted); font-size:11px; text-align:center}
@media (max-width: 1180px) { #tab-permissions .permissions-workspace { grid-template-columns:210px minmax(0,1fr); } #tab-permissions .permissions-inspector { grid-column:1 / -1; border-top:1px solid var(--permissions-line-soft); border-left:0; } #tab-permissions .permissions-inspector-content { max-width:680px; margin:0 auto; } #tab-permissions .permissions-inspector-empty { min-height:180px; } }
@media (max-width: 820px) { #tab-permissions .permissions-tab-header { display:block; } #tab-permissions .permissions-header-actions { justify-content:flex-start; flex-wrap:wrap; padding-top:13px; } #tab-permissions .permissions-summary-strip { grid-template-columns:repeat(2,1fr); } #tab-permissions .permissions-summary-strip > div:nth-child(odd) { border-left:0; } #tab-permissions .permissions-summary-strip > div:nth-child(n+3) { border-top:1px solid var(--permissions-line-soft); } #tab-permissions .permissions-workspace { display:block; overflow:visible; } #tab-permissions .permissions-role-rail { border-right:0; border-bottom:1px solid var(--permissions-line-soft); } #tab-permissions .permissions-role-list { display:flex; flex-direction:row; overflow:auto; max-height:none; padding-bottom:3px; } #tab-permissions .permission-role-item { min-width:180px; } #tab-permissions .permissions-matrix-panel { padding-inline:9px; } #tab-permissions .permission-command-row { grid-template-columns:minmax(120px,1fr) 42px minmax(140px,1fr); } #tab-permissions .permission-required-permission { display:none; } #tab-permissions .permission-state-control { grid-column:2 / -1; justify-self:start; } #tab-permissions .permissions-inspector { border-top:1px solid var(--permissions-line-soft); } }
@media (max-width: 640px) { #tab-permissions .permissions-summary-strip > div { min-height:67px; padding:11px 12px; } #tab-permissions .permissions-summary-strip strong { font-size:19px; } #tab-permissions .permissions-rail-toolbar { grid-template-columns:1fr; } #tab-permissions .permissions-matrix-toolbar { display:block; } #tab-permissions .permissions-command-search { width:100%; margin-top:11px; } #tab-permissions .permission-preset-review { grid-template-columns:32px minmax(0,1fr); } #tab-permissions .permission-preset-actions { grid-column:1 / -1; justify-content:flex-end; } #tab-permissions .permission-preset-diff { grid-column:1 / -1; } #tab-permissions .permission-preset-diff > div { grid-template-columns:18px 1fr 1fr; } #tab-permissions .permission-preset-diff small { grid-column:2 / -1; } }

/* Shared, restrained motion. Entering views never move the page layout. */
:root {
  --fork-motion-fast: 160ms;
  --fork-motion-medium: 240ms;
  --fork-motion-ease: cubic-bezier(.22, .8, .24, 1)}
@keyframes fork-view-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes fork-content-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fork-card-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page-view:not(.hidden) { animation: fork-view-enter var(--fork-motion-medium) ease-out backwards}
.tab-content.active { animation: fork-content-enter var(--fork-motion-medium) var(--fork-motion-ease) backwards}
.btn, .nav-link, .form-input, .server-dropdown button {
  transition: background-color var(--fork-motion-fast) ease, border-color var(--fork-motion-fast) ease,
    color var(--fork-motion-fast) ease, box-shadow var(--fork-motion-fast) ease,
    opacity var(--fork-motion-fast) ease, transform var(--fork-motion-fast) ease}
.btn:active { transform: translateY(1px)}

.channels-settings-form:not(.hidden), #tab-tools .tools-detail-content,
#tab-moderation .moderation-detail-content:not(.hidden),
#tab-permissions .permissions-inspector-content {
  animation: fork-content-enter var(--fork-motion-fast) var(--fork-motion-ease) backwards}
.toast { animation: fork-card-enter var(--fork-motion-medium) var(--fork-motion-ease) backwards; transition: opacity 180ms ease, transform 180ms ease}
.toast.toast-leaving { opacity: 0; transform: translateY(7px)}

/* Server selection follows the current Fork palette without a second design system. */
#view-select-guild {
  min-height: calc(100vh - 59px);background:linear-gradient(180deg, var(--card-surface), var(--card-surface));color:var(--card-text);
  font-family: Geist, "Segoe UI", sans-serif}
.guild-picker-shell { width: min(100% - 64px, 1320px); margin: 0 auto; padding: clamp(54px, 10vh, 112px) 0 96px}
.guild-picker-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 48px}
.guild-picker-intro h1 { margin: 17px 0 8px;color:var(--card-text); font-size: clamp(36px, 4vw, 54px); font-weight: 680; letter-spacing: -.045em; line-height: 1.08}
.guild-picker-intro p {color:var(--card-secondary); font-size: 16px; line-height: 1.5}
.guild-picker-back { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none;color:var(--card-secondary); font: 13px Geist, "Segoe UI", sans-serif; cursor: pointer; transition: color var(--fork-motion-fast) ease, transform var(--fork-motion-fast) ease}
.guild-picker-back:hover {color:var(--card-text); transform: translateX(-3px)}
.guild-picker-search { display: flex; align-items: center; gap: 12px; width: min(100%, 360px); height: 48px; padding: 0 15px;border:1px solid var(--card-line-interactive); border-radius: 11px;background:var(--card-raised); transition: border-color var(--fork-motion-fast) ease, background-color var(--fork-motion-fast) ease, box-shadow var(--fork-motion-fast) ease}
.guild-picker-search:focus-within {border-color:var(--card-line-interactive);background:var(--card-hover)}
.guild-picker-search svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: #a8bad5; stroke-width: 1.8; stroke-linecap: round}
.guild-picker-search input { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent;color:var(--card-text); font: 13px Geist, "Segoe UI", sans-serif}
.guild-picker-search input::placeholder {color:var(--card-muted)}
#view-select-guild .guilds-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px}
#view-select-guild .guild-card { appearance: none; display: flex; align-items: stretch; flex-direction: column; min-width: 0; min-height: 244px; gap: 0; padding: 30px;border:1px solid var(--card-line-interactive); border-radius: var(--radius-card);background:var(--card-raised);color:var(--card-text); text-align: left; font-family: inherit; cursor: pointer; animation: fork-card-enter 300ms var(--fork-motion-ease) backwards; animation-delay: calc(var(--card-index) * 24ms); transition: border-color var(--fork-motion-medium) ease, background-color var(--fork-motion-medium) ease, box-shadow var(--fork-motion-medium) ease, transform var(--fork-motion-medium) var(--fork-motion-ease)}
#view-select-guild .guild-card:hover { transform: translateY(-3px);border-color:var(--card-line-interactive);background:var(--card-hover)}

#view-select-guild .guild-card:disabled { cursor: wait}
#view-select-guild .guild-card:disabled:not(.is-loading) { opacity: .6}
#view-select-guild .guild-card:disabled:hover { transform: none}
.guild-card-top { display: block}
#view-select-guild .guild-card-icon { display: block; width: 60px; height: 60px;border:1px solid var(--card-line-interactive); border-radius: 50%;background:var(--card-hover); object-fit: cover}
#view-select-guild .guild-card-fallback { display: grid; place-items: center;background:radial-gradient(circle at 28% 20%, var(--card-hover), var(--card-hover) 68%, var(--card-raised));color:var(--card-text); font-size: 18px; font-weight: 650; letter-spacing: .02em}
#view-select-guild .guild-card-meta { display: block; min-width: 0; margin-top: 28px}
#view-select-guild .guild-card-meta strong { display: block; overflow: hidden;color:var(--card-text); font-size: 20px; font-weight: 650; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap}
#view-select-guild .guild-card-meta small { display: block; margin-top: 6px;color:var(--card-secondary); font-size: 13px}
.guild-card-action { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 24px;color:var(--card-secondary); font-size: 13px; font-weight: 600; transition: color var(--fork-motion-fast) ease}
.guild-card-action span { font-size: 22px; font-weight: 400; line-height: .7; transition: transform var(--fork-motion-fast) var(--fork-motion-ease)}
.guild-card:hover .guild-card-action, .guild-card:focus-visible .guild-card-action {color:var(--card-secondary)}
.guild-card:hover .guild-card-action span, .guild-card:focus-visible .guild-card-action span { transform: translateX(4px)}
.guild-card.is-loading .guild-card-action::after { content: ""; width: 14px; height: 14px; margin-left: auto;border:2px solid var(--card-line-interactive);border-top-color:var(--card-line-interactive); border-radius: 50%; animation: fork-picker-spin .7s linear infinite}
@keyframes fork-picker-spin { to { transform: rotate(360deg); } }
.guild-picker-empty { grid-column: 1 / -1; padding: 65px 25px;border:1px solid var(--card-line-interactive); border-radius: var(--radius-card);background:var(--card-raised); text-align: center; animation: fork-content-enter var(--fork-motion-medium) ease-out backwards}
.guild-picker-empty strong {color:var(--card-text); font-size: 19px; font-weight: 650}
.guild-picker-empty p { margin-top: 7px;color:var(--card-secondary); font-size: 13px}
.guild-picker-status { margin-top: 22px;color:var(--card-secondary); font-size: 12px}
.guild-picker-status:empty { display: none}
@media (max-width: 1080px) { #view-select-guild .guilds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .guild-picker-shell { width: min(100% - 36px, 480px); padding: 38px 0 72px; }.guild-picker-heading { display: block; margin-bottom: 28px; }.guild-picker-intro h1 { margin-top: 16px; }.guild-picker-intro p { font-size: 14px; }.guild-picker-search { width: 100%; margin-top: 27px; } #view-select-guild .guilds-grid { grid-template-columns: 1fr; gap: 12px; } #view-select-guild .guild-card { min-height: 170px; padding: 20px; } #view-select-guild .guild-card-meta { margin-top: 14px; } .guild-card-action { padding-top: 17px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }


/* ============================================================ */
/* INTERACTION STATES — one focus ring, one disabled treatment */
/* ============================================================ */

/*
 * Focus and disabled were the two states the dashboard did not have as a system.
 *
 * Focus: twelve rules used six different blues, three outline offsets and one
 * negative inset, and half the interactive controls had none at all — every
 * <select>, the filter pills on three tabs, the tri-state permission buttons, the
 * tool and channel toggles, the audit table rows. For a keyboard user those were
 * invisible stops. One ring, one token, applied to everything focusable, replacing
 * all of it.
 *
 * `:where()` keeps this at zero specificity so a component rule can still opt
 * into a different treatment deliberately, without this layer having to know
 * about it.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset)}

/*
 * Nothing in the dashboard styled a disabled control: `grep` for :disabled and
 * [disabled] across all three stylesheets found one rule, for the guild picker.
 * A button that has no disabled state cannot show that it is already saving, so
 * every settings form in the product was double-submittable while its request
 * was in flight.
 */
:where(button, input, select, textarea, a[aria-disabled="true"], [aria-disabled="true"]):disabled,
:where(button, input, select, textarea, a, [role="button"])[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed}

/* A control that is mid-request rather than permanently unavailable. */
:where(button, a, [role="button"])[aria-busy="true"] {
  cursor: progress;
  opacity: .7}


/* ============================================================ */
/* SCROLLBARS — one treatment, every scroller                    */
/* ============================================================ */

/*
 * Six elements scroll in this product and five of them carried their own
 * `scrollbar-color`, one of those also a hand-written `::-webkit-scrollbar` width.
 * They disagreed with each other and with the platform default: a 7px webkit track
 * with a `var(--card-hover)` thumb, next to Firefox's thinner `thin` rendering, next
 * to Chromium's default 15px slab. A design built from hairlines and 6px radii
 * cannot afford a default scrollbar.
 *
 * One owner, applied to everything, with the Firefox and webkit halves both driven
 * from the same five values so they cannot drift apart again. The per-element
 * declarations that used to sit in the channels and permissions blocks are gone;
 * they are not commented out, because a second scrollbar owner is exactly what this
 * replaces.
 *
 * `--scrollbar-size` is 10px with a 3px transparent border and
 * `background-clip: content-box`. That is how a webkit thumb is made thin without
 * shrinking the scroll gutter, so nothing shifts when a scroller gains a thumb.
 * Chromium's default thumb is 15px; this leaves 4px of visible track.
 *
 * The track is transparent rather than a darker fill: every surface here is already
 * darker than the scrollbar would be, and a track stripe across a card reads as a
 * seam rather than as a control.
 *
 * `scrollbar-color` is the Firefox half and `scrollbar-width: thin` is the only knob
 * it offers, so the 4px comes from the webkit side. Firefox keeps the platform's own
 * thumb shape and ignores the radius -- a platform limit, not a choice here.
 *
 * `--switch-ease` lives in this block because both switches need the same spring and
 * there was no motion token for a control this small. Naming it here is what makes
 * the two demonstrably one curve rather than two that look similar.
 *
 * `.header-nav` is the one deliberate exception and is untouched: below 900px it sets
 * `scrollbar-width: none` and hides the pseudo-element outright, which is right for
 * a horizontal nav strip on a phone. A class selector outranks the `*` here, so the
 * two do not fight.
 */
:root {
  --scrollbar-size: 10px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, .09);
  --scrollbar-thumb-hover: rgba(255, 255, 255, .18);
  --scrollbar-thumb-active: rgba(255, 255, 255, .28);
  --switch-ease: cubic-bezier(.2, .7, .3, 1)
}
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) }
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size) }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--scrollbar-track) }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: var(--radius-pill)
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box }
::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-active); background-clip: content-box }

/*
 * A knob travelling across a track is motion, so it obeys the same reduced-motion
 * rule as everything else. Without this the switch is the one control on the page
 * that keeps animating for someone who asked the page to stop moving.
 */
@media (prefers-reduced-motion: reduce) {
  .channel-toggle, .channel-toggle i, #tab-tools .tool-toggle, #tab-tools .tool-toggle i {
    transition-duration: .01ms
  }
}


/* --- Tab headings: one style, on purpose ----------------------------------
 *
 * There were four, and the difference was visible side by side. `.tab-header h2`
 * was 18px/600. `.channels-tab-header h2` was 27px/650. Both `#tab-tools` and
 * `#tab-permissions` used `clamp(26px, 2.4vw, 36px)` — which is worse than just a
 * different number, because those two headings *changed size as the window was
 * dragged* while the other six stayed put. So the same product resized its own
 * titles depending on the monitor, and the only way to compare two tabs was to
 * open both.
 *
 * Five of the eight tabs were already 18px/600, so that is the one everything is
 * now. `.audit-head` carried `letter-spacing: -0.2px` and the rest did not, which is
 * why it is spelled out here rather than inherited.
 *
 * The overlines that sat above these titles — "AI CONTROL", "FORK CONTROL PLANE",
 * "SECURITY CONTROL PLANE", and Moderation's "Moderation > Ledger" breadcrumb — are
 * gone from the markup. Each repeated what the sidebar's active tab and the title
 * underneath already said, and three of the four were uppercase tracked-out labels
 * pretending to be a category. The in-panel labels (`moderation-detail-eyebrow`,
 * `permissions-selected-role-kicker`) are a different thing and stay: those name the
 * thing directly below them, not the tab.
 *
 * To change every tab title, edit this rule. The per-tab rules it replaces are
 * commented out rather than deleted, so the before is readable; anything that
 * re-declares a size here is a duplicate waiting to drift.
 */
.tab-heading {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin: 0 0 2px;
}

/* The sentence under the title, which varied between 12px, 12.5px and 13px. */
.tab-heading + p {
  margin: 0;
  max-width: 720px;
  color: var(--card-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* The product shot is a photograph of the dashboard, not a drawing of one.
 *
 * What this replaces was a hand-built fake: a div for a sidebar listing "Servers" and
 * "Analytics" -- two tabs the product does not have -- a welcome panel reading "Welcome
 * to Fork / A cleaner, safer, happier Discord", and four stat tiles that were empty
 * <i> elements with a gradient behind them. It was a picture of a dashboard that
 * existed only in that markup, drawn in `#126aff` and `#1481ff` while the product
 * itself had been moved off blue onto the neutral card surface.
 *
 * So replacing it removed a fabrication rather than adding a picture, and the numbers
 * in it are the real ones. The image is the real 2:1 frame at 1906x954; the intrinsic
 * width and height are declared so the grid row is reserved before the file arrives,
 * which is the difference between the section settling and the page jumping.
 *
 * `.feature-layout` is a two column grid, so this lands in the 1.1fr column at about
 * 668px wide and 334px tall -- close to the 263px the fake occupied, so the section
 * keeps its rhythm.
 */
.product-preview { margin: 0; }
.product-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--card-line);
  border-radius: 13px;
}