/* ==========================================================================
   VP Vezérlő — app.css
   Phone-first control dashboard. One file, sectioned:
     1  Tokens (dark default + light) · brand accents · state colours
     2  Reset & base
     3  Icon tile (.ic) — icon LEFT, text RIGHT everywhere
     4  Buttons (.btn always #fff) · .iconbtn · .stepper · .switch
     5  Shell: .app · .appbar · .sidenav · .view · .page · .tabbar
     6  Rails (.rail) · .pill · .chip · .seg
     7  KPI grid · job rows · cards · pipe-bar · progress · badge · live
     8  Log · alert · empty · skeleton · kv · hr · section
     9  Forms
    10  Sheet · confirm · toasts
    11  Chat
    12  Login (u-login) · u- helpers
    13  Breakpoints: ≤393 · ≤430 · ≥431 · ≥768 · ≥1024 · reduced-motion
   Rules honoured: no backdrop-filter · solid bars · white CTA text · 44px taps ·
   KPI 2-col on phone · swipe rails with edge-fade · no emoji icons.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  color-scheme:dark;

  /* surfaces */
  --bg-0:#0b0f1a;
  --bg-1:#111827;
  --surface:#161d2e;
  --surface-2:#1c2538;
  --bar:#0f1524;                 /* solid app bar / tab bar / composer */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --hi:rgba(255,255,255,.06);    /* inset 1px highlight on layered tiles */
  --shadow-c:rgba(0,0,0,.6);     /* soft shadow colour */
  --code-bg:#0b0f1a;
  --sk-hi:rgba(255,255,255,.08); /* skeleton shimmer */
  --glow:rgba(139,92,246,.16);   /* body top glow */

  /* ink */
  --ink:#f1f5f9;
  --muted:#94a3b8;

  /* states */
  --green:#22c55e;
  --green-deep:#15803d;
  --amber:#f59e0b;
  --red:#ef4444;
  --blue:#3b82f6;
  --violet:#8b5cf6;
  --teal:#14b8a6;
  --gold:#eab308;
  --grey:#64748b;

  /* app accent (violet) — data-brand overrides it */
  --accent:#8b5cf6;

  /* radii */
  --r-s:10px;
  --r-m:14px;
  --r-l:18px;
  --r-pill:999px;

  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;

  /* type */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px;
  --fs-20:20px; --fs-24:24px; --fs-28:28px;

  /* shell geometry */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --appbar-h:calc(56px + var(--sat));
  --tabbar-h:calc(64px + var(--sab));
  --page-px:14px;
  --page-pt:14px;
  --page-pb:calc(var(--tabbar-h) + 18px);
}

/* light greenish palette (same roles) */
[data-theme=light]{
  color-scheme:light;
  --bg-0:#eef5f0;
  --bg-1:#f6faf7;
  --surface:#ffffff;
  --surface-2:#f1f6f2;
  --bar:#ffffff;
  --line:rgba(22,163,74,.16);
  --line-2:rgba(22,163,74,.28);
  --hi:rgba(255,255,255,.92);
  --shadow-c:rgba(10,31,20,.18);
  --code-bg:#e9f0eb;
  --sk-hi:rgba(0,0,0,.06);
  --glow:rgba(22,163,74,.12);
  --ink:#0a1f14;
  --muted:#5f6f66;
  --grey:#64748b;
}

/* brand accents — CONTRACT §0, display order */
[data-brand=vegaspokie]   {--accent:#22c55e}
[data-brand=slotspokie]   {--accent:#0ea5e9}
[data-brand=slotsgamblers]{--accent:#f97316}
[data-brand=fairgobonuses]{--accent:#eab308}
[data-brand=fairgologinaus]{--accent:#84cc16}
[data-brand=ndbcodes]     {--accent:#6366f1}
[data-brand=freeslots]    {--accent:#7b3ff2}
[data-brand=ozwinreview]  {--accent:#14b8a6}
[data-brand=slotsjuice]   {--accent:#f43f5e}
[data-brand=slotspunter]  {--accent:#3b82f6}
[data-brand=slotsbag]     {--accent:#d946ef}
[data-brand=landzdown]    {--accent:#06b6d4}

/* state colours — --st = tint/ic colour · --st-solid = white-text-safe solid
   --tint = ic background strength. Inherited, so nested children follow. */
[data-state=run] {--st:var(--green);   --st-solid:#16a34a; --tint:20%}
[data-state=wait]{--st:var(--amber);   --st-solid:#b45309; --tint:18%}
[data-state=done]{--st:var(--green-deep);--st-solid:#15803d;--tint:12%}
[data-state=err] {--st:var(--red);     --st-solid:#dc2626; --tint:18%}
[data-state=off] {--st:var(--grey);    --st-solid:#475569; --tint:12%}
[data-state=info]{--st:var(--blue);    --st-solid:#2563eb; --tint:18%}
[data-state=ai]  {--st:var(--violet);  --st-solid:#7c3aed; --tint:18%}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%}
body{
  margin:0;min-height:100%;
  font-family:var(--font);font-size:var(--fs-14);line-height:1.45;
  color:var(--ink);
  background:
    radial-gradient(900px 380px at 85% -12%,var(--glow),transparent 62%),
    var(--bg-0);
  background-color:var(--bg-0);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
[hidden]{display:none !important}   /* the one universal override: a class must never un-hide */
h1,h2,h3,h4,p{margin:0}
a{color:var(--blue);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{display:block}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.num,[class*="__value"],[class*="__time"],[class*="__count"]{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   3. ICON TILE — .ic: 40×40, rounded 12, tinted from state (or accent).
      Always the LEFT child of a flex row; text sits to its RIGHT.
   -------------------------------------------------------------------------- */
.ic{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  color:var(--st,var(--accent));
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--st,var(--accent)) calc(var(--tint,18%) + 6%),transparent),
      color-mix(in srgb,var(--st,var(--accent)) var(--tint,18%),transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st,var(--accent)) 26%,transparent),
             inset 0 1px 0 var(--hi);
}
.ic svg{width:22px;height:22px;stroke:currentColor;flex:0 0 auto}

/* live pulse dot on the icon of a running row/tile/pill */
.kpi[data-state=run]>.ic::after,
.job[data-state=run]>.ic::after,
.pill[data-state=run]>.ic::after,
.card[data-state=run]>.card__head>.ic::after,
.msg--ai[data-state=run]>.msg__parts>.ic::after{
  content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 2px var(--surface);
  animation:live-pulse 1.6s ease-out infinite;
}

/* --------------------------------------------------------------------------
   4. BUTTONS — .btn: solid layered gradient, WHITE text on every variant.
   -------------------------------------------------------------------------- */
.btn{
  --b1:#8b5cf6;--b2:#6d28d9;            /* default = violet */
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border:0;border-radius:12px;
  font-family:var(--font);font-size:var(--fs-14);font-weight:700;line-height:1.2;
  color:#fff;text-decoration:none;white-space:nowrap;cursor:pointer;
  background-color:var(--b2);
  background-image:linear-gradient(180deg,var(--b1),var(--b2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18),
             0 8px 18px -10px color-mix(in srgb,var(--b2) 80%,#000);
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
  transition:filter .15s ease,transform .12s ease,box-shadow .15s ease;
}
.btn:hover{color:#fff;filter:brightness(1.08)}
.btn:active{color:#fff;transform:translateY(1px) scale(.985);filter:brightness(.96)}
.btn:focus{color:#fff}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--b1) 45%,transparent),
             inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;filter:none;transform:none;color:#fff}
.btn .ic{width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;color:inherit}
.btn .ic svg{width:18px;height:18px}

.btn--green {--b1:#16a34a;--b2:#15803d}
.btn--amber {--b1:#d97706;--b2:#b45309}   /* deepened amber — white text stays */
.btn--red   {--b1:#dc2626;--b2:#b91c1c}
.btn--blue  {--b1:#2563eb;--b2:#1d4ed8}
.btn--violet{--b1:#8b5cf6;--b2:#6d28d9}
.btn--ghost {--b1:#2e3a55;--b2:#1c2538;
  box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.07),
             0 6px 14px -10px rgba(0,0,0,.7)}
[data-theme=light] .btn--ghost{--b1:#4b5b74;--b2:#334155;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px -10px rgba(10,31,20,.5)}

.btn--sm{min-height:36px;padding:0 12px;font-size:var(--fs-13);border-radius:10px;gap:6px}
.btn--sm .ic svg{width:16px;height:16px}
.btn--block{display:flex;width:100%}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-grid .btn{width:100%;padding:0 10px}

/* busy spinner (CSS only) — the label stays white and visible */
.btn.is-busy{pointer-events:none;opacity:.88}
.btn.is-busy .ic{display:none}
.btn.is-busy::before{
  content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}

/* round icon button 44×44 */
.iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:44px;height:44px;min-width:44px;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  color:var(--ink);text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--hi);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,filter .15s ease;
}
.iconbtn:active{transform:scale(.94)}
.iconbtn .ic{width:24px;height:24px;border-radius:0;background:transparent;box-shadow:none;color:inherit}
.iconbtn .ic svg{width:22px;height:22px}
.iconbtn .badge{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  font-size:var(--fs-11);border-radius:var(--r-pill);
  background:var(--red);color:#fff;box-shadow:0 0 0 2px var(--bar);
}

/* stepper  [−] 2 [+] */
.stepper{
  display:inline-flex;align-items:center;flex:0 0 auto;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 1px 0 var(--hi);
}
.stepper__btn{
  width:44px;height:44px;border:0;background:transparent;color:var(--ink);
  font-size:var(--fs-20);font-weight:700;line-height:1;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.stepper__btn:active{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.stepper__btn:disabled{opacity:.4;cursor:not-allowed}
.stepper__val{
  min-width:40px;text-align:center;font-size:var(--fs-16);font-weight:800;
  font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line);
  align-self:stretch;display:inline-flex;align-items:center;justify-content:center;
}

/* CSS-only toggle for <input class="switch" type="checkbox"> */
input.switch{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:44px;height:26px;margin:0;border-radius:var(--r-pill);
  background:#334155;border:0;position:relative;cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  transition:background .18s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
input.switch::before{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .18s ease;
}
input.switch:checked{background:linear-gradient(180deg,#22c55e,#16a34a)}
input.switch:checked::before{transform:translateX(18px)}
input.switch:disabled{opacity:.5;cursor:not-allowed}
input.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.switch-row{
  display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 12px;
  border-radius:var(--r-m);cursor:pointer;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--hi);
  margin-top:8px;-webkit-tap-highlight-color:transparent;
}
.switch-row>.ic{flex:0 0 auto}
.switch-row__label{flex:1 1 0%;min-width:0;font-size:var(--fs-14);font-weight:700}
.switch-row__hint{flex:0 0 auto;font-size:var(--fs-12);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   5. SHELL
   -------------------------------------------------------------------------- */
.app{
  display:grid;grid-template-columns:minmax(0,1fr);
  min-height:100vh;min-height:100dvh;
  padding-top:var(--appbar-h);
}

/* App bar — FIXED (a sticky item inside a grid row can not leave its row). */
.appbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  height:var(--appbar-h);padding:var(--sat) var(--page-px) 0;
  background:var(--bar);border-bottom:1px solid var(--line);
}
.appbar__logo{
  flex:0 0 auto;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;
  font-size:var(--fs-13);font-weight:900;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 55%,#2563eb 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px -8px rgba(109,40,217,.9);
}
.appbar__title{
  flex:1 1 0%;min-width:0;font-size:var(--fs-16);font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appbar__sub{font-size:var(--fs-12);font-weight:500;color:var(--muted);margin-left:6px}
.appbar .live{flex:0 0 auto;margin:0 4px}

/* side nav (tablet/desktop only) */
.sidenav{display:none}
.sidenav__item{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;
  border-radius:12px;color:var(--muted);font-size:var(--fs-14);font-weight:600;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:background .15s ease,color .15s ease;
}
.sidenav__item>.ic{width:36px;height:36px;border-radius:10px;color:var(--muted);
  background:color-mix(in srgb,var(--muted) 10%,transparent);box-shadow:none}
.sidenav__item>.ic svg{width:20px;height:20px}
.sidenav__label{flex:1 1 0%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidenav__item:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ink)}
.sidenav__item.is-on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)}
.sidenav__item.is-on>.ic{color:#fff;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 75%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* scrolling view + page */
.view{min-width:0;padding:var(--page-pt) var(--page-px) var(--page-pb);outline:none}
.page{max-width:1280px;margin:0 auto;min-width:0}
.page__head{display:flex;align-items:center;gap:10px;min-height:44px;margin:2px 0 12px}
.page__title{flex:1 1 0%;min-width:0;font-size:var(--fs-24);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.page__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* bottom tab bar (phone only) — the ONE place icon-above-label is allowed */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);
  height:var(--tabbar-h);padding:0 0 var(--sab);
  background:var(--bar);border-top:1px solid var(--line);
}
.tabbar__tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;height:100%;padding:0;border:0;background:transparent;
  color:var(--muted);font-family:var(--font);font-size:var(--fs-11);font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
  transition:color .15s ease;
}
.tabbar__tab .ic{width:48px;height:28px;border-radius:var(--r-pill);color:inherit;
  background:transparent;box-shadow:none;transition:background .15s ease}
.tabbar__tab .ic svg{width:22px;height:22px}
.tabbar__label{line-height:1;white-space:nowrap}
.tabbar__tab.is-on{color:var(--accent)}
.tabbar__tab.is-on .ic{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.tabbar__tab:active .ic{transform:scale(.94)}

/* --------------------------------------------------------------------------
   6. RAILS · PILLS · CHIPS · SEG
   -------------------------------------------------------------------------- */
.rail{
  display:flex;gap:8px;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scroll-padding:14px;
  margin:0 calc(-1 * var(--page-px)) 12px;
  padding:6px var(--page-px);
  scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;min-height:44px}
.rail.is-peek>*{animation:rail-peek 900ms cubic-bezier(.4,0,.2,1) 1}
@keyframes rail-peek{0%{transform:translateX(0)}45%{transform:translateX(-18px)}100%{transform:translateX(0)}}

/* status pill: [ic] label [count] */
.pill{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 6px;
  border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--st,var(--accent)) 34%,var(--line));
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--st,var(--accent)) 20%,var(--surface-2)),
    color-mix(in srgb,var(--st,var(--accent)) 10%,var(--surface)));
  color:var(--ink);font-family:var(--font);font-size:var(--fs-13);font-weight:700;
  box-shadow:inset 0 1px 0 var(--hi),0 6px 14px -10px var(--shadow-c);
  cursor:pointer;text-decoration:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
}
.pill>.ic{width:30px;height:30px;border-radius:var(--r-pill);box-shadow:none}
.pill>.ic svg{width:16px;height:16px}
.pill__label{white-space:nowrap}
.pill__count{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--st-solid,var(--accent));color:#fff;
  font-size:var(--fs-12);font-weight:800;font-variant-numeric:tabular-nums;
}
.pill.is-on{border-color:var(--st-solid,var(--accent));box-shadow:0 0 0 2px color-mix(in srgb,var(--st,var(--accent)) 30%,transparent)}
.pill:active{transform:scale(.97)}

/* chip (brand / filter) */
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  color:var(--ink);font-family:var(--font);font-size:var(--fs-13);font-weight:700;
  text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 var(--hi);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
}
.chip__dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.chip.is-on{
  border-color:color-mix(in srgb,var(--accent) 60%,var(--line));
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 30%,var(--surface-2)),
    color-mix(in srgb,var(--accent) 16%,var(--surface)));
}
.chip:active{transform:scale(.97)}

/* 2-option segmented control (3+ options → use a .rail instead) */
.seg{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
  padding:3px;margin:0 0 14px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.seg__btn{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;
  border:0;border-radius:11px;background:transparent;
  color:var(--muted);font-family:var(--font);font-size:var(--fs-14);font-weight:700;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
  transition:background .15s ease,color .15s ease;
}
.seg__btn.is-on{
  color:#fff;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px -6px color-mix(in srgb,var(--accent) 80%,#000);
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}

/* --------------------------------------------------------------------------
   7. KPI · JOB · CARD · PIPE · PROGRESS · BADGE · LIVE
   -------------------------------------------------------------------------- */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.kpi{
  display:flex;align-items:center;gap:10px;min-width:0;min-height:68px;padding:12px;
  border-radius:var(--r-m);
  border:1px solid color-mix(in srgb,var(--st,var(--accent)) 30%,var(--line));
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--st,var(--accent)) 24%,var(--surface)) 0%,
    color-mix(in srgb,var(--st,var(--accent)) 8%,var(--surface)) 100%);
  box-shadow:inset 0 1px 0 var(--hi),0 10px 24px -16px var(--shadow-c);
}
.kpi>.ic{flex:0 0 auto}
.kpi__body{flex:1 1 0%;min-width:0}
.kpi__value{
  font-size:var(--fs-24);font-weight:800;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi__value small{font-size:var(--fs-13);font-weight:600;color:var(--muted);margin-left:2px;letter-spacing:0}
.kpi__label{
  margin-top:2px;font-size:var(--fs-12);font-weight:600;color:var(--muted);line-height:1.25;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  overflow-wrap:anywhere;
}

/* job / task / thread row */
.job{
  display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 12px;margin-top:8px;
  border-radius:var(--r-m);border:1px solid color-mix(in srgb,var(--st,var(--line)) 22%,var(--line));
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 1px 0 var(--hi),0 8px 20px -16px var(--shadow-c);
  color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.job[role=button],.job[href]{cursor:pointer}
.job[role=button]:active,.job[href]:active{transform:scale(.99);filter:brightness(1.05)}
.job>.ic{flex:0 0 auto}
.job__body{flex:1 1 0%;min-width:0}
.job__title{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-size:var(--fs-14);font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.job__title>*:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.job__brand{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  padding:1px 8px 1px 6px;border-radius:var(--r-pill);
  font-size:var(--fs-11);font-weight:800;letter-spacing:.02em;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent);
}
.job__brand::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
[data-theme=light] .job__brand{color:color-mix(in srgb,var(--accent) 62%,#000)}
.job__meta{margin-top:2px;font-size:var(--fs-12);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job__side{flex:0 0 auto;text-align:right;min-width:0}
.job__time{font-size:var(--fs-13);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.job__hb{margin-top:2px;font-size:var(--fs-11);font-weight:700;color:var(--st,var(--muted));
  font-variant-numeric:tabular-nums;white-space:nowrap}
.job--done{opacity:.72}
.job--compact{min-height:56px;padding:6px 10px}
.job--compact>.ic{width:32px;height:32px;border-radius:10px}
.job--compact>.ic svg{width:18px;height:18px}
.job[data-state=run]{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.job[data-state=err]{border-color:color-mix(in srgb,var(--red) 45%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--red) 10%,var(--surface-2)),var(--surface))}

/* card */
.card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:14px;margin-top:12px;border-radius:var(--r-l);
  border:1px solid color-mix(in srgb,var(--st,var(--line)) 18%,var(--line));
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 1px 0 var(--hi),0 12px 30px -20px var(--shadow-c);
  min-width:0;
}
.card__head{display:flex;align-items:center;gap:12px;min-height:40px}
.card__head>.ic{flex:0 0 auto}
.card__title{
  flex:1 1 0%;min-width:0;font-size:var(--fs-16);font-weight:800;letter-spacing:-.01em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card__aside{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.card__body{margin-top:12px;font-size:var(--fs-14);min-width:0}
.card__body>p+p{margin-top:8px}
.card__foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.card__foot .btn{flex:1 1 140px;min-width:0}
.card--hero{padding:22px 16px 16px;margin-top:0}
.card--hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--blue)));
}
.card--hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);
}
.card--hero .card__title{font-size:var(--fs-20)}
.card.brand-card{
  cursor:pointer;padding-left:18px;
  box-shadow:inset 4px 0 0 var(--accent),inset 0 1px 0 var(--hi),0 12px 30px -20px var(--shadow-c);
}
.card.brand-card:active{transform:scale(.99)}
.card[data-state=err]{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.card[data-state=run]{border-color:color-mix(in srgb,var(--green) 35%,var(--line))}

/* pipeline bar (stacked segments) + legend */
.pipe-bar{
  display:flex;height:10px;border-radius:var(--r-pill);overflow:hidden;gap:1px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);margin-top:10px;
}
.pipe-bar__seg{flex:1 1 0%;min-width:0;background:var(--ps,var(--grey));transition:flex .3s ease}
.pipe-bar__seg[style*="flex:0"],.pipe-bar__seg[style*="flex: 0"]{display:none}
[data-status=SORBAN]    {--ps:var(--amber)}
[data-status=EPUL]      {--ps:var(--blue)}
[data-status=GATE_ZOLD] {--ps:var(--green)}
[data-status=ELESIT]    {--ps:var(--teal)}
[data-status=ELES]      {--ps:var(--green-deep)}
[data-status=BLOCKED]   {--ps:var(--red)}
[data-status=FIX_SORBAN]{--ps:var(--amber)}
[data-status=FIX_FUT]   {--ps:var(--blue)}
[data-status=""]        {--ps:var(--grey)}
.pipe-bar__seg[data-status=FIX_SORBAN],.pipe-bar__seg[data-status=FIX_FUT]{
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.28) 0 4px,transparent 4px 8px);
}
.pipe-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:var(--fs-12);color:var(--muted);font-weight:600}
.pipe-legend>span{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pipe-legend>span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--ps,var(--grey));flex:0 0 auto}

/* progress */
.progress{position:relative;margin-top:10px;min-width:0}
.progress__bar{
  height:8px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--st-solid,var(--accent)),var(--st,var(--accent)));
  box-shadow:0 0 12px -2px color-mix(in srgb,var(--st,var(--accent)) 60%,transparent);
  transition:width .4s ease;position:relative;z-index:1;
}
.progress::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;border-radius:var(--r-pill);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.progress__label{margin-top:6px;font-size:var(--fs-12);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.progress--indet .progress__bar{
  width:100%;
  background:repeating-linear-gradient(90deg,
    var(--st-solid,var(--accent)) 0 14px,
    color-mix(in srgb,var(--st,var(--accent)) 35%,var(--surface-2)) 14px 28px);
  background-size:28px 8px;animation:indet 1s linear infinite;
}
@keyframes indet{to{background-position:28px 0}}

/* badge — solid, white text */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:20px;padding:2px 8px;border-radius:var(--r-pill);
  font-size:var(--fs-11);font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;
  color:#fff;background:var(--st-solid,var(--accent));white-space:nowrap;
  font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

/* connection dot */
.live{
  display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:var(--grey);box-shadow:0 0 0 3px color-mix(in srgb,var(--grey) 22%,transparent);
}
.live[data-state=run]{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent);
  animation:live-pulse 1.6s ease-out infinite}
.live[data-state=wait]{background:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 25%,transparent)}
.live[data-state=off]{background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 25%,transparent)}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}

.stale{display:inline-block;margin-left:6px;font-size:var(--fs-11);font-weight:600;color:var(--muted);opacity:.85;vertical-align:middle}

/* --------------------------------------------------------------------------
   8. LOG · ALERT · EMPTY · SKELETON · KV · HR · SECTION
   -------------------------------------------------------------------------- */
.log{
  font-family:var(--font-mono);font-size:var(--fs-12);line-height:1.45;
  border:1px solid var(--line);border-radius:12px;background:var(--code-bg);
  padding:6px 4px;margin-top:10px;min-width:0;
}
.log-line{
  display:grid;grid-template-columns:28px 44px minmax(0,1fr);gap:8px;align-items:start;
  padding:6px 6px;border-radius:8px;min-width:0;
}
.log-line+.log-line{border-top:1px solid var(--line)}
.log-line__ic{width:22px;height:22px;border-radius:6px;margin-top:-2px;box-shadow:none}
.log-line__ic svg{width:14px;height:14px}
.log-line__t{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.log-line__brand{display:none;color:var(--accent);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme=light] .log-line__brand{color:color-mix(in srgb,var(--accent) 62%,#000)}
.log-line__msg{min-width:0;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
/* relay levels (UPPER) · dash levels (lower) · factory marks */
.log-line[data-level=OK],.log-line[data-mark=done]{--st:var(--green)}
.log-line[data-level=START],.log-line[data-mark=start],.log-line[data-level=info]{--st:var(--blue)}
.log-line[data-level=SKIPPED],.log-line[data-mark=info]{--st:var(--grey)}
.log-line[data-level=DISCARDED],.log-line[data-mark=retry],.log-line[data-mark=wait],.log-line[data-level=warn]{--st:var(--amber)}
.log-line[data-level=FAILED],.log-line[data-level=OFFLINE],.log-line[data-mark=fail],.log-line[data-mark=refused],.log-line[data-level=error]{--st:var(--red)}
.log-line[data-level=STATUS],.log-line[data-mark=round]{--st:var(--violet)}
.log-line[data-mark=reattach]{--st:var(--teal)}
.log-line[data-level=FAILED],.log-line[data-level=OFFLINE],.log-line[data-mark=fail],.log-line[data-level=error]{
  background:color-mix(in srgb,var(--red) 9%,transparent)}
.log-line[data-mark=round]{background:color-mix(in srgb,var(--violet) 9%,transparent)}
.log-line[data-mark=round] .log-line__msg{font-weight:700}
.log-line[data-level=SKIPPED] .log-line__msg,.log-line[data-mark=info] .log-line__msg{color:var(--muted)}

/* alert row */
.alert{
  display:flex;align-items:flex-start;gap:12px;padding:10px 12px;margin-top:8px;
  border-radius:var(--r-m);border:1px solid color-mix(in srgb,var(--st,var(--blue)) 34%,var(--line));
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--st,var(--blue)) 12%,var(--surface-2)),
    color-mix(in srgb,var(--st,var(--blue)) 5%,var(--surface)));
  box-shadow:inset 0 1px 0 var(--hi);
}
.alert[data-level=info] {--st:var(--blue)}
.alert[data-level=warn] {--st:var(--amber)}
.alert[data-level=error]{--st:var(--red)}
.alert>.ic{flex:0 0 auto}
.alert__body{flex:1 1 0%;min-width:0;padding-top:2px}
.alert__text{font-size:var(--fs-14);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.alert__meta{margin-top:3px;font-size:var(--fs-12);color:var(--muted)}

/* empty state — still icon LEFT, text RIGHT */
.empty{
  display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;margin-top:8px;
  border:1px dashed var(--line-2);border-radius:var(--r-m);color:var(--muted);font-weight:600;
}
.empty>.ic{--st:var(--grey);--tint:12%;flex:0 0 auto}
.empty>div{flex:1 1 0%;min-width:0}

/* skeleton shimmer */
.skeleton{
  display:block;height:14px;border-radius:8px;
  background:linear-gradient(90deg,var(--surface-2) 0%,var(--sk-hi) 50%,var(--surface-2) 100%),var(--surface-2);
  background-size:200% 100%;animation:shimmer 1.3s linear infinite;
}
.skeleton+.skeleton{margin-top:8px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* key/value list */
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:0;font-size:var(--fs-13)}
.kv dt{color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.kv dd{margin:0;padding:8px 0 8px 12px;border-bottom:1px solid var(--line);
  font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}

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

/* section */
.section{margin-top:18px;min-width:0}
.section__title{
  display:flex;align-items:center;gap:8px;min-height:32px;margin:0 0 8px;
  font-size:var(--fs-16);font-weight:800;letter-spacing:-.01em;line-height:1.2;
}
.section__count{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--muted);font-size:var(--fs-12);font-weight:800;font-variant-numeric:tabular-nums;
}
.section__more{
  margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-size:var(--fs-13);font-weight:700;color:var(--accent);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
[data-theme=light] .section__more{color:color-mix(in srgb,var(--accent) 62%,#000)}

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-top:12px;min-width:0}
.field__label{font-size:var(--fs-12);font-weight:700;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.field__hint{font-size:var(--fs-12);color:var(--muted)}
.input,.select,.textarea{
  width:100%;min-height:44px;padding:10px 14px;margin:0;
  font-family:var(--font);font-size:16px;line-height:1.3;color:var(--ink);
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
}
[data-theme=light] .input,[data-theme=light] .select,[data-theme=light] .textarea{
  background:#fff;box-shadow:inset 0 1px 2px rgba(10,31,20,.06)}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:.8}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.input:disabled,.select:disabled,.textarea:disabled{opacity:.55;cursor:not-allowed}
.select{
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
.textarea{min-height:88px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr;gap:10px}
input[type=checkbox]:not(.switch),input[type=radio]{accent-color:var(--accent);width:20px;height:20px;margin:0}
/* checkbox field (form.js): 44px tap row, box LEFT, label RIGHT */
.field--checkbox{margin-top:8px}
.field__checklabel{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;
  font-size:var(--fs-14);font-weight:600;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.field__checklabel input{flex:0 0 auto}

/* --------------------------------------------------------------------------
   10. SHEET · CONFIRM · TOASTS
   -------------------------------------------------------------------------- */
body.has-sheet{overflow:hidden}
/* JS: un-hides, then adds .is-in on the next frame → the transition slides it up (200ms).
   Close: removes .is-in, then hides. */
.sheet-backdrop{position:fixed;inset:0;z-index:40;background:rgba(3,7,18,.62);
  opacity:0;transition:opacity .2s ease-out}
.sheet-backdrop.is-in{opacity:1}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:41;
  max-height:78dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:8px 14px calc(14px + var(--sab));
  background:var(--surface);border:1px solid var(--line-2);border-bottom:0;
  border-radius:20px 20px 0 0;
  box-shadow:0 -12px 40px -16px rgba(0,0,0,.7);
  transform:translateY(100%);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.sheet.is-in{transform:translateY(0)}
.sheet__handle{width:38px;height:5px;margin:4px auto 12px;border-radius:var(--r-pill);background:var(--muted);opacity:.5}
.sheet__body{min-width:0}
.sheet__item{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px;border-radius:12px;
  color:var(--ink);font-size:var(--fs-14);font-weight:600;text-decoration:none;cursor:pointer;
  border:0;background:transparent;width:100%;text-align:left;font-family:var(--font);
  -webkit-tap-highlight-color:transparent;
}
.sheet__item>.ic{flex:0 0 auto}
.sheet__item:active{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.sheet__item+.sheet__item{border-top:1px solid var(--line);border-radius:0}
.sheet__item:last-child{border-radius:0 0 12px 12px}
.sheet__item:first-child{border-radius:12px 12px 0 0}
.sheet__item:only-child{border-radius:12px}

.confirm{padding:6px 2px 2px}
.confirm__title{font-size:var(--fs-20);font-weight:800;letter-spacing:-.01em}
.confirm__text{margin-top:8px;font-size:var(--fs-14);color:var(--muted);line-height:1.5}
.confirm__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.confirm__actions .btn{width:100%;padding:0 10px}

.toasts{
  position:fixed;left:14px;right:14px;bottom:calc(var(--tabbar-h) + 12px);z-index:50;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
}
.toast{
  --t1:#2563eb;--t2:#1d4ed8;
  pointer-events:auto;display:inline-flex;align-items:center;gap:10px;
  max-width:100%;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);
  color:#fff;font-size:var(--fs-14);font-weight:700;line-height:1.3;
  background:linear-gradient(180deg,var(--t1),var(--t2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -12px rgba(0,0,0,.8);
  text-shadow:0 1px 1px rgba(0,0,0,.18);animation:toast-in .2s ease-out;
  transition:opacity .2s ease,transform .2s ease;
}
.toast.is-out{opacity:0;transform:translateY(8px)}   /* JS adds it, removes the node after 220ms */
.toast[data-kind=ok]  {--t1:#16a34a;--t2:#15803d}
.toast[data-kind=err] {--t1:#dc2626;--t2:#b91c1c}
.toast[data-kind=info]{--t1:#2563eb;--t2:#1d4ed8}
.toast .ic{width:auto;height:auto;background:transparent;box-shadow:none;color:inherit;border-radius:0}
.toast .ic svg{width:18px;height:18px}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* --------------------------------------------------------------------------
   11. CHAT
   -------------------------------------------------------------------------- */
.page--chat{
  max-width:none;
  margin:calc(-1 * var(--page-pt)) calc(-1 * var(--page-px)) calc(-1 * var(--page-pb));
  height:calc(100vh - var(--appbar-h) - var(--tabbar-h));
  height:calc(100dvh - var(--appbar-h) - var(--tabbar-h));
  min-height:0;display:flex;flex-direction:column;
}
.chat{position:relative;display:flex;flex-direction:column;flex:1 1 0%;min-height:0;min-width:0}
.chat__head{
  display:flex;align-items:center;gap:8px;min-height:52px;padding:4px 10px;flex:0 0 auto;
  background:var(--bar);border-bottom:1px solid var(--line);
}
.chat__title{flex:1 1 0%;min-width:0;font-size:var(--fs-16);font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.chat__list{
  flex:1 1 0%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex;flex-direction:column;padding:12px 14px 16px;scroll-behavior:smooth;
}

.msg{display:flex;flex-direction:column;max-width:96%;margin-top:10px;min-width:0}
.msg--ai{align-self:flex-start;align-items:flex-start}
.msg--user{align-self:flex-end;align-items:flex-end;max-width:86%}
.msg__parts{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%}
.msg__text{
  font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;max-width:100%;
  padding:10px 14px;border-radius:6px 18px 18px 18px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--hi),0 6px 16px -12px var(--shadow-c);
}
.msg--user .msg__text{
  color:#fff;border:0;border-radius:18px 18px 6px 18px;
  background:linear-gradient(180deg,#8b5cf6,#6d28d9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -10px rgba(109,40,217,.9);
}
.msg--ai[data-state=err] .msg__text{border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
.msg--ai[data-state=run] .msg__text:last-child::after{
  content:"";display:inline-block;width:7px;height:15px;margin-left:3px;vertical-align:-2px;
  background:var(--violet);border-radius:2px;animation:caret 1s steps(2) infinite}
@keyframes caret{to{opacity:0}}
.msg__meta{margin-top:4px;padding:0 6px;font-size:var(--fs-11);color:var(--muted);font-variant-numeric:tabular-nums}

/* rendered-markdown inside a bubble */
.msg__text p{margin:0 0 8px}
.msg__text p:last-child{margin-bottom:0}
.msg__text strong{font-weight:700}
.msg__text a{text-decoration:underline;text-underline-offset:2px}
.msg--user .msg__text a{color:#fff}
.msg__text ul,.msg__text ol{margin:6px 0;padding-left:20px}
.msg__text li+li{margin-top:3px}
.msg__text code{
  font-family:var(--font-mono);font-size:var(--fs-13);padding:1px 5px;border-radius:5px;
  background:rgba(0,0,0,.28);white-space:pre-wrap;overflow-wrap:anywhere}
.msg--user .msg__text code{background:rgba(0,0,0,.22)}
.msg__text pre{
  margin:8px 0;padding:10px 12px;border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--code-bg);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-12);line-height:1.5;white-space:pre;max-width:100%}
.msg__text pre code{padding:0;background:transparent;white-space:pre}
.msg__text h1,.msg__text h2,.msg__text h3{font-size:var(--fs-16);font-weight:800;margin:10px 0 6px}
.msg__text blockquote{margin:6px 0;padding:2px 0 2px 10px;border-left:3px solid var(--line-2);color:var(--muted)}
.msg__text hr{height:1px;border:0;background:var(--line);margin:10px 0}
.msg__text table{border-collapse:collapse;font-size:var(--fs-13);display:block;overflow-x:auto;max-width:100%}
.msg__text th,.msg__text td{border:1px solid var(--line);padding:4px 8px;white-space:nowrap}

/* tool card (native <details>, collapsed by default) */
.tool{
  width:100%;max-width:100%;min-width:0;border-radius:12px;overflow:hidden;font-size:var(--fs-13);
  border:1px solid color-mix(in srgb,var(--st,var(--muted)) 30%,var(--line));
  background:var(--surface-2);box-shadow:inset 0 1px 0 var(--hi);
}
.tool__head{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;
  cursor:pointer;list-style:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.tool__head::-webkit-details-marker{display:none}
.tool__head>.ic{width:28px;height:28px;border-radius:8px;box-shadow:none}
.tool__head>.ic svg{width:16px;height:16px}
.tool__name{flex:0 0 auto;font-weight:700;white-space:nowrap}
.tool__sum{flex:1 1 0%;min-width:0;color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-12);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool__status{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--st,var(--muted))}
.tool[data-state=run] .tool__status,.tool__status[data-state=run]{
  width:12px;height:12px;background:transparent;
  border:2px solid color-mix(in srgb,var(--green) 35%,transparent);border-top-color:var(--green);
  animation:spin .8s linear infinite}
.tool__status[data-state=err]{background:var(--red)}
.tool__status[data-state=done]{background:var(--green)}
.tool__out{
  margin:0;max-height:240px;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:10px 12px;border-top:1px solid var(--line);
  background:var(--code-bg);color:var(--muted);
  font-family:var(--font-mono);font-size:var(--fs-12);line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.tool__out:empty{display:none}
.tool__out--full{max-height:none}           /* chat.js toggles it from the "Több…" button */
.tool__more{margin:8px 10px}

/* fenced code block emitted by chat.js markdown (same look as .msg__text pre) */
.md-code{
  margin:8px 0;padding:10px 12px;border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--code-bg);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-12);line-height:1.5;white-space:pre;max-width:100%;
}
.md-code code{padding:0;background:transparent;white-space:pre}

/* typing indicator */
.typing{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  margin-top:10px;padding:12px 14px;border-radius:6px 18px 18px 18px;
  background:var(--surface);border:1px solid var(--line);
}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bounce 1.2s ease-in-out infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}

/* "new message" jump pill, floats above the composer */
.jump{
  position:absolute;left:50%;bottom:calc(var(--composer-h,72px) + 10px);z-index:3;
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px 0 10px;
  border:0;border-radius:var(--r-pill);
  color:#fff;font-family:var(--font);font-size:var(--fs-13);font-weight:700;cursor:pointer;
  background:linear-gradient(180deg,#8b5cf6,#6d28d9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -10px rgba(0,0,0,.8);
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.jump .ic{width:auto;height:auto;background:transparent;box-shadow:none;color:inherit;border-radius:0}
.jump .ic svg{width:16px;height:16px}

/* composer — solid, sticky bottom, auto-growing textarea (rows via JS, max 6) */
.composer{
  position:sticky;bottom:0;z-index:2;flex:0 0 auto;
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 14px 10px;margin:0;
  background:var(--bar);border-top:1px solid var(--line);
}
.composer__input{
  flex:1 1 0%;min-width:0;min-height:44px;max-height:168px;margin:0;padding:11px 14px;
  font-family:var(--font);font-size:16px;line-height:1.35;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  resize:none;outline:none;overflow-y:auto;-webkit-appearance:none;appearance:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.composer__input:focus{border-color:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 28%,transparent)}
.composer__send,.composer__stop{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:14px;flex:0 0 auto}
.composer__send .ic svg,.composer__stop .ic svg{width:20px;height:20px}

/* rendered-markdown container: JS adds u-md when the text is HTML, so block tags
   do not get extra blank lines from pre-wrap */
.msg__text.u-md{white-space:normal}

/* two-pane on desktop */
.chat-split{display:block;min-height:0}
.chat-split>*{min-width:0;min-height:0}

/* --------------------------------------------------------------------------
   12. LOGIN (login.html only) · u- helpers
   -------------------------------------------------------------------------- */
.u-login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 14px}
.u-login__card{
  position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:400px;
  padding:26px 20px 22px;border-radius:22px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 var(--hi),0 30px 60px -30px rgba(0,0,0,.9);
}
.u-login__card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:linear-gradient(90deg,#8b5cf6,#2563eb)}
.u-login__card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 80% at 100% 0%,rgba(139,92,246,.22),transparent 70%)}
.u-login__head{display:flex;align-items:center;gap:14px}
.u-login__mark{
  flex:0 0 auto;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  color:#fff;font-size:var(--fs-20);font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 55%,#2563eb 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -12px rgba(109,40,217,.9);
}
.u-login__title{flex:1 1 0%;min-width:0;font-size:var(--fs-24);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.u-login__sub{margin-top:3px;font-size:var(--fs-13);color:var(--muted);font-weight:500}
.u-login__form{margin-top:18px}
.u-check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;
  font-size:var(--fs-14);font-weight:600;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.u-check input{flex:0 0 auto}
.u-login__msg{
  display:flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;padding:8px 12px;
  border-radius:12px;font-size:var(--fs-14);font-weight:600;
  background:color-mix(in srgb,var(--red) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--red) 45%,var(--line));
}
.u-login__msg .ic{--st:var(--red);width:32px;height:32px;border-radius:9px}
.u-login__msg .ic svg{width:18px;height:18px}
.u-login__foot{margin-top:16px;text-align:center;font-size:var(--fs-12);color:var(--muted)}

.u-muted{color:var(--muted)}
.u-num{font-variant-numeric:tabular-nums}
.u-row{display:flex;align-items:center;gap:8px;min-width:0}
.u-grow{flex:1 1 0%;min-width:0}
.u-right{text-align:right}
.u-mt{margin-top:12px}
.u-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes spin{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------------------
   13. BREAKPOINTS
   -------------------------------------------------------------------------- */

/* phone compact (≤430): the base already targets this; keep the tightening explicit */
@media (max-width:430px){
  .card{padding:14px 12px}
  .card.brand-card{padding-left:16px}
  .btn{padding:0 14px}
}

/* very narrow phones (≤393) */
@media (max-width:393px){
  :root{--page-px:12px;--page-pt:12px}
  .kpi{padding:10px;gap:8px;min-height:64px}
  .kpi__value{font-size:22px}
  .kpi>.ic{width:36px;height:36px;border-radius:11px}
  .kpi>.ic svg{width:20px;height:20px}
  .page__title{font-size:22px}
  .job{padding:10px;gap:10px}
}

/* ≥431: log brand column + 2-col form rows */
@media (min-width:431px){
  .log-line{grid-template-columns:28px 44px 96px minmax(0,1fr)}
  .log-line__brand{display:block}
  .form-row{grid-template-columns:1fr 1fr}
}

/* tablet + desktop (≥768): side nav, no tab bar, centred dialog sheet, 4-col KPI */
@media (min-width:768px){
  :root{--tabbar-h:0px;--page-px:20px;--page-pt:20px;--page-pb:28px}
  .app{grid-template-columns:220px minmax(0,1fr)}
  .appbar{padding-left:var(--page-px);padding-right:var(--page-px)}
  .tabbar{display:none}
  .sidenav{
    display:flex;flex-direction:column;gap:2px;
    position:sticky;top:var(--appbar-h);align-self:start;
    height:calc(100vh - var(--appbar-h));height:calc(100dvh - var(--appbar-h));
    overflow-y:auto;padding:14px 10px calc(14px + var(--sab));
    background:var(--bg-1);border-right:1px solid var(--line);
  }
  .kpi-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  /* 4 tiles beside a 220px nav = ~120px each: compact chrome so the label keeps its room */
  .kpi{padding:10px;gap:8px;min-height:64px}
  .kpi>.ic{width:34px;height:34px;border-radius:10px}
  .kpi>.ic svg{width:19px;height:19px}
  .kpi__value{font-size:22px}
  .page__title{font-size:var(--fs-28)}
  .rail{margin-bottom:14px}

  .sheet{
    left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);
    width:min(440px,calc(100vw - 40px));max-height:min(80vh,720px);
    padding:18px 18px calc(18px + var(--sab));
    border-radius:18px;border-bottom:1px solid var(--line-2);
    box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
    opacity:0;transform:translate(-50%,-50%) scale(.96);
    transition:opacity .18s ease-out,transform .18s ease-out;
  }
  .sheet.is-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .sheet__handle{display:none}
  .toasts{left:auto;right:20px;bottom:20px;align-items:flex-end;max-width:420px}
  .composer{padding-bottom:calc(10px + var(--sab))}
  .chat__list{padding:16px 20px}
  .btn-grid{gap:12px}
}

/* desktop (≥1024): wider nav, page padding 28, chat two-pane */
@media (min-width:1024px){
  :root{--page-px:28px;--page-pt:24px;--page-pb:32px}
  .app{grid-template-columns:240px minmax(0,1fr)}
  .sidenav{padding:18px 12px}
  .sidenav__item{min-height:46px}
  .kpi-grid{gap:10px}
  .kpi{padding:14px;gap:10px;min-height:68px}
  .kpi>.ic{width:40px;height:40px;border-radius:12px}
  .kpi>.ic svg{width:22px;height:22px}
  .kpi__value{font-size:var(--fs-24)}
  .chat-split{display:grid;grid-template-columns:280px minmax(0,1fr);height:100%;min-height:0}
  .chat-split>*{overflow-y:auto;min-height:0}
  .chat-split>*:first-child{border-right:1px solid var(--line);padding:14px}
  .chat-split .chat{height:100%;overflow:hidden}
  .msg--ai{max-width:88%}
  .msg--user{max-width:72%}
}

/* hover polish only where a real pointer exists */
@media (hover:hover){
  .job[role=button]:hover,.job[href]:hover{border-color:var(--line-2);filter:brightness(1.06)}
  .card.brand-card:hover{filter:brightness(1.05)}
  .chip:hover,.pill:hover{filter:brightness(1.08)}
  .iconbtn:hover{filter:brightness(1.12)}
  .sheet__item:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .section__more:hover{text-decoration:underline;text-underline-offset:3px}
}

/* reduced motion — every animation off, transitions instant */
@media (prefers-reduced-motion:reduce){
  .live[data-state=run],
  .kpi[data-state=run]>.ic::after,.job[data-state=run]>.ic::after,.pill[data-state=run]>.ic::after,
  .card[data-state=run]>.card__head>.ic::after,
  .btn.is-busy::before,.tool[data-state=run] .tool__status,.tool__status[data-state=run],
  .progress--indet .progress__bar,.skeleton,.typing span,
  .msg--ai[data-state=run] .msg__text:last-child::after,
  .rail.is-peek>*,.toast{animation:none}
  .btn,.iconbtn,.chip,.pill,.job,.card,.sidenav__item,.tabbar__tab,.tabbar__tab .ic,.seg__btn,
  input.switch,input.switch::before,.progress__bar,.input,.select,.textarea,.pipe-bar__seg,
  .sheet,.sheet-backdrop,.toast{transition:none}
  .chat__list{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════
   Late additions — classes the views generate beyond MARKUP.md
   ══════════════════════════════════════════════════════════════ */
.sheet__title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 14px; padding-right: 8px; }
.sheet__actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet__actions .btn { flex: 1 1 0; }
.field-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 393px) { .field-row-inline { grid-template-columns: 1fr; } }

.brand-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .brand-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: 1fr 1fr 1fr; } }
.brand-line { font-size: 13px; line-height: 1.4; color: var(--ink); margin-top: 8px; overflow-wrap: anywhere; }
.brand-line--muted { color: var(--muted); font-size: 12px; }
.brand-line--strong { font-weight: 700; font-size: 14px; }
.building-row { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md, 14px); background: var(--surface-2); }
.building-row__title { font-size: 13px; font-weight: 600; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plain-list { margin: 6px 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.plain-list li { margin: 4px 0; }

.dot-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.4); }
.dot[data-state="run"] { background: var(--green); }
.dot[data-state="err"] { background: var(--red); }
.dot[data-state="wait"] { background: var(--amber); }
.dot[data-state="off"] { background: #475569; }

.site-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.site-bar { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 10px; font-size: 12px; }
.site-bar__label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-bar__track { display: flex; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.site-bar__seg { display: block; min-width: 0; }
.site-bar__seg--run { background: var(--green); }
.site-bar__seg--wait { background: var(--amber); }
.site-bar__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 393px) { .site-bar { grid-template-columns: 76px 1fr 40px; } }

.chat-split__list, .chat-split__detail { min-width: 0; }
@media (min-width: 1024px) {
  .chat-split { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
  .chat-split__list { position: sticky; top: calc(var(--appbar-h, 56px) + 12px); max-height: calc(100dvh - var(--appbar-h, 56px) - 24px); overflow-y: auto; }
  .chat-split__detail--empty { display: grid; place-items: center; min-height: 40vh; }
}
@media (max-width: 1023px) {
  .chat-split--has-detail .chat-split__list { display: none; }
  .chat-split:not(.chat-split--has-detail) .chat-split__detail { display: none; }
}