/* ============ ТОКЕНЫ (light = эталон) ============ */
:root{
  /* нейтральная шкала */
  --n-0:#ffffff; --n-1:#f8f9ff; --n-2:#F1F4FF;
  --n-3:#e2e8f0; --n-4:#cbd5e1;
  --n-5:#94a3b8; --n-6:#64748b; --n-7:#475569;
  --n-8:#1e293b; --n-9:#0E1A42;

  /* семантика */
  --success-quiet:#166534; --success:#16a34a; --success-loud:#15803d;
  --success-bg:rgba(22,101,52,.08); --success-bg-strong:rgba(22,101,52,.14);

  --danger-quiet:#991b1b; --danger:#b91c1c; --danger-loud:#7f1d1d;
  --danger-bg:rgba(153,27,27,.08); --danger-bg-strong:rgba(153,27,27,.14);

  --warning-quiet:#854d0e; --warning:#c2410c; --warning-loud:#9a3412;
  --warning-bg:rgba(133,77,14,.08); --warning-bg-strong:rgba(133,77,14,.14);

  --action:#3762FC; --action-hover:#2549d9; --action-active:#1d3bb8;
  --action-bg:rgba(55,98,252,.07); --action-bg-strong:rgba(55,98,252,.14);
  --action-ring:rgba(55,98,252,.25);

  --info:#0369a1; --info-bg:rgba(3,105,161,.07);

  /* поверхности */
  --bg:var(--n-2); --card:var(--n-0); --card-2:var(--n-1);
  --hover-row:rgba(55,98,252,.03); --hover-bg:rgba(55,98,252,.05);
  --border-1:var(--n-3); --border-2:var(--n-4);
  --shadow-card:0 8px 32px rgba(55,98,252,.12),0 2px 8px rgba(14,26,66,.06);
  --shadow-sm:0 4px 24px rgba(14,26,66,.06),0 1px 4px rgba(14,26,66,.04);
}
/* ============ DARK маппинг ============ */
.dark{
  --n-0:#12161f; --n-1:#161c27; --n-2:#0c1017;
  --n-3:#1b2231; --n-4:#252d3d;
  --n-5:#6e7681; --n-6:#8b949e; --n-7:#c9d1d9;
  --n-8:#d1d9e4; --n-9:#e6edf3;

  --success-quiet:#6ee7b7; --success:#3fb950; --success-loud:#4ade80;
  --success-bg:rgba(63,185,80,.10); --success-bg-strong:rgba(63,185,80,.18);

  --danger-quiet:#fca5a5; --danger:#f85149; --danger-loud:#f87171;
  --danger-bg:rgba(248,81,73,.10); --danger-bg-strong:rgba(248,81,73,.18);

  --warning-quiet:#fde68a; --warning:#f0883e; --warning-loud:#fbbf24;
  --warning-bg:rgba(240,136,62,.10); --warning-bg-strong:rgba(240,136,62,.18);

  --action:#58a6ff; --action-hover:#7ab8ff; --action-active:#3b89e6;
  --action-bg:rgba(88,166,255,.10); --action-bg-strong:rgba(88,166,255,.20);
  --action-ring:rgba(88,166,255,.35);

  --info:#38bdf8; --info-bg:rgba(56,189,248,.08);

  --bg:var(--n-2); --card:var(--n-0); --card-2:var(--n-1);
  --hover-row:rgba(255,255,255,.02); --hover-bg:rgba(255,255,255,.04);
  --border-1:var(--n-3); --border-2:var(--n-4);
  --shadow-card:0 8px 24px rgba(0,0,0,.25); --shadow-sm:0 4px 16px rgba(0,0,0,.18);
}
#fx-scope *{box-sizing:border-box}
#fx-scope html, #fx-scope body{margin:0;padding:0}
#fx-scope body{
  font-family:-apple-system,'Segoe UI',Roboto,'Inter',sans-serif;
  color:var(--n-9); background:var(--bg);
  font-size:14px; line-height:1.5;
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;
}
#fx-scope .themes{display:grid; grid-template-columns:1fr 1fr; min-height:100vh}
#fx-scope .col{padding:32px; min-width:0; overflow:hidden}
#fx-scope .col.light{background:#F1F4FF; color:#0E1A42}
#fx-scope .col.dark{background:#0c1017; color:#e6edf3}
#fx-scope h1{font-size:22px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em}
#fx-scope h1 small{font-size:12px; font-weight:500; color:var(--n-6); margin-left:8px; letter-spacing:.04em; text-transform:uppercase}
#fx-scope h2{font-size:14px; font-weight:600; margin:32px 0 12px; letter-spacing:.04em; text-transform:uppercase; color:var(--n-6)}
#fx-scope .muted{color:var(--n-6); font-size:12px}
#fx-scope .swatch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
#fx-scope .sw{
  background:var(--card); border:1px solid var(--border-1); border-radius:10px;
  padding:10px; display:flex; flex-direction:column; gap:4px;
  box-shadow:var(--shadow-sm);
}
#fx-scope .sw .chip{height:40px; border-radius:6px; border:1px solid var(--border-1)}
#fx-scope .sw .lbl{font-size:11px; color:var(--n-6); font-family:ui-monospace,Menlo,Consolas,monospace}
#fx-scope .sw .val{font-size:11px; color:var(--n-7); font-family:ui-monospace,Menlo,Consolas,monospace}
#fx-scope .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
#fx-scope .btn{
  font:inherit; cursor:pointer; border:1px solid transparent; border-radius:8px;
  padding:8px 14px; font-weight:500; transition:all .12s ease;
}
#fx-scope .btn-primary{background:var(--action); color:#fff}
#fx-scope .btn-primary:hover{background:var(--action-hover)}
#fx-scope .btn-secondary{background:var(--card); color:var(--n-9); border-color:var(--border-2)}
#fx-scope .btn-secondary:hover{background:var(--hover-bg); border-color:var(--action)}
#fx-scope .btn-ghost{background:transparent; color:var(--n-7)}
#fx-scope .btn-ghost:hover{background:var(--hover-bg); color:var(--n-9)}
#fx-scope .btn-link{background:transparent; color:var(--action); padding:8px 4px}
#fx-scope .btn-link:hover{text-decoration:underline}
#fx-scope .btn-danger{background:var(--card); color:var(--danger); border-color:var(--danger-bg-strong)}
#fx-scope .btn-danger:hover{background:var(--danger-bg); border-color:var(--danger)}
#fx-scope .btn[disabled]{opacity:.45; cursor:not-allowed}
#fx-scope .btn[disabled]:hover{background:initial; border-color:initial}
#fx-scope .btn-icon{padding:8px; line-height:0; min-width:36px}
#fx-scope .btn-sm{height:28px; padding:0 10px; font-size:12px; border-radius:6px}
#fx-scope .btn-lg{height:44px; padding:0 18px; font-size:14px; border-radius:10px}
#fx-scope .btn-icon.btn-sm{padding:0; width:28px; min-width:28px}
#fx-scope .btn-danger-primary{background:var(--danger); color:#fff; border-color:transparent}
#fx-scope .btn-danger-primary:hover{background:var(--danger-loud)}
#fx-scope .btn-focus{box-shadow:0 0 0 3px var(--action-ring); border-color:var(--action)}
#fx-scope .spinner{display:inline-block; width:12px; height:12px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:sp 700ms linear infinite; margin-right:6px; vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
#fx-scope .modal-mock{
  background:var(--card); border:1px solid var(--border-1); border-radius:12px;
  padding:20px; box-shadow:var(--shadow-pop, var(--shadow-card)); max-width:420px;
}
#fx-scope .modal-mock .mt{font-size:16px; font-weight:600; margin-bottom:6px; color:var(--n-9)}
#fx-scope .modal-mock .mb{font-size:13px; color:var(--n-7); margin-bottom:16px; line-height:1.5}
#fx-scope .modal-mock .mf{display:flex; justify-content:flex-end; gap:8px}
#fx-scope .modal-mock input{
  background:var(--card-2); border:1px solid var(--border-2); border-radius:8px;
  padding:8px 12px; font:inherit; color:var(--n-9); width:100%; margin-bottom:14px;
}
#fx-scope .modal-frame{
  position:relative; background:var(--n-2);
  border:1px solid var(--border-1); border-radius:12px;
  padding:24px; overflow:hidden;
}
#fx-scope .dark .modal-frame{background:var(--bg)}
#fx-scope .modal-frame::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center,rgba(14,26,66,.15) 0%,transparent 70%);
  pointer-events:none;
}
#fx-scope .dark .modal-frame::before{background:radial-gradient(circle at center,rgba(0,0,0,.4) 0%,transparent 70%)}
#fx-scope .modal{
  background:var(--card); border-radius:12px;
  box-shadow:0 20px 50px rgba(14,26,66,.18),0 4px 16px rgba(14,26,66,.08);
  overflow:hidden; position:relative; margin:0 auto;
}
#fx-scope .dark .modal{box-shadow:0 20px 50px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3)}
#fx-scope .modal-sm{max-width:380px}
#fx-scope .modal-md{max-width:520px}
#fx-scope .modal-lg{max-width:720px}
#fx-scope .modal-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border-1);
}
#fx-scope .modal-h .t{font-size:16px; font-weight:600; color:var(--n-9)}
#fx-scope .modal-h .x{cursor:pointer; color:var(--n-6); padding:4px 8px; border-radius:6px; font-size:16px; line-height:1}
#fx-scope .modal-h .x:hover{background:var(--hover-bg); color:var(--n-9)}
#fx-scope .modal-b{padding:20px}
#fx-scope .modal-f{
  display:flex; justify-content:flex-end; gap:8px;
  padding:14px 20px; border-top:1px solid var(--border-1); background:var(--card-2);
}
#fx-scope .drawer2-mock{
  position:relative; height:340px;
  background:var(--card); border:1px solid var(--border-1); border-radius:12px;
  overflow:hidden;
}
#fx-scope .drawer2-mock .bg{
  padding:16px; background:var(--card-2); height:100%; color:var(--n-6); font-size:12px; overflow:hidden;
}
#fx-scope .drawer2-mock .panel{
  position:absolute; top:0; right:0; bottom:0; width:62%;
  background:var(--card); border-left:1px solid var(--border-2);
  box-shadow:-8px 0 24px rgba(14,26,66,.08);
  display:flex; flex-direction:column;
}
#fx-scope .dark .drawer2-mock .panel{box-shadow:-8px 0 24px rgba(0,0,0,.35)}
#fx-scope .drawer2-mock .panel-h{flex:none; padding:14px 16px; border-bottom:1px solid var(--border-1); display:flex; justify-content:space-between; align-items:center}
#fx-scope .drawer2-mock .panel-b{flex:1; overflow-y:auto; padding:16px}
#fx-scope .drawer2-mock .panel-f{flex:none; padding:12px 16px; border-top:1px solid var(--border-1); background:var(--card-2); display:flex; justify-content:flex-end; gap:8px}
#fx-scope .row-actions{display:flex; gap:4px; justify-content:flex-end}
#fx-scope .badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:500;
}
#fx-scope .badge.success{background:var(--success-bg); color:var(--success-quiet)}
#fx-scope .badge.danger{background:var(--danger-bg);  color:var(--danger-quiet)}
#fx-scope .badge.warning{background:var(--warning-bg); color:var(--warning-quiet)}
#fx-scope .badge.info{background:var(--info-bg);    color:var(--info)}
#fx-scope .badge.neutral{background:rgba(100,116,139,.10); color:var(--n-7)}
#fx-scope .badge .dot{width:6px; height:6px; border-radius:50%}
#fx-scope .badge.success .dot{background:var(--success)}
#fx-scope .badge.danger .dot{background:var(--danger)}
#fx-scope .badge.warning .dot{background:var(--warning)}
#fx-scope .badge.info .dot{background:var(--info)}
#fx-scope .badge.neutral .dot{background:var(--n-5)}
#fx-scope .tbl-wrap{
  background:var(--card); border:1px solid var(--border-1); border-radius:12px;
  box-shadow:var(--shadow-sm); overflow:hidden;
}
#fx-scope table{width:100%; border-collapse:collapse; font-size:13px}
#fx-scope th{
  text-align:left; font-weight:500; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--n-6);
  padding:10px 14px; border-bottom:1px solid var(--border-1);
}
#fx-scope th.r, #fx-scope td.r{text-align:right}
#fx-scope td{padding:10px 14px; border-bottom:1px solid var(--border-1); color:var(--n-8)}
#fx-scope tr:last-child td{border-bottom:0}
#fx-scope tbody tr:hover{background:var(--hover-row)}
#fx-scope .num{font-variant-numeric:tabular-nums; font-feature-settings:'tnum'}
#fx-scope .delta-pos{color:var(--success-quiet)}
#fx-scope .delta-neg{color:var(--danger-quiet)}
#fx-scope .delta-warn{color:var(--warning-quiet)}
#fx-scope .delta-neutral{color:var(--n-6)}
#fx-scope .arrow{font-size:11px; margin-right:2px; opacity:.85}
#fx-scope .alert{
  border-radius:10px; padding:12px 14px; margin-bottom:10px;
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid transparent;
}
#fx-scope .alert .ico{font-size:16px; line-height:1.4; flex-shrink:0}
#fx-scope .alert .ttl{font-weight:600; margin-bottom:2px}
#fx-scope .alert .body{font-size:13px; color:var(--n-7); line-height:1.5}
#fx-scope .alert.success{background:var(--success-bg); border-color:var(--success-bg-strong)}
#fx-scope .alert.success .ico, #fx-scope .alert.success .ttl{color:var(--success-quiet)}
#fx-scope .alert.danger{background:var(--danger-bg);  border-color:var(--danger-bg-strong)}
#fx-scope .alert.danger .ico, #fx-scope .alert.danger .ttl{color:var(--danger-quiet)}
#fx-scope .alert.warning{background:var(--warning-bg); border-color:var(--warning-bg-strong)}
#fx-scope .alert.warning .ico, #fx-scope .alert.warning .ttl{color:var(--warning-quiet)}
#fx-scope .alert.info{background:var(--info-bg);    border-color:transparent}
#fx-scope .alert.info .ico, #fx-scope .alert.info .ttl{color:var(--info)}
#fx-scope .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
#fx-scope .card-m{
  background:var(--card); border:1px solid var(--border-1); border-radius:12px;
  padding:14px 16px; box-shadow:var(--shadow-sm);
}
#fx-scope .card-m .ttl{font-size:11px; color:var(--n-6); letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px}
#fx-scope .card-m .val{font-size:24px; font-weight:600; letter-spacing:-.01em}
#fx-scope .card-m .sub{font-size:12px; margin-top:4px}
/* Обёртка-группа дизайна — ТОЛЬКО div/label с .field (qualify по элементу),
   чтобы НЕ задеть старую разметку <input class="field"> (она остаётся на стиле
   style.css и не ломается). width/border/padding сброшены, чтобы глобальный
   .field (там .field = сам input со width:100%) не «протекал» в обёртку. */
#fx-scope div.field, #fx-scope label.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;
  width:auto; border:0; padding:0; background:transparent; border-radius:0; box-shadow:none}
#fx-scope .field label{font-size:12px; font-weight:500; color:var(--n-7)}
#fx-scope .field input, #fx-scope .field select, #fx-scope .field textarea{
  background:var(--card); border:1px solid var(--border-2); border-radius:8px;
  padding:8px 12px; font:inherit; color:var(--n-9); transition:all .12s;
}
#fx-scope .field input:focus, #fx-scope .field select:focus, #fx-scope .field textarea:focus{
  outline:none; border-color:var(--action);
  box-shadow:0 0 0 3px var(--action-ring);
}
#fx-scope .field.error input{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg-strong)}
#fx-scope .field .err{font-size:12px; color:var(--danger-quiet)}
#fx-scope .field .hint{font-size:12px; color:var(--n-6)}
#fx-scope .field label .req{color:var(--danger-quiet); margin-left:2px}
#fx-scope .field input:hover, #fx-scope .field select:hover, #fx-scope .field textarea:hover{border-color:var(--n-5)}
#fx-scope .field input[disabled], #fx-scope .field select[disabled]{
  background:var(--card-2); color:var(--n-5); border-color:var(--border-1); cursor:not-allowed;
}
#fx-scope .field input[readonly]{
  background:transparent; border-color:var(--border-1); color:var(--n-9);
}
#fx-scope .field input[readonly]:focus{box-shadow:none; border-color:var(--border-1)}
#fx-scope .field textarea{
  min-height:80px; resize:vertical; padding:8px 12px; line-height:1.5;
  font-family:inherit;
}
#fx-scope .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#fx-scope .field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:34px;
}
#fx-scope .dark .field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238b949e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#fx-scope .field-sm input, #fx-scope .field-sm select{height:28px; font-size:12px; padding:0 10px; border-radius:6px}
#fx-scope .field-lg input, #fx-scope .field-lg select{height:44px; font-size:14px; padding:0 14px; border-radius:10px}
#fx-scope .checkbox{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--n-8); user-select:none}
#fx-scope .checkbox input{position:absolute; opacity:0; pointer-events:none}
#fx-scope .checkbox .box{
  width:18px; height:18px; border:1px solid var(--border-2); border-radius:4px;
  background:var(--card); display:inline-flex; align-items:center; justify-content:center;
  transition:all 120ms;
}
#fx-scope .checkbox input:focus + .box{border-color:var(--action); box-shadow:0 0 0 3px var(--action-ring)}
#fx-scope .checkbox input:checked + .box{background:var(--action); border-color:var(--action)}
#fx-scope .checkbox input:checked + .box::after{
  content:''; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
#fx-scope .checkbox input[disabled] + .box{opacity:.45}
#fx-scope .checkbox input[disabled] ~ span{opacity:.45}
#fx-scope .radio{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--n-8); user-select:none}
#fx-scope .radio input{position:absolute; opacity:0; pointer-events:none}
#fx-scope .radio .dot-r{
  width:18px; height:18px; border:1px solid var(--border-2); border-radius:50%;
  background:var(--card); display:inline-flex; align-items:center; justify-content:center;
  transition:all 120ms;
}
#fx-scope .radio input:focus + .dot-r{border-color:var(--action); box-shadow:0 0 0 3px var(--action-ring)}
#fx-scope .radio input:checked + .dot-r{border-color:var(--action)}
#fx-scope .radio input:checked + .dot-r::after{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--action);
}
#fx-scope .toggle{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--n-8); user-select:none}
#fx-scope .toggle input{position:absolute; opacity:0; pointer-events:none}
#fx-scope .toggle .track{
  width:32px; height:18px; border-radius:18px; background:var(--border-2);
  position:relative; transition:background 160ms;
}
#fx-scope .toggle .track::after{
  content:''; position:absolute; left:2px; top:2px; width:14px; height:14px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:left 160ms;
}
#fx-scope .toggle input:checked + .track{background:var(--action)}
#fx-scope .toggle input:checked + .track::after{left:16px}
#fx-scope .toggle input:focus + .track{box-shadow:0 0 0 3px var(--action-ring)}
#fx-scope .editable{cursor:text; border-radius:4px; padding:2px 6px; margin:-2px -6px}
#fx-scope .editable:hover{background:var(--card-2); box-shadow:inset 0 0 0 1px var(--border-1)}
#fx-scope .editing{
  background:var(--card); box-shadow:inset 0 0 0 1px var(--action),0 0 0 3px var(--action-ring);
  padding:2px 6px; margin:-2px -6px; outline:none; font:inherit; color:inherit;
  font-variant-numeric:tabular-nums;
}
#fx-scope .flash-ok{animation:flashOk 600ms ease}
@keyframes flashOk{
  0%{background:var(--success-bg)} 100%{background:transparent}
}
#fx-scope .form-error-banner{
  background:var(--danger-bg); border:1px solid var(--danger-bg-strong); border-radius:8px;
  padding:8px 12px; font-size:13px; color:var(--danger-quiet); margin-bottom:14px;
  display:flex; gap:8px; align-items:center;
}
#fx-scope .bar{height:8px; background:var(--n-3); border-radius:999px; overflow:hidden}
#fx-scope .dark .bar{background:var(--border-1)}
#fx-scope .bar > i{display:block; height:100%; border-radius:999px}
#fx-scope .bar > i.s{background:var(--success-loud)}
#fx-scope .bar > i.w{background:var(--warning)}
#fx-scope .bar > i.d{background:var(--danger)}
#fx-scope .empty{
  background:var(--card); border:1px dashed var(--border-2); border-radius:12px;
  padding:32px; text-align:center;
}
#fx-scope .empty .ic{font-size:36px; margin-bottom:8px; opacity:.6}
#fx-scope .empty .t{font-weight:600; margin-bottom:4px}
#fx-scope .empty .s{color:var(--n-6); font-size:13px; max-width:320px; margin:0 auto}
#fx-scope .divider{height:1px; background:var(--border-1); margin:24px 0}
#fx-scope .kbd{font:11px ui-monospace,Menlo,Consolas,monospace; padding:1px 5px; border-radius:4px; background:var(--card-2); border:1px solid var(--border-1); color:var(--n-7)}
#fx-scope .map-grid{display:grid; grid-template-columns:160px 1fr 110px; gap:8px 12px; align-items:center; background:var(--card); border:1px solid var(--border-1); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-sm); font-size:13px}
#fx-scope .map-grid .mg-h{font-size:11px; color:var(--n-6); letter-spacing:.04em; text-transform:uppercase; font-weight:500; padding-bottom:6px; border-bottom:1px solid var(--border-1)}
#fx-scope .map-grid .mg-ent{color:var(--n-6)}
#fx-scope .map-grid .mg-st{color:var(--n-8)}
#fx-scope .compare{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#fx-scope .compare h4{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--n-6); margin:0 0 8px; font-weight:500}
#fx-scope .compare .bad{color:var(--danger-quiet)}
#fx-scope .compare .good{color:var(--success-quiet)}
#fx-scope .row-dot{display:inline-flex; align-items:center; gap:8px}
#fx-scope .row-dot::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--n-4)}
#fx-scope .row-dot.s::before{background:var(--success)}
#fx-scope .row-dot.w::before{background:var(--warning)}
#fx-scope .row-dot.d::before{background:var(--danger)}
#fx-scope .row-dot.i::before{background:var(--info)}
#fx-scope .card{
  background:var(--card); border:1px solid var(--border-1); border-radius:12px;
  box-shadow:var(--shadow-sm); padding:16px; overflow:hidden;
}
#fx-scope .card-h{
  display:flex; align-items:center; justify-content:space-between;
  margin:-16px -16px 16px; padding:10px 16px;
  border-bottom:1px solid var(--border-1); background:var(--card-2);
}
#fx-scope .card-h .ct{font-size:16px; font-weight:600; color:var(--n-9)}
#fx-scope .card-h .ca{display:flex; gap:6px; align-items:center}
#fx-scope .card-f{
  margin:16px -16px -16px; padding:10px 16px;
  border-top:1px solid var(--border-1); background:var(--card-2);
  display:flex; justify-content:space-between; align-items:center; font-size:13px;
}
#fx-scope .card-f .ct{color:var(--n-6); font-size:12px}
#fx-scope .card-f .cv{color:var(--n-9); font-weight:600; font-variant-numeric:tabular-nums}
#fx-scope .card-dense{padding:0}
#fx-scope .card-dense .card-h{margin:0; border-radius:12px 12px 0 0}
#fx-scope .card-dense table{border-radius:0 0 12px 12px}
#fx-scope .group-title{
  font-size:11px; font-weight:500; color:var(--n-6);
  letter-spacing:.04em; text-transform:uppercase;
  margin:24px 0 8px;
}
#fx-scope .group-title:first-child{margin-top:0}
#fx-scope .card-nested{
  background:var(--card-2); border:none; box-shadow:none; border-radius:8px;
  padding:12px; overflow:hidden;
}
#fx-scope .card-nav{cursor:pointer; transition:all 160ms}
#fx-scope .card-nav:hover{box-shadow:var(--shadow-card); transform:translateY(-1px); border-color:var(--border-2)}
#fx-scope .card-nav .arrow-r{color:var(--n-5); transition:color 160ms, transform 160ms}
#fx-scope .card-nav:hover .arrow-r{color:var(--action); transform:translateX(2px)}
#fx-scope .spark{display:inline-block; vertical-align:middle; margin-left:8px}
#fx-scope .tbl-scroll{max-height:300px; overflow:auto; border-radius:12px}
#fx-scope .tbl-scroll table{border-collapse:separate; border-spacing:0}
#fx-scope .tbl-scroll th{
  position:sticky; top:0; z-index:2; background:var(--card-2);
  box-shadow:inset 0 -1px 0 var(--border-1);
}
#fx-scope .tbl-scroll tfoot td{
  position:sticky; bottom:0; background:var(--card-2);
  font-weight:600; color:var(--n-9);
  box-shadow:inset 0 1px 0 var(--border-1);
}
#fx-scope th.sortable{cursor:pointer; user-select:none; padding-right:24px; position:relative}
#fx-scope th.sortable .arr{position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--n-5); font-size:10px}
#fx-scope th.sortable:hover{color:var(--n-7)}
#fx-scope th.sortable.active{color:var(--n-9)}
#fx-scope th.sortable.active .arr{color:var(--n-7)}
#fx-scope th.filterable .flt{margin-left:4px; color:var(--n-5); cursor:pointer}
#fx-scope th.filterable.active .flt{color:var(--action)}
#fx-scope .row-selected{background:var(--action-bg) !important}
#fx-scope .row-selected:hover{background:var(--action-bg-strong) !important}
#fx-scope .bulk-bar{
  background:var(--action-bg); border-bottom:1px solid var(--border-1);
  padding:8px 14px; display:flex; align-items:center; gap:12px;
  font-size:13px; color:var(--n-9);
}
#fx-scope .bulk-bar .cnt{font-weight:600}
#fx-scope .bulk-bar .sep{flex:1}
#fx-scope .chev{display:inline-block; width:14px; color:var(--n-6); cursor:pointer; transition:transform 160ms}
#fx-scope .chev.open{transform:rotate(90deg)}
#fx-scope .row-expand td{background:var(--card-2); padding:14px 16px; color:var(--n-7)}
#fx-scope .tbl-comfort td, #fx-scope .tbl-comfort th{padding:14px 16px}
#fx-scope .tbl-default td, #fx-scope .tbl-default th{padding:10px 14px}
#fx-scope .tbl-dense td, #fx-scope .tbl-dense th{padding:6px 10px; font-size:12px}
#fx-scope .density-toggle{display:inline-flex; border:1px solid var(--border-2); border-radius:6px; overflow:hidden}
#fx-scope .density-toggle button{
  background:transparent; border:0; padding:4px 10px; font-size:12px; cursor:pointer;
  color:var(--n-6); font:inherit;
}
#fx-scope .density-toggle button.on{background:var(--action-bg); color:var(--action)}
#fx-scope .skel{
  display:inline-block; background:linear-gradient(90deg,var(--n-3) 0%,var(--card-2) 50%,var(--n-3) 100%);
  background-size:200% 100%; animation:skel 1.4s ease infinite;
  border-radius:4px; height:12px;
}
#fx-scope .dark .skel{background:linear-gradient(90deg,#1e2533 0%,#252d3d 50%,#1e2533 100%); background-size:200% 100%}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
#fx-scope .tbl-stick th:first-child, #fx-scope .tbl-stick td:first-child{
  position:sticky; left:0; background:var(--card);
  box-shadow:1px 0 0 var(--border-1);
}
#fx-scope .tbl-stick thead th:first-child{background:var(--card-2); z-index:3}
#fx-scope .tbl-stick tfoot td:first-child{background:var(--card-2); z-index:1}
#fx-scope td.cb-cell, #fx-scope th.cb-cell{width:36px; text-align:center; padding-left:14px; padding-right:0}
#fx-scope .sb{
  background:var(--card); border:1px solid var(--border-1); border-radius:12px;
  box-shadow:var(--shadow-sm); overflow:hidden;
  display:flex; flex-direction:column;
  height:560px;
}
#fx-scope .sb-w{width:240px}
#fx-scope .sb-c{width:56px}
#fx-scope .sb-h{
  height:56px; padding:0 16px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border-1);
}
#fx-scope .sb-h .logo{
  width:32px; height:32px; border-radius:8px; background:var(--action);
  color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
#fx-scope .sb-h .brand{font-weight:600; color:var(--n-9); font-size:14px}
#fx-scope .sb-body{flex:1; overflow-y:auto; padding:8px 8px}
#fx-scope .sb-body::-webkit-scrollbar{width:6px}
#fx-scope .sb-body::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:3px}
#fx-scope .sb-gt{
  font-size:11px; font-weight:500; color:var(--n-6);
  letter-spacing:.04em; text-transform:uppercase;
  padding:12px 12px 4px;
}
#fx-scope .sb-it{
  position:relative;
  display:flex; align-items:center; gap:10px;
  height:36px; padding:0 12px;
  border-radius:8px; cursor:pointer;
  color:var(--n-7); text-decoration:none;
  transition:background 120ms, color 120ms;
  font-size:13px; font-weight:500;
}
#fx-scope .sb-it .ico{width:18px; height:18px; flex-shrink:0; color:var(--n-6); display:flex; align-items:center; justify-content:center}
#fx-scope .sb-it:hover{background:var(--hover-bg); color:var(--n-9)}
#fx-scope .sb-it:hover .ico{color:var(--n-7)}
#fx-scope .sb-it .cnt{
  margin-left:auto; font-size:11px; font-weight:500;
  padding:1px 7px; border-radius:999px;
  background:rgba(100,116,139,.12); color:var(--n-7);
}
#fx-scope .sb-it.active{background:var(--action-bg); color:var(--action)}
#fx-scope .sb-it.active .ico{color:var(--action)}
#fx-scope .sb-it.active::before{
  content:''; position:absolute; left:-8px; top:6px; bottom:6px; width:3px;
  background:var(--action); border-radius:2px;
}
#fx-scope .sb-it.active .cnt{background:var(--action); color:#fff}
#fx-scope .sb-c .sb-it{padding:0; justify-content:center}
#fx-scope .sb-c .sb-it span:not(.ico):not(.cnt){display:none}
#fx-scope .sb-c .sb-it .cnt{
  position:absolute; top:2px; right:2px; min-width:14px; height:14px;
  font-size:9px; line-height:14px; padding:0 4px; margin:0;
}
#fx-scope .sb-c .sb-gt{text-align:center; padding:8px 0 2px; font-size:9px}
#fx-scope .sb-c .sb-h{padding:0; justify-content:center}
#fx-scope .sb-c .sb-h .brand{display:none}
#fx-scope .sb-c .sb-divider{margin:4px 8px}
#fx-scope .sb-divider{height:1px; background:var(--border-1); margin:8px 12px}
#fx-scope .sb-foot{
  flex:none; border-top:1px solid var(--border-1); padding:12px;
  display:flex; align-items:center; gap:10px;
}
#fx-scope .sb-foot .av{
  width:32px; height:32px; border-radius:50%;
  background:var(--success-bg); color:var(--success-quiet);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:12px; flex-shrink:0;
}
#fx-scope .sb-foot .uname{font-size:13px; font-weight:500; color:var(--n-9); line-height:1.2}
#fx-scope .sb-foot .urole{font-size:11px; color:var(--n-6); line-height:1.3}
#fx-scope .sb-c .sb-foot{justify-content:center}
#fx-scope .sb-c .sb-foot .uname, #fx-scope .sb-c .sb-foot .urole{display:none}
#fx-scope .topbar{
  background:var(--card); border:1px solid var(--border-1); border-radius:12px;
  height:56px; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
#fx-scope .crumbs{font-size:12px; color:var(--n-6)}
#fx-scope .crumbs a{color:var(--n-6); text-decoration:none; cursor:pointer}
#fx-scope .crumbs a:hover{color:var(--n-9)}
#fx-scope .crumbs .sep{color:var(--n-4); padding:0 8px}
#fx-scope .crumbs .cur{color:var(--n-9)}
#fx-scope .topbar .page-title{font-size:16px; font-weight:600; color:var(--n-9); margin-top:2px}
#fx-scope .topbar .right{display:flex; gap:8px; align-items:center}
#fx-scope .drawer-mock{
  position:relative; background:var(--card); border:1px solid var(--border-1);
  border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden;
}
#fx-scope .drawer-mock .dm-bg{
  padding:16px; background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 60%);
  border-bottom:1px solid var(--border-1); color:var(--n-6); font-size:12px;
}
#fx-scope .drawer-mock .dm-overlay{
  position:absolute; top:0; right:0; bottom:0; width:62%; background:var(--card);
  border-left:1px solid var(--border-2); box-shadow:-8px 0 24px rgba(14,26,66,.08);
  padding:16px; overflow:hidden;
}
#fx-scope .dark .drawer-mock .dm-overlay{box-shadow:-8px 0 24px rgba(0,0,0,.3)}
#fx-scope .drawer-mock .dm-overlay .h{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
#fx-scope .drawer-mock .dm-overlay .h .t{font-size:15px; font-weight:600; color:var(--n-9)}
#fx-scope .drawer-mock .dm-overlay .h .x{font-size:18px; color:var(--n-6); cursor:pointer; padding:4px 8px; border-radius:6px}
#fx-scope .drawer-mock .dm-overlay .h .x:hover{background:var(--hover-bg); color:var(--n-9)}

/* ============================================================================
   Декоративный фон дизайн-темы: зелёные ЗАБЛЮРЕННЫЕ проблески за контентом.
   СТАТИЧНЫЙ GPU-слой (translateZ) — растеризуется один раз: гладкий скролл,
   без перерисовки и подёргиваний. Без анимации (анимация blur-слоя дёргалась).
   ============================================================================ */
#fx-scope{ position:relative; z-index:0; }
#fx-scope::before{
  content:""; position:fixed; inset:-15%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 80% 8%,  rgba(22,163,74,.10),  transparent 46%),
    radial-gradient(circle at 10% 92%, rgba(16,185,129,.08), transparent 50%),
    radial-gradient(circle at 95% 95%, rgba(34,197,94,.06),  transparent 44%);
  filter:blur(80px);
  transform:translateZ(0);
}
.dark #fx-scope::before{
  background:
    radial-gradient(circle at 80% 8%,  rgba(63,185,80,.13), transparent 46%),
    radial-gradient(circle at 10% 92%, rgba(34,197,94,.09), transparent 50%),
    radial-gradient(circle at 95% 95%, rgba(63,185,80,.06), transparent 44%);
}