/* ═══ BASE: Переменные, сброс, типографика ═══ */
 /* iOS Safe Areas */
 :root {
 --safe-top: env(safe-area-inset-top, 0px);
 --safe-bottom: env(safe-area-inset-bottom, 0px);
 --safe-left: env(safe-area-inset-left, 0px);
 --safe-right: env(safe-area-inset-right, 0px) }
 
 /* Dark theme — Command Center */
 :root, [data-theme="dark"] {
 --bg: #363a3e; --bg2: #3c4044; --bg3: #43474b; --bg4: #4a4e53;
 --brd: rgba(255,255,255,0.12); --txt: #f0f2f4; --txt2: #a8b0b8; --txt3: #788490;
 --red: #ff3366; --green: #00d4aa; --yellow: #f0a030; --blue: #8387d0;
 --orange: #f97316; --purple: #a855f7; --cyan: #00d4aa;
 --type-a: #00d4aa; --type-a-light: #33e0be; --type-a-bg: rgba(0,212,170,0.08);
 --type-b: #f0a030; --type-b-light: #f5b960; --type-b-bg: rgba(240,160,48,0.08);
 --type-t: #8387d0; --type-t-light: #9b9ede; --type-t-bg: rgba(131,135,208,0.08);
 --card-bg: #43474b;
 --nm-dark: transparent;
 --nm-light: transparent;
 --shadow: 0 1px 4px rgba(0,0,0,0.30);
 --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.20);
 --shadow-btn: 0 1px 3px rgba(0,0,0,0.25);
 --ease: cubic-bezier(.52, 0, .08, 1);

 /* ─── Typography Scale ─── */
 --font-mono: 'JetBrains Mono', monospace;
 --font-sans: 'IBM Plex Sans', sans-serif;
 --fs-2xs: 7px;
 --fs-xs: 8px;
 --fs-sm: 9px;
 --fs-base: 10px;
 --fs-md: 11px;
 --fs-lg: 12px;
 --fs-xl: 13px;
 --fs-2xl: 14px;
 --fs-3xl: 16px;
 --fs-4xl: 24px;
 --fs-hero: 36px;
 --fw-light: 300;
 --fw-normal: 400;
 --fw-medium: 500;
 --fw-semi: 600;
 --fw-bold: 700;
 --fw-black: 800;
 --ls-tight: 0.03em;
 --ls-normal: 0.05em;
 --ls-wide: 0.1em;
 --ls-wider: 0.15em;
 --ls-widest: 0.2em;
 --radius-sm: 8px;
 --radius-md: 10px;
 --radius-lg: 12px;
 --radius-xl: 14px;
 --radius-pill: 22px;
 /* ─── Room Colors ─── */
 --room-1k: #5a96fa;
 --room-2k: #5cc98e;
 --room-3k: #e8a830;
 --room-4k: #e85b6b;
 --room-p:  #a878e6;
 --room-1k-bg: rgba(90,150,250,0.12);
 --room-2k-bg: rgba(92,201,142,0.12);
 --room-3k-bg: rgba(255,180,50,0.12);
 --room-4k-bg: rgba(232,91,107,0.12);
 --room-p-bg:  rgba(168,120,230,0.12);
 --room-1k-brd: rgba(90,150,250,0.3);
 --room-2k-brd: rgba(92,201,142,0.3);
 --room-3k-brd: rgba(255,180,50,0.3);
 --room-4k-brd: rgba(232,91,107,0.3);
 --room-p-brd:  rgba(168,120,230,0.3);
 /* ─── Component Sizing ─── */
 --input-h: 36px;
 --input-h-lg: 42px;
 --input-py: 8px;
 --input-px: 10px;
 --cell-py: 5px;
 --cell-px: 4px;
 --cell-py-lg: 8px;
 --cell-px-lg: 10px;
 --bar-h-sm: 3px;
 --bar-h-md: 6px;
 --bar-h-lg: 8px;
 --bar-h-xl: 24px;
 --bar-h-xxl: 26px;
 --icon-sm: 14px;
 --icon-md: 18px;
 --icon-lg: 28px;
 --icon-xl: 32px;
 --badge-py: 2px;
 --badge-px: 8px;
 --section-gap: 16px;
 --card-padding: 16px 18px;
 /* ─── Transitions ─── */
 --t-fast: 0.15s ease;
 --t-base: 0.2s ease;
 --t-slow: 0.3s ease;
 --t-smooth: 0.35s ease;
 --t-anim: 0.65s var(--ease);
 --inp-radius: 0;
 --inp-shadow: none;

 /* ─── Semantic Overlay / Accent Backgrounds ─── */
 --overlay-subtle: rgba(128,128,128,0.06);
 --overlay-1: rgba(0,0,0,0.04);
 --overlay-2: rgba(0,0,0,0.08);
 --overlay-3: rgba(0,0,0,0.12);
 --white-6: rgba(255,255,255,0.06);
 --white-10: rgba(255,255,255,0.1);
 --white-90: rgba(255,255,255,0.9);
 --white-95: rgba(255,255,255,0.95);
 --black-30: rgba(0,0,0,0.3);
 --gray-10: rgba(128,128,128,0.1);
 --accent-bg-0: rgba(131,135,208,0.03);
 --accent-bg-2: rgba(131,135,208,0.06);
 --accent-bg-3: rgba(131,135,208,0.1);
 --accent-bg-4: rgba(131,135,208,0.14);
 --accent-bg-5: rgba(131,135,208,0.18);
 --success-bg: rgba(0,212,170,0.12);
 --success-bg-light: rgba(80,205,137,0.1);
 --danger-bg: rgba(255,51,102,0.12);
 --danger-bg-light: rgba(224,92,109,0.1);
 --blue-tag: #9b9ede;
 --blue-bg: rgba(131,135,208,0.15);
 --yellow-bg: rgba(255,199,0,0.15);
 --cyan-bg: rgba(0,217,233,0.1);

 /* ─── Extended Font Sizes (fills gaps) ─── */
 --fs-inp: 15px;
 --fs-card: 18px;
 --fs-stat: 20px;
 --fs-heading: 22px;
 --fs-letter: 26px;
 --fs-big: 28px;
 --fs-jumbo: 32px;

 /* ─── Spacing scale ─── */
 --sp-1: 2px;
 --sp-2: 4px;
 --sp-3: 6px;
 --sp-4: 8px;
 --sp-5: 10px;
 --sp-6: 12px;
 --sp-8: 16px;
 --sp-10: 20px;
 --sp-12: 24px;
 --sp-16: 32px;
 --sp-20: 40px;

 /* ─── Layout ─── */
 --wrap-max: 1600px;
 --bar-w: 48px;
 --bar-pill-w: 82px;
 --bar-pill-h: 180px;
 --gauge-size: 90px;
 --vbar-h: 100px }
 
 /* Light theme — Command Center Light */
 

 /* ─── Utility Classes ─── */
 .mono { font-family: var(--font-mono) }
 .sans { font-family: var(--font-sans) }
 .uppercase { text-transform: uppercase }
 .text-2xs { font-size: var(--fs-2xs) }
 .text-xs { font-size: var(--fs-xs) }
 .text-sm { font-size: var(--fs-sm) }
 .text-base { font-size: var(--fs-base) }
 .text-md { font-size: var(--fs-md) }
 .text-lg { font-size: var(--fs-lg) }
 .text-xl { font-size: var(--fs-xl) }
 .text-2xl { font-size: var(--fs-2xl) }
 .text-3xl { font-size: var(--fs-3xl) }
 .fw-light { font-weight: var(--fw-light) }
 .fw-normal { font-weight: var(--fw-normal) }
 .fw-medium { font-weight: var(--fw-medium) }
 .fw-semi { font-weight: var(--fw-semi) }
 .fw-bold { font-weight: var(--fw-bold) }
 .fw-black { font-weight: var(--fw-black) }
 .ls-tight { letter-spacing: var(--ls-tight) }
 .ls-normal { letter-spacing: var(--ls-normal) }
 .ls-wide { letter-spacing: var(--ls-wide) }
 .ls-wider { letter-spacing: var(--ls-wider) }
 .ls-widest { letter-spacing: var(--ls-widest) }
 .label { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--txt3); text-transform: uppercase; letter-spacing: var(--ls-wider) }
 .section-label { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--txt3); text-transform: uppercase; letter-spacing: var(--ls-wider); display: flex; align-items: center; gap: 8px; margin-bottom: 12px }
 .section-label svg { opacity: 0.35 }
 .flex { display: flex }
 .flex-center { display: flex; align-items: center; justify-content: center }
 .flex-between { display: flex; align-items: center; justify-content: space-between }
 .items-center { align-items: center }
 .gap-2 { gap: 4px }
 .gap-4 { gap: 8px }
 .gap-6 { gap: 12px }
 .gap-8 { gap: 16px }
 .color-muted { color: var(--txt3) }
 .color-secondary { color: var(--txt2) }
 .color-primary { color: var(--txt) }
 .color-accent { color: var(--blue) }
 .color-type-a { color: var(--type-a) }
 .color-type-b { color: var(--type-b) }


/* Nuclear cleanup: hide stray pseudo-elements and orphaned fixed elements */
body::before, body::after { content: none !important; display: none !important }
html::before, html::after { content: none !important; display: none !important }
.split-layer, .split-cut, .split-trigger { display: none !important; visibility: hidden !important }

@media (max-width: 768px) {
  .tinp, .tep-box-input, .target-input, .form-input {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
  .tep-box-input {
    height: 44px !important;
    padding: 8px 6px !important;
  }
  .tinp {
    width: 100% !important;
    min-width: 60px;
    height: 44px !important;
  }
}

/* Mobile fix v2: sections page */
@media (max-width: 480px) {
  /* Queue settings cards - stack vertically */
  #queueSettingsFields {
    flex-direction: column !important;
    display: flex !important;
  }
  #queueSettingsFields > div {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
  }
  /* Ensure all labels are fully visible */
  .queue-summary-lbl, .queue-label, .label, .section-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 11px !important;
  }
  /* Input fields - ensure numbers visible */
  input, .tinp, .tep-box-input, .target-input, .form-input,
  .queue-settings-group input, select {
    font-size: 16px !important;
    min-width: 50px !important;
    overflow: visible !important;
  }
  /* Main table - allow horizontal scroll */
  .main-tbl-wrap, .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table.main-tbl {
    min-width: 600px !important;
  }
  /* Queue summary values */
  .queue-summary-val {
    font-size: 16px !important;
  }
}