@font-face{font-family:'TalpieSans';src:url('/static/assets/fonts/Roboto-VariableFont.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'TalpieMono';src:url('/static/assets/fonts/FiraCode-Regular.ttf') format('truetype');font-display:swap;}

:root{
  --bg:#f4f5f7;
  --bg2:#eef1f5;
  --text:#0f172a;
  --muted:#374151;
  --muted2:#4b5563;
  --panel:rgba(255,255,255,.96);
  --panel2:rgba(255,255,255,.98);
  --border:rgba(15,23,42,.11);
  --border2:rgba(15,23,42,.16);
  --shadow:0 2px 8px rgba(15,23,42,.12);
  --shadow2:0 1px 4px rgba(15,23,42,.14);
  --radius:10px;
  --radius2:14px;
  --accent:#2563eb;
  --accent2:#7c3aed;
  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#f59e0b;
  --info:#2563eb;
  --violet:#7c3aed;
  --cyan:#06b6d4;
  --pink:#ec4899;
  --sidebarW:280px;


  /* Talpie palette (tokenized colors; use keys like: tpc-blue) */
  --tpc-alpha-bg: .10;
  --tpc-alpha-line: .22;
  --tpc-alpha-bg-strong: .16;

  --tpc-blue:#2563eb;      --tpc-blue-rgb:37,99,235;
  --tpc-sky:#0ea5e9;       --tpc-sky-rgb:14,165,233;
  --tpc-cyan:#06b6d4;      --tpc-cyan-rgb:6,182,212;
  --tpc-teal:#14b8a6;      --tpc-teal-rgb:20,184,166;
  --tpc-emerald:#10b981;   --tpc-emerald-rgb:16,185,129;
  --tpc-green:#22c55e;     --tpc-green-rgb:34,197,94;
  --tpc-lime:#84cc16;      --tpc-lime-rgb:132,204,22;
  --tpc-amber:#f59e0b;     --tpc-amber-rgb:245,158,11;
  --tpc-orange:#f97316;    --tpc-orange-rgb:249,115,22;
  --tpc-red:#ef4444;       --tpc-red-rgb:239,68,68;
  --tpc-rose:#f43f5e;      --tpc-rose-rgb:244,63,94;
  --tpc-pink:#ec4899;      --tpc-pink-rgb:236,72,153;
  --tpc-fuchsia:#d946ef;   --tpc-fuchsia-rgb:217,70,239;
  --tpc-purple:#a855f7;    --tpc-purple-rgb:168,85,247;
  --tpc-violet:#7c3aed;    --tpc-violet-rgb:124,58,237;
  --tpc-indigo:#4f46e5;    --tpc-indigo-rgb:79,70,229;
  --tpc-slate:#64748b;     --tpc-slate-rgb:100,116,139;
  --tpc-gray:#94a3b8;      --tpc-gray-rgb:148,163,184;
  --tpc-stone:#78716c;     --tpc-stone-rgb:120,113,108;
  --tpc-brown:#92400e;     --tpc-brown-rgb:146,64,14;

  /* Shared component tokens (used by Messages / Comments / Command Palette etc.) */
  --line-1: rgba(15,23,42,.10);
  --surface-1: rgba(255,255,255,.72);
  --surface-2: rgba(255,255,255,.58);
}
/* ── Thin scrollbars — unobtrusive, professional ───────────────────── */
::-webkit-scrollbar{width:5px; height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18); border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.30)}
*{scrollbar-width:thin; scrollbar-color:rgba(15,23,42,.18) transparent}



*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; overscroll-behavior:none}
body{
  margin:0;
  position:relative;
  z-index:0;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* prevent page scroll - sidebar and content manage their own scrollbars */
  font-family: 'TalpieSans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  font-size:12px;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(37,99,235,.14), transparent 55%),
    radial-gradient(900px 520px at 92% -5%, rgba(124,58,237,.12), transparent 55%),
    radial-gradient(900px 520px at 60% 110%, rgba(37,99,235,.06), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}

code{font-family: TalpieMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size:.95em}

/* Layout */
.topbar{
  position:relative;
  z-index:20;
  background: rgba(255,255,255,.98);
  border-bottom:1px solid var(--border2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px;
}

/* The topbar is a flex container; make the injected #app-topbar stretch so
   right-side actions can reach the far edge (otherwise it's content-sized). */
#app-topbar{flex:1 1 auto; min-width:0}

.topbar-inner{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px}

.brand{display:flex; align-items:center; gap:10px}
.brand-link{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.2px}
.brand-link:hover{opacity:.92}

.brand-logo{width:28px; height:28px; border-radius:10px; box-shadow:0 6px 14px rgba(15,23,42,.12)}
.brand-title{font-weight:950}

.sidebar-mobile-head{display:none}
.mobile-route-header{display:none}
.mobile-dock{display:none}
.mobile-tabs-sheet.hidden{display:none !important}
.mobile-tabs-sheet{position:fixed; inset:0; z-index:46}
.mobile-tabs-sheet__backdrop{position:absolute; inset:0; background:rgba(15,23,42,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.mobile-tabs-sheet__panel{position:absolute; left:10px; right:10px; bottom:10px; max-height:min(72vh, 560px); overflow:auto; background:rgba(255,255,255,.92); border:1px solid var(--border); border-radius:10px; box-shadow:0 26px 60px rgba(2,6,23,.28); padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.mobile-tabs-sheet__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px}
.mobile-tabs-sheet__eyebrow{font-size:11px; font-weight:900; letter-spacing:.18px; color:var(--muted2); text-transform:uppercase}
.mobile-tabs-sheet__title{font-size:16px; font-weight:700; line-height:1.15}
.mobile-tabs-sheet__list{display:flex; flex-direction:column; gap:8px}
.mobile-tab-item{appearance:none; width:100%; text-align:left; border:1px solid var(--border2); background:rgba(255,255,255,.82); color:var(--text); border-radius:12px; padding:13px 14px; font-weight:900; font-size:13px; box-shadow:0 1px 0 rgba(15,23,42,.04)}
.mobile-tab-item.is-active{background:linear-gradient(90deg, rgba(37,99,235,.14), rgba(124,58,237,.12)); border-color:rgba(37,99,235,.26)}
.mobile-route-header{position:sticky; top:0; z-index:9; margin:0 0 10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(2,6,23,.08)}
.mobile-route-title{font-size:15px; font-weight:950; line-height:1.2; color:var(--text)}
.mobile-route-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.mobile-route-chip{appearance:none; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; border:1px solid rgba(37,99,235,.18); background:rgba(37,99,235,.08); color:var(--text); font-size:11px; font-weight:900}
.mobile-route-chip-ico{width:13px; height:13px; opacity:.88}
.mobile-dock{position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:42; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding:8px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.90); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 18px 38px rgba(2,6,23,.18)}
.mobile-dock-btn{appearance:none; min-width:0; border:0; background:transparent; color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px 4px; border-radius:12px; font-size:10px; font-weight:900}
.mobile-dock-btn--home{background:rgba(37,99,235,.08)}
.mobile-dock-btn:active{transform:scale(.99)}
.mobile-dock-ico{width:18px; height:18px; opacity:.92}

/* Sidebar menu search (tree-view filter) */
.sidebar-search{padding:10px 10px 8px; position:sticky; top:0; z-index:6;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.sidebar-search .input{width:100%}
.nav-search-clear{width:34px; height:34px; border-radius:12px}
.nav-search-clear img{width:16px; height:16px; opacity:.82}
.nav-search-clear.is-hidden{display:none !important}

.nav-filter-hide{display:none !important}
.nav-tree-row.is-search-match .nav-link{background:rgba(37,99,235,.07); border:none; border-radius:8px}
.nav-tree-row.is-search-selected .nav-link{background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.22); box-shadow: inset 4px 0 0 rgba(245,158,11,.45)}

body.theme-dark .sidebar-search{
  background:linear-gradient(180deg, rgba(8,14,26,.82), rgba(8,14,26,.68));
  border-bottom:1px solid rgba(148,163,184,.12);
}
body.theme-dark .nav-tree-row.is-search-match .nav-link{background:rgba(88,140,255,.14); border:1px solid rgba(88,140,255,.22)}
body.theme-dark .nav-tree-row.is-search-selected .nav-link{background:rgba(245,158,11,.16); border:1px solid rgba(245,158,11,.28); box-shadow: inset 4px 0 0 rgba(245,158,11,.55)}

.btn-ico{width:15px; height:15px; opacity:.92}
.menu-ico{width:16px; height:16px; opacity:.9}

.top-actions{display:flex; align-items:center; gap:10px}

/* Topbar user dropdown */
.user-menu{position:relative; display:flex; align-items:center}
.user-menu-btn{border-radius:999px; padding:6px 9px; font-size:12px; display:inline-flex; align-items:center; gap:7px}
.user-menu-btn .user{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-caret{opacity:.72}
.notify-menu{position:relative; display:flex; align-items:center; overflow:visible}
.notify-menu-btn{position:relative; min-width:40px; min-height:40px; border-radius:14px; overflow:visible}
.notify-dropdown{min-width:360px; max-width:min(92vw, 420px)}
.notify-item{display:flex; align-items:center; justify-content:space-between; gap:14px}
.notify-item-main{display:inline-flex; align-items:center; gap:10px; min-width:0}
.notify-item-main > span:last-child{font-weight:700}
.notify-item-side{display:inline-flex; align-items:center; gap:10px; margin-left:auto}
.notify-item-side .small{opacity:.72; white-space:nowrap}
.notify-empty{justify-content:center; color:var(--muted2); pointer-events:none}

.dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width: 220px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index:50;
  opacity: 0;
  transform: translateY(-8px) scale(0.99);
  transition: opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform;
  pointer-events: none;
}
.dropdown-menu.is-open{opacity:1; transform: translateY(0) scale(1); pointer-events:auto;}
.dropdown-head{padding:8px 10px; border-bottom:1px solid var(--border); background: rgba(255,255,255,.55)}
.dropdown-user{display:flex; align-items:center; gap:8px; font-weight:900; font-size:12px}

.dropdown-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  min-height:30px;
  font-size:12px;
  background: transparent;
  border:0;
  text-decoration:none;
  color: var(--text);
  font-weight:900;
  cursor:pointer;
}
.dropdown-item:hover{background: rgba(37,99,235,.07)}
.dropdown-item.danger:hover{background: rgba(220,38,38,.07)}

/* Button state helpers (used by SmartTable filter validation etc.) */
.btn.is-error{
  border-color: rgba(220,38,38,.35) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12), 0 1px 0 rgba(15,23,42,.06) !important;
}
.btn.is-dirty{
  border-color: rgba(245,158,11,.36) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.12), 0 1px 0 rgba(15,23,42,.06) !important;
}
.btn.is-active{
  border-color: rgba(37,99,235,.28) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 1px 0 rgba(15,23,42,.06) !important;
}

/* Lock the main scroll while SmartTable is in fullscreen overlay mode. */
body.st-fs-lock .main{overflow:hidden !important}
/* IMPORTANT: .shell uses overflow:hidden to keep the layout tidy, but it would clip
   a position:fixed fullscreen table living inside .main. While fullscreen is active,
   let it render outside the shell so it can cover topbar + sidebar too. */
body.st-fs-lock .shell{overflow:visible !important}

.userpill{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid var(--border);
}

.user{color:var(--text); font-weight:700}
.badge{
  --b-bg: linear-gradient(90deg, rgba(37,99,235,.12), rgba(124,58,237,.12));
  --b-br: rgba(15,23,42,.10);
  --b-fg: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:1px 6px;
  border-radius:999px;
  background: var(--b-bg);
  border:1px solid var(--b-br);
  color:var(--b-fg);
  font-weight:900;
  font-size:10px;
  letter-spacing:.1px;
  line-height:1.1;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.badge.sm{padding:1px 5px; font-size:9px}
.badge.mono{font-family: TalpieMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace}
.badge.info{--b-bg: rgba(37,99,235,.12); --b-br: rgba(37,99,235,.28); --b-fg:#1e3a8a}
.badge.success{--b-bg: rgba(22,163,74,.12); --b-br: rgba(22,163,74,.28); --b-fg:#065f46}
.badge.warn{--b-bg: rgba(245,158,11,.14); --b-br: rgba(245,158,11,.30); --b-fg:#7c2d12}
.badge.error{--b-bg: rgba(220,38,38,.12); --b-br: rgba(220,38,38,.28); --b-fg:#7f1d1d}
.badge.purple{--b-bg: rgba(124,58,237,.12); --b-br: rgba(124,58,237,.28); --b-fg:#4c1d95}
.badge.cyan{--b-bg: rgba(6,182,212,.10); --b-br: rgba(6,182,212,.22); --b-fg:#155e75}
.badge.pink{--b-bg: rgba(236,72,153,.10); --b-br: rgba(236,72,153,.22); --b-fg:#831843}
.badge.dim{--b-bg: rgba(15,23,42,.06); --b-br: rgba(15,23,42,.12); --b-fg: var(--muted2)}


/* Convenience aliases used by some templates (dash syntax) */
.badge-blue{--b-bg: rgba(37,99,235,.12); --b-br: rgba(37,99,235,.28); --b-fg:#1e3a8a}
.badge-info{--b-bg: rgba(37,99,235,.12); --b-br: rgba(37,99,235,.28); --b-fg:#1e3a8a}
.badge-success{--b-bg: rgba(22,163,74,.12); --b-br: rgba(22,163,74,.28); --b-fg:#065f46}
.badge-warn{--b-bg: rgba(245,158,11,.14); --b-br: rgba(245,158,11,.30); --b-fg:#7c2d12}
.badge-error{--b-bg: rgba(220,38,38,.12); --b-br: rgba(220,38,38,.28); --b-fg:#7f1d1d}
.badge-purple{--b-bg: rgba(124,58,237,.12); --b-br: rgba(124,58,237,.28); --b-fg:#4c1d95}
.badge-cyan{--b-bg: rgba(6,182,212,.10); --b-br: rgba(6,182,212,.22); --b-fg:#155e75}
.badge-pink{--b-bg: rgba(236,72,153,.10); --b-br: rgba(236,72,153,.22); --b-fg:#831843}


.sep{
  border:0;
  border-top:1px solid var(--border);
  margin:16px 0;
}

/* Shell (sidebar + content) */
.shell{
  width:100%;
  flex:1 1 auto;
  min-height:0; /* important for nested flex scroll */
  overflow:hidden;
  max-width: 1040px;
  margin:0 auto;
  padding:12px;
  display:flex;
  gap:12px;
}
.with-sidebar .shell{max-width:none; margin:0}
.main{
  flex:1;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:auto; /* content scroll */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom: 22px;
}

/* Sidebar (only rendered after login) */
.sidebar{
  width:var(--sidebarW);
  flex:0 0 var(--sidebarW);
  align-self:stretch;
  height:100%;
  min-height:0;
  overflow:auto; /* sidebar scroll */
  padding:10px;
  background:var(--panel);
  border-right:1px solid var(--border2);
  /* Body should visually connect to rounded tab buttons above.
     Keep rounding only on bottom corners. */
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.nav{display:flex; flex-direction:column; gap:2px}
.nav-tree{gap:2px}
.nav-section{display:flex; flex-direction:column; gap:2px}
.nav-tree-row{
  display:flex;
  align-items:center;
  gap:0;
  min-width:0;
  padding-left: var(--navIndent, 0px);
  position:relative;
}

/* Tree trace lines: dashed vertical + elbow (row). */
.nav-tree-row[data-depth]:not([data-depth="0"])::before{content:none;}

/* Last item in a branch: no dangling vertical below the elbow. */
.nav-tree-row.is-last[data-depth]:not([data-depth="0"])::before{ bottom:50%; }

.nav-tree-row[data-depth]:not([data-depth="0"])::after{
  content:"";
  position:absolute;
  left: calc(var(--navIndent, 0px) - 6px);
  top:50%;
  width:7px;
  border-top:1px dashed rgba(15,23,42,.26);
  transform: translateY(-50%);
  opacity:.55;
  pointer-events:none;
}

/* Active path: only the elbow (per level) is thick; the vertical thickness is
   handled by the per-container overlay (so it never extends below the active elbow). */
.nav-tree-row.is-active-path[data-depth]:not([data-depth="0"])::after{
  border-top-width:2px;
  border-top-color: rgba(37,99,235,.55);
  opacity:.9;
}

/* Per-level vertical trace (prevents breaks between siblings when nested branches expand). */
.nav-children[data-parent-depth]::before{
  content:"";
  position:absolute;
  left: calc(var(--navIndentChildAxis, calc(var(--navIndentParentAxis, var(--navIndentParent, 0px)) + 24px)) - 6px);
  top:0;
  width:1px;
  height: var(--levelStop, 0px);
  background-image: repeating-linear-gradient(to bottom, rgba(15,23,42,.26) 0 3px, transparent 3px 7px);
  opacity:.55;
  pointer-events:none;
}

/* Thick vertical overlay for the active branch inside each container.
   JS sets --activeStop so it ends at the center of the next node in the path. */
.nav-children.is-active-path[data-parent-depth]::after{
  content:"";
  position:absolute;
  left: calc(var(--navIndentChildAxis, calc(var(--navIndentParentAxis, var(--navIndentParent, 0px)) + 24px)) - 6px);
  top:0;
  width:2px;
  height: var(--activeStop, 0px);
  background-image: repeating-linear-gradient(to bottom, rgba(37,99,235,.55) 0 3px, transparent 3px 7px);
  opacity:.9;
  pointer-events:none;
}

/* NOTE: the overlay is computed per container, so it is consistent across all levels. */

/* Dark mode: make inactive tree paths visible (only active path was visible before). */
body.theme-dark .nav-tree-row:not(.is-active-path)[data-depth]:not([data-depth="0"])::after{
  border-top-color: rgba(226,232,240,.26);
  opacity:.72;
}
body.theme-dark .nav-children[data-parent-depth]::before{
  background-image: repeating-linear-gradient(to bottom, rgba(226,232,240,.22) 0 3px, transparent 3px 7px);
  opacity:.72;
}


/* Menu tree paths (user preference toggles from Profile → Preferences) */
body.nav-paths-off .nav-tree-row[data-depth]:not([data-depth="0"])::after{ opacity:0; }
body.nav-paths-off .nav-children[data-parent-depth]::before{ opacity:0; }
body.nav-activepath-off .nav-tree-row.is-active-path[data-depth]:not([data-depth="0"])::after{ opacity:0 !important; }
body.nav-activepath-off .nav-children.is-active-path[data-parent-depth]::after{ opacity:0 !important; }

.nav-expander{
  width:28px;
  height:28px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
}
.nav-expander:hover{background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.12)}
.nav-expander-ico{width:14px; height:14px; opacity:.78; transition: transform .14s ease}
.nav-tree-row.is-collapsed .nav-expander-ico{transform: rotate(-90deg)}
.nav-expander-spacer{display:inline-block; width:28px; height:28px}
.nav-children{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow:hidden; /* needed for smooth expand/collapse */
  transition: max-height .18s ease, opacity .18s ease, transform .18s ease;
  will-change: max-height, opacity, transform;
}
/* IMPORTANT: our author CSS sets display:flex on .nav-children, which can override
   the browser's default [hidden]{display:none}. Enforce hiding explicitly so
   tree-view collapse works reliably. */
.nav-children[hidden]{display:none !important}
.nav-label{
  font-size:11px;
  color:var(--muted2);
  padding:8px 10px 2px;
  text-transform:uppercase;
  letter-spacing:.1px;
}
.nav-link{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  font-weight:600;
}

.nav-text{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-caret{
  margin-left:0px;
  margin-right:4px;
  width:15px;
  height:15px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
}
.nav-caret-spacer {
  margin-left:0px;
  margin-right:0px;
}
.nav-caret{
  cursor:pointer;
  border:1px solid rgba(37,99,235,.12);
  transition: background .12s ease, border-color .12s ease;
}
.nav-caret:hover{background:rgba(37,99,235,.06)}
.nav-caret-ico{width:12px; height:12px; opacity:.78; transition: transform .14s ease}
.nav-tree-row.is-collapsed .nav-caret-ico{transform: rotate(-90deg)}

.nav-tree-row .nav-link{flex:1}
.nav-link.nav-group{width:100%; justify-content:flex-start; background:transparent; cursor:pointer}
.nav-link.nav-cat{
  width:100%;
  justify-content:flex-start;
  background:transparent;
  border-color:transparent;
  font-size:11px;
  letter-spacing:.35px;
  text-transform:uppercase;
  font-weight:800 !important;
}
.nav-link.nav-cat:hover{background:rgba(37,99,235,.06)}

/* Only the active category gets a subtle yellow highlight (matches the "selected" feel). */
.nav-link.nav-cat.is-active-cat{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.22);
  box-shadow: inset 4px 0 0 rgba(245,158,11,.45);
  font-weight:800 !important;
}

/* Tab children: slightly smaller + softer, but still clickable. */
.nav-link.nav-tab{
  font-size:12px;
  opacity:.92;
  font-weight:400 !important;
}
.nav-link:hover{background:rgba(37,99,235,.06)}
.nav-link.active{font-weight:800 !important;background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.18); box-shadow: inset 4px 0 0 rgba(37,99,235,.55)}
.nav-link.active-parent{font-weight:800 !important;background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.12); box-shadow: inset 4px 0 0 rgba(37,99,235,.28); opacity:.92}
.nav-ico{width:16px; height:16px; opacity:.92; object-fit:contain}
.sidebar-foot{margin-top:auto; padding-top:10px; border-top:1px solid rgba(15,23,42,.08)}

/* Mobile: off-canvas sidebar (toggle button in topbar). */
.sidebar-overlay{display:none;}

/* Sidebar toggle is available on all viewports (desktop can collapse the sidebar; mobile opens off-canvas). */
.top-actions .sidebar-toggle{display:inline-flex;}

/* Desktop: allow collapsing the sidebar (full-width content). */
/*
  Smooth desktop show/hide animation.
  IMPORTANT: target only the *main* app sidebar (.shell > .sidebar). Other UI parts
  (e.g. SmartTable fullscreen portal menu) also use the `.sidebar` class.
*/
.shell > .sidebar{
  max-width: var(--sidebarW);
  transform: translateX(0);
  opacity: 1;
  transition:
    max-width 220ms ease,
    width 220ms ease,
    flex-basis 220ms ease,
    padding 220ms ease,
    opacity 160ms ease,
    transform 220ms ease;
  will-change: max-width, width, flex-basis, padding, opacity, transform;
}

body.sidebar-collapsed .shell{gap:0;}
body.sidebar-collapsed .shell > .sidebar{
  max-width: 0 !important;
  width: 0 !important;
  flex-basis: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transform: translateX(-12px);
  overflow: hidden;
  border-width: 0;
  box-shadow: none;
  pointer-events: none;
}

@media (max-width: 980px){
  /* Let content be full width; sidebar becomes an off-canvas panel. */
  .shell{display:block; padding:10px 8px calc(104px + env(safe-area-inset-bottom))}
  .topbar{padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:rgba(246,248,252,.78); box-shadow:0 8px 30px rgba(2,6,23,.08)}
  .brand-title{display:none}
  .top-actions{gap:6px}
  .top-actions .btn{min-width:36px; min-height:36px; border-radius:10px}
  .top-actions .btn:active{transform:scale(.99)}
  .user-menu-btn .user{display:none}
  .user-menu-btn{padding:7px}
  .sidebar-mobile-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px 2px}
  .sidebar-mobile-title{display:flex; align-items:center; gap:10px; font-weight:950; letter-spacing:.12px}
  .sidebar-mobile-title .nav-ico{width:20px; height:20px}
  .mobile-route-header{display:block; margin:0 0 12px; padding:12px 12px 10px; border-radius:14px; background:rgba(255,255,255,.88); box-shadow:0 14px 34px rgba(2,6,23,.10)}
  .mobile-dock{display:grid}
  .mobile-dock-btn{min-height:54px; border-radius:12px; transition:transform 120ms ease, background 160ms ease, box-shadow 160ms ease}
  .mobile-dock-btn.is-active{background:linear-gradient(180deg, rgba(37,99,235,.14), rgba(124,58,237,.10)); box-shadow:inset 0 0 0 1px rgba(37,99,235,.16)}
  .mobile-dock-btn:active{transform:scale(.99)}
  .mobile-route-chip{min-height:34px; padding:8px 11px; background:linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.06)); box-shadow:0 4px 12px rgba(37,99,235,.08)}
  .mobile-route-title{font-size:16px}
  .mobile-tabs-sheet__backdrop{opacity:0; transition:opacity 220ms ease}
  .mobile-tabs-sheet__panel{left:12px; right:12px; bottom:12px; border-radius:10px; background:rgba(255,255,255,.95); box-shadow:0 28px 70px rgba(2,6,23,.30); transform:translateY(20px) scale(.985); opacity:0; transition:transform 260ms cubic-bezier(.22,1,.36,1), opacity 220ms ease}
  body.mobile-tabs-open .mobile-tabs-sheet__backdrop{opacity:1}
  body.mobile-tabs-open .mobile-tabs-sheet__panel{transform:translateY(0) scale(1); opacity:1}
  .mobile-tab-item{min-height:50px; border-radius:12px; font-size:13px; transition:transform 120ms ease, background 160ms ease, box-shadow 160ms ease}
  .mobile-tab-item:active{transform:scale(.99)}
  .mobile-tab-item.is-active{box-shadow:0 10px 24px rgba(37,99,235,.12)}

  /* Desktop "collapsed" state should not permanently hide the sidebar on mobile.
     Mobile uses off-canvas (sidebar-open) instead. */
  /* If the user collapsed the sidebar on desktop and then resized into mobile,
     do NOT keep it collapsed (mobile uses off-canvas open/close). */
  body.sidebar-collapsed .shell > .sidebar{
    width: min(88vw, 340px) !important;
    max-width: none !important;
    flex-basis: auto !important;
    padding: 14px !important;
    opacity: 1 !important;
    transform: translateX(-110%);
    overflow: auto !important;
    border-width: 1px !important;
    box-shadow: 0 28px 72px rgba(2,6,23,.26) !important;
    pointer-events: auto !important;
  }

  /* Main app sidebar becomes off-canvas on mobile. Target only the primary shell sidebar
     so other UI sidebars (e.g. SmartTable fullscreen portal) keep their own rules. */
  .shell > .sidebar{
    position:fixed;
    top: calc(var(--topbarPx, 60px) + 8px + env(safe-area-inset-top));
    left:8px;
    right:8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    height:auto !important;
    width: auto;
    max-width:none;
    max-height:none;
    border-radius: 28px;
    background:rgba(255,255,255,.94);
    transform: translateX(-104%) scale(.985);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: transform 260ms cubic-bezier(.22,1,.36,1), opacity 180ms ease, visibility 0s linear 260ms;
    z-index:31;
    padding: 10px;
  }
  body.sidebar-open .shell > .sidebar{
    transform: translateX(0) scale(1);
    opacity:.98;
    visibility:visible;
    pointer-events:auto;
    transition: transform 260ms cubic-bezier(.22,1,.36,1), opacity 180ms ease, visibility 0s linear 0s;
  }


  /* Overlay (closes sidebar on tap). Kept below topbar so the toggle remains accessible. */
  .sidebar-overlay{
    display:block;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(15,23,42,.40);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity:0;
    pointer-events:none;
    transition: opacity 220ms ease;
    z-index:30;
  }
  body.sidebar-open .sidebar-overlay{opacity:1; pointer-events:auto;}

  /* Content height: fill remaining viewport below topbar. */
  .main{height: calc(100vh - var(--topbarPx, 60px)); padding-bottom: 116px;}
  .main.mobile-page-transition-out > *{opacity:.28; transform:translateY(10px) scale(.992); transition:opacity 140ms ease, transform 180ms ease}
  .main.mobile-page-transition-in > *{animation:mobilePageIn .26s cubic-bezier(.22,1,.36,1)}
  .tabs{margin-top:8px}
  .tab-bar-wrap,
  .tab-bar{padding:0 2px; gap:6px}
  .tab{padding:6px 12px; min-height:36px; font-size:12px; border-radius:10px 10px 0 0}
  .tab-panels{padding:12px}
  .page-head,
  .page-header{align-items:flex-start !important; flex-direction:column; gap:10px !important; margin-bottom:10px !important}

  /* Toggle stays available on mobile as well. */
  .top-actions .sidebar-toggle{display:inline-flex;}
}

@keyframes mobilePageIn{
  from{opacity:0; transform:translateY(14px) scale(.985)}
  to{opacity:1; transform:none}
}

body.device-mobile .mobile-route-header,
body.device-mobile .mobile-dock,
body.device-mobile .mobile-tabs-sheet__panel,
body.device-mobile .shell > .sidebar{
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
body.device-mobile .mobile-route-chip:active,
body.device-mobile .mobile-tab-item:active,
body.device-mobile .mobile-dock-btn:active{filter:saturate(1.02)}
body.theme-dark.device-mobile .topbar{background:rgba(8,14,26,.82); box-shadow:0 10px 30px rgba(0,0,0,.28)}
body.theme-dark.device-mobile .shell > .sidebar{background:rgba(9,12,18,.94); box-shadow:0 30px 80px rgba(0,0,0,.42)}
body.theme-dark.device-mobile .mobile-route-header{background:rgba(9,12,18,.82); box-shadow:0 14px 36px rgba(0,0,0,.28)}
body.theme-dark.device-mobile .mobile-route-chip{background:linear-gradient(180deg, rgba(88,140,255,.16), rgba(88,140,255,.10)); box-shadow:0 4px 12px rgba(88,140,255,.12)}
body.theme-dark.device-mobile .mobile-tabs-sheet__panel{background:rgba(9,12,18,.94); box-shadow:0 28px 72px rgba(0,0,0,.44)}

body.device-desktop .mobile-dock,
body.device-desktop .mobile-route-header,
body.device-desktop .mobile-tabs-sheet{display:none !important}
body.mobile-shell-active .top-actions > .sidebar-toggle,
body.mobile-shell-active .top-actions > .top-search{display:none !important}
body.mobile-shell-active .top-actions{margin-left:auto}
body.mobile-shell-active .top-actions .notify-menu,
body.mobile-shell-active .top-actions .user-menu{margin-left:0}
body.mobile-shell-active .tabs > .tab-bar-wrap,
body.mobile-shell-active .tabs > .tab-bar{display:none !important}
body.mobile-shell-active .tab-panels{padding-top:0}

/* Mobile/tablet SmartTable width hack:
   let the actual table holder stretch to near full viewport width even when
   the table lives inside padded cards/tab panels. This keeps mobile tables
   feeling edge-to-edge without rewriting every page layout. */
body.mobile-shell-active{--st-mobile-bleed-gutter:8px}
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen) .st-table-wrap{
  width:calc(100vw - (var(--st-mobile-bleed-gutter) * 2));
  max-width:none;
  margin-left:calc(50% - 50vw + var(--st-mobile-bleed-gutter));
  margin-right:calc(50% - 50vw + var(--st-mobile-bleed-gutter));
}
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen) .st-table-wrap:first-child,
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen) .st-panels + .st-top + .st-table-wrap{
  margin-top:0;
}


/* Content container: JS replaces only its inner HTML */
#app-content{
  width:100%;
}

.page{width:100%}
.page-center{max-width:560px; margin:0 auto}

h1{margin:0 0 4px; font-size:20px; font-weight:700}
h2{margin:0 0 6px; font-size:18px}
.muted{color:var(--muted)}
.small{font-size:12px; color:var(--muted2)}

.card{
  background:var(--panel);
  border:1px solid var(--border2);
  border-radius:var(--radius2);
  box-shadow:var(--shadow2);
  padding:14px;
}

.grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:16px}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}

/* Dashboard tiles */
.dash{width:100%}
.dash-section{margin-top:14px}
.dash-label{
  font-size:11px;
  font-weight:950;
  font-size:12px;
  color:var(--muted2);
  text-transform:uppercase;
  letter-spacing:.1px;
  margin:10px 0 8px;
  padding-left:2px;
}
.dash-label{display:flex; align-items:center; gap:8px}
.dash-label:before{
  content:'';
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--secTint, rgba(37,99,235,.18));
  border:1px solid var(--secBr, rgba(37,99,235,.28));
  box-shadow:0 1px 0 rgba(15,23,42,.06);
}
.dash-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px}
@media (max-width: 980px){.dash-grid{grid-template-columns:1fr}}
.dash-tile{
  --tileTint: rgba(37,99,235,.12);
  --tileTint2: rgba(37,99,235,.05);
  --tileBr: rgba(37,99,235,.20);
  --tileLine: rgba(37,99,235,.42);
  display:block;
  text-decoration:none;
  color:var(--text);
  background:
    radial-gradient(240px 160px at 112% -12%, var(--tileTint2), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border:1px solid var(--tileBr);
  /* Body should visually connect to rounded tab buttons above.
     Keep rounding only on bottom corners. */
  border-radius:0 0 var(--radius2) var(--radius2);
  box-shadow:var(--shadow);
  padding:14px 14px 14px;
  transition: transform .10s ease, box-shadow .16s ease, border-color .16s ease;
  position:relative;
  overflow:hidden;
}
.dash-tile:before{
  content:'';
  position:absolute;
  inset:-60px -60px auto auto;
  width:220px;
  height:220px;
  background: radial-gradient(circle at 35% 35%, var(--tileTint), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
}
.dash-tile:after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background: linear-gradient(180deg, var(--tileLine), rgba(0,0,0,0));
  opacity:.55;
  pointer-events:none;
}
.dash-tile:hover{transform: translateY(-1px); box-shadow:0 16px 40px rgba(2,6,23,.10)}
.dash-tile:active{transform: translateY(0px)}
.dash-tile-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.dash-ico{width:20px; height:20px; opacity:.92}
.dash-title{font-weight:950;
  font-size:12px; letter-spacing:.1px}
.dash-desc{margin-top:6px; font-size:12px; color:var(--muted); line-height:1.35}

/* Section color accents */

.dash-section.core{--secTint: rgba(15,23,42,.10); --secBr: rgba(15,23,42,.16)}
.dash-section.core .dash-tile{--tileTint: rgba(15,23,42,.08); --tileTint2: rgba(15,23,42,.04); --tileBr: rgba(15,23,42,.14); --tileLine: rgba(15,23,42,.22)}
.dash-section.core .dash-tile:hover{border-color: rgba(15,23,42,.22)}
.dash-section.ops{--secTint: rgba(6,182,212,.18); --secBr: rgba(6,182,212,.30)}
.dash-section.ops .dash-tile{--tileTint: rgba(6,182,212,.14); --tileTint2: rgba(6,182,212,.06); --tileBr: rgba(6,182,212,.28); --tileLine: rgba(6,182,212,.55)}
.dash-section.ops .dash-tile:hover{border-color: rgba(6,182,212,.42)}

.dash-section.data{--secTint: rgba(37,99,235,.18); --secBr: rgba(37,99,235,.30)}
.dash-section.data .dash-tile{--tileTint: rgba(37,99,235,.14); --tileTint2: rgba(37,99,235,.06); --tileBr: rgba(37,99,235,.26); --tileLine: rgba(37,99,235,.55)}
.dash-section.data .dash-tile:hover{border-color: rgba(37,99,235,.40)}

.dash-section.admin{--secTint: rgba(124,58,237,.18); --secBr: rgba(124,58,237,.30)}
.dash-section.admin .dash-tile{--tileTint: rgba(124,58,237,.14); --tileTint2: rgba(124,58,237,.06); --tileBr: rgba(124,58,237,.26); --tileLine: rgba(124,58,237,.55)}
.dash-section.admin .dash-tile:hover{border-color: rgba(124,58,237,.40)}


.dash-section.reports{--secTint: rgba(22,163,74,.18); --secBr: rgba(22,163,74,.30)}
.dash-section.reports .dash-tile{--tileTint: rgba(22,163,74,.14); --tileTint2: rgba(22,163,74,.06); --tileBr: rgba(22,163,74,.26); --tileLine: rgba(22,163,74,.55)}
.dash-section.reports .dash-tile:hover{border-color: rgba(22,163,74,.40)}

.dash-section.system{--secTint: rgba(220,38,38,.14); --secBr: rgba(220,38,38,.22)}
.dash-section.system .dash-tile{--tileTint: rgba(220,38,38,.10); --tileTint2: rgba(220,38,38,.04); --tileBr: rgba(220,38,38,.20); --tileLine: rgba(220,38,38,.40)}
.dash-section.system .dash-tile:hover{border-color: rgba(220,38,38,.32)}

.dash-section.account{--secTint: rgba(15,23,42,.10); --secBr: rgba(15,23,42,.16)}
.dash-section.account .dash-tile{--tileTint: rgba(15,23,42,.08); --tileTint2: rgba(15,23,42,.04); --tileBr: rgba(15,23,42,.14); --tileLine: rgba(15,23,42,.22)}
.dash-section.account .dash-tile:hover{border-color: rgba(15,23,42,.22)}

/* Tip callout (should NOT look like a link-tile) */
.tip-card{
  margin-top:16px;
  background:
    radial-gradient(260px 170px at 112% -12%, rgba(245,158,11,.14), transparent 62%),
    linear-gradient(180deg, rgba(245,158,11,.10), rgba(255,255,255,.78));
  border-color: rgba(245,158,11,.28);
  box-shadow: 0 12px 28px rgba(245,158,11,.06);
  position:relative;
  overflow:hidden;
}
.tip-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.tip-title{display:flex; align-items:center; gap:10px}
.tip-ico{width:18px; height:18px; opacity:.92}
.tip-card .badge{--b-bg: rgba(245,158,11,.14); --b-br: rgba(245,158,11,.26); --b-fg:#7c2d12}

/* Small typographic tweak for the tip header */
.tip-card h2{margin:0; font-size:16px}

.page-header{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:14px}
.page-head{margin-bottom:14px}
.page-title{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:0}
.page-title .page-ico{width:20px; height:20px; opacity:.92}
.page-subtitle{margin-top:6px; color:var(--muted); font-size:13px}

/* Tabs */

.tabs{margin-top:10px}

/* Tab buttons live above a card-like body, like in desktop apps */
.tab-bar{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:nowrap;
  padding:3px 4px 0;
  border-bottom:1px solid var(--border2);
}


/* Tab bar overflow: arrow buttons + horizontal scroll */
.tab-bar-wrap{
  display:flex;
  gap:6px;
  align-items:flex-end;
  padding:3px 4px 0;
  border-bottom:1px solid var(--border2);
}
.tab-bar-wrap .tab-bar-scroll{
  flex:1;
  min-width:0;
  padding-top:3px;
  margin-top:-3px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.tab-bar-wrap .tab-bar-scroll::-webkit-scrollbar{display:none}
.tab-bar-wrap .tab-bar{border-bottom:0; padding:0; flex-wrap:nowrap}

.tab-nav-btn{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,.62);
  color:rgba(15,23,42,.86);
  box-shadow:0 1px 0 rgba(15,23,42,.06);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .08s ease, background .12s ease, opacity .12s ease, border-color .12s ease;
}
.tab-nav-btn:hover{background:rgba(255,255,255,.82)}
.tab-nav-btn:active{transform:translateY(0)}
.tab-nav-btn.is-hidden{opacity:0; pointer-events:none}
.tab-nav-ico{width:14px; height:14px; opacity:.86}

.tab{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:max-content;
  min-width:max-content;
  gap:8px;
  white-space:nowrap;
  padding:6px 12px;
  border:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  background:rgba(255,255,255,.70);
  color:rgba(15,23,42,.86);
  border-radius:10px 10px 0 0; /* rounded on top, flat where it meets the body */
  font-weight:950;
  font-size:12px;
  letter-spacing:.1px;
  margin-bottom:-1px; /* connect with body border */
  box-shadow:0 1px 0 rgba(15,23,42,.06);
  transition: transform .08s ease, background .10s ease, border-color .10s ease;
}

.tab > span{white-space:nowrap}

.tab:hover{background:rgba(255,255,255,.82)}

.tab.active{
  background:var(--panel);
  border-color:rgba(37,99,235,.40);
  border-bottom-color:var(--panel);
  color:rgba(2,6,23,.96);
  box-shadow:none;
  position:relative;
  z-index:3;
}

.tab-ico{width:12px; height:12px; opacity:.86}

.tab-panels{
  background:var(--panel);
  border:1px solid var(--border);
  border-top:0;

  /* When using tabs, body connects to tabs above:
     top corners should be flat; bottom corners stay rounded. */
  border-radius:0 0 var(--radius2) var(--radius2);
  box-shadow:var(--shadow);
  padding:16px;
}

.tab-panel{padding:0}

/* Forms */
.form-card{padding:22px; max-width:560px; margin:0 auto}
.form-card.form-card-wide{max-width:820px}
.form{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.form-grid{display:grid; gap:12px}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}
.field{display:flex; flex-direction:column; gap:4px}
.field-hidden{display:none !important}
.info-box{
  border:1px solid var(--border2);
  background:rgba(2,6,23,.03);
  border-radius:14px;
  padding:12px 12px;
  color:rgba(15,23,42,.88);
  font-size:13px;
  line-height:1.35;
}
.info-box-text{white-space:pre-wrap}
.label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted2);
  font-weight:700;
}
.label-ico{width:14px; height:14px; opacity:.85; vertical-align:middle}
.input{
  width:100%;
  border-radius:10px;
  padding:7px 10px;
  min-height:36px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,.97);
  color:var(--text);
  outline:none;
}
.input:focus{border-color:rgba(37,99,235,.50); box-shadow:0 0 0 2px rgba(37,99,235,.14)}
textarea.input{min-height:80px; resize:vertical}

.input-wrap{position:relative; display:flex; align-items:center}
.input-ico{position:absolute; left:12px; width:16px; height:16px; opacity:.78; pointer-events:none}
.input-wrap.has-left-ico .input{padding-left:40px}
.input-wrap.has-action .input{padding-right:44px}

.field-msg{
  min-height:16px;
  font-size:12px;
  font-weight:700;
  color:rgba(185,28,28,.92);
  opacity:.95;
}
.field.is-ok .field-msg{color:rgba(22,163,74,.90)}
.field.is-validating .field-msg{color:var(--muted)}

.field.is-error .input{border-color:rgba(220,38,38,.28); box-shadow:0 0 0 3px rgba(220,38,38,.10)}
.field.is-error .label{color:rgba(185,28,28,.92)}

.field.is-ok .input{border-color:rgba(22,163,74,.24); box-shadow:0 0 0 3px rgba(22,163,74,.08)}
.field.is-ok .label{color:rgba(22,163,74,.88)}

/* Compact fields (used in SmartTable external filters) */
.input-sm{padding:5px 8px; min-height:30px; border-radius:8px; font-size:12px}
.btn-sm{padding:5px 8px; min-height:30px; border-radius:8px; font-size:12px; gap:6px}

.field-inline{display:flex; flex-direction:column; gap:6px; min-width:160px}
.field-inline .label{font-size:11px; font-weight:900; letter-spacing:.12px}

/* Keep Apply/Clear on the same filter row when possible (no forced full-width line). */
.filters-actions{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-left:auto}

.row{display:flex; align-items:center; gap:12px}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* In tables the action buttons should align consistently to the right */
td.actions{justify-content:flex-end}

/* Buttons */
.btn{
  cursor:pointer;
  border:1px solid var(--border2);
  background: rgba(255,255,255,.96);
  color:var(--text);
  padding:7px 12px;
  border-radius:10px;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 1px 0 rgba(15,23,42,.06);
  transition: box-shadow .10s ease, background .10s ease;
}
.btn:hover{filter:saturate(1.03)}
.btn:hover{box-shadow:0 12px 22px rgba(15,23,42,.10)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}

.btn-sm{padding:5px 8px; min-height:30px; border-radius:8px; font-weight:900; font-size:12px}
.btn-xs{padding:2px 8px; min-height:24px; border-radius:8px; font-weight:900; font-size:11px}
.btn-icon{width:30px; height:30px; padding:0; border-radius:8px}
.btn-icon img{margin:0}
.btn-table{padding:2px 7px; border-radius:6px; font-weight:900; font-size:11px; gap:5px; box-shadow:none; line-height:1.2}
.btn.btn-table:hover{box-shadow:0 6px 14px rgba(15,23,42,.08)}
.btn.btn-table:hover{box-shadow:0 10px 18px rgba(15,23,42,.08)}
.btn.btn-table:active{transform:translateY(1px)}

.btn-primary{
  border-color:rgba(37,99,235,.28);
  background: linear-gradient(180deg, rgba(37,99,235,.16), rgba(124,58,237,.10));
  box-shadow:0 1px 0 rgba(15,23,42,.06), 0 10px 24px rgba(37,99,235,.10);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(15,23,42,.06), 0 14px 30px rgba(37,99,235,.14)}

.btn-ghost{background:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.80)}

.danger{color:var(--danger)}
.btn.danger,.btn-ghost.danger{border-color:rgba(220,38,38,.22)}

.link{color:var(--accent); text-decoration:none; font-weight:800; display:inline-flex; align-items:center; gap:8px}
.link:hover{text-decoration:underline}

.notice{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.70);
  color:var(--text);
}
.notice.error{border-color:rgba(220,38,38,.22); background:rgba(220,38,38,.06)}

/* Table */
.table{width:100%; border-collapse:collapse; overflow:hidden; table-layout:fixed}
.table th,.table td{
  padding:4px 5px;
  border-bottom:1px solid rgba(15,23,42,.06);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.table th{text-align:left; color:var(--muted2); font-size:12px; font-weight:950;
  font-size:12px; letter-spacing:.15px}
.table tr:hover td{background:rgba(37,99,235,.03)}

/* -----------------------------
   SmartTable
   ----------------------------- */
.st{display:flex; flex-direction:column; gap:8px}
.st-toolbar{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.st-toolbar .st-left,.st-toolbar .st-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.st-extfilters{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end}
.st-extfilters:empty{display:none}
.st-extfilters-inner{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; width:100%}
.st-extfilters .input{min-width:160px}

.st-input{min-width:220px; max-width:420px}
.st-meta{font-size:12px; color:var(--muted2); font-weight:900}


.st-batchbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}

.st-batch-title {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(15,23,42,.65);
}

.st-batch-progress {
  font-size: 12px;
  color: rgba(15,23,42,.60);
}

.st-batch-buttons {
  display: inline-flex;
  gap: 6px;
}

/* Batch buttons should be extra-compact (match pager controls) */
.st-batchbar .btn {
  height: 24px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10.5px;
  gap: 6px;
  line-height: 1.1;
  box-shadow: none;
}

.st-batchbar .btn:hover {
  box-shadow: 0 8px 14px rgba(15,23,42,.08);
}

.st-batchbar .btn-ico {
  width: 11px;
  height: 11px;
}

.st-batchbar .btn.danger {
  border-color: rgba(244,63,94,.25);
}

/* Batch modal record hint */
.st-batch-hint{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(140,90,255,.22);
  background: rgba(140,90,255,.10);
  color: rgba(15,23,42,.88);
  font-size: 12px;
  font-weight: 800;
}
.st-batch-hint .muted{color: rgba(15,23,42,.55); font-weight: 900}


/* SmartTable summaries (KPIs) */
.st-summarybar{display:flex; flex-direction:column; gap:10px; padding:10px 0 6px}
.st-summarybar-external{padding:0}
.st-summary:empty{display:none}
.st-summary{display:flex; flex-direction:column; gap:10px}
.st-summary-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.st-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;
  font-size:12px; color:var(--muted2); background:rgba(15,23,42,.06); border:1px solid rgba(15,23,42,.12)}
.st-summary-section{display:flex; flex-direction:column; gap:8px}
.st-summary-title{font-size:11px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--muted2); margin:2px 2px -2px}
.st-summary-status{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  font-size:12px; color:var(--muted2)}
.st-summary-status .spinner{width:14px; height:14px}
.st-summary-grid{display:flex; flex-wrap:wrap; gap:10px}
.st-summary-box{cursor:grab; user-select:none}
.st-summary-box.dragging{opacity:.55; cursor:grabbing}
.st-summary-box.is-hidden{display:none !important}
.st-summary-box.st-drop-before{box-shadow: inset 4px 0 0 rgba(37,99,235,.55)}
.st-summary-box.st-drop-after{box-shadow: inset -4px 0 0 rgba(37,99,235,.55)}

.st-summary-group{min-width:320px; flex:1 1 420px}
.st-summary-group .st-group-title{margin:0 0 8px}
.st-summary-group .st-group-items{gap:8px}
.st-summary-group .st-kpi{min-width:140px; padding:8px 10px; border-radius:12px}

/* Summary tables (inside blocks) */
.st-group-items--table{display:block}
.st-sum-table{width:100%; border-collapse:separate; border-spacing:0 6px}
.st-sum-table td{padding:7px 10px; border-radius:14px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.66); box-shadow:none; font-size:12px; font-weight:950;
  font-size:12px; color:var(--muted2)}
.st-sum-table td.st-sum-value{text-align:right; font-weight:900; color:var(--text)}
.st-sum-row.st-kpi--zero td{background:rgba(255,255,255,.62); border-color:rgba(15,23,42,.10)}
.st-sum-row.st-kpi--pos td{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.22)}
.st-sum-row.st-kpi--neg td{background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22)}
.st-sum-row.st-kpi--neutral td{background:rgba(59,130,246,.07); border-color:rgba(59,130,246,.18)}
.st-sum-divider-row td{padding:0; border:none; background:transparent; box-shadow:none}
.st-sum-divider-row.is-hidden{display:none !important}
.st-summary-sumbox .st-sum-row.is-hidden{display:none !important}

.st-group-table{width:100%; border-collapse:separate; border-spacing:0 6px}
.st-group-table th{padding:0 6px 4px; font-size:11px; font-weight:700;
  font-size:11px; color:var(--muted2); text-transform:uppercase; letter-spacing:.02em; text-align:left}
.st-group-table th.right{text-align:right}
.st-group-table td{padding:7px 10px; border-radius:14px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.66); box-shadow:none; font-size:12px; font-weight:950;
  font-size:12px; color:var(--muted2)}
.st-group-table td.right{text-align:right; font-weight:900; color:var(--text)}
.st-group-row.st-kpi--zero td{background:rgba(255,255,255,.62); border-color:rgba(15,23,42,.10)}
.st-group-row.st-kpi--pos td{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.22)}
.st-group-row.st-kpi--neg td{background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22)}
.st-group-row.st-kpi--neutral td{background:rgba(59,130,246,.07); border-color:rgba(59,130,246,.18)}

/* Grouped sum-box divider */
.st-sum-divider{flex-basis:100%; height:1px; background:rgba(15,23,42,.10); border-radius:999px; margin:2px 0}
.st-sum-divider.is-hidden{display:none !important}
.st-summary-sumbox .st-kpi.is-hidden{display:none !important}

/* Placeholder when all fields inside a grouped summary box are disabled */
.st-sum-empty{flex-basis:100%; padding:6px 8px; border-radius:12px; border:1px dashed rgba(15,23,42,.18); background:rgba(15,23,42,.02); font-size:12px; font-weight:900}

/* Summary boxes chooser */
.st-sum-popover{position:relative}
.st-sum-panel{display:none; position:absolute; right:0; top:calc(100% + 10px); width:280px; z-index:20;
  padding:10px 10px 12px; border-radius:12px; border:1px solid var(--border2);
  background:rgba(255,255,255,.96); backdrop-filter: blur(10px);
  box-shadow:0 20px 70px rgba(15,23,42,.18);
  max-height:520px; overflow:auto;
}
.st-sum-panel.is-open{display:block}
.st-sum-title{font-size:12px; font-weight:900; color:var(--text); margin:2px 2px 8px}
.st-sum-actions{display:flex; gap:8px; align-items:center; justify-content:space-between; margin:0 2px 8px}
.btn.btn-xs{height:24px; padding:0 8px; font-size:11px}
.st-sum-list{display:flex; flex-direction:column; gap:6px; max-height:200px; overflow:auto; padding:4px 2px}
.st-sum-item{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:12px; border:1px solid rgba(15,23,42,.08); background:rgba(15,23,42,.02)}
.st-sum-item:hover{background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.18)}
.st-sum-item input{width:16px; height:16px}
.st-sum-item-title{font-size:12px; font-weight:900; color:var(--muted2); line-height:1.1}

.st-sum-subtitle{margin:10px 2px 6px; font-size:11px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--muted2)}
.st-sum-fields{display:flex; flex-direction:column; gap:10px; padding:0 2px 2px}
.st-sum-fieldbox{border:1px solid rgba(15,23,42,.08); background:rgba(15,23,42,.02); border-radius:14px; padding:10px}
.st-sum-fieldbox-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px}
.st-sum-fieldbox-title{font-size:12px; font-weight:700;
  font-size:12px; color:var(--text)}
.st-sum-fieldbox-actions{display:flex; gap:8px}
.st-sum-fieldbox-list{display:flex; flex-direction:column; gap:6px}
.st-sum-subitem{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:12px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.60)}
.st-sum-subitem:hover{background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.18)}
.st-sum-subitem input{width:16px; height:16px}
.st-sum-subitem-title{font-size:12px; font-weight:900; color:var(--muted2); line-height:1.1}
.st-groups{display:flex; flex-direction:column; gap:12px}
.st-group-title{font-size:12px; font-weight:950;
  font-size:12px; color:var(--muted2); margin:0 0 6px}
.st-group-items{display:flex; flex-wrap:wrap; gap:10px}
.st-kpi{min-width:150px; padding:10px 12px; border-radius:14px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.66); box-shadow:none; display:flex; flex-direction:column; gap:4px}
.st-kpi-label{font-size:11px; font-weight:700;
  font-size:12px; color:var(--muted2); letter-spacing:.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-kpi-value{font-size:18px; font-weight:900; color:var(--text); line-height:1.1}
.st-kpi-sub{font-size:11px; color:var(--muted2); font-weight:900}
.st-kpi--zero{background:rgba(255,255,255,.62); border-color:rgba(15,23,42,.10)}
.st-kpi--pos{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.22)}
.st-kpi--neg{background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22)}
.st-kpi--neutral{background:rgba(59,130,246,.07); border-color:rgba(59,130,246,.18)}

/* Multi-metric group ("metrics[]" summary groups) */
.st-mgroup{display:flex; flex-direction:column; gap:8px}
.st-mgroup-head,.st-mgroup-row{display:grid; grid-template-columns:170px repeat(var(--st-mcols, 3), minmax(120px,1fr)); gap:8px; align-items:stretch}
.st-mgroup-head{margin-top:2px}
.st-mgroup-cell{padding:8px 10px; border-radius:14px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.55); box-shadow:0 8px 20px rgba(15,23,42,.04)}
.st-mgroup-cell--h{padding:4px 8px; border-radius:12px; background:transparent; border-color:transparent; box-shadow:none; font-size:11px; font-weight:700;
  font-size:11px; color:var(--muted2); text-transform:uppercase; letter-spacing:.09em}
.st-mgroup-cell--name{background:rgba(15,23,42,.03)}
.st-mgroup-cell--h.st-mgroup-cell--name{background:transparent}
.st-mgroup-name{font-size:12px; font-weight:900; color:var(--text); line-height:1.15}
.st-mgroup-sub{font-size:11px; color:var(--muted2); font-weight:900; margin-top:2px}
.st-mgroup-cell.st-kpi--zero{background:rgba(255,255,255,.55); border-color:rgba(15,23,42,.08)}
.st-mgroup-cell.st-kpi--pos{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.22)}
.st-mgroup-cell.st-kpi--neg{background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22)}
.st-mgroup-cell.st-kpi--neutral{background:rgba(59,130,246,.07); border-color:rgba(59,130,246,.18)}


/* Summary tabs (single active card) */
.st-summary--tabs{gap:12px}
.st-summary-tabs{display:flex; flex-wrap:wrap; gap:8px; padding:4px; border-radius:999px; background:rgba(15,23,42,.04); border:1px solid rgba(15,23,42,.10); width:fit-content}
.st-tab-btn{appearance:none; border:1px solid transparent; background:transparent; padding:7px 12px; border-radius:999px; font-size:12px; font-weight:700;
  font-size:12px; color:var(--muted2); cursor:pointer; line-height:1.1; transition:transform .08s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease}
.st-tab-btn:hover{background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.16); color:var(--text)}
.st-tab-btn.is-active{background:linear-gradient(90deg, rgba(37,99,235,.14), rgba(124,58,237,.12)); border-color:rgba(37,99,235,.22); color:var(--text); box-shadow:0 10px 22px rgba(15,23,42,.07)}
.st-tab-btn:active{transform:scale(.99)}
.st-summary-panels{display:flex; flex-direction:column; gap:12px}
.st-summary-blocks{display:flex; flex-direction:column; gap:12px}
.st-summary-panel{display:none}
.st-summary-panel.is-active{display:block}
.st-summary-subtabs{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px; padding-top:10px; border-top:1px solid rgba(15,23,42,.10)}
.st-summary-subtabs .st-tab-btn{padding:6px 10px; font-size:11px; line-height:1.2}
.st-summary-subpanel{display:none}
.st-summary-subpanel.is-active{display:block}
.st-summary-kpis{display:flex; flex-wrap:wrap; gap:10px}
.st-kpi--xl{min-width:200px; padding:14px 16px; border-radius:18px}
.st-kpi--xl .st-kpi-value{font-size:26px}
.st-summary-subcard{border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.70); box-shadow:0 10px 26px rgba(15,23,42,.06); border-radius:12px; padding:12px 12px 10px}
.st-summary-subhead{font-size:11px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--muted2); margin:2px 2px 10px}

/* Multi-metric group overflow helpers (Per Invoice is wide) */
.st-mgroup-wrap{width:100%; max-width:100%; overflow-x:auto; overflow-y:auto; padding-bottom:6px; border-radius:14px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.40); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.st-mgroup{min-width:760px}

/* Matrix / pivot table (Per Customer / Type) */
.st-matrix-wrap{width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; border-radius:14px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.40); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.st-matrix-table{width:100%; border-collapse:separate; border-spacing:0; min-width:760px}
.st-matrix-th{position:sticky; top:0; z-index:2; text-align:right; font-size:11px; font-weight:800;
  font-size:12px; color:var(--muted2); text-transform:uppercase; letter-spacing:.02em; padding:8px 10px; background:rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom:1px solid rgba(15,23,42,.10)}
.st-matrix-th--name{text-align:left}
.st-matrix-th--lvl{text-align:center}
.st-matrix-row td{padding:7px 10px; border-bottom:1px solid rgba(15,23,42,.06); background:rgba(255,255,255,.55)}
.st-matrix-row:hover td{background:rgba(37,99,235,.05)}
.st-matrix-name{font-size:11px; font-weight:600; color:var(--text); text-align:left; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-matrix-val{text-align:right; font-variant-numeric: tabular-nums; font-weight:600; font-size:11px}
.st-matrix-val--total{background:rgba(15,23,42,.055); border-left:1px solid rgba(15,23,42,.10); font-weight:900}
.st-matrix-row:hover td.st-matrix-val--total{background:rgba(15,23,42,.065)}
.st-matrix-th--total{background:rgba(15,23,42,.075); border-left:1px solid rgba(15,23,42,.10); font-weight:900; color:var(--text)}
.st-matrix-foot{padding:8px 10px; font-size:11px; font-weight:800; color:var(--muted2); background:rgba(15,23,42,.06); border-top:1px solid rgba(15,23,42,.12)}
.st-matrix-foot--label{text-align:left}
.st-matrix-foot--val{text-align:right; font-variant-numeric: tabular-nums}
.st-matrix-foot--total{background:rgba(15,23,42,.09); font-weight:900; color:var(--text)}
.st-matrix-table tfoot td{position:sticky; bottom:0; z-index:1}

.st-matrix-unit{font-size:10px; font-weight:900; letter-spacing:.03em; text-transform:uppercase; opacity:.65}
.st-matrix-unit--prefix{margin-right:6px}
.st-matrix-unit--suffix{margin-left:6px}

.st-agg-badge{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:900;
  color:var(--text); background:rgba(15,23,42,.06); border:1px solid rgba(15,23,42,.12)}

/* Pivot sign colors (darker for readability on white bg) */
.st-matrix-val.is-zero{color:rgba(15,23,42,.55)}
.st-matrix-val.is-pos{color:rgba(5,120,87,.96)}
.st-matrix-val.is-neg{color:rgba(153,27,27,.96)}
.st-matrix-foot--val.is-zero{color:rgba(15,23,42,.55)}
.st-matrix-foot--val.is-pos{color:rgba(5,120,87,.96)}
.st-matrix-foot--val.is-neg{color:rgba(153,27,27,.96)}


@media (max-width: 980px){
  .st-mgroup{min-width:680px}
  .st-kpi--xl{min-width:180px}
}
.st-table tbody tr.st-selected td{background:rgba(37,99,235,.06)}
.st-table tbody tr.st-selected td.st-computed{background:rgba(37,99,235,.075)}

/* SmartTable export wizard */
.st-export-btn{gap:8px}
.st-export-radio{display:flex; flex-direction:column; gap:8px}
.st-export-choice{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02)}
.st-export-choice input{margin-top:3px}
.st-progress{height:12px; border-radius:999px; overflow:hidden; border:1px solid var(--border); background:rgba(255,255,255,.03)}
.st-progress>div{height:100%; width:0%; background:linear-gradient(90deg, var(--accent), rgba(0,0,0,0)); transition:width .25s ease}

/* SmartTable export wizard (v2) */
.expwiz{width:100%}
.expwiz-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.expwiz-box{border:1px solid rgba(15,23,42,.10); border-radius:12px; padding:12px; background:rgba(255,255,255,.55); box-shadow:0 8px 18px rgba(15,23,42,.06)}
.expwiz-box--summary{grid-column:1 / -1}
.expwiz-h{font-weight:900; letter-spacing:.1px; margin-bottom:10px}
.expwiz-h2{font-weight:700;
  font-size:12px; font-size:12px; color:var(--muted2); margin-bottom:6px}
.expwiz-row{display:flex; gap:10px; flex-wrap:wrap}
.expwiz-row--col{flex-direction:column; gap:8px; align-items:flex-start}
.expwiz-radio{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:14px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.65)}
.expwiz-radio input{margin:0}
.expwiz-ico{width:18px; height:18px; opacity:.9}
.expwiz-sub{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(15,23,42,.14)}
.expwiz-cols{margin-top:10px; padding:10px; border-radius:12px; border:1px dashed rgba(15,23,42,.16); background:rgba(15,23,42,.02)}
.expwiz-cols-tools{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.expwiz-cols-tools .input{flex:1}
.expwiz-cols-list{max-height:220px; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.expwiz-col{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:14px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.70)}
.expwiz-col input{margin:0}
.expwiz-sum{display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.35}
.expwiz-progress{margin-top:10px; padding-top:10px; border-top:1px solid rgba(15,23,42,.10)}
.expwiz-stage{font-weight:900; margin-bottom:8px}

.expwiz-sections{display:flex; flex-direction:column; gap:6px; margin-top:6px}
/* Compact "Smart report sections" rows */
.expwiz-sec{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 8px; border-radius:12px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.65)}
/* The label inside a section row should be flat (no nested pill padding) */
.expwiz-sec-label{flex:1; padding:0; border:0; background:transparent; border-radius:0}
.expwiz-sec-label:hover{background:transparent}
.expwiz-sec-actions{display:flex; gap:4px}
.expwiz-sec-actions .btn{padding:4px 6px}
.expwiz-sec-actions .btn .btn-ico{width:12px; height:12px}
.expwiz-pick{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(15,23,42,.14)}
.expwiz-pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.expwiz-pick-tools{display:flex; gap:8px; align-items:center; margin:6px 0 8px}
.expwiz-pick-list{max-height:220px; overflow:auto}
.expwiz-pick-list .check{padding:8px 8px}
.expwiz-pick-list .check-title{font-size:12.5px}
.expwiz-pick-list .check-hint{font-size:11px; color:var(--muted2)}
@media (max-width: 900px){
  .expwiz-pick-grid{grid-template-columns:1fr}
}
.progressbar{height:10px; border-radius:999px; overflow:hidden; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.45)}
.progressbar>div{height:100%; width:0%; background:linear-gradient(90deg, var(--accent), rgba(0,0,0,0)); transition:width .25s ease}

@media (max-width: 980px){
  .expwiz-grid{grid-template-columns:1fr}
  .expwiz-cols-list{grid-template-columns:1fr}
}

.st-tablewrap{
  position:relative;
  overflow:auto;
  max-height: 68vh;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.60);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.st-table{width:100%; min-width:100%; table-layout:fixed}
.st-table th,.st-table td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-table td.is-truncated{cursor:pointer}
.st-table td.is-truncated:hover{background:rgba(37,99,235,.05)}
.st-table thead th{position:sticky; top:0; z-index:5; background:rgba(255,255,255,.97)}
.st-table thead tr.st-filters th{top:38px; z-index:4; padding:4px 8px; background:rgba(255,255,255,.78)}
.st-table thead tr.st-filters input,.st-table thead tr.st-filters select{
  width:100%;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.78);
  padding:0 8px;
  font-size:12px;
}
.st-th{position:relative; user-select:none; cursor:pointer}
.st-th.st-computed{cursor:default}

/* Computed/enriched report columns (SmartTable v2) */
.st-table th.st-computed{background:rgba(15,23,42,.06)}
.st-table td.st-computed{background:rgba(15,23,42,.035)}
.st-table tbody tr:hover td.st-computed{background:rgba(37,99,235,.055)}
.st-calc{
  margin-left:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.1px;
  color:var(--muted2);
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.st-th.dragging{opacity:.55}
.st-th.st-drop-before{box-shadow: inset 4px 0 0 rgba(37,99,235,.55)}
.st-th.st-drop-after{box-shadow: inset -4px 0 0 rgba(37,99,235,.55)}
.st-th .st-sort{font-size:11px; opacity:.75; margin-left:6px}
.st-resizer{
  position:absolute;
  top:0;
  right:-3px;
  width:8px;
  height:100%;
  cursor:col-resize;
  z-index:5;
}
.st-resizer:after{
  content:'';
  position:absolute;
  top:30%;
  left:3px;
  width:2px;
  height:40%;
  border-radius:2px;
  background:rgba(15,23,42,.12);
}

.st-loading{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  z-index:10;
}
.st-loading.on{display:flex}
.st-spinner{width:24px; height:24px; border:3px solid rgba(15,23,42,.16); border-top-color:rgba(37,99,235,.55); border-radius:999px; animation:stspin .8s linear infinite}
@keyframes stspin{to{transform:rotate(360deg)}}

.st-pager{display:flex; align-items:center; gap:6px}
.st-pager .st-page{display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; color:var(--muted2); font-weight:900; min-width:140px}
.st-pager .st-page .st-page-input{width:64px; min-width:64px; text-align:center; padding:4px 6px; height:28px; border-radius:10px}
.st-pager .st-page .st-page-input::-webkit-outer-spin-button,
.st-pager .st-page .st-page-input::-webkit-inner-spin-button{opacity:1}
.st-pager .st-spin{width:14px; height:14px; border-radius:999px; border:2px solid rgba(15,23,42,.15); border-top-color:rgba(37,99,235,.75); opacity:0; transition:opacity .15s ease}
.st-pager .st-spin.active{opacity:1; animation:stspin 1s linear infinite}

.st-popover{position:relative}
.st-popover-panel{
  position:fixed; /* panel is portaled to <body> */
  left:12px;
  top:12px;
  width:min(380px, calc(100vw - 24px));
  max-height: 60vh;
  overflow:auto;
  border-radius:12px;
  background:var(--panel2);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  display:none;
  z-index:2000;
}
.st-popover-panel.is-open{display:block}
.st-popover-panel-portal{z-index:2000}
.st-cols{padding:8px}
.st-cols .hint{font-size:12px; color:var(--muted2); margin-bottom:8px}
.st-col-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 8px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.55);
  margin-bottom:6px;
}
.st-col-item.dragging{opacity:.55}
.st-col-left{display:flex; align-items:center; gap:10px; min-width:0}
.st-col-handle{font-weight:900; opacity:.55; cursor:grab}
.st-col-title{font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.st-actions{display:flex; gap:3px; align-items:center; justify-content:flex-end; flex-wrap:nowrap}

.st-th--actions{white-space:nowrap}
.st-td--actions{white-space:nowrap}
.st-td--actions .btn{padding:2px 6px; border-radius:6px; font-size:11px; gap:5px; line-height:1.2; box-shadow:none}
.st-td--actions .btn.tpc-icononly{padding:2px 4px !important; min-width:0 !important; width:auto; height:auto;}


/* SmartTable: compact controls */
.st-toolbar .btn, .st-footer .btn, .st-panels .btn{
  padding:5px 10px;
  border-radius:8px;
  font-size:12px;
  gap:6px;
}
.st-toolbar .btn-ico, .st-footer .btn-ico, .st-panels .btn-ico{width:12px; height:12px}

/* Actions inside cells should not bloat row height */
.st-actions .btn{
  padding:2px 5px;
  border-radius:6px;
  font-size:11px;
  gap:4px;
  line-height:1.2;
  box-shadow:none;
}
/* Icon-only row action buttons — minimal footprint, auto-width for badge variants */
.st-actions .btn.tpc-icononly,
.st-td--actions .btn.tpc-icononly{
  padding:2px 4px !important;
  min-width:0 !important;
  min-height:0 !important;
  width:auto;
  height:auto;
  border-radius:6px;
}
/* When badge present (comments count, reactions) — give a bit more horizontal room */
.st-actions .btn.tpc-icononly.tpc-has-badge,
.st-td--actions .btn.tpc-icononly.tpc-has-badge{
  padding:2px 6px !important;
  gap:4px !important;
}
.st-actions .btn:hover{box-shadow:0 8px 14px rgba(15,23,42,.08)}
.st-actions .btn-ico{width:14px; height:14px}

/* Compact inputs/selects used by SmartTable toolbars and external filters */
.st .input{padding:5px 8px; min-height:30px; border-radius:8px; font-size:12px}

/* SmartTable dropdown menus (scoped) */
.st .dropdown-panel a{padding:8px 8px; border-radius:10px; font-size:12px}
.st .dropdown-label{padding:6px 8px 4px; font-size:10px}

.st-cell.clickable{cursor:pointer}
.st-cell.clickable:hover{background:rgba(37,99,235,.04)}

.st-pre{white-space:pre-wrap; word-break:break-word; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px; line-height:1.4}

/* Dropdown */
.dropdown{position:relative}
.dropdown .chev{font-size:12px; opacity:.75}
.dropdown-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  z-index:45;
  min-width: 240px;
  padding:6px;
  border-radius:10px;
  background:var(--panel2);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  display:none;
  z-index:45;
}
.dropdown.open .dropdown-panel{display:block}
.dropdown-label{font-size:11px; font-weight:700; color:var(--muted2); padding:8px 10px 6px; text-transform:uppercase; letter-spacing:.4px}
.dropdown-panel a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
}
.dropdown-panel a:hover{background:rgba(37,99,235,.06)}
.dropdown-panel a.active{background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.18)}
.dropdown-panel a.danger:hover{background:rgba(220,38,38,.06)}
.dropdown-divider{height:1px; background:rgba(15,23,42,.08); margin:8px 6px}

/* Modal / Overlay stack */
.modal-root{position:fixed; inset:0; display:block; z-index:50}
.modal-root.hidden{display:none}
.modal-layer{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.modal-backdrop{position:absolute; inset:0; background:rgba(15,23,42,.32)}
.modal-layer.is-under .modal-backdrop{opacity:0; pointer-events:none}
.modal{
  position:relative;
  width:min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  /* Body should visually connect to rounded tab buttons above.
     Keep rounding only on bottom corners. */
  border-radius:var(--radius2);
  background:var(--panel2);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
}
.modal.confirm{width:min(520px, calc(100vw - 24px))}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(15,23,42,.08)}
.modal-title{font-weight:900; display:flex; align-items:center; gap:10px}
.modal-title-ico{width:16px; height:16px; opacity:.92}
.modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px;
}

.modal-footer{
  flex:0 0 auto;
  padding:12px 16px;
  border-top:1px solid rgba(15,23,42,.08);
  background:var(--panel2);
}

/* Upload progress (modal) */
.modal-layer.locked [data-overlay-close],
.modal-layer.locked [data-modal-close],
.modal-layer.locked [data-confirm-close],
.modal-layer.locked [data-confirm-cancel]{pointer-events:none; opacity:.55}
.modal-layer.locked .modal-backdrop{cursor:progress}

.upload-progress{margin-top:12px; display:flex; flex-direction:column; gap:6px}
.upload-progress.hidden{display:none}
.upload-bar{height:10px; border-radius:999px; background:rgba(15,23,42,.10); border:1px solid rgba(15,23,42,.10); overflow:hidden}
.upload-bar-inner{height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg, rgba(37,99,235,.90), rgba(124,58,237,.85)); transition:width .12s ease}


/* Toast */
.toast-root{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  width:min(360px, calc(100vw - 32px));
  border-radius:12px;
  background:var(--panel2);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  padding:12px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  animation: toastIn .18s ease-out;
}
.toast .dot{width:10px; height:10px; border-radius:999px; margin-top:6px; background:rgba(37,99,235,.70)}
.toast.success .dot{background:rgba(22,163,74,.80)}
.toast.error .dot{background:rgba(220,38,38,.80)}
.toast.info .dot{background:rgba(37,99,235,.70)}
.toast .t-body{flex:1}
.toast .t-title{font-weight:900; margin:0 0 2px}
.toast .t-msg{margin:0; color:var(--muted); font-weight:700}
.toast .t-close{pointer-events:auto}
@keyframes toastIn{from{transform:translateY(6px); opacity:.0} to{transform:translateY(0); opacity:1}}

/* Button spinner */
.spinner{
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid rgba(15,23,42,.18);
  border-top-color:rgba(37,99,235,.75);
  animation:spin .8s linear infinite;
}
.spinner--mini{width:12px; height:12px; border-width:2px}
.btn.is-loading{opacity:.85}
.btn.is-loading .btn-label{opacity:.78}
@keyframes spin{to{transform:rotate(360deg)}}

/* Top loading bar */
#ajax-bar{position:fixed; top:0; left:0; right:0; height:2px; opacity:0; transition:opacity .2s; z-index:90}
#ajax-bar.active{opacity:1}
#ajax-bar .inner{height:100%; width:30%; background:linear-gradient(90deg, rgba(37,99,235,.95), rgba(124,58,237,.90)); animation:bar 1.1s ease-in-out infinite}
@keyframes bar{0%{transform:translateX(-30%)} 100%{transform:translateX(330%)}}


body::before{
  content:'';
  position:fixed;
  inset:-80px;
  /* Keep global background subtle; use square logo (not the splash artwork). */
  background:url('/static/assets/logo.png') center/cover no-repeat;
  opacity:.055;
  filter: blur(18px) saturate(1.15);
  z-index:-1;
  pointer-events:none;
}

.with-sidebar .topbar{background: rgba(246,248,252,.66)}

.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (max-width: 980px){.grid-2{grid-template-columns:1fr}}
.kv{display:grid; grid-template-columns:160px 1fr; gap:8px 12px; margin-top:12px}
.kv .k{color:var(--muted2); font-weight:900; font-size:12px}
.kv .v{font-weight:800}
.bullets{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.bullets li{margin:6px 0; font-weight:700}


.login-logo{display:flex; justify-content:center; margin-bottom:12px}
.login-logo img{width:72px; height:72px; border-radius:14px; box-shadow:0 16px 30px rgba(15,23,42,.12)}


/* Content swap micro-interactions */
#app-content{transform-origin: top center}
#app-content.content-in{animation: contentIn .18s ease-out both}
@keyframes contentIn{from{opacity:0; transform:translateY(6px) scale(.996)} to{opacity:1; transform:none}}

/* Check / checkbox list (ACL + user groups) */
.checks{display:flex; flex-direction:column; gap:10px; padding:10px 12px; border:1px solid var(--border2); border-radius:14px; background:rgba(255,255,255,.55)}
.check{
  display:flex; align-items:center; gap:10px;
  min-height:36px; padding:0 2px;
  border:none; border-radius:0; background:transparent;
  cursor:pointer;
}
.check:hover{background:transparent}
.check input[type=checkbox]{margin-top:0; width:16px; height:16px}
.check-main{display:flex; flex-direction:column; gap:2px}
.check-title{font-weight:700}
.check-hint{font-size:12px}

/* Relation editor modals: make check items more compact */
.rel-editor .checks{gap:6px; padding:8px 10px}
.rel-editor .check{gap:8px; padding:6px 8px; border-radius:10px}
.rel-editor .check input[type=checkbox]{margin-top:1px; width:14px; height:14px}
.rel-editor .check-title{font-weight:800; font-size:12.5px}
.rel-editor .check-hint{font-size:11px}

/* --- Chips (group badges) --- */
.chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.chip{display:inline-flex; align-items:center; padding:1px 6px; border-radius:999px; border:1px solid var(--border2); background:rgba(255,255,255,.92); font-size:10px; font-weight:800}

/* ACL matrix */
.acl-matrix{table-layout:fixed}
.acl-matrix th.group-col{min-width:170px}
.acl-matrix td{vertical-align:middle}
.acl-cell{display:flex; flex-direction:column; align-items:center; gap:6px}
.acl-toggle{width:14px; height:14px}
.acl-count{font-size:12px; color:var(--muted2); font-weight:900}
.acl-row-label{font-weight:700}
.acl-row-sub{font-size:12px; color:var(--muted2); font-weight:800}

/* ACL matrix (Iter D+) modal layout */
.acl-top{display:flex; gap:8px; align-items:center; margin-top:10px}
.acl-scroll{max-height:560px; overflow:auto; margin-top:10px; padding:10px 12px; border:1px solid var(--border2); border-radius:14px; background:rgba(255,255,255,.55)}
.acl-cat{border:1px solid var(--border2); border-radius:14px; background:rgba(255,255,255,.65); margin:10px 0}
.acl-cat > summary{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; font-weight:700}
.acl-cat .acl-cat-title{font-weight:700}
.acl-list{display:flex; flex-direction:column; gap:6px; padding:8px 10px 10px}
.acl-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid var(--border2); border-radius:12px; background:rgba(255,255,255,.70)}
.acl-row:hover{background:rgba(255,255,255,.82)}
.acl-route{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.acl-code{font-weight:700; font-size:12px; letter-spacing:.2px}
.acl-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.acl-name{font-size:12px; font-weight:800; color:var(--muted)}
.acl-desc{font-size:11px; font-weight:800; color:var(--muted2)}
.acl-flags{display:flex; gap:8px; align-items:center; flex-shrink:0}
.acl-flag{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--border2); background:rgba(255,255,255,.65); font-size:11px; font-weight:900; cursor:pointer; user-select:none}
.acl-flag:hover{background:rgba(255,255,255,.78)}
.acl-flag input{width:14px; height:14px}
.acl-flag input:disabled{opacity:.55; cursor:not-allowed}

/* SmartSelect (searchable dropdown) */
.ss{position:relative; min-width:180px}
.ss select{display:none !important}
.ss .ss-input{width:100%; padding:7px 10px; min-height:36px; border-radius:10px; border:1px solid var(--border2); background:rgba(255,255,255,.97); font-weight:800; outline:none}
.ss .ss-input:focus{border-color:rgba(37,99,235,.45); box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.ss-panel{position:fixed; z-index:5000; width:min(420px, calc(100vw - 24px)); max-height:320px; overflow:auto; border-radius:10px; background:rgba(255,255,255,.97); border:1px solid var(--border); box-shadow:var(--shadow2)}
.ss-item{display:flex; align-items:center; gap:6px; padding:4px 8px; cursor:pointer; font-weight:800; font-size:12px}
.ss-item:hover{background:rgba(37,99,235,.08)}
.ss-item.active{background:rgba(37,99,235,.12)}
.ss-item.disabled{opacity:.55; cursor:not-allowed}
.ss-empty{padding:12px; color:var(--muted2); font-weight:800}
.ss-list{display:flex; flex-direction:column}
.ss-muted{font-size:12px; color:var(--muted2); font-weight:800}

/* Toasts */
#toast-container{
  position:fixed;
  top:14px;
  right:14px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  position:relative;
  overflow:hidden;
  pointer-events:auto;
  width:min(420px, calc(100vw - 28px));
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.70));
  box-shadow:0 10px 24px rgba(15,23,42,.12);
  transform: translateY(-6px);
  opacity:0;
  transition: transform .14s ease, opacity .14s ease;
  cursor:pointer;
}
.toast::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(37,99,235,.70), rgba(14,165,233,.55));
  opacity:.95;
}
.toast.in{transform: translateY(0); opacity:1;}
.toast.out{transform: translateY(-6px); opacity:0;}
.toast-ico{width:26px; height:26px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.04);
  border:1px solid rgba(15,23,42,.08);
  margin-top:1px;
}
.toast-ico img{width:14px; height:14px; opacity:.9}
.toast-body{flex:1; min-width:0}
.toast-title{font-weight:700;
  font-size:12px; font-size:12px; color:var(--text); margin:1px 0 2px}
.toast-msg{font-weight:700; font-size:12px; color:var(--muted); line-height:1.25}
.toast-x{
  border:none;
  background:transparent;
  color:rgba(15,23,42,.55);
  font-size:18px;
  line-height:18px;
  padding:2px 6px;
  border-radius:10px;
  cursor:pointer;
}
.toast-x:hover{background:rgba(2,6,23,.05)}

.toast-info{
  border-color:rgba(37,99,235,.18);
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(255,255,255,.78));
}
.toast-info::before{background:linear-gradient(180deg, rgba(37,99,235,.78), rgba(14,165,233,.60));}
.toast-info .toast-ico{background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.16)}
.toast-info .toast-title{color:#1d4ed8}

.toast-success{border-color:rgba(22,163,74,.18); background:linear-gradient(180deg, rgba(240,253,244,.98), rgba(255,255,255,.78));}
.toast-success::before{background:linear-gradient(180deg, rgba(22,163,74,.78), rgba(16,185,129,.60));}
.toast-success .toast-ico{background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.16)}
.toast-success .toast-title{color:#15803d}

.toast-warn{border-color:rgba(234,179,8,.20); background:linear-gradient(180deg, rgba(255,251,235,.98), rgba(255,255,255,.78));}
.toast-warn::before{background:linear-gradient(180deg, rgba(245,158,11,.80), rgba(249,115,22,.62));}
.toast-warn .toast-ico{background:rgba(234,179,8,.10); border-color:rgba(234,179,8,.16)}
.toast-warn .toast-title{color:#b45309}

.toast-error{border-color:rgba(220,38,38,.20); background:linear-gradient(180deg, rgba(254,242,242,.98), rgba(255,255,255,.78));}
.toast-error::before{background:linear-gradient(180deg, rgba(220,38,38,.82), rgba(239,68,68,.64));}
.toast-error .toast-ico{background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.16)}
.toast-error .toast-title{color:#b91c1c}

/* ------------------------------------------------------------
   SmartTable vNext (Iter 3)
------------------------------------------------------------ */
.st-root{
  width:100%;
  min-height:0;
  /* Auto-fit (JS sets --st-wrap-max-h for page tables). */
  --st-wrap-max-h: none;
  /* Baseline row sizing: used to keep a stable min-height (5 rows) while data loads. */
  --st-row-h: 38px;
  --st-head-h: 40px;
  --st-min-rows: 10;
  --st-min-body-h: calc(var(--st-head-h) + (var(--st-min-rows) * var(--st-row-h)));
}

/* Fullscreen table overlay (table-only, not the browser fullscreen API)
   IMPORTANT: implemented via a portal appended to <body> so it can cover
   topbar + sidebar as well (no clipping by .shell overflow/stacking contexts).
*/
.st-fs-portal{
  position:fixed;
  inset:0;
  z-index:49; /* below .modal-root (50), above the whole app shell */
  padding:8px; /* smaller margin */
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  background: rgba(246,248,252,.82); /* light semi-transparent backdrop (no effects) */
}
.st-fs-card{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  padding:12px; /* tighter */
}


/* Fullscreen: optional off-canvas navigation sidebar (toggle via SmartTable toolbar). */
.st-fs-sidebar-overlay{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.36);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity 160ms ease;
  z-index:51;
}
.st-fs-sidebar{
  position:fixed;
  /* In fullscreen there is no topbar, but we still keep a small margin and safe-area. */
  top: calc(10px + env(safe-area-inset-top));
  bottom: calc(12px + env(safe-area-inset-bottom));
  left:8px;
  width: min(86vw, 320px);
  max-height:none;
  /* If the mounted sidebar keeps the base .sidebar class, override height:100%. */
  height:auto !important;
  /* Ensure the sidebar matches the standard desktop "card" look even on small viewports. */
  border-radius: var(--radius2) !important;
  transform: translateX(-110%);
  transition: transform 180ms ease;
  z-index:52;
  flex:none;
}
.st-fs-portal.st-fs-menu-open .st-fs-sidebar{transform: translateX(0);}
.st-fs-portal.st-fs-menu-open .st-fs-sidebar-overlay{opacity:1; pointer-events:auto;}
.st-fs-sidebar-inner{min-height:0;}

.st-root.st-fullscreen{
  width:100%;
  height:100%;
  min-height:0;
}
.st-root.st-fullscreen .st{
  height:100%;
}

/* In fullscreen we want the table area to use the available height and scroll
   inside, while toolbar stays on top. */
.st-root.st-fullscreen .st-table-wrap{
  flex:1 1 auto;
  max-height:none !important;
}

/* Fullscreen: long top controls (especially Insights) should never push content
   outside the fullscreen portal. We keep the table scroll working as before,
   but allow the Top block to scroll within a reasonable viewport slice. */
.st-root.st-fullscreen .st-top{
  overflow:auto;
  max-height:min(42vh, 420px);
  padding-right:6px; /* room for scrollbar */
  scrollbar-gutter: stable;
}
.st{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:auto;
  min-height:0;
}
.st-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0}
.st-title{display:flex; align-items:center; gap:10px}
.st-title-badges{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* SmartTable "Menu" button should only exist in fullscreen mode.
   (Normal navigation is handled by the global topbar menu button.) */
.st-root .st-tools [data-st="fsMenuBtn"]{display:none !important;}
.st-root.st-fullscreen .st-tools [data-st="fsMenuBtn"]{display:inline-flex !important;}
.st-title-text{font-weight:700;
  font-size:12px; letter-spacing:-.02em}
.st-title-text.st-title-skel{
  display:inline-block;
  width:240px;
  height:18px;
  border-radius:12px;
  background:rgba(15,23,42,.08);
}
.st-badge{font-size:11px; font-weight:900; padding:1px 7px; border-radius:999px; background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.12); color:rgba(30,64,175,.95); line-height:1.5}
.st-badge--report{display:inline-flex; align-items:center; gap:5px; background:rgba(124,58,237,.10); border-color:rgba(124,58,237,.18); color:rgba(76,29,149,.95)}
.st-badge--computed{display:inline-flex; align-items:center; gap:6px; background:rgba(6,182,212,.10); border-color:rgba(6,182,212,.18); color:rgba(14,116,144,.95)}
.st-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.st-search{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.65); border:1px solid rgba(15,23,42,.10); border-radius:10px; padding:6px 10px}
.st-view{display:flex; align-items:center; gap:6px}
.st-ico{width:14px; height:14px; opacity:.78}
.st-ico--tiny{width:12px; height:12px; opacity:.82}
.st-input{height:20px; border:none; outline:none; background:transparent; width:160px; font-weight:900; font-size:12px}
.st-search .st-input{min-width:0; max-width:none}
.st-search-clear{cursor:pointer; border:none; background:transparent; padding:4px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center}
.st-search-clear:hover{background:rgba(15,23,42,.06)}
.st-search-clear:active{transform:translateY(1px)}
.st-input[data-invalid="1"], .st-select[data-invalid="1"], .ti-select-display[data-invalid="1"], .ti-select-display.ti-invalid{outline:2px solid rgba(220,38,38,.26)}
.st-select{height:30px; border:1px solid rgba(15,23,42,.10); outline:none; border-radius:12px; padding:0 10px; background:rgba(255,255,255,.72); font-weight:800; font-size:13px; max-width:100%; min-width:0}

.st-btn-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:10px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.22);
  background:rgba(37,99,235,.10);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  font-size:12px;
  line-height:1;
}

/* Ensure native [hidden] works even when base class sets display */
.st-btn-badge[hidden]{display:none !important}
.st-colfilter-btn[hidden]{display:none !important}
.st-colfilter-count[hidden]{display:none !important}

.st-panels{position:relative; height:0; display:block}
/* Popover-like panel: stays open while editing filters/columns/export */
.st-panel{position:absolute; top:10px; right:10px; width:min(560px, calc(100% - 20px)); z-index:10; border:1px solid rgba(15,23,42,.10); border-radius:12px; background:rgba(255,255,255,.92); padding:10px; box-shadow:0 14px 40px rgba(0,0,0,.12); overflow:hidden}
.st-panel[hidden]{display:none !important}
.st-panel-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:1px solid rgba(15,23,42,.08)}
.st-panel-title{font-weight:700}
.st-panel-body{padding-top:8px; max-height: calc(100vh - 190px); overflow:auto; overscroll-behavior:contain}
.st-panel-actions{display:flex; align-items:center; gap:10px; padding-top:10px}

.st-panel-section{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(15,23,42,.14)}
.st-panel-subtitle{font-weight:900; font-size:12px; color:rgba(15,23,42,.60); margin-bottom:6px}
.st-cf-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.st-cf-row .st-select{min-width:220px}

.st-muted{color:rgba(15,23,42,.55); font-weight:800; font-size:12px}

.st-filter-list{display:flex; flex-direction:column; gap:10px}
.st-filter-row{padding:8px; border:1px solid rgba(15,23,42,.08); border-radius:12px; background:rgba(255,255,255,.70)}
.st-grid{display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.5fr) auto; gap:8px; align-items:end}
.st-grid > div{min-width:0}
.st-label{display:block; font-size:11px; font-weight:700;
  font-size:12px; color:rgba(15,23,42,.56); margin-bottom:4px}
.st-filter-actions{display:flex; align-items:end; padding-bottom:2px}
.st-filter-row .st-grid{align-items:center}
.st-filter-row .st-filter-actions{align-items:center; padding-bottom:0}
.st-error{margin-top:6px; font-size:12px; font-weight:800; color:rgba(220,38,38,.92)}
.st-hint{margin-top:6px; font-size:11px; font-weight:800; color:rgba(15,23,42,.55)}
.st-between{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.st-between .st-input{flex:1 1 140px; min-width:0}
.st-between-sep{opacity:.6; font-weight:700}

.st-cols-list{display:flex; flex-direction:column; gap:8px}
.st-col-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 7px; border:1px solid rgba(15,23,42,.08); border-radius:12px; background:rgba(255,255,255,.70)}
.st-check{display:flex; align-items:center; gap:8px; font-weight:900; font-size:12px}
.st-check input{width:14px; height:14px}
.st-col-move{display:flex; gap:6px}
.st-col-move .btn{padding:2px 7px; height:24px; min-width:30px}

.st-export-grid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; max-width:420px}

.st-colfilter-panel{width:420px; min-width:320px; max-width:min(520px, calc(100vw - 20px))}
.st-colfilter-list{display:flex; flex-direction:column; gap:8px; max-height:220px; overflow:auto; padding-right:4px}
.st-colfilter-item{display:flex; align-items:center; gap:10px}
.st-colfilter-val{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-colfilter-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:12px}

.st-table-wrap{
  position:relative;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:rgba(255,255,255,.64);
  /* Both-axis scroll: header stays sticky, rows scroll. */
  overflow:auto;
  /* IMPORTANT: do not stretch to fill; allow the table to shrink to actual row count.
     When content exceeds --st-wrap-max-h, scrolling activates. */
  flex:0 1 auto;
  max-height:var(--st-wrap-max-h);
  min-height:var(--st-min-body-h);
}
/* Horizontal scroll is controlled by inline width computed from column widths. */
.st-table{width:100%; min-width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed}
.st-th, .st-td{padding:5px 8px; border-bottom:1px solid rgba(15,23,42,.08); font-size:12px}
.st-th{position:relative; user-select:none; background:rgba(248,250,252,.78); font-weight:950;
  font-size:12px; border-right:1px solid rgba(15,23,42,.10)}
.st-th:last-child{border-right:0}
.st-th-inner{display:flex; align-items:center; justify-content:flex-start; gap:2px; width:100%; min-width:0}
/* Allow header label to actually shrink/ellipsis inside flex (prevents overlays when the column gets narrow). */
.st-th-label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-th.is-filtered .st-th-label{color:var(--accent)}
.st-colfilter-btn{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:1px 4px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(15,23,42,.035);
  cursor:pointer;
  white-space:nowrap;
}
.st-colfilter-btn:hover{background:rgba(15,23,42,.06)}
.st-colfilter-btn .st-ico{width:11px; height:11px; opacity:.85}
.st-colfilter-count{font-weight:700; font-size:10px; opacity:.78}
/* Sorting indicators: only show when sorted, keep them ultra-compact. */
.st-sortbox{display:none; align-items:center; gap:2px}
.st-th.is-sorted .st-sortbox{display:inline-flex}
.st-sortbox .st-sort{font-size:10px; opacity:.68; line-height:1; margin-left:0}
.st-sort-idx{font-size:10px; opacity:.78; text-align:center; line-height:1; padding:0 2px}
.st-th.is-sorted .st-th-label{font-weight:950}
.st-resize{position:absolute; top:0; right:0; width:8px; height:100%; cursor:col-resize}
.st-resize:hover{background:rgba(37,99,235,.10)}
.st-resize::after{content:'|'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-weight:950;
  font-size:12px; font-size:12px; line-height:1; opacity:.32; color:rgba(15,23,42,.85)}
.st-th:hover .st-resize::after{opacity:.55}
.st-resize:hover::after{opacity:.75}

/* Selection column */
.st-th--sel,.st-td--sel{padding:5px 4px; text-align:center; width:28px; min-width:28px; max-width:28px;
  /* Checkbox column is always sticky — must cover scrolled content */
  position:sticky; left:0}
.st-th--sel{cursor:default; background:rgba(248,250,252,.99); z-index:6}
.st-td--sel{background:#fff; z-index:3}
.st-tr:nth-child(even) .st-td--sel{background:rgba(252,253,255,1)}
.st-tr:hover .st-td--sel{background:rgba(241,245,253,1)}
.st-selected .st-td--sel{background:rgba(234,242,255,1)}
.st-tr.st-rowcf--pos .st-td--sel{background:rgba(240,253,244,1)}
.st-tr.st-rowcf--neg .st-td--sel{background:rgba(255,241,242,1)}
.st-head-check,.st-row-check{width:12px; height:12px; cursor:pointer}

/* ── Expand row button ───────────────────────────────────────── */
.st-expand-btn{
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer;
  width:16px; height:16px; border-radius:4px; line-height:1;
  color:rgba(15,23,42,.45); font-size:11px;
  transition:background .12s,color .12s;
}
.st-expand-btn:hover{background:rgba(37,99,235,.10); color:var(--accent)}
.st-row--expanded .st-expand-btn{color:rgba(37,99,235,.75)}
.st-expand-ico{display:block; line-height:1; font-size:11px}

/* ── Frozen / sticky-left columns ───────────────────────────── */
.st-table-wrap.has-frozen .st-frozen{
  position:sticky;
}
.st-table-wrap.has-frozen .st-th.st-frozen{
  background:rgba(248,250,252,.99);
  z-index:4;
}
/* td frozen backgrounds — must be explicit (not inherit) for sticky to cover scrolled content */
.st-table-wrap.has-frozen .st-td.st-frozen{
  background:#fff;
  z-index:3;
}
.st-tr:nth-child(even) .st-td.st-frozen{background:rgba(252,253,255,1)}
.st-tr:hover .st-td.st-frozen{background:rgba(241,245,253,1)}
.st-selected .st-td.st-frozen{background:rgba(234,242,255,1)}
.st-tr.st-rowcf--pos .st-td.st-frozen{background:rgba(240,253,244,1)}
.st-tr.st-rowcf--neg .st-td.st-frozen{background:rgba(255,241,242,1)}
/* Divider shadow on the last left-frozen column */
.st-table-wrap.has-frozen .st-frozen--last{
  box-shadow: 4px 0 10px -2px rgba(15,23,42,.16);
}

/* ── Right-frozen columns ──────────────────────────────────────── */
/* Right-frozen td backgrounds — explicit (not inherit) for sticky to cover scrolled content */
.st-table-wrap.has-frozen .st-th.st-frozen-right{
  background:rgba(248,250,252,.99);
  z-index:4;
}
.st-table-wrap.has-frozen .st-td.st-frozen-right{
  background:#fff;
  z-index:3;
}
.st-tr:nth-child(even) .st-td.st-frozen-right{background:rgba(252,253,255,1)}
.st-tr:hover .st-td.st-frozen-right{background:rgba(241,245,253,1)}
.st-selected .st-td.st-frozen-right{background:rgba(234,242,255,1)}
.st-tr.st-rowcf--pos .st-td.st-frozen-right{background:rgba(240,253,244,1)}
.st-tr.st-rowcf--neg .st-td.st-frozen-right{background:rgba(255,241,242,1)}
/* Divider shadow on the leftmost right-frozen column (inner edge) */
.st-table-wrap.has-frozen .st-frozen-right--first{
  box-shadow: -4px 0 10px -2px rgba(15,23,42,.16);
}
/* Pin indicator in header */
.st-frozen-pin{font-size:10px; opacity:.60; margin-left:2px; line-height:1; user-select:none; flex-shrink:0}

/* ── Detail column cell ─────────────────────────────────────── */
.st-th--detail{text-align:center; cursor:default}
.st-td--detail{text-align:center; padding:3px 4px}

/* ── Row detail panel ────────────────────────────────────────── */
.st-detail-tr > .st-detail-td{
  padding:0; border-bottom:2px solid rgba(37,99,235,.12);
  background:rgba(246,248,254,.95);
}
body.theme-dark .st-detail-tr > .st-detail-td{background:rgba(15,23,42,.70)}
.st-detail-panel--table{
  padding:8px;
}
.st-detail-panel--table .st-root{margin:0; border-radius:12px}
.st-detail-panel{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:6px 16px;
  padding:10px 14px 12px;
}
.st-detail-row-item{
  display:flex; flex-direction:column; gap:1px; min-width:0;
}
.st-detail-label{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; color:rgba(15,23,42,.45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.theme-dark .st-detail-label{color:rgba(226,232,240,.45)}
.st-detail-val{
  font-size:12px; color:rgba(15,23,42,.85);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
body.theme-dark .st-detail-val{color:rgba(226,232,240,.85)}

/* ── Aggregate footer row ────────────────────────────────────── */
.st-aggfoot-tr{
  border-top:2px solid rgba(15,23,42,.10);
  background:rgba(245,248,255,.95);
}
body.theme-dark .st-aggfoot-tr{background:rgba(15,23,42,.82)}
.st-aggfoot-td{
  padding:4px 8px; font-size:11px;
  white-space:nowrap;
}
.st-aggfoot-fn{
  font-size:10px; font-weight:700; color:rgba(37,99,235,.65);
  margin-right:4px; text-transform:uppercase;
}
.st-aggfoot-val{font-weight:700; color:rgba(15,23,42,.75)}
body.theme-dark .st-aggfoot-val{color:rgba(226,232,240,.75)}

/* Virtual spacer column (right side) – absorbs extra table width so data columns don't stretch unnecessarily */
.st-th--spacer,.st-td--spacer{padding:0; width:auto; min-width:0}
.st-th--spacer{background:rgba(248,250,252,.55)}

/* Cell overflow viewer (ellipsis button) */
.st-cell{display:flex; align-items:center; gap:6px; min-width:0}
.st-cell-text{display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-td.st-wrap{white-space:normal}
.st-td.st-wrap .st-cell-text{white-space:normal}
.st-cell-more{display:none; width:16px; height:16px; border-radius:7px; border:1px solid rgba(15,23,42,.05); background:rgba(255,255,255,.10); color:var(--muted); font-weight:900; font-size:12px; line-height:1; align-items:center; justify-content:center; cursor:pointer}
.st-td.is-truncated .st-cell-more{display:inline-flex}
.st-cell-more:hover{background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.22); color:var(--accent)}
.st-td-right .st-cell{justify-content:flex-end}

/* Modal helpers (cell viewer) */
.modal-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.modal-pre{white-space:pre-wrap; word-break:break-word; font-family: TalpieMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size:12px; line-height:1.4; padding:12px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(2,6,23,.06); max-height:62vh; overflow:auto}
.st-td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; color:rgba(15,23,42,.86)}
.st-td-right{text-align:right}
.st-num{font-variant-numeric:tabular-nums}
.st-muted{color:rgba(15,23,42,.55); font-weight:800}
.st-tr:hover .st-td{background:rgba(37,99,235,.035)}

/* Batch processing: highlight currently processed row */
.st-tr.st-batch-active td{
  background: rgba(140,90,255,.08) !important;
}
.st-tr.st-batch-active{
  box-shadow: inset 0 0 0 2px rgba(140,90,255,.28);
}

/* Row conditional formatting (user-selected column) */
.st-table tbody tr.st-rowcf--pos:not(.st-selected) td{background:rgba(22,163,74,.05)}
.st-table tbody tr.st-rowcf--neg:not(.st-selected) td{background:rgba(220,38,38,.045)}
.st-table tbody tr.st-rowcf--pos:not(.st-selected):hover td{background:rgba(22,163,74,.07)}
.st-table tbody tr.st-rowcf--neg:not(.st-selected):hover td{background:rgba(220,38,38,.06)}

.st-empty{text-align:center; padding:16px; color:rgba(15,23,42,.55); font-weight:900}

.st-pill{display:inline-flex; align-items:center; gap:5px; padding:1px 7px; border-radius:999px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.90); font-size:11px; line-height:16px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-pill--success{border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.10); color:var(--ok)}
.st-pill--danger{border-color:rgba(220,38,38,.25); background:rgba(220,38,38,.10); color:var(--danger)}
.st-pill--warn{border-color:rgba(245,158,11,.25); background:rgba(245,158,11,.10); color:var(--warn)}
.st-pill--blue{border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.10); color:#1e3a8a}
.st-pill--purple{border-color:rgba(124,58,237,.22); background:rgba(124,58,237,.10); color:#4c1d95}
.st-pill--neutral{border-color:rgba(15,23,42,.12); background:rgba(15,23,42,.04); color:var(--muted)}
.st-pill--custom{border-color:rgba(var(--st-pill-rgb, 37,99,235),.24); background:rgba(var(--st-pill-rgb, 37,99,235),.10); color:rgb(var(--st-pill-rgb, 37,99,235))}

.st-chips{display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; overflow:hidden}
.st-chip-mini{display:inline-flex; align-items:center; padding:1px 6px; border-radius:999px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.76); font-size:10px; line-height:16px; color:rgba(15,23,42,.86); white-space:nowrap}
.st-chip-mini--more{background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.18); color:var(--accent)}

.st-bool{display:inline-flex; align-items:center; gap:6px}
.st-bool img{width:12px; height:12px; opacity:.9}
.st-bool-yes{color:var(--ok)}
.st-bool-no{color:rgba(15,23,42,.62)}

.st-loader{position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.72); backdrop-filter:none}
/* IMPORTANT: [hidden] must win over .st-loader {display:flex} */
.st-loader[hidden]{display:none !important}

/* Loading state (query/pagination): keep chrome crisp, blur only rows area.
   Spinner overlay lives inside .st-table-wrap, so we only soften tbody. */
.st-is-loading .st-table tbody{
  filter: blur(.85px);
  opacity:.68;
}
.st-is-loading .st-table-wrap{
  /* prevent accidental scroll/resize/select while fetching */
  pointer-events:none;
}

.st-footer{padding:4px 2px}

.st-top{
  padding:6px 2px 4px;
  margin-top:4px;
  border-top:1px solid rgba(15,23,42,.08);
}

.st-controls{display:flex; flex-direction:column; gap:6px}

.st-batchline{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:0 6px}
.st-batchline-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.st-batchline .st-batchbar{margin-left:0}

.st-summaryline{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:6px 8px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.55); border-radius:14px}
.st-summaryline-left{display:flex; align-items:center; gap:10px; flex-wrap:nowrap; overflow:hidden; min-width:0}
.st-summaryline-right{flex:0 0 auto}
.st-summaryline-left .st-summary-pill{flex:0 0 auto}

.st-insightsline{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:6px 8px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.45); border-radius:14px; margin-top:8px}
.st-insightsline-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0}
.st-insightsline-right{flex:0 0 auto}

/* Insights: compact multi-select pickers */
.st-insights-ms{display:flex; align-items:center; gap:8px; min-width:240px; max-width:100%}
.st-insights-ms .ti-mselect{width:240px; max-width:320px}
.st-insights-ms .ti-mselect-display{min-height:30px; padding:5px 8px}
.st-summary-pill.is-on{border-color:rgba(37,99,235,.35); background:rgba(37,99,235,.10)}
.st-insights-body{margin-top:10px}
.st-insights-grid{display:grid; grid-template-columns:1fr; gap:12px}
.st-insights-card{max-width:100%; min-width:0}

/* Insights: pick one specific block */
.st-insights-pick{
  height:30px; padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.55);
  color:inherit; font:inherit;
  max-width: min(420px, 100%);
}
.st-insights-pick:focus-visible{outline:2px solid rgba(37,99,235,.32); outline-offset:2px}

/* Pills disabled state */
.st-summary-pill--btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.st-summary-pill--btn:disabled:hover{
  background:transparent;
  border-color:rgba(15,23,42,.12);
  color:inherit;
}
body.theme-dark .st-insights-pick{
  background:rgba(2,6,23,.16);
  border-color:rgba(148,163,184,.16);
}

body.theme-dark .st-mini-wrap,
body.theme-dark .st-matrix-wrap,
body.theme-dark .st-mgroup-wrap{
  background:rgba(2,6,23,.12);
  border-color:rgba(148,163,184,.14);
}


.st-mini-wrap{width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; border-radius:14px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.40); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.st-mini-table{width:100%; border-collapse:separate; border-spacing:0; min-width:760px}
.st-mini-th{position:sticky; top:0; z-index:2; text-align:left; font-size:11px; font-weight:900; padding:7px 10px; background:rgba(255,255,255,.82); border-bottom:1px solid rgba(15,23,42,.10)}
.st-mini-td{padding:7px 10px; border-bottom:1px solid rgba(15,23,42,.06); background:rgba(255,255,255,.55); font-size:11px; font-weight:600; color:var(--text)}
.st-mini-td--num{text-align:right; font-variant-numeric:tabular-nums}
.st-mini-row--total .st-mini-td{background:rgba(15,23,42,.06); border-top:1px solid rgba(15,23,42,.12); font-weight:900}
.st-mini-row--more .st-mini-td{color:var(--muted2); font-weight:800; background:rgba(15,23,42,.03)}
.st-summary-pill.is-hidden{display:none !important}
.st-summary-pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.72); font-weight:900; font-size:11px; color:rgba(15,23,42,.70)}
.st-summary-pill b{color:rgba(15,23,42,.90)}
.st-summary-pill .st-ico{width:12px; height:12px; opacity:.82}
button.st-summary-pill{appearance:none; -webkit-appearance:none; margin:0; color:inherit; font-family:inherit; font-size:11px; font-weight:900; line-height:inherit}
.st-summary-pill--btn{cursor:pointer; user-select:none; transition:background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease}
.st-summary-pill--btn:hover{background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.22); color:var(--accent)}
.st-summary-pill--btn:hover b{color:var(--accent)}
.st-summary-pill--btn:active{transform:translateY(1px)}
.st-summary-pill--btn:focus-visible{outline:2px solid rgba(37,99,235,.32); outline-offset:2px}

.st-pill-wrap{display:flex; flex-wrap:wrap; gap:4px}

/* Summary pill tone by value (pastel) */
.st-summary-pill.is-zero{background:rgba(15,23,42,.05); border-color:rgba(15,23,42,.10); color:rgba(15,23,42,.62)}
.st-summary-pill.is-zero b{color:var(--muted)}
.st-summary-pill.is-pos{background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.22); color:rgba(5,120,87,.92)}
.st-summary-pill.is-pos b{color:rgba(5,120,87,.98)}
.st-summary-pill.is-neg{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.22); color:rgba(153,27,27,.92)}
.st-summary-pill.is-neg b{color:rgba(153,27,27,.98)}

/* Give top controls a tiny separation from the table */
.st-top .st-controls{margin-bottom:4px}

.st-pager{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.st-pager-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.st-pager-right{display:flex; align-items:center; gap:10px}
.st-meta{font-size:12px; font-weight:800; color:rgba(15,23,42,.60)}
.st-mini-spin{display:inline-flex; align-items:center; margin-left:6px}
.st-mini-spin[hidden]{display:none !important;}

/* Pager + batch controls (top & bottom): identical and extra-compact */
.st-top .btn, .st-footer .btn{
  height:24px;
  padding:1px 6px;
  border-radius:8px;
  font-size:10.5px;
  gap:6px;
  line-height:1.1;
  box-shadow:none;
}
.st-top .btn:hover, .st-footer .btn:hover{box-shadow:0 8px 14px rgba(15,23,42,.08)}
.st-top .btn-ico, .st-footer .btn-ico{width:11px; height:11px}
.st-top .st-meta, .st-footer .st-meta{font-size:11px}
.st-top .st-page-input, .st-footer .st-page-input{height:24px; width:64px; border-radius:10px; padding:0 6px; font-size:11px}
.st-top .st-select, .st-footer .st-select{height:24px; border-radius:10px; padding:0 6px; font-size:11px}
.st-top .st-batch-title, .st-footer .st-batch-title{font-size:11px}
.st-top .st-batch-progress, .st-footer .st-batch-progress{font-size:11px}

/* Manual page input (spinner) */
.st-page-input{
  height:30px;
  width:74px;
  border:1px solid rgba(15,23,42,.10);
  outline:none;
  border-radius:12px;
  padding:0 8px;
  background:rgba(255,255,255,.72);
  font-weight:900;
  font-size:13px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.st-page-input:focus{border-color:rgba(37,99,235,.40); box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* Filter panel inputs: match the global .input look (border + background) */
.st-panel .st-input{
  height:30px;
  border:1px solid rgba(15,23,42,.10);
  outline:none;
  border-radius:12px;
  padding:0 9px;
  background:rgba(255,255,255,.97);
  font-weight:800;
  font-size:13px;
  width:100%;
  min-width:0;
}
.st-panel .st-input:focus{border-color:rgba(37,99,235,.40); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.st-panel .st-input[data-invalid="1"], .st-panel .ti-select-display[data-invalid="1"], .st-panel .ti-select-display.ti-invalid{border-color:rgba(220,38,38,.28); box-shadow:0 0 0 3px rgba(220,38,38,.10)}

/* Suggest inputs (typeahead) */
.ti-suggest{width:100%}
.ti-suggest-menu{
  position:fixed;
  z-index:2147483647;
  background:rgba(255,255,255,.97);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow2);
  padding:4px;
  max-height:240px;
  overflow:auto;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  transition: opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform;
  pointer-events: none;
}
.ti-suggest-menu.is-open{opacity:1; transform: translateY(0) scale(1); pointer-events:auto;}
.ti-suggest-item{
  width:100%;
  display:block;
  border:0;
  background:transparent;
  text-align:left;
  padding:6px 8px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
}
.ti-suggest-item:hover,.ti-suggest-item.active{background:rgba(37,99,235,.10)}

/* Searchable select (Talpie style) */
.ti-select-search{display:inline-block; width:100%; max-width:100%}
.ti-select-display{
  height:36px;
  min-height:36px;
  border:1px solid var(--border2);
  outline:none;
  border-radius:10px;
  padding:0 10px;
  background:rgba(255,255,255,.97);
  font-weight:800;
  font-size:13px;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.ti-select-ico{width:14px; height:14px; opacity:.86}
.ti-ico{width:12px; height:12px; opacity:.86}
.ti-select-optico{width:18px; height:18px; display:flex; align-items:center; justify-content:center}
.ti-select-optico .ti-select-ico{width:14px; height:14px}
.ti-opt-row{display:flex; align-items:center; gap:8px; width:100%}
.ti-opt-ico{width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:0 0 18px; opacity:.95}
.ti-opt-img{width:18px; height:18px; border-radius:4px; object-fit:cover}
.ti-opt-emoji{font-size:16px; line-height:18px}
.ti-opt-title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ti-opt-hint{font-size:11px; font-weight:900; color:var(--muted); opacity:.85; padding-left:6px}
.ti-select-display:hover{border-color:rgba(15,23,42,.22)}
.ti-select-display:focus{border-color:rgba(37,99,235,.50); box-shadow:0 0 0 2px rgba(37,99,235,.14)}
.ti-select-display.open{border-color:rgba(37,99,235,.40)}
.ti-select-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ti-select-caret{
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.85;
}
.ti-select-search-menu{
  position:fixed;
  z-index:2147483647;
  background:rgba(255,255,255,.97);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow2);
  padding:6px;
  max-height:300px;
  overflow:hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  transition: opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform;
  pointer-events: none;
}
.ti-select-search-menu.is-open{opacity:1; transform: translateY(0) scale(1); pointer-events:auto;}
.ti-select-popover-inner{display:flex; flex-direction:column; gap:6px}
.ti-select-search-input{height:30px; width:100%; border-radius:8px}
.ti-select-search-input:focus{border-color:rgba(37,99,235,.40); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.ti-select-options{max-height:240px; overflow:auto; padding:2px}
.ti-select-empty{padding:8px 10px; color:var(--muted); font-weight:800; font-size:12px}
.ti-select-search-item{
  width:100%;
  display:block;
  border:0;
  background:transparent;
  text-align:left;
  padding:6px 8px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
}
.ti-select-search-item:hover{background:rgba(37,99,235,.10)}
.ti-select-search-item.selected{background:rgba(37,99,235,.10)}

/* Make icons align nicely in multi-select items */
.ti-mselect-title{display:flex; align-items:center; gap:8px}
.ti-mselect-title .ti-opt-ico{width:18px; height:18px}


/* Multi-select (Talpie style) */
.ti-mselect{display:inline-block; width:240px; max-width:320px}
.ti-mselect.ti-fluid{width:100%; max-width:100%}

/* Prevent 1-frame flicker of native browser multiple-selects before JS enhancement.
   We only hide compact multi-selects (size not set or <=1). Listbox-style selects (size>1)
   remain visible and are intentionally not enhanced. */
select[multiple]:not([size]),
select[multiple][size="0"],
select[multiple][size="1"]{display:none !important;}

.ti-mselect-display{
  min-height:36px;
  border:1px solid var(--border2);
  outline:none;
  border-radius:10px;
  padding:5px 10px;
  background:rgba(255,255,255,.97);
  font-weight:800;
  font-size:13px;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.ti-mselect-display:hover{border-color:rgba(15,23,42,.22)}
.ti-mselect-display:focus{border-color:rgba(37,99,235,.50); box-shadow:0 0 0 2px rgba(37,99,235,.14)}
.ti-mselect-display.open{border-color:rgba(37,99,235,.40)}
.ti-mselect-main{flex:1; min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden}
.ti-mselect-pills{display:flex; flex-wrap:nowrap; gap:6px; align-items:center; min-height:18px; overflow:hidden; white-space:nowrap}
.ti-mselect-placeholder{color:var(--muted); font-weight:800; font-size:12px; padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ti-mselect-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.20);
  color:var(--text);
  max-width:240px;
  min-width:0;
  flex:0 1 auto;
  font-size:10px;
  line-height:1.2;
}
.ti-mselect-pill-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px}
.ti-mselect-pill-x{
  border:0;
  background:transparent;
  padding:0;
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  opacity:.88;
  cursor:pointer;
}
.ti-mselect-pill-x:hover{background:rgba(15,23,42,.08)}
.ti-mselect-more{font-weight:900; font-size:12px; color:var(--muted); white-space:nowrap; flex:0 0 auto}

.ti-mselect-menu{
  position:fixed;
  z-index:2147483647;
  background:rgba(255,255,255,.97);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow2);
  padding:6px;
  max-height:340px;
  overflow:hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  transition: opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform;
  pointer-events: none;
}
.ti-mselect-menu.is-open{opacity:1; transform: translateY(0) scale(1); pointer-events:auto;}
.ti-mselect-options{max-height:270px; overflow:auto; padding:2px}
.ti-mselect-item{
  width:100%;
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding:6px 8px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
}
.ti-mselect-item .ti-switch{margin-top:2px}
.ti-mselect-item:hover{background:rgba(37,99,235,.10)}
.ti-mselect-item.selected{background:rgba(37,99,235,.10)}
.ti-mselect-item.disabled{opacity:.60; cursor:not-allowed}
.ti-mselect-item-main{flex:1; min-width:0}
.ti-mselect-title{font-weight:900; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ti-mselect-hint{margin-top:1px; font-weight:800; font-size:12px; color:var(--muted); line-height:1.3}

/* ------------------------------------------------------------
   Large List Picker (grouped multi-select) – for modules/groups/routes
   ------------------------------------------------------------ */
.ti-lpicker{width:100%; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.70); padding:6px; box-shadow:0 2px 8px rgba(15,23,42,.04)}
.ti-lpicker.disabled{opacity:.72; pointer-events:none}
.ti-lpicker-top{display:flex; gap:6px; align-items:center; justify-content:space-between}
.ti-lpicker-search{flex:1; min-width:0; display:flex; align-items:center; gap:8px; border:1px solid rgba(15,23,42,.10); border-radius:12px; padding:5px 8px; background:rgba(255,255,255,.76)}
.ti-lpicker-search .ti-ico{width:16px; height:16px; opacity:.85}
.ti-lpicker-q{border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; height:22px; min-width:0; font-weight:800; font-size:13px}
.ti-lpicker-q:focus{outline:none}
.ti-lpicker-clear{border:0; background:transparent; padding:3px; border-radius:10px; cursor:pointer; opacity:.86}
.ti-lpicker-clear:hover{background:rgba(15,23,42,.06)}
.ti-lpicker-btns{display:flex; gap:6px; flex:0 0 auto; align-items:center}
.ti-lpicker-sep{width:1px; height:18px; background:rgba(15,23,42,.10); border-radius:1px; margin:0 2px}
.ti-lpicker-btns .btn{padding:3px 8px}
.ti-lpicker-btns .btn.active{background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.18)}
.ti-lpicker-stats{margin-top:4px; font-weight:800; font-size:12px}
.ti-lpicker-groups{margin-top:6px; overflow:auto; padding-right:2px}
.ti-lpicker-group{border:1px solid rgba(15,23,42,.08); border-radius:12px; background:rgba(255,255,255,.58); margin-bottom:6px; overflow:hidden}
.ti-lpicker-gh{display:flex; align-items:center; gap:8px; padding:7px 9px; background:rgba(255,255,255,.70)}
.ti-lpicker-gtoggle{border:0; background:transparent; padding:2px; border-radius:10px; cursor:pointer; opacity:.9}
.ti-lpicker-gtoggle:hover{background:rgba(15,23,42,.06)}
.ti-lpicker-gtitle{flex:1; min-width:0; font-weight:700; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer}
.ti-lpicker-gcount{font-weight:700; font-size:12px; white-space:nowrap}
.ti-lpicker-gbtns{display:flex; gap:6px}
.ti-lpicker-gbtns .btn{padding:2px 8px}
.ti-lpicker-items{padding:5px 7px; display:flex; flex-direction:column; gap:5px}
.ti-lpicker-group.collapsed .ti-lpicker-items{display:none !important}
.ti-lpicker-item{display:flex; gap:10px; align-items:flex-start; padding:7px 9px; border-radius:12px; cursor:pointer; user-select:none; border:1px solid rgba(15,23,42,.06); background:rgba(255,255,255,.66)}
.ti-lpicker-item:hover{border-color:rgba(37,99,235,.18); background:rgba(37,99,235,.06)}
.ti-lpicker-item.selected{border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.08)}
.ti-lpicker-item.disabled{opacity:.60; cursor:not-allowed}
.ti-lpicker-item .ti-switch{margin-top:2px}
.ti-lpicker-item input[type="checkbox"]{margin-top:2px}
.ti-lpicker-item-main{flex:1; min-width:0}
.ti-lpicker-title{font-weight:700; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ti-lpicker-hint{margin-top:1px; font-weight:800; font-size:12px; color:var(--muted); line-height:1.25}
.ti-lpicker-desc{margin-top:3px; font-weight:800; font-size:12px; color:var(--muted2); line-height:1.25}

/* Header drag & drop hints */
.st-th[draggable="true"]{cursor:grab}
.st-th.dragging{cursor:grabbing}

@media (max-width: 860px){
  .st-grid{grid-template-columns: 1fr 1fr;}
  .st-filter-actions{grid-column: 1 / -1; justify-content:flex-end}
  .st-input{width:140px}
}

/* ------------------------------------------------------------
   Polish UX polish pack: splash + smooth modals + menu animation
   ------------------------------------------------------------ */

/* Splash */
.splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  /* Simple, clean modal backdrop (no blur, no gradients). */
  background: rgba(6, 10, 18, 0.40);
  opacity: 1;
  transition: opacity 180ms ease;
}
.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Splash modal content (rounded artwork + spinner on top) */
.splash-panel {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  /* Keep the artwork readable: splash PNG is tall (not square).
     Limit its rendered HEIGHT to ~60% of the viewport and preserve ratio. */
  max-height: 60vh;
  max-width: 92vw;
}

.splash-art {
  display: block;
  height: auto;
  width: auto;
  max-height: 60vh;
  max-width: 92vw;
}

/* Legacy text/card markup (kept, but hidden). */
.splash-card { display: none; }
.splash-logo { display: none; }
.splash-title { display: none; }
.splash-sub { display: none; }

.splash-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.22);
  border-top-color: rgba(255,255,255,0.85);
  animation: talpieSpin 900ms linear infinite;
}
@keyframes talpieSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Topbar menu animation */
.topbar .menu {
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform;
}
.topbar .menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Modal animations */
.modal-root {
  z-index: 9998;
}
.modal-layer {
  opacity: 0;
  transition: opacity 170ms ease;
  will-change: opacity;
}
.modal-layer.is-open {
  opacity: 1;
}
.modal-layer.is-closing {
  opacity: 0;
}
.modal {
  transform: translateY(10px) scale(0.985);
  transition: transform 170ms ease, opacity 170ms ease;
  will-change: transform, opacity;
}
.modal.is-open {
  transform: translateY(0) scale(1);
}

/* Form niceties */
.input-wrap {
  position: relative;
}
.input-action {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  opacity: 0.8;
  cursor: pointer;
  padding: 6px;
  border-radius: 10px;
}
.input-action:hover {
  opacity: 1;
  background: rgba(255,255,255,0.06);
}
.input-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --- Profile: MFA wizard --- */
.mfa-qr{
  width:260px;
  height:260px;
  border-radius:12px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,.92);
  padding:8px;
  object-fit:contain;
}
body.theme-dark .mfa-qr{background:rgba(255,255,255,.96)}
select[multiple].input {
  min-height: 120px;
}

/* Subtle focus (works nicely with animations) */
.input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 140, 255, 0.20);
}

/* --- Iter6: Job run modal --- */
.modal.job-run .modal-body{padding-top:14px}
.job-run{display:flex; flex-direction:column; gap:10px}
.job-run-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.job-run-meta{display:flex; flex-direction:column; gap:4px}
.job-run-line{font-size:13px}
.job-run-badges{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.job-run-times{font-size:12px}
.job-run-log{margin:0; padding:12px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background:rgba(15,23,42,.04); min-height:220px; max-height:520px; overflow:auto; font-size:12px; line-height:18px; white-space:pre-wrap; word-break:break-word}

/* --- UX: Command palette + Error Center --- */
.top-errors{position:relative}
.top-msg{position:relative}
.top-sec{position:relative}
.top-support{position:relative}
.top-notify{position:relative}
.notify-menu > .top-badge,
.top-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:#fff;
  background:rgba(239,68,68,.92);
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Variant badge (blue) used by Messages */
.top-badge-blue{background:rgba(59,130,246,.92)}

/* Ensure native [hidden] wins even if class sets display */
.top-badge[hidden]{display:none !important}

/* Topbar badges must be allowed to float outside compact mobile buttons.
   Some mobile browsers clip absolute children inside frosted/glassy buttons unless
   overflow is forced visible on the whole anchor chain. */
.top-actions,
.notify-menu,
.notify-menu-btn,
.top-notify{overflow:visible}
.top-badge{z-index:6; pointer-events:none}
.notify-menu > .top-badge{top:-7px; right:-7px}


.cp{display:flex;flex-direction:column;gap:10px}
.cp-row{display:flex;align-items:center;gap:10px;padding:10px 10px;border:1px solid var(--line-1);border-radius:14px;background:var(--surface-2)}
.cp-ico{width:18px;height:18px;opacity:.85}
.cp-input{flex:1;border:0;background:transparent;font-size:14px;outline:none;color:var(--text-1)}
.cp-kbd{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;border:1px solid var(--line-1);background:var(--surface-1);opacity:.75}
.cp-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto;padding-right:4px}
.cp-item{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line-1);background:var(--surface-2);border-radius:14px;padding:10px 10px;cursor:pointer}
.cp-item:hover{background:rgba(255,255,255,.06)}
.cp-item.is-active{border-color:rgba(88,140,255,.55);box-shadow:0 0 0 3px rgba(88,140,255,.18)}
.cp-item-ico{width:18px;height:18px;opacity:.85}
.cp-item-main{display:flex;flex-direction:column;gap:2px}
.cp-item-label{font-weight:800}
.cp-item-hint{font-size:12px;opacity:.70}
.cp-hint{font-size:12px;opacity:.65;padding-left:2px}

.err-center{display:flex;flex-direction:column;gap:10px}
.err-center-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.err-center-list{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow:auto;padding-right:4px}
.err-item{border:1px solid var(--line-1);border-radius:12px;background:var(--surface-2);padding:12px 12px}
.err-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.err-item-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.err-item-meta{margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;opacity:.80}
.err-item-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

/* --- Messaging (chat / notifications) --- */
.msg{display:flex; gap:10px; border:1px solid var(--line-1); border-radius:12px; background:var(--surface-2); overflow:hidden; min-height:420px; height:100%; color:var(--text)}
.msg-sidebar{width:320px; min-width:260px; border-right:1px solid var(--line-1); background:var(--surface-1); display:flex; flex-direction:column}
.msg-sidebar-head{padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line-1)}
.msg-title{display:flex; align-items:center; gap:8px}
.msg-ico{width:18px; height:18px; opacity:.85}
.msg-list{padding:8px; overflow:auto; display:flex; flex-direction:column; gap:6px; transition:opacity .18s ease, filter .18s ease}
.msg-list.is-soft-refresh{opacity:.76; filter:blur(.6px) saturate(.97)}
.msg-ch{border:1px solid var(--line-1); background:var(--surface-2); border-radius:14px; padding:10px 10px; text-align:left; cursor:pointer; width:100%; color:var(--text); font-family:inherit; transition:opacity .18s ease, filter .18s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease}
.msg-ch:hover{background:rgba(255,255,255,.06)}
.msg-ch.is-active{border-color:rgba(88,140,255,.55); box-shadow:0 0 0 3px rgba(88,140,255,.16)}
.msg-ch-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.msg-ch-name{font-weight:800; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg-ch-time{font-size:11px; opacity:.65; flex-shrink:0}
.msg-ch-bot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px}
.msg-ch-preview{font-size:12px; opacity:.72; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg-unread{margin-left:8px}

.msg-main{flex:1; display:flex; flex-direction:column; min-width:0}
.msg-main-head{padding:10px 12px; border-bottom:1px solid var(--line-1); background:var(--surface-1); display:flex; align-items:center; justify-content:space-between}
.msg-main-title{display:flex; align-items:center; gap:10px; min-width:0}
.msg-head-title{font-weight:900}
.msg-head-sub{font-size:11px; opacity:.65; margin-top:1px}
.msg-main-body{flex:1; overflow:auto; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.msg-body-inner{display:flex; flex-direction:column; gap:10px}
.msg-history-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px dashed var(--line-1); border-radius:14px; background:rgba(255,255,255,.03)}
.msg-older{display:flex; justify-content:center}
.msg-newer{display:flex; justify-content:center}
.msg-lines{display:flex; flex-direction:column; gap:8px}
.msg-line{display:flex; justify-content:flex-start}
.msg-line.is-mine{justify-content:flex-end}
.msg-bubble{max-width:min(72%, 760px); min-width:min(280px, 92%); border:1px solid var(--line-1); background:var(--surface-2); border-radius:12px; padding:10px 10px}
.msg-line.is-mine .msg-bubble{border-color:rgba(88,140,255,.35); box-shadow:0 0 0 3px rgba(88,140,255,.08)}
.msg-line.is-highlight .msg-bubble{border-color:rgba(245,158,11,.38); box-shadow:0 0 0 4px rgba(245,158,11,.14)}
.msg-who{font-size:11px; font-weight:800; opacity:.80; margin-bottom:4px}
.msg-text{font-size:13px; line-height:1.35}
.msg-ts{font-size:10px; opacity:.55; margin-top:6px; text-align:right}
.msg-readline{display:flex; gap:4px; margin-top:6px; align-items:center; flex-wrap:wrap}
.msg-line.is-mine .msg-readline{justify-content:flex-end}
.msg-line:not(.is-mine) .msg-readline{justify-content:flex-start}
.msg-read-badge{display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono, 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-size:6pt; line-height:1; padding:2px 5px; border-radius:10px; border:1px solid var(--line-1); background:rgba(255,255,255,.04); opacity:.86; user-select:none}
.msg-read-more{display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono, 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-size:6pt; line-height:1; padding:2px 5px; border-radius:10px; border:1px dashed var(--line-1); background:rgba(255,255,255,.03); opacity:.78; user-select:none}
.msg-compose{padding:10px 12px; border-top:1px solid var(--line-1); background:var(--surface-1); display:flex; gap:10px; align-items:flex-end}
.msg-input{flex:1; resize:vertical; min-height:42px; max-height:140px}
.msg-empty{padding:18px; display:flex; justify-content:center; align-items:center}
.msg-muted{padding:10px; font-size:12px; opacity:.70}

/* Messages host sizing (page + modal) */
.msg-host{display:flex; min-height:0; height:100%}
.msg-host>.msg{flex:1; min-height:0}
/* Messages page: keep the outer card within the viewport; scroll only inside chat body */
.page[data-page-id="messages"]{
  display:flex;
  flex-direction:column;
  height:100%;
  max-height:100%;
  min-height:0;
  overflow:hidden; /* prevent the whole page from growing beyond the viewport */
}
.page[data-page-id="messages"] .page-head{flex:0 0 auto;}
.page[data-page-id="messages"] .msg-host{
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
  overflow:hidden; /* contain the messaging card; inner parts scroll */
}
/* Override the generic min-height so the card never forces page overflow */
.page[data-page-id="messages"] .msg{min-height:0; height:100%}

/* Sidebar search */
.msg-sidebar-search{padding:8px 12px; border-bottom:1px solid var(--line-1); display:flex; align-items:center; gap:8px; background:var(--surface-1)}
.msg-sidebar-search .input{flex:1}

/* Messages fullscreen (app overlay) */
.msg-fs-portal{position:fixed; inset:0; z-index:49; padding:8px; display:flex; align-items:stretch; justify-content:stretch; background: rgba(246,248,252,.82)}
.msg-fs-card{width:100%; height:100%; display:flex; min-height:0; background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius2); box-shadow:var(--shadow); padding:12px}
.msg-host.msg-fullscreen{width:100%; height:100%; min-height:0}
.msg-host.msg-fullscreen .msg{height:100%; min-height:0}
.msg-host.msg-menu-closed .msg-sidebar{display:none}
.msg-host.msg-menu-closed .msg{gap:0}
.msg-host.msg-fullscreen.msg-fs-menu-closed .msg-sidebar{display:none}
.msg-host.msg-fullscreen.msg-fs-menu-closed .msg{gap:0}

/* Fullscreen: app sidebar overlay (shows the main app menu above the portal) */
.msg-fs-appmenu-overlay{display:block; position:fixed; inset:0; z-index:59; background: rgba(15,23,42,.36); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity:0; pointer-events:none; transition: opacity 160ms ease}
body.msg-fs-appmenu-open .msg-fs-appmenu-overlay{opacity:1; pointer-events:auto}

body.msg-fs-appmenu-mode .shell > .sidebar{
  position:fixed;
  top: 12px;
  left: 12px;
  bottom: 12px;
  height:auto !important;
  width: min(86vw, 340px) !important;
  max-width:none !important;
  flex-basis:auto !important;
  padding: 14px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: auto !important;
  border-width: 1px !important;
  border-radius: var(--radius2);
  box-shadow: var(--shadow) !important;
  transform: translateX(-110%);
  transition: transform 180ms ease;
  z-index:60;
}
body.msg-fs-appmenu-open .shell > .sidebar{transform: translateX(0)}

/* Messages modal kind: make body flex so chat fills available height */
.modal.msg-modal{display:flex; flex-direction:column; overflow:hidden; width:80vw; height:80vh; max-height: calc(100vh - 24px)}
.modal.msg-modal .modal-body{flex:1; min-height:0; display:flex; padding:12px; overflow:hidden}
.modal.msg-modal [data-modal-body]{flex:1; min-height:0; display:flex}
/* Ensure the chat widget stretches to the modal body and keeps scrolling inside .msg-main-body */
.modal.msg-modal .msg-host{flex:1 1 auto; min-height:0; height:100%}
.modal.msg-modal .msg{flex:1 1 auto; min-height:0; height:100%}
.modal.msg-modal.is-fs{width: calc(100vw - 24px) !important; height: calc(100vh - 24px) !important}

.modal.richtext-modal{width:80vw !important; min-width:min(80vw, calc(100vw - 24px)) !important; height:80vh !important; max-width:calc(100vw - 24px) !important; max-height:calc(100vh - 24px) !important; display:flex; flex-direction:column; overflow:hidden}
.modal.richtext-modal .modal-body{flex:1; min-height:0; display:flex; overflow:hidden; padding:16px}
.modal.richtext-modal .modal-body > [data-modal-body]{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; width:100%}
.modal.richtext-modal form[data-form], .modal.richtext-modal .form{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; width:100%}
.modal.richtext-modal .form-grid{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:auto; padding-right:2px; width:100%}
.modal.richtext-modal .field.field-richtext{flex:1 1 auto; min-height:320px}
.modal.richtext-modal .field.field-richtext > .tre{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.modal.richtext-modal .field.field-richtext .tre-ui{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.modal.richtext-modal .field.field-richtext .tre-editor{flex:1 1 auto; min-height:320px}

.modal-root.tre-modal-fullscreen-active{z-index:10020}
.modal-layer.tre-modal-fullscreen{position:fixed; inset:0; align-items:stretch; justify-content:stretch; padding:8px; z-index:10020}
.modal.tre-modal-fullscreen{position:fixed; inset:8px; width:auto !important; height:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; transform:none !important}
.modal.tre-modal-fullscreen .modal-body{flex:1 1 auto; min-height:0; display:flex; overflow:hidden}
.modal.tre-modal-fullscreen .modal-body > [data-modal-body]{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.modal.tre-modal-fullscreen .tre{flex:1 1 auto; min-height:0}
.modal.tre-modal-fullscreen .tre.tre-fullscreen{position:relative; inset:auto; z-index:auto; width:100%; height:100%; border-radius:12px; padding:12px}


.msg-new{display:flex; flex-direction:column; gap:10px; color:var(--text)}
.msg-new-search{display:flex; align-items:center; gap:8px}
.msg-new-list{display:flex; flex-direction:column; gap:8px; max-height:360px; overflow:auto; padding-right:4px}
.msg-pick{border:1px solid var(--line-1); background:var(--surface-2); border-radius:14px; padding:10px 10px; text-align:left; cursor:pointer; color:var(--text); font-family:inherit}
.msg-pick:hover{background:rgba(255,255,255,.06)}

.msg-section{display:flex; flex-direction:column; gap:8px; margin-bottom:8px}
.msg-section-title{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; font-weight:900; opacity:.72; padding:6px 2px; text-transform:uppercase; letter-spacing:.06em}

.msg-invite{border:1px dashed var(--line-1); background:var(--surface-2); border-radius:14px; padding:10px 10px; display:flex; gap:10px; align-items:flex-start; color:var(--text); transition:opacity .18s ease, filter .18s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease}
.msg-invite.is-request{border-style:solid; border-color:rgba(124,58,237,.28)}
.msg-invite-main{flex:1; min-width:0}
.msg-invite-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.msg-invite-name{font-weight:900; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg-invite-time{font-size:11px; opacity:.70; flex-shrink:0; display:flex; align-items:center; gap:8px}
.msg-invite-preview{font-size:12px; opacity:.75; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg-invite-actions{display:flex; flex-direction:column; gap:6px; flex-shrink:0}

.msg-head-actions{display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:nowrap}

/* Chat header actions overflow: show left/right arrows and allow horizontal scroll (same UX as tabs) */
.msg-head-actions-wrap{display:flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0}
.msg-head-actions-fixed{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.msg-head-actions-fixed[hidden]{display:none !important}
.msg-head-actions-scroll{flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none}
.msg-head-actions-scroll::-webkit-scrollbar{display:none}
.msg-head-actions-wrap .tab-nav-btn{width:26px; height:26px; border-radius:12px}

.mm{display:flex; flex-direction:column; gap:10px}
.mm-grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.mm-col{border:1px solid var(--line-1); background:var(--surface-1); border-radius:12px; padding:10px 10px; min-width:0}
.mm-title{font-size:12px; font-weight:900; opacity:.85; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.mm-list{display:flex; flex-direction:column; gap:8px; max-height:300px; overflow:auto; padding-right:4px}
.mm-sug{display:flex; flex-direction:column; gap:8px; max-height:220px; overflow:auto; padding-right:4px; margin-top:8px}
.mm-row{border:1px solid var(--line-1); background:var(--surface-2); border-radius:14px; padding:10px 10px; display:flex; gap:10px; align-items:center; justify-content:space-between}
.mm-row.is-pending{border-style:dashed; opacity:.92}
.mm-main{flex:1; min-width:0}
.mm-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mm-name{font-weight:900; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

@media (max-width: 980px){
  .mm-grid{grid-template-columns:1fr}
}

@media (max-width: 780px){
  .msg{flex-direction:column; height:100%; min-height:520px}
  .msg-sidebar{width:100%; min-width:0; border-right:0; border-bottom:1px solid var(--line-1)}
}

/* ----------------------------------------
   Theme: Dark (derived from Light tokens)
   ---------------------------------------- */

body.theme-dark{
  --bg:#0a0f14;
  --bg2:#070b10;
  --text:#e5e7eb;
  --muted:#a7b0bf;
  --muted2:#d1d5db;
  --panel:rgba(14,18,26,.72);
  --panel2:rgba(14,18,26,.86);
  --border:rgba(148,163,184,.16);
  --border2:rgba(148,163,184,.24);
  --shadow:0 14px 36px rgba(0,0,0,.40);
  --shadow2:0 10px 26px rgba(0,0,0,.36);

  /* Shared component tokens */
  --line-1: rgba(148,163,184,.16);
  --surface-1: rgba(14,18,26,.76);
  --surface-2: rgba(14,18,26,.56);
  /* Talpie palette: tweak transparencies for dark UI */
  --tpc-alpha-bg: .16;
  --tpc-alpha-line: .30;
  --tpc-alpha-bg-strong: .22;

}

body.theme-dark{
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(56,89,135,.10), transparent 58%),
    radial-gradient(920px 520px at 92% -5%, rgba(74,84,110,.08), transparent 58%),
    radial-gradient(900px 560px at 60% 110%, rgba(56,89,135,.06), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}

body.theme-dark .topbar{background:rgba(9,12,18,.72)}
body.theme-dark .dropdown-menu{background:rgba(14,18,26,.72)}
body.theme-dark .dropdown-head{background:rgba(14,18,26,.55)}
body.theme-dark .userpill{background:rgba(14,18,26,.60)}

/* Subtle hover surfaces should not look like “white glow” in dark mode */
body.theme-dark .cp-item:hover{background:rgba(14,18,26,.94)}


/* ----------------------------------------
   Theme: Dark – component overrides
   (some components still had hardcoded “light” surfaces)
   ---------------------------------------- */

/* Tabs */
body.theme-dark .tab-bar{border-bottom:1px solid var(--border2)}
body.theme-dark .tab{
  background:rgba(15,23,42,.45);
  color:rgba(226,232,240,.86);
  border-color:var(--border2);
  box-shadow:0 1px 0 rgba(0,0,0,.28);
}
body.theme-dark .tab:hover{background:rgba(15,23,42,.72)}
body.theme-dark .tab.active{
  background:var(--panel2);
  border-color:rgba(88,140,255,.48);
  border-bottom-color:var(--panel);
  color:var(--text);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}

body.theme-dark .tab-bar-wrap{border-bottom:1px solid var(--border2)}
body.theme-dark .tab-nav-btn{background:rgba(15,23,42,.45); border-color:var(--border2); box-shadow:0 1px 0 rgba(0,0,0,.28)}
body.theme-dark .tab-nav-btn:hover{background:rgba(15,23,42,.72)}


/* Inputs */
body.theme-dark .input{
  background:rgba(2,6,23,.22);
  color:var(--text);
  border-color:var(--border2);
}
body.theme-dark .input::placeholder{color:rgba(163,178,199,.78)}
body.theme-dark .input:focus{border-color:rgba(88,140,255,.55); box-shadow:0 0 0 3px rgba(88,140,255,.18)}

/* Buttons */
body.theme-dark .btn{
  border-color:var(--border2);
  background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.62));
  color:var(--text);
  box-shadow:0 1px 0 rgba(0,0,0,.34);
}
body.theme-dark .btn:hover{box-shadow:0 16px 30px rgba(0,0,0,.34)}


/* Messaging hovers */
body.theme-dark .msg-ch:hover{background:rgba(2,6,23,.24)}
body.theme-dark .msg-pick:hover{background:rgba(2,6,23,.24)}
body.theme-dark .btn-ghost{background:rgba(2,6,23,.18)}
body.theme-dark .btn-ghost:hover{background:rgba(2,6,23,.30)}
body.theme-dark .btn-primary{
  border-color:rgba(88,140,255,.48);
  background: linear-gradient(180deg, rgba(37,99,235,.30), rgba(124,58,237,.18));
  box-shadow:0 1px 0 rgba(0,0,0,.30), 0 14px 34px rgba(37,99,235,.14);
}
body.theme-dark .btn-primary:hover{box-shadow:0 1px 0 rgba(0,0,0,.30), 0 18px 40px rgba(37,99,235,.18)}


/* Badges: fix contrast in dark mode (light-theme fg hues were too dark) */
body.theme-dark .badge.info,
body.theme-dark .badge-blue,
body.theme-dark .badge-info{
  --b-bg: rgba(37,99,235,.22);
  --b-br: rgba(88,140,255,.34);
  --b-fg: rgba(226,232,240,.92);
}
body.theme-dark .badge.success,
body.theme-dark .badge-success{
  --b-bg: rgba(22,163,74,.18);
  --b-br: rgba(74,222,128,.30);
  --b-fg: rgba(226,232,240,.92);
}
body.theme-dark .badge.warn,
body.theme-dark .badge-warn{
  --b-bg: rgba(245,158,11,.18);
  --b-br: rgba(251,191,36,.32);
  --b-fg: rgba(226,232,240,.92);
}
body.theme-dark .badge.error,
body.theme-dark .badge-error{
  --b-bg: rgba(220,38,38,.18);
  --b-br: rgba(248,113,113,.34);
  --b-fg: rgba(226,232,240,.92);
}
body.theme-dark .badge.purple,
body.theme-dark .badge-purple{
  --b-bg: rgba(124,58,237,.20);
  --b-br: rgba(167,139,250,.30);
  --b-fg: rgba(226,232,240,.92);
}
body.theme-dark .badge.cyan,
body.theme-dark .badge-cyan{
  --b-bg: rgba(6,182,212,.18);
  --b-br: rgba(34,211,238,.30);
  --b-fg: rgba(226,232,240,.92);
}
body.theme-dark .badge.pink,
body.theme-dark .badge-pink{
  --b-bg: rgba(236,72,153,.18);
  --b-br: rgba(251,113,133,.30);
  --b-fg: rgba(226,232,240,.92);
}
body.theme-dark .badge.dim{
  --b-bg: rgba(2,6,23,.18);
  --b-br: rgba(148,163,184,.18);
  --b-fg: rgba(226,232,240,.72);
}

/* Messaging text contrast */
body.theme-dark .msg-ch-time,
body.theme-dark .msg-head-sub{opacity:1; color:rgba(226,232,240,.72)}
body.theme-dark .msg-ch-preview{opacity:1; color:rgba(226,232,240,.76)}
body.theme-dark .msg-ts{opacity:1; color:rgba(226,232,240,.62)}
body.theme-dark .msg-section-title{opacity:1; color:rgba(226,232,240,.66)}


/* Notices */
body.theme-dark .notice{background:rgba(2,6,23,.18); border-color:var(--border2); color:var(--text)}
body.theme-dark .notice.error{background:rgba(220,38,38,.10); border-color:rgba(239,68,68,.30)}

/* Basic table */
body.theme-dark .table th, body.theme-dark .table td{border-bottom:1px solid rgba(148,163,184,.10)}
body.theme-dark .table tr:hover td{background:rgba(88,140,255,.08)}

/* SmartTable core surfaces (legacy + v2/v3 wrappers) */
body.theme-dark .st-tablewrap,
body.theme-dark .st-table-wrap{
  border-color:var(--border2);
  background:rgba(2,6,23,.18);
  box-shadow:0 16px 40px rgba(0,0,0,.34);
}

body.theme-dark .st-table thead th{background:rgba(15,23,42,.86)}
body.theme-dark .st-table thead tr.st-filters th{background:rgba(15,23,42,.78)}
body.theme-dark .st-table thead tr.st-filters input,
body.theme-dark .st-table thead tr.st-filters select{
  background:rgba(2,6,23,.22);
  color:var(--text);
  border-color:rgba(148,163,184,.18);
}

body.theme-dark .st-loading{background:rgba(2,6,23,.62)}
body.theme-dark .st-spinner{border-color:rgba(148,163,184,.26); border-top-color:rgba(88,140,255,.72)}

/* Batch bar + record hint */
body.theme-dark .st-batchbar{border-color:rgba(148,163,184,.18); background:rgba(2,6,23,.14)}
body.theme-dark .st-batch-title{color:rgba(226,232,240,.72)}
body.theme-dark .st-batch-progress{color:rgba(226,232,240,.66)}
body.theme-dark .st-batch-hint{background:rgba(140,90,255,.14); border-color:rgba(140,90,255,.24); color:rgba(226,232,240,.92)}
body.theme-dark .st-batch-hint .muted{color:rgba(226,232,240,.70)}

/* Summary / popovers / subcards that still used hardcoded white */
body.theme-dark .st-chip{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.72)}
body.theme-dark .st-kpi,
body.theme-dark .st-sum-table td,
body.theme-dark .st-group-table td,
body.theme-dark .st-mgroup-cell,
body.theme-dark .st-summary-subcard,
body.theme-dark .expwiz-box,
body.theme-dark .expwiz-radio,
body.theme-dark .expwiz-col,
body.theme-dark .expwiz-sec{
  background:rgba(2,6,23,.18);
  border-color:rgba(148,163,184,.14);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}

/* Keep section-row label flat also in dark theme (override .expwiz-col dark styling). */
body.theme-dark .expwiz-sec .expwiz-sec-label{background:transparent; border:0; box-shadow:none}

body.theme-dark .st-sum-panel{background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.18); box-shadow:0 24px 90px rgba(0,0,0,.44)}
body.theme-dark .st-sum-item,
body.theme-dark .st-sum-fieldbox,
body.theme-dark .st-sum-subitem{background:rgba(2,6,23,.14); border-color:rgba(148,163,184,.14)}

body.theme-dark .st-summary-tabs{background:rgba(2,6,23,.14); border-color:rgba(148,163,184,.14)}

body.theme-dark .st-matrix-th{background:rgba(15,23,42,.86); border-bottom:1px solid rgba(148,163,184,.16)}
body.theme-dark .st-matrix-row td{background:rgba(2,6,23,.16); border-bottom:1px solid rgba(148,163,184,.10)}
body.theme-dark .st-matrix-row:hover td{background:rgba(88,140,255,.08)}
body.theme-dark .st-matrix-val--total{background:rgba(2,6,23,.22); border-left:1px solid rgba(148,163,184,.14)}
body.theme-dark .st-matrix-foot{background:rgba(2,6,23,.20); border-top:1px solid rgba(148,163,184,.18)}

/* Progress bars */
body.theme-dark .progressbar{border-color:rgba(148,163,184,.18); background:rgba(2,6,23,.16)}
body.theme-dark .st-progress{border-color:rgba(148,163,184,.18); background:rgba(2,6,23,.14)}

/* ----------------------------------------
   Theme: Dark – remaining overrides
   (command palette, SmartInputs, SmartTable panels, table text)
   ---------------------------------------- */

/* Command palette */
body.theme-dark .cp-row{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18)}
body.theme-dark .cp-input{color:rgba(226,232,240,.90)}
body.theme-dark .cp-input::placeholder{color:rgba(163,178,199,.72)}
body.theme-dark .cp-kbd{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.72)}
body.theme-dark .cp-item{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18)}
body.theme-dark .cp-item.is-active{border-color:rgba(88,140,255,.55); box-shadow:0 0 0 3px rgba(88,140,255,.18)}

/* SmartTable toolbar/search/select */
body.theme-dark .st-search{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18)}
body.theme-dark .st-input{color:rgba(226,232,240,.90)}
body.theme-dark .st-input::placeholder{color:rgba(163,178,199,.70)}
body.theme-dark .st-search-clear:hover{background:rgba(148,163,184,.10)}
body.theme-dark .st-select{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.90)}

/* SmartTable popover panels (Filters / Views / Export) */
body.theme-dark .st-panel{background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.18); box-shadow:0 24px 90px rgba(0,0,0,.44)}
body.theme-dark .st-panel-header{border-bottom:1px solid rgba(148,163,184,.14)}
body.theme-dark .st-panel-section{border-top:1px dashed rgba(148,163,184,.18)}
body.theme-dark .st-panel-subtitle{color:rgba(226,232,240,.62)}
body.theme-dark .st-filter-row{background:rgba(2,6,23,.16); border-color:rgba(148,163,184,.14)}
body.theme-dark .st-col-row{background:rgba(2,6,23,.16); border-color:rgba(148,163,184,.14)}
body.theme-dark .st-title-text.st-title-skel{background:rgba(148,163,184,.10)}

/* SmartInputs (autocomplete + searchable select) */
body.theme-dark .ti-suggest-menu,
body.theme-dark .ti-select-search-menu{background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.18); box-shadow:0 24px 80px rgba(0,0,0,.44)}
body.theme-dark .ti-suggest-item,
body.theme-dark .ti-select-search-item{color:rgba(226,232,240,.88)}
body.theme-dark .ti-suggest-item:hover,
body.theme-dark .ti-suggest-item.active,
body.theme-dark .ti-select-search-item:hover,
body.theme-dark .ti-select-search-item.selected{background:rgba(88,140,255,.12)}
body.theme-dark .ti-select-display{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.90)}
body.theme-dark .ti-select-search-input{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.90)}
body.theme-dark .ti-select-search-input::placeholder{color:rgba(163,178,199,.70)}

body.theme-dark .ti-mselect-display{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.90)}
body.theme-dark .ti-mselect-placeholder{color:rgba(163,178,199,.70)}
body.theme-dark .ti-mselect-pill{background:rgba(88,140,255,.12); border-color:rgba(88,140,255,.16)}
body.theme-dark .ti-mselect-pill-x:hover{background:rgba(148,163,184,.14)}
body.theme-dark .ti-mselect-menu{background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.18); box-shadow:0 24px 80px rgba(0,0,0,.44)}
body.theme-dark .ti-mselect-title{color:rgba(226,232,240,.88)}
body.theme-dark .ti-mselect-hint{color:rgba(163,178,199,.74)}
body.theme-dark .ti-mselect-item:hover,
body.theme-dark .ti-mselect-item.selected{background:rgba(88,140,255,.12)}

/* SmartInputs: List Picker (grouped multi-select) */
body.theme-dark .ti-lpicker{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18)}
body.theme-dark .ti-lpicker-search{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18)}
body.theme-dark .ti-lpicker-q{color:rgba(226,232,240,.90)}
body.theme-dark .ti-lpicker-q::placeholder{color:rgba(163,178,199,.70)}
body.theme-dark .ti-lpicker-clear:hover{background:rgba(148,163,184,.10)}
body.theme-dark .ti-lpicker-group{background:rgba(2,6,23,.14); border-color:rgba(148,163,184,.14)}
body.theme-dark .ti-lpicker-gh{background:rgba(2,6,23,.18)}
body.theme-dark .ti-lpicker-item{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.14)}
body.theme-dark .ti-lpicker-item:hover{background:rgba(88,140,255,.08); border-color:rgba(88,140,255,.22)}
body.theme-dark .ti-lpicker-item.selected{background:rgba(88,140,255,.12); border-color:rgba(88,140,255,.28)}
body.theme-dark .ti-lpicker-title{color:rgba(226,232,240,.88)}
body.theme-dark .ti-lpicker-hint{color:rgba(163,178,199,.74)}
body.theme-dark .ti-lpicker-desc{color:rgba(163,178,199,.68)}

/* SmartTable core table visuals (text/borders) */
body.theme-dark .st-table-wrap{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18)}
body.theme-dark .st-th{background:rgba(15,23,42,.86); border-right:1px solid rgba(148,163,184,.14); color:rgba(226,232,240,.90)}
body.theme-dark .st-th--spacer{background:rgba(15,23,42,.70)}
body.theme-dark .st-th--sel{background:rgba(15,23,42,1)}
body.theme-dark .st-td--sel{background:rgba(8,14,32,1)}
body.theme-dark .st-tr:nth-child(even) .st-td--sel{background:rgba(11,18,38,1)}
body.theme-dark .st-tr:hover .st-td--sel{background:rgba(25,35,58,1)}
body.theme-dark .st-selected .st-td--sel{background:rgba(20,35,70,1)}
body.theme-dark .st-table-wrap.has-frozen .st-th.st-frozen{background:rgba(15,23,42,1)}
body.theme-dark .st-table-wrap.has-frozen .st-td.st-frozen{background:rgba(8,14,32,1)}
body.theme-dark .st-tr:nth-child(even) .st-td.st-frozen{background:rgba(11,18,38,1)}
body.theme-dark .st-tr:hover .st-td.st-frozen{background:rgba(25,35,58,1)}
body.theme-dark .st-selected .st-td.st-frozen{background:rgba(20,35,70,1)}
body.theme-dark .st-table-wrap.has-frozen .st-th.st-frozen-right{background:rgba(15,23,42,1)}
body.theme-dark .st-table-wrap.has-frozen .st-td.st-frozen-right{background:rgba(8,14,32,1)}
body.theme-dark .st-tr:nth-child(even) .st-td.st-frozen-right{background:rgba(11,18,38,1)}
body.theme-dark .st-tr:hover .st-td.st-frozen-right{background:rgba(25,35,58,1)}
body.theme-dark .st-selected .st-td.st-frozen-right{background:rgba(20,35,70,1)}
body.theme-dark .st-th, body.theme-dark .st-td{border-bottom:1px solid rgba(148,163,184,.10)}
body.theme-dark .st-td{color:rgba(226,232,240,.86)}
body.theme-dark .st-muted{color:rgba(226,232,240,.55)}
body.theme-dark .st-tr:hover .st-td{background:rgba(88,140,255,.08)}
body.theme-dark .st-colfilter-btn{background:rgba(2,6,23,.16); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.78)}
body.theme-dark .st-colfilter-btn:hover{background:rgba(148,163,184,.10)}
body.theme-dark .st-resize::after{color:rgba(226,232,240,.75)}
body.theme-dark .st-cell-more{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.72)}
body.theme-dark .st-cell-more:hover{background:rgba(88,140,255,.12); border-color:rgba(88,140,255,.28); color:rgba(226,232,240,.92)}

/* Summary bar pills */
body.theme-dark .st-summaryline{background:rgba(2,6,23,.16); border-color:rgba(148,163,184,.14)}
body.theme-dark .st-insightsline{background:rgba(2,6,23,.14); border-color:rgba(148,163,184,.14)}
body.theme-dark .st-summary-pill.is-on{border-color:rgba(88,140,255,.36); background:rgba(88,140,255,.10)}
body.theme-dark .st-mini-th{background:rgba(15,23,42,.86); border-bottom:1px solid rgba(148,163,184,.16)}
body.theme-dark .st-mini-td{background:rgba(2,6,23,.16); border-bottom:1px solid rgba(148,163,184,.10)}
body.theme-dark .st-mini-row--total .st-mini-td{background:rgba(2,6,23,.22); border-top:1px solid rgba(148,163,184,.16)}
body.theme-dark .st-mini-row--more .st-mini-td{background:rgba(2,6,23,.12); border-bottom:1px solid rgba(148,163,184,.08)}
body.theme-dark .st-summary-pill{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.14); color:rgba(226,232,240,.72)}
body.theme-dark .st-summary-pill b{color:rgba(226,232,240,.92)}
body.theme-dark .st-summary-pill.is-zero{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.62)}
body.theme-dark .st-summary-pill.is-zero b{color:rgba(226,232,240,.78)}
body.theme-dark .st-summary-pill.is-pos{background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.28); color:rgba(134,239,172,.92)}
body.theme-dark .st-summary-pill.is-pos b{color:rgba(134,239,172,.98)}
body.theme-dark .st-summary-pill.is-neg{background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.30); color:rgba(252,165,165,.92)}
body.theme-dark .st-summary-pill.is-neg b{color:rgba(252,165,165,.98)}

/* Error center + code blocks */
body.theme-dark .err-item{background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18)}
body.theme-dark .modal-pre{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.14); color:rgba(226,232,240,.82)}
body.theme-dark .modal-header{border-bottom:1px solid rgba(148,163,184,.14)}
body.theme-dark .modal-footer{border-top:1px solid rgba(148,163,184,.14)}

/* ----------------------------------------
   Theme: Dark – final polish (pager spinner, toasts, fullscreen backdrop, loaders, stronger blur)
   ---------------------------------------- */

/* Pager: page input + tiny spinner */
body.theme-dark .st-page-input{
  background:rgba(2,6,23,.22);
  border-color:rgba(148,163,184,.18);
  color:rgba(226,232,240,.90);
}
body.theme-dark .st-page-input:focus{border-color:rgba(88,140,255,.55); box-shadow:0 0 0 3px rgba(88,140,255,.18)}
body.theme-dark .st-pager .st-spin{border-color:rgba(148,163,184,.26); border-top-color:rgba(88,140,255,.72)}

/* Command palette: button text colors (UA button styles can override inherited color) */
body.theme-dark .cp-item{color:rgba(226,232,240,.92)}
body.theme-dark .cp-item-label{color:rgba(226,232,240,.92)}
body.theme-dark .cp-item-hint,
body.theme-dark .cp-hint{color:rgba(226,232,240,.62)}

/* Toasts */
body.theme-dark .toast{
  border-color:rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.70));
  box-shadow:0 18px 40px rgba(0,0,0,.42);
}
body.theme-dark .toast-ico{
  background:rgba(2,6,23,.22);
  border-color:rgba(148,163,184,.16);
}
body.theme-dark .toast-x{color:rgba(226,232,240,.72)}
body.theme-dark .toast-x:hover{background:rgba(148,163,184,.10)}

/* SmartTable fullscreen portal backdrop (was light) */
body.theme-dark .st-fs-portal{
  background: rgba(2,6,23,.66);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* SmartTable loading overlays (both legacy .st-loading and vNext .st-loader) */
body.theme-dark .st-loading{
  background:rgba(2,6,23,.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.theme-dark .st-loader{
  background:rgba(2,6,23,.56);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Panels & dropdowns: stronger blur in dark (popups should feel "floating") */
body.theme-dark .dropdown-menu,
body.theme-dark .st-panel,
body.theme-dark .st-popover-panel,
body.theme-dark .ti-suggest-menu,
body.theme-dark .ti-select-search-menu{
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Modal + overlays: stronger blur */
body.theme-dark .modal-backdrop{
  background:rgba(2,6,23,.58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.theme-dark .sidebar-overlay{
  background: rgba(2,6,23,.56);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.theme-dark .st-fs-sidebar-overlay{
  background: rgba(2,6,23,.56);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* SmartTable panels have their own input rules that are light by default */
body.theme-dark .st-panel .st-input,
body.theme-dark .st-panel .st-select{
  background:rgba(2,6,23,.22);
  border-color:rgba(148,163,184,.18);
  color:rgba(226,232,240,.90);
}
body.theme-dark .st-panel .st-input::placeholder{color:rgba(163,178,199,.70)}

/* Check lists + checkboxes (ACL, user groups, preferences) */
body.theme-dark .checks{
  background:rgba(2,6,23,.16);
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .check{
  background:rgba(15,23,42,.45);
  border-color:rgba(148,163,184,.18);
  color:rgba(226,232,240,.88);
}
body.theme-dark .check:hover{
  background:rgba(88,140,255,.10);
  border-color:rgba(88,140,255,.22);
}

/* Bool fields in the flags column get a card appearance (coloured background)  */
/* to visually group them, but inline bool fields stay clean/borderless.          */
.form-flags-grid .check,
.form-dyn-flags-grid .check{
  padding:8px 12px;
  border:1px solid var(--border2);
  border-radius:10px;
  background:rgba(255,255,255,.97);
  min-height:36px;
}
.form-flags-grid .check:hover,
.form-dyn-flags-grid .check:hover{background:rgba(255,255,255,.96)}
body.theme-dark .form-flags-grid .check,
body.theme-dark .form-dyn-flags-grid .check{
  background:rgba(2,6,23,.18); border-color:rgba(148,163,184,.18);
}
body.theme-dark .form-flags-grid .check:hover,
body.theme-dark .form-dyn-flags-grid .check:hover{background:rgba(2,6,23,.28)}

body.theme-dark .check-title{color:rgba(226,232,240,.92)}

/* Dark mode: unified input appearance */
body.theme-dark .input{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18); color:rgba(226,232,240,.90)}
body.theme-dark .ss .ss-input{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18)}
body.theme-dark .ti-select-display{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18)}
body.theme-dark .ti-mselect-display{background:rgba(2,6,23,.22); border-color:rgba(148,163,184,.18)}
body.theme-dark .check-hint{color:rgba(226,232,240,.62)}

/* Make native checkboxes feel consistent in dark mode */
body.theme-dark input[type=checkbox]{
  accent-color: rgba(88,140,255,.92);
}

/* Switch-style checkbox (icons: switch-on/off/middle) */
.ti-switch{--ti-switch-size:18px; position:relative; width:var(--ti-switch-size); height:var(--ti-switch-size); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; user-select:none}
.ti-switch.disabled{opacity:.55; cursor:not-allowed}
.ti-switch-ico{width:100%; height:100%; display:block; pointer-events:none}
/* Keep the real checkbox fully interactive (for <label for>, keyboard, and table handlers)
   while rendering our custom icon visually. */
.ti-switch-native{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; opacity:0 !important; margin:0 !important; pointer-events:auto !important; cursor:pointer}
.ti-switch:focus-within{outline:2px solid rgba(120,170,255,.45); outline-offset:2px; border-radius:6px}

/* Compact sizes in dense UIs */
.rel-editor .ti-switch{--ti-switch-size:14px}
.ti-switch.acl-toggle{--ti-switch-size:14px}
.ti-switch.st-rowcb{--ti-switch-size:16px}
.ti-mselect-item .ti-switch{--ti-switch-size:14px}

/* Align inside check rows */
.check .ti-switch{margin-top:0; flex-shrink:0}
.rel-editor .check .ti-switch{margin-top:1px}

/* --- Comments (generic thread service) --- */
.cmt-modal{display:flex; flex-direction:column; gap:10px}
.cmt-head{padding:8px 10px; border:1px solid var(--line-1); background:var(--surface-1); border-radius:14px; font-size:12px}
.cmt-list{flex:1; min-height:360px; max-height:520px; overflow:auto; padding:8px; border:1px solid var(--line-1); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border-radius:14px}
.cmt-tree{display:flex; flex-direction:column; gap:8px}
.cmt-item{border:1px solid var(--line-1); background:var(--surface-2); border-radius:14px; padding:10px 10px}
.cmt-meta{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:6px}
.cmt-author{font-weight:900; font-size:12px}
.cmt-ts{font-size:11px; opacity:.65; flex-shrink:0}
.cmt-body{font-size:13px; line-height:1.35; white-space:pre-wrap}
.cmt-note{margin-top:6px; font-size:11px; opacity:.65}
.cmt-actions{margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.cmt-actions-left{display:flex; align-items:center; gap:10px}
.cmt-actions-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* --- Reactions (+/-) --- */
.react-bar{display:inline-flex; align-items:center; gap:6px}
.react-bar .react-num{min-width:16px; text-align:left; font-size:11px}
.react-bar .react-btn{display:inline-flex; align-items:center; gap:6px; height:16px; min-height:16px; max-height:16px; padding:2px 8px; font-size:11px; line-height:12px}
.react-bar .react-btn .btn-ico{width:12px; height:12px}
.react-bar .react-btn:disabled{opacity:.55; cursor:not-allowed}
.react-bar .react-btn:disabled:hover{opacity:.55}
.react-bar.is-compact .react-btn{height:16px; min-height:16px; max-height:16px; padding:2px 6px; font-size:11px}
.react-bar.is-compact .btn-ico{width:12px; height:12px}

.article-react{display:inline-flex; align-items:center}
.cmt-react{display:inline-flex; align-items:center}

/* Deleted comment: compact single-line bar (same layout as normal meta) */
.cmt-item.is-deleted{padding:8px 10px; background:var(--surface-1)}
.cmt-item.is-deleted .cmt-meta{margin-bottom:0}
.cmt-meta-left{display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; white-space:nowrap; overflow:hidden}
.cmt-item.is-deleted .cmt-delnote{display:inline-block; min-width:0; font-size:11px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cmt-item.is-deleted .cmt-author{font-weight:800}
.cmt-item.is-deleted .cmt-ts{opacity:.6}

/* Legacy (kept for backwards compatibility with older markup) */
.cmt-delbar{display:flex; align-items:center; gap:10px; width:100%}
.cmt-del-left{display:flex; align-items:center; gap:10px; flex:0 0 auto; min-width:0; white-space:nowrap}
.cmt-del-mid{flex:1 1 auto; text-align:center; font-size:11px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cmt-compose{display:flex; gap:10px; align-items:flex-end}
.cmt-input{flex:1; resize:vertical; min-height:52px; max-height:180px}
.cmt-replybar{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px dashed rgba(88,140,255,.45); background:rgba(88,140,255,.07); border-radius:14px}
.cmt-replytext{font-size:12px; opacity:.85}
.cmt-empty{padding:18px; display:flex; justify-content:center; align-items:center}

body.theme-dark .cmt-list{
  background:linear-gradient(180deg, rgba(2,6,23,.18), rgba(2,6,23,0));
}

/* Comment counter badge inside SmartTable action buttons */
.st-cmt-badge{margin-left:8px}

/* Insights: JSON modal */
.st-jsonmodal-pre{
  max-height: 70vh;
  overflow: auto;
  white-space: pre;
}


body.theme-dark .msg-fs-portal{background: rgba(2,6,23,.62)}

/* --- SmartTable rich cell renderers (UI-only) --- */
.st-country{display:flex; align-items:center; gap:8px; min-width:0}
.st-flag{width:18px; height:12px; border-radius:3px; object-fit:cover; flex:0 0 auto; border:1px solid var(--line-1)}
.st-country-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-mini-badge{display:inline-flex; align-items:center; justify-content:center; padding:2px 8px; font-size:11px; line-height:1; border-radius:999px; border:1px solid var(--line-1); background:var(--surface-2); opacity:.9; flex:0 0 auto}

.st-progress{display:flex; align-items:center; gap:8px; width:100%; min-width:0}
.st-progressbar{flex:1 1 auto; min-width:90px; height:10px; border-radius:999px; border:1px solid var(--line-1); background:rgba(15,23,42,.06); overflow:hidden}
.st-progressbar>span{display:block; height:100%; background:var(--brand); opacity:.55}

.st-imgcell{display:flex; align-items:center}

/* --- Context menu (right-click) --- */
.talpie-cmenu{position:fixed; z-index:99999; min-width:220px; max-width:320px; padding:4px; border-radius:12px; border:1px solid var(--line-1); background:var(--surface-2); box-shadow:var(--shadow-1); backdrop-filter:blur(4px)}
.talpie-cmenu .cm-item{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 8px; border-radius:8px; font-size:12px; cursor:pointer; user-select:none}
.talpie-cmenu .cm-item:hover{background:rgba(37,99,235,.10)}
.talpie-cmenu .cm-item--disabled{opacity:.45; cursor:not-allowed}
.talpie-cmenu .cm-left{display:flex; align-items:center; gap:10px; min-width:0}
.talpie-cmenu .cm-label{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.talpie-cmenu .cm-ico{width:14px; height:14px; opacity:.9}
.talpie-cmenu .cm-ico--blank{display:inline-block; width:14px; height:14px}
.talpie-cmenu .cm-rightwrap{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.talpie-cmenu .cm-right{font-size:11px; opacity:.75}
.talpie-cmenu .cm-check{width:16px; height:16px; border-radius:5px; border:1px solid var(--line-1); display:inline-flex; align-items:center; justify-content:center; font-size:12px; line-height:1}
.talpie-cmenu .cm-switch{width:26px; height:14px; object-fit:contain; opacity:.95}
.talpie-cmenu .cm-sep{height:1px; margin:4px 6px; background:var(--line-1); opacity:.8}
.talpie-cmenu .cm-title{padding:4px 8px; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; opacity:.65}

body.theme-dark .talpie-cmenu{background:rgba(2,6,23,.72)}
body.theme-dark .talpie-cmenu .cm-item:hover{background:rgba(88,140,255,.18)}


/* KV JSON editor (headers builder) */
.kvjson-ui { display:flex; flex-direction:column; gap:10px; }
.kvjson-rows { display:flex; flex-direction:column; gap:8px; }
.kvjson-row { display:flex; gap:10px; align-items:flex-end; padding:10px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background: rgba(255,255,255,0.03); }
.kvjson-col { flex:1; min-width:0; }
.kvjson-cap { font-size:11px; opacity:0.75; margin-bottom:4px; }
.kvjson-row .btn { height:34px; }

/* MultiMap JSON editor (column map builder) */
.mmjson-ui { display:flex; flex-direction:column; gap:10px; }
.mmjson-rows { display:flex; flex-direction:column; gap:10px; }
.mmjson-row { display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background: rgba(255,255,255,0.03); }
.mmjson-col { flex:1; min-width:0; }
.mmjson-actions { display:flex; gap:6px; align-items:flex-start; padding-top:18px; }
.mmjson-cap { font-size:11px; opacity:0.75; margin-bottom:4px; }
.mmjson-alias-rows { display:flex; flex-direction:column; gap:6px; }
.mmjson-alias-row { display:flex; gap:6px; align-items:center; }
.mmjson-alias-row .btn { height:32px; padding:0 10px; }
.mmjson-row .btn { height:34px; }
.mmjson-inline-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

/* ------------------------------------------------------------
   Timeline Day (demo)
   ------------------------------------------------------------ */

.tl-day { display:flex; flex-direction:column; gap:12px; }

.tl-toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:12px; border-radius:14px;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  box-shadow: var(--shadow-1);
}

.tl-date{ display:flex; align-items:center; gap:8px; }
.tl-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.tl-filter{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 10px 8px;
  border-radius:14px;
  border:1px solid var(--line-1);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  min-width: 220px;
}

.tl-filter-cap{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.1px;
}
.tl-filter-ico{ width:14px; height:14px; opacity:.9; }

.tl-filter .ti-mselect, .tl-filter select{ width:100%; }

.tl-filter .ti-mselect-display{
  min-height: 36px;
  border-radius: 12px;
}

.tl-filter .ti-mselect-placeholder{ font-weight:400; opacity:.50; }

.tl-summary{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}

.tl-summary-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.tl-summary-cap{
  font-size:11px;
  font-weight:700;
  opacity:.72;
  padding-right:4px;
}

.tl-pill{
  padding:6px 10px; border-radius:999px; font-size:12px;
  border:1px solid var(--line-1);
  background: var(--surface-2);
}

.tl-list{ display:flex; flex-direction:column; gap:12px; }

.tl-item{
  position:relative;
  padding-left:56px; /* space for time axis */
}

.tl-axis{
  position:absolute; left:20px; top:0; bottom:0;
  width:2px; background: var(--line-1);
  border-radius:2px;
  opacity:.7;
}

.tl-time{
  position:absolute; left:6px; top:14px;
  min-width:44px;
  padding:6px 8px;
  border-radius:999px;
  font-weight:800; font-size:12px;
  text-align:center;
  border:1px solid var(--line-1);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}

.tl-card{
  border-radius:12px;
  border:1px solid var(--line-1);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  overflow:hidden;
}

.tl-card-h{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px;
  border-bottom:1px solid var(--line-1);
}

.tl-loadref{
  font-size:14px; font-weight:900; letter-spacing:.1px;
  cursor:pointer;
}

.tl-meta{ font-size:12px; opacity:.95; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tl-meta-item{ display:inline-flex; align-items:center; gap:6px; }
.tl-mini-ico{ width:14px; height:14px; opacity:.85; }

.tl-badge{
  font-size:11px; font-weight:900;
  padding:3px 8px; border-radius:999px;
  border:1px solid var(--line-1);
  background: var(--surface-3, var(--panel2, rgba(255,255,255,.92)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tl-badge.out{ border-color: rgba(37,99,235,.35); }
.tl-badge.in{ border-color: rgba(16,185,129,.30); }

.tl-card-b{ padding:10px 14px 14px; }

.tl-route-chips{ display:none; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tl-chip{
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background: var(--surface-3, var(--panel2, rgba(255,255,255,.92)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size:11px;
  font-weight:800;
}
.tl-chip-more{ opacity:.75; }

.tl-chip-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background: var(--surface-2);
  font-size:11px;
  font-weight:950;
  margin-right:6px;
}

.tl-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background: var(--surface-3, var(--panel2, rgba(255,255,255,.92)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size:11px;
  font-weight:950;
}

.tl-link{
  font-weight:900;
  color: var(--text-1);
  text-decoration:none;
}
.tl-link:hover{ text-decoration:underline; }


.tl-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}
.tl-table th{
  text-align:left;
  font-size:11px; opacity:.70;
  padding:8px 10px;
  border-bottom:1px solid var(--line-1);
}
.tl-table td{
  padding:8px 10px;
  border-bottom:1px solid rgba(148,163,184,.12);
  vertical-align:top;
}
.tl-table tr:hover td{ background: rgba(37,99,235,.06); }

.tl-num{ text-align:right; }

.tl-rcode{ font-weight:900; cursor:pointer; color: var(--text-1); text-decoration:none; }
.tl-rcode:hover{ text-decoration: underline; }
.tl-rcode-sub{ font-size:11px; margin-top:2px; }

.tl-day.is-loading .tl-card{ opacity:.75; }

.tl-modal-meta{display:flex; flex-wrap:wrap; gap:10px;}
.tl-modal-meta>div{padding:6px 10px; border-radius:12px; border:1px solid var(--line-1); background:var(--surface-2)}

@media (max-width: 900px){
  .tl-summary{ margin-left:0; }
  .tl-toolbar{ align-items:flex-start; }
}

/* Timeline Day (demo) - v2 overrides: grid layout + colored status pills + header pills */

.tl-day.tl-standard .tl-item{ grid-template-columns: 0px 80px 1fr; }
.tl-day.tl-centered .tl-item{ grid-template-columns: 1fr 80px 1fr; }

.tl-item{
  position:relative;
  padding-left:0;
  display:grid;
  gap:0;
  align-items:stretch;
}

.tl-side{
  min-width:0;
  display:flex;
}

.tl-left{
  justify-content:flex-end;
  padding-right:12px;
}

.tl-right{
  justify-content:flex-start;
  padding-left:12px;
}

.tl-day.tl-standard .tl-left{ visibility:hidden; pointer-events:none; padding-right:0; }
.tl-day.tl-standard .tl-right{ padding-left:0; }

.tl-mid{
  position:relative;
}

.tl-axis{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background: var(--line-1);
  border-radius:2px;
  opacity:.7;
}

.tl-time{
  left:auto;
  transform:none;
  position:sticky;
  top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:6px 8px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  text-align:center;
  border:1px solid var(--line-1);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}

/* Axis positioning per style */
.tl-day.tl-standard .tl-axis{ left:20px; }
.tl-day.tl-standard .tl-time{ position:absolute; left:6px; top:14px; }

.tl-day.tl-centered .tl-axis{ left:50%; transform: translateX(-1px); }
.tl-day.tl-centered .tl-time{ position:absolute; left:50%; top:14px; transform: translateX(-50%); }

/* Card header layout */
.tl-card-h{
  justify-content:space-between;
}

.tl-h-left, .tl-h-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.tl-h-left{
  min-width:0;
}

.tl-refstack{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.tl-reflabel{
  font-size:11px;
  font-weight:900;
  opacity:.72;
}

.tl-pillmini{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background: var(--surface-3, var(--panel2, rgba(255,255,255,.92)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.tl-carrierpill{
  border-color: rgba(37,99,235,.25);
}

.tl-dockpill{
  border-color: rgba(148,163,184,.22);
}

/* Truck status pill */
.tl-truckpill{
  border-color: rgba(148,163,184,.22);
}

/* Reference (min) route status pill */
.tl-routepill{
  border-color: rgba(148,163,184,.22);
}

/* Expander button (compact view) */
.tl-exp{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid var(--line-1);
  background: var(--surface-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tl-exp:hover{ background: var(--surface-3); }
.tl-exp img{ width:14px; height:14px; opacity:.9; }
.tl-card.is-collapsed .tl-exp img{ transform: rotate(-90deg); }

/* Compact rules: show chips only when collapsed; show table only when expanded */
.tl-day.tl-compact .tl-card.is-collapsed .tl-route-chips{ display:flex; }
.tl-day.tl-compact .tl-card.is-collapsed .tl-table{ display:none; }
.tl-day:not(.tl-compact) .tl-route-chips{ display:none; }

/* Dual range slider */
.ti-range{ width:100%; }
.ti-range-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.ti-range-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  font-weight:700;
  opacity:.85;
  margin-bottom:6px;
}
.ti-range-sep{ opacity:.55; font-weight:900; }
.ti-range-track{
  position:relative;
  flex: 1 1 auto;
  height:26px;
  border-radius:12px;
}
.ti-range-rail{
  position:absolute;
  left:0; right:0;
  top:50%;
  height:6px;
  transform: translateY(-50%);
  border-radius:999px;
  background: rgba(148,163,184,.18);
}
.ti-range-fill{
  position:absolute;
  top:50%;
  height:6px;
  transform: translateY(-50%);
  border-radius:999px;
  background: rgba(37,99,235,.35);
  left:0;
  right:0;
}
.ti-range-input{
  position:absolute;
  left:0; right:0;
  top:0;
  width:100%;
  height:26px;
  background: transparent;
  pointer-events:auto;
  -webkit-appearance:none;
  appearance:none;
}
.ti-range-input::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  pointer-events:auto;
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background: var(--surface-3, var(--panel2, rgba(255,255,255,.92)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 14px rgba(0,0,0,.20);
}
.ti-range-input::-moz-range-thumb{
  pointer-events:auto;
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background: var(--surface-3, var(--panel2, rgba(255,255,255,.92)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 14px rgba(0,0,0,.20);
}

/* Make settings button show a dot when auto-refresh enabled */
.tl-tools .btn.is-on{
  position:relative;
}
.tl-tools .btn.is-on::after{
  content:'';
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(16,185,129,.85);
  box-shadow: 0 0 0 2px rgba(16,185,129,.18);
}

/* Tone-driven pills (universal)
   Backend decides tones; UI only styles tones. */
.tl-status[data-tone], .tl-chip-status[data-tone], .tl-pillmini[data-tone]{
  --tone-b: rgba(148,163,184,.22);
  --tone-bg: rgba(148,163,184,.10);
  --tone-t: var(--text-1);
  border-color: var(--tone-b);
  background: var(--tone-bg);
  color: var(--tone-t);
}

.tl-status[data-tone="info"], .tl-chip-status[data-tone="info"], .tl-pillmini[data-tone="info"]{
  --tone-b: rgba(37,99,235,.35);
  --tone-bg: rgba(37,99,235,.10);
  --tone-t: rgba(29,78,216,.95);
}
.tl-status[data-tone="warn"], .tl-chip-status[data-tone="warn"], .tl-pillmini[data-tone="warn"]{
  --tone-b: rgba(245,158,11,.45);
  --tone-bg: rgba(245,158,11,.12);
  --tone-t: rgba(180,83,9,.95);
}
.tl-status[data-tone="ok"], .tl-chip-status[data-tone="ok"], .tl-pillmini[data-tone="ok"]{
  --tone-b: rgba(16,185,129,.35);
  --tone-bg: rgba(16,185,129,.12);
  --tone-t: rgba(4,120,87,.95);
}
.tl-status[data-tone="done"], .tl-chip-status[data-tone="done"], .tl-pillmini[data-tone="done"]{
  --tone-b: rgba(168,85,247,.40);
  --tone-bg: rgba(168,85,247,.12);
  --tone-t: rgba(126,34,206,.95);
}
.tl-status[data-tone="danger"], .tl-chip-status[data-tone="danger"], .tl-pillmini[data-tone="danger"]{
  --tone-b: rgba(239,68,68,.42);
  --tone-bg: rgba(239,68,68,.12);
  --tone-t: rgba(185,28,28,.95);
}

/* Blink (usable for pills/badges/statuses). Add: data-blink="1" or class="is-blink" */
@keyframes talpie-blink{
  0%,49.9%{ opacity: 1; }
  50%,100%{ opacity: .12; }
}
.st-pill[data-blink="1"],
.tl-status[data-blink="1"],
.tl-chip-status[data-blink="1"],
.tl-pillmini[data-blink="1"],
.is-blink{
  animation: talpie-blink 1s steps(2, start) infinite;
}
@media (prefers-reduced-motion: reduce){
  .st-pill[data-blink="1"],
  .tl-status[data-blink="1"],
  .tl-chip-status[data-blink="1"],
  .tl-pillmini[data-blink="1"],
  .is-blink{ animation: none; }
}

.tl-tools{ display:flex; align-items:center; gap:8px; }

/* ------------------------------------------------------------
   Timeline Day (demo) - v3: presets + scrollable list + compact filter wrap
   ------------------------------------------------------------ */

.tl-day{ min-height:0; }
.tl-toolbar{ 
  flex:0 0 auto;
  row-gap:10px;
  flex-direction:column;
  align-items:stretch;
  padding:10px;
}
.tl-toolbar-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tl-toolbar-bottom .tl-filters{ width:100%; }

.tl-filters{ row-gap:8px; }
.tl-filter{ padding:6px 7px 5px; gap:3px; min-width:170px; }
.tl-filter-cap{ font-size:11px; }

.tl-scroll{ overflow:auto; flex:1; min-height:0; padding-top:2px; }

/* Range presets dropdown (shown only on title click) */
.tl-filter{ position:relative; }
.tl-filter-cap-btn{
  border:0;
  background:transparent;
  padding:0;
  width:100%;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}
.tl-filter-cap-btn:hover{ opacity:.95; }
.tl-cap-chevron{ margin-left:auto; width:14px; height:14px; opacity:.72; }

.tl-preset-dd{
  position:absolute;
  left:0;
  top: calc(100% + 6px);
  min-width: 220px;
  max-width: 340px;
  border-radius:14px;
  border:1px solid var(--line-1);
  background: var(--surface-3, var(--panel2, rgba(255,255,255,.92)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
  padding:6px;
  z-index:50;
  display:none;
}
.tl-filter.is-menu-open .tl-preset-dd{ display:block; }

.tl-preset-item{
  width:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
}
.tl-preset-item:hover{ background: rgba(148,163,184,.10); }
.tl-preset-item.is-active{
  background: rgba(37,99,235,.10);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.25);
}
.tl-preset-hint{ font-size:11px; opacity:.72; font-weight:800; }
.tl-preset-label{ font-size:12px; font-weight:700; }

/* Dual range slider (custom thumbs, no click-to-jump) */
.ti-range-track{ user-select:none; touch-action:none; }
.ti-range-thumb{
  position:absolute;
  top:50%;
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background: var(--surface-3, var(--panel2, rgba(255,255,255,.92)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 14px rgba(0,0,0,.20);
  transform: translate(-50%, -50%);
  cursor:grab;
  z-index:3;
}
.ti-range-thumb:active{ cursor:grabbing; }
.ti-range-thumb.is-active{ z-index:4; }
.ti-range-valbtn{
  border:0;
  background:transparent;
  padding:1px 4px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  color: var(--text-1);
  font-size:10px;
  min-width:44px;
  text-align:center;
}
.ti-range-valbtn:hover{ background: rgba(148,163,184,.10); }


/* -----------------------------
   TalpieRichTextEditor (tre)
   ----------------------------- */
.tre{
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  background:rgba(255,255,255,.66);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
  overflow:hidden;
}

.tre-ui{padding:10px}

.tre-toolbar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.tre-toolbar-head-note{display:none !important}
.tre-toolbar-toggles{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.tre-fs-actions{display:flex; align-items:center; gap:6px; margin-left:auto}
.tre-chip{
  appearance:none;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.82);
  color:var(--text);
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow1);
}
.tre-chip[draggable="true"]{cursor:grab}
.tre-chip.tre-chip-dragging{opacity:.55}
.tre-chip.tre-chip-drop-before{box-shadow:inset 3px 0 0 rgba(37,99,235,.55), var(--shadow1)}
.tre-chip.tre-chip-drop-after{box-shadow:inset -3px 0 0 rgba(37,99,235,.55), var(--shadow1)}
.tre-chip:hover{box-shadow:var(--shadow2)}
.tre-chip.is-active{
  background:rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.35);
  color:var(--brand-700, #1d4ed8);
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.18);
}

.tre-toolbar{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:8px;
  padding:6px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:rgba(255,255,255,.76);
}

.tre-toolbar .input{width:auto}
.tre-section{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:4px 6px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:13px;
  background:rgba(255,255,255,.62);
  min-height:36px;
}
.tre-section[draggable="true"]{cursor:default}
.tre-section.tre-section-dragging{opacity:.55}
.tre-section.tre-section-drop-before{box-shadow:inset 3px 0 0 rgba(37,99,235,.55)}
.tre-section.tre-section-drop-after{box-shadow:inset -3px 0 0 rgba(37,99,235,.55)}
.tre-section-handle{appearance:none; border:none; background:transparent; width:18px; height:18px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; cursor:grab; opacity:.68; padding:0}
.tre-section-handle:hover{background:rgba(37,99,235,.08); opacity:1}
.tre-section-handle .btn-ico{width:11px; height:11px}
.tre-section.is-collapsed{display:none}
.tre-section-label{display:none !important}
.tre-group{display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap}
.tre-sep{width:1px; height:18px; background:rgba(15,23,42,.10); margin:0 3px; border-radius:999px}

.tre-toolbar .btn{height:26px; min-height:26px; padding:0 8px}
.tre-toolbar .btn-ico{width:12px; height:12px}

.tre-toolbar .btn.is-active{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.35);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.22);
}
.tre-toolbar .btn.is-active:hover{
  background: rgba(37,99,235,.14);
}
.tre-glyph{font-weight:950; font-size:12px; line-height:1}

.tre-sel{height:26px; padding:4px 8px; min-width:82px}


.tre-editor{
  margin-top:10px;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  outline:none;
  font-size:14px;
  line-height:1.5;
  min-height:220px;
}

.tre-editor.is-empty:before{
  content: attr(data-placeholder);
  color: rgba(100,116,139,.72);
}

.tre-editor p{margin:0 0 10px 0}
.tre-editor p:last-child{margin-bottom:0}
.tre-editor h1,.tre-editor h2,.tre-editor h3,.tre-editor h4,.tre-editor h5,.tre-editor h6{margin:6px 0 10px 0}
.tre-editor ul,.tre-editor ol{margin:6px 0 10px 18px}

.tre-editor blockquote{
  margin:8px 0;
  padding:8px 10px;
  border-left:3px solid rgba(37,99,235,.30);
  background:rgba(37,99,235,.06);
  border-radius:10px;
}

.tre-editor pre{
  margin:8px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.04);
  font-family: var(--mono, ui-monospace, monospace);
  overflow:auto;
}

.tre-editor .tre-img{display:block; max-width:100%; border-radius:12px; border:1px solid transparent; box-shadow:var(--shadow2); transition:border-color .16s ease, box-shadow .16s ease, border-radius .16s ease, outline-color .16s ease}
.tre-editor .tre-video{max-width:100%; border-radius:12px; border:1px solid var(--border)}

.tre-editor .tre-embed{position:relative; width:100%; padding-top:56.25%; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:rgba(2,6,23,.06)}
.tre-editor .tre-embed iframe{position:absolute; inset:0; width:100%; height:100%}

.tre-editor .tre-img.tre-img--stroke,.tre-render .tre-img.tre-img--stroke{border-color:rgba(15,23,42,.14); box-shadow:0 0 0 1px rgba(255,255,255,.92), var(--shadow2)}
.tre-editor .tre-img.tre-img--radius-0,.tre-render .tre-img.tre-img--radius-0{border-radius:0}
.tre-editor .tre-img.tre-img--radius-5,.tre-render .tre-img.tre-img--radius-5{border-radius:5px}
.tre-editor .tre-img.tre-img--radius-10,.tre-render .tre-img.tre-img--radius-10{border-radius:10px}
.tre-editor .tre-img.tre-img--radius-15,.tre-render .tre-img.tre-img--radius-15{border-radius:15px}
.tre-editor .tre-img.tre-img--radius-20,.tre-render .tre-img.tre-img--radius-20{border-radius:20px}
.tre-editor .tre-img.tre-img--radius-25,.tre-render .tre-img.tre-img--radius-25{border-radius:25px}

.tre-table{width:100%; border-collapse:collapse; table-layout:auto; margin:10px 0; position:relative; transition:box-shadow .16s ease, outline-color .16s ease, border-radius .16s ease}
.tre-table td,.tre-table th{border:1px solid var(--border2); padding:6px 8px; vertical-align:top; position:relative}
.tre-table th{background:rgba(15,23,42,.03); font-weight:950}
.tre-table.tre-table--noborder td,.tre-table.tre-table--noborder th{border:none}
.tre-table.tre-table--compact td,.tre-table.tre-table--compact th{padding:4px 6px}
.tre-table.tre-table--zebra tbody tr:nth-child(even) td{background:rgba(15,23,42,.025)}
.tre-table.tre-table--radius-0,.tre-render .tre-table.tre-table--radius-0{border-radius:0}
.tre-table.tre-table--radius-5,.tre-render .tre-table.tre-table--radius-5{border-radius:5px}
.tre-table.tre-table--radius-10,.tre-render .tre-table.tre-table--radius-10{border-radius:10px}
.tre-table.tre-table--radius-15,.tre-render .tre-table.tre-table--radius-15{border-radius:15px}
.tre-table.tre-table--radius-20,.tre-render .tre-table.tre-table--radius-20{border-radius:20px}
.tre-table.tre-table--radius-25,.tre-render .tre-table.tre-table--radius-25{border-radius:25px}
.tre-table[class*="tre-table--radius-"],.tre-render .tre-table[class*="tre-table--radius-"]{border-collapse:separate; border-spacing:0; overflow:hidden}
.tre-table[class*="tre-table--radius-"] th:first-child,.tre-table[class*="tre-table--radius-"] td:first-child,.tre-render .tre-table[class*="tre-table--radius-"] th:first-child,.tre-render .tre-table[class*="tre-table--radius-"] td:first-child{border-left-width:1px}
.tre-ctx-target{outline:2px solid rgba(37,99,235,.35); outline-offset:2px; border-radius:10px}
.tre-table-quickbtn,.tre-divider-quickbtn,.tre-image-quickbtn,.tre-node-quickbtn,.tre-block-draghandle{position:fixed; z-index:58; width:20px; height:20px; padding:0; border:none; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98)); box-shadow:0 8px 24px rgba(15,23,42,.16); cursor:pointer}
.tre-table-quickbtn img,.tre-divider-quickbtn img,.tre-image-quickbtn img,.tre-node-quickbtn img,.tre-block-draghandle img{width:11px; height:11px; opacity:.82}
.tre-table-quickbtn.hidden,.tre-divider-quickbtn.hidden,.tre-image-quickbtn.hidden,.tre-node-quickbtn.hidden,.tre-block-draghandle.hidden{display:none}
.tre-table-quickbtn:hover,.tre-divider-quickbtn:hover,.tre-image-quickbtn:hover,.tre-node-quickbtn:hover,.tre-block-draghandle:hover{box-shadow:0 12px 28px rgba(15,23,42,.22)}
.tre-block-draghandle{cursor:grab; z-index:59}
.tre-block-drop-indicator{position:fixed; z-index:59; height:3px; border-radius:999px; background:rgba(37,99,235,.72); box-shadow:0 0 0 1px rgba(255,255,255,.85), 0 10px 24px rgba(15,23,42,.16)}
.tre-block-drop-indicator.hidden{display:none}
.tre-editor p:hover,.tre-editor h1:hover,.tre-editor h2:hover,.tre-editor h3:hover,.tre-editor h4:hover,.tre-editor h5:hover,.tre-editor h6:hover,.tre-editor blockquote:hover,.tre-editor pre:hover,.tre-editor details:hover,.tre-editor .tre-spoiler:hover,.tre-editor .tre-audio:hover,.tre-editor .tre-chart:hover,.tre-editor .tre-alink:hover,.tre-editor .tre-embed:hover,.tre-editor ul:hover,.tre-editor ol:hover{box-shadow:0 0 0 1px rgba(96,165,250,.18), 0 12px 28px rgba(15,23,42,.06); background-image:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));}
.tre-editor img:hover,.tre-editor .tre-img:hover{outline:2px solid rgba(37,99,235,.18); outline-offset:2px; box-shadow:0 0 0 2px rgba(37,99,235,.12), var(--shadow2)}
.tre-editor table:hover,.tre-editor .tre-table:hover{outline:2px solid rgba(37,99,235,.14); outline-offset:2px; box-shadow:0 12px 28px rgba(15,23,42,.08)}
.tre-divider{border:none; height:18px; margin:10px 0; position:relative; background:transparent; cursor:pointer; border-radius:12px; user-select:none}
.tre-divider::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; transform:translateY(-50%); background:var(--border2); border-radius:999px; pointer-events:none}
.tre-divider:hover::before{height:2px; background:rgba(37,99,235,.38)}
.tre-divider.tre-divider-selected{background:rgba(37,99,235,.06); box-shadow:inset 0 0 0 1px rgba(37,99,235,.14)}
.tre-divider.tre-divider-selected::before{height:2px; background:rgba(37,99,235,.68)}
.tre-editor p.tre-block-hover,.tre-editor blockquote.tre-block-hover,.tre-editor pre.tre-block-hover,.tre-editor ul.tre-block-hover,.tre-editor ol.tre-block-hover,.tre-editor h1.tre-block-hover,.tre-editor h2.tre-block-hover,.tre-editor h3.tre-block-hover,.tre-editor h4.tre-block-hover,.tre-editor h5.tre-block-hover,.tre-editor h6.tre-block-hover,.tre-editor details.tre-block-hover,.tre-editor .tre-embed.tre-block-hover,.tre-editor .tre-audio.tre-block-hover,.tre-editor .tre-chart.tre-block-hover,.tre-editor .tre-alink.tre-block-hover,.tre-editor video.tre-block-hover{background:rgba(37,99,235,.05); box-shadow:inset 0 0 0 1px rgba(37,99,235,.12); border-radius:14px}
.tre-editor img.tre-block-hover,.tre-editor .tre-img.tre-block-hover{outline:2px solid rgba(37,99,235,.18); outline-offset:2px; box-shadow:0 0 0 2px rgba(37,99,235,.16), var(--shadow2)}
.tre-editor table.tre-block-hover,.tre-editor .tre-table.tre-block-hover{outline:2px solid rgba(37,99,235,.14); outline-offset:2px; box-shadow:0 12px 28px rgba(15,23,42,.10)}
.tre-editor hr.tre-block-hover,.tre-editor .tre-divider.tre-block-hover{box-shadow:0 0 0 2px rgba(37,99,235,.16), var(--shadow2)}
.tre-editor p.tre-block-selected,.tre-editor blockquote.tre-block-selected,.tre-editor pre.tre-block-selected,.tre-editor ul.tre-block-selected,.tre-editor ol.tre-block-selected,.tre-editor h1.tre-block-selected,.tre-editor h2.tre-block-selected,.tre-editor h3.tre-block-selected,.tre-editor h4.tre-block-selected,.tre-editor h5.tre-block-selected,.tre-editor h6.tre-block-selected,.tre-editor details.tre-block-selected,.tre-editor .tre-embed.tre-block-selected,.tre-editor .tre-audio.tre-block-selected,.tre-editor .tre-chart.tre-block-selected,.tre-editor .tre-alink.tre-block-selected,.tre-editor video.tre-block-selected{background:rgba(37,99,235,.08); box-shadow:inset 0 0 0 1px rgba(37,99,235,.22); border-radius:14px}
.tre-editor img.tre-block-selected,.tre-editor .tre-img.tre-block-selected{outline:2px solid rgba(37,99,235,.34); outline-offset:2px; box-shadow:0 0 0 2px rgba(37,99,235,.28), 0 12px 30px rgba(15,23,42,.12)}
.tre-editor table.tre-block-selected,.tre-editor .tre-table.tre-block-selected{outline:2px solid rgba(37,99,235,.26); outline-offset:2px; box-shadow:0 14px 32px rgba(15,23,42,.12)}
.tre-editor hr.tre-block-selected,.tre-editor .tre-divider.tre-block-selected{box-shadow:0 0 0 2px rgba(37,99,235,.32), 0 12px 30px rgba(15,23,42,.12)}
.tre-editor .tre-img{position:relative; display:block}
.tre-editor .tre-img.tre-img--free{max-width:none}
.tre-image-resizer{position:fixed; z-index:57; border:1px solid rgba(37,99,235,.45); border-radius:14px; box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 10px 24px rgba(15,23,42,.12); pointer-events:none}
.tre-image-resizer.hidden{display:none}
.tre-image-resizer-handle{position:absolute; width:12px; height:12px; border-radius:999px; background:#fff; border:2px solid rgba(37,99,235,.78); box-shadow:0 4px 12px rgba(15,23,42,.18); pointer-events:auto}
.tre-image-resizer-handle[data-dir="nw"]{left:-7px; top:-7px; cursor:nwse-resize}
.tre-image-resizer-handle[data-dir="ne"]{right:-7px; top:-7px; cursor:nesw-resize}
.tre-image-resizer-handle[data-dir="sw"]{left:-7px; bottom:-7px; cursor:nesw-resize}
.tre-image-resizer-handle[data-dir="se"]{right:-7px; bottom:-7px; cursor:nwse-resize}
.tre-body-lock{overflow:hidden}
.tre-fs-appmenu-overlay{display:block; position:fixed; inset:0; z-index:1205; background:rgba(15,23,42,.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity 160ms ease}
body.tre-fs-appmenu-open .tre-fs-appmenu-overlay{opacity:1; pointer-events:auto}
body.tre-fs-appmenu-mode .shell > .sidebar{
  position:fixed;
  top:12px;
  left:12px;
  bottom:12px;
  height:auto !important;
  width:min(86vw, 340px) !important;
  max-width:none !important;
  flex-basis:auto !important;
  padding:14px !important;
  opacity:1 !important;
  pointer-events:auto !important;
  overflow:auto !important;
  border-width:1px !important;
  border-radius:var(--radius2);
  box-shadow:var(--shadow) !important;
  transform:translateX(-110%);
  transition:transform 180ms ease;
  z-index:1206;
}
body.tre-fs-appmenu-open .shell > .sidebar{transform:translateX(0)}
.tre.tre-fullscreen{
  position:fixed;
  inset:12px;
  z-index:1200;
  background:rgba(248,250,252,.98);
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  box-shadow:0 24px 80px rgba(15,23,42,.20);
  padding:14px;
}
.tre.tre-fullscreen .tre-ui{height:100%; display:flex; flex-direction:column; padding:0}
.tre.tre-fullscreen .tre-toolbar-head{padding:0 2px; position:sticky; top:0; z-index:3; background:transparent}
.tre.tre-fullscreen .tre-toolbar{position:sticky; top:40px; z-index:2; flex:0 0 auto}
.tre.tre-fullscreen .tre-editor,
.tre.tre-fullscreen .tre-html{flex:1 1 auto; min-height:0; height:100%}
.tre.tre-fullscreen .tre-editor{margin-top:10px; overflow:auto}
.tre.tre-fullscreen .tre-html{margin-top:10px; min-height:0}
@media (max-width: 900px){
  .tre-toolbar{gap:6px; padding:6px}
  .tre-section{width:100%; align-items:flex-start}
  .tre.tre-fullscreen{inset:8px; padding:10px}
  body.tre-fs-appmenu-mode .shell > .sidebar{top:8px; left:8px; bottom:8px; width:min(92vw, 340px) !important}
}

/* Editor fallback for older content without tre-* classes */
.tre-editor table{width:100%; border-collapse:collapse; table-layout:auto; margin:10px 0}
.tre-editor table td,.tre-editor table th{border:1px solid var(--border2); padding:6px 8px; vertical-align:top}
.tre-editor details{border:1px solid rgba(15,23,42,.10); border-radius:14px; background:rgba(15,23,42,.03); padding:8px 10px; margin:10px 0}
.tre-editor details summary{cursor:pointer; font-weight:950; color:rgba(15,23,42,.80)}

.tre-spoiler{border:1px solid rgba(15,23,42,.10); border-radius:14px; background:rgba(15,23,42,.03); padding:8px 10px; margin:10px 0}
.tre-spoiler summary{cursor:pointer; font-weight:950; color:rgba(15,23,42,.80)}
.tre-spoiler-body{margin-top:8px}

.tre-html{margin-top:10px}
.tre.tre-show-html .tre-editor{display:none}


/* =============================
   Articles (cards wall + viewer)
   ============================= */

.dash-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px}
.dash-stack{margin-top:12px}
.dash-card-title{display:flex; align-items:center; gap:10px; font-weight:950; font-size:14px}
.dash-kpis{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px}
.dash-kpi{padding:10px 12px; border-radius:14px; border:1px solid rgba(15,23,42,.08); background:rgba(15,23,42,.02)}
.dash-kpi-num{font-weight:700; font-size:17px; line-height:1}
.dash-kpi-lab{margin-top:6px; font-size:12px; color:var(--muted)}

.articles-wall{padding:14px}
.articles-wall.is-compact .articles-sub{display:none}
.articles-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.articles-head-left{display:flex; align-items:flex-start; gap:10px}
.articles-ico{width:18px; height:18px; opacity:.88; margin-top:2px}
.articles-title{font-weight:950; font-size:14px; line-height:1.2}
.articles-sub{font-size:12px; margin-top:4px}
.articles-head-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.articles-search{width:220px; max-width:46vw}
.articles-select{min-width:180px}
.articles-page-size{min-width:96px}
.articles-toolbar{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.articles-toolbar--bottom{margin-top:14px}
.articles-summary{font-size:12px}
.articles-pager{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.articles-page-indicator{min-width:72px; text-align:center; font-size:12px; font-weight:900; color:var(--muted2)}

.articles-grid{margin-top:12px; display:grid; grid-template-columns:minmax(0, 1fr); gap:12px}
.articles-wall .articles-grid{grid-template-columns:repeat(var(--articles-cols, 3), minmax(0, 1fr))}
.articles-wall.is-compact .articles-grid{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.articles-wall .articles-grid.articles-groups-stack{grid-template-columns:minmax(0, 1fr); gap:14px}
.articles-grid--nested{margin-top:10px}
.articles-group{margin-top:14px; padding:14px; border-radius:12px; border:1px solid var(--border); background:var(--panel)}
.articles-group:first-child{margin-top:0}
.articles-group-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:2px}
.articles-group-title{display:flex; align-items:center; gap:10px; min-width:0}
.articles-group-fallback{font-weight:900; font-size:13px}
.articles-group-count{font-size:12px; font-weight:900}

.article-card{
  text-align:left;
  width:100%;
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel2);
  padding:12px 12px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.article-card:hover{box-shadow:var(--shadow2); border-color:rgba(37,99,235,.20)}
.article-card:active{transform:translateY(0)}


.article-card-thumb{width:76px; height:76px; flex:0 0 76px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:rgba(2,6,23,.04)}
.article-card-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.article-card-main{flex:1; min-width:0}
.article-card-topmeta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:2px}

.article-card-title{font-weight:950; font-size:14px; line-height:1.25}
.article-card-excerpt{margin-top:8px; font-size:13px; color:var(--muted); line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.article-card-meta{margin-top:10px; display:flex; flex-wrap:wrap; gap:10px}
.article-meta-item{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
.article-meta-ico{width:13px; height:13px; opacity:.82}

/* Clickable meta button (comments count) */
.article-meta-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.article-meta-btn:hover{color:var(--accent)}
.article-meta-btn.is-readonly{opacity:.75}

.article-skel{height:128px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(90deg, rgba(2,6,23,.06), rgba(2,6,23,.03), rgba(2,6,23,.06)); background-size:220% 100%; animation:tiShimmer 1.1s linear infinite}
@keyframes tiShimmer{0%{background-position:0% 0%}100%{background-position:220% 0%}}

.article-view-excerpt{margin-top:8px; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(2,6,23,.04); color:var(--text)}
.article-view-meta{display:flex; flex-wrap:wrap; gap:10px}
.article-view-body{margin-top:12px}

/* Rendered RichText content (read-only) */
.tre-render{font-size:14px; line-height:1.6; color:var(--text)}
.tre-render p{margin:0 0 10px 0}
.tre-render p:last-child{margin-bottom:0}
.tre-render h1,.tre-render h2,.tre-render h3,.tre-render h4,.tre-render h5,.tre-render h6{margin:6px 0 10px 0}
.tre-render ul,.tre-render ol{margin:6px 0 10px 18px}

.tre-render blockquote{margin:8px 0; padding:8px 10px; border-left:3px solid rgba(37,99,235,.32); background:rgba(37,99,235,.08); border-radius:10px}
.tre-render pre{margin:8px 0; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(2,6,23,.06); font-family: var(--mono, ui-monospace, monospace); overflow:auto}

.tre-render .tre-img{max-width:100%; border-radius:12px; border:1px solid transparent; box-shadow:var(--shadow2); transition:border-color .16s ease, box-shadow .16s ease, border-radius .16s ease}
.tre-render .tre-video{max-width:100%; border-radius:12px; border:1px solid var(--border)}

.tre-render .tre-embed{position:relative; width:100%; padding-top:56.25%; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:rgba(2,6,23,.06)}
.tre-render .tre-embed iframe{position:absolute; inset:0; width:100%; height:100%}

.tre-render .tre-table{width:100%; border-collapse:collapse; table-layout:auto; margin:10px 0}
.tre-render .tre-table td,.tre-render .tre-table th{border:1px solid var(--border2); padding:6px 8px; vertical-align:top}
.tre-render .tre-table th{background:rgba(15,23,42,.03); font-weight:950}
.tre-render .tre-table.tre-table--noborder td,.tre-render .tre-table.tre-table--noborder th{border:none}
.tre-render .tre-table.tre-table--compact td,.tre-render .tre-table.tre-table--compact th{padding:4px 6px}
.tre-render .tre-table.tre-table--zebra tbody tr:nth-child(even) td{background:rgba(15,23,42,.025)}
.tre-render .tre-divider{border:none; height:18px; margin:10px 0; background:linear-gradient(var(--border2), var(--border2)) center/100% 1px no-repeat}

/* Fallback styling for older content without tre-* classes */
.tre-render table{width:100%; border-collapse:collapse; table-layout:auto; margin:10px 0}
.tre-render table td,.tre-render table th{border:1px solid var(--border2); padding:6px 8px; vertical-align:top}
.tre-render details{border:1px solid rgba(15,23,42,.10); border-radius:14px; background:rgba(15,23,42,.03); padding:8px 10px; margin:10px 0}
.tre-render details summary{cursor:pointer; font-weight:950; color:rgba(15,23,42,.80)}

.tre-render .tre-spoiler{border:1px solid rgba(15,23,42,.10); border-radius:14px; background:rgba(15,23,42,.03); padding:8px 10px; margin:10px 0}
.tre-render .tre-spoiler summary{cursor:pointer; font-weight:950; color:rgba(15,23,42,.80)}
.tre-render .tre-spoiler-body{margin-top:8px}

/* ------------------------------
   SmartChart (tc)
   ------------------------------ */

.tc{ position: relative; }
.tc-shell{ display:flex; flex-direction:column; gap:10px; }
.tc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tc-title{ font-weight:950; font-size:13px; color:var(--text-1); }
.tc-badges{ display:flex; gap:6px; align-items:center; }
.tc-body{ position:relative; width:100%; border:1px solid var(--line-1); border-radius:14px; background:var(--surface-2); overflow:hidden; }
.tc-canvas{ width:100%; height:100%; display:block; opacity:0; transform: translateY(4px) scale(.995); transition: opacity .25s ease, transform .25s ease; }
.tc.is-ready .tc-canvas{ opacity:1; transform:none; }
.tc-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-1); opacity:.75; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,.00), rgba(255,255,255,.18), rgba(255,255,255,.00));
  background-size: 240% 100%;
  animation: tcShimmer 1.2s ease-in-out infinite;
}
.tc-loading[hidden]{ display:none !important; }
.tc-loading.is-error{ color:#b91c1c; opacity:1; }

@keyframes tcShimmer{
  0%{ background-position: 120% 0; }
  100%{ background-position: -120% 0; }
}

.tc-legend{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tc-legend-items{ display:flex; flex-wrap:wrap; gap:8px; }
.tc-legend-item{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line-1); border-radius:999px; background:var(--surface-1); cursor:pointer; user-select:none; font-size:12px; }
.tc-legend-item:hover{ filter:brightness(.985); }
.tc-legend-item.is-off{ opacity:.45; }
.tc-mini{ font-size:11px; opacity:.6; margin-left:8px; }
.tc-dot{ width:10px; height:10px; border-radius:999px; box-shadow:0 0 0 2px rgba(255,255,255,.6) inset; }
.tc-legend-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }

/* Live charts: subtle SYNC indicator (no canvas flicker) */
.badge.tc-sync{ position:relative; padding-left:14px; }
.badge.tc-sync::before{ content:""; position:absolute; left:6px; top:50%; width:6px; height:6px; border-radius:999px; background: currentColor; transform: translateY(-50%); opacity:.65; animation: tcPulse 1s ease-in-out infinite; }
@keyframes tcPulse{ 0%{ transform: translateY(-50%) scale(.85); opacity:.35; } 50%{ transform: translateY(-50%) scale(1.15); opacity:.85; } 100%{ transform: translateY(-50%) scale(.85); opacity:.35; } }

.tc-legend-row{ display:flex; align-items:center; gap:10px; }
.tc-legend-label{ font-size:12px; opacity:.7; }
.tc-sel{ min-width: 160px; }

.tc-tip-title{ font-weight:950; font-size:12px; margin-bottom:6px; }
.tc-tip-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; }
.tc-tip-k{ opacity:.75; }
.tc-tip-v{ font-weight:950; }
.tc-tip-k .tc-tip-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px; box-shadow:0 0 0 2px rgba(255,255,255,.6) inset; vertical-align:-1px; }
.tc-tip-mini{ font-size:11px; opacity:.55; margin-left:6px; }

/* -------------------------------------------------------------------------- */
/* Talpie tooltips + icon-only buttons                                         */
/* -------------------------------------------------------------------------- */

.tpc-tooltip{ position:fixed; z-index: 9999; pointer-events:none; max-width:min(320px, calc(100vw - 20px)); padding:10px 10px; border-radius:14px; border:1px solid var(--line-1, rgba(15,23,42,.10)); background:var(--surface-3, var(--panel2, rgba(255,255,255,.94))); color:var(--text, #0f172a); box-shadow: var(--shadow-1, 0 16px 40px rgba(15,23,42,.16)); backdrop-filter: blur(14px) saturate(1.06); -webkit-backdrop-filter: blur(14px) saturate(1.06); font-size:12px; line-height:1.35; font-weight:950; opacity:0; transform: translateY(2px) scale(.96); transform-origin: center bottom; will-change: opacity, transform, left, top; transition: opacity .16s ease, transform .16s cubic-bezier(.2,.9,.2,1); }
.tpc-tooltip[data-place="top"]{ transform-origin: center bottom; }
.tpc-tooltip[data-place="bottom"]{ transform-origin: center top; }
.tpc-tooltip.is-open{ opacity:1; transform: translateY(0) scale(1); }
.tpc-tooltip.is-measuring{ opacity:0 !important; transform: translateY(0) scale(1) !important; }
.tpc-tooltip[data-mode="html"]{ font-weight:600; }
.tpc-tooltip[hidden]{ display:none !important; }
.tpc-tooltip a{ color:inherit; }
body.theme-dark .tpc-tooltip{ border-color:rgba(148,163,184,.20); background:rgba(14,18,26,.94); color:rgba(226,232,240,.96); box-shadow:0 18px 48px rgba(0,0,0,.42); }
body.theme-dark .tpc-tooltip .tc-tip-k{ color:rgba(226,232,240,.72); }
body.theme-dark .tpc-tooltip .tc-tip-mini{ color:rgba(226,232,240,.58); }

/* Hide labels for icon buttons (labels remain in DOM for tooltips + a11y). */
.tpc-icononly{ gap:0 !important; justify-content:center !important; padding-left:6px !important; padding-right:6px !important; min-width:28px; }
.tpc-icononly .lbl,
.tpc-icononly .btn-label{ display:none !important; }

/* Slightly tighter icons in icon-only mode */

.tpc-icononly.tpc-has-badge{ gap:4px !important; min-width:auto; }
.tpc-icononly.tpc-has-badge .btn-ico{ margin:0 !important; }
.tpc-icononly .btn-ico{ margin:0 !important; }


/* Pie/Doughnut slice legend */
.tc-legend.tc-legend-pie{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.tc-slices{ display:flex; flex-direction:column; gap:8px; }
.tc-slice{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--line-1); border-radius:12px; background:var(--surface-1); cursor:pointer; user-select:none; font-size:12px; text-align:left; }
.tc-slice:hover{ filter:brightness(.985); }
.tc-slice.is-active{ outline:2px solid rgba(59,130,246,.22); }
.tc-slice-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.tc-slice-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.tc-slice-right{ display:flex; align-items:baseline; gap:10px; flex-shrink:0; }
.tc-slice-pct{ opacity:.7; }
.tc-slice-val{ font-weight:950; }

/* Heatmap scale legend */
.tc-heat-legend{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tc-heat-title{ font-size:12px; opacity:.75; }
.tc-heat-scale{ display:flex; align-items:center; gap:10px; }
.tc-heat-bar{ width:160px; height:10px; border-radius:999px; border:1px solid var(--line-1);
  background: linear-gradient(90deg, rgb(37,99,235), rgb(20,184,166), rgb(245,158,11), rgb(239,68,68));
}
.tc-heat-min,.tc-heat-max{ font-size:12px; opacity:.75; }

/* Details modal helpers (used by chart drilldown) */
.kv{ display:flex; flex-direction:column; gap:10px; }
.kv-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid var(--line-1); border-radius:12px; background:var(--surface-1); }
.kv-k{ font-size:12px; opacity:.75; display:flex; align-items:center; gap:8px; }
.kv-v{ font-size:12px; font-weight:950; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px solid var(--line-1); background:rgba(255,255,255,.92); }
.pill::before{ content:''; width:10px; height:10px; border-radius:999px; background: var(--pill, #2563eb); box-shadow:0 0 0 2px rgba(255,255,255,.6) inset; }

/* RichText embed: chart placeholder */
.tre-chart{ border:1px dashed var(--line-1); border-radius:14px; padding:10px; background:linear-gradient(180deg, rgba(37,99,235,.06), rgba(255,255,255,0)); }
.tre-chart-ph{ display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(15,23,42,.86); }
.tre-chart-ico{ width:16px; height:16px; opacity:.9; }


.tre-audio{ border:1px dashed var(--line-1); border-radius:14px; padding:10px; background:linear-gradient(180deg, rgba(15,23,42,.04), rgba(255,255,255,0)); }
.tre-audio-ph{ display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(15,23,42,.86); }
.tre-audio-ico{ width:16px; height:16px; opacity:.9; }


/* RichText embed: article link placeholder */
.tre-alink{ border:1px dashed var(--line-1); border-radius:14px; padding:10px; background:linear-gradient(180deg, rgba(15,23,42,.04), rgba(255,255,255,0)); }
.tre-alink-ph{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:rgba(15,23,42,.86); }
.tre-alink-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.tre-alink-title{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tre-alink-ico{ width:16px; height:16px; opacity:.9; }

/* Article link embed (read-only render) */
.tre-render .tre-alink-render .alink{ border:1px solid rgba(15,23,42,.10); border-radius:14px; padding:10px; background:rgba(255,255,255,.75); display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none; }
.tre-render .tre-alink-render .alink:hover{ border-color:rgba(37,99,235,.20); background:rgba(37,99,235,.04); }
.tre-render .tre-alink-render .alink-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.tre-render .tre-alink-render .alink-ico{ width:18px; height:18px; opacity:.92; }
.tre-render .tre-alink-render .alink-main{ min-width:0; }
.tre-render .tre-alink-render .alink-title{ font-weight:950; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:rgba(15,23,42,.86); }
.tre-render .tre-alink-render .alink-sub{ margin-top:4px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tre-render .tre-alink-render .alink-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tre-render .tre-alink-render .alink-lock{ width:16px; height:16px; opacity:.9; }
.tre-render .tre-alink-render.is-locked .alink{ border-color: rgba(239,68,68,.16); background:rgba(239,68,68,.04); }

/* Audio embed (read-only render) */
.tre-render .taudio{border:1px solid rgba(15,23,42,.10); border-radius:14px; padding:10px; background:rgba(15,23,42,.02)}
.tre-render .taudio--err{border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.06); color:rgba(239,68,68,.92); font-weight:800}
.tre-render .taudio-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.tre-render .taudio-ico{width:16px; height:16px; opacity:.88}
.tre-render .taudio-title{font-weight:950; font-size:12px; color:rgba(15,23,42,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tre-render .taudio-player{width:100%}
.tre-render .taudio-list{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.tre-render .taudio-item{border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.88); border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer; color:var(--muted)}
.tre-render .taudio-item:hover{border-color:rgba(37,99,235,.22); color:rgba(37,99,235,.95)}
.tre-render .taudio-item.is-active{border-color:rgba(37,99,235,.35); background:rgba(37,99,235,.08); color:rgba(37,99,235,.95)}

/* Article picker (RichText: Insert article link) */
.ap-item.is-active{
  border-color: var(--secBr, rgba(37,99,235,.30));
  box-shadow: 0 0 0 2px var(--secTint, rgba(37,99,235,.12));
}


/* --- Talpie Color Picker --- */
.tpc-picker{display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--border); background:var(--surface-1); border-radius:14px}
.tpc-swatch{width:20px; height:20px; border-radius:7px; border:1px solid var(--border); background:rgb(var(--tpc-rgb)); cursor:pointer; position:relative; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.tpc-swatch:hover{transform:translateY(-1px)}
.tpc-swatch:active{transform:translateY(0)}
.tpc-swatch.is-none{background:linear-gradient(135deg, rgba(148,163,184,.18), rgba(148,163,184,.06));}
.tpc-swatch.is-none::after{content:''; position:absolute; left:3px; right:3px; top:9px; height:2px; background:rgba(15,23,42,.45); transform:rotate(-38deg); border-radius:999px}
.tpc-swatch.is-selected{outline:2px solid rgba(var(--tpc-rgb), .55); outline-offset:2px}
.tpc-colorcell{display:inline-flex; align-items:center}
.tpc-swatch-mini{--tpc-rgb:148,163,184; width:14px; height:14px; border-radius:6px; border:1px solid var(--border); background:rgb(var(--tpc-rgb)); box-shadow:0 1px 0 rgba(0,0,0,.06)}
body.theme-dark .tpc-swatch-mini{box-shadow:0 1px 0 rgba(0,0,0,.28)}

.tpc-picked{display:flex; align-items:center; gap:10px; margin-top:10px}
.tpc-picked .tpc-pill{margin:0}
.tpc-picked-code{font-family:TalpieMono, ui-monospace, monospace; font-size:12px; opacity:.8}

/* --- Talpie color pill (category badge etc.) --- */
.tpc-pill{--tpc-rgb:37,99,235; display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; border:1px solid rgba(var(--tpc-rgb), var(--tpc-alpha-line)); background:rgba(var(--tpc-rgb), var(--tpc-alpha-bg)); color:rgb(var(--tpc-rgb)); font-weight:800; font-size:12px; line-height:1}
.tpc-pill .tpc-pill-ico{width:13px; height:13px; opacity:.85}

body.theme-dark .tpc-picker{background:var(--surface-1)}
body.theme-dark .tpc-swatch{box-shadow:0 1px 0 rgba(0,0,0,.28)}


/* Articles – dark mode tuning */
body.theme-dark .article-card{background:rgba(14,18,26,.82)}
body.theme-dark .article-card:hover{box-shadow:0 18px 44px rgba(0,0,0,.38)}
body.theme-dark .article-card-thumb{background:rgba(2,6,23,.24)}
body.theme-dark .article-skel{border-color:rgba(148,163,184,.14); background:linear-gradient(90deg, rgba(148,163,184,.10), rgba(148,163,184,.06), rgba(148,163,184,.10))}
body.theme-dark .article-view-excerpt{background:rgba(2,6,23,.18)}
body.theme-dark .tre-render blockquote{background:rgba(88,140,255,.10); border-left-color:rgba(88,140,255,.40)}
body.theme-dark .tre-render pre{background:rgba(2,6,23,.24)}
body.theme-dark .tre-render .tre-embed{background:rgba(2,6,23,.24)}
body.theme-dark .tre-table.tre-table--zebra tbody tr:nth-child(even) td, body.theme-dark .tre-render .tre-table.tre-table--zebra tbody tr:nth-child(even) td{background:rgba(148,163,184,.06)}
body.theme-dark .tre-table-quickbtn,body.theme-dark .tre-divider-quickbtn,body.theme-dark .tre-image-quickbtn,body.theme-dark .tre-node-quickbtn,body.theme-dark .tre-block-draghandle{background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96)); box-shadow:0 12px 28px rgba(0,0,0,.34)}
body.theme-dark .tre-editor p.tre-block-hover,body.theme-dark .tre-editor blockquote.tre-block-hover,body.theme-dark .tre-editor pre.tre-block-hover,body.theme-dark .tre-editor ul.tre-block-hover,body.theme-dark .tre-editor ol.tre-block-hover,body.theme-dark .tre-editor h1.tre-block-hover,body.theme-dark .tre-editor h2.tre-block-hover,body.theme-dark .tre-editor h3.tre-block-hover,body.theme-dark .tre-editor h4.tre-block-hover,body.theme-dark .tre-editor h5.tre-block-hover,body.theme-dark .tre-editor h6.tre-block-hover,body.theme-dark .tre-editor details.tre-block-hover,body.theme-dark .tre-editor .tre-embed.tre-block-hover,body.theme-dark .tre-editor .tre-audio.tre-block-hover,body.theme-dark .tre-editor .tre-chart.tre-block-hover,body.theme-dark .tre-editor .tre-alink.tre-block-hover,body.theme-dark .tre-editor video.tre-block-hover{background:rgba(59,130,246,.12); box-shadow:inset 0 0 0 1px rgba(96,165,250,.20)}
body.theme-dark .tre-editor img.tre-block-hover,body.theme-dark .tre-editor .tre-img.tre-block-hover{outline:2px solid rgba(96,165,250,.28); box-shadow:0 0 0 2px rgba(96,165,250,.22), var(--shadow2)}
body.theme-dark .tre-editor table.tre-block-hover,body.theme-dark .tre-editor .tre-table.tre-block-hover{outline:2px solid rgba(96,165,250,.24); box-shadow:0 16px 32px rgba(0,0,0,.22)}
body.theme-dark .tre-editor p.tre-block-selected,body.theme-dark .tre-editor blockquote.tre-block-selected,body.theme-dark .tre-editor pre.tre-block-selected,body.theme-dark .tre-editor ul.tre-block-selected,body.theme-dark .tre-editor ol.tre-block-selected,body.theme-dark .tre-editor h1.tre-block-selected,body.theme-dark .tre-editor h2.tre-block-selected,body.theme-dark .tre-editor h3.tre-block-selected,body.theme-dark .tre-editor h4.tre-block-selected,body.theme-dark .tre-editor h5.tre-block-selected,body.theme-dark .tre-editor h6.tre-block-selected,body.theme-dark .tre-editor details.tre-block-selected,body.theme-dark .tre-editor .tre-embed.tre-block-selected,body.theme-dark .tre-editor .tre-audio.tre-block-selected,body.theme-dark .tre-editor .tre-chart.tre-block-selected,body.theme-dark .tre-editor .tre-alink.tre-block-selected,body.theme-dark .tre-editor video.tre-block-selected{background:rgba(59,130,246,.16); box-shadow:inset 0 0 0 1px rgba(96,165,250,.28)}
body.theme-dark .tre-editor img.tre-block-selected,body.theme-dark .tre-editor .tre-img.tre-block-selected{outline:2px solid rgba(147,197,253,.42); box-shadow:0 0 0 2px rgba(96,165,250,.32), 0 14px 32px rgba(0,0,0,.26)}
body.theme-dark .tre-editor table.tre-block-selected,body.theme-dark .tre-editor .tre-table.tre-block-selected{outline:2px solid rgba(147,197,253,.34); box-shadow:0 16px 34px rgba(0,0,0,.26)}
body.theme-dark .tre-divider::before, body.theme-dark .tre-render .tre-divider{background-color:rgba(148,163,184,.18)}
body.theme-dark .tre-render .tre-divider{background-image:linear-gradient(rgba(148,163,184,.18), rgba(148,163,184,.18))}
body.theme-dark .tre-divider:hover::before{background:rgba(96,165,250,.55)}
body.theme-dark .tre-divider.tre-divider-selected{background:rgba(59,130,246,.12); box-shadow:inset 0 0 0 1px rgba(96,165,250,.26)}
body.theme-dark .tre-divider.tre-divider-selected::before{background:rgba(147,197,253,.88)}
body.theme-dark .tre-fs-appmenu-overlay{background:rgba(2,6,23,.58)}
body.theme-dark .tre-editor .tre-img.tre-img--stroke,body.theme-dark .tre-render .tre-img.tre-img--stroke{border-color:rgba(148,163,184,.22); box-shadow:0 0 0 1px rgba(15,23,42,.58), var(--shadow2)}
body.theme-dark .tre-editor p:hover,body.theme-dark .tre-editor h1:hover,body.theme-dark .tre-editor h2:hover,body.theme-dark .tre-editor h3:hover,body.theme-dark .tre-editor h4:hover,body.theme-dark .tre-editor h5:hover,body.theme-dark .tre-editor h6:hover,body.theme-dark .tre-editor blockquote:hover,body.theme-dark .tre-editor pre:hover,body.theme-dark .tre-editor details:hover,body.theme-dark .tre-editor .tre-spoiler:hover,body.theme-dark .tre-editor .tre-audio:hover,body.theme-dark .tre-editor .tre-chart:hover,body.theme-dark .tre-editor .tre-alink:hover,body.theme-dark .tre-editor .tre-embed:hover,body.theme-dark .tre-editor ul:hover,body.theme-dark .tre-editor ol:hover{box-shadow:0 0 0 1px rgba(96,165,250,.24), 0 14px 30px rgba(0,0,0,.22)}
body.theme-dark .tre-editor img:hover,body.theme-dark .tre-editor .tre-img:hover{outline:2px solid rgba(96,165,250,.26); box-shadow:0 0 0 2px rgba(96,165,250,.18), var(--shadow2)}
body.theme-dark .tre-editor table:hover,body.theme-dark .tre-editor .tre-table:hover{outline:2px solid rgba(96,165,250,.22); box-shadow:0 14px 32px rgba(0,0,0,.24)}


.modal.article-edit-modal{width:80vw !important; min-width:min(80vw, calc(100vw - 24px)) !important; height:80vh !important; max-width:calc(100vw - 24px) !important; max-height:calc(100vh - 24px) !important; display:flex; flex-direction:column; overflow:hidden}
.modal.article-edit-modal .modal-body{flex:1; min-height:0; overflow:auto}
.modal.article-edit-modal .modal-body > [data-modal-body]{width:100%}
.modal.article-edit-modal form[data-form], .modal.article-edit-modal .form, .modal.article-edit-modal .form-grid{width:100%}

@media (max-width: 1180px){
  .articles-wall .articles-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .articles-wall .articles-grid.articles-groups-stack{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  .articles-head{flex-direction:column; align-items:stretch}
  .articles-head-right{justify-content:flex-start}
  .articles-search{width:100%; max-width:none}
  .articles-select{min-width:0; width:100%}
  .articles-wall .articles-grid{grid-template-columns:minmax(0,1fr)}
  .articles-toolbar{align-items:stretch}
  .articles-pager{justify-content:flex-start}
  .articles-group{padding:12px}
}


/* Files Control Center */
.files-ctrl-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:14px;
}
.files-ctrl-kpis{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.files-ctrl-kpi{
  border:1px solid var(--line-1);
  background:var(--panel-1);
  border-radius:14px;
  padding:12px;
}
.files-ctrl-kpi-v{
  font-size:20px;
  font-weight:800;
  line-height:1.15;
}
.files-ctrl-kpi-k{
  margin-top:4px;
  color:var(--text-2);
  font-size:12px;
}
.files-ctrl-bars{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}
.files-ctrl-bar-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.files-ctrl-bar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.files-ctrl-bar-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.files-ctrl-bar-value{
  color:var(--text-2);
  font-size:12px;
  white-space:nowrap;
}
.files-ctrl-bar-track{
  height:10px;
  border-radius:999px;
  background:var(--bg-2);
  border:1px solid var(--line-1);
  overflow:hidden;
}
.files-ctrl-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, white));
}
.files-ctrl-kv{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:8px 12px;
}
.files-ctrl-kv .k{
  color:var(--text-2);
  font-weight:700;
}
.files-ctrl-kv .v{
  min-width:0;
  overflow-wrap:anywhere;
  font-weight:700;
}
.files-ctrl-modal-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:14px 0;
}
.files-ctrl-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.simple-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
.simple-table th,
.simple-table td{
  border-top:1px solid var(--line-1);
  padding:8px 10px;
  text-align:left;
  vertical-align:top;
}
.simple-table th{
  color:var(--text-2);
  font-size:12px;
  font-weight:800;
}
@media (max-width: 1200px){
  .files-ctrl-grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .files-ctrl-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .files-ctrl-modal-grid{ grid-template-columns:1fr; }
  .files-ctrl-kv{ grid-template-columns:1fr; }
}


/* Sidebar / tabs drag-drop affordances */
.nav-cat-row[draggable="true"],
.nav-tree-row[draggable="true"] .nav-link,
.tab[draggable="true"] { cursor: grab; }
.nav-cat-row.is-dragging,
.nav-tree-row.is-dragging,
.tab.is-dragging { opacity: .55; }
.nav-cat-row.is-drag-over .nav-link,
.nav-tree-row.is-drag-over .nav-link,
.tab.is-drag-over { outline: 1px dashed var(--line, #94a3b8); outline-offset: 2px; }


/* UX polish: prevent accidental text selection in structural/chrome elements */
.topbar,
.topbar *,
.sidebar,
.sidebar *,
.dropdown-menu,
.dropdown-menu .dropdown-head,
.dropdown-menu .dropdown-item,
.btn,
.btn *,
.tab,
.tab *,
.tab-nav-btn,
.tab-nav-btn *,
.st-tab-btn,
.st-tab-btn *,
.page-title,
.page-title *,
.table th,
.simple-table th,
.nav-link,
.nav-link *,
.nav-expander,
.nav-expander *,
.user-menu-btn,
.user-menu-btn *,
[data-action="toggleSidebar"],
[data-action="toggleSidebar"] *,
[data-tab],
[data-tab] *,
.dropdown-menu,
.dropdown-menu *:not(input):not(textarea):not(select):not(option),
.ti-select-menu,
.ti-select-menu *,
.ti-suggest-menu,
.ti-suggest-menu *,
.article-card,
.article-card *,
.cmt-item,
.cmt-item *,
[data-file-row],
[data-file-row] *,
.nav-tree-row,
.nav-tree-row *{
  -webkit-user-select:none;
  user-select:none;
}

/* Keep content editable/selectable where text interaction is expected. */
input,
textarea,
select,
option,
[contenteditable="true"],
[contenteditable=""],
.cp-input,
.st-input,
.st-extfilters .input,
.smart-input,
label input,
label textarea,
label select,
.dropdown-menu input,
.dropdown-menu textarea,
.dropdown-menu select{
  -webkit-user-select:text;
  user-select:text;
}

/* Global context menu */
.talpie-ctx{
  position:fixed;
  left:0;
  top:0;
  min-width:260px;
  max-width:min(340px, calc(100vw - 20px));
  padding:6px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(15,23,42,.22);
  z-index:1200;
  opacity:0;
  transform:translateY(6px) scale(.98);
  pointer-events:none;
  transition:opacity 140ms ease, transform 140ms ease;
}
.talpie-ctx.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.talpie-ctx-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 8px 6px;
}
.talpie-ctx-title{display:flex; align-items:center; gap:8px; min-width:0; font-weight:700;}
.talpie-ctx-title img{width:15px; height:15px; opacity:.9;}
.talpie-ctx-title span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.talpie-ctx-hint{font-size:11px; color:var(--muted2); white-space:nowrap;}
.talpie-ctx-list{display:flex; flex-direction:column; gap:2px;}
.talpie-ctx-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  font:inherit;
  font-weight:900;
  -webkit-user-select:none;
  user-select:none;
}
.talpie-ctx-item:hover,
.talpie-ctx-item.is-active{background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.14);}
.talpie-ctx-item.danger:hover{background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.16);}
.talpie-ctx-item[disabled]{opacity:.48; cursor:not-allowed; background:transparent; border-color:transparent;}
.talpie-ctx-item-main{display:flex; align-items:center; gap:8px; min-width:0;}
.talpie-ctx-item-main img{width:16px; height:16px; opacity:.92; flex:0 0 auto;}
.talpie-ctx-item-copy{display:flex; flex-direction:column; gap:2px; min-width:0;}
.talpie-ctx-item-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.talpie-ctx-item-desc{font-size:11px; color:var(--muted2); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.talpie-ctx-item-kbd{font-size:11px; color:var(--muted2); white-space:nowrap;}
.talpie-ctx-sep{height:1px; margin:6px 4px; background:rgba(15,23,42,.08);}
body.theme-dark .talpie-ctx{
  background:rgba(9,14,24,.88);
  border-color:rgba(148,163,184,.16);
  box-shadow:0 24px 70px rgba(2,6,23,.52);
}
body.theme-dark .talpie-ctx-item:hover,
body.theme-dark .talpie-ctx-item.is-active{background:rgba(88,140,255,.16); border-color:rgba(88,140,255,.24);}
body.theme-dark .talpie-ctx-item.danger:hover{background:rgba(220,38,38,.14); border-color:rgba(220,38,38,.22);}
body.theme-dark .talpie-ctx-sep{background:rgba(148,163,184,.12);}


/* SupportDesk iteration 1 polish */
.sd-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid transparent; font-size:12px; font-weight:800; letter-spacing:.02em; line-height:1; white-space:nowrap; }
.sd-ticket-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.sd-ticket-titleline{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px;}
.sd-ticket-actions{display:flex; gap:8px; flex-wrap:wrap;}
.sd-ticket-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; align-items:start; margin-top:14px;}
.sd-ticket-main{min-width:0;}
.sd-ticket-side{display:flex; flex-direction:column; gap:14px; min-width:0;}
.sd-ticket-info-grid{display:grid; grid-template-columns:120px minmax(0,1fr); gap:8px 10px;}
.sd-pill::before{ content:""; width:8px; height:8px; border-radius:999px; background:currentColor; opacity:.78; box-shadow:0 0 0 2px rgba(255,255,255,.72); }
.sd-pill-status.is-new{ color:#1d4ed8; background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.20); }
.sd-pill-status.is-open{ color:#155e75; background:rgba(6,182,212,.11); border-color:rgba(6,182,212,.24); }
.sd-pill-status.is-waiting-support{ color:#92400e; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.24); }
.sd-pill-status.is-waiting-customer{ color:#7c2d12; background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.24); }
.sd-pill-status.is-progress{ color:#5b21b6; background:rgba(139,92,246,.11); border-color:rgba(139,92,246,.22); }
.sd-pill-status.is-resolved{ color:#166534; background:rgba(34,197,94,.11); border-color:rgba(34,197,94,.23); }
.sd-pill-status.is-closed{ color:#475569; background:rgba(100,116,139,.12); border-color:rgba(100,116,139,.22); }
.sd-pill-status.is-reopened{ color:#9f1239; background:rgba(244,63,94,.11); border-color:rgba(244,63,94,.22); }
.sd-pill-resolution.is-fixed{ color:#166534; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.20); }
.sd-pill-resolution.is-workaround{ color:#1d4ed8; background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.22); }
.sd-pill-resolution.is-info{ color:#155e75; background:rgba(6,182,212,.10); border-color:rgba(6,182,212,.22); }
.sd-pill-resolution.is-duplicate{ color:#6d28d9; background:rgba(139,92,246,.10); border-color:rgba(139,92,246,.22); }
.sd-pill-resolution.is-invalid{ color:#9a3412; background:rgba(251,146,60,.10); border-color:rgba(251,146,60,.22); }
.sd-pill-resolution.is-noresponse{ color:#7c2d12; background:rgba(249,115,22,.10); border-color:rgba(249,115,22,.22); }
.sd-pill-resolution.is-unresolved,
.sd-pill-resolution.is-generic{ color:#475569; background:rgba(100,116,139,.10); border-color:rgba(100,116,139,.20); }
.sd-pill-lite{ display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:999px; border:1px solid transparent; font-size:11px; font-weight:800; line-height:1; }
.sd-pill-lite::before{ content:""; width:7px; height:7px; border-radius:999px; background:currentColor; opacity:.78; }
.sd-pill-lite.is-reply{ color:#166534; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.22); }
.sd-pill-lite.is-note{ color:#7c3aed; background:rgba(139,92,246,.10); border-color:rgba(139,92,246,.22); }
.sd-pill-lite.is-system{ color:#1d4ed8; background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.22); }
.sd-message{ position:relative; overflow:hidden; }
.sd-message::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; opacity:.95; }
.sd-message-reply::before{ background:linear-gradient(180deg, rgba(34,197,94,.88), rgba(22,163,74,.58)); }
.sd-message-note::before{ background:linear-gradient(180deg, rgba(139,92,246,.88), rgba(124,58,237,.58)); }
.sd-message-system::before{ background:linear-gradient(180deg, rgba(59,130,246,.88), rgba(37,99,235,.58)); }
body.theme-dark .sd-pill::before,
body.theme-dark .sd-pill-lite::before{ box-shadow:none; }
body.theme-dark .sd-pill-status.is-new{ color:#93c5fd; background:rgba(59,130,246,.16); border-color:rgba(96,165,250,.28); }
body.theme-dark .sd-pill-status.is-open{ color:#67e8f9; background:rgba(8,145,178,.18); border-color:rgba(34,211,238,.26); }
body.theme-dark .sd-pill-status.is-waiting-support{ color:#fcd34d; background:rgba(245,158,11,.18); border-color:rgba(251,191,36,.28); }
body.theme-dark .sd-pill-status.is-waiting-customer{ color:#fdba74; background:rgba(249,115,22,.18); border-color:rgba(251,146,60,.28); }
body.theme-dark .sd-pill-status.is-progress{ color:#c4b5fd; background:rgba(124,58,237,.18); border-color:rgba(167,139,250,.28); }
body.theme-dark .sd-pill-status.is-resolved{ color:#86efac; background:rgba(22,163,74,.18); border-color:rgba(74,222,128,.28); }
body.theme-dark .sd-pill-status.is-closed,
body.theme-dark .sd-pill-resolution.is-unresolved,
body.theme-dark .sd-pill-resolution.is-generic{ color:#cbd5e1; background:rgba(100,116,139,.18); border-color:rgba(148,163,184,.28); }
body.theme-dark .sd-pill-status.is-reopened{ color:#fda4af; background:rgba(244,63,94,.18); border-color:rgba(251,113,133,.28); }
body.theme-dark .sd-pill-resolution.is-fixed{ color:#86efac; background:rgba(22,163,74,.18); border-color:rgba(74,222,128,.28); }
body.theme-dark .sd-pill-resolution.is-workaround{ color:#93c5fd; background:rgba(59,130,246,.18); border-color:rgba(96,165,250,.28); }
body.theme-dark .sd-pill-resolution.is-info{ color:#67e8f9; background:rgba(8,145,178,.18); border-color:rgba(34,211,238,.28); }
body.theme-dark .sd-pill-resolution.is-duplicate{ color:#c4b5fd; background:rgba(124,58,237,.18); border-color:rgba(167,139,250,.28); }
body.theme-dark .sd-pill-resolution.is-invalid{ color:#fdba74; background:rgba(249,115,22,.18); border-color:rgba(251,146,60,.28); }
body.theme-dark .sd-pill-resolution.is-noresponse{ color:#fdba74; background:rgba(234,88,12,.18); border-color:rgba(251,146,60,.28); }
body.theme-dark .sd-pill-lite.is-reply{ color:#86efac; background:rgba(22,163,74,.18); border-color:rgba(74,222,128,.28); }
body.theme-dark .sd-pill-lite.is-note{ color:#c4b5fd; background:rgba(124,58,237,.18); border-color:rgba(167,139,250,.28); }
body.theme-dark .sd-pill-lite.is-system{ color:#93c5fd; background:rgba(59,130,246,.18); border-color:rgba(96,165,250,.28); }


body.theme-dark .mobile-route-header{background:rgba(9,12,18,.86); border-color:var(--border2); box-shadow:0 10px 28px rgba(0,0,0,.28)}
body.theme-dark .mobile-route-chip{background:rgba(88,140,255,.14); border-color:rgba(88,140,255,.24)}
body.theme-dark .mobile-dock{background:rgba(9,12,18,.90); border-color:var(--border2); box-shadow:0 18px 42px rgba(0,0,0,.36)}
body.theme-dark .mobile-dock-btn--home{background:rgba(88,140,255,.14)}
body.theme-dark .mobile-tabs-sheet__panel{background:rgba(9,12,18,.94); border-color:var(--border2); box-shadow:0 26px 60px rgba(0,0,0,.42)}
body.theme-dark .mobile-tab-item{background:rgba(15,23,42,.78); border-color:var(--border2)}
body.theme-dark .mobile-tab-item.is-active{background:linear-gradient(90deg, rgba(88,140,255,.20), rgba(139,92,246,.18)); border-color:rgba(88,140,255,.32)}


/* --- Ultimate mobile polish (shell + modules) --- */
body.mobile-shell-active .mobile-route-header{display:none !important}
body.mobile-shell-active .shell > .sidebar{
  position:fixed;
  left:8px;
  right:8px;
  top:calc(var(--topbarPx, 60px) + 8px + env(safe-area-inset-top));
  bottom:calc(92px + env(safe-area-inset-bottom));
  height:auto !important;
  width:auto !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:10px;
  transform:translateX(-108%) scale(.985);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:31;
  overflow:auto;
}
body.mobile-shell-active.sidebar-open .shell > .sidebar{
  transform:translateX(0) scale(1);
  opacity:.99;
  visibility:visible;
  pointer-events:auto;
}
body.mobile-shell-active .sidebar-overlay{
  display:block;
  opacity:0;
  pointer-events:none;
}
body.mobile-shell-active.sidebar-open .sidebar-overlay{
  opacity:1;
  pointer-events:auto;
}
body.mobile-shell-active .shell{padding:8px 6px calc(112px + env(safe-area-inset-bottom))}
body.mobile-shell-active .main{padding-bottom:124px; overflow:auto}
body.mobile-shell-active .shell > .sidebar{
  top:calc(var(--topbarPx, 60px) + 8px + env(safe-area-inset-top));
  bottom:calc(92px + env(safe-area-inset-bottom));
  padding:8px;
  border-radius:10px;
}
body.mobile-shell-active .sidebar-mobile-head{padding:6px 10px 0}
body.mobile-shell-active .shell > .sidebar .sidebar-search{padding:8px 8px 6px}
body.mobile-shell-active .shell > .sidebar .nav{gap:1px}
body.mobile-shell-active .shell > .sidebar .nav-label{padding:6px 10px 2px}
body.mobile-shell-active .shell > .sidebar .nav-link{padding:3px 8px; border-radius:14px}
body.mobile-shell-active .shell > .sidebar .nav-link.nav-cat{padding:4px 8px}
body.mobile-shell-active .shell > .sidebar .nav-expander,
body.mobile-shell-active .shell > .sidebar .nav-caret,
body.mobile-shell-active .shell > .sidebar .nav-expander-spacer{width:26px; height:26px}
body.mobile-shell-active .shell > .sidebar .sidebar-foot{padding:8px 4px 0; margin-top:8px}
body.mobile-shell-active .card{border-radius:24px}
body.mobile-shell-active .page > .card{border-radius:26px}
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen) .st-table-wrap,
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen) .st-top,
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen) .st-panels,
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen) .st-summary-subcard{border-radius:20px}
body.mobile-shell-active .topbar{padding-inline:10px}
body.mobile-shell-active .top-actions{margin-left:auto; gap:8px}
body.mobile-shell-active .top-actions .notify-menu-btn,
body.mobile-shell-active .top-actions .user-menu-btn{min-width:40px; min-height:40px; padding:8px 10px; border-radius:14px}
body.mobile-shell-active .top-actions .user-caret{display:none}
body.mobile-shell-active .top-actions .notify-dropdown{right:0; min-width:min(92vw, 360px)}
body.mobile-shell-active .top-actions,
body.mobile-shell-active .top-actions .notify-menu,
body.mobile-shell-active .top-actions .notify-menu-btn,
body.mobile-shell-active .top-actions .top-notify{overflow:visible}
body.mobile-shell-active .top-actions .top-badge,
body.mobile-shell-active .top-actions .notify-menu > .top-badge{top:-10px; right:-10px}
body.mobile-shell-active .tabs > .tab-bar-wrap,
body.mobile-shell-active .tabs > .tab-bar,
body.mobile-shell-active .tab-bar-wrap,
body.mobile-shell-active .tab-bar{display:none !important}
body.mobile-shell-active .tab-panels{padding:8px 0 0}
body.mobile-shell-active .page,
body.mobile-shell-active .tab-panel,
body.mobile-shell-active .card,
body.mobile-shell-active .card-body,
body.mobile-shell-active .page-head,
body.mobile-shell-active .page-header,
body.mobile-shell-active .row,
body.mobile-shell-active .grid{min-width:0}
body.mobile-shell-active .page-head,
body.mobile-shell-active .page-header{gap:10px !important}
body.mobile-shell-active .page .grid{grid-template-columns:1fr !important}
body.mobile-shell-active .card{padding:14px}
body.mobile-shell-active .card-body{padding:0}
body.mobile-shell-active .page > .card{border-radius:22px}
body.mobile-shell-active .page .row{flex-wrap:wrap}
body.mobile-shell-active [data-supportdesk-desk-intro]{grid-template-columns:1fr !important; gap:10px !important; margin-bottom:10px !important}
body.mobile-shell-active [data-page-id="supportdesk_desk"] > .card > .card-body{padding:12px}
body.mobile-shell-active .sd-ticket-head{gap:10px}
body.mobile-shell-active .sd-ticket-actions{width:100%}
body.mobile-shell-active .sd-ticket-actions .btn{flex:1 1 calc(50% - 8px); justify-content:center; min-width:0}
body.mobile-shell-active .sd-ticket-layout{grid-template-columns:1fr !important; gap:12px !important}
body.mobile-shell-active .sd-ticket-side{order:-1}
body.mobile-shell-active .sd-ticket-info-grid{grid-template-columns:1fr !important; gap:6px !important}
body.mobile-shell-active [data-support-ticket-root] .card{border-radius:22px}
body.mobile-shell-active [data-support-ticket-root] [data-hydrate="filesAttachments"]{min-width:0}

/* Generic mobile/tablet modal feel */
body.mobile-shell-active .modal-layer{align-items:flex-end; padding:6px}
body.mobile-shell-active .modal{
  width:calc(100vw - 12px) !important;
  max-width:none !important;
  max-height:calc(100vh - 12px) !important;
  border-radius:24px 24px 18px 18px;
}
body.mobile-shell-active .modal.confirm{width:min(calc(100vw - 12px), 560px) !important}
body.mobile-shell-active .modal-header{padding:14px 14px 12px}
body.mobile-shell-active .modal-body{padding:12px !important; max-height:calc(100vh - 140px); overflow:auto}
body.mobile-shell-active .modal-footer{padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
body.mobile-shell-active .modal .form-grid{grid-template-columns:1fr !important}
body.mobile-shell-active .modal.richtext-modal,
body.mobile-shell-active .modal.article-edit-modal,
body.mobile-shell-active .modal.msg-modal{
  width:calc(100vw - 10px) !important;
  min-width:0 !important;
  max-width:none !important;
  height:calc(100vh - 10px) !important;
  max-height:none !important;
}

/* Messaging: true mobile master/detail feel */
body.mobile-shell-active .page[data-page-id="messages"]{margin:0; padding:0; overflow:hidden}
body.mobile-shell-active .page[data-page-id="messages"] .page-head{padding:0 2px 8px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-host{
  width:calc(100vw - 12px);
  margin-left:calc(50% - 50vw + 6px);
  margin-right:calc(50% - 50vw + 6px);
}
body.mobile-shell-active .modal.msg-modal .msg-host{width:100%; margin:0}
body.mobile-shell-active .page[data-page-id="messages"] .msg,
body.mobile-shell-active .modal.msg-modal .msg{
  flex-direction:column;
  gap:0;
  height:100%;
  min-height:calc(100vh - var(--topbarPx, 60px) - 156px);
  border-radius:10px;
  overflow:hidden;
}
body.mobile-shell-active .page[data-page-id="messages"] .msg-sidebar,
body.mobile-shell-active .modal.msg-modal .msg-sidebar{
  width:100%;
  min-width:0;
  max-height:min(34vh, 320px);
  border-right:0;
  border-bottom:1px solid var(--line-1);
}
body.mobile-shell-active .page[data-page-id="messages"] .msg.msg-menu-closed .msg-sidebar,
body.mobile-shell-active .page[data-page-id="messages"] .msg-host.msg-menu-closed .msg-sidebar,
body.mobile-shell-active .page[data-page-id="messages"] .msg-host.msg-fs-menu-closed .msg-sidebar,
body.mobile-shell-active .modal.msg-modal .msg.msg-menu-closed .msg-sidebar,
body.mobile-shell-active .modal.msg-modal .msg-host.msg-menu-closed .msg-sidebar,
body.mobile-shell-active .modal.msg-modal .msg-host.msg-fs-menu-closed .msg-sidebar{display:none}
body.mobile-shell-active .page[data-page-id="messages"] .msg-main,
body.mobile-shell-active .modal.msg-modal .msg-main{min-height:0; flex:1 1 auto}
body.mobile-shell-active .page[data-page-id="messages"] .msg-main-head,
body.mobile-shell-active .modal.msg-modal .msg-main-head{
  position:sticky;
  top:0;
  z-index:2;
  padding:10px;
  gap:8px;
  align-items:flex-start;
  flex-wrap:wrap;
}
body.mobile-shell-active .page[data-page-id="messages"] .msg-main-title,
body.mobile-shell-active .modal.msg-modal .msg-main-title{flex:1 1 auto; min-width:0}
body.mobile-shell-active .page[data-page-id="messages"] .msg-head-title,
body.mobile-shell-active .modal.msg-modal .msg-head-title{font-size:14px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-head-sub,
body.mobile-shell-active .modal.msg-modal .msg-head-sub{font-size:10px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-head-actions-wrap,
body.mobile-shell-active .modal.msg-modal .msg-head-actions-wrap{width:100%; order:3}
body.mobile-shell-active .page[data-page-id="messages"] .msg-head-actions-fixed,
body.mobile-shell-active .modal.msg-modal .msg-head-actions-fixed{flex:0 0 auto; position:sticky; left:0; z-index:2; padding-right:2px; background:transparent}
body.mobile-shell-active .page[data-page-id="messages"] .msg-head-actions,
body.mobile-shell-active .modal.msg-modal .msg-head-actions{gap:6px; padding-bottom:2px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-head-actions .btn,
body.mobile-shell-active .modal.msg-modal .msg-head-actions .btn{min-width:38px; min-height:38px; padding:8px 10px; border-radius:14px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-main-head [data-msg-fs],
body.mobile-shell-active .page[data-page-id="messages"] .msg-main-head [data-msg-appmenu],
body.mobile-shell-active .modal.msg-modal .msg-main-head [data-msg-fs],
body.mobile-shell-active .modal.msg-modal .msg-main-head [data-msg-appmenu]{display:none !important}
body.mobile-shell-active .page[data-page-id="messages"] .msg-main-body,
body.mobile-shell-active .modal.msg-modal .msg-main-body{padding:10px 10px 8px; overscroll-behavior:contain}
body.mobile-shell-active .page[data-page-id="messages"] .msg-body-inner,
body.mobile-shell-active .modal.msg-modal .msg-body-inner{gap:8px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-bubble,
body.mobile-shell-active .modal.msg-modal .msg-bubble{max-width:94%; min-width:0; padding:10px 11px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-text,
body.mobile-shell-active .modal.msg-modal .msg-text{font-size:13px; line-height:1.42; word-break:break-word}
body.mobile-shell-active .page[data-page-id="messages"] .msg-compose,
body.mobile-shell-active .modal.msg-modal .msg-compose{
  position:sticky;
  bottom:0;
  z-index:2;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  gap:8px;
  background:var(--surface-1);
}
body.mobile-shell-active .page[data-page-id="messages"] .msg-input,
body.mobile-shell-active .modal.msg-modal .msg-input{min-height:44px; max-height:132px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-compose .btn,
body.mobile-shell-active .modal.msg-modal .msg-compose .btn{flex:0 0 auto; min-height:44px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-empty,
body.mobile-shell-active .modal.msg-modal .msg-empty{min-height:180px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-sidebar-head,
body.mobile-shell-active .page[data-page-id="messages"] .msg-sidebar-search,
body.mobile-shell-active .modal.msg-modal .msg-sidebar-head,
body.mobile-shell-active .modal.msg-modal .msg-sidebar-search{padding-inline:10px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-list,
body.mobile-shell-active .modal.msg-modal .msg-list{padding:8px 10px 12px}
body.mobile-shell-active .page[data-page-id="messages"] .msg-ch,
body.mobile-shell-active .page[data-page-id="messages"] .msg-invite,
body.mobile-shell-active .modal.msg-modal .msg-ch,
body.mobile-shell-active .modal.msg-modal .msg-invite{border-radius:16px}
body.mobile-shell-active .msg-main-body,
body.mobile-shell-active .msg-list,
body.mobile-shell-active .modal-body,
body.mobile-shell-active .card,
body.mobile-shell-active .tab-panel{overscroll-behavior:contain}

/* Slightly stronger full-width treatment for mobile tables inside cards */
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen){margin-inline:0}
body.mobile-shell-active .shell .main .st-root:not(.st-fullscreen) .st-table-wrap{border-radius:18px}
/* ============================================================
   TALPIE ANIMATION SYSTEM — blask i połysk ✨
   Enhanced transitions, spinners, loading states, micro-interactions
   ============================================================ */

/* ─── Page Content Entrance ─── */
@keyframes contentIn {
  from { opacity: 0; transform: translateY(8px) scale(.997); }
  to   { opacity: 1; transform: none; }
}
#app-content.content-in {
  animation: contentIn .22s cubic-bezier(.22,1,.36,1) both;
}

/* ─── Universal Spinner (used by loading placeholders in loadPage / tabsAcl) ─── */
.spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(37,99,235,.15);
  border-top-color: rgba(37,99,235,.72);
  border-radius: 999px;
  animation: talpieSpinFast .7s linear infinite;
}
@keyframes talpieSpinFast { to { transform: rotate(360deg); } }

/* ─── Pulse ring variant for heavy operations ─── */
.spinner-lg {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(37,99,235,.12);
  border-top-color: rgba(37,99,235,.65);
  border-right-color: rgba(124,58,237,.40);
  border-radius: 999px;
  animation: talpieSpinFast .85s cubic-bezier(.6,0,.4,1) infinite;
}

/* ─── Enhanced SmartTable loading overlay ─── */
.st-loading {
  backdrop-filter: blur(4px) saturate(1.4);
  background: rgba(255,255,255,.52);
  transition: opacity .16s ease;
}
.st-spinner {
  width: 26px;
  height: 26px;
  border-width: 3px;
  border-color: rgba(37,99,235,.13);
  border-top-color: rgba(37,99,235,.70);
  animation: stspin .75s linear infinite;
}

/* ─── AJAX bar — gradient shimmer ─── */
#ajax-bar .inner {
  background: linear-gradient(90deg,
    rgba(37,99,235,.0) 0%,
    rgba(37,99,235,.95) 30%,
    rgba(124,58,237,.90) 60%,
    rgba(236,72,153,.70) 85%,
    rgba(37,99,235,.0) 100%
  );
  animation: bar 1.2s ease-in-out infinite;
}
@keyframes bar {
  0%   { transform: translateX(-120%) scaleX(.8); }
  100% { transform: translateX(420%)  scaleX(1.1); }
}

/* ─── Tab panel fade-in on activation ─── */
.tab-panel {
  animation: none;
}
.tab-panel.tab-panel-in {
  animation: tabPanelIn .18s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tabPanelIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Card entrance (used on dynamic load) ─── */
.card-in {
  animation: cardIn .20s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px) scale(.997); }
  to   { opacity: 1; transform: none; }
}

/* ─── Panel section entrance (for panels loaded via data-load-url) ─── */
.panel-loaded {
  animation: panelLoaded .24s cubic-bezier(.22,1,.36,1) both;
}
@keyframes panelLoaded {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Loading card (page placeholder) ─── */
.talpie-loading-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: cardIn .18s ease-out both;
}
.talpie-loading-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.talpie-loading-pulse {
  animation: loadPulse 1.5s ease-in-out infinite;
}
@keyframes loadPulse {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1; }
}

/* ─── Skeleton shimmer blocks ─── */
.skel {
  border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(15,23,42,.06) 0%,
    rgba(15,23,42,.12) 40%,
    rgba(15,23,42,.06) 80%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.6s ease-in-out infinite;
}
@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-line  { height: 12px; border-radius: 6px; }
.skel-title { height: 18px; border-radius: 8px; }
.skel-block { height: 60px; border-radius: 12px; }
.skel-avatar{ width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skel-btn   { height: 32px; width: 80px; border-radius: 10px; }

/* ─── Staggered skeleton rows (tab/panel loading state) ─── */
.skel-row { display: flex; align-items: center; gap: 10px; }
.skel-rows { display: flex; flex-direction: column; gap: 10px; }
.skel-rows .skel:nth-child(1) { animation-delay:  0ms; }
.skel-rows .skel:nth-child(2) { animation-delay: 80ms; }
.skel-rows .skel:nth-child(3) { animation-delay:160ms; }
.skel-rows .skel:nth-child(4) { animation-delay:240ms; }
.skel-rows .skel:nth-child(5) { animation-delay:320ms; }

/* ─── Nav link hover enhancement ─── */
.nav-link {
  transition: background .12s ease, border-color .12s ease,
              box-shadow .12s ease, transform .10s cubic-bezier(.22,1,.36,1),
              opacity .10s ease;
}
.nav-link:hover {
  transform: translateX(2px);
}
.nav-link.active {
  transform: none;
}

/* ─── Nav expand/collapse spring easing (inline override in JS uses .18s ease;
       we improve the CSS default here too so any non-animated update looks better) ─── */
.nav-children {
  transition: max-height .22s cubic-bezier(.22,1,.36,1),
              opacity .20s ease,
              transform .20s cubic-bezier(.22,1,.36,1);
  transform-origin: top center;
}
.nav-children.is-animating {
  overflow: hidden;
  transform-origin: top center;
}

/* ─── Nav expander icon spring rotation ─── */
.nav-expander-ico, .nav-caret-ico {
  transition: transform .20s cubic-bezier(.34,1.56,.64,1), opacity .12s ease;
}
.nav-tree-row.is-collapsed .nav-expander-ico,
.nav-tree-row.is-collapsed .nav-caret-ico {
  transform: rotate(-90deg);
}

/* ─── Tab hover & active micro-animation ─── */
.tab {
  transition: transform .10s cubic-bezier(.22,1,.36,1),
              background .12s ease, border-color .14s ease,
              box-shadow .14s ease, color .12s ease;
}
.tab:hover {
  transform: translateY(-2px);
}
.tab.active {
  transform: translateY(0);
}
.tab:active {
  transform: translateY(0) scale(.98);
}

/* ─── Button press micro-animation ─── */
.btn {
  transition: transform .07s cubic-bezier(.22,1,.36,1), box-shadow .12s ease,
              background .10s ease, border-color .10s ease, opacity .10s ease;
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(2,6,23,.10); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

/* ─── Dash tile hover ─── */
.dash-tile {
  transition: transform .12s cubic-bezier(.22,1,.36,1),
              box-shadow .16s ease, border-color .16s ease;
}
.dash-tile:hover {
  transform: translateY(-2px) scale(1.005);
}

/* ─── Article card ─── */
.article-card {
  transition: transform .13s cubic-bezier(.22,1,.36,1), box-shadow .16s ease;
}
.article-card:hover {
  transform: translateY(-3px);
}

/* ─── Modal spring entrance ─── */
.modal {
  transition: transform .26s cubic-bezier(.34,1.30,.64,1), opacity .20s ease;
}
.modal-layer {
  transition: opacity .22s ease;
}

/* ─── Toast spring entrance ─── */
@keyframes toastIn {
  from { transform: translateY(-12px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.toast.in {
  animation: toastIn .22s cubic-bezier(.34,1.30,.64,1) both;
}

/* ─── SmartTable row entrance animation ─── */
.st-tr.st-row-in {
  animation: stRowIn .16s cubic-bezier(.22,1,.36,1) both;
}
@keyframes stRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
/* Stagger rows */
.st-tr:nth-child(1)  { animation-delay:  0ms; }
.st-tr:nth-child(2)  { animation-delay: 18ms; }
.st-tr:nth-child(3)  { animation-delay: 36ms; }
.st-tr:nth-child(4)  { animation-delay: 54ms; }
.st-tr:nth-child(5)  { animation-delay: 72ms; }
.st-tr:nth-child(6)  { animation-delay: 88ms; }
.st-tr:nth-child(7)  { animation-delay:104ms; }
.st-tr:nth-child(8)  { animation-delay:118ms; }
.st-tr:nth-child(9)  { animation-delay:130ms; }
.st-tr:nth-child(10) { animation-delay:140ms; }

/* ─── Form fields focus animation ─── */
.ti-input, .ti-select, .ti-textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="search"],
input[type="number"], textarea, select {
  transition: border-color .12s ease, box-shadow .14s ease, background .12s ease;
}

/* ─── Sidebar collapse/expand ─── */
.shell > .sidebar {
  transition: max-width 240ms cubic-bezier(.22,1,.36,1),
              opacity 180ms ease,
              transform 240ms cubic-bezier(.22,1,.36,1);
}

/* ─── Context menu spring ─── */
.talpie-ctx {
  transition: opacity .14s ease, transform .16s cubic-bezier(.34,1.20,.64,1);
}

/* ─── Dropdown menus ─── */
.dropdown-menu {
  transition: opacity .14s ease,
              transform .18s cubic-bezier(.34,1.20,.64,1);
}

/* ─── Splash fade ─── */
.splash {
  transition: opacity .28s ease;
}

/* ─── Chart canvas reveal ─── */
.tc-canvas {
  transition: opacity .30s ease, transform .30s cubic-bezier(.22,1,.36,1);
}

/* ─── Dark mode adjustments ─── */
body.theme-dark .skel {
  background: linear-gradient(90deg,
    rgba(148,163,184,.08) 0%,
    rgba(148,163,184,.16) 40%,
    rgba(148,163,184,.08) 80%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.6s ease-in-out infinite;
}
body.theme-dark .spinner {
  border-color: rgba(88,140,255,.16);
  border-top-color: rgba(88,140,255,.72);
}
body.theme-dark .st-spinner {
  border-color: rgba(148,163,184,.20);
  border-top-color: rgba(88,140,255,.72);
}
body.theme-dark .st-loading {
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(4px) saturate(1.2);
}

/* ─── Reduced motion respect ─── */
@media (prefers-reduced-motion: reduce) {
  .msg-list,
  .msg-ch,
  .msg-invite{transition:none !important; filter:none !important;}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/*
 * ═══════════════════════════════════════════════════════════
 *  TALPIE SPA — ENHANCED STYLES v3
 *  Ulepszone style zgodne z oryginalnym design language.
 *  Append to app.css lub dodaj jako osobny <link>.
 * ═══════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────
   0.  TOKENY — LEPSZE CIENIE, BEZ ZMIANY KOLORÓW
   ───────────────────────────────────────────────────── */
:root {
  --shadow:   0 8px 32px rgba(15,23,42,.09), 0 2px 8px rgba(15,23,42,.05);
  --shadow2:  0 4px 18px rgba(15,23,42,.09), 0 1px 4px rgba(15,23,42,.05);
  --shadow3:  0 20px 60px rgba(15,23,42,.12), 0 6px 20px rgba(15,23,42,.07);
}

/* ─────────────────────────────────────────────────────
   1.  TŁO BODY — BOGATSZY GRADIENT MESH
   ───────────────────────────────────────────────────── */
body {
  background:
    radial-gradient(ellipse 1100px 580px at 8%  -8%,  rgba(37,99,235,.15), transparent 56%),
    radial-gradient(ellipse 1000px 600px at 94% -4%,  rgba(124,58,237,.11), transparent 56%),
    radial-gradient(ellipse  700px 600px at 50% 112%, rgba(6,182,212,.06),  transparent 54%),
    linear-gradient(175deg, #f0f4ff 0%, #f6f8fc 55%, #eef1f8 100%) !important;
}

/* Subtelny noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─────────────────────────────────────────────────────
   2.  TOPBAR — SZKŁO + LEPSZA GŁĘBIA
   ───────────────────────────────────────────────────── */
.topbar {
  background: rgba(246,248,252,.82) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.75), 0 2px 16px rgba(15,23,42,.05) !important;
}

/* Logo hover — delikatny spring */
.brand-logo {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.brand-logo:hover {
  transform: scale(1.07) rotate(-2deg);
  box-shadow: 0 8px 22px rgba(37,99,235,.26);
}

/* ─────────────────────────────────────────────────────
   3.  SIDEBAR — SZKŁO DOPASOWANE DO TOPBAR
   ───────────────────────────────────────────────────── */
.sidebar {
  background: rgba(248,250,255,.84) !important;
  backdrop-filter: blur(8px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
  border-right: 1px solid rgba(15,23,42,.07) !important;
  box-shadow: 2px 0 24px rgba(15,23,42,.04) !important;
}

/* Aktywny link — wzmocniony glow, ale ta sama paleta */
.nav-link.active {
  background: linear-gradient(90deg,
    rgba(37,99,235,.13) 0%,
    rgba(124,58,237,.07) 100%) !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  box-shadow: inset 3px 0 0 var(--accent), 0 2px 10px rgba(37,99,235,.09) !important;
}

/* Hover na nieaktywnym linku */
.nav-link:not(.active):hover {
  transform: translateX(3px) !important;
  background: rgba(37,99,235,.05) !important;
}

/* ─────────────────────────────────────────────────────
   4.  PRZYCISK BAZOWY — ZACHOWANA PALETA, LEPSZA FIZYKA
   ───────────────────────────────────────────────────── */
.btn {
  transition:
    transform .08s cubic-bezier(.22,1,.36,1),
    box-shadow .12s ease,
    background .12s ease,
    filter .12s ease,
    border-color .10s ease !important;
}
.btn:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.04) brightness(1.01) !important;
}
.btn:active {
  transform: translateY(1px) scale(.99) !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────
   5.  BTN-PRIMARY — TYLKO WZMOCNIONY, BEZ ZMIANY KOLORU
       Oryginalny: linear-gradient(180deg, rgba(37,99,235,.16), rgba(124,58,237,.10))
       border-color: rgba(37,99,235,.28)
   ───────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(180deg,
    rgba(37,99,235,.20) 0%,
    rgba(124,58,237,.13) 100%) !important;
  border-color: rgba(37,99,235,.34) !important;
  box-shadow:
    0 1px 0 rgba(15,23,42,.06),
    0 10px 24px rgba(37,99,235,.12) !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep — efekt światła przesuwający się przez przycisk */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -90%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.38),
    transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-primary:hover::before { left: 160%; }

.btn-primary:hover {
  background: linear-gradient(180deg,
    rgba(37,99,235,.26) 0%,
    rgba(124,58,237,.18) 100%) !important;
  border-color: rgba(37,99,235,.42) !important;
  box-shadow:
    0 1px 0 rgba(15,23,42,.06),
    0 16px 32px rgba(37,99,235,.16) !important;
}

/* Danger — analogicznie */
.btn.danger,
.btn-ghost.danger {
  position: relative;
  overflow: hidden;
}
.btn.danger:hover,
.btn-ghost.danger:hover {
  box-shadow: 0 8px 22px rgba(220,38,38,.14) !important;
}

/* ─────────────────────────────────────────────────────
   6.  TABY — ORYGINALNE KSZTAŁTY, ULEPSZONE EFEKTY
       Oryginalny border-radius: 14px 14px 0 0  ← zachowane!
   ───────────────────────────────────────────────────── */
.tab {
  /* KSZTAŁT NIEZMIENIONY: 14px 14px 0 0 */
  transition:
    transform .09s cubic-bezier(.22,1,.36,1),
    background .12s ease,
    border-color .12s ease,
    box-shadow .14s ease,
    color .12s ease !important;
}
.tab:hover {
  background: rgba(255,255,255,.88) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(15,23,42,.06),
    0 8px 18px rgba(15,23,42,.08) !important;
}
.tab:active {
  transform: translateY(0) scale(.99) !important;
}
.tab.active {
  /* Oryginalny wygląd + wzmocniony glow */
  background: var(--panel) !important;
  border-color: rgba(37,99,235,.38) !important;
  border-bottom-color: var(--panel) !important;
  box-shadow:
    0 -2px 12px rgba(37,99,235,.08),
    0 10px 24px rgba(2,6,23,.06) !important;
}

/* Tab icon scale on hover */
.tab:hover .tab-ico {
  transform: scale(1.10);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1);
}

/* ─────────────────────────────────────────────────────
   7.  KARTY — GŁĘBSZE SZKŁO, SUBTELNY HOVER LIFT
   ───────────────────────────────────────────────────── */
.card {
  background: rgba(255,255,255,.84) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: var(--shadow3), inset 0 1px 0 rgba(255,255,255,.88) !important;
  transition:
    transform .18s cubic-bezier(.22,1,.36,1),
    box-shadow .20s ease,
    border-color .16s ease !important;
}
.card:hover {
  box-shadow:
    0 22px 64px rgba(15,23,42,.13),
    0 8px 22px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-color: rgba(37,99,235,.15) !important;
}

/* ─────────────────────────────────────────────────────
   8.  INPUTY — PŁYNNY FOCUS RING
   ───────────────────────────────────────────────────── */
.input,
.ti-input,
.ti-select,
.ti-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  transition:
    border-color .13s ease,
    box-shadow .15s ease,
    background .12s ease !important;
}

.input:focus,
.ti-input:focus,
.ti-select:focus,
.ti-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: rgba(37,99,235,.50) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.11),
    0 0 0 1px rgba(37,99,235,.28),
    inset 0 1px 2px rgba(15,23,42,.03) !important;
  outline: none !important;
}

.input:hover:not(:focus),
.ti-input:hover:not(:focus) {
  border-color: rgba(37,99,235,.22) !important;
}

/* Label zmienia kolor gdy pole aktywne */
.field:focus-within .label {
  color: var(--accent) !important;
  transition: color .12s ease;
}

/* ─────────────────────────────────────────────────────
   9.  MODALNE — SPRING ENTRANCE + MOCNIEJSZY BACKDROP
   ───────────────────────────────────────────────────── */
.modal-layer {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  background: rgba(2,6,23,.40) !important;
  transition: opacity .22s ease !important;
}
.modal {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 28px 72px rgba(2,6,23,.24),
    0 10px 28px rgba(2,6,23,.12),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  transition: transform .28s cubic-bezier(.34,1.26,.64,1), opacity .20s ease !important;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-layer:not(.hidden) .modal {
  animation: modalIn .30s cubic-bezier(.34,1.22,.64,1) both;
}

/* ─────────────────────────────────────────────────────
   10. TOASTY — SZKŁO + SPRING WEJŚCIE
   ───────────────────────────────────────────────────── */
.toast {
  background: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(6px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 14px 44px rgba(2,6,23,.18),
    0 4px 14px rgba(2,6,23,.09),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
  border-radius: 18px !important;
}
.toast.in {
  animation: toastInV2 .26s cubic-bezier(.34,1.28,.64,1) both !important;
}
@keyframes toastInV2 {
  from { transform: translateY(18px) scale(.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ─────────────────────────────────────────────────────
   11. DROPDOWN — SZKŁO + SPRING
   ───────────────────────────────────────────────────── */
.dropdown-menu {
  background: rgba(250,252,255,.92) !important;
  backdrop-filter: blur(8px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 18px 50px rgba(2,6,23,.18),
    0 5px 18px rgba(2,6,23,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  border-radius: 18px !important;
  transition: opacity .15s ease, transform .18s cubic-bezier(.34,1.18,.64,1) !important;
}
.dropdown-item {
  border-radius: 12px !important;
  transition: background .10s ease, transform .10s cubic-bezier(.22,1,.36,1) !important;
}
.dropdown-item:hover {
  background: rgba(37,99,235,.07) !important;
  transform: translateX(2px) !important;
}

/* ─────────────────────────────────────────────────────
   12. AJAX BAR — INTENSYWNIEJSZY GRADIENT
   ───────────────────────────────────────────────────── */
#ajax-bar .inner {
  background: linear-gradient(90deg,
    rgba(37,99,235,.0)  0%,
    rgba(37,99,235,.96) 28%,
    rgba(124,58,237,.90) 58%,
    rgba(236,72,153,.80) 82%,
    rgba(37,99,235,.0) 100%) !important;
  filter: drop-shadow(0 0 3px rgba(37,99,235,.55));
  animation: bar .95s ease-in-out infinite !important;
}

/* ─────────────────────────────────────────────────────
   13. SKELETON — SUBTELNY NIEBIESKI SHIMMER
   ───────────────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg,
    rgba(15,23,42,.055) 0%,
    rgba(37,99,235,.075) 42%,
    rgba(15,23,42,.055) 82%) !important;
  background-size: 200% 100%;
  animation: skelShimmer 1.5s ease-in-out infinite;
  border-radius: 9px !important;
}

/* ─────────────────────────────────────────────────────
   14. CONTEXT MENU — SPRING GLASS
   ───────────────────────────────────────────────────── */
.talpie-ctx {
  background: rgba(250,252,255,.93) !important;
  backdrop-filter: blur(8px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 14px 44px rgba(2,6,23,.20),
    0 4px 16px rgba(2,6,23,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  border-radius: 18px !important;
  transition: opacity .13s ease, transform .16s cubic-bezier(.34,1.18,.64,1) !important;
}

/* ─────────────────────────────────────────────────────
   15. DASH TILE — HOVER LIFT
   ───────────────────────────────────────────────────── */
.dash-tile {
  transition:
    transform .18s cubic-bezier(.22,1,.36,1),
    box-shadow .20s ease,
    border-color .16s ease !important;
}
.dash-tile:hover {
  transform: translateY(-3px) scale(1.006) !important;
  box-shadow:
    0 18px 48px rgba(37,99,235,.12),
    0 7px 20px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-color: rgba(37,99,235,.18) !important;
}

/* ─────────────────────────────────────────────────────
   16. ARTICLE CARD — SUBTELNY LIFT
   ───────────────────────────────────────────────────── */
.article-card {
  transition: transform .17s cubic-bezier(.22,1,.36,1), box-shadow .20s ease !important;
}
.article-card:hover {
  transform: translateY(-4px) scale(1.004) !important;
  box-shadow:
    0 20px 52px rgba(15,23,42,.14),
    0 7px 22px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* ─────────────────────────────────────────────────────
   17. WIERSZE TABELI — DELIKATNIEJSZY HOVER
   ───────────────────────────────────────────────────── */
.st-tr {
  transition:
    background .11s ease,
    box-shadow .13s ease !important;
}
.st-tr:hover {
  background: rgba(37,99,235,.035) !important;
  box-shadow: 0 1px 8px rgba(37,99,235,.06) !important;
}

/* Stagger rozszerzony do 20 wierszy */
.st-tr:nth-child(11) { animation-delay: 148ms; }
.st-tr:nth-child(12) { animation-delay: 155ms; }
.st-tr:nth-child(13) { animation-delay: 161ms; }
.st-tr:nth-child(14) { animation-delay: 166ms; }
.st-tr:nth-child(15) { animation-delay: 171ms; }
.st-tr:nth-child(16) { animation-delay: 175ms; }
.st-tr:nth-child(17) { animation-delay: 179ms; }
.st-tr:nth-child(18) { animation-delay: 182ms; }
.st-tr:nth-child(19) { animation-delay: 185ms; }
.st-tr:nth-child(20) { animation-delay: 188ms; }

/* ─────────────────────────────────────────────────────
   18. NOTICES — DELIKATNE SZKŁO
   ───────────────────────────────────────────────────── */
.notice.error {
  background: rgba(254,242,242,.80) !important;
  border-color: rgba(220,38,38,.22) !important;
  box-shadow: inset 3px 0 0 rgba(220,38,38,.70) !important;
  animation: noticeShake .26s cubic-bezier(.36,.07,.19,.97);
}
@keyframes noticeShake {
  0%, 100% { transform: none; }
  20%, 60%  { transform: translateX(-3px); }
  40%, 80%  { transform: translateX(3px); }
}
.notice.ok, .notice.success {
  box-shadow: inset 3px 0 0 rgba(22,163,74,.70) !important;
}
.notice.warn {
  box-shadow: inset 3px 0 0 rgba(245,158,11,.70) !important;
}
.notice.info {
  box-shadow: inset 3px 0 0 rgba(37,99,235,.70) !important;
}

/* ─────────────────────────────────────────────────────
   19. PANEL / CARD ENTRANCE — PŁYNNIEJSZY
   ───────────────────────────────────────────────────── */
.panel-loaded {
  animation: panelLoadedV2 .28s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes panelLoadedV2 {
  from { opacity: 0; transform: translateY(10px) scale(.996); }
  to   { opacity: 1; transform: none; }
}
.card-in {
  animation: cardInV2 .22s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes cardInV2 {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────
   20. STRONA LOGOWANIA — GLASS CARD + STAGGER
   ───────────────────────────────────────────────────── */
.page-center > .card {
  animation: loginCardV2 .44s cubic-bezier(.34,1.10,.64,1) both;
}
@keyframes loginCardV2 {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  animation: loginLogoV2 .52s cubic-bezier(.34,1.28,.64,1) .06s both;
}
@keyframes loginLogoV2 {
  from { opacity: 0; transform: scale(.76) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
.login-logo img {
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(37,99,235,.26), 0 3px 10px rgba(37,99,235,.16);
  transition: transform .24s cubic-bezier(.34,1.52,.64,1), box-shadow .24s ease;
}
.login-logo img:hover {
  transform: scale(1.07) rotate(-3deg);
  box-shadow: 0 18px 44px rgba(37,99,235,.32), 0 6px 18px rgba(37,99,235,.18);
}

/* Pola formularza wlatują staggered */
.page-center .field:nth-child(1) { animation: loginFieldV2 .34s cubic-bezier(.22,1,.36,1) .16s both; }
.page-center .field:nth-child(2) { animation: loginFieldV2 .34s cubic-bezier(.22,1,.36,1) .24s both; }
.page-center .field:nth-child(3) { animation: loginFieldV2 .34s cubic-bezier(.22,1,.36,1) .32s both; }
@keyframes loginFieldV2 {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────
   21. IKONY W PRZYCISKACH — MIKRO-REAKCJA
   ───────────────────────────────────────────────────── */
.btn-ico {
  transition: transform .14s cubic-bezier(.34,1.52,.64,1), opacity .10s ease !important;
}
.btn:hover .btn-ico  { transform: scale(1.10) !important; }
.btn:active .btn-ico { transform: scale(.93) !important; }

.menu-ico {
  transition: transform .14s cubic-bezier(.34,1.52,.64,1) !important;
}
.nav-link:hover .menu-ico { transform: scale(1.07) !important; }

.tab-ico {
  transition: transform .14s cubic-bezier(.34,1.52,.64,1) !important;
}
.tab:hover .tab-ico { transform: scale(1.10) !important; }

/* ─────────────────────────────────────────────────────
   22. SCROLLBARY — STYLED MINIMAL
   ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.13);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.24); }
::-webkit-scrollbar-corner { background: transparent; }

/* ─────────────────────────────────────────────────────
   23. SELEKCJA TEKSTU
   ───────────────────────────────────────────────────── */
::selection {
  background: rgba(37,99,235,.18);
  color: inherit;
}

/* ─────────────────────────────────────────────────────
   24. FOCUS VISIBLE — RING ACCESSIBILITY
   ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(37,99,235,.55) !important;
  outline-offset: 2px !important;
}

/* ─────────────────────────────────────────────────────
   25. DARK MODE — UZUPEŁNIENIE DLA NOWYCH REGUŁ
   ───────────────────────────────────────────────────── */
body.theme-dark {
  background:
    radial-gradient(ellipse 1100px 580px at 8%  -8%,  rgba(37,99,235,.11), transparent 56%),
    radial-gradient(ellipse 1000px 600px at 94% -4%,  rgba(124,58,237,.09), transparent 56%),
    radial-gradient(ellipse  700px 600px at 50% 112%, rgba(6,182,212,.04),  transparent 54%),
    linear-gradient(175deg, #080e1e 0%, #0a0f1e 55%, #06091a 100%) !important;
}

body.theme-dark .topbar {
  background: rgba(8,14,26,.80) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 16px rgba(0,0,0,.26) !important;
}
body.theme-dark .sidebar {
  background: rgba(9,14,26,.86) !important;
}
body.theme-dark .card {
  background: rgba(14,20,36,.84) !important;
  border-color: rgba(148,163,184,.10) !important;
  box-shadow:
    0 18px 56px rgba(0,0,0,.38),
    0 5px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.theme-dark .tab:hover {
  background: rgba(15,23,42,.80) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.30),
    0 8px 18px rgba(0,0,0,.20) !important;
}
body.theme-dark .tab.active {
  background: var(--panel2) !important;
  border-color: rgba(88,140,255,.46) !important;
  border-bottom-color: var(--panel) !important;
  box-shadow:
    0 -2px 12px rgba(88,140,255,.10),
    0 14px 34px rgba(0,0,0,.34) !important;
}
body.theme-dark .btn-primary {
  background: linear-gradient(180deg,
    rgba(37,99,235,.32) 0%,
    rgba(124,58,237,.20) 100%) !important;
  border-color: rgba(88,140,255,.46) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.28),
    0 12px 28px rgba(37,99,235,.16) !important;
}
body.theme-dark .btn-primary:hover {
  background: linear-gradient(180deg,
    rgba(37,99,235,.40) 0%,
    rgba(124,58,237,.26) 100%) !important;
  border-color: rgba(88,140,255,.60) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.30),
    0 18px 40px rgba(37,99,235,.22) !important;
}
body.theme-dark .dropdown-menu,
body.theme-dark .talpie-ctx {
  background: rgba(12,18,32,.94) !important;
  border-color: rgba(148,163,184,.12) !important;
}
body.theme-dark .modal {
  background: rgba(12,18,32,.90) !important;
  border-color: rgba(148,163,184,.12) !important;
}
body.theme-dark .toast {
  background: rgba(12,18,32,.90) !important;
  border-color: rgba(148,163,184,.12) !important;
}
body.theme-dark .skel {
  background: linear-gradient(90deg,
    rgba(148,163,184,.06) 0%,
    rgba(88,140,255,.09) 42%,
    rgba(148,163,184,.06) 82%) !important;
  background-size: 200% 100%;
}
body.theme-dark .nav-link.active {
  background: linear-gradient(90deg,
    rgba(88,140,255,.16) 0%,
    rgba(167,139,250,.09) 100%) !important;
  border-color: rgba(88,140,255,.26) !important;
  box-shadow: inset 3px 0 0 #588cff, 0 2px 10px rgba(88,140,255,.12) !important;
}
body.theme-dark #ajax-bar .inner {
  filter: drop-shadow(0 0 3px rgba(88,140,255,.55));
}
body.theme-dark ::selection {
  background: rgba(88,140,255,.24);
}
body.theme-dark :focus-visible {
  outline-color: rgba(88,140,255,.65) !important;
}

/* ─────────────────────────────────────────────────────
   26. REDUCED MOTION
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .login-logo img,
  .page-center > .card,
  .login-logo,
  .page-center .field {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .btn-primary::before { display: none; }
}
/*
 * ═══════════════════════════════════════════════════════════
 *  TALPIE SPA — CHAT ENHANCEMENTS
 *  Ulepszone style i animacje dla modułu wiadomości.
 *  Append po app.css / talpie_enhancements.css
 * ═══════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────
   1.  GŁÓWNY KONTENER — SZKŁO + GŁĘBSZA RAMKA
   ───────────────────────────────────────────────────── */
.msg {
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 24px 64px rgba(15,23,42,.13),
    0 6px 22px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  transition: box-shadow .22s ease !important;
}

/* ─────────────────────────────────────────────────────
   2.  SIDEBAR LISTY CHATÓW
   ───────────────────────────────────────────────────── */
.msg-sidebar {
  background: rgba(248,250,255,.70) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
}

.msg-sidebar-head {
  background: rgba(246,248,252,.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  padding: 12px 14px !important;
}

.msg-sidebar-search {
  background: transparent !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  padding: 8px 14px !important;
}

/* ─────────────────────────────────────────────────────
   3.  POZYCJA CHATU NA LIŚCIE — HOVER + AKTYWNA
   ───────────────────────────────────────────────────── */
.msg-ch {
  border: 1px solid rgba(15,23,42,.07) !important;
  background: rgba(255,255,255,.60) !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
  transition:
    background .13s ease,
    border-color .13s ease,
    box-shadow .15s ease,
    transform .12s cubic-bezier(.22,1,.36,1) !important;
}
.msg-ch:hover {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(37,99,235,.12) !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.07) !important;
  transform: translateX(2px) !important;
}
.msg-ch.is-active {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(37,99,235,.32) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.09),
    0 6px 18px rgba(37,99,235,.10) !important;
  transform: none !important;
}

/* Nowy chat wlatuje na listę */
@keyframes msgChIn {
  from { opacity: 0; transform: translateX(-10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.msg-ch.is-new {
  animation: msgChIn .26s cubic-bezier(.22,1,.36,1) both;
}

/* Przełączanie chatu — blur i fade listy */
.msg-list {
  transition: opacity .16s ease, filter .18s ease !important;
}
.msg-list.is-soft-refresh {
  opacity: .60 !important;
  filter: blur(1px) saturate(.92) !important;
}

/* ─────────────────────────────────────────────────────
   4.  BADGE NIEPRZECZYTANYCH
   ───────────────────────────────────────────────────── */
.msg-unread .badge {
  animation: unreadPulse 2.4s ease-in-out infinite;
}
@keyframes unreadPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.40); }
  50%       { box-shadow: 0 0 0 5px rgba(37,99,235,.0); }
}

/* ─────────────────────────────────────────────────────
   5.  HEADER AKTYWNEGO CHATU
   ───────────────────────────────────────────────────── */
.msg-main-head {
  background: rgba(248,250,255,.86) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  padding: 10px 14px !important;
  transition: background .18s ease !important;
}

/* Animacja przełączenia chatu — header */
@keyframes msgHeadIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.msg-main-head.is-switching {
  animation: msgHeadIn .22s cubic-bezier(.22,1,.36,1) both;
}

/* ─────────────────────────────────────────────────────
   6.  OBSZAR WIADOMOŚCI
   ───────────────────────────────────────────────────── */
.msg-main-body {
  background:
    radial-gradient(ellipse 900px 600px at 50% 0%, rgba(37,99,235,.025), transparent 60%),
    linear-gradient(180deg, rgba(248,250,255,.18), rgba(255,255,255,.0)) !important;
}

/* Animacja całej listy przy przełączeniu chatu */
@keyframes msgBodySwitch {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.msg-lines.is-switching {
  animation: msgBodySwitch .28s cubic-bezier(.22,1,.36,1) both;
}

/* ─────────────────────────────────────────────────────
   7.  BĄBELKI WIADOMOŚCI — WEJŚCIE + HOVER
   ───────────────────────────────────────────────────── */

/* Ładowanie całego chatu (przełączenie kanału) — fala stagger */
@keyframes msgBubbleIn {
  from { opacity: 0; transform: translateX(-12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes msgBubbleInMine {
  from { opacity: 0; transform: translateX(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Stagger przy wczytywaniu historii (renderMessages pełny) */
.msg-lines.is-switching .msg-line:nth-child(1)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1)   0ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(1)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1)   0ms both; }
.msg-lines.is-switching .msg-line:nth-child(2)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1)  24ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(2)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1)  24ms both; }
.msg-lines.is-switching .msg-line:nth-child(3)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1)  44ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(3)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1)  44ms both; }
.msg-lines.is-switching .msg-line:nth-child(4)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1)  60ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(4)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1)  60ms both; }
.msg-lines.is-switching .msg-line:nth-child(5)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1)  74ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(5)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1)  74ms both; }
.msg-lines.is-switching .msg-line:nth-child(6)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1)  86ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(6)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1)  86ms both; }
.msg-lines.is-switching .msg-line:nth-child(7)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1)  96ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(7)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1)  96ms both; }
.msg-lines.is-switching .msg-line:nth-child(8)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1) 104ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(8)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1) 104ms both; }
.msg-lines.is-switching .msg-line:nth-child(9)  { animation: msgBubbleIn     .22s cubic-bezier(.22,1,.36,1) 110ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(9)  { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1) 110ms both; }
.msg-lines.is-switching .msg-line:nth-child(n+10) { animation: msgBubbleIn   .22s cubic-bezier(.22,1,.36,1) 115ms both; }
.msg-lines.is-switching .msg-line.is-mine:nth-child(n+10) { animation: msgBubbleInMine .22s cubic-bezier(.22,1,.36,1) 115ms both; }

/* ── NOWA WIADOMOŚĆ (live append) ──────────────────────
   .is-msg-new nakładane przez appendNewMessages() w JS.
   Bąbelek wyjeżdża z dołu z lekkim springiem.
   Poprzednie wiadomości NIE są dotykane — zostają w DOM.
   ──────────────────────────────────────────────────── */
@keyframes msgNewIn {
  0%   {
    opacity: 0;
    transform: translateY(22px) scale(.93);
    filter: blur(2px);
  }
  60%  {
    opacity: 1;
    filter: none;
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes msgNewInMine {
  0%   {
    opacity: 0;
    transform: translateY(22px) scale(.93);
    filter: blur(2px);
  }
  60%  {
    opacity: 1;
    filter: none;
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.msg-line.is-msg-new {
  animation: msgNewIn .36s cubic-bezier(.34,1.14,.64,1) both !important;
}
.msg-line.is-mine.is-msg-new {
  animation: msgNewInMine .36s cubic-bezier(.34,1.14,.64,1) both !important;
}

/* Bąbelek bazowy */
.msg-bubble {
  border-radius: 18px !important;
  transition:
    box-shadow .15s ease,
    border-color .15s ease,
    transform .12s cubic-bezier(.22,1,.36,1) !important;
  position: relative;
}
.msg-bubble:hover {
  box-shadow: 0 6px 18px rgba(15,23,42,.10) !important;
  transform: translateY(-1px) !important;
}

/* Bąbelek własny — delikatny gradient */
.msg-line.is-mine .msg-bubble {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(37,99,235,.28) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.07),
    0 3px 12px rgba(37,99,235,.08) !important;
}
.msg-line.is-mine .msg-bubble:hover {
  border-color: rgba(37,99,235,.38) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.09),
    0 8px 22px rgba(37,99,235,.12) !important;
}

/* Highlight wiadomości */
.msg-line.is-highlight .msg-bubble {
  border-color: rgba(245,158,11,.42) !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.12) !important;
  animation: msgHighlightPulse .6s cubic-bezier(.34,1.20,.64,1) both;
}
@keyframes msgHighlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.40); }
  50%  { box-shadow: 0 0 0 8px rgba(245,158,11,.0); }
  100% { box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
}

/* ─────────────────────────────────────────────────────
   8.  WSKAŹNIK "PISZE..."  (typing indicator)
   ───────────────────────────────────────────────────── */
.msg-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}
.msg-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(37,99,235,.50);
  animation: typingBounce 1.2s ease-in-out infinite;
}
.msg-typing-dot:nth-child(2) { animation-delay: .16s; }
.msg-typing-dot:nth-child(3) { animation-delay: .32s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(1);    opacity: .55; }
  40%            { transform: scale(1.35); opacity: 1;   }
}

/* Linia z typing pojawia się miękko */
.msg-line.is-typing {
  animation: msgBubbleIn .20s cubic-bezier(.22,1,.36,1) both;
}

/* ─────────────────────────────────────────────────────
   9.  SEPARATOR DATY / SEKCJA
   ───────────────────────────────────────────────────── */
.msg-history-bar {
  border: 1px dashed rgba(15,23,42,.12) !important;
  background: rgba(255,255,255,.50) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 14px !important;
  font-size: 11px;
  opacity: .85;
  transition: opacity .14s ease !important;
}
.msg-history-bar:hover { opacity: 1 !important; }

/* Przyciski starszych/nowszych wiadomości */
.msg-older .btn,
.msg-newer .btn {
  font-size: 11px !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  transition:
    transform .12s cubic-bezier(.34,1.40,.64,1),
    box-shadow .13s ease,
    background .12s ease !important;
}
.msg-older .btn:hover { transform: translateY(-2px) !important; }
.msg-newer .btn:hover { transform: translateY(2px) !important; }

/* ─────────────────────────────────────────────────────
   10. COMPOSE — POLE WPISYWANIA
   ───────────────────────────────────────────────────── */
.msg-compose {
  background: rgba(246,248,252,.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-top: 1px solid rgba(15,23,42,.07) !important;
  padding: 10px 14px !important;
  transition: background .16s ease !important;
}
.msg-compose:focus-within {
  background: rgba(246,248,252,.96) !important;
}

.msg-input {
  border-radius: 16px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background .12s ease !important;
}
.msg-input:focus {
  border-color: rgba(37,99,235,.40) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.10),
    0 0 0 1px rgba(37,99,235,.22) !important;
  background: rgba(255,255,255,.98) !important;
  outline: none !important;
}

/* Wyślij: spring mikro-bounce */
.msg-compose .btn-primary {
  transition:
    transform .12s cubic-bezier(.34,1.52,.64,1),
    box-shadow .13s ease,
    background .12s ease !important;
}
.msg-compose .btn-primary:active {
  transform: scale(.90) !important;
}

/* ─────────────────────────────────────────────────────
   11. SZKIELETY ŁADOWANIA WIADOMOŚCI
   ───────────────────────────────────────────────────── */
@keyframes msgSkelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.msg-lines .skel-row {
  animation: msgSkelIn .22s cubic-bezier(.22,1,.36,1) both;
}
.msg-lines .skel-row:nth-child(2) { animation-delay: 40ms; }
.msg-lines .skel-row:nth-child(3) { animation-delay: 75ms; }
.msg-lines .skel-row:nth-child(4) { animation-delay: 105ms; }
.msg-lines .skel-row:nth-child(5) { animation-delay: 130ms; }

/* Bąbelek-skeleton po lewej i prawej stronie */
.msg-skel-bubble {
  display: inline-block;
  border-radius: 16px;
  background: linear-gradient(90deg,
    rgba(15,23,42,.06) 0%,
    rgba(37,99,235,.08) 42%,
    rgba(15,23,42,.06) 82%);
  background-size: 200% 100%;
  animation: skelShimmer 1.5s ease-in-out infinite;
  height: 44px;
}
.msg-skel-bubble.is-mine {
  background: linear-gradient(90deg,
    rgba(37,99,235,.07) 0%,
    rgba(37,99,235,.12) 42%,
    rgba(37,99,235,.07) 82%);
  background-size: 200% 100%;
}

/* ─────────────────────────────────────────────────────
   12. PICK NOWY CZAT (lista odbiorców)
   ───────────────────────────────────────────────────── */
.msg-pick {
  border: 1px solid rgba(15,23,42,.07) !important;
  background: rgba(255,255,255,.60) !important;
  border-radius: 14px !important;
  transition:
    background .12s ease,
    border-color .12s ease,
    box-shadow .13s ease,
    transform .12s cubic-bezier(.22,1,.36,1) !important;
}
.msg-pick:hover {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(37,99,235,.16) !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.08) !important;
  transform: translateX(3px) !important;
}

/* ─────────────────────────────────────────────────────
   13. INVITE / ZAPROSZENIA
   ───────────────────────────────────────────────────── */
.msg-invite {
  border-radius: 16px !important;
  background: rgba(255,255,255,.64) !important;
  transition:
    background .13s ease,
    border-color .13s ease,
    box-shadow .15s ease !important;
}
.msg-invite:hover {
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.07) !important;
}
.msg-invite.is-request {
  background: rgba(237,233,254,.50) !important;
  border-color: rgba(124,58,237,.26) !important;
}
.msg-invite.is-request:hover {
  background: rgba(237,233,254,.72) !important;
  border-color: rgba(124,58,237,.36) !important;
}

/* ─────────────────────────────────────────────────────
   14. FULLSCREEN PORTAL
   ───────────────────────────────────────────────────── */
.msg-fs-portal {
  background: rgba(241,245,252,.90) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
}
.msg-fs-card {
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow:
    0 32px 80px rgba(15,23,42,.18),
    0 8px 28px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
  border-radius: 24px !important;
}

/* ─────────────────────────────────────────────────────
   15. MM (members management) — UPGRADE
   ───────────────────────────────────────────────────── */
.mm-col {
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: box-shadow .16s ease !important;
}
.mm-col:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
}
.mm-row {
  border-radius: 12px !important;
  background: rgba(255,255,255,.62) !important;
  transition:
    background .11s ease,
    box-shadow .13s ease,
    transform .11s cubic-bezier(.22,1,.36,1) !important;
}
.mm-row:hover {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.07) !important;
  transform: translateX(2px) !important;
}

/* ─────────────────────────────────────────────────────
   16. READ BADGE — DELIKATNIEJSZE
   ───────────────────────────────────────────────────── */
.msg-read-badge {
  transition: opacity .12s ease, transform .12s ease !important;
}
.msg-bubble:hover .msg-read-badge {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* ─────────────────────────────────────────────────────
   17. TIMESTAMP WIADOMOŚCI
   ───────────────────────────────────────────────────── */
.msg-ts {
  transition: opacity .12s ease !important;
  opacity: .44 !important;
}
.msg-bubble:hover .msg-ts {
  opacity: .72 !important;
}

/* ─────────────────────────────────────────────────────
   18. MODAL CHAT (msg-modal)
   ───────────────────────────────────────────────────── */
.modal.msg-modal {
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow:
    0 32px 80px rgba(2,6,23,.28),
    0 10px 32px rgba(2,6,23,.14),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.modal.msg-modal .msg {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ─────────────────────────────────────────────────────
   19. DARK MODE — UZUPEŁNIENIE
   ───────────────────────────────────────────────────── */
body.theme-dark .msg {
  border-color: rgba(148,163,184,.12) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.42),
    0 6px 22px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.theme-dark .msg-sidebar {
  background: rgba(9,13,22,.78) !important;
}
body.theme-dark .msg-sidebar-head,
body.theme-dark .msg-main-head,
body.theme-dark .msg-compose {
  background: rgba(9,13,22,.82) !important;
  border-color: rgba(148,163,184,.11) !important;
}
body.theme-dark .msg-ch {
  background: rgba(14,20,34,.60) !important;
  border-color: rgba(148,163,184,.10) !important;
}
body.theme-dark .msg-ch:hover {
  background: rgba(20,28,46,.88) !important;
  border-color: rgba(88,140,255,.18) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.22) !important;
}
body.theme-dark .msg-ch.is-active {
  background: rgba(22,32,56,.94) !important;
  border-color: rgba(88,140,255,.38) !important;
  box-shadow:
    0 0 0 3px rgba(88,140,255,.12),
    0 6px 18px rgba(88,140,255,.09) !important;
}
body.theme-dark .msg-bubble {
  background: rgba(14,20,34,.68) !important;
  border-color: rgba(148,163,184,.13) !important;
}
body.theme-dark .msg-line.is-mine .msg-bubble {
  background: rgba(16,26,50,.80) !important;
  border-color: rgba(88,140,255,.30) !important;
  box-shadow:
    0 0 0 3px rgba(88,140,255,.08),
    0 3px 12px rgba(88,140,255,.10) !important;
}
body.theme-dark .msg-input {
  background: rgba(9,13,22,.60) !important;
  border-color: rgba(148,163,184,.18) !important;
  color: var(--text) !important;
}
body.theme-dark .msg-input:focus {
  background: rgba(9,13,22,.80) !important;
  border-color: rgba(88,140,255,.42) !important;
  box-shadow:
    0 0 0 3px rgba(88,140,255,.12),
    0 0 0 1px rgba(88,140,255,.24) !important;
}
body.theme-dark .msg-pick,
body.theme-dark .mm-row {
  background: rgba(14,20,34,.60) !important;
  border-color: rgba(148,163,184,.10) !important;
}
body.theme-dark .msg-pick:hover,
body.theme-dark .mm-row:hover {
  background: rgba(20,28,46,.88) !important;
  border-color: rgba(88,140,255,.18) !important;
}
body.theme-dark .mm-col {
  background: rgba(11,16,28,.72) !important;
  border-color: rgba(148,163,184,.11) !important;
}
body.theme-dark .msg-invite {
  background: rgba(14,20,34,.60) !important;
  border-color: rgba(148,163,184,.12) !important;
}
body.theme-dark .msg-invite:hover {
  background: rgba(20,28,46,.88) !important;
}
body.theme-dark .msg-invite.is-request {
  background: rgba(44,28,74,.48) !important;
  border-color: rgba(167,139,250,.28) !important;
}
body.theme-dark .msg-history-bar {
  background: rgba(14,20,34,.55) !important;
  border-color: rgba(148,163,184,.14) !important;
}
body.theme-dark .msg-typing {
  background: rgba(14,20,34,.68) !important;
  border-color: rgba(148,163,184,.12) !important;
}
body.theme-dark .msg-typing-dot {
  background: rgba(88,140,255,.60) !important;
}
body.theme-dark .msg-fs-portal {
  background: rgba(6,9,16,.88) !important;
}
body.theme-dark .msg-fs-card {
  border-color: rgba(148,163,184,.12) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.theme-dark .msg-skel-bubble {
  background: linear-gradient(90deg,
    rgba(148,163,184,.07) 0%,
    rgba(88,140,255,.10) 42%,
    rgba(148,163,184,.07) 82%);
}

/* ─────────────────────────────────────────────────────
   20. REDUCED MOTION
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .msg-line,
  .msg-line.is-msg-new,
  .msg-ch.is-new,
  .msg-lines.is-switching,
  .msg-main-head.is-switching,
  .msg-typing-dot,
  .msg-unread .badge,
  .msg-older .btn,
  .msg-newer .btn {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TALPIE CHAT — COMPREHENSIVE REDESIGN v2
   ─────────────────────────────────────────────────────────────────
   Key fixes:
   • is-soft-refresh NO LONGER blurs/dims — channels list just
     silently updates values; no visible flicker
   • new messages slide up from below; old messages do NOT re-animate
   • channel list items update their preview/badge in-place without
     any flash (content changes but layout is stable)
   • subtle light gradients throughout
   • refined backdrop-blur on sidebar/header/compose
   • full mobile support
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. RESET BLINKING SOFT-REFRESH ───────────────────────────────
   Override: the blur+fade transition on soft-refresh is the main
   cause of the "jumping menu" flicker. Replace with a near-instant
   opacity pulse that is almost imperceptible.                       */
.msg-list {
  transition: opacity .08s ease !important;
  /* Remove blur from the default transition — blur causes repaints */
}
.msg-list.is-soft-refresh {
  opacity: .97 !important;
  filter: none !important;           /* ← No blur on soft-refresh   */
}

/* ── 1. OUTER SHELL ────────────────────────────────────────────── */
.msg {
  border-radius: 20px !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  background: rgba(248,250,255,.70) !important;
  backdrop-filter: blur(8px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
  box-shadow:
    0 2px 6px rgba(15,23,42,.04),
    0 8px 22px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
  overflow: hidden !important;
  /* Subtle inner gradient for depth */
  background-image:
    radial-gradient(ellipse 600px 300px at 30% 0%, rgba(37,99,235,.028), transparent 65%),
    radial-gradient(ellipse 400px 400px at 80% 100%, rgba(124,58,237,.018), transparent 60%) !important;
}

/* ── 2. SIDEBAR ────────────────────────────────────────────────── */
.msg-sidebar {
  background: rgba(250,252,255,.82) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border-right: 1px solid rgba(15,23,42,.07) !important;
  /* Subtle vertical gradient */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(248,250,255,.0) 40%) !important;
}

.msg-sidebar-head {
  padding: 12px 14px !important;
  background: rgba(250,252,255,.90) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  /* Prevent repaints from blurring during scroll */
  will-change: auto !important;
}

.msg-sidebar-search {
  background: rgba(250,252,255,.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}

/* ── 3. CHANNEL BUTTONS — smooth in-place updates ──────────────── */
.msg-ch {
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  background: rgba(255,255,255,.60) !important;
  padding: 10px 12px !important;
  /* Only transition visual properties, NOT layout ones */
  transition:
    background-color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .12s cubic-bezier(.22,1,.36,1) !important;
  /* Prevent child content changes from causing jank */
  contain: layout style !important;
}
.msg-ch:hover {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(37,99,235,.14) !important;
  box-shadow:
    0 2px 8px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
  transform: translateX(2px) !important;
}
.msg-ch.is-active {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(37,99,235,.30) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.08),
    0 4px 12px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}
/* Light accent strip on active channel */
.msg-ch.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, rgba(37,99,235,.82), rgba(14,165,233,.60));
  pointer-events: none;
}
.msg-ch { position: relative; overflow: hidden; }

/* Channel list gap slightly reduced for tighter mobile layout */
.msg-list {
  padding: 8px !important;
  gap: 5px !important;
}

/* ── 4. SECTION TITLES ─────────────────────────────────────────── */
.msg-section-title {
  font-size: 10px !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  opacity: .60 !important;
  padding: 5px 4px !important;
  /* No animation — just text content, not a new DOM element */
}

/* ── 5. MAIN AREA ──────────────────────────────────────────────── */
.msg-main {
  background: transparent !important;
  /* Subtle diagonal gradient on body canvas */
  background-image:
    radial-gradient(ellipse 800px 500px at 60% 20%, rgba(37,99,235,.022), transparent 58%) !important;
}

/* ── 6. HEADER ─────────────────────────────────────────────────── */
.msg-main-head {
  background: rgba(250,252,255,.92) !important;
  backdrop-filter: blur(20px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  padding: 10px 16px !important;
  /* Subtle top shine */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
  /* Stabilize: use will-change only when switching */
  transition: background .18s ease !important;
}

/* ── 7. MESSAGE BODY AREA ──────────────────────────────────────── */
.msg-main-body {
  background:
    /* Very light top vignette */
    linear-gradient(180deg,
      rgba(246,248,255,.22) 0%,
      rgba(248,250,255,.0) 12%
    ) !important;
  /* Slight bottom gradient for depth near compose */
  background-image:
    linear-gradient(0deg, rgba(246,248,255,.18) 0%, rgba(248,250,255,.0) 80%) !important;
}

/* ── 8. NEW MESSAGE ANIMATION ──────────────────────────────────── */
/*  ONLY .is-msg-new gets the slide-up animation.
    nth-child animations that apply to ALL children during
    renderMessages() are intentionally kept separate.
    The issue was: on soft channel-list update, msg-lines
    was getting the full re-render → all nth-child anims fired.
    Fix: is-switching is ONLY added during real channel switch,
    not during live polling updates.                               */

@keyframes msgNewInV2 {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.95);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.msg-line.is-msg-new {
  animation: msgNewInV2 .32s cubic-bezier(.34,1.10,.64,1) both !important;
}
.msg-line.is-mine.is-msg-new {
  animation: msgNewInV2 .32s cubic-bezier(.34,1.10,.64,1) both !important;
}

/* ── 9. BUBBLES ────────────────────────────────────────────────── */
.msg-bubble {
  border-radius: 18px 18px 18px 6px !important;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 1px 4px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  padding: 10px 14px !important;
  transition:
    box-shadow .15s ease,
    border-color .15s ease,
    transform .12s cubic-bezier(.22,1,.36,1) !important;
}
.msg-bubble:hover {
  box-shadow:
    0 4px 14px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
  transform: translateY(-1px) !important;
}

/* Own messages — right-aligned rounded corner */
.msg-line.is-mine .msg-bubble {
  border-radius: 18px 18px 6px 18px !important;
  background: linear-gradient(135deg,
    rgba(239,246,255,.96) 0%,
    rgba(224,236,255,.90) 100%) !important;
  border-color: rgba(37,99,235,.22) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.06),
    0 3px 10px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.msg-line.is-mine .msg-bubble:hover {
  border-color: rgba(37,99,235,.32) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.08),
    0 6px 18px rgba(37,99,235,.11),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* ── 10. COMPOSE AREA ──────────────────────────────────────────── */
.msg-compose {
  background: rgba(250,252,255,.92) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border-top: 1px solid rgba(15,23,42,.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80) !important;
  padding: 10px 14px !important;
}
.msg-compose:focus-within {
  background: rgba(252,254,255,.97) !important;
}
.msg-input {
  border-radius: 16px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: inset 0 1px 3px rgba(15,23,42,.04) !important;
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background .12s ease !important;
}
.msg-input:focus {
  background: rgba(255,255,255,1) !important;
  border-color: rgba(37,99,235,.38) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.09),
    inset 0 1px 3px rgba(15,23,42,.03) !important;
  outline: none !important;
}

/* ── 11. DARK MODE OVERRIDES ───────────────────────────────────── */
body.theme-dark .msg {
  background: rgba(10,14,24,.78) !important;
  border-color: rgba(148,163,184,.11) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.20),
    0 12px 40px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  background-image:
    radial-gradient(ellipse 600px 300px at 30% 0%, rgba(88,140,255,.04), transparent 65%),
    radial-gradient(ellipse 400px 400px at 80% 100%, rgba(124,58,237,.03), transparent 60%) !important;
}
body.theme-dark .msg-sidebar {
  background: rgba(8,12,22,.82) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(0,0,0,.0) 40%) !important;
  border-right-color: rgba(148,163,184,.09) !important;
}
body.theme-dark .msg-sidebar-head,
body.theme-dark .msg-sidebar-search {
  background: rgba(8,12,22,.88) !important;
  border-bottom-color: rgba(148,163,184,.08) !important;
}
body.theme-dark .msg-main-head {
  background: rgba(8,12,22,.90) !important;
  border-bottom-color: rgba(148,163,184,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.theme-dark .msg-compose {
  background: rgba(8,12,22,.88) !important;
  border-top-color: rgba(148,163,184,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
body.theme-dark .msg-ch {
  background: rgba(14,20,34,.55) !important;
  border-color: rgba(148,163,184,.09) !important;
}
body.theme-dark .msg-ch:hover {
  background: rgba(20,30,52,.78) !important;
  border-color: rgba(88,140,255,.20) !important;
  box-shadow:
    0 3px 12px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.theme-dark .msg-ch.is-active {
  background: rgba(22,34,62,.90) !important;
  border-color: rgba(88,140,255,.36) !important;
  box-shadow:
    0 0 0 3px rgba(88,140,255,.11),
    0 4px 16px rgba(88,140,255,.08) !important;
}
body.theme-dark .msg-ch.is-active::before {
  background: linear-gradient(180deg, rgba(96,165,250,.84), rgba(34,211,238,.64));
}
body.theme-dark .msg-bubble {
  background: rgba(14,20,34,.72) !important;
  border-color: rgba(148,163,184,.12) !important;
  box-shadow:
    0 1px 4px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.theme-dark .msg-line.is-mine .msg-bubble {
  background: linear-gradient(135deg,
    rgba(22,36,72,.90) 0%,
    rgba(18,28,60,.86) 100%) !important;
  border-color: rgba(88,140,255,.28) !important;
  box-shadow:
    0 0 0 3px rgba(88,140,255,.08),
    0 3px 14px rgba(88,140,255,.09),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.theme-dark .msg-input {
  background: rgba(9,13,22,.65) !important;
  border-color: rgba(148,163,184,.16) !important;
}
body.theme-dark .msg-input:focus {
  background: rgba(9,13,22,.82) !important;
  border-color: rgba(88,140,255,.40) !important;
  box-shadow: 0 0 0 3px rgba(88,140,255,.11) !important;
}

/* ── 12. MOBILE ────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .msg {
    border-radius: 16px !important;
    flex-direction: column !important;
    /* On mobile: full height, sidebar stacks on top */
  }
  .msg-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    /* Limit sidebar height on mobile so chat body is visible */
    max-height: 38vh !important;
    min-height: 120px !important;
    flex-shrink: 0 !important;
  }
  .msg-list {
    max-height: calc(38vh - 100px) !important;
  }
  .msg-main {
    flex: 1 !important;
    min-height: 0 !important;
  }
  /* Compose stays at bottom on mobile, slightly bigger touch targets */
  .msg-compose {
    padding: 10px 10px 14px !important;
  }
  .msg-input {
    font-size: 16px !important; /* prevents iOS auto-zoom */
  }
  /* Bubbles take more width on small screens */
  .msg-bubble {
    max-width: min(85%, 460px) !important;
    min-width: min(200px, 76%) !important;
  }
  /* New channel indicator */
  .msg-ch {
    padding: 9px 10px !important;
  }
  .msg-ch-name {
    font-size: 13px !important;
  }
  body.theme-dark .msg-sidebar {
    border-bottom-color: rgba(148,163,184,.08) !important;
  }
}

/* ── 13. CHANNEL LIST STABLE UPDATE ──────────────────────────────
   When the channel list soft-refreshes (new message preview updates,
   unread badge changes etc.) we want ZERO visual flash.
   The .is-soft-refresh class triggers a very brief near-invisible
   opacity dip, but we remove blur entirely.                        */
.msg-ch-preview,
.msg-ch-time,
.msg-ch-name {
  /* These change in-place; we just transition their opacity */
  transition: opacity .12s ease !important;
}

/* ── 14. UNREAD BADGE ─────────────────────────────────────────── */
.msg-unread {
  /* Override: remove the pulsing from the wrapper; the badge itself pulses */
}
.badge.msg-unread,
.msg-unread .badge {
  animation: unreadPulseV2 3s ease-in-out infinite !important;
  font-weight: 900 !important;
}
@keyframes unreadPulseV2 {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.45); }
  35%            { box-shadow: 0 0 0 5px rgba(37,99,235,.0); }
}

/* ── 15. FULLSCREEN PORTAL ────────────────────────────────────── */
.msg-fs-portal {
  background: rgba(238,244,252,.88) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
}
.msg-fs-card {
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 24px !important;
  box-shadow:
    0 4px 14px rgba(15,23,42,.08),
    0 22px 54px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
body.theme-dark .msg-fs-portal {
  background: rgba(6,9,18,.90) !important;
}
body.theme-dark .msg-fs-card {
  border-color: rgba(148,163,184,.11) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ── 16. MODAL CHAT ───────────────────────────────────────────── */
.modal.msg-modal {
  border-radius: 22px !important;
  box-shadow:
    0 26px 64px rgba(2,6,23,.20),
    0 10px 28px rgba(2,6,23,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}
body.theme-dark .modal.msg-modal {
  box-shadow:
    0 40px 96px rgba(0,0,0,.60),
    0 12px 36px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ── 17. EMOJI / REACTIONS ────────────────────────────────────── */
.msg-read-badge {
  border-radius: 10px !important;
  border-color: rgba(15,23,42,.09) !important;
  background: rgba(255,255,255,.72) !important;
  transition: opacity .12s ease, transform .12s ease, background .10s ease !important;
}
.msg-bubble:hover .msg-read-badge {
  opacity: 1 !important;
  background: rgba(255,255,255,.90) !important;
}
body.theme-dark .msg-read-badge {
  background: rgba(30,40,70,.72) !important;
  border-color: rgba(148,163,184,.14) !important;
}

/* ── 18. REDUCED MOTION (append) ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .msg-line.is-msg-new,
  .msg-ch::before,
  .badge.msg-unread,
  .msg-unread .badge,
  .msg-bubble {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────────────────────────────────────────────
   TALPIE SPA — SOFTER SHADOWS PASS v3.1
   Dalsze spłaszczenie cieni po feedbacku.
   ───────────────────────────────────────────────────── */
:root {
  --shadow:  0 5px 16px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.04);
  --shadow2: 0 3px 10px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.04);
  --shadow3: 0 12px 34px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
}

.topbar {
  box-shadow: 0 1px 0 rgba(255,255,255,.78), 0 2px 10px rgba(15,23,42,.04) !important;
}

.sidebar {
  box-shadow: 1px 0 14px rgba(15,23,42,.03) !important;
}

.btn-primary {
  box-shadow:
    0 1px 0 rgba(15,23,42,.05),
    0 7px 16px rgba(37,99,235,.10) !important;
}
.btn-primary:hover {
  box-shadow:
    0 1px 0 rgba(15,23,42,.05),
    0 10px 22px rgba(37,99,235,.13) !important;
}
.btn.danger:hover,
.btn-ghost.danger:hover {
  box-shadow: 0 6px 16px rgba(220,38,38,.11) !important;
}

.tab:hover {
  box-shadow:
    0 1px 0 rgba(15,23,42,.05),
    0 5px 12px rgba(15,23,42,.06) !important;
}
.tab.active {
  box-shadow:
    0 -1px 8px rgba(37,99,235,.06),
    0 6px 14px rgba(2,6,23,.05) !important;
}

.card {
  box-shadow: var(--shadow3), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.card:hover {
  box-shadow:
    0 14px 34px rgba(15,23,42,.10),
    0 4px 12px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.modal {
  box-shadow:
    0 18px 44px rgba(2,6,23,.18),
    0 6px 16px rgba(2,6,23,.08),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.toast {
  box-shadow:
    0 10px 28px rgba(2,6,23,.14),
    0 3px 10px rgba(2,6,23,.07),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.dropdown-menu,
.talpie-ctx {
  box-shadow:
    0 12px 30px rgba(2,6,23,.14),
    0 3px 10px rgba(2,6,23,.06),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.dash-tile:hover {
  box-shadow:
    0 12px 30px rgba(37,99,235,.10),
    0 4px 12px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.msg-fs-card {
  box-shadow:
    0 2px 6px rgba(15,23,42,.03),
    0 6px 16px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.msg-ch:hover {
  box-shadow:
    0 1px 5px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.msg-ch.is-active {
  box-shadow:
    0 0 0 3px rgba(37,99,235,.07),
    0 3px 8px rgba(37,99,235,.06),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.msg-bubble {
  box-shadow:
    0 1px 3px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.msg-bubble:hover {
  box-shadow:
    0 3px 10px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}
.msg-line.is-mine .msg-bubble {
  box-shadow:
    0 0 0 3px rgba(37,99,235,.05),
    0 2px 7px rgba(37,99,235,.07),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.msg-line.is-mine .msg-bubble:hover {
  box-shadow:
    0 0 0 3px rgba(37,99,235,.07),
    0 4px 12px rgba(37,99,235,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* --- Iter: softer backdrop blur + flatter shadows --- */
:root{
  --shadow:0 4px 12px rgba(15,23,42,.05);
  --shadow2:0 6px 16px rgba(15,23,42,.07);
  --shadow-1:0 4px 12px rgba(15,23,42,.06);
  --shadow-2:0 8px 20px rgba(15,23,42,.08);
}

.card,
.form-card,
.tip-card,
.st-summary-subcard,
.dropdown-menu,
.dropdown-panel,
.ti-suggest-menu,
.ti-select-search-menu,
.ti-mselect-menu,
.modal,
.toast,
.talpie-cmenu,
.msg-fs-card,
.article-card,
.tpc-tooltip,
.mobile-tabs-sheet__panel,
.mobile-dock,
.mobile-route-header,
.shell > .sidebar,
.topbar{
  box-shadow: var(--shadow) !important;
}

.dash-tile:hover,
.article-card:hover,
.btn:hover,
.btn.btn-table:hover,
.btn-primary:hover,
.msg-ch:hover,
.msg-bubble:hover,
.mobile-tab-item.is-active,
.mobile-tabs-sheet__panel,
.ti-suggest-menu.is-open,
.ti-select-search-menu.is-open,
.ti-mselect-menu.is-open,
.dropdown-menu.is-open{
  box-shadow: var(--shadow2) !important;
}

.msg-line.is-mine .msg-bubble,
.msg-line.is-mine .msg-bubble:hover,
.msg-ch.is-active,
.nav-link.active,
.nav-link.active-parent,
.toast-info,
.toast-success,
.toast-warn,
.toast-error{
  box-shadow:
    0 0 0 2px rgba(37,99,235,.05),
    0 4px 10px rgba(15,23,42,.05) !important;
}

.dropdown-menu,
.ti-suggest-menu,
.ti-select-search-menu,
.ti-mselect-menu,
.talpie-cmenu,
.modal-backdrop,
.sidebar-overlay,
.st-fs-sidebar-overlay,
.msg-fs-appmenu-overlay,
.tre-fs-appmenu-overlay,
.mobile-tabs-sheet__backdrop,
.mobile-route-header,
.mobile-dock,
.tpc-tooltip{
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

body.theme-dark .dropdown-menu,
body.theme-dark .ti-suggest-menu,
body.theme-dark .ti-select-search-menu,
body.theme-dark .ti-mselect-menu,
body.theme-dark .talpie-cmenu,
body.theme-dark .modal,
body.theme-dark .toast,
body.theme-dark .msg-fs-card,
body.theme-dark .article-card,
body.theme-dark .mobile-tabs-sheet__panel,
body.theme-dark .mobile-dock,
body.theme-dark .mobile-route-header,
body.theme-dark .shell > .sidebar,
body.theme-dark .topbar{
  box-shadow: 0 6px 18px rgba(0,0,0,.22) !important;
}

body.theme-dark .modal-backdrop,
body.theme-dark .sidebar-overlay,
body.theme-dark .st-fs-sidebar-overlay,
body.theme-dark .msg-fs-appmenu-overlay,
body.theme-dark .tre-fs-appmenu-overlay,
body.theme-dark .mobile-tabs-sheet__backdrop,
body.theme-dark .dropdown-menu,
body.theme-dark .ti-suggest-menu,
body.theme-dark .ti-select-search-menu,
body.theme-dark .ti-mselect-menu,
body.theme-dark .talpie-cmenu,
body.theme-dark .mobile-route-header,
body.theme-dark .mobile-dock,
body.theme-dark .tpc-tooltip{
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SMART TABLE — GROUP HEADER ROWS  (Enterprise Edition)
   Replaces original "TalpieTable Iteration 2 — grouped rows" block.
   ══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   1. GROUPING INFO BAR  (above table, shows "Grouped by: X > Y")
   ──────────────────────────────────────────────────────────────────────── */
.st-group-line-wrap { display:flex; flex-direction:column; gap:6px }
.st-group-line {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  padding:9px 14px;
  border:1px solid rgba(37,99,235,.13);
  background:linear-gradient(135deg, rgba(239,246,255,.98) 0%, rgba(224,234,253,.92) 100%);
  border-radius:10px;
  margin:2px 0 5px;
  box-shadow:0 1px 3px rgba(37,99,235,.06), 0 4px 14px rgba(37,99,235,.04);
}
.st-group-line-left, .st-group-line-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.st-group-line-left  { min-width:min(100%, 760px) }
.st-group-grandline  { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:2px 14px 8px }
.st-group-grandlabel { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:900; color:rgba(15,23,42,.68); letter-spacing:.01em }
.st-group-grandpills { display:flex; align-items:center; gap:6px; flex-wrap:wrap }

/* ────────────────────────────────────────────────────────────────────────────
   2. STICKY FLOAT BAR  (follows scroll, shows current group context)
   ──────────────────────────────────────────────────────────────────────── */
.st-group-stickyline {
  position:sticky; top:var(--st-group-sticky-top, 38px);
  z-index:3; height:0; padding:0; pointer-events:none; overflow:visible;
}
.st-group-stickyline[hidden] { display:none !important }

.st-group-stickygroup {
  pointer-events:auto; margin:0 !important;
  padding:3px 6px 0; border:0; border-radius:0;
  background:transparent; box-shadow:none;
}
.st-group-stickygroup .st-group-row {
  min-height:30px; border-radius:7px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(37,99,235,.15);
  box-shadow:0 2px 12px rgba(15,23,42,.09), 0 1px 3px rgba(37,99,235,.07);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.st-group-stickygroup .st-group-row--sticky   { min-height:30px; padding-top:2px; padding-bottom:2px }
.st-group-stickygroup .st-group-row--sticky .st-group-toggle     { width:18px; height:18px }
.st-group-stickygroup .st-group-row--sticky .st-group-toggle-ico { width:9px;  height:9px  }
.st-group-stickygroup .st-group-row--sticky .st-group-toggle-spin{ width:10px; height:10px }

.st-group-stickycrumb {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:0 4px 4px calc(30px + (var(--st-group-level,0) * 16px));
  color:rgba(15,23,42,.50); font-size:10px; font-weight:800;
}
.st-group-stickycrumb b     { font-weight:950; color:rgba(15,23,42,.76) }
.st-group-stickycrumb-sep   { opacity:.36; font-weight:900 }

/* ────────────────────────────────────────────────────────────────────────────
   3. BADGES, PRESET TAG, WARNING
   ──────────────────────────────────────────────────────────────────────── */
.st-badge--grouped { display:inline-flex; align-items:center; gap:6px }
.st-group-preset-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:6px;
  background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.18);
  color:rgba(67,56,202,.88); font-size:11px; font-weight:800;
}
.st-group-pillbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.st-group-warn {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:6px;
  background:rgba(245,158,11,.09); border:1px solid rgba(245,158,11,.22);
  color:#92400e; font-weight:700; font-size:11px;
}

/* ────────────────────────────────────────────────────────────────────────────
   4. TABLE CELL THAT HOSTS THE GROUP ROW
   Level-0 rows are slightly more saturated; deeper levels fade toward neutral.
   ──────────────────────────────────────────────────────────────────────── */
.st-tr--group .st-td {
  background:linear-gradient(180deg,
    rgba(235,244,255, calc(.97 - var(--st-group-level,0) * .03)) 0%,
    rgba(221,236,255, calc(.94 - var(--st-group-level,0) * .03)) 100%
  );
  border-bottom:1px solid rgba(37,99,235,.07);
  transition:background .17s ease, box-shadow .17s ease;
}
.st-tr--group:hover .st-td {
  background:linear-gradient(180deg, rgba(220,238,255,.99), rgba(204,228,255,.98));
  border-bottom-color:rgba(37,99,235,.13);
}

/* ── Override the frozen sel-column background for group rows ────────────────
   .st-td--sel has position:sticky + background:#fff with z-index:3.
   We need higher specificity (.st-tr--group .st-td.st-td--sel) to win.    */
.st-tr--group .st-td.st-td--sel,
.st-tr--group .st-td--group-sel {
  background:linear-gradient(180deg, rgba(218,236,255,.98), rgba(205,226,255,.96)) !important;
  border-bottom:1px solid rgba(37,99,235,.07);
}
.st-tr--group:hover .st-td.st-td--sel,
.st-tr--group:hover .st-td--group-sel {
  background:linear-gradient(180deg, rgba(207,228,255,.99), rgba(192,218,255,.98)) !important;
}
/* Even rows keep the same group-row colour (no zebra striping for group headers) */
.st-tr--group.st-tr:nth-child(even) .st-td.st-td--sel {
  background:linear-gradient(180deg, rgba(218,236,255,.98), rgba(205,226,255,.96)) !important;
}

body.theme-dark .st-tr--group .st-td.st-td--sel,
body.theme-dark .st-tr--group .st-td--group-sel {
  background:linear-gradient(180deg, rgba(18,32,62,.97), rgba(14,26,52,.95)) !important;
  border-bottom-color:rgba(96,165,250,.08);
}
body.theme-dark .st-tr--group:hover .st-td.st-td--sel,
body.theme-dark .st-tr--group:hover .st-td--group-sel {
  background:linear-gradient(180deg, rgba(24,42,80,.98), rgba(18,34,66,.96)) !important;
}
body.theme-dark .st-tr--group.st-tr:nth-child(even) .st-td.st-td--sel {
  background:linear-gradient(180deg, rgba(18,32,62,.97), rgba(14,26,52,.95)) !important;
}

.st-td--group,
.st-th--groupsticky { padding:0 !important }

.st-td--group-sel,
.st-th--group-sel {
  padding:0 !important;
  background:linear-gradient(180deg, rgba(224,239,255,.96), rgba(210,230,255,.93));
  border-bottom:1px solid rgba(37,99,235,.07);
}

/* ────────────────────────────────────────────────────────────────────────────
   5. CORE GROUP ROW CONTAINER
   ──────────────────────────────────────────────────────────────────────── */
.st-group-row {
  position:relative;
  display:flex; align-items:center; gap:10px;
  min-height:36px;
  /* Width capped to the visible scroll-container width so the row never
     stretches across all table columns — matches Kendo/AG Grid behaviour. */
  width:100%; max-width:100%; box-sizing:border-box;
  /* Left inset: fixed gutter + per-level indent */
  padding:3px 12px 3px calc(18px + (var(--st-group-level,0) * 18px));
  border-radius:0; overflow:hidden;
  background:transparent; box-shadow:none;
  transition:background-color .15s ease, transform .15s ease;
}

/* ── Group-select checkbox (in the sel column of the group row) ────────────── */
.st-group-check {
  cursor:pointer;
}
/* Disabled state when the group is collapsed (no visible rows to select) */
.st-group-check:disabled {
  opacity:.35; cursor:default;
}

/* Accent bar — colour shifts blue→indigo→violet with depth */
.st-group-row::before {
  content:'';
  position:absolute;
  inset:7px auto 7px calc(9px + (var(--st-group-level,0) * 18px));
  width:3px; border-radius:999px; pointer-events:none;
  background:linear-gradient(180deg,
    hsl(calc(217 - var(--st-group-level,0) * 20), 91%, 52%),
    hsl(calc(239 - var(--st-group-level,0) * 16), 82%, 63%)
  );
  opacity:.70;
}

.st-group-row--sticky { min-height:34px }

/* ────────────────────────────────────────────────────────────────────────────
   6. EXPAND / COLLAPSE TOGGLE BUTTON
   ──────────────────────────────────────────────────────────────────────── */
.st-group-toggle {
  position:relative; z-index:1; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  border:1px solid rgba(37,99,235,.20); border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(234,244,255,.92));
  box-shadow:0 1px 2px rgba(37,99,235,.08);
  cursor:pointer;
  transition:transform .13s ease, background .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.st-group-toggle:hover {
  background:#fff;
  border-color:rgba(37,99,235,.36);
  box-shadow:0 2px 6px rgba(37,99,235,.16);
  transform:scale(1.06);
}
.st-group-toggle:active { transform:scale(.99) }

.st-group-toggle-ico  { width:9px; height:9px; transition:opacity .13s ease }
.st-group-toggle-spin { display:inline-flex; align-items:center; justify-content:center; width:11px; height:11px }
.st-group-toggle-ico.is-hidden, .st-group-toggle-spin.is-hidden { display:none }

.st-tr--group[aria-busy="true"] .st-group-toggle-ico { opacity:.35 }
.st-tr--group.is-loading .st-group-toggle {
  cursor:progress;
  border-color:rgba(59,130,246,.32);
  box-shadow:0 0 0 3px rgba(59,130,246,.10);
  transform:scale(.99);
}

/* ────────────────────────────────────────────────────────────────────────────
   7. MAIN CONTENT  (column label + bold value)
   ──────────────────────────────────────────────────────────────────────── */
.st-group-main {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  flex:1 1 180px; min-width:0; overflow:hidden;
  transition:opacity .14s ease;
}

/* "Department" column label */
.st-group-title {
  display:inline-flex; align-items:center; gap:0;
  min-width:0; overflow:hidden;
  white-space:nowrap;
}
.st-group-title-label {
  font-size:11px; font-weight:600;
  color:rgba(15,23,42,.40); letter-spacing:.02em;
  white-space:nowrap; flex-shrink:0;
}
/* › separator */
.st-group-title-sep {
  display:inline-block; flex-shrink:0;
  margin:0 4px;
  color:rgba(37,99,235,.32);
  font-size:12px; font-weight:900; line-height:1;
}
/* Value */
.st-group-title b,
.st-group-title-value {
  font-size:12.5px; font-weight:950;
  color:rgba(15,23,42,.90); letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Info-bar "Grouped by" breadcrumb path */
.st-group-by-label {
  font-size:11.5px; font-weight:700; color:rgba(15,23,42,.52);
  margin-right:4px; white-space:nowrap;
}
.st-group-by-path { display:inline-flex; align-items:center; gap:0 }
.st-group-by-part { font-size:11.5px; font-weight:700; color:rgba(15,23,42,.58) }
.st-group-by-part--active { font-weight:950; color:rgba(15,23,42,.88) }
.st-group-by-sep {
  display:inline-block; margin:0 4px;
  color:rgba(37,99,235,.36); font-size:13px; font-weight:900; line-height:1;
}
.st-meta--muted { opacity:.58; font-style:italic }

/* Dark mode for sub-elements */
body.theme-dark .st-group-title-label { color:rgba(148,163,184,.50) }
body.theme-dark .st-group-title-sep   { color:rgba(96,165,250,.36) }
body.theme-dark .st-group-title-value { color:rgba(226,232,240,.94) }
body.theme-dark .st-group-by-label    { color:rgba(148,163,184,.58) }
body.theme-dark .st-group-by-part     { color:rgba(148,163,184,.66) }
body.theme-dark .st-group-by-part--active { color:rgba(226,232,240,.92) }
body.theme-dark .st-group-by-sep      { color:rgba(96,165,250,.40) }

/* Row-count badge — kept in CSS for legacy compat but not rendered by default */
.st-group-count {
  display:inline-flex; align-items:center;
  padding:1px 7px; border-radius:4px;
  background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.14);
  color:#1e40af; font-size:10.5px; font-weight:800; line-height:1.3;
  letter-spacing:.01em; white-space:nowrap; flex-shrink:0;
}

/* Loading hint */
.st-group-loadinghint {
  display:inline-flex; align-items:center; gap:5px;
  padding:1px 7px; border-radius:4px; flex-shrink:0;
  background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.14);
  color:#1d4ed8; font-size:10.5px; font-weight:800; line-height:1.3;
}

/* ────────────────────────────────────────────────────────────────────────────
   8. SHIMMER LOADING RAIL
   ──────────────────────────────────────────────────────────────────────── */
.st-group-loadingrail {
  display:flex; gap:8px;
  padding:0 14px 5px calc(42px + (var(--st-group-level,0) * 18px));
  margin-top:-2px;
}
.st-group-loadingrail span {
  display:block; height:5px; border-radius:999px;
  background:linear-gradient(90deg,
    rgba(148,163,184,.12), rgba(219,234,254,.70), rgba(148,163,184,.12));
  background-size:220% 100%;
  animation:stGroupShimmer 1.2s linear infinite;
}
.st-group-loadingrail span:nth-child(1) { width:min(200px, 30%) }
.st-group-loadingrail span:nth-child(2) { width:min(140px, 18%); animation-delay:.09s }
.st-group-loadingrail span:nth-child(3) { width:min(100px, 13%); animation-delay:.18s }
@keyframes stGroupShimmer { 0%{background-position:220% 0} 100%{background-position:-40% 0} }

/* ────────────────────────────────────────────────────────────────────────────
   9. AGGREGATE PILLS  (SUM / AVG / COUNT shown on the right)
   ──────────────────────────────────────────────────────────────────────── */
.st-group-aggs {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:4px; flex-wrap:nowrap;
  margin-left:auto; padding-right:10px; flex-shrink:0; overflow:hidden;
}

.st-group-pill {
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  padding:2px 7px; border-radius:4px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.09);
  font-size:11px; color:rgba(15,23,42,.68); line-height:1.2;
  white-space:nowrap;
  transition:box-shadow .12s ease, border-color .12s ease;
}
.st-group-pill:hover { box-shadow:0 2px 6px rgba(15,23,42,.08); border-color:rgba(15,23,42,.16) }

.st-group-pill-ico   { width:11px; height:11px; opacity:.68 }
.st-group-pill-k {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; padding:1px 5px; border-radius:4px;
  background:rgba(15,23,42,.06); font-size:9.5px; font-weight:900; letter-spacing:.02em;
}
.st-group-pill-meta  { font-weight:700; opacity:.76 }
.st-group-pill-value { font-weight:950; color:rgba(15,23,42,.90) }
.st-group-pill-sub   { margin-left:3px; font-weight:800; opacity:.58; font-size:9px }

/* Semantic colours */
.st-group-pill--pct_of_total, .st-group-pill--pct_of_parent, .st-group-pill--pct_of_max {
  background:rgba(239,246,255,.95); border-color:rgba(37,99,235,.20); color:rgba(29,78,216,.88);
}
.st-group-pill--rank_desc {
  background:rgba(250,245,255,.95); border-color:rgba(168,85,247,.22); color:rgba(109,40,217,.88);
}
.st-group-pill--distinct_count, .st-group-pill--count_non_null {
  background:rgba(240,249,255,.95); border-color:rgba(14,165,233,.20); color:rgba(7,89,133,.88);
}
.st-group-pill--compact { padding:2px 7px; gap:4px }
.st-group-pill--pos  { background:rgba(240,253,244,.95); border-color:rgba(34,197,94,.24);  color:rgba(21,128,61,.92)  }
.st-group-pill--neg  { background:rgba(254,242,242,.95); border-color:rgba(239,68,68,.22);  color:rgba(185,28,28,.92)  }
.st-group-pill--zero { background:rgba(248,250,252,.95); border-color:rgba(148,163,184,.22); color:rgba(71,85,105,.80) }

/* ────────────────────────────────────────────────────────────────────────────
   10. ANIMATIONS
   ──────────────────────────────────────────────────────────────────────── */
.st-anim-in { animation:stRowIn .22s ease-out }
@keyframes stRowIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

.st-anim-group-in {
  animation:stGroupChildIn .28s cubic-bezier(.22,.9,.2,1) both;
  animation-delay:calc(var(--st-row-anim-index,0) * 12ms);
}
@keyframes stGroupChildIn { from{opacity:0;transform:translateY(-6px) scale(.986)} to{opacity:1;transform:none} }

.st-anim-out { animation:stGroupChildOut .16s ease-in both; animation-delay:var(--st-collapse-stagger,0ms); pointer-events:none }
@keyframes stGroupChildOut { from{opacity:1;transform:none} to{opacity:0;transform:translateY(-5px) scale(.988)} }

.st-anim-group-pulse .st-group-row, .st-group-pulse { animation:stGroupPulse .22s ease-out }
@keyframes stGroupPulse { 0%{transform:scale(.997)} 50%{transform:scale(1.003)} 100%{transform:none} }

.st-tr--group.st-anim-group-pulse .st-td,
.st-tr--group.st-group-pulse .st-td { box-shadow:inset 0 0 0 1px rgba(37,99,235,.10) }

/* Soft-sync highlight (when group data re-fetches in background) */
.st-group-softsynced .st-group-row {
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.18), 0 4px 16px rgba(37,99,235,.07);
}

/* ────────────────────────────────────────────────────────────────────────────
   11. STICKY GROUP HEADER BAR  (floats below column headers while scrolling)
   ──────────────────────────────────────────────────────────────────────── */
.st-tr--group > .st-td,
.st-tr--group-stickyhead > .st-th {
  background:linear-gradient(180deg, rgba(235,245,255,.99), rgba(220,237,255,.97));
  transition:background-color .17s ease, box-shadow .17s ease;
}
.st-tr--group:hover > .st-td {
  background:linear-gradient(180deg, rgba(220,238,255,.99), rgba(204,228,255,.98));
}

/* The bar itself — sticky vertically, always full-width, never JS-repositioned */
.st-group-stickyhead-bar {
  position:sticky; top:var(--st-group-sticky-top, 38px);
  /* left and width are set by JS on every scroll event so the bar
     tracks the visible viewport — CSS left:0 does NOT work for horizontal
     tracking inside overflow:auto (it anchors to scroll-content, not viewport). */
  z-index:9; pointer-events:none; box-sizing:border-box;
  display:flex; align-items:stretch;
  background:linear-gradient(180deg, rgba(235,244,255,.99), rgba(221,236,255,.97));
  border-bottom:2px solid rgba(37,99,235,.13);
  box-shadow:0 2px 8px rgba(37,99,235,.07);
}
.st-group-stickyhead-bar > * { pointer-events:auto }
.st-group-stickyhead-bar[hidden] { display:none !important }

/* sel-cap: covers the sticky checkbox column (and any frozen cols) on the left. */
.st-group-stickyhead-selcap {
  flex:0 0 auto;
  width:28px; min-width:28px;
  /* Explicit gradient — background:inherit is unreliable when parent is sticky */
  background:linear-gradient(180deg, rgba(235,244,255,.99), rgba(221,236,255,.97));
  position:relative; z-index:1;
  border-right:1px solid rgba(37,99,235,.08);
  display:flex; align-items:stretch; justify-content:center;
}
.st-group-stickyhead-selcap-inner {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding-top:5px; box-sizing:border-box;
  background:linear-gradient(180deg, rgba(235,244,255,.99), rgba(221,236,255,.97));
}
.st-group-stickyhead-checkwrap {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:8px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(37,99,235,.10);
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.st-group-check--sticky {
  position:relative; top:1px;
}

/* The actual group row content cell next to the cap */
.st-th--groupsticky {
  flex:1 1 auto; min-width:0;
  padding:0;
  display:flex; align-items:stretch;
}
.st-th--groupsticky .st-group-row {
  flex:1 1 auto;
}

/* is-scrolled: add stronger shadow when user has scrolled down */
.st-group-stickyhead-bar.is-scrolled {
  box-shadow:0 4px 16px rgba(37,99,235,.12), 0 1px 4px rgba(15,23,42,.06);
  border-bottom-color:rgba(37,99,235,.18);
}

.st-tr--group-stickyhead[hidden] { display:none !important }
.st-tr--group-stickyhead .st-th {
  position:sticky; top:var(--st-group-sticky-top, 38px); z-index:4;
}
.st-tr--group-stickyhead .st-th--groupsticky,
.st-tr--group-stickyhead .st-th--group-sel { box-shadow:none }
.st-tr--group-stickyhead.is-scrolled .st-th {
  box-shadow:0 4px 14px rgba(15,23,42,.07), 0 1px 3px rgba(37,99,235,.05);
}
.st-tr--group-stickyhead .st-group-row { min-height:34px }

/* Context rows (ancestor breadcrumb rows above current group) */
.st-tr--group-context > .st-td {
  background:linear-gradient(180deg, rgba(244,249,255,.99), rgba(234,244,255,.97));
}
.st-tr--group-context:hover > .st-td {
  background:linear-gradient(180deg, rgba(235,246,255,.99), rgba(222,240,255,.97));
}
.st-group-row--context { min-height:32px }
.st-group-context-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:5px;
  border:1px solid rgba(37,99,235,.15);
  background:rgba(239,246,255,.90); color:rgba(29,78,216,.82);
  font-size:10px; font-weight:900; letter-spacing:.02em; text-transform:uppercase;
}

/* ────────────────────────────────────────────────────────────────────────────
   12. GROUPBUILDER PANEL
   ──────────────────────────────────────────────────────────────────────── */
.st-groupbuilder           { display:flex; flex-direction:column; gap:14px }
.st-groupbuilder-grid      { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px }
.st-groupbuilder-presets   { display:flex; flex-direction:column; gap:10px }
.st-groupbuilder-presets-head { display:flex; flex-direction:column; gap:3px }
.st-groupbuilder-presets-bar  { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center }
.st-groupbuilder-presets-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.st-groupbuilder-row       { display:grid; grid-template-columns:minmax(0,1fr) 150px auto; gap:8px; align-items:center; margin-bottom:8px }
.st-groupbuilder-row-actions { display:flex; align-items:center; gap:6px }
.st-checkline              { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:rgba(15,23,42,.78) }

/* ────────────────────────────────────────────────────────────────────────────
   13. RESPONSIVE
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .st-groupbuilder-grid          { grid-template-columns:1fr }
  .st-group-line                 { align-items:flex-start }
  .st-group-row                  { align-items:flex-start }
  .st-group-aggs                 { margin-left:0; padding-right:0 }
  .st-groupbuilder-row           { grid-template-columns:1fr }
  .st-groupbuilder-presets-bar   { grid-template-columns:1fr }
}

/* ────────────────────────────────────────────────────────────────────────────
   14. REDUCED MOTION
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .st-group-row, .st-group-toggle, .st-group-main,
  .st-group-pill, .st-group-stickygroup, .st-group-stickycrumb { transition:none !important }
  .st-anim-in, .st-anim-group-in, .st-anim-out,
  .st-anim-group-pulse .st-group-row, .st-group-pulse,
  .st-group-loadingrail span { animation:none !important }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME  — all group-row overrides
   ══════════════════════════════════════════════════════════════════════════ */

/* Info bar */
body.theme-dark .st-group-line {
  background:linear-gradient(135deg, rgba(17,27,48,.94), rgba(15,24,44,.88));
  border-color:rgba(96,165,250,.14);
  box-shadow:0 1px 3px rgba(0,0,0,.24), 0 6px 20px rgba(0,0,0,.16);
}
body.theme-dark .st-group-preset-badge {
  background:rgba(99,102,241,.14); border-color:rgba(99,102,241,.22);
  color:rgba(165,180,252,.92);
}
body.theme-dark .st-group-grandlabel  { color:rgba(226,232,240,.68) }
body.theme-dark .st-group-warn {
  background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.24); color:#fbbf24;
}

/* Sticky float */
body.theme-dark .st-group-stickygroup                              { background:transparent; border-color:transparent; box-shadow:none }
body.theme-dark .st-group-stickygroup .st-group-row {
  background:rgba(15,24,44,.90);
  border-color:rgba(96,165,250,.18);
  box-shadow:0 2px 14px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
}
body.theme-dark .st-group-stickygroup .st-group-row--sticky .st-group-toggle { box-shadow:none }
body.theme-dark .st-group-stickycrumb     { color:rgba(226,232,240,.52) }
body.theme-dark .st-group-stickycrumb b   { color:rgba(255,255,255,.88) }
body.theme-dark .st-group-stickycrumb-sep { color:rgba(226,232,240,.36) }

/* Row cells */
body.theme-dark .st-tr--group .st-td,
body.theme-dark .st-tr--group-stickyhead .st-th {
  background:linear-gradient(180deg, rgba(18,30,60,.94), rgba(15,25,50,.92));
  border-bottom-color:rgba(96,165,250,.08);
}
body.theme-dark .st-tr--group:hover .st-td {
  background:linear-gradient(180deg, rgba(24,40,78,.96), rgba(20,34,66,.94));
}
body.theme-dark .st-td--group-sel,
body.theme-dark .st-th--group-sel {
  background:linear-gradient(180deg, rgba(15,24,44,.98), rgba(12,20,40,.95));
}

/* Sticky header shadow-scroll */
body.theme-dark .st-tr--group-stickyhead.is-scrolled .st-th {
  box-shadow:0 6px 22px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20);
}

/* Context rows */
body.theme-dark .st-tr--group-context > .st-td        { background:linear-gradient(180deg, rgba(18,32,60,.94), rgba(15,26,50,.92)) }
body.theme-dark .st-tr--group-context:hover > .st-td  { background:linear-gradient(180deg, rgba(22,38,70,.96), rgba(18,32,58,.93)) }
body.theme-dark .st-group-context-badge {
  border-color:rgba(96,165,250,.20); background:rgba(15,26,52,.90); color:rgba(147,197,253,.92);
}

/* Sticky bar dark background */
body.theme-dark .st-group-stickyhead-bar {
  background:linear-gradient(180deg, rgba(18,30,60,.98), rgba(15,25,50,.96));
  border-bottom-color:rgba(96,165,250,.14);
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
body.theme-dark .st-group-stickyhead-bar.is-scrolled {
  box-shadow:0 4px 20px rgba(0,0,0,.32), 0 1px 4px rgba(0,0,0,.18);
  border-bottom-color:rgba(96,165,250,.20);
}
body.theme-dark .st-group-stickyhead-selcap {
  background:linear-gradient(180deg, rgba(18,30,60,.98), rgba(15,25,50,.96));
  border-right-color:rgba(96,165,250,.10);
}
body.theme-dark .st-group-stickyhead-selcap-inner {
  background:linear-gradient(180deg, rgba(18,30,60,.98), rgba(15,25,50,.96));
}
body.theme-dark .st-group-stickyhead-checkwrap {
  background:rgba(15,23,42,.94);
  border-color:rgba(96,165,250,.16);
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}

/* Group-check disabled opacity in dark mode */
body.theme-dark .st-group-check:disabled { opacity:.22 }

/* Row container */
body.theme-dark .st-group-row               { background:transparent; box-shadow:none }
body.theme-dark .st-group-row::before       { background:linear-gradient(180deg, rgba(96,165,250,.94), rgba(129,140,248,.66)); opacity:.62 }

/* Toggle button */
body.theme-dark .st-group-toggle {
  background:linear-gradient(180deg, rgba(23,37,68,.96), rgba(17,28,54,.90));
  border-color:rgba(96,165,250,.22);
  box-shadow:0 1px 3px rgba(0,0,0,.24);
}
body.theme-dark .st-group-toggle:hover {
  background:rgba(28,46,84,.96); border-color:rgba(96,165,250,.38);
  box-shadow:0 2px 10px rgba(96,165,250,.18);
}

/* Labels */
body.theme-dark .st-group-title   { color:rgba(148,163,184,.68) }
body.theme-dark .st-group-title b,
body.theme-dark .st-group-title-value { color:rgba(226,232,240,.94) }

/* Count badge */
body.theme-dark .st-group-count {
  background:rgba(59,130,246,.16); border-color:rgba(59,130,246,.26); color:#93c5fd;
}
body.theme-dark .st-group-loadinghint {
  background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.24); color:#bfdbfe;
}

/* Shimmer */
body.theme-dark .st-group-loadingrail span {
  background:linear-gradient(90deg, rgba(30,41,59,.82), rgba(96,116,139,.30), rgba(30,41,59,.82));
  background-size:220% 100%;
}

/* Aggregate pills */
body.theme-dark .st-group-pill {
  background:rgba(17,28,54,.88); border-color:rgba(148,163,184,.14); color:rgba(203,213,225,.80);
}
body.theme-dark .st-group-pill:hover  { border-color:rgba(148,163,184,.26) }
body.theme-dark .st-group-pill-k      { background:rgba(255,255,255,.07) }
body.theme-dark .st-group-pill-value  { color:rgba(255,255,255,.94) }
body.theme-dark .st-group-pill--pct_of_total,
body.theme-dark .st-group-pill--pct_of_parent,
body.theme-dark .st-group-pill--pct_of_max  { background:rgba(30,58,138,.26); border-color:rgba(96,165,250,.24); color:#93c5fd }
body.theme-dark .st-group-pill--rank_desc   { background:rgba(59,7,100,.24);  border-color:rgba(192,132,252,.22); color:#d8b4fe }
body.theme-dark .st-group-pill--distinct_count,
body.theme-dark .st-group-pill--count_non_null { background:rgba(7,89,133,.22); border-color:rgba(56,189,248,.20); color:#7dd3fc }
body.theme-dark .st-group-pill--pos  { background:rgba(5,46,22,.30);  border-color:rgba(74,222,128,.20); color:#86efac }
body.theme-dark .st-group-pill--neg  { background:rgba(69,10,10,.30); border-color:rgba(252,165,165,.18); color:#fca5a5 }
body.theme-dark .st-group-pill--zero { background:rgba(30,41,59,.44); border-color:rgba(100,116,139,.22); color:rgba(148,163,184,.80) }

/* Pulse animation on dark cells */
body.theme-dark .st-tr--group.st-anim-group-pulse .st-td,
body.theme-dark .st-tr--group.st-group-pulse .st-td { box-shadow:inset 0 0 0 1px rgba(96,165,250,.14) }

/* Soft-sync */
body.theme-dark .st-group-softsynced .st-group-row {
  box-shadow:inset 0 0 0 1px rgba(96,165,250,.20), 0 4px 18px rgba(37,99,235,.20);
}

/* === Iteration 5 foundation: multi-column SmartForms + ops cards === */
.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.form-grid .field-span-all{grid-column:1 / -1;}
.form-grid .field-section-wrap{padding-top:4px;}
.form-section{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--line-1); border-radius:12px; background:linear-gradient(180deg, rgba(37,99,235,.06), rgba(255,255,255,0));}
.form-section-title{display:flex; align-items:center; gap:8px; font-weight:900; letter-spacing:.01em;}
.form-section-help{font-size:12px; color:var(--muted); line-height:1.45;}
.form.cardized .form-grid,.form[data-form-cols]{align-items:start;}
@media (max-width: 1200px){
  .form-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 760px){
  .form-grid.cols-2,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:minmax(0,1fr);}
}
.ops-foundation-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px;}
.ops-kpi{border:1px solid var(--line-1); border-radius:12px; padding:14px 16px; background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.85)); box-shadow:0 8px 20px rgba(15,23,42,.04);}
.ops-kpi-label{font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.02em;}
.ops-kpi-value{font-size:28px; font-weight:950; line-height:1.05; margin-top:6px;}
.ops-kpi-sub{font-size:12px; color:var(--muted); margin-top:6px;}
.ops-strip{display:flex; flex-wrap:wrap; gap:10px;}
.ops-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; border:1px solid var(--line-1); background:rgba(255,255,255,.86); font-size:12px; font-weight:800;}
.ops-pill-dot{width:8px; height:8px; border-radius:999px; background:rgba(37,99,235,.72); box-shadow:0 0 0 3px rgba(37,99,235,.10);}
.ops-exception-card{border:1px solid rgba(239,68,68,.20); background:linear-gradient(180deg, rgba(254,242,242,.92), rgba(255,255,255,.94)); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px;}
.ops-exception-title{display:flex; align-items:center; gap:8px; font-weight:900;}
.ops-exception-text{font-size:13px; color:var(--muted);}
.ops-timeline-shell{border:1px solid var(--line-1); border-radius:12px; padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.90)); display:flex; flex-direction:column; gap:10px;}
.ops-timeline-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.ops-timeline-title{font-weight:900; display:flex; align-items:center; gap:8px;}
.ops-timeline-line{position:relative; display:flex; flex-direction:column; gap:10px; padding-left:18px;}
.ops-timeline-line::before{content:''; position:absolute; left:5px; top:3px; bottom:3px; width:2px; border-radius:999px; background:linear-gradient(180deg, rgba(37,99,235,.24), rgba(148,163,184,.18));}
.ops-timeline-step{position:relative; display:flex; align-items:flex-start; gap:10px;}
.ops-timeline-step::before{content:''; position:absolute; left:-17px; top:6px; width:10px; height:10px; border-radius:999px; background:#fff; border:2px solid rgba(37,99,235,.7); box-shadow:0 0 0 3px rgba(37,99,235,.10);}
.ops-timeline-step.is-done::before{background:rgba(37,99,235,.85);}
.ops-timeline-step.is-warn::before{border-color:rgba(245,158,11,.85); box-shadow:0 0 0 3px rgba(245,158,11,.10);}
.ops-timeline-main{display:flex; flex-direction:column; gap:3px;}
.ops-timeline-step-title{font-weight:800;}
.ops-timeline-step-sub{font-size:12px; color:var(--muted);}
body.theme-dark .form-section,
body.theme-dark .ops-kpi,
body.theme-dark .ops-timeline-shell{background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.84));}
body.theme-dark .ops-pill{background:rgba(15,23,42,.82);}
body.theme-dark .ops-exception-card{background:linear-gradient(180deg, rgba(69,10,10,.42), rgba(15,23,42,.92));}


/* Iteration 7 tab-view polish: keep tab buttons content-sized and let overflow arrows handle narrow screens. */
.tabs .tab-bar,
.tabs .tab-bar-wrap .tab-bar {
  flex-wrap: nowrap !important;
}
.tabs .tab-bar-scroll {
  min-width: 0;
}
.tabs .tab,
.tabs .tab-bar .tab,
.tabs .tab-bar-wrap .tab-bar .tab {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: fit-content !important;
  max-width: max-content !important;
  white-space: nowrap !important;
}
.tabs .tab > span,
.tabs .tab {
  white-space: nowrap !important;
}


/* Iteration 9 — WMS operator screens + modal/select fixes */
.modal.crud-form-modal{
  width:min(1480px, calc(100vw - 24px)) !important;
  max-width:calc(100vw - 24px) !important;
}
.modal.crud-form-modal .modal-body{max-height:calc(100vh - 150px); overflow:auto}
.modal .form-grid,
.modal .field,
.modal .input-wrap,
.modal .ti-mselect,
.modal .ti-select,
.modal .ti-lpicker{width:100%; min-width:0}
.modal .field .input,
.modal .field textarea,
.modal .field select,
.modal .ti-mselect-display,
.modal .ti-select-display,
.modal .ti-lpicker{width:100%}
.modal .field[data-field="scope"]{display:none !important}
.ti-select-popover,
.ti-select-search-menu,
.ti-mselect-menu{max-width:min(94vw, 1040px)}
.ti-select-options .ti-opt-title,
.ti-select-options .ti-opt-row,
.ti-mselect-title span{white-space:normal; word-break:break-word}

.form-grid.is-standardized{
  grid-template-columns:minmax(0,1.7fr) minmax(260px,.9fr);
  gap:18px 24px;
  align-items:start;
}
.form-grid.is-standardized.flags-heavy{grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr)}
.form-main-col{grid-column:1; min-width:0}
.form-flags-col{grid-column:2; min-width:0; border-left:1px solid rgba(148,163,184,.22); padding-left:20px; position:relative}
.form-flags-col::before{content:''; position:absolute; left:-1px; top:0; bottom:0; width:1px; background:linear-gradient(180deg, rgba(148,163,184,.08), rgba(148,163,184,.26), rgba(148,163,184,.08));}
.form-wide-col{grid-column:1 / -1; min-width:0}
.form-main-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 16px; min-width:0}
.form-grid.is-standardized.main-1 .form-main-grid{grid-template-columns:minmax(0,1fr)}
.form-grid.is-standardized.main-2 .form-main-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.is-standardized.main-3 .form-main-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-wide-stack,.form-flags-grid{display:grid; gap:14px; min-width:0}
.form-grid.is-standardized.flags-split-1 .form-flags-grid{grid-template-columns:minmax(0,1fr)}
.form-grid.is-standardized.flags-split-2 .form-flags-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.is-standardized.flags-split-3 .form-flags-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.is-sectioned{grid-template-columns:minmax(0,1fr) !important; align-items:start}
.form-grid.is-sectioned > .form-sections-shell{grid-column:1 / -1; width:100%; min-width:0}
.form-sections-shell{grid-template-columns:minmax(0,1fr); align-items:start}
.form-sections-panels{grid-column:1 / -1}
.form-sections-panel > .form-dyn-group{width:100%}
.form-wide-stack .field,.form-flags-grid .field,.form-main-grid .field{min-width:0}
.form-flags-grid .field{padding:10px 12px; border-radius:12px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.58)}
.form-flags-grid .field .label{display:none}
.form-flags-grid .check{align-items:center}
.form-flags-grid .check-main{gap:4px}
.form-flags-grid .field-msg{min-height:0}
.form-wide-stack .ti-lpicker,
.form-wide-stack textarea,
.form-wide-stack .tre,
.form-wide-stack .jsonrows,
.form-wide-stack .kvjson,
.form-wide-stack .mmjson{width:100%; min-width:0}
.form-wide-stack textarea{min-height:120px}
.form-wide-stack .field{padding-top:2px}
.form-dyn-group{display:grid; gap:14px; padding:16px 18px; border-top:1px solid rgba(148,163,184,.24); border-bottom:1px solid rgba(148,163,184,.18); background:linear-gradient(180deg, rgba(148,163,184,.04), rgba(255,255,255,.02)); border-radius:20px}
.form-dyn-group + .form-dyn-group{margin-top:2px}
.form-dyn-group-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,420px); gap:16px; align-items:end}
.form-dyn-group-titlewrap{display:flex; flex-direction:column; gap:4px; min-width:0}
.form-dyn-group-title{font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted)}
.form-dyn-group-controller{min-width:0}
.form-dyn-group-controller > .field{padding-top:0}
.form-dyn-group-controller .field-msg{min-height:0}
.form-dyn-group-body{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px; min-width:0}
.form-dyn-group-body .field{min-width:0}
.form-dyn-group .field-wide,.form-dyn-group .field-span-all{grid-column:1 / -1}
.form-dyn-group-body.is-standardized{display:grid; grid-template-columns:minmax(0,2.3fr) minmax(220px,.95fr); gap:12px 14px; align-items:start}
.form-dyn-group-body.is-standardized.dyn-flags-heavy{grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr)}
.form-dyn-main-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; min-width:0}
.form-dyn-main-grid .field,.form-dyn-flags-grid .field,.form-dyn-wide-stack .field{min-width:0}
.form-dyn-flags-col{position:relative; min-width:0; padding-left:16px; border-left:1px solid rgba(148,163,184,.18)}
.form-dyn-flags-col::before{content:""; position:absolute; left:-1px; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg, rgba(148,163,184,0), rgba(148,163,184,.28), rgba(148,163,184,0))}
.form-dyn-flags-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
.form-dyn-flags-grid .field{padding:10px 12px; border-radius:12px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.58)}
.form-dyn-flags-grid .field .label{display:none}
.form-dyn-flags-grid .check{align-items:center}
.form-dyn-flags-grid .check-main{gap:4px}
.form-dyn-flags-grid .field-msg{min-height:0}
.form-dyn-wide-col{grid-column:1 / -1; min-width:0}
.form-dyn-wide-stack{display:flex; flex-direction:column; gap:14px; min-width:0}
.form-dyn-wide-stack .ti-lpicker,
.form-dyn-wide-stack textarea,
.form-dyn-wide-stack .tre,
.form-dyn-wide-stack .jsonrows,
.form-dyn-wide-stack .kvjson,
.form-dyn-wide-stack .mmjson{width:100%; min-width:0}
.form-dyn-wide-stack textarea{min-height:120px}
.form-dyn-wide-stack .field{padding-top:2px}
.form-dyn-group-body.dyn-main-1 .form-dyn-main-grid{grid-template-columns:minmax(0,1fr)}
.form-dyn-group-body.dyn-main-2 .form-dyn-main-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-dyn-group-body.dyn-main-3 .form-dyn-main-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-dyn-group-body.dyn-flags-split-1 .form-dyn-flags-grid{grid-template-columns:minmax(0,1fr)}
.form-dyn-group-body.dyn-flags-split-2 .form-dyn-flags-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-dyn-group-body.dyn-flags-split-3 .form-dyn-flags-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-sections-shell{display:grid; gap:14px; min-width:0}
/* ── Form-modal section tabs — unified with page .tab-bar style ─────────── */
/* The tabbar wraps flush-bottom like a real page tab-bar; active tab uses   */
/* the same panel-bg + blue border treatment as .tab.active on full pages.   */
/* When there are many tabs ensureTabsOverflowUI() wraps .form-sections-tabbar  */
/* in a .tab-bar-wrap, adding left/right scroll arrow buttons automatically. */
/* ── form-sections-tabbar: plain (no overflow wrapper) ──────────────────── */
.form-sections-tabbar{
  display:flex; flex-wrap:nowrap; gap:4px; padding:3px 4px 0;
  border-bottom:1px solid var(--border2);
  overflow-x:auto; scrollbar-width:none;
  position:sticky; top:0; z-index:2;
  background:var(--panel);
}
.form-sections-tabbar::-webkit-scrollbar{display:none}

/* ── form-sections-tabbar-wrap: overflow UI wrapper ─────────────────────── */
/* Outer wrap — sticky, holds the two arrow buttons + the scroll container    */
.form-sections-tabbar-wrap{
  display:flex; align-items:center; gap:6px;
  position:sticky; top:0; z-index:2;
  background:var(--panel);
  border-bottom:1px solid var(--border2);
  padding:2px 6px 0; margin:0;
}
/* Scroll container — fills remaining space, clips overflowing tab buttons    */
.form-sections-tabbar-wrap .tab-bar-scroll{
  flex:1 1 0; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.form-sections-tabbar-wrap .tab-bar-scroll::-webkit-scrollbar{display:none}
/* tabBar inside scroll container — must NOT restrict its own width           */
/* tabBar.scrollWidth = natural width of all buttons = what we measure        */
.form-sections-tabbar-wrap .form-sections-tabbar{
  display:flex; flex-wrap:nowrap;
  overflow:visible; position:static;
  background:transparent; border-bottom:none;
  padding:0; margin:0;
  width:max-content; /* grow to natural width so measurement is accurate */
}

/* Dark mode */
body.theme-dark .form-sections-tabbar-wrap{
  background:var(--panel); border-bottom-color:var(--border2);
}
.form-sections-tab{
  display:inline-flex; align-items:center; gap:8px;
  flex:0 0 auto; white-space:nowrap;
  min-height:36px; padding:6px 12px;
  border:1px solid transparent; border-bottom:none;
  border-radius:10px 10px 0 0;
  background:transparent; color:var(--text);
  font-size:13px; font-weight:600; cursor:pointer;
  transition:transform .09s cubic-bezier(.22,1,.36,1),
             background .12s ease, border-color .12s ease,
             box-shadow .14s ease, color .12s ease;
}
.form-sections-tab:hover{
  background:rgba(255,255,255,.88);
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(15,23,42,.06), 0 8px 18px rgba(15,23,42,.08);
}
.form-sections-tab.active{
  background:var(--panel);
  border-color:rgba(37,99,235,.40);
  border-bottom-color:var(--panel);
  
  transform:translateY(0);
}
.form-sections-tab-index{
  display:inline-grid; place-items:center;
  width:20px; height:20px; border-radius:999px;
  background:rgba(15,23,42,.08); font-size:11px; font-weight:900;
}
.form-sections-tab.active .form-sections-tab-index{background:rgba(37,99,235,.15); color:#1d4ed8}
.form-sections-tab-label{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.form-sections-panels{display:grid; gap:12px; min-width:0}
.form-sections-panel{min-width:0}
.form-sections-panel[hidden]{display:none !important}
.form-sections-group{margin:0}
.form-sections-group-title{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.form-sections-group-help{font-size:12px; color:var(--muted); line-height:1.55}

.jsonrows{display:flex; flex-direction:column; gap:10px; width:100%}
.jsonrows-ui{display:flex; flex-direction:column; gap:10px; width:100%}
.jsonrows-toolbar{display:flex; justify-content:flex-start}
.jsonrows-head,
.jsonrows-row-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) 108px; gap:10px; align-items:start}
.jsonrows-head{padding:0 0 2px}
.jsonrows-head-cell{font-size:11px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
.jsonrows-rows{display:flex; flex-direction:column; gap:10px}
.jsonrows-row{padding:12px; border-radius:12px; border:1px solid rgba(148,163,184,.16); background:rgba(255,255,255,.62); display:grid; gap:12px}
.jsonrows-cell{min-width:0}
.jsonrows-cell-actions{display:flex; gap:8px; justify-content:flex-end; align-items:center; min-width:0}
.jsonrows-group{display:grid; gap:10px; padding:12px; border-radius:12px; border:1px solid rgba(148,163,184,.14); background:rgba(255,255,255,.48)}
.jsonrows-group-title{font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted)}
.jsonrows-group-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 12px}
.jsonrows-row-meta{display:flex; justify-content:flex-end}
.check.check-compact{padding:5px 10px; min-height:36px; border:1px solid var(--border2); border-radius:10px; background:rgba(255,255,255,.97)}
@media (max-width: 1280px){
  .form-grid.is-standardized,.form-grid.is-standardized.flags-heavy{grid-template-columns:minmax(0,1fr)}
  .form-flags-col{grid-column:1; border-left:0; padding-left:0; border-top:1px solid rgba(148,163,184,.18); padding-top:14px}
  .form-flags-col::before{display:none}
  .form-main-grid,.form-dyn-main-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-dyn-group-body.is-standardized,.form-dyn-group-body.is-standardized.dyn-flags-heavy{grid-template-columns:minmax(0,1fr)}
  .form-dyn-flags-col{grid-column:1; border-left:0; padding-left:0; border-top:1px solid rgba(148,163,184,.18); padding-top:14px}
  .form-dyn-flags-col::before{display:none}
  .form-dyn-group-head{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 860px){
  .form-main-grid,.form-dyn-main-grid,.jsonrows-head,.jsonrows-row-grid{grid-template-columns:minmax(0,1fr)}
  .form-dyn-flags-grid{grid-template-columns:minmax(0,1fr)}
  .jsonrows-head{display:none}
  .jsonrows-row{padding:10px}
}


body.theme-dark .form-flags-grid .field,
body.theme-dark .jsonrows-row{background:rgba(15,23,42,.72); border-color:rgba(148,163,184,.16)}
body.theme-dark .form-flags-col{border-left-color:rgba(148,163,184,.18)}
body.theme-dark .form-flags-col{border-top-color:rgba(148,163,184,.18)}
body.theme-dark .form-dyn-group{background:linear-gradient(180deg, rgba(15,23,42,.34), rgba(15,23,42,.18)); border-top-color:rgba(148,163,184,.18); border-bottom-color:rgba(148,163,184,.14)}
body.theme-dark .form-sections-tabbar{background:var(--panel); border-bottom-color:var(--border2)}
body.theme-dark .form-sections-tab:hover{background:rgba(148,163,184,.12); box-shadow:0 8px 18px rgba(2,6,23,.22)}
body.theme-dark .form-sections-tab.active{background:var(--panel); border-color:rgba(96,165,250,.28); border-bottom-color:var(--panel); box-shadow:0 -2px 12px rgba(96,165,250,.10), 0 10px 24px rgba(2,6,23,.34)}
body.theme-dark .form-sections-tab-index{background:rgba(148,163,184,.14); color:rgba(226,232,240,.9)}
body.theme-dark .form-sections-tab.active .form-sections-tab-index{background:rgba(96,165,250,.18); color:#bfdbfe}

/* ── Address-panel inline tabs (Ship To / Bill To / Intermediate To) ────── */
/* Used inside form section panels for consignee & supplier address groups.  */
.addr-tabs{display:flex; flex-wrap:nowrap; gap:2px; padding:3px 4px 0; border-bottom:1px solid var(--border2); overflow-x:auto; scrollbar-width:none; margin-bottom:14px}
.addr-tabs::-webkit-scrollbar{display:none}
.addr-tab{
  display:inline-flex; align-items:center; gap:7px;
  flex:0 0 auto; white-space:nowrap;
  min-height:32px; padding:5px 12px;
  border:1px solid transparent; border-bottom:none;
  border-radius:8px 8px 0 0;
  background:transparent; color:var(--text);
  font-size:12.5px; font-weight:600; cursor:pointer;
  transition:transform .09s cubic-bezier(.22,1,.36,1),
             background .12s ease, border-color .12s ease,
             box-shadow .14s ease;
}
.addr-tab:hover{background:rgba(255,255,255,.88); transform:translateY(-2px); box-shadow:0 8px 18px rgba(15,23,42,.08)}
.addr-tab.active{background:var(--panel); border-color:rgba(37,99,235,.35); border-bottom-color:var(--panel); box-shadow:0 -2px 10px rgba(37,99,235,.07); transform:translateY(0)}
.addr-panel{display:none}
.addr-panel.active{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px}
.addr-panel-full{grid-column:1/-1}
body.theme-dark .addr-tabs{border-bottom-color:var(--border2)}
body.theme-dark .addr-tab:hover{background:rgba(148,163,184,.12)}
body.theme-dark .addr-tab.active{background:var(--panel); border-color:rgba(96,165,250,.26); border-bottom-color:var(--panel)}

body.theme-dark .form-dyn-flags-grid .field{background:rgba(15,23,42,.72); border-color:rgba(148,163,184,.16)}
body.theme-dark .form-dyn-flags-col{border-left-color:rgba(148,163,184,.18); border-top-color:rgba(148,163,184,.18)}

/* === Generic task flow / summary board framework === */
.task-flow-page,.summary-board-page{display:block}
.task-flow-shell,.summary-board-shell{display:flex; flex-direction:column; gap:14px}
.task-flow-header,.summary-board-header{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap}
.task-flow-header-main,.summary-board-header-main{display:flex; gap:14px; align-items:flex-start}
.task-flow-header-ico,.summary-board-header-ico{width:34px; height:34px; object-fit:contain; opacity:.92}
.task-flow-header h1,.summary-board-header h1{margin:0; font-size:28px; line-height:1.05}
.task-flow-page-desc,.summary-board-page-desc{margin-top:6px; color:var(--muted); font-weight:700}
.task-flow-kicker,.summary-board-kicker,.task-flow-queue-title,.task-flow-progress-title,.task-flow-next-action-kicker,.summary-board-summary-label,.summary-board-meta-label,.summary-board-card-kicker,.task-flow-qty-label,.task-flow-meta-label{font-size:12px; font-weight:900; letter-spacing:.03em; text-transform:uppercase; color:var(--muted)}
.task-flow-layout{display:grid; grid-template-columns:minmax(280px, 380px) minmax(0, 1fr); gap:14px; align-items:start}
.task-flow-layout.is-loading{opacity:.78}
.task-flow-summary-row,.summary-board-toolbar{display:flex; gap:8px; flex-wrap:wrap}
.task-flow-badge,.summary-board-badge{display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:950; letter-spacing:.02em; text-transform:uppercase; background:rgba(37,99,235,.10); color:rgba(29,78,216,.95); border:1px solid rgba(37,99,235,.14)}
.task-flow-queue,.task-flow-card,.summary-board-summary,.summary-board-card{border:1px solid rgba(15,23,42,.08); border-radius:12px; background:rgba(255,255,255,.82); box-shadow:0 8px 24px rgba(15,23,42,.05)}
.task-flow-queue{padding:12px}
.task-flow-queue-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.task-flow-queue-sub{font-size:12px; font-weight:800; color:var(--muted2)}
.task-flow-queue-filter-row{margin-bottom:10px}
.task-flow-queue-filter,.summary-board-filter{width:100%}
.task-flow-queue-list{display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 260px); overflow:auto}
.task-flow-task{display:flex; flex-direction:column; gap:7px; width:100%; text-align:left; border:1px solid rgba(15,23,42,.08); border-radius:12px; background:rgba(255,255,255,.86); padding:12px; cursor:pointer; transition:.16s ease}
.task-flow-task:hover{border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.05)}
.task-flow-task.active{border-color:rgba(37,99,235,.28); background:rgba(37,99,235,.08); box-shadow:0 0 0 1px rgba(37,99,235,.10) inset}
.task-flow-task-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.task-flow-task-ref{font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase}
.task-flow-task-qty{font-size:16px; font-weight:700; color:var(--text)}
.task-flow-task-title{font-size:14px; font-weight:700; color:var(--text)}
.task-flow-task-sub{font-size:13px; font-weight:700; color:var(--muted); line-height:1.35}
.task-flow-task-badges,.task-flow-badges,.summary-board-badges{display:flex; gap:6px; flex-wrap:wrap}
.task-flow-mini-progress{flex:1 1 auto; height:8px; border-radius:999px; background:rgba(15,23,42,.06); overflow:hidden}
.task-flow-mini-progress span,.task-flow-progressbar span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, rgba(37,99,235,.78), rgba(59,130,246,.96))}
.task-flow-task-progressline{display:flex; align-items:center; gap:10px}
.task-flow-mini-progress-label{font-size:11px; font-weight:900; color:var(--muted); white-space:nowrap}
.task-flow-card{padding:14px}
.task-flow-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.task-flow-card h2,.summary-board-card h2{margin:4px 0 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:24px; line-height:1.08}
.task-flow-ref,.summary-board-card h2 span{font-size:14px; color:var(--muted); font-weight:900}
.task-flow-subtitle{margin-top:8px; font-size:14px; font-weight:700; color:var(--muted)}
.task-flow-card-head-right{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-left:auto}
.task-flow-qtybox{border:1px solid rgba(15,23,42,.08); border-radius:12px; padding:10px 12px; min-width:96px; text-align:right; background:rgba(15,23,42,.03)}
.task-flow-qty-value{font-size:28px; font-weight:950; color:var(--text); line-height:1}
.task-flow-progress-strip{margin-top:14px; border:1px solid rgba(15,23,42,.07); border-radius:12px; padding:12px; background:rgba(15,23,42,.03)}
.task-flow-progress-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.task-flow-progress-value{font-size:12px; font-weight:900; color:var(--text)}
.task-flow-progressbar{height:10px; border-radius:999px; overflow:hidden; background:rgba(15,23,42,.07)}
.task-flow-next-action{margin-top:14px; border:1px solid rgba(37,99,235,.14); border-radius:12px; padding:12px 14px; background:rgba(37,99,235,.06)}
.task-flow-next-action.done{border-color:rgba(22,163,74,.18); background:rgba(22,163,74,.06)}
.task-flow-next-action-title{margin-top:4px; font-size:16px; font-weight:700; color:var(--text)}
.task-flow-next-action-sub{margin-top:4px; font-size:13px; font-weight:700; color:var(--muted)}
.task-flow-meta-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:14px}
.task-flow-meta-item,.summary-board-meta-item{border:1px solid rgba(15,23,42,.07); border-radius:14px; padding:10px 12px; background:rgba(255,255,255,.74)}
.task-flow-meta-value,.summary-board-meta-value{margin-top:4px; font-size:14px; font-weight:800; color:var(--text); word-break:break-word}
.task-flow-steps{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.task-flow-step{display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; border:1px solid rgba(15,23,42,.08); border-radius:12px; padding:12px; background:rgba(255,255,255,.78)}
.task-flow-step.done{border-color:rgba(22,163,74,.18); background:rgba(22,163,74,.05)}
.task-flow-step.current{border-color:rgba(37,99,235,.20); box-shadow:0 0 0 1px rgba(37,99,235,.09) inset}
.task-flow-step-no{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; background:rgba(15,23,42,.05); color:var(--text)}
.task-flow-step.done .task-flow-step-no{background:rgba(22,163,74,.12); color:#166534}
.task-flow-step.current .task-flow-step-no{background:rgba(37,99,235,.12); color:#1d4ed8}
.task-flow-step-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap}
.task-flow-step-label{font-size:14px; font-weight:700; color:var(--text)}
.task-flow-step-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.task-flow-step-status{display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; background:rgba(15,23,42,.06); color:var(--muted)}
.task-flow-step-status.current{background:rgba(37,99,235,.12); color:#1d4ed8}
.task-flow-step-status.done{background:rgba(22,163,74,.12); color:#166534}
.task-flow-step-expected{font-size:12px; font-weight:800; color:var(--muted)}
.task-flow-step-hint{margin-top:4px; font-size:13px; font-weight:700; color:var(--muted); line-height:1.35}
.task-flow-step-scanned{margin-top:8px; font-size:13px; font-weight:800; color:var(--text)}
.task-flow-step-scanrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:10px}
.task-flow-scan-input{height:48px; font-size:18px; font-weight:900; letter-spacing:.02em}
.task-flow-step-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.task-flow-footer{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:16px}
.task-flow-footer .btn{min-width:140px}
.task-flow-empty,.summary-board-empty{border:1px dashed rgba(15,23,42,.14); border-radius:12px; padding:18px; text-align:center; color:var(--muted); font-weight:800; background:rgba(255,255,255,.58)}
.task-flow-empty.big{padding:48px 18px; min-height:280px; display:flex; align-items:center; justify-content:center}
.summary-board-header-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.summary-board-header-actions .summary-board-filter{min-width:min(280px, 100%)}
.summary-board-toolbar .summary-board-badge{background:rgba(15,23,42,.06); color:var(--text); border-color:rgba(15,23,42,.08)}
.summary-board-summaries{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
.summary-board-summary{padding:14px}
.summary-board-summary-value{margin-top:8px; font-size:30px; line-height:1; font-weight:950; color:var(--text)}
.summary-board-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.summary-board-card{padding:14px; display:flex; flex-direction:column; gap:12px}
.summary-board-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.summary-board-note{border:1px dashed rgba(15,23,42,.10); border-radius:14px; padding:12px; background:rgba(15,23,42,.03); font-size:13px; font-weight:700; color:var(--muted)}
.summary-board-actions{display:flex; gap:8px; flex-wrap:wrap}
.summary-board-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px}

@media (max-width: 980px){
  .task-flow-layout{grid-template-columns:1fr}
  .task-flow-queue-list{max-height:none}
}
@media (max-width: 820px){
  .task-flow-header h1,.summary-board-header h1{font-size:24px}
  .task-flow-card h2,.summary-board-card h2{font-size:21px}
  .task-flow-step-side{align-items:flex-start}
  .task-flow-footer .btn,
  .summary-board-header-actions .btn{width:100%; justify-content:center}
}
@media (max-width: 680px){
  .task-flow-header-actions,.summary-board-header-actions{width:100%}
  .task-flow-header-actions .btn,
  .summary-board-header-actions .btn,
  .summary-board-header-actions .summary-board-filter{width:100%}
  .task-flow-step{grid-template-columns:1fr}
  .task-flow-step-no{width:40px; height:40px}
  .task-flow-step-head{flex-direction:column; align-items:flex-start}
  .task-flow-step-scanrow{grid-template-columns:1fr}
  .task-flow-step-actions .btn{width:100%; justify-content:center}
}
body.theme-dark .task-flow-queue,
body.theme-dark .task-flow-card,
body.theme-dark .task-flow-task,
body.theme-dark .task-flow-step,
body.theme-dark .task-flow-meta-item,
body.theme-dark .task-flow-empty,
body.theme-dark .task-flow-qtybox,
body.theme-dark .summary-board-summary,
body.theme-dark .summary-board-card,
body.theme-dark .summary-board-meta-item,
body.theme-dark .summary-board-empty,
body.theme-dark .summary-board-note,
body.theme-dark .task-flow-progress-strip,
body.theme-dark .task-flow-next-action,
body.theme-dark .summary-board-toolbar .summary-board-badge{background:rgba(2,6,23,.42); border-color:rgba(148,163,184,.16)}
body.theme-dark .task-flow-task:hover{background:rgba(37,99,235,.12)}
body.theme-dark .task-flow-task.active{background:rgba(37,99,235,.16)}
body.theme-dark .task-flow-badge,
body.theme-dark .summary-board-badge{background:rgba(59,130,246,.16); color:rgba(191,219,254,.95); border-color:rgba(59,130,246,.18)}
body.theme-dark .task-flow-mini-progress,
body.theme-dark .task-flow-progressbar{background:rgba(148,163,184,.16)}


.lines-modal .modal-body{padding-top:12px;}
.lines-modal .lines-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.lines-modal .lines-modal-title{font-weight:700;font-size:15px;}
.lines-modal .lines-modal-meta{font-size:12px;opacity:.7;}
.lines-modal .lines-modal-body{display:block;min-height:120px;}
.lines-modal .lines-modal-empty{padding:20px;border:1px dashed rgba(128,128,128,.35);border-radius:14px;opacity:.8;}

/* ────────────────────────────────────────────────────────────────────────── */
/* Task Flow Kit Patch — operator / Zebra terminal tightening                */
/* ────────────────────────────────────────────────────────────────────────── */

.task-flow-badge-stat {
  background: rgba(15, 23, 42, .06);
  color: var(--text);
  border-color: rgba(15, 23, 42, .10);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

@keyframes tf-shake {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-6px); }
  36%  { transform: translateX(6px); }
  54%  { transform: translateX(-4px); }
  72%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.task-flow-scan-mismatch {
  animation: tf-shake .55s ease;
  border-color: rgba(220, 38, 38, .55) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}

.task-flow-step-actions .btn {
  min-height: 44px;
  min-width: 80px;
  font-size: 13px;
  font-weight: 800;
}

.task-flow-scan-input {
  height: 56px !important;
  font-size: 20px !important;
  font-weight: 900;
  letter-spacing: .04em;
  caret-color: var(--accent, #2563eb);
}

.task-flow-step.current {
  border-color: rgba(37, 99, 235, .30);
  border-left: 3px solid var(--accent, #2563eb);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .10) inset,
              0 4px 12px rgba(37, 99, 235, .07);
}

.task-flow-step.current .task-flow-step-no {
  background: rgba(37, 99, 235, .14);
  color: #1d4ed8;
  font-weight: 800;
}

@media (max-width: 680px) {
  .task-flow-footer {
    flex-direction: column;
  }
  .task-flow-footer .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 15px;
  }
  .task-flow-footer [data-complete-task] {
    order: -1;
  }
}

.task-flow-progressbar span,
.task-flow-mini-progress span {
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

body.theme-dark .task-flow-queue,
body.theme-dark .task-flow-card,
body.theme-dark .task-flow-task,
body.theme-dark .task-flow-step,
body.theme-dark .task-flow-meta-item,
body.theme-dark .task-flow-empty,
body.theme-dark .task-flow-qtybox,
body.theme-dark .task-flow-progress-strip,
body.theme-dark .task-flow-next-action,
body.theme-dark .task-flow-badge-stat,
body.theme-dark .task-flow-meta-item,
body.theme-dark .task-flow-progress-strip,
body.theme-dark .task-flow-next-action,
body.theme-dark .task-flow-qtybox,
body.theme-dark .task-flow-empty {
  color: inherit;
}

body.theme-dark .task-flow-queue,
body.theme-dark .task-flow-card {
  background: rgba(15, 23, 42, .82);
  border-color: rgba(255, 255, 255, .08);
}

body.theme-dark .task-flow-task {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .07);
}
body.theme-dark .task-flow-task:hover {
  background: rgba(37, 99, 235, .14);
  border-color: rgba(37, 99, 235, .30);
}
body.theme-dark .task-flow-task.active {
  background: rgba(37, 99, 235, .18);
  border-color: rgba(37, 99, 235, .40);
}

body.theme-dark .task-flow-step {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .07);
}
body.theme-dark .task-flow-step.done {
  background: rgba(22, 163, 74, .08);
  border-color: rgba(22, 163, 74, .22);
}
body.theme-dark .task-flow-step.current {
  background: rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .35);
  border-left-color: rgba(59, 130, 246, .90);
}

body.theme-dark .task-flow-meta-item {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .07);
}

body.theme-dark .task-flow-progress-strip {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .07);
}

body.theme-dark .task-flow-next-action {
  background: rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .22);
}
body.theme-dark .task-flow-next-action.done {
  background: rgba(22, 163, 74, .10);
  border-color: rgba(22, 163, 74, .22);
}

body.theme-dark .task-flow-empty {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .10);
}

body.theme-dark .task-flow-qtybox,
body.theme-dark .task-flow-badge-stat {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: dark) {
  body:not(.theme-light) .task-flow-queue,
  body:not(.theme-light) .task-flow-card {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(255, 255, 255, .08);
  }

  body:not(.theme-light) .task-flow-task {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .07);
  }
  body:not(.theme-light) .task-flow-task:hover {
    background: rgba(37, 99, 235, .14);
    border-color: rgba(37, 99, 235, .30);
  }
  body:not(.theme-light) .task-flow-task.active {
    background: rgba(37, 99, 235, .18);
    border-color: rgba(37, 99, 235, .40);
  }

  body:not(.theme-light) .task-flow-step {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
  }
  body:not(.theme-light) .task-flow-step.done {
    background: rgba(22, 163, 74, .08);
    border-color: rgba(22, 163, 74, .22);
  }
  body:not(.theme-light) .task-flow-step.current {
    background: rgba(37, 99, 235, .10);
    border-color: rgba(37, 99, 235, .35);
    border-left-color: rgba(59, 130, 246, .90);
  }

  body:not(.theme-light) .task-flow-meta-item {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
  }

  body:not(.theme-light) .task-flow-progress-strip {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
  }

  body:not(.theme-light) .task-flow-next-action {
    background: rgba(37, 99, 235, .10);
    border-color: rgba(37, 99, 235, .22);
  }
  body:not(.theme-light) .task-flow-next-action.done {
    background: rgba(22, 163, 74, .10);
    border-color: rgba(22, 163, 74, .22);
  }

  body:not(.theme-light) .task-flow-empty {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .10);
  }

  body:not(.theme-light) .task-flow-qtybox,
  body:not(.theme-light) .task-flow-badge-stat {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
  }
}