/* ============================================================
   FALLS — WORKSPACE STYLESHEET
   One workspace for your community. Arabic-first, RTL native.

   Layer order (tokens.css must load first):
     1. Base & reset
     2. Utilities
     3. Kit — buttons, fields, badges, banners
     4. Kit — surfaces, tables, states
     5. Login / showcase
     6. Workspace shell
     7. Records
     8. Panels, profiles, servers
     9. Channel controls
    10. Discord preview
    11. Status, maintenance, security
    12. Overlays — modals, palette, drawer, toasts, lightbox
    13. Verification (girls)
    14. Density, motion, responsive
   ============================================================ */

/* ============================================================
   1. BASE & RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { height: 100%; background: var(--bg-app); }
body {
  min-height: 100dvh;
  color: var(--text-primary);
  background: var(--bg-app);
  font: 450 var(--text-md)/var(--leading-normal) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: var(--control-disabled-opacity); }
/* A button rendered as a link cannot be disabled by the platform, so it declares the state itself:
   no pointer, no hover lift, and it stays reachable by keyboard. */
.btn[aria-disabled='true'], .sub-nav-btn[aria-disabled='true'], .preset-btn[aria-disabled='true'], .sidebar-btn[aria-disabled='true'] { cursor: not-allowed; opacity: var(--control-disabled-opacity); pointer-events: none; }
a { color: var(--accent-text); text-underline-offset: 3px; }
svg { flex-shrink: 0; vertical-align: middle; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); text-wrap: balance; letter-spacing: var(--tracking-tight); }
p { text-wrap: pretty; }
::selection { color: var(--accent-ink); background: var(--accent-primary); }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: var(--focus-ring-offset-inset); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-highlight); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; }
meter { accent-color: var(--accent-primary); }

/* ============================================================
   2. UTILITIES
   ============================================================ */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.relative { position: relative; }
.flex-1 { flex: 1; min-width: 0; }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-4); } .mt-4 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-4); } .mb-4 { margin-bottom: var(--space-6); }
.py-4 { padding-block: var(--space-6); } .py-6 { padding-block: var(--space-9); }
.w-full { width: 100%; }
.min-w-200 { min-width: 200px; }
.col-w-70 { width: 70px; } .col-w-80 { width: 80px; } .col-w-90 { width: 90px; } .col-w-120 { width: 120px; } .col-w-160 { width: 160px; } .col-w-220 { width: 220px; }
.col-num { text-align: end; font-variant-numeric: tabular-nums; }
.text-end { text-align: end; }
.stack-center { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.row-center { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-2); }
.truncate-260 { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-frame { width: 100%; max-height: 280px; border-radius: var(--radius-xs); }
.span-all { grid-column: 1 / -1; }
.text-center { text-align: center; } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); }
.text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-accent { color: var(--accent-text); }
.font-mono { font-family: var(--font-mono); } .font-bold { font-weight: 650; }

/* Layout helpers — replace the hand-written inline styles across the markup. */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row-between.wrap { flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--space-2); }
.row-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.cluster-sm { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.form-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.form-head > .section-label { margin-bottom: 0; }
.label-block { display: block; margin-bottom: var(--space-2); }
.hint-block { display: block; margin-top: var(--space-1); }
.rule { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-4) 0; }
.skip-link { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; padding: var(--space-3) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); box-shadow: var(--shadow-raised); z-index: var(--layer-toast); transform: translateY(-160%); transition: transform var(--dur-base) var(--ease-out); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { color: var(--text-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; }
.copyable { cursor: copy; border-radius: 3px; } .copyable:hover { color: var(--accent-text); }
kbd { display: inline-block; border: 1px solid var(--border-medium); border-radius: var(--radius-xs); padding: 2px 6px; font: var(--text-3xs)/1.4 var(--font-mono); color: var(--text-secondary); background: var(--bg-card-elevated); white-space: nowrap; }

/* Surfaces used to be written inline; they are primitives now. */
.inset-box { padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface-2); }
.surface-plain { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.rule-top { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }

/* ============================================================
   3. KIT — BUTTONS, FIELDS, BADGES, BANNERS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h-md); padding: var(--space-2) var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 650; text-decoration: none; line-height: 1.4;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline-offset: var(--focus-ring-offset-tight); }
.btn-primary { color: var(--accent-ink); background: var(--accent-primary); border-color: var(--accent-primary); box-shadow: var(--glow-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline { background: transparent; border-color: var(--border-medium); color: var(--text-secondary); }
.btn-outline:hover:not(:disabled), .btn-outline.active { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-highlight); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.btn-danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-strong); }
.btn-sm { min-height: var(--control-h-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn-xs { min-height: var(--control-h-xs); padding: var(--space-1) var(--space-2); font-size: var(--text-2xs); border-radius: var(--radius-xs); }
.btn-block { width: 100%; }
.btn-icon { min-height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0; }

/* The scripts already announce work with aria-busy on the submit button; until now nothing drew
   it, so a slow action looked like no action. */
.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: '';
  width: var(--control-spinner); height: var(--control-spinner);
  border-radius: 50%;
  border: var(--control-spinner-ring) solid color-mix(in srgb, currentColor 30%, transparent);
  border-block-start-color: currentColor;
  animation: control-spin var(--dur-slow) linear infinite;
}

.form-group { margin-bottom: var(--space-5); min-width: 0; }
.form-group label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 550; color: var(--text-primary); }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea {
  display: block; width: 100%; min-height: var(--control-h-md);
  border: 1px solid var(--border-medium); border-radius: var(--radius-sm);
  color: var(--text-primary); background: var(--bg-input);
  font-size: var(--text-sm); line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea { padding: var(--space-3); }
/* A select never takes a symmetric padding: its inline-end side belongs to the caret reserve below.
   script check-design-tokens.mjs enforces this, because a physical padding here silently puts the
   caret on top of the option text in RTL. */
select { padding-block: var(--space-3); padding-inline-start: var(--space-3); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--border-highlight); }
input:focus:not(:disabled), select:focus:not(:disabled), textarea:focus:not(:disabled) { border-color: var(--border-focus); box-shadow: var(--focus-ring-glow); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-primary); width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
input[type="color"] { width: 42px; height: 38px; border: 1px solid var(--border-medium); border-radius: var(--radius-xs); padding: 3px; background: transparent; }
textarea { resize: vertical; min-height: 90px; }
/* The caret is two gradient tiles placed side by side: the 45deg tile is the inner one and the
   135deg tile the outer one, and their filled halves meet to form the arrow. Mirroring the offsets
   for RTL without keeping that tile order still draws something caret-like, but as two wedges
   pointing apart - so the order is mirrored too, which the layout probe confirmed in pixels. */
select:not([multiple]) { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size: var(--control-caret) var(--control-caret); background-repeat: no-repeat; background-position: calc(100% - var(--control-caret-inset) - var(--control-caret)) 50%, calc(100% - var(--control-caret-inset)) 50%; padding-inline-end: var(--control-caret-reserve); text-overflow: ellipsis; }
[dir="rtl"] select:not([multiple]) { background-position: var(--control-caret-inset) 50%, calc(var(--control-caret-inset) + var(--control-caret)) 50%; }
/* A multi-select has no caret, so it must not reserve room for one. */
select[multiple] { padding-block: var(--space-2); padding-inline: var(--space-3); }
select[multiple] option { padding: var(--space-2) var(--space-3); }
/* The popup is drawn by the platform, so it needs its own colours or it can render light on light. */
option { color: var(--text-primary); background-color: var(--bg-surface); }
/* A gradient beats the platform highlight, which is the only way to recolour a chosen option. */
select[multiple] option:checked { color: var(--text-primary); background: linear-gradient(var(--accent-soft), var(--accent-soft)); }
/* Inline validation. The two rules are deliberately separate: a selector list containing one
   selector a browser cannot parse is dropped in full, and :user-invalid is younger than
   [aria-invalid], so listing them together would also lose the attribute case.
   Neither rule fights the component sheets for specificity. They republish the border and ring
   colours as the two tokens those sheets already read, and var() resolves on the element itself. */
[aria-invalid='true'] { --border-medium: var(--field-invalid-border); --focus-ring-color: var(--field-invalid-border); }
:user-invalid { --border-medium: var(--field-invalid-border); --focus-ring-color: var(--field-invalid-border); }
.field-message { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--field-message-gap); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--field-invalid-text); overflow-wrap: anywhere; }
.field-message[data-tone='hint'] { color: var(--field-hint-text); }
.field-message[hidden] { display: none; }
.field-message::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 6px; border-radius: var(--radius-pill); background: currentColor; }
.field-message[data-tone='hint']::before { display: none; }
.form-row { display: flex; gap: var(--space-4); align-items: flex-start; }
.form-help { display: block; margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }
.preset-row, .color-preset-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.preset-btn, .preset-chip { border: 1px solid var(--border-subtle); background: var(--bg-app); color: var(--text-secondary); border-radius: var(--radius-xs); padding: 6px 10px; font-size: var(--text-2xs); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.preset-btn:hover, .preset-chip:hover { color: var(--accent-text); background: var(--accent-soft); border-color: var(--border-medium); }

.banner { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-normal); border: 1px solid var(--border-medium); border-inline-start-width: 3px; border-radius: var(--radius-sm); margin-block: var(--space-3); overflow-wrap: anywhere; animation: surface-in var(--dur-base) var(--ease-out); }
.banner.error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.banner.success { background: var(--success-soft); border-color: var(--border-medium); border-inline-start-color: var(--success); color: var(--success); }
.banner.info { background: var(--bg-card-elevated); border-inline-start-color: var(--info); color: var(--text-secondary); }

.badge-mono, .user-id, .profile-snowflake, .server-id, .metric-val, .kpi-value { font-variant-numeric: tabular-nums; }
.badge-mono { color: var(--text-secondary); font-size: var(--text-2xs); white-space: nowrap; font-family: var(--font-mono); }
.action-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; color: var(--text-secondary); background: var(--bg-card-elevated); }
.action-badge::before { content: ''; width: var(--dot-size-sm); height: var(--dot-size-sm); border-radius: 50%; background: currentColor; }
.action-badge.warn, .action-badge.timeout { color: var(--warning); background: var(--warning-soft); }
.action-badge.mute { color: var(--text-secondary); background: var(--bg-card-elevated); }
.action-badge.kick, .action-badge.ban { color: var(--danger); background: var(--danger-soft); }
.action-badge.unmute, .action-badge.unban { color: var(--success); background: var(--success-soft); }

/* Status pill — one component for every "is this thing on?" indicator. */
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--bg-card-elevated); color: var(--text-secondary); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; }
.status-pill::before { content: ''; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-pill.is-ok { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.status-pill.is-warn { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.status-pill.is-bad { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.status-pill.is-idle { color: var(--text-muted); }
.status-pill.is-live::before { animation: pulse-ring 2.2s ease-out infinite; }

/* Announcement colour chips keep Discord's own palette on purpose. */
.color-chip { width: 28px; height: 28px; font-size: 0; overflow: hidden; border: 3px solid var(--bg-surface); outline: 1px solid var(--border-medium); border-radius: 50%; transition: transform var(--dur-fast) var(--ease-out); }
.color-chip:hover { transform: scale(1.14); }
.color-chip.active { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.chip-white { background-color: #ffffff; }
.chip-crimson { background-color: var(--discord-crimson); }
.chip-amber { background-color: var(--discord-amber); }
.chip-emerald { background-color: var(--discord-emerald); }
.chip-blue { background-color: var(--discord-blurple); }

/* ============================================================
   4. KIT — SURFACES, TABLES, STATES
   ============================================================ */
.panel-box { min-width: 0; padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.panel-header { padding-bottom: var(--space-5); margin-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.panel-header h3 { font-size: var(--text-lg); font-weight: 650; }
.panel-sub { display: block; margin-top: 6px; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); }

/* Consistent section header: eyebrow + title + description + actions. */
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.section-head h2 { font-size: var(--text-xl); font-weight: 650; }
.section-head p { margin-top: 6px; max-width: 62ch; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.section-head .section-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.section-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.section-intro h2 { font-size: var(--text-xl); font-weight: 600; }
.subtitle { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-2); line-height: var(--leading-normal); }
#tab-servers > .section-intro { display: none; }
#tab-security > .section-intro > div:first-child { display: none; }
#tab-security > .section-intro { justify-content: flex-end; margin-top: -14px; }

.table-container { overflow-x: auto; width: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); }
.stage-table { border-collapse: separate; border-spacing: 0; width: 100%; text-align: start; font-size: var(--text-sm); }
#cases-table { min-width: 880px; }
#cases-table.is-empty { min-width: 0; }
#cases-table.is-empty thead { display: none; }
.stage-table th { position: sticky; top: 0; z-index: var(--layer-base); padding: var(--space-3) var(--space-4); text-align: start; font-size: var(--text-xs); font-weight: 650; color: var(--text-secondary); background: var(--bg-card-elevated); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; letter-spacing: .01em; }
.stage-table td { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.stage-table tbody tr:last-child td { border-bottom: 0; }
.stage-table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
/* :hover alone leaves a keyboard user who has tabbed into a row action with no idea which row they
   are in, so a row reacts to focus as well. Each sheet keeps its own hover colour and gains the
   focus half beside it. */
.stage-table tbody tr:hover, .stage-table tbody tr:focus-within { background: var(--bg-hover); }
/* Figures line up column-wise instead of shifting with each digit's width. */
.stage-table, .af-table, .mod-table { font-variant-numeric: tabular-nums; }
.cell-user { display: flex; align-items: center; gap: var(--space-3); }
.avatar-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--bg-card-elevated); }
.user-tag { display: block; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.user-id { display: block; font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; }
.proof-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; color: var(--text-secondary); background: var(--bg-card-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-pill); font-size: var(--text-2xs); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.proof-pill:hover { background: var(--bg-hover); color: var(--text-primary); }
.pagination-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--text-2xs); color: var(--text-muted); }
/* The page number is the only thing that changes on a page turn, so it announces itself. */
.page-num[role='status'] { padding-inline: var(--space-2); border-radius: var(--radius-xs); }
.pagination-actions { display: flex; align-items: center; gap: var(--space-3); }
.page-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* Designed empty + loading states, shared by every list and table. */
.records-empty, .empty-state { display: flex; flex-direction: column; align-items: center; padding: var(--space-11) var(--space-5); color: var(--text-muted); text-align: center; }
.records-empty svg, .empty-state svg { color: var(--text-secondary); margin-bottom: var(--space-5); }
.records-empty h3, .empty-state h3 { font-size: var(--text-xl); font-weight: 600; color: var(--text-primary); }
.records-empty p, .empty-state p { margin-block: var(--space-2) var(--space-5); font-size: var(--text-sm); max-width: 42ch; line-height: var(--leading-normal); }
.records-loading { padding: var(--space-3) var(--space-2); }
.records-loading .skeleton-line { height: 20px; margin-block: var(--space-7); }
.skeleton-line { display: block; height: 10px; margin-block: var(--space-3); max-width: 90%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--bg-card-elevated) 0%, var(--bg-hover) 50%, var(--bg-card-elevated) 100%); background-size: 220% 100%; animation: skeleton-shimmer 1.8s var(--ease-in-out) infinite; }

/* ============================================================
   5. LOGIN — split showcase + credential card.

   The lock screen is this site's only landing surface, so it is held to landing-page rules that
   the rest of the workspace does not answer to: at most one eyebrow (here: none, because the
   headline and the credential card already say what the page is), one hero asset, no decoration
   strips, no captions, no numbering. The hero asset is panel artwork this repository renders
   itself, never a screenshot imitated out of divs.
   ============================================================ */
.login-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100dvh; max-width: 1680px; margin: auto; padding: var(--space-6); gap: var(--space-6); }
.login-showcase {
  /* Local tokens keep the lime hero consistent in both themes. */
  --showcase-ink: var(--accent-ink);
  --showcase-muted: color-mix(in srgb, var(--accent-ink) 74%, transparent);
  display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 720px;
  padding: var(--space-8) var(--space-9) var(--space-10);
  background: var(--accent-primary); color: var(--showcase-ink); border-radius: var(--radius-lg);
}
.login-showcase::after { content: ''; position: absolute; inset-block-start: -30%; inset-inline-end: -12%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff5c, transparent 68%); pointer-events: none; }
.showcase-top, .login-topline, .login-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; font: 750 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-tight); text-decoration: none; direction: ltr; }
.falls-mark { color: var(--accent-text); }
.wordmark-period { color: currentColor; }
.login-showcase .falls-mark { color: currentColor; }
.showcase-copy { padding-block: clamp(32px, 4.2dvh, 54px) 0; position: relative; }
.showcase-copy h1 { margin-block: 0 var(--space-5); font: 750 var(--text-5xl)/1.06 var(--font-display); letter-spacing: var(--tracking-display); }
[lang="ar"] .showcase-copy h1 { line-height: 1.3; letter-spacing: 0; }
.hero-accent { color: color-mix(in srgb, var(--accent-ink) 76%, transparent); }
.showcase-copy p { max-width: 46ch; color: var(--showcase-muted); font-size: var(--text-md); line-height: var(--leading-loose); }
/* The asset keeps the offset-shadow and tilt the hero already spoke, so the real artwork sits in
   the composition instead of being pasted on top of it. */
.showcase-art { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 220px; margin: 0; padding-top: var(--space-7); }
.showcase-shot { display: block; width: 100%; max-width: 640px; height: auto; border: 1px solid var(--border-inverse); border-radius: var(--radius-md); box-shadow: 8px 10px 0 color-mix(in srgb, var(--accent-ink) 14%, transparent); transform: rotate(-2deg); }
[dir="rtl"] .showcase-shot { transform: rotate(2deg); }
/* Motion with a reason: the hero introduces itself once, in reading order (brand, headline,
   subtext, asset). Transform and opacity only, and nothing at all when motion is unwanted. */
@media (prefers-reduced-motion: no-preference) {
  .showcase-top, .showcase-copy > *, .showcase-art { animation: hero-rise var(--dur-slow) var(--ease-out) both; }
  .showcase-copy > *:first-child { animation-delay: 90ms; }
  .showcase-copy > *:last-child { animation-delay: 160ms; }
  .showcase-art { animation-delay: 230ms; }
  .login-card { animation-delay: 140ms; }
}
.login-form-stage { display: flex; flex-direction: column; padding: var(--space-2) var(--space-9); min-width: 0; }
.login-topline { color: var(--text-muted); font-size: var(--text-sm); }
.login-card { width: 100%; max-width: 390px; margin: auto; padding-block: var(--space-11); animation: surface-in var(--dur-slow) var(--ease-out) both; }
.login-emblem { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: var(--space-7); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--accent-text); background: var(--bg-card); box-shadow: var(--shadow-card); }
.login-title { font-size: var(--text-4xl); font-weight: 700; }
.login-subtitle { margin-block: var(--space-3) var(--space-8); color: var(--text-secondary); font-size: var(--text-md); }
.login-foot { margin-top: var(--space-6); text-align: center; color: var(--text-muted); font-size: var(--text-xs); }
.login-footer { font-size: var(--text-2xs); color: var(--text-muted); flex-wrap: wrap; }
.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.legal-links a { display: inline-block; padding-block: var(--space-1); color: var(--text-secondary); text-decoration: none; }
.legal-links a:hover { color: var(--accent-text); }
.sidebar-legal-links { margin-top: var(--space-3); font-size: var(--text-2xs); }
.sidebar-legal-links a { color: var(--text-muted); text-decoration: none; }
.sidebar-legal-links a:hover { color: var(--accent-text); }
.login-card .form-group { margin-bottom: var(--space-5); }
.login-card input { min-height: var(--control-h-lg); background: var(--bg-input); border-color: var(--border-medium); }
.login-card .btn-primary { min-height: var(--control-h-lg); margin-top: var(--space-6); }
.password-field { position: relative; }
.password-field input { padding-inline-end: 52px; }
.password-toggle { position: absolute; inset-inline-end: 4px; inset-block: 4px; width: 42px; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-xs); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.password-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.password-toggle[aria-pressed="true"] { color: var(--accent-text); }

/* ============================================================
   6. WORKSPACE SHELL — sidebar rail + floating main stage.
   ============================================================ */
.app-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); height: 100dvh; padding: var(--space-3) var(--space-3) var(--space-3) 0; overflow: hidden; }
[dir="rtl"] .app-layout { padding: var(--space-3) 0 var(--space-3) var(--space-3); }
.app-sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-sidebar); color: var(--text-secondary); padding: var(--space-5) var(--space-3) var(--space-3); overflow-y: auto; scrollbar-width: thin; }
.sidebar-header { padding: 0 var(--space-3) var(--space-6); }
.brand-row { display: flex; align-items: center; gap: var(--space-2); }
.brand-title { font: 750 var(--text-2xl)/1 var(--font-display); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
.brand-meta { font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-2); padding-inline-start: 40px; }
.telemetry-box { order: 3; margin: auto var(--rail-inset) var(--space-4); padding: var(--space-3); border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-md); }
.telemetry-status-row, .telemetry-details { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.status-indicator { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); }
.pulse-dot { display: inline-block; width: var(--dot-size); height: var(--dot-size); background: var(--warning); border-radius: 50%; flex-shrink: 0; }
.pulse-dot.online { background: var(--success); animation: pulse-ring 2.2s ease-out infinite; }
.telemetry-ping { color: var(--text-secondary); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.telemetry-details { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-3xs); }
.sidebar-section { margin: 0 var(--rail-inset) var(--space-6); }
.section-label, .nav-section-label { display: block; font-size: var(--text-2xs); color: var(--text-muted); font-weight: 600; }
.section-label { margin-bottom: var(--space-2); }
.app-sidebar > .nav-section-label { padding: 0 var(--space-3); margin-bottom: var(--space-2); }
.sidebar-nav .nav-section-label { margin: var(--space-6) var(--space-3) 6px; }
.sidebar-nav > .nav-section-label:first-child { margin-top: 0; }
.sidebar-select { width: 100%; }
.app-sidebar .sidebar-select { color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-medium); min-height: var(--tap-target); padding-inline-start: var(--space-3); font-size: var(--text-sm); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-6); }
.nav-item { position: relative; display: flex; align-items: center; width: 100%; gap: var(--space-3); padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); text-align: start; min-height: var(--nav-item-height); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nav-item::before { content: ''; position: absolute; inset-inline-start: calc(var(--rail-inset) * -2); inset-block: 9px; width: var(--nav-indicator-width); border-radius: var(--radius-pill); background: var(--accent-indicator); transform: scaleY(0); transform-origin: center; transition: transform var(--dur-base) var(--ease-out); }
.nav-item:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-item.active { color: var(--accent-ink); background: var(--accent-primary); font-weight: 650; }
.nav-item.active::before { transform: scaleY(0); }
.nav-item:active { transform: scale(.985); }
.nav-icon { width: 17px; height: 17px; opacity: .82; stroke-width: 1.6; }
.nav-item.active .nav-icon { color: inherit; opacity: 1; }
.nav-label { flex: 1; font-size: var(--text-sm); font-weight: 550; }
.nav-badge { min-width: 22px; padding: 1px 5px; border-radius: var(--radius-xs); color: var(--text-secondary); background: var(--bg-hover); font-size: var(--text-2xs); text-align: center; font-variant-numeric: tabular-nums; }
.nav-item.active .nav-badge { background: color-mix(in srgb, var(--accent-ink) 12%, transparent); color: var(--accent-ink); }
.live-tag { font-size: var(--text-3xs); color: var(--success); font-weight: 650; }
.nav-item.active .live-tag { color: inherit; }
.nav-item[data-tab="intel"] .live-tag { display: none; }
.sidebar-footer { order: 4; margin: 0 var(--rail-inset); border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
.operator-info { display: flex; align-items: center; gap: var(--space-2); }
.operator-avatar { display: grid; place-items: center; width: 36px; height: 36px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 650; }
.operator-meta { display: flex; flex-direction: column; min-width: 0; }
.op-label { font-size: var(--text-3xs); color: var(--text-muted); }
.op-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.operator-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.sidebar-btn { flex: 1; border: 1px solid var(--border-subtle); color: var(--text-secondary); background: transparent; border-radius: var(--radius-xs); min-height: var(--control-h-sm); font-size: var(--text-2xs); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.sidebar-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-medium); }
/* The tactile half of the state contract, for every family that reads as a button but is not
   .btn: a press moves, so the control answers the pointer that pressed it. */
.sidebar-btn:active, .preset-btn:active, .preset-chip:active, .proof-pill:active { transform: translateY(1px); }
.btn-logout:hover { color: var(--danger); border-color: var(--danger-border); }
.app-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg-shell); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.stage-bar { display: flex; align-items: center; gap: var(--space-5); flex-shrink: 0; min-height: var(--shell-bar-height); padding: var(--space-3) var(--space-8); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.stage-left-cluster { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.stage-path { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-xs); white-space: nowrap; }
.path-root, .path-sep { color: var(--text-muted); }
.path-current { color: var(--text-primary); font-weight: 550; }
.stage-center { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.palette-trigger { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-muted); font-size: var(--text-xs); padding: var(--space-2) var(--space-3); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.palette-trigger:hover { color: var(--accent-text); border-color: var(--border-medium); }
.palette-kbd { margin-inline-start: var(--space-2); }
.stage-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.stage-bar .stage-actions { flex-wrap: nowrap; }
.stage-bar .btn { font-size: var(--text-xs); min-height: var(--control-h-sm); padding-inline: var(--space-3); }
.stage-bar #btn-stage-refresh { border: 0; background: transparent; color: var(--text-secondary); }
.density-icon { margin-inline-end: 5px; }
.theme-toggle-btn { min-width: 40px; }
.theme-toggle-btn .theme-icon { display: none; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-moon { display: inline-block; }
html[data-theme="light"] .theme-toggle-btn .theme-icon-sun { display: inline-block; }
html[data-theme="light"] .theme-toggle-btn .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-sun { display: none; }
.stage-content { flex: 1; min-height: 0; padding: var(--space-8) var(--space-8) var(--space-10); overflow: auto; scrollbar-gutter: stable; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-7); }
.workspace-eyebrow { margin-bottom: 6px; }
.workspace-heading h1 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; }
.workspace-heading p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.workspace-date { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; }
.date-icon { font-size: var(--text-lg); color: var(--accent-text); }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: pane-in var(--dur-base) var(--ease-out); }
.mobile-menu-toggle, .sidebar-close-btn, .sidebar-backdrop { display: none; }
.hamburger-bar { width: 14px; height: 1px; background: var(--text-primary); }

/* ============================================================
   7. RECORDS — KPI strip, toolbar, pagination.
   ============================================================ */
.kpi-strip { display: grid; grid-template-columns: 1.2fr repeat(5, minmax(0, 1fr)); gap: 0; margin-bottom: var(--space-8); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; box-shadow: var(--shadow-card); }
.kpi-card { display: flex; flex-direction: column; align-items: flex-start; position: relative; padding: var(--space-5); min-width: 0; border: 0; border-inline-end: 1px solid var(--border-subtle); border-radius: 0; background: transparent; color: var(--text-primary); text-align: start; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.kpi-card:last-child { border-inline-end: 0; }
button.kpi-card:hover { background: var(--bg-card-elevated); }
button.kpi-card.active { background: var(--bg-active); box-shadow: inset 0 -3px var(--accent-indicator); }
.kpi-card[data-action="ALL"].active { color: var(--accent-text); }
.kpi-card[data-action="ALL"].active .kpi-label { color: var(--accent-text); }
.kpi-label { font-size: var(--text-xs); font-weight: 550; color: var(--text-secondary); line-height: 1.5; }
.kpi-value { margin-top: var(--space-4); font: 650 var(--text-3xl)/1.1 var(--font-display); letter-spacing: var(--tracking-tight); }
.kpi-meta { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-2xs); }
.records-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-4); }
.records-heading h2 { font-size: var(--text-lg); font-weight: 650; }
.records-heading p { font-size: var(--text-xs); color: var(--text-muted); margin-top: 5px; }
.records-label { font-size: var(--text-2xs); color: var(--text-muted); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); }
.toolbar-search { position: relative; flex: 1 1 260px; max-width: 450px; }
.toolbar-search > svg { position: absolute; inset-inline-start: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.toolbar-search input { padding-inline-start: 38px !important; font-size: var(--text-sm) !important; min-height: 39px !important; background: var(--bg-input) !important; }
.toolbar-filters { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* These set the inline-start padding only. The inline-end side belongs to the base rule, which
   reserves exactly the caret's width; overriding it with physical padding is what pushed the
   caret into the option text in RTL, where the reserve landed on the wrong side. */
select.filter-select { width: auto; min-height: var(--control-h-sm); padding-block: var(--space-2); padding-inline-start: var(--space-3); font-size: var(--text-2xs); background-color: transparent; }
select.filter-select, select.filter-select:hover { background-color: transparent; }
select.select-tight { padding-block: var(--space-1); padding-inline-start: var(--space-2); font-size: var(--text-xs); min-height: var(--control-h-xs); }
.filter-checkbox-label { display: inline-flex !important; align-items: center; gap: 7px; font-size: var(--text-2xs) !important; color: var(--text-secondary) !important; margin-bottom: 0 !important; cursor: pointer; }
.toolbar-divider { height: 20px; width: 1px; background: var(--border-medium); margin-inline: 3px; }

/* ============================================================
   8. PANELS, PROFILES, SERVER CARDS
   ============================================================ */
.dispatch-grid, .broadcast-grid, .system-actions-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.profile-stage { min-height: 380px; }
.profile-stage.empty { display: grid; place-items: center; text-align: center; padding: var(--space-8) var(--space-4); }
.placeholder-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--space-5); border: 1px solid var(--border-medium); background: var(--bg-card-elevated); color: var(--text-secondary); font-size: var(--text-2xl); border-radius: var(--radius-lg); }
.placeholder-title { font: 550 var(--text-xl)/1.5 var(--font-display); color: var(--text-primary); }
.placeholder-desc { max-width: 42ch; margin: var(--space-2) auto 0; font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--text-muted); }
.profile-hero, .dossier-head, .server-head { display: flex; align-items: center; gap: var(--space-4); }
.profile-avatar-lg, .dossier-avatar-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-card-elevated); }
.profile-meta-main h4 { font-size: var(--text-xl); font-weight: 600; overflow-wrap: anywhere; }
.profile-snowflake { font-size: var(--text-2xs); color: var(--text-muted); }
.profile-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-block: var(--space-5); }
.profile-stat-box, .dossier-stat-box { background: var(--bg-card-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-4); min-width: 0; }
.profile-stat-label, .dossier-stat-key { display: block; font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: .02em; }
.profile-stat-val, .dossier-stat-val { display: block; margin-top: var(--space-2); color: var(--text-primary); font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.profile-roles-section { margin-block: var(--space-5); }
.profile-roles-title { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.roles-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.role-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border-medium); border-radius: var(--radius-pill); background: var(--bg-surface); font-size: var(--text-xs); color: var(--text-secondary); }
.role-color-dot { width: 6px; height: 6px; border-radius: 50%; }
.role-remove-btn { border: 0; background: transparent; color: var(--text-muted); font-size: var(--text-lg); min-width: 22px; line-height: 1; border-radius: var(--radius-xs); }
.role-remove-btn:hover { color: var(--danger); }
.intel-search-row { display: flex; align-items: flex-end; gap: var(--space-4); }
.intel-search-btn-wrap { align-self: flex-end; }
.intel-search-btn-wrap label { display: none; }
.autocomplete-dropdown { position: absolute; top: calc(100% + 4px); inset-inline: 0; background: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); max-height: 300px; overflow-y: auto; z-index: var(--layer-nav); animation: surface-in var(--dur-fast) var(--ease-out); }
.autocomplete-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--bg-hover); }
.sub-nav-bar, .config-subnav { display: flex; gap: 6px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; }
.sub-nav-bar::-webkit-scrollbar, .config-subnav::-webkit-scrollbar { display: none; }
.sub-nav-btn, .config-tab-btn { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: 550; padding: var(--space-3) var(--space-4); white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.sub-nav-btn:hover, .config-tab-btn:hover { color: var(--text-primary); }
/* Both the class and the ARIA state select the same look, so the two can never drift apart. */
.sub-nav-btn.active, .config-tab-btn.active,
.sub-nav-btn[aria-selected='true'], .config-tab-btn[aria-selected='true'] { color: var(--accent-text); border-bottom-color: var(--accent-indicator); }
.dossier-title-row, .dossier-ids, .dossier-quick-actions, .quick-action-btns { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dossier-title-row h3 { font-size: var(--text-2xl); }
.dossier-ids { font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-2); }
.dossier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.dossier-quick-actions { padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); }
.intel-subpane { min-width: 0; }
.jump-link { margin-inline-start: auto; font-size: var(--text-2xs); }
.servers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.server-card { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.server-card:hover { transform: translateY(-2px); border-color: var(--border-medium); box-shadow: var(--shadow-raised); }
.server-icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--bg-card-elevated); object-fit: cover; }
.server-name { font-size: var(--text-lg); font-weight: 600; overflow-wrap: anywhere; }
.server-id { font-size: var(--text-2xs); color: var(--text-muted); }
.server-info-list { border-top: 1px solid var(--border-subtle); margin-top: var(--space-5); padding-top: var(--space-4); }
.server-info-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); margin-bottom: var(--space-2); }
.server-info-row span { color: var(--text-muted); }
.server-info-row strong { color: var(--text-primary); font-weight: 550; }

/* ============================================================
   9. CHANNEL CONTROLS — direct Discord channel management.
   ============================================================ */
.channel-controls { margin-top: var(--space-7); }
.cc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.cc-target-row { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.cc-target-row .form-group { margin-bottom: 0; }
.cc-state-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 650; background: var(--bg-card-elevated); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.cc-state-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.cc-state-badge.cc-open { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.cc-state-badge.cc-open::before { background: var(--success); }
.cc-state-badge.cc-locked { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.cc-state-badge.cc-locked::before { background: var(--danger); }
.cc-state-badge.cc-slow { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.cc-state-badge.cc-slow::before { background: var(--warning); }
.cc-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cc-lift { display: flex; flex-direction: column; gap: var(--space-4); }
.cc-lift-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.cc-lift-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-lift-row strong { font-size: var(--text-sm); }
.cc-lift-row p { color: var(--text-muted); font-size: var(--text-xs); margin-top: 3px; }

/* ============================================================
   10. DISCORD PREVIEW (intentionally Discord-dark in both themes)
   ============================================================ */
.discord-chat-preview { background: var(--discord-chat-bg); color: var(--discord-text); padding: var(--space-5); border-radius: var(--radius-md); min-height: 320px; direction: ltr; text-align: left; }
.discord-message { display: flex; gap: var(--space-3); }
.discord-avatar { width: 38px; height: 38px; background: var(--discord-blurple); border-radius: 50%; }
.discord-body { flex: 1; min-width: 0; }
.discord-header { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: var(--space-2); }
.discord-bot-name { font-size: var(--text-base); color: var(--discord-text-bright); font-weight: 600; }
.discord-bot-badge { padding: 1px 4px; font-size: var(--text-3xs); background: var(--discord-blurple); color: #fff; border-radius: 3px; }
.discord-timestamp, .discord-embed-footer { color: var(--discord-text-muted); font-size: var(--text-2xs); }
.discord-embed { position: relative; background: var(--discord-embed-bg); border-radius: 6px; overflow: hidden; }
.discord-embed-strip { position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--discord-embed-strip); }
.discord-embed-content { padding: var(--space-4); }
.discord-embed-title { font-size: var(--text-md); color: #fff; font-weight: 600; margin-bottom: var(--space-2); }
.discord-embed-body { color: var(--discord-text); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.discord-embed-footer { margin-top: var(--space-3); }
.discord-mention-tag { display: inline-block; color: var(--discord-mention-ink); background: var(--discord-mention-bg); padding: 1px 4px; border-radius: 3px; font-size: var(--text-sm); }
.discord-embed-banner, .discord-embed-thumb { border-radius: 4px; }
.discord-embed-header-wrap { display: flex; align-items: center; gap: var(--space-2); }

/* ============================================================
   11. STATUS, MAINTENANCE, SECURITY EXTRAS
   ============================================================ */
.system-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.metric-card { padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.metric-card:hover { transform: translateY(-2px); border-color: var(--border-medium); }
.metric-label { font-size: var(--text-xs); color: var(--text-secondary); }
.metric-val { font: 650 var(--text-3xl)/1.2 var(--font-display); margin-top: var(--space-4); letter-spacing: var(--tracking-tight); }
.metric-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.maintenance-actions { display: flex; flex-direction: column; gap: var(--space-4); }
.maint-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.maint-row:last-child { border: 0; padding-bottom: 0; }
.maint-row strong { font-size: var(--text-sm); }
#tab-security > .kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sec-preset-btn.active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--border-medium); }
#tab-security .kpi-value { font-size: var(--text-2xl); }
#tab-security .stage-table { min-width: 450px; }
.vt-scanner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.vt-input-wrap, .vt-upload-wrap { min-width: 0; }
.vt-result-card { padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); }
.vt-result-header, .vt-stats-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.vt-threat-title { font-size: var(--text-lg); font-weight: 600; }
.vt-ratio-box, .vt-hash-box, .vt-link-box { flex: 1; min-width: 0; }
.vt-ratio-val { font-size: var(--text-2xl); }
.vt-hash-val { overflow-wrap: anywhere; font-size: var(--text-xs); font-family: var(--font-mono); }
.vt-engines-grid, .nsfw-bars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.vt-engine-card { padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.vt-engine-name { font-size: var(--text-xs); }
.vt-engine-status { font-size: var(--text-2xs); }
.vt-engine-clean, .vt-badge-clean { color: var(--success); }
.vt-engine-malicious, .vt-badge-malicious { color: var(--danger); }
.vt-badge-suspicious { color: var(--warning); }
.vt-badge { border: 1px solid currentColor; padding: 3px 8px; border-radius: var(--radius-pill); font-size: var(--text-2xs); }

/* ============================================================
   12. OVERLAYS — modals, palette, drawers, toasts, lightbox
   ============================================================ */
dialog { color: var(--text-primary); font: inherit; }
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
/* An open modal or drawer owns the viewport. The platform makes the page behind inert for pointer
   and keyboard, but it still scrolls, so the page and the workspace scroller are locked here. The
   dialog keeps its own scrolling, and scrollbar-gutter keeps the lock from shifting the layout. */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
html:has(dialog[open]) .stage-content { overflow: hidden; }
.mobile-navigation { inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; width: 268px; max-width: 90vw; height: 100dvh; max-height: none; padding: 0; margin: 0; border: 0; background: var(--bg-sidebar); }
.mobile-navigation .app-sidebar { position: static; width: 100%; transform: none; visibility: visible; }
#sidebar-backdrop { display: none !important; }
.modal-overlay, .palette-overlay { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; background: transparent; padding: var(--space-7); margin: 0; overflow-y: auto; z-index: var(--layer-modal); }
.modal-overlay[open] { display: grid; place-items: center; }
.palette-overlay[open] { display: flex; align-items: flex-start; justify-content: center; padding-top: 15dvh; }
.modal-card, .palette-card { width: min(100%, 640px); background: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); animation: pop-in var(--dur-base) var(--ease-out); overflow: hidden; }
.modal-card.modal-sm { width: min(100%, 460px); }
.modal-card.modal-lg { width: min(100%, 1000px); max-height: calc(100dvh - 56px); display: flex; flex-direction: column; }
/* flex-shrink: 0 keeps the header from being squeezed by a tall body in the column layout. */
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-shrink: 0; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.modal-header h3 { font-size: var(--text-lg); font-weight: 600; }
.modal-close, .drawer-close { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); border-radius: var(--radius-xs); font-size: var(--text-2xl); line-height: 1; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.modal-close:hover, .drawer-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-close:active, .drawer-close:active { background: var(--bg-active); }
/* The close button is the only way out of a modal, so on a touch device it takes a full tap target. */
@media (pointer: coarse) { .modal-close, .drawer-close, .lightbox-close { width: var(--tap-target); height: var(--tap-target); } }
.modal-body { padding: var(--space-6); overflow-y: auto; }
.modal-actions, .modal-actions-grid { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
/* A tall modal scrolls its body, which used to carry the primary action out of reach. In the
   scrollable layout the action row rides the bottom edge, so it is reachable without scrolling
   to the end. The negative offsets cancel the body padding so it spans the full card width. */
.modal-card.modal-lg > .modal-body > .modal-actions,
.modal-card.modal-lg > .modal-body > .modal-actions-grid { position: sticky; inset-block-end: calc(var(--space-6) * -1); margin-block-start: var(--space-5); margin-inline: calc(var(--space-6) * -1); padding: var(--space-4) var(--space-6); background: var(--bg-surface); border-top: 1px solid var(--border-subtle); }
.config-subnav { flex-shrink: 0; padding-inline: var(--space-3); }
.config-tab-btn { font-size: var(--text-xs); }
.cfg-pane { min-width: 0; }
.shortcuts-list { display: flex; flex-direction: column; gap: var(--space-2); }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.palette-input-box { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.palette-prompt { color: var(--accent-text); font-size: var(--text-2xl); }
.palette-input-box input { border: 0 !important; font-size: var(--text-md) !important; background: transparent !important; box-shadow: none !important; }
.palette-results { max-height: 53dvh; overflow-y: auto; padding: var(--space-3); }
.palette-group-title { padding: var(--space-3); font-size: var(--text-2xs); color: var(--text-muted); }
.palette-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius-sm); text-align: start; background: transparent; font-size: var(--text-sm); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.palette-item.active, .palette-item:hover { background: var(--bg-active); color: var(--accent-text); }
.palette-item-text { display: flex; align-items: center; gap: var(--space-3); }
.palette-glyph { color: var(--text-muted); font-size: var(--text-xs); }
.palette-empty { padding: var(--space-7); text-align: center; color: var(--text-muted); font-size: var(--text-sm); }
.drawer-backdrop { display: none !important; }
.slide-drawer { position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; margin: 0; width: 520px; max-width: 100%; height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--bg-surface); box-shadow: var(--shadow-modal); z-index: var(--layer-drawer); }
.slide-drawer[open] { display: flex; flex-direction: column; animation: drawer-in var(--dur-base) var(--ease-out); }
.drawer-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--border-subtle); }
.drawer-badge { font-size: var(--text-xs); color: var(--accent-text); }
.drawer-title { font-size: var(--text-2xl); margin-top: 6px; }
.drawer-content { overflow-y: auto; padding: var(--space-7); }
.evidence-stage { position: relative; display: grid; place-items: center; background: var(--bg-card-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); min-height: 200px; margin-bottom: var(--space-5); overflow: hidden; }
.evidence-img { max-height: 360px; cursor: zoom-in; }
.evidence-video { width: 100%; max-height: 360px; }
.no-proof-box { color: var(--text-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-7); }
.drawer-details-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 4px var(--space-4); }
.detail-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.detail-row:last-child { border: 0; }
.detail-key { font-size: var(--text-2xs); color: var(--text-muted); }
.detail-val { font-size: var(--text-xs); text-align: end; overflow-wrap: anywhere; }
.drawer-actions-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* The drawer action row deliberately does NOT get the same treatment. It sits inside the edit form
   rather than directly in the scroller, so its containing block ends at the row itself and there is
   no room to hold it down: measured at every scroll position it lands exactly where it would
   without the rule. The row is the last thing in the drawer, which is an ordinary place for a save
   button, so nothing here pretends otherwise. Moving it out of the form would mean a form attribute
   on the submit button and a different structure for a layout that already works. */
.toast-container { position: fixed; inset-block-end: max(var(--space-6), env(safe-area-inset-bottom)); inset-inline-end: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); max-width: min(390px, calc(100vw - 40px)); max-height: calc(100dvh - 2 * var(--space-6)); overflow-y: auto; z-index: var(--layer-toast); pointer-events: none; }
/* A toast carries its own dismiss control and must not vanish mid-sentence, so it takes pointer
   events (the container stays click-through) and the script pauses its timer while it is hovered
   or holds focus. --toast-exit-x lets one keyframe leave in the reading direction. */
.toast { --toast-exit-x: 20px; display: flex; align-items: flex-start; gap: var(--space-3); pointer-events: auto; background: var(--bg-surface); border: 1px solid var(--border-medium); border-inline-start: 3px solid var(--info); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-modal); font-size: var(--text-sm); line-height: var(--leading-snug); animation: toast-in var(--dur-base) var(--ease-out); }
html[dir='rtl'] .toast { --toast-exit-x: -20px; }
/* Status is spelled out as well as coloured, so it never rests on hue alone. */
.toast-glyph { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 700; color: var(--bg-surface); background: var(--info); }
.toast-text { min-width: 0; overflow-wrap: anywhere; }
.toast-dismiss { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin-block: -2px; margin-inline-end: -4px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); font-size: var(--text-lg); line-height: 1; }
.toast-dismiss:hover { background: var(--bg-hover); color: var(--text-primary); }
.toast.error { border-inline-start-color: var(--danger); }
.toast.error .toast-glyph { background: var(--danger); }
.toast.success { border-inline-start-color: var(--success); }
.toast.success .toast-glyph { background: var(--success); }
.toast.warning { border-inline-start-color: var(--warning); }
.toast.warning .toast-glyph { background: var(--warning); }
/* Shape as well as hue: the two failure tones share an attention glyph, so a failure badge is a
   rounded square while a warning badge stays round. */
.toast.error .toast-glyph { border-radius: var(--radius-xs); }
.toast.is-leaving { animation: toast-out var(--dur-fast) var(--ease-out) forwards; }
.copy-tooltip { position: fixed; pointer-events: none; z-index: var(--layer-toast); padding: 5px 10px; border-radius: var(--radius-xs); background: var(--accent-primary); color: var(--accent-ink); font-size: var(--text-2xs); font-weight: 600; animation: surface-in var(--dur-fast) var(--ease-out); }
#modal-lightbox { z-index: var(--layer-lightbox) !important; }
.lightbox-frame { position: relative; display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 90vh; }
.lightbox-close { position: absolute; inset-block-start: -44px; inset-inline-end: 0; color: var(--text-primary); border-color: var(--border-medium); }
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--border-medium); background: var(--bg-surface); }

/* ============================================================
   13. VERIFICATION (girls) — same surfaces as the rest of Falls.
   ============================================================ */
.stage-content:has(#tab-girls.active) > .workspace-heading { display: none; }
.girls-hero { display: block; padding: var(--space-7); margin-bottom: var(--space-6); border: 1px solid var(--border-subtle); border-inline-start: 3px solid var(--accent-indicator); border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--shadow-card); }
.girls-hero h2 { margin-top: var(--space-2); font-size: clamp(28px, 3vw, 34px); font-weight: 700; }
.girls-hero .subtitle { max-width: 68ch; line-height: var(--leading-loose); }
.girls-art { display: none; }
.girls-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.girls-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-6); }
.girls-kpi-detail { font-size: var(--text-lg); line-height: 1.65; overflow-wrap: anywhere; }
.girls-toolbar .sub-nav-bar { flex-shrink: 0; }
.girls-toolbar .toolbar-search { flex: 1 1 240px; }
.girls-rank { display: inline-block; min-width: 34px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.girls-rank-leading { color: var(--accent-text); }
.girls-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--bg-active); color: var(--accent-text); font-size: var(--text-base); font-weight: 650; }
.girls-contribution { display: flex; align-items: center; gap: var(--space-2); min-width: 130px; font-variant-numeric: tabular-nums; }
.girls-contribution meter { appearance: none; width: 90px; height: 6px; border: 0; border-radius: var(--radius-pill); background: var(--bg-hover); }
.girls-contribution meter::-webkit-meter-bar { height: 6px; border: 0; background: var(--bg-hover); }
.girls-contribution meter::-webkit-meter-optimum-value { background: var(--accent-primary); }
.girls-contribution meter::-moz-meter-bar { background: var(--accent-primary); }
#tab-girls .stage-table td, #modal-girls-dossier .stage-table td { font-size: var(--text-sm); }
#tab-girls .user-tag, #modal-girls-dossier .user-tag { white-space: normal; overflow-wrap: anywhere; min-width: 110px; max-width: 230px; }
.girls-config-group { border: 0; border-top: 1px solid var(--border-subtle); padding: var(--space-5) 0 var(--space-2); margin-top: var(--space-5); min-width: 0; }
.girls-config-group legend { padding-inline-end: var(--space-3); font-size: var(--text-lg); font-weight: 650; color: var(--accent-text); }
.girls-field-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.girls-field-heading label { margin-bottom: 0; }
.girls-toggle { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); cursor: pointer; font-size: var(--text-base); }
.girls-send-row { display: flex; gap: var(--space-3); }
.girls-send-row select { flex: 1; min-width: 0; }
.voice-channels-selector { padding: var(--space-2); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); background: var(--bg-input); max-height: 180px; overflow: auto; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.voice-channels-selector:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring-glow); }
.voice-channels-selector label { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-base); cursor: pointer; border-radius: var(--radius-xs); transition: background-color var(--dur-fast) var(--ease-out); }
.voice-channels-selector label:hover { background: var(--bg-hover); }
.voice-channels-selector label:has(input:checked) { background: var(--accent-soft); }
.voice-channels-selector label:has(input:disabled) { cursor: not-allowed; opacity: var(--control-disabled-opacity); }
.selection-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
/* display:flex on the class would otherwise beat the platform's [hidden] rule. */
.selection-toolbar[hidden] { display: none; }
.selection-count { margin-inline-end: auto; color: var(--text-muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.girls-dossier-records { max-height: 360px; overflow: auto; }
#modal-girls-dossier .modal-header .cell-user { min-width: 0; }
#girls-dossier-title { font-size: var(--text-xl); overflow-wrap: anywhere; }
#girls-dossier-id { direction: ltr; display: block; }

/* ============================================================
   14. FORENSICS, LOG INSPECTOR, ANNOUNCEMENT STUDIO
   Three surfaces that earn their own composition instead of the
   shared table and card grid.
   ============================================================ */

/* --- Message forensics: a signal timeline ------------------------- */
.fx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; box-shadow: var(--shadow-card); }
.fx-stat { padding: var(--space-4) var(--space-5); border-inline-end: 1px solid var(--border-subtle); min-width: 0; }
.fx-stat:last-child { border-inline-end: 0; }
.fx-stat-label { display: block; font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: .04em; }
.fx-stat-value { display: block; margin-top: var(--space-2); font: 650 var(--text-2xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.fx-feed { display: flex; flex-direction: column; }
.fx-day { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-6) var(--space-4); }
.fx-day:first-child { margin-top: 0; }
.fx-day::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.fx-day-label { padding: 4px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--bg-card-elevated); color: var(--text-secondary); font-size: var(--text-2xs); font-weight: 650; white-space: nowrap; }
.fx-event { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-4); }
.fx-rail { position: relative; display: flex; justify-content: center; }
.fx-rail::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 50%; width: 1px; background: var(--border-subtle); }
.fx-event:last-child .fx-rail::before { display: none; }
.fx-marker { position: relative; z-index: var(--layer-base); width: 9px; height: 9px; margin-top: 16px; border-radius: 50%; background: var(--bg-shell); border: 2px solid var(--border-highlight); }
.fx-event.has-media .fx-marker { border-color: var(--accent-primary); background: var(--accent-soft); }
.fx-card { min-width: 0; padding-block: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.fx-event:last-child .fx-card { border-bottom: 0; }
.fx-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fx-channel { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-2xs); font-weight: 650; }
.fx-meta { color: var(--text-secondary); font-size: var(--text-xs); }
.fx-id { color: var(--text-muted); font: var(--text-2xs) var(--font-mono); direction: ltr; }
.fx-jump { margin-inline-start: auto; font-size: var(--text-2xs); font-weight: 650; text-decoration: none; white-space: nowrap; }
.fx-jump:hover { text-decoration: underline; }
.fx-content { margin-top: var(--space-3); font-size: var(--text-base); line-height: var(--leading-normal); white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-content.is-empty { color: var(--text-muted); font-style: italic; }
.fx-attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.fx-attach { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 12px 4px 4px; border: 1px solid var(--border-medium); border-radius: var(--radius-pill); background: var(--bg-card-elevated); color: var(--text-secondary); font-size: var(--text-2xs); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.fx-attach:hover { border-color: var(--border-highlight); color: var(--text-primary); }
.fx-attach-kind { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-hover); color: var(--text-secondary); font-weight: 650; font-size: var(--text-3xs); }
.fx-attach.is-media .fx-attach-kind { background: var(--accent-soft); color: var(--accent-text); }
.fx-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.fx-attach-size { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- Media gallery: tiles with a kind badge and actions ----------- */
.fx-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.fx-tile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; box-shadow: var(--shadow-card); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.fx-tile:hover { border-color: var(--border-medium); transform: translateY(-2px); }
.fx-tile-media { position: relative; height: 180px; background: var(--bg-card-elevated); overflow: hidden; cursor: zoom-in; }
.fx-tile-media img, .fx-tile-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-tile-media img { transition: transform var(--dur-slow) var(--ease-out); }
.fx-tile:hover .fx-tile-media img { transform: scale(1.045); }
.fx-tile-kind { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); padding: 3px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg-pitch) 78%, transparent); color: var(--text-primary); font-size: var(--text-3xs); font-weight: 650; letter-spacing: .05em; }
.fx-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); font-size: var(--text-2xs); color: var(--text-muted); }
.fx-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48%; }
.fx-tile-actions { display: flex; align-items: center; gap: 6px; }

/* --- Audit stream: a log inspector -------------------------------- */
.log-box { padding: 0; overflow: hidden; }
.log-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--bg-card-elevated); }
.log-bar-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 650; letter-spacing: .02em; }
.log-bar-meta { display: flex; align-items: center; gap: var(--space-3); }
.log-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); color: var(--text-secondary); cursor: pointer; }
.log-legend { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--text-3xs); }
.log-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.log-legend-swatch { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.log-legend-item.is-warn .log-legend-swatch { background: var(--warning); }
.log-legend-item.is-danger .log-legend-swatch { background: var(--danger); }
.log-legend-item.is-ok .log-legend-swatch { background: var(--success); }
.log-viewport { max-height: 62dvh; min-height: 320px; overflow: auto; }
.log-row { display: grid; grid-template-columns: 74px 96px minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.log-row:last-child { border-bottom: 0; }
.log-row:hover { background: var(--bg-hover); }
.log-row-time { color: var(--text-muted); font: var(--text-xs) var(--font-mono); font-variant-numeric: tabular-nums; }
.log-row-action { justify-self: start; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg-card-elevated); color: var(--text-secondary); font-size: var(--text-2xs); font-weight: 650; white-space: nowrap; }
.log-row.is-warn .log-row-action { background: var(--warning-soft); color: var(--warning); }
.log-row.is-danger .log-row-action { background: var(--danger-soft); color: var(--danger); }
.log-row.is-ok .log-row-action { background: var(--success-soft); color: var(--success); }
.log-row-body { min-width: 0; color: var(--text-secondary); line-height: var(--leading-normal); overflow-wrap: anywhere; }
.log-row-body strong { color: var(--text-primary); font-weight: 600; }
.log-row-case { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-muted); font: var(--text-2xs) var(--font-mono); }
.log-row-reason { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-xs); }
.log-row.is-danger .log-row-body { color: var(--danger); }

/* --- Announcement studio ----------------------------------------- */
.studio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-6); align-items: start; }
.studio-composer { padding: 0; overflow: hidden; }
.studio-head { padding: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
/* The composer header also carries .panel-header for the shared heading styles. */
.studio-head.panel-header { padding: var(--space-6); padding-bottom: var(--space-5); margin-bottom: 0; border-bottom-color: var(--border-subtle); }
.studio-steps { list-style: none; margin: 0; padding: 0; }
.studio-step { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.studio-step:last-child { border-bottom: 0; }
.studio-step-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.studio-step-no { color: var(--accent-text); font: 650 var(--text-xs) var(--font-mono); letter-spacing: .08em; }
.studio-step-title { font-size: var(--text-lg); font-weight: 650; }
.studio-step-note { margin-inline-start: auto; color: var(--text-muted); font-size: var(--text-xs); text-align: end; }
.studio-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.studio-field-grid .form-group { margin-bottom: 0; }
.studio-templates { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.studio-templates::-webkit-scrollbar { display: none; }
.studio-templates .preset-chip { flex: 0 0 auto; }
.studio-swatches { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.studio-dispatch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-subtle); background: var(--bg-card-elevated); }
.studio-dispatch-summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-2xs); color: var(--text-muted); }
.studio-dispatch .btn { min-width: 220px; }
.studio-preview { position: sticky; inset-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.studio-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.studio-preview-head h3 { font-size: var(--text-lg); font-weight: 650; }
.studio-preview-note { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }
.studio-preview .discord-chat-preview { min-height: 0; }

/* ============================================================
   15. DENSITY, MOTION, RESPONSIVE
   ============================================================ */
.density-compact .stage-content { padding-top: var(--space-6); }
.density-compact .workspace-heading { margin-bottom: var(--space-5); }
.density-compact .kpi-card { padding: var(--space-4); }
.density-compact .kpi-strip { margin-bottom: var(--space-6); }
.density-compact .kpi-value { margin-top: var(--space-2); font-size: var(--text-2xl); }
.density-compact .stage-table td { padding-block: var(--space-3); }
.density-compact .panel-box { padding: var(--space-5); }
.density-compact .form-group { margin-bottom: var(--space-4); }
.density-compact .avatar-sm { width: 26px; height: 26px; }

/* Theme cross-fade — applied only while switching (see theme.js). */
html.theme-anim, html.theme-anim body,
html.theme-anim .panel-box, html.theme-anim .stage-bar, html.theme-anim .app-main,
html.theme-anim .app-sidebar, html.theme-anim .table-container, html.theme-anim .kpi-strip,
html.theme-anim .server-card, html.theme-anim .metric-card, html.theme-anim .modal-card,
html.theme-anim input, html.theme-anim select, html.theme-anim textarea, html.theme-anim .btn {
  transition: background-color var(--dur-slow) ease, border-color var(--dur-slow) ease, color var(--dur-base) ease, box-shadow var(--dur-slow) ease;
}

@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes surface-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px) scale(.996); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes drawer-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
html[dir="rtl"] .slide-drawer[open] { animation-name: drawer-in-rtl; }
@keyframes drawer-in-rtl { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(var(--toast-exit-x)); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 42%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes control-spin { to { transform: rotate(1turn); } }
@keyframes skeleton-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes skeleton-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -20% 0; } }

/* Both reading directions share the same responsive hierarchy. */
@media (min-width: 1700px) {
  .stage-content, .stage-bar { padding-inline: var(--space-11); }
  .login-showcase { padding-inline: var(--space-11); }
  .showcase-copy h1 { font-size: 62px; }
}
@media (max-width: 1250px) {
  .app-layout { grid-template-columns: 222px minmax(0, 1fr); }
  .stage-bar { padding-inline: var(--space-6); gap: var(--space-4); }
  .stage-content { padding: var(--space-7) var(--space-6) var(--space-9); }
  .palette-text, .palette-trigger > kbd, #density-label { display: none; }
  .stage-center { flex: 1; }
  .density-icon { margin: 0; }
  .kpi-card { padding: var(--space-5) var(--space-4); }
  .login-showcase { padding-inline: var(--space-8); }
  .showcase-copy h1 { font-size: 43px; }
  .login-form-stage, [dir="rtl"] .login-form-stage { padding-inline: var(--space-8); }
}
@media (max-width: 1050px) {
  .dispatch-grid, .broadcast-grid, .system-actions-grid, .cc-grid, .studio { grid-template-columns: minmax(0, 1fr); }
  .studio-preview { position: static; }
  .fx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-stat:nth-child(2n) { border-inline-end: 0; }
  .fx-stat:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
  .profile-stage { min-height: 240px; }
  .system-grid, #tab-security > .kpi-strip, .dossier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-date { display: none; }
  .login-showcase { min-height: 700px; }
  .showcase-copy h1 { font-size: 36px; }
  .login-form-stage, [dir="rtl"] .login-form-stage { padding-inline: var(--space-7); }
  .girls-hero { gap: var(--space-6); }
  .girls-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .girls-kpis .kpi-card:nth-child(2n) { border-inline-end: 0; }
  .girls-kpis .kpi-card:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 800px) {
  .app-layout, [dir="rtl"] .app-layout { display: block; padding: 0; }
  .app-main { height: 100dvh; border: 0; border-radius: 0; }
  .app-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: 268px; height: 100dvh; padding-bottom: max(var(--space-5), env(safe-area-inset-bottom)); transform: translateX(-100%); visibility: hidden; z-index: var(--layer-drawer); transition: transform var(--dur-base) var(--ease-out); }
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  .app-sidebar.mobile-open { transform: translateX(0); visibility: visible; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: var(--layer-nav); }
  .sidebar-close-btn { display: grid; place-items: center; width: 32px; height: 32px; background: transparent; border: 1px solid var(--border-medium); border-radius: var(--radius-xs); color: var(--text-secondary); margin-inline-start: auto; font-size: var(--text-2xl); }
  .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: var(--tap-target); height: var(--tap-target); border: 1px solid var(--border-medium); border-radius: var(--radius-xs); background: transparent; }
  .hamburger-bar { width: 16px; }
  .stage-bar { min-height: 68px; padding: var(--space-3) var(--space-5); gap: var(--space-3); }
  .stage-bar .stage-actions { gap: 6px; }
  .path-root, .path-sep, .stage-bar #btn-stage-refresh { display: none; }
  .stage-content { padding: var(--space-6) var(--space-5) var(--space-9); padding-bottom: max(var(--space-9), env(safe-area-inset-bottom)); }
  .workspace-heading h1 { font-size: 31px; }
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-card { padding: var(--space-4); }
  #tab-cases .kpi-card:nth-child(3n) { border-inline-end: 0; }
  #tab-cases .kpi-card:nth-child(n + 4) { border-top: 1px solid var(--border-subtle); }
  .toolbar-search { max-width: none; }
  .toolbar-filters { width: 100%; }
  .login-stage { padding: var(--space-4); grid-template-columns: 1fr; gap: 0; }
  .login-showcase { min-height: auto; padding: var(--space-6) var(--space-7); }
  .showcase-copy { padding-block: var(--space-7) 0; }
  .showcase-copy h1 { font-size: 36px; margin-block: 0 var(--space-3); }
  .showcase-copy p { max-width: 46ch; font-size: var(--text-sm); }
  .showcase-art { display: none; }
  .login-form-stage, [dir="rtl"] .login-form-stage { padding: var(--space-5) var(--space-4) var(--space-2); }
  .login-card { max-width: 420px; padding-block: var(--space-8) var(--space-9); }
  .login-emblem { display: none; }
  .login-title { font-size: 31px; }
  .login-subtitle { margin-block: var(--space-2) var(--space-6); }
  .login-footer { margin-top: var(--space-2); }
}
@media (max-width: 700px) {
  .girls-hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
  .girls-toolbar { align-items: stretch; }
  .girls-toolbar .sub-nav-bar { width: 100%; }
  .girls-send-row { flex-direction: column; }
}
@media (max-width: 520px) {
  .stage-bar { padding-inline: var(--space-3); gap: var(--space-2); }
  .stage-bar #btn-toggle-density { display: none; }
  .stage-bar #btn-quick-dispatch { font-size: var(--text-2xs); padding-inline: var(--space-2); }
  .stage-path { font-size: var(--text-2xs); }
  .stage-left-cluster { gap: var(--space-2); }
  .stage-center { margin-inline-start: auto; }
  .stage-bar .btn { min-height: var(--control-h-sm); }
  .stage-content { padding-inline: var(--space-4); }
  .workspace-heading { margin-bottom: var(--space-6); }
  .workspace-heading h1 { font-size: 27px; }
  .workspace-heading p { font-size: var(--text-xs); line-height: var(--leading-normal); }
  .workspace-eyebrow .eyebrow { font-size: var(--text-2xs); }
  .kpi-strip { margin-bottom: var(--space-7); }
  .kpi-card { padding: var(--space-4) var(--space-3); }
  .kpi-value { font-size: var(--text-2xl); margin-top: var(--space-2); }
  .kpi-label { font-size: var(--text-2xs); }
  .records-heading h2 { font-size: var(--text-lg); }
  .records-label { display: none; }
  .toolbar-filters { gap: 7px; }
  .toolbar-divider { display: none; }
  select.filter-select { flex: 1; max-width: 50%; }
  .filter-checkbox-label { margin-inline: 3px; }
  .pagination-bar { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .pagination-actions { align-self: flex-end; }
  .panel-box { padding: var(--space-5); }
  .panel-header h3 { font-size: var(--text-md); }
  .form-row, .intel-search-row { flex-direction: column; align-items: stretch; gap: 0; }
  .form-row > *, .intel-search-row > * { width: 100% !important; }
  .intel-search-row .form-group { margin-bottom: var(--space-4) !important; }
  .intel-search-btn-wrap .btn { width: 100%; }
  .dossier-head { align-items: flex-start; gap: var(--space-3); }
  .dossier-avatar-img { width: 48px; height: 48px; }
  .dossier-title-row h3 { font-size: var(--text-xl); }
  .dossier-stat-box { padding: var(--space-3); }
  .sub-nav-btn { font-size: var(--text-2xs); padding-inline: var(--space-3); }
  .servers-grid, .vt-scanner-grid { grid-template-columns: minmax(0, 1fr); }
  .maint-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .terminal-bar { flex-wrap: wrap; padding: var(--space-4); }
  .terminal-viewport { padding: var(--space-4); }
  .metric-card { padding: var(--space-5); }
  .metric-val { font-size: var(--text-2xl); }
  .modal-overlay, .palette-overlay { padding: var(--space-3); }
  .modal-card.modal-lg { max-height: calc(100dvh - 24px); }
  .modal-header, .modal-body { padding: var(--space-5); }
  .modal-actions .btn { flex: 1; }
  .drawer-header, .drawer-content { padding: var(--space-5); }
  .showcase-copy h1 { font-size: 31px; }
  .showcase-top .wordmark { font-size: var(--text-2xl); }
  .login-showcase { padding: var(--space-5); }
  .login-stage { padding: var(--space-3); }
  .login-card input { font-size: 16px !important; }
  .discord-chat-preview { padding: var(--space-4); }
  .discord-avatar { width: 30px; height: 30px; }
  .discord-message { gap: var(--space-2); }
  .cc-actions .btn { flex: 1; }
  .lightbox-close { inset-block-start: -40px; }
  .studio-field-grid, .fx-stats { grid-template-columns: minmax(0, 1fr); }
  .fx-stat { border-inline-end: 0; border-bottom: 1px solid var(--border-subtle); }
  .fx-stat:last-child { border-bottom: 0; }
  .log-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-inline: var(--space-4); }
  .log-bar, .log-legend { padding-inline: var(--space-4); }
  .studio-step, .studio-head, .studio-dispatch { padding-inline: var(--space-5); }
  .studio-dispatch .btn { min-width: 0; flex: 1; }
  .fx-attach-name { max-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}