/* ============================================================
   identity · reimagined console — visual language
   Monochrome editorial. Two skins: Paper (light) / Ink (dark).
   Density: compact | cozy | comfy. Motion-forward.
   ============================================================ */

/* ---------- skins ---------- */
:root,
[data-skin="paper"]{
  --paper:#F7F7F4;          /* app background (warm near-white) */
  --card:#FFFFFF;           /* raised surface */
  --card-2:#F1F1ED;         /* sunken / hover field */
  --ink:#0C0D11;            /* primary text */
  --ink-2:#42454E;          /* secondary text */
  --ink-3:#797C85;          /* tertiary / meta */
  --ink-4:#A9ABB2;          /* faint */
  --line:#E7E7E1;           /* hairline */
  --line-2:#D6D6CF;         /* stronger hairline */
  --line-3:#C2C2BA;
  --accent:#1F3CFF;         /* electric cobalt — used sparingly */
  --accent-ink:#FFFFFF;     /* text on accent */
  --accent-soft:rgba(31,60,255,.08);
  --accent-line:rgba(31,60,255,.30);
  --danger:#D8202B;
  --danger-soft:rgba(216,32,43,.08);
  --cyan:#0C9D96;
  --ok:#0B7A3B;
  --ok-soft:rgba(11,122,59,.10);
  --warn:#A66400;
  --warn-soft:rgba(166,100,0,.12);
  --shadow-1:0 1px 2px rgba(12,13,17,.05), 0 1px 1px rgba(12,13,17,.04);
  --shadow-2:0 6px 24px -8px rgba(12,13,17,.18), 0 2px 6px -2px rgba(12,13,17,.10);
  --shadow-3:0 24px 70px -20px rgba(12,13,17,.34), 0 8px 24px -10px rgba(12,13,17,.18);
  --grain:rgba(12,13,17,.022);
  color-scheme: light;
}
[data-skin="ink"]{
  --paper:#08090C;
  --card:#121319;
  --card-2:#0D0E13;
  --ink:#F4F5F2;
  --ink-2:#B7B9C0;
  --ink-3:#7E818B;
  --ink-4:#565862;
  --line:#23252E;
  --line-2:#2E313C;
  --line-3:#3A3D4A;
  --accent:#6E86FF;
  --accent-ink:#0A0B0E;
  --accent-soft:rgba(110,134,255,.13);
  --accent-line:rgba(110,134,255,.40);
  --danger:#FF5B61;
  --danger-soft:rgba(255,91,97,.12);
  --cyan:#3FD8D0;
  --ok:#46D08A;
  --ok-soft:rgba(70,208,138,.12);
  --warn:#F0B454;
  --warn-soft:rgba(240,180,84,.14);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 30px -10px rgba(0,0,0,.6), 0 2px 8px -2px rgba(0,0,0,.5);
  --shadow-3:0 30px 80px -24px rgba(0,0,0,.75), 0 10px 30px -12px rgba(0,0,0,.6);
  --grain:rgba(255,255,255,.018);
  color-scheme: dark;
}

/* ---------- density ---------- */
:root,[data-density="cozy"]{ --u:14px; --sp:14px; --row-h:48px; --radius:13px; --radius-sm:9px; --radius-xs:6px; --ctrl-h:38px; }
[data-density="compact"]{ --u:13px; --sp:9px;  --row-h:38px; --radius:10px; --radius-sm:7px; --radius-xs:5px; --ctrl-h:32px; }
[data-density="comfy"]{   --u:15px; --sp:20px; --row-h:60px; --radius:16px; --radius-sm:11px; --radius-xs:7px; --ctrl-h:44px; }

/* ---------- fonts ---------- */
:root{
  --f-display:"Bricolage Grotesque",-apple-system,system-ui,sans-serif;
  --f-ui:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-in:cubic-bezier(.4,0,1,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:var(--u);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:var(--accent-ink); }
button{ font:inherit; color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* type helpers */
.display{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.mono{ font-family:var(--f-mono); font-feature-settings:"zero" 1; }
.eyebrow{ font-family:var(--f-mono); font-size:calc(var(--u) - 3px); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.dim{ color:var(--ink-3); }
.faint{ color:var(--ink-4); }
.t-sm{ font-size:calc(var(--u) - 1px); }
.t-xs{ font-size:calc(var(--u) - 2px); }
.num{ font-family:var(--f-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ---------- scrollbars ---------- */
*{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--ink) 14%,transparent); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--ink) 26%,transparent); background-clip:padding-box; }

/* ============================================================
   atoms
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:calc(var(--u) - 3px); font-weight:600; letter-spacing:.01em;
  padding:.2em .6em; border-radius:99px; white-space:nowrap;
  border:1px solid var(--line-2); color:var(--ink-2); background:transparent;
}
.pill.solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pill.accent{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.pill.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent); background:var(--ok-soft); }
.pill.warn{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent); background:var(--warn-soft); }
.pill.danger{ color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent); background:var(--danger-soft); }
.pill .dot{ width:6px; height:6px; border-radius:99px; background:currentColor; }

.dotState{ width:7px; height:7px; border-radius:99px; display:inline-block; flex:none; }
.dotState.active{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.dotState.pending{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); }
.dotState.disabled{ background:var(--ink-4); }

/* avatar (monogram) */
.ava{
  --s:34px; width:var(--s); height:var(--s); border-radius:9px; flex:none;
  display:grid; place-items:center; font-family:var(--f-mono); font-weight:600;
  font-size:calc(var(--s) * .36); letter-spacing:-.02em;
  background:var(--card-2); color:var(--ink); border:1px solid var(--line-2);
  position:relative; overflow:hidden;
}
.ava.ring{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent); }

/* buttons */
.btn{
  --h:var(--ctrl-h);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  height:var(--h); padding:0 calc(var(--h) * .42); border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  font-size:calc(var(--u) - .5px); font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--spring), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.btn:hover{ border-color:var(--line-3); background:var(--card-2); }
.btn:active{ transform:scale(.96); }
.btn.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.primary:hover{ background:color-mix(in srgb,var(--ink) 88%,var(--accent)); border-color:transparent; }
.btn.accent{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn.accent:hover{ filter:brightness(1.06); }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.ghost:hover{ background:var(--card-2); border-color:var(--line); }
.btn.danger{ color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,var(--line-2)); background:transparent; }
.btn.danger:hover{ background:var(--danger-soft); border-color:var(--danger); }
.btn.sm{ --h:calc(var(--ctrl-h) - 8px); font-size:calc(var(--u) - 2px); border-radius:var(--radius-xs); }
.btn.icon{ padding:0; width:var(--h); }
.btn.block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn .kbd{ font-family:var(--f-mono); font-size:calc(var(--u) - 4px); opacity:.6; border:1px solid currentColor; border-radius:4px; padding:0 .3em; line-height:1.4; }

/* kbd hint chip */
.kbd{ font-family:var(--f-mono); font-size:calc(var(--u) - 4px); padding:.12em .42em; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; color:var(--ink-2); background:var(--card); line-height:1.3; }

/* fields */
.field{ display:flex; flex-direction:column; gap:.4em; }
.field > label{ font-size:calc(var(--u) - 2px); font-weight:600; color:var(--ink-2); }
.input{
  height:var(--ctrl-h); width:100%; padding:0 .8em; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.input::placeholder{ color:var(--ink-4); }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.input{ height:auto; padding:.6em .8em; resize:vertical; min-height:72px; line-height:1.5; }
.hint{ font-size:calc(var(--u) - 2px); color:var(--ink-3); line-height:1.4; }
.hint code{ font-family:var(--f-mono); font-size:.92em; background:var(--card-2); padding:.05em .35em; border-radius:4px; }

/* segmented control — жёлоб + приподнятая белая карточка (утв. 06.07.2026, вариант 03) */
.seg{ display:inline-flex; padding:3px; gap:2px; background:var(--card-2); border:1px solid var(--line-2); border-radius:var(--radius-sm); box-shadow:inset 0 1px 2px rgba(0,0,0,.04); }
.seg button{ border:1px solid transparent; background:transparent; cursor:pointer; padding:.42em .85em; border-radius:calc(var(--radius-sm) - 3px); font-weight:600; font-size:calc(var(--u) - 1.5px); color:var(--ink-3); transition:all .15s; display:inline-flex; align-items:center; gap:5px; position:relative; }
.seg button:hover{ color:var(--ink); }
.seg button.on{ color:var(--ink); background:var(--card); border-color:var(--line-3); box-shadow:0 2px 6px rgba(12,13,17,.10), 0 1px 0 rgba(12,13,17,.04); }
.seg button.on svg{ color:var(--accent); }

/* card */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }

/* divider */
.hr{ height:1px; background:var(--line); border:0; margin:0; }

/* ============================================================
   motion utilities
   ============================================================ */
/* NOTE: entrance keyframes are transform-only (no opacity) so static DOM-clone
   captures never show a blank 0% frame. Overlays fade their backdrop only. */
@keyframes fadeUp{ from{ transform:translateY(10px); } to{ transform:none; } }
@keyframes fadeIn{ from{ transform:translateY(6px); } to{ transform:none; } }
@keyframes popIn{ from{ transform:scale(.96) translateY(8px); } to{ transform:none; } }
@keyframes sheetIn{ from{ transform:translateX(28px); } to{ transform:none; } }
@keyframes overlayIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes scaleIn{ from{ transform:scale(.92); } to{ transform:none; } }
@keyframes rise{ from{ transform:translateY(16px) scale(.99); } to{ transform:none; } }
@keyframes shimmer{ to{ background-position:200% 0; } }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 var(--accent-soft); } 70%{ box-shadow:0 0 0 10px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

/* page / panel switch transition — transform-only (never leaves content at opacity:0 on re-render) */
@keyframes pageIn{ from{ transform:translateY(9px); } to{ transform:none; } }
.page-anim{ animation:pageIn .34s var(--ease) both; }

.stagger > *{ animation:fadeUp .5s var(--ease) both; }

/* ===== login-flow stages ===== */
/* ===== login-flow pipe builder ===== */
.pp-canvas{ transition:border-color .16s; }
.pp-canvas.live{ border-color:var(--accent-line); }
.pp-terminal{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:var(--radius); font-weight:600; }
.pp-terminal.start{ background:var(--card-2); color:var(--ink-2); border:1px solid var(--line); }
.pp-terminal.done{ background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 35%,transparent); }
/* drop gap between nodes — constant height (no reflow on hover/over) */
.pp-gap{ height:14px; display:flex; align-items:center; justify-content:center; position:relative; }
.pp-gap::before{ content:""; width:2px; height:8px; background:var(--line-2); opacity:.5; border-radius:2px; transition:transform .12s, background .12s; }
.pp-gap.live::before{ transform:scaleY(1.4); }
.pp-gap-line{ display:none; }
.pp-gap-plus{ position:absolute; opacity:0; width:20px; height:20px; border-radius:99px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:700; font-size:13px; transition:opacity .12s; pointer-events:none; }
.pp-gap.live:hover .pp-gap-plus, .pp-gap.on .pp-gap-plus{ opacity:1; }
.pp-gap.on::before{ display:none; }
/* dragged node travels live through the list — marked with a dashed halo */
.pp-node.pp-dragging{ outline:1.5px dashed var(--accent); outline-offset:2px; background:var(--accent-soft); }
.pp-ghost{ display:none; }
/* node — neutral side, requirement shown by the pill only */
.pp-node{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); box-shadow:var(--shadow-1);
  border-left:4px solid var(--line-2); transition:border-color .16s, box-shadow .16s; }
.pp-node:hover{ box-shadow:var(--shadow-2); }
.pp-node.req-off{ opacity:.55; }
.pp-node.bad{ border-color:var(--danger); background:var(--danger-soft); }
.pp-node.cond-target{ outline:1.5px dashed color-mix(in srgb,var(--warn) 55%,transparent); outline-offset:2px; }
.pp-node.cond-over{ outline:2px solid var(--warn); outline-offset:2px; background:var(--warn-soft); }
.pp-node-row{ display:flex; align-items:center; gap:11px; padding:11px 13px; }
.pp-grip{ color:var(--ink-3); cursor:grab; flex:none; user-select:none; font-size:17px; line-height:1; letter-spacing:-3px; }
.pp-node:hover .pp-grip, .pp-chip:hover .pp-grip{ color:var(--ink); }
.pp-ico{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--card-2); color:var(--ink-2); }
.pp-ico.block{ background:var(--card-2); color:var(--ink-2); }
.pp-req{ flex:none; font-family:var(--f-mono); font-size:calc(var(--u) - 4px); font-weight:600; padding:2px 8px; border-radius:99px; border:1px solid currentColor; }
@media (max-width:680px){ .pp-req{ display:none; } }
@media (max-width:900px){ .wh-grid{ grid-template-columns:1fr !important; } }
/* block as a clear titled container */
.pp-block-card{ border:1px solid var(--line-2); border-radius:var(--radius); background:var(--card-2); box-shadow:var(--shadow-1); overflow:hidden; }
.pp-block-card.bad{ border-color:var(--danger); }
.pp-block-head{ display:flex; align-items:center; gap:11px; padding:11px 13px; background:var(--card); border-bottom:1px solid var(--line); }
.pp-block-mode{ display:inline-flex; align-items:center; gap:5px; margin-top:2px; font-family:var(--f-mono); font-size:calc(var(--u) - 4px);
  letter-spacing:.05em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.pp-block-inner{ padding:10px 12px 12px; display:flex; flex-direction:column; }
.pp-block-inner .pp-node{ background:var(--card); }
.pp-ico.block{ background:var(--accent-soft); color:var(--accent); }
/* legend chips */
.pp-chip{ display:flex; align-items:center; gap:9px; padding:9px 11px; cursor:grab; border:1px solid var(--line); background:var(--card);
  border-radius:var(--radius-sm); font-weight:600; font-size:calc(var(--u) - 1px); box-shadow:var(--shadow-1);
  transition:border-color .14s, transform .14s, box-shadow .14s; }
.pp-chip:hover{ border-color:var(--accent-line); transform:translateY(-1px); box-shadow:var(--shadow-2); }
.pp-chip:active{ cursor:grabbing; }
.pp-chip.accent{ border-style:dashed; border-color:var(--accent-line); background:color-mix(in srgb,var(--accent) 4%,transparent); }
.pp-empty{ padding:9px 11px; border:1.5px dashed var(--line-3); border-radius:var(--radius-sm); color:var(--ink-4); font-size:calc(var(--u) - 2px); text-align:center; }
.pp-empty.big{ padding:26px; margin:4px 0; }
/* floating drag ghost that follows the cursor */
.pp-floating{ position:fixed; z-index:900; pointer-events:none; transform:translate(12px,12px);
  display:flex; align-items:center; gap:8px; padding:9px 13px; background:var(--card); border:1px solid var(--accent-line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-3); font-weight:600; font-size:calc(var(--u) - 1px); color:var(--ink); }
.pp-grip{ touch-action:none; }

/* styled (non-native) select */
.ssel{ position:relative; flex:none; }
.ssel-btn{ display:flex; align-items:center; gap:7px; width:100%; height:calc(var(--ctrl-h) - 4px); padding:0 9px; cursor:pointer;
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius-sm); font-size:calc(var(--u) - 2px); font-weight:600; color:var(--ink); transition:border-color .14s, box-shadow .14s; }
.ssel-btn:hover{ border-color:var(--border-bright,var(--line-3)); }
.ssel-btn.open{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ssel-lbl{ flex:1; text-align:left; white-space:nowrap; }
.ssel-dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.ssel-pop{ position:absolute; top:calc(100% + 5px); right:0; min-width:180px; z-index:80; padding:5px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-3); animation:popIn .16s var(--spring) both; }
.ssel-opt{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 9px; cursor:pointer; border:0; background:transparent;
  border-radius:6px; font-size:calc(var(--u) - 1px); font-weight:500; color:var(--ink); text-align:left; transition:background .12s; }
.ssel-opt:hover{ background:var(--card-2); }
.ssel-opt.on{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.ssel-opt.off{ opacity:.45; cursor:not-allowed; }

/* "+" add control — position-aware popover (opens up/down, never overlaps insert point) */
.pp-add-wrap{ position:relative; margin-top:8px; }
.pp-add-portal-bg{ position:fixed; inset:0; z-index:300; }
.pp-add-pop{ z-index:301; padding:6px; max-height:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-3); animation:popIn .16s var(--spring) both; }
.pp-add-grp{ font-family:var(--f-mono); font-size:calc(var(--u) - 4px); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); padding:8px 8px 5px; }
.pp-add-opt{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 9px; cursor:pointer; border:0; background:transparent;
  border-radius:7px; color:var(--ink); text-align:left; transition:background .12s; }
.pp-add-opt:hover{ background:var(--card-2); }
.pp-add{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px; cursor:pointer;
  border:1.5px dashed var(--line-3); border-radius:var(--radius-sm); background:transparent; color:var(--ink-3); font-weight:600;
  font-size:calc(var(--u) - 1px); transition:border-color .15s, color .15s, background .15s; }
.pp-add:hover, .pp-add.open{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.pp-ico.sm{ width:28px; height:28px; border-radius:7px; }
.hz-add-pop{ position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-3); z-index:40; overflow:hidden; animation:popIn .18s var(--spring) both; }

/* block grouping segmented (any / sequence) */
.pp-mode-seg{ display:inline-flex; gap:2px; margin-top:4px; padding:2px; border-radius:99px; background:var(--card-2); border:1px solid var(--line); }
.pp-mode-seg button{ border:0; background:transparent; cursor:pointer; padding:3px 11px; border-radius:99px; font-size:calc(var(--u) - 3px); font-weight:600; color:var(--ink-3); transition:all .14s; white-space:nowrap; }
.pp-mode-seg button.on{ background:var(--accent); color:#fff; }

/* ===== horizontal flow ===== */
.hz-flow{ display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:center; gap:0; width:max-content; min-width:100%; padding:4px 2px; box-sizing:border-box; }
.hz-canvas{ cursor:grab; background-image:none; }
.hz-canvas.panning{ cursor:grabbing; }
.hz-canvas.panning > div:last-child{ pointer-events:none; }
/* hz-canvas dot grid is now inline via position:absolute bg; override old bg-image */
.hz-canvas{ background-image:none !important; }
.hz-term{ flex:none; align-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center;
  width:118px; padding:16px 12px; border-radius:var(--radius); font-size:calc(var(--u) - 2px); }
.hz-term b{ font-weight:700; color:var(--ink); line-height:1.1; white-space:nowrap; }
.hz-term-sub{ color:var(--ink-3); font-size:calc(var(--u) - 3px); white-space:nowrap; }
.hz-term-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; margin-bottom:2px; background:var(--card); border:1px solid var(--line); color:var(--ink-2); box-shadow:var(--shadow-1); }
.hz-term-ic.done{ background:var(--ok); border-color:var(--ok); color:#fff; }
.hz-term.start{ background:var(--card-2); color:var(--ink-2); border:1px solid var(--line); }
.hz-term.done{ background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 35%,transparent); }
.hz-arrow{ flex:none; align-self:center; width:34px; height:22px; position:relative; }
.hz-arrow::before{ content:""; position:absolute; left:2px; right:9px; top:50%; height:2px; transform:translateY(-50%); border-radius:2px;
  background:linear-gradient(90deg, var(--line-2), var(--accent-line)); }
.hz-arrow::after{ content:""; position:absolute; right:7px; top:50%; width:8px; height:8px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); border-radius:1px; transform:translateY(-50%) rotate(45deg); }
.hz-card{ flex:none; align-self:center; width:188px; padding:12px 13px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line-2);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-1); transition:box-shadow .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); }
.hz-card:hover{ box-shadow:var(--shadow-2); }
.hz-card.req-off{ opacity:.55; }
.hz-card.bad{ border-color:var(--danger); background:var(--danger-soft); }
.hz-card-top{ display:flex; align-items:center; gap:4px; }
.hz-block{ flex:none; align-self:center; min-width:212px; padding:12px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-1); transition:box-shadow .16s var(--ease), border-color .16s var(--ease); }
.hz-block:hover{ box-shadow:var(--shadow-2); }
.hz-block.bad{ border-color:var(--danger); }
.hz-block-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.hz-lanes{ display:flex; flex-direction:column; gap:8px; padding:9px; border-radius:var(--radius-sm); background:var(--card); position:relative; }
.hz-lanes.any{ border:1.5px dashed var(--accent-line); }
.hz-lanes .hz-card{ width:100%; align-self:stretch; box-shadow:none; }
.hz-req{ margin-top:8px; }
.hz-ctrls{ display:flex; align-items:center; gap:3px; }
.hz-grip{ width:22px; height:24px; display:grid; place-items:center; cursor:grab; color:var(--ink-3); letter-spacing:-3px; font-size:13px; user-select:none; touch-action:none; }
.hz-grip:hover{ color:var(--accent); }
.hz-grip:active{ cursor:grabbing; }
.hz-card.dragging, .hz-block.dragging{ opacity:.4; }
.hz-title{ flex:1; min-width:0; cursor:text; border-radius:4px; padding:1px 3px; transition:color .14s, background .14s; }
.hz-title:hover{ color:var(--accent); background:var(--accent-soft); }
.hz-title-edit{ flex:1; min-width:0; font:inherit; font-weight:700; color:var(--ink); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:5px; padding:1px 5px; outline:none; }
.hz-collapse{ transition:transform .2s var(--ease); }
.hz-collapse svg{ transform:rotate(90deg); }
.hz-collapse.col svg{ transform:rotate(-90deg); }
.hz-collapsable{ overflow:hidden; transition:max-height .26s var(--ease), opacity .2s var(--ease); max-height:1600px; opacity:1; }
.hz-collapsable.col{ max-height:0; opacity:0; }
.hz-ctrls button{ width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--line); background:var(--card); border-radius:6px;
  cursor:pointer; color:var(--ink-2); font-size:15px; line-height:1; transition:all .13s; }
.hz-ctrls button:hover:not(:disabled){ border-color:var(--accent-line); color:var(--accent); }
.hz-ctrls button:disabled{ opacity:.3; cursor:not-allowed; }
.hz-ctrls button.del:hover{ border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }
.hz-arrow-plain{ flex:none; align-self:center; width:36px; height:20px; position:relative; }
.hz-arrow-plain::before{ content:""; position:absolute; left:2px; right:9px; top:50%; height:2px; transform:translateY(-50%); background:#d1d5db; }
.hz-arrow-plain::after{ content:""; position:absolute; right:2px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:7px solid #d1d5db; }
.stagger > *:nth-child(1){ animation-delay:.02s; }
.stagger > *:nth-child(2){ animation-delay:.06s; }
.stagger > *:nth-child(3){ animation-delay:.10s; }
.stagger > *:nth-child(4){ animation-delay:.14s; }
.stagger > *:nth-child(5){ animation-delay:.18s; }
.stagger > *:nth-child(6){ animation-delay:.22s; }
.stagger > *:nth-child(7){ animation-delay:.26s; }
.stagger > *:nth-child(8){ animation-delay:.30s; }
.stagger > *:nth-child(9){ animation-delay:.34s; }
.stagger > *:nth-child(10){ animation-delay:.38s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   motion toolkit — hovers, transforms, ambient animation
   ============================================================ */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes drift{ 0%{ transform:translate(0,0); } 33%{ transform:translate(2%,-3%); } 66%{ transform:translate(-2%,2%); } 100%{ transform:translate(0,0); } }
@keyframes auroraSpin{ to{ transform:rotate(360deg); } }
@keyframes edgeFlow{ to{ stroke-dashoffset:-24; } }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@keyframes sheen{ 0%{ transform:translateX(-120%) skewX(-18deg); } 60%,100%{ transform:translateX(260%) skewX(-18deg); } }
@keyframes gridPan{ to{ background-position:38px 38px; } }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
@keyframes popNum{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
@keyframes flyOut{ to{ opacity:0; transform:translateX(40px) scale(.96); } }
@keyframes collapse{ to{ max-height:0; opacity:0; margin:0; padding-top:0; padding-bottom:0; transform:scale(.97); } }
/* GPU-only exits — composited transform+opacity, никакого layout каждый кадр */
@keyframes overlayOut{ to{ opacity:0; } }
@keyframes modalOut{ to{ opacity:0; transform:translateY(6px) scale(.985); } }
@keyframes sheetOut{ to{ opacity:0; transform:translateX(32px); } }
@keyframes rowOut{ to{ opacity:0; transform:translateX(32px); } }
.collapsing{ animation:rowOut .24s var(--ease) forwards !important; pointer-events:none; will-change:transform,opacity; }

/* hover lift — for cards/tiles/rows */
.lift{ transition:transform .26s var(--spring), box-shadow .26s var(--ease), border-color .2s; }
.lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:var(--line-3); }
.lift:active{ transform:translateY(-1px) scale(.99); }
.press{ transition:transform .15s var(--spring); }
.press:active{ transform:scale(.95); }

/* sheen sweep overlay (put on a relative, overflow-hidden parent) */
.sheen{ position:relative; overflow:hidden; }
.sheen::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(100deg, transparent, color-mix(in srgb,var(--accent) 22%,transparent), transparent);
  transform:translateX(-120%) skewX(-18deg); pointer-events:none; }
.sheen.go::after{ animation:sheen 1.05s var(--ease) 1; }

/* ambient background — soft, even wash (no harsh corner blob) */
.aurora{ position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(145% 75% at 50% -25%, color-mix(in srgb,var(--accent) 9%,transparent) 0%, transparent 52%),
    radial-gradient(120% 70% at 50% 120%, color-mix(in srgb,var(--cyan) 6%,transparent) 0%, transparent 55%); }
[data-skin="ink"] .aurora{
  background:
    radial-gradient(145% 75% at 50% -25%, color-mix(in srgb,var(--accent) 13%,transparent) 0%, transparent 52%),
    radial-gradient(120% 70% at 50% 120%, color-mix(in srgb,var(--cyan) 9%,transparent) 0%, transparent 55%); }

/* faint moving grid */
.gridfield{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:38px 38px; opacity:.5; animation:gridPan 14s linear infinite; -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 40%, transparent 78%); mask-image:radial-gradient(ellipse at 50% 40%, #000 40%, transparent 78%); }

/* flowing edge (svg path) */
.edgeflow{ stroke-dasharray:5 6; animation:edgeFlow .9s linear infinite; }

/* live dot */
.livedot{ width:8px; height:8px; border-radius:50%; background:var(--ok); animation:livePulse 1.8s ease-out infinite; }

/* one-shot sheen sweep when an element mounts (assist card) */
.assist-sheen{ position:relative; overflow:hidden; }
.assist-sheen::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, color-mix(in srgb,var(--accent) 22%,transparent), transparent);
  transform:translateX(-130%) skewX(-18deg); animation:sheen 1.1s var(--ease) .15s 1; }

@media (prefers-reduced-motion: reduce){
  .aurora::before,.aurora::after,.gridfield,.edgeflow,.livedot,.sheen.go::after{ animation:none !important; }
}

/* ============================================================
   LOGIN — two-pane (visual aside + form) + header user menu
   ============================================================ */
.login-grid{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-aside{ position:relative; overflow:hidden; border-right:1px solid var(--line); background:var(--card-2); }
.login-form{ position:relative; display:grid; place-items:center; padding:32px 26px; background:var(--paper); }
@media (max-width:880px){ .login-grid{ grid-template-columns:1fr; } .login-aside{ display:none; } }

/* orbit decoration */
.login-orbit{ position:relative; width:min(360px,52vw); aspect-ratio:1; display:grid; place-items:center; }
.lo-ring{ position:absolute; inset:0; border:1px solid var(--line-2); border-radius:50%; animation:spinSlow 32s linear infinite; }
.lo-ring.r2{ inset:14%; border-style:dashed; animation-duration:22s; animation-direction:reverse; }
.lo-ring.r3{ inset:30%; border-color:color-mix(in srgb,var(--accent) 30%,var(--line-2)); animation-duration:16s; }
.lo-core{ position:relative; z-index:2; width:74px; height:74px; border-radius:20px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--accent-line); color:var(--accent); box-shadow:var(--shadow-2); }
.lo-node{ position:absolute; width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.lo-node.n0{ top:2%; left:50%; } .lo-node.n1{ top:30%; right:3%; background:var(--cyan); box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 18%,transparent); }
.lo-node.n2{ bottom:8%; right:18%; } .lo-node.n3{ bottom:8%; left:18%; background:var(--ink); box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 12%,transparent); }
.lo-node.n4{ top:30%; left:3%; }

/* header user dropdown rows */
.menu-row{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:0; border-radius:var(--radius-sm);
  background:transparent; cursor:pointer; text-align:left; font-weight:600; font-size:calc(var(--u) - .5px); color:var(--ink); transition:background .13s; }
.menu-row:hover{ background:var(--card-2); }
.menu-row.danger{ color:var(--danger); }
.menu-row.danger:hover{ background:var(--danger-soft); }
@media (prefers-reduced-motion: reduce){ .lo-ring{ animation:none !important; } }