/* =========================================
   NAV / CARDS (аккуратные нейтральные стили)
   ========================================= */

/* =========================================
   APP LAYOUT (container + collapsible sidebar)
   ========================================= */
.app-container{
  width: 100%;
  max-width: var(--app-max, 1680px);
  margin: 0 auto;
}

/* Keep desktop layout consistent when viewport shrinks/zooms */
@media (min-width: 1024px){
  html,
  body{
    min-width: var(--app-min, 1200px);
  }

  body{
    overflow-x: auto;
  }

  .app-shell{
    min-width: var(--app-min, 1200px);
  }
}

/* Keep sidebar fixed while scrolling long pages (scroll inside <main>) */
.app-shell{
  height: 100vh;
  overflow: hidden;
}
#app-main{ min-height: 0; }
#app-main > main{
  min-height: 0;

  /* чтобы ширина не менялась при появлении/исчезновении скроллбара */
  scrollbar-gutter: stable;
}

/* <details> styling (compact accordions) */
details > summary{ list-style: none; }
details > summary::-webkit-details-marker{ display:none; }

/* Chart.js helpers */
.chart-box{ position: relative; width: 100%; }
.chart-box canvas{ width: 100% !important; height: 100% !important; }


/* sidebar width + main offset (desktop only) */
.app-sidebar{
  width: var(--sidebar-expanded, 256px);
  transition: width .18s ease;
  will-change: width;

  /* tiny “premium” background glow */
  position: relative;
  isolation: isolate;
}
.app-sidebar::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(520px 260px at 15% -10%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(460px 240px at 110% 15%, rgba(99,102,241,.12), transparent 55%);
  opacity:.45;
}
.app-sidebar > *{
  position: relative;
  z-index: 1;
}

@media (min-width:768px){
  html.sidebar-collapsed .app-sidebar{
    width: var(--sidebar-collapsed, 76px);
  }
}

/* TOP ROW behavior */
.sidebar-top{
  justify-content:flex-start;
}

/* Collapsed: burger MUST be centered */
html.sidebar-collapsed .sidebar-top{
  justify-content:center;
}

/* override Tailwind ml-auto on the button in collapsed mode */
html.sidebar-collapsed .sidebar-top .sidebar-toggle{
  margin-left: 0 !important;
}
/* In collapsed mode we remove brand block полностью — остаётся только hamburger */
html.sidebar-collapsed .sidebar-top .app-brand{
  display:none !important;
}

/* Brand */
.app-brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
}
.brand-mark{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, rgba(59,130,246,1), rgba(99,102,241,1));
  box-shadow: 0 10px 18px rgba(2,6,23,.12);
}
.brand-text{
  white-space:nowrap;
  letter-spacing:-0.02em;
}

/* Toggle button (always hamburger) */
.sidebar-toggle{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color:#0f172a;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  transition: background .15s ease, border-color .15s ease, transform .16s ease, box-shadow .16s ease;
}
.sidebar-toggle:hover{
  background:#fff;
  border-color: rgba(15,23,42,.16);
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
  transform: translateY(-1px);
}
.sidebar-toggle:active{
  transform: translateY(0) scale(.98);
}
.sidebar-toggle:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.20), 0 14px 30px rgba(2,6,23,.10);
}

.burger{
  width: 18px;
  height: 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.burger span{
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: currentColor;
  opacity: .86;
}
.sidebar-toggle:hover .burger span{
  opacity: 1;
}

/* Sidebar nav */
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.65rem .85rem;

  border-radius: 16px;
  color:#0f172a;
  font-weight:800;

  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.nav-item:hover{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.06);
  transform: translateX(2px);
}
.nav-item:active{
  transform: translateX(2px) scale(.99);
}

.nav-item.is-active{
  background: linear-gradient(90deg, rgba(37,99,235,.16), rgba(37,99,235,.06));
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.nav-item.is-active::before{
  content:'';
  position:absolute;
  left:-6px;
  top:10%;
  bottom:10%;
  width:3px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(99,102,241,.85));
}

.nav-ico{
  width:2.1rem;
  height:2.1rem;
  border-radius:.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background: rgba(15,23,42,.035);
  transition: background .15s ease, transform .12s ease;
}
.nav-item:hover .nav-ico{
  background: rgba(15,23,42,.06);
}
.nav-item.is-active .nav-ico{
  background: rgba(37,99,235,.16);
}

.nav-txt{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-badges{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.nav-badge{
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:18px;
  text-align:center;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(148,163,184,.18);
  color:#0f172a;
}

.nav-badge--info{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.22);
  color: rgba(30,64,175,1);
}

.nav-badge--danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
  color: rgba(185,28,28,1);
}

.nav-badge--warn{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.28);
  color: rgba(146,64,14,1);
}

.nav-badge[hidden]{ display:none !important; }

/* если сайдбар свернут — чтобы не шумело */
html.sidebar-collapsed .nav-badges{ display:none; }

/* Sidebar footer actions */
.side-action{
  display:flex;
  align-items:center;
  gap:.55rem;
  justify-content:flex-start;
  padding:.6rem .75rem;
  border-radius: 16px;

  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#0f172a;
  font-weight:800;
  font-size:.875rem;

  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .12s ease;
}
.side-action:hover{
  background:#f8fafc;
  border-color: rgba(15,23,42,.16);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
  transform: translateY(-1px);
}

.side-action.is-active{
  background: rgba(99,102,241,.10);
  border-color: rgba(99,102,241,.25);
}

.side-action:active{
  transform: translateY(0) scale(.99);
}
.side-action__ico{
  width: 1.35rem;
  text-align:center;
}
.side-action__txt{
  white-space:nowrap;
}
.side-action--danger{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.18);
  color:#b91c1c;
}
.side-action--danger:hover{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.26);
}

.sidebar-logout-btn__ico{
  display:none;
  width:1.1rem;
  text-align:center;
  font-size:1rem;
  line-height:1;
}

/* Collapse mode: hide texts, center icons */
html.sidebar-collapsed .brand-text,
html.sidebar-collapsed .nav-txt,
html.sidebar-collapsed .user-details,
html.sidebar-collapsed .side-action__txt{
  display:none !important;
}

html.sidebar-collapsed .sidebar-logout-btn{
  padding:.6rem;
}

html.sidebar-collapsed .sidebar-logout-btn__txt{
  display:none;
}

html.sidebar-collapsed .sidebar-logout-btn__ico{
  display:inline-block;
}

html.sidebar-collapsed .nav-item{
  justify-content:center;
  padding:.6rem;
}
html.sidebar-collapsed .nav-item:hover{
  transform:none; /* чтобы “рейл” не прыгал */
}
html.sidebar-collapsed .nav-item::before{
  left:-6px;
}
html.sidebar-collapsed .nav-ico{
  width:2.25rem;
  height:2.25rem;
}
html.sidebar-collapsed .user-meta{
  justify-content:center;
}
html.sidebar-collapsed .side-action{
  justify-content:center;
  padding:.6rem;
}
html.sidebar-collapsed .side-actions{
  grid-template-columns: 1fr !important;
}


/* Existing cards */
.dash-card {
  display:flex; gap:.75rem; align-items:center;
  background:#fff; border:1px solid #e5e7eb; padding:1rem;
  border-radius:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .12s ease, box-shadow .12s ease;
}
.dash-card:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.dash-ico { width:2.5rem; height:2.5rem; border-radius:.6rem; display:flex; align-items:center; justify-content:center; }
.dash-title { font-weight:600; }
.dash-sub { font-size:.85rem; color:#6b7280; }

.stat-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem;
  display:flex; align-items:center; gap:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.stat-ico { width:2.5rem; height:2.5rem; border-radius:.6rem; display:flex; align-items:center; justify-content:center; }
.stat-title { font-size:.85rem; color:#6b7280; }
.stat-value { font-size:1.5rem; font-weight:700; }

.quick-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border:1px solid #e5e7eb; border-radius:.6rem; background:#fff;
}
.quick-link:hover { border-color:#d1d5db; background:#fafafa; }
.quick-tile {
  display:flex; align-items:center; justify-content:center;
  padding:1rem; border:1px dashed #c7d2fe; color:#4f46e5; background:#eef2ff;
  border-radius:.75rem; font-weight:600;
}
.quick-tile:hover { background:#e0e7ff; border-style:solid; }

/* =========================================
   BACKGROUND SYSTEM (PUBLIC + AUTH) — modern, static, unified
   ========================================= */
.site-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;

  /* Base (fallback) — static mesh gradient */
  background:
    radial-gradient(1200px 720px at 72% -10%, rgba(59,130,246,.10), transparent 62%),
    radial-gradient(980px 640px at 0% 105%, rgba(16,185,129,.08), transparent 60%),
    radial-gradient(920px 640px at 110% 90%, rgba(99,102,241,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Optional layers that may exist in base templates (гарантированно отключаем) */
.bg-arcs,
.bg-aurora{
  display:none !important;
}
.bg-arcs .arcs,
.bg-aurora{
  animation:none !important;
}

/* Noise */
.bg-noise{
  position:absolute; inset:0;
  opacity:.035;
  mix-blend-mode:overlay;
  background-size:140px 140px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
}

/* PUBLIC PRESET — единый для главной/логина/регистрации */
.public-shell .site-bg{
  background:
    radial-gradient(1280px 780px at 70% -12%, rgba(59,130,246,.14), transparent 62%),
    radial-gradient(1100px 740px at 0% 108%, rgba(16,185,129,.12), transparent 62%),
    radial-gradient(980px 720px at 110% 92%, rgba(99,102,241,.12), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
}

/* Тонкая микро-сетка */
.public-shell .site-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: .10;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 48%, transparent 82%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 48%, transparent 82%);
}

/* Мягкие “пятна” (без анимации) */
.public-shell .site-bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(640px 640px at 18% 18%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(560px 560px at 82% 20%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(620px 620px at 70% 82%, rgba(34,197,94,.10), transparent 60%);
  filter: blur(100px) saturate(120%);
  opacity: .14;
  animation: none !important;
}

/* APP PRESET (как было) */
.app-shell .site-bg{
  background:
    radial-gradient(1000px 620px at 80% 0%, rgba(59,130,246,.04), transparent 70%),
    radial-gradient( 800px 520px at 0% 100%, rgba(99,102,241,.035), transparent 60%),
    #ffffff;
}
.app-shell .bg-arcs, .app-shell .bg-aurora{ display:none !important; }
.app-shell .site-bg::before, .app-shell .site-bg::after{ display:none !important; }

/* Полностью выключить фон */
.no-bg .bg-arcs, .no-bg .bg-aurora, .no-bg .bg-noise{ display:none !important; }
.no-bg .site-bg::before, .no-bg .site-bg::after{ display:none !important; }
.no-bg .site-bg{ background:#ffffff !important; }

/* Mobile drawer UX */
body.no-scroll{
  overflow:hidden;
  overscroll-behavior: contain;
}
#mobile-sidebar{
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  .bg-arcs .arcs { animation:none !important; }
  .bg-aurora     { animation:none !important; }
  .public-shell .site-bg::after{ animation:none !important; }
}

/* ============ WIZARD STEPPER ============ */
.wiz-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.wiz-title{font-weight:800;color:#0f172a}
.wiz-sub{color:#64748b}
.stepper{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.25rem}
.stepper .step{display:flex;align-items:center;gap:.5rem;color:#94a3b8}
.stepper .ico{width:36px;height:36px;border-radius:9999px;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;background:#fff;font-weight:700}
.stepper .txt{display:flex;flex-direction:column;line-height:1.1}
.stepper .txt small{font-size:.7rem;color:#94a3b8}
.stepper .txt span{font-weight:600;color:#334155}
.stepper .step.is-active .ico{background:#2563eb;border-color:#2563eb;color:#fff}
.stepper .step.is-active .txt span{color:#0f172a}
.stepper .step.is-done .ico{background:#10b981;border-color:#10b981;color:#fff}
.stepper .sep{width:40px;height:2px;background:#cbd5e1;position:relative;flex:0 0 auto}
.stepper .sep::after{content:'';position:absolute;right:-2px;top:-3px;border:5px solid transparent;border-left-color:#cbd5e1}
@media (max-width:640px){ .stepper .txt{display:none} .stepper .sep{width:26px} }

/* лёгкая “кликабельность” для возврата на прошлые шаги */
.stepper .step{ cursor:pointer; user-select:none; }
.stepper .step.is-active{ cursor:default; }

/* ============ TABS ============ */
.tabs [role="tab"]{padding:.5rem .875rem;border-radius:.5rem}
.tabs [role="tab"][aria-selected="true"], .tab-active{background:#111827;color:#fff}

/* =================================================================== */
/* UI KIT (карточки, кнопки, теги, line-clamp, пагинация)              */
/* =================================================================== */
:root{
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd;
  --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8; --brand-800:#1e40af;
  --gray-50:#f8fafc; --gray-100:#eef2f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-500:#64748b; --gray-600:#475569; --gray-800:#1f2937;

  /* Нейтральный цвет границ по умолчанию */
  --ui-border: rgba(226,232,240,1); /* slate-200 */

  /* NEW: layout vars */
  --sidebar-expanded: 256px;
  --sidebar-collapsed: 76px;
  --app-max: 1680px;
  --app-min: 1200px;
}

html :where(*, *::before, *::after){
  border-color: var(--ui-border);
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.375rem;padding:0 .875rem;border-radius:.65rem;font-weight:700;font-size:.95rem;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;border:1px solid transparent;user-select:none}
.btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover{
  background: inherit;
}
.btn:focus{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.btn-primary{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
.btn-outline{background:#fff;color:var(--slate-700);border-color:rgba(15,23,42,0.18)}
.btn-outline:hover{background:rgba(15,23,42,0.04)}

/* Soft (medium-tone) button — для AI действий */
.btn-soft{background:rgba(15,23,42,0.06);color:var(--slate-900);border-color:rgba(15,23,42,0.16)}
.btn-soft:hover{background:rgba(15,23,42,0.09)}

/* System instruction textarea (чтобы была видимая окантовка) */
.ae-textarea{
  border:1px solid rgba(15,23,42,0.16);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  color:var(--slate-900);
  line-height:1.5;

  /* FIX: ручной ресайз + скролл как страховка */
  resize: vertical;
  overflow-y: auto;
}
.ae-textarea:focus{
  outline:none;
  border-color:rgba(37,99,235,0.45);
  box-shadow:0 0 0 3px rgba(37,99,235,0.14);
}
.btn-ghost{background:transparent;color:var(--gray-600)}
.btn-ghost:hover{background:#f1f5f9;color:#dc2626}

.btn-dark{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.btn-dark:hover{
  background:#0b1220;
  border-color:#0b1220;
}

.btn-danger{
  background:#ef4444;
  color:#fff;
  border-color:#ef4444;
}
.btn-danger:hover{
  background:#dc2626;
  border-color:#dc2626;
}
.btn-danger:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(239,68,68,.28);
}

/* NEW: emerald button (для лендинга/CTA) */
.btn-success{
  background:#10b981;
  color:#fff;
  border-color:#10b981;
}
.btn-success:hover{
  background:#059669;
  border-color:#059669;
}
.btn-success:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(16,185,129,.28);
}

/* NEW: larger buttons for landing/auth */
.btn-lg{
  height: 3rem;
  padding: 0 1.1rem;
  border-radius: .9rem;
  font-size: 1rem;
  font-weight: 800;
}
.btn-xl{
  height: 3.25rem;
  padding: 0 1.25rem;
  border-radius: 1rem;
  font-size: 1.05rem;
  font-weight: 900;
}

/* Tags */
.tags-row{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;height:1.5rem;padding:0 .55rem;border-radius:9999px;font-size:.75rem;line-height:1;background:#f8fafc;color:#0f172a;border:1px solid var(--gray-200)}
.chip-blue{background:var(--brand-100);color:var(--brand-700);border-color:var(--brand-200)}

.chip-ok{
  background: rgba(16,185,129,.12) !important;
  border-color: rgba(16,185,129,.22) !important;
  color: #065f46 !important;
}
.chip-warn{
  background: rgba(245,158,11,.14) !important;
  border-color: rgba(245,158,11,.26) !important;
  color: #92400e !important;
}

.filter-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:0 .9rem;
  height:2rem;
  border-radius:9999px;
  border:1px solid var(--gray-200);
  background:#fff;
  font-size:.85rem;
  color:#0f172a;
  cursor:pointer;
  transition:all .15s ease;
}
.filter-pill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.filter-pill:hover{
  border-color:#cbd5f5;
  background:#f8fafc;
}
.filter-pill.is-active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

/* =========================================================
   Analytics filters — segmented status control
   Приведено к общему виду фильтров (прямоугольные, с рамкой)
   ========================================================= */
.af-seg{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;

  padding:0;
  border:0;
  background: transparent;
}

/* compact variant (single line toolbars) */
.af-seg--compact{ gap:.35rem; }

.af-seg__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:2.5rem; /* = h-10 */
  padding:0 .85rem;
  border-radius: var(--lk-control-radius, .4rem);

  border:1px solid var(--lk-control-border, rgba(148,163,184,.65));
  background: var(--lk-surface-solid, #fff);

  color:#0f172a;
  font-size:.85rem;
  font-weight:700;

  cursor:pointer;
  user-select:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.af-seg__btn:hover{
  border-color: var(--lk-control-border-hover, rgba(100,116,139,.55));
  background: var(--lk-surface, #fff);
}

.af-seg__btn:active{ transform: scale(.99); }

.af-seg__btn.is-active{
  background: rgba(37,99,235,0.10);
  border-color: rgba(37,99,235,0.35);
}

.af-seg__btn input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
  pointer-events:none;
}

.af-seg__btn:focus-within{
  box-shadow: 0 0 0 3px var(--lk-control-ring, rgba(37,99,235,0.18));
}

/* Dark theme */
html.theme-dark .af-seg__btn{
  color: rgba(226,232,240,0.92);
}

html.theme-dark .af-seg__btn.is-active{
  background: rgba(96,165,250,0.18);
  border-color: rgba(96,165,250,0.45);
}

.analytics-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:2rem;
  padding:0 .85rem;
  border-radius:.65rem;
  border:1px solid var(--gray-200);
  background:#fff;
  font-size:.8rem;
  color:#0f172a;
  transition:all .15s ease;
}
.analytics-toggle:hover{
  border-color:#cbd5f5;
  background:#f8fafc;
}
.analytics-toggle.is-active{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}

.metric-select{
  height:2rem;
  border-radius:.6rem;
  border:1px solid var(--gray-200);
  background:#fff;
  padding:0 .5rem;
  font-size:.8rem;
  color:#0f172a;
}

.analytics-status{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.2rem .6rem;
  border-radius:9999px;
  background:#f8fafc;
  border:1px solid var(--gray-200);
}
.analytics-status.is-loading{
  color:#1d4ed8;
  border-color:#bfdbfe;
  background:#eff6ff;
}

/* Card */
.ui-card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--gray-200);border-radius:.9rem;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease;z-index:0}
.ui-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.08)}
.ui-card--dropdown-open{z-index:30}

.ui-card__delete{
  position:absolute; top:.55rem;
  right:.55rem !important;
  inset-inline-end:.55rem;
  left:auto !important;
  z-index:5;
}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.5rem;border:1px solid var(--gray-200);background:#fff;color:var(--gray-600)}
.icon-btn:hover{border-color:#fecaca;background:#fff1f2;color:#dc2626}

.ui-card__title{font-weight:700;color:#0f172a}
.ui-card__desc{color:var(--gray-500);line-height:1.35}

.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clamp-2h{min-height:calc(1em * 1.35 * 2)}
.clamp-3h{min-height:calc(1em * 1.35 * 3)}
.truncate-1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:2rem;user-select:none}
.pager__info{font-size:.9rem;color:var(--gray-600)}

/* =========================================================
   Form controls polish — darker borders + sharper corners
   - Keeps Tailwind utilities in charge whe:contentReference[oaicite:10]{index=10}look like a real “designed” control
   ========================================================= */

/* Быстрые “ручки” настройки:
   - хочешь ещё острее углы: 0.375rem (≈6px)
   - хочешь мягче: 0.5rem (8px)
   - хочешь темнее рамки: подними alpha у --ui-control-border до .75
*/
:root{
  --ui-control-radius: .4rem; /* ≈6.4px — чуть острее, чем было */
  --ui-control-border: rgba(148,163,184,.65);
  --ui-control-border-hover: rgba(100,116,139,.55);
  --ui-control-border-focus: rgba(37,99,235,.55);
  --ui-control-ring: rgba(37,99,235,.18);
  --ui-control-placeholder: rgba(100,116,139,.75);
}

/* =========================================================
   UI inputs/selects — FIX specificity vs Tailwind preflight
   Причина: Tailwind preflight задаёт padding:0 для input/select/textarea по тегам,
   а :where(.ui-input/.ui-select) имеет 0 специфичность и проигрывает.
   Решение: используем tag:where(.class) => специфичность 0,0,1 (побеждает preflight),
   но слабее Tailwind utilities (классы 0,1,0), поэтому px-*/w-*/rounded-* продолжают работать.
   ========================================================= */

input:where(.ui-input),
textarea:where(.ui-input),
select:where(.ui-select){
  width:100%;
  border:1px solid var(--ui-control-border);
  border-radius:var(--ui-control-radius);

  /* ✅ теперь padding реально применяется везде */
  padding:.55rem .75rem;

  /* safer than `background:` (не сбрасывает background-image у select) */
  background-color:#fff;

  font-size:14px;
  color:#0f172a;
  outline:none;
  line-height:1.2;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input:where(.ui-input)::placeholder,
textarea:where(.ui-input)::placeholder{
  color: var(--ui-control-placeholder);
}

input:where(.ui-input):hover,
textarea:where(.ui-input):hover,
select:where(.ui-select):hover{
  border-color: var(--ui-control-border-hover);
}

input:where(.ui-input):focus,
textarea:where(.ui-input):focus,
select:where(.ui-select):focus{
  border-color: var(--ui-control-border-focus);
  box-shadow:0 0 0 3px var(--ui-control-ring);
}

/* фокус от клавиатуры */
input:where(.ui-input):focus-visible,
textarea:where(.ui-input):focus-visible,
select:where(.ui-select):focus-visible{
  border-color: var(--ui-control-border-focus);
  box-shadow:0 0 0 3px var(--ui-control-ring);
}

input:where(.ui-input):disabled,
textarea:where(.ui-input):disabled,
select:where(.ui-select):disabled{
  opacity:.65;
  cursor:not-allowed;
}

/* Select: стрелка + правильные отступы (и место под неё) */
select:where(.ui-select){
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:1.1rem 1.1rem;

  /* ✅ место под стрелку, чтобы текст не наезжал */
  padding-right:2.25rem;

  -webkit-appearance:none;
  appearance:none;
}

/* Dark theme: делаем стрелку светлее, чтобы не “терялась” */
html.theme-dark .ui-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
}

/* =========================================================
   Wizard — интеграции (segmented tabs)
   ========================================================= */
.wiz-itabs{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  padding:.4rem;
  border:1px solid rgba(15,23,42,.10);
  border-radius:.9rem;
  background:#fff;
}
.wiz-itab{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .85rem;
  border-radius:.75rem;
  font-weight:800;
  border:1px solid transparent;
  color:#475569;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select:none;
}
.wiz-itab:hover{
  background:#f8fafc;
  border-color: rgba(15,23,42,.06);
}
.wiz-itab[aria-selected="true"]{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.20);
  color:#0f172a;
}

.wiz-stepper-wrap{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.wiz-stepper-wrap::-webkit-scrollbar{ height: 6px; }
.wiz-stepper-wrap::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.10); border-radius: 999px; }

.itabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 640px){
  .itabs{ grid-template-columns: 1fr; }
}

.it-card{
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  text-decoration: none;
  color: inherit;
  width: 100%;
  min-width: 0;

  text-align:left;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.it-card > div{ min-width: 0; }
.it-title{ font-weight: 800; color:#0f172a; line-height: 1.15; }
.it-sub{ font-size: .85rem; color:#64748b; margin-top: .15rem; }
.it-meta{ margin-top: .55rem; }
.it-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,.08);
}
.it-card[aria-selected="true"]{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.10), 0 14px 28px rgba(2,6,23,.08);
}
.it-card:disabled,
.it-card[aria-disabled="true"]{
  opacity:.65;
  cursor:not-allowed;
  transform:none !important;
}
.it-ico{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
}
.it-ico--blue{ background: rgba(59,130,246,.14); }
.it-ico--green{ background: rgba(16,185,129,.14); }
.it-ico--purple{ background: rgba(168,85,247,.14); }
.it-pill{
  display:inline-flex;
  align-items:center;
  height: 20px;
  padding: 0 .5rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  font-size: 12px;
  color:#334155;
}

.it-tabbar{
  display:flex;
  gap:.4rem;
  padding:.35rem;
  border-radius: .95rem;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.it-tabbar::-webkit-scrollbar{ height: 6px; }
.it-tabbar::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.10); border-radius: 999px; }

.it-tab{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .85rem;
  border-radius:.75rem;
  border:1px solid transparent;
  color:#475569;
  font-weight:800;
  background: transparent;
  user-select:none;
  white-space:nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.it-tab:hover{
  background:#fff;
  border-color: rgba(15,23,42,.06);
}
.it-tab[aria-selected="true"]{
  background:#fff;
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 3px rgba(59,130,246,.10);
  color:#0f172a;
}
.it-tab:disabled,
.it-tab[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
}

.ww-tabs{
  display:flex;
  gap:.35rem;
  padding:.35rem;
  border-radius:.9rem;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.ww-tabs::-webkit-scrollbar{ height: 6px; }
.ww-tabs::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.10); border-radius: 999px; }

.ww-tab{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .8rem;
  border-radius:.75rem;
  border:1px solid transparent;
  color:#475569;
  font-weight:800;
  background:transparent;
  white-space:nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ww-tab:hover{
  background:#fff;
  border-color: rgba(15,23,42,.06);
}
.ww-tab[aria-selected="true"]{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.it-device{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding: .2rem;
  border-radius: .85rem;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
}
.it-device__btn{
  height: 2.05rem;
  padding: 0 .75rem;
  border-radius: .7rem;
  font-weight: 800;
  font-size: .85rem;
  color:#475569;
  border:1px solid transparent;
  background: transparent;
}
.it-device__btn[aria-selected="true"]{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.20);
  color:#0f172a;
}

.ww-preview-shell{
  position:relative;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 1rem;
  background:#fff;
  overflow:hidden;
  min-height: 380px;
}
.ww-preview-shell[data-device="mobile"]{
  max-width: 380px;
  margin: 0 auto;
}
.ww-fab{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  background: linear-gradient(135deg, #35b36b, #2f8d5b);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 28px rgba(16,185,129,.28), 0 3px 10px rgba(2,6,23,.18);
}
.ww-fab__icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  font-size: .95rem;
}
.ww-fab__text{
  white-space: nowrap;
}

.ww-pane{
  display:flex;
  flex-direction:column;
  height: clamp(420px, 52vh, 640px);
}
.ww-pane__body{
  flex: 1 1 auto;
  overflow: auto;
}
.ww-pane__body--preview{
  overflow: hidden;
}
.ww-pane__footer{
  flex: 0 0 auto;
}
.ww-pane__body .ww-preview-shell{
  height: 100%;
  min-height: 100%;
}
.ww-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
.ww-panel-preview{
  box-sizing: border-box;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
}

@media (min-width: 1024px){
  .ww-layout[data-mode="normal"]{
    grid-template-columns: minmax(360px, 460px) minmax(0, 1fr) !important;
  }
  .ww-layout[data-mode="code"]{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.wiz-footer-nav{
  position: sticky;
  bottom: 0;
  z-index: 30;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);

  border-top: 1px solid rgba(15,23,42,.10);
  padding-top: .75rem;
  padding-bottom: .5rem;
}

/* =========================================================
   PUBLIC UI (Landing/Auth)
   ========================================================= */
.public-shell [id]{
  scroll-margin-top: 84px;
}

/* Public navigation visibility (fallback when responsive utilities are missing) */
.public-nav__center,
.public-nav__actions{
  display: none;
}
.public-nav__mobile{
  display: flex;
}
@media (min-width: 640px){
  .public-nav__actions{ display: flex; }
  .public-nav__mobile{ display: none; }
}
@media (min-width: 1024px){
  .public-nav__center{ display: flex; }
}

/* Reusable public cards */
.public-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 1.5rem; /* ~24px */
  box-shadow: 0 14px 34px rgba(2,6,23,.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.public-card--soft{
  background: rgba(248,250,252,.84);
}
.public-card--hover{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.public-card--hover:hover{
  transform: translateY(-2px);
  border-color: rgba(15,23,42,.14);
  box-shadow: 0 18px 44px rgba(2,6,23,.09);
}

/* Mini badges (less “pill”, more modern) */
.public-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .7rem;
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 800;
  font-size: .85rem;
  color:#0f172a;
}
.public-badge__dot{
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: #10b981;
}

/* Inputs (auth + landing capture) */
.public-input{
  width: 100%;
  height: 3rem;
  border: 1px solid rgba(226,232,240,1);
  border-radius: 1rem;
  padding: 0 .95rem;
  background: rgba(255,255,255,.92);
  color:#0f172a;
  transition: box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.public-input::placeholder{ color: rgba(100,116,139,.9); }
.public-input:focus{
  outline: none;
  border-color: rgba(37,99,235,.38);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
  background: #fff;
}

/* Code block */
.public-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92rem;
  line-height: 1.35;
  background: rgba(248,250,252,1);
  border: 1px solid rgba(226,232,240,1);
  border-radius: .95rem;
  padding: .9rem 1rem;
  overflow-x: auto;
}

/* Timeline steps */
.public-steps{
  position: relative;
}
.public-steps::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(226,232,240,1);
}
.public-step{
  position:relative;
  padding-left: 56px;
}
.public-step__num{
  position:absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color:#0f172a;
  background:#fff;
  border: 2px solid rgba(37,99,235,.22);
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}
.public-step__num.is-done{
  border-color: rgba(16,185,129,.30);
}

.analytics-progress{
  background-color:#e2e8f0;
}
.analytics-progress__fill{
  background-color:#0f172a;
}

/* =================================================================== */
/* DARK THEME                                                           */
/* =================================================================== */
:root{
  --page-bg:#f8fafc;
  --panel-bg:#ffffff;
  --panel-muted:#f8fafc;
  --text-main:#0f172a;
  --text-soft:#64748b;
  --border-main:rgba(15,23,42,.10);
}

html.theme-dark{
  --page-bg:#070b14;
  --panel-bg:#0d1625;
  --panel-muted:#0a1220;
  --text-main:#e2e8f0;
  --text-soft:#94a3b8;
  --ui-border: rgba(148,163,184,.24);
  scrollbar-color: rgba(148,163,184,.4) rgba(2,6,23,.65);
}

html.theme-dark .analytics-progress{
  background-color: rgba(148,163,184,.2);
}
html.theme-dark .analytics-progress__fill{
  background-color:#60a5fa;
}

html.theme-dark body{
  color:var(--text-main);
  background:transparent;
}

html.theme-dark .app-sidebar{
  background:linear-gradient(180deg, rgba(11,22,36,.92), rgba(9,18,30,.95));
  border-color:rgba(148,163,184,.18);
}

html.theme-dark .sidebar-toggle{
  background: rgba(15,23,42,.6);
  border-color: rgba(148,163,184,.25);
  color:#e2e8f0;
}
html.theme-dark .sidebar-toggle:hover{ background: rgba(15,23,42,.82); }

html.theme-dark .nav-item,
html.theme-dark .side-action{
  color:#e2e8f0;
}
html.theme-dark .nav-item:hover{ background: rgba(59,130,246,.12); }
html.theme-dark .nav-ico{ background: rgba(148,163,184,.10); }
html.theme-dark .nav-item.is-active{
  background: linear-gradient(90deg, rgba(37,99,235,.28), rgba(37,99,235,.12));
  border-color: rgba(96,165,250,.38);
}

html.theme-dark .side-action{
  background: rgba(15,23,42,.52);
  border-color: rgba(148,163,184,.20);
}
html.theme-dark .side-action:hover{ background: rgba(15,23,42,.82); }

html.theme-dark .ui-card,
html.theme-dark .card,
html.theme-dark .it-card,
html.theme-dark .wiz-itabs,
html.theme-dark .it-tabbar,
html.theme-dark .ww-tabs,
html.theme-dark .tabs [role="tab"][aria-selected="true"],
html.theme-dark .tab-active{
  background: var(--panel-bg) !important;
  color: var(--text-main);
  border-color: rgba(148,163,184,.20) !important;
}

html.theme-dark .ui-card__title,
html.theme-dark .wiz-title,
html.theme-dark .stepper .step.is-active .txt span,
html.theme-dark .it-tab[aria-selected="true"],
html.theme-dark .ww-tab[aria-selected="true"]{
  color:#e2e8f0;
}
html.theme-dark .ui-card__desc,
html.theme-dark .wiz-sub,
html.theme-dark .stepper .txt span,
html.theme-dark .stepper .txt small,
html.theme-dark .pager__info,
html.theme-dark .chip{ color:#94a3b8; }

html.theme-dark .chip,
html.theme-dark .it-pill,
html.theme-dark .icon-btn,
html.theme-dark .ui-select,
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select{
  background-color: rgba(15,23,42,.55);
  border-color: rgba(148,163,184,.25);
  color:#e2e8f0;
}

html.theme-dark input[type="checkbox"],
html.theme-dark input[type="radio"]{
  accent-color:#60a5fa;
  background-color: rgba(2,6,23,.8);
  border-color: rgba(148,163,184,.45);
}

html.theme-dark input[type="checkbox"]:focus-visible,
html.theme-dark input[type="radio"]:focus-visible{
  outline: 2px solid rgba(96,165,250,.55);
  outline-offset: 2px;
}

html.theme-dark input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
}

html.theme-dark .btn-outline{background:rgba(15,23,42,0.65);color:#e2e8f0;border-color:rgba(148,163,184,0.25)}
html.theme-dark .btn-outline:hover{background:rgba(15,23,42,0.8)}

html.theme-dark .btn-soft{background:rgba(148,163,184,0.12);color:#e2e8f0;border-color:rgba(148,163,184,0.25)}
html.theme-dark .btn-soft:hover{background:rgba(148,163,184,0.18)}

html.theme-dark .ae-textarea{
  background:rgba(15,23,42,0.65);
  border-color:rgba(148,163,184,0.25);
  color:#e2e8f0;
}
html.theme-dark .ae-textarea:focus{
  border-color:rgba(96,165,250,0.55);
  box-shadow:0 0 0 3px rgba(96,165,250,0.22);
}
html.theme-dark .btn-ghost{ color:#cbd5e1; }
html.theme-dark .btn-ghost:hover{ background: rgba(148,163,184,.12); color:#fda4af; }

/* Tailwind utility remap used across templates */
html.theme-dark .bg-white,
html.theme-dark .bg-white\/60,
html.theme-dark .bg-white\/70,
html.theme-dark .bg-white\/80,
html.theme-dark .bg-white\/90,
html.theme-dark .bg-slate-50,
html.theme-dark .bg-slate-50\/60,
html.theme-dark .bg-slate-50\/70,
html.theme-dark .bg-slate-100,
html.theme-dark .bg-slate-200,
html.theme-dark .bg-slate-200\/70,
html.theme-dark .bg-gray-50,
html.theme-dark .bg-gray-100,
html.theme-dark .bg-gray-200,
html.theme-dark .bg-gray-200\/70{ background-color: var(--panel-bg) !important; }

/* ===== Dark theme: semantic tints (indigo / emerald / amber) ===== */

/* Indigo */
html.theme-dark .bg-indigo-50,
html.theme-dark .bg-indigo-50\/50{
  background-color: rgba(99,102,241,0.14) !important;
}
html.theme-dark .border-indigo-200,
html.theme-dark .border-indigo-100{
  border-color: rgba(99,102,241,0.25) !important;
}
html.theme-dark .text-indigo-900,
html.theme-dark .text-indigo-800,
html.theme-dark .text-indigo-700,
html.theme-dark .text-indigo-600{
  color: #c7d2fe !important;
}

/* Emerald (success) */
html.theme-dark .bg-emerald-50,
html.theme-dark .bg-emerald-50\/40,
html.theme-dark .bg-emerald-50\/60{
  background-color: rgba(16,185,129,0.12) !important;
}
html.theme-dark .border-emerald-200,
html.theme-dark .border-emerald-100{
  border-color: rgba(16,185,129,0.25) !important;
}
html.theme-dark .text-emerald-900,
html.theme-dark .text-emerald-800,
html.theme-dark .text-emerald-700{
  color: #a7f3d0 !important;
}

/* Amber (warning) */
html.theme-dark .bg-amber-50,
html.theme-dark .bg-amber-100{
  background-color: rgba(245,158,11,0.12) !important;
}
html.theme-dark .border-amber-200{
  border-color: rgba(245,158,11,0.30) !important;
}
html.theme-dark .text-amber-700,
html.theme-dark .text-amber-800{
  color:#fdba74 !important;
}

html.theme-dark .from-white,
html.theme-dark .via-white,
html.theme-dark .to-white,
html.theme-dark .from-slate-50,
html.theme-dark .to-slate-50,
html.theme-dark .to-slate-50\/70,
html.theme-dark .to-indigo-50\/50,
html.theme-dark .to-emerald-50\/60{
  --tw-gradient-from: rgba(15,23,42,.62) var(--tw-gradient-from-position) !important;
  --tw-gradient-via: rgba(15,23,42,.58) var(--tw-gradient-via-position) !important;
  --tw-gradient-to: rgba(15,23,42,.55) var(--tw-gradient-to-position) !important;
}

html.theme-dark .border-slate-200,
html.theme-dark .border-slate-200\/70,
html.theme-dark .border-slate-200\/60,
html.theme-dark .border-slate-200\/80,
html.theme-dark .border-slate-300,
html.theme-dark .border-gray-200,
html.theme-dark .border-gray-200\/70,
html.theme-dark .border-gray-300{ border-color: rgba(148,163,184,.22) !important; }

html.theme-dark .text-slate-900,
html.theme-dark .text-gray-900,
html.theme-dark .text-slate-800,
html.theme-dark .text-gray-800,
html.theme-dark .text-black{ color:#e2e8f0 !important; }

html.theme-dark .text-slate-700,
html.theme-dark .text-gray-700,
html.theme-dark .text-slate-600,
html.theme-dark .text-gray-600,
html.theme-dark .text-slate-500,
html.theme-dark .text-gray-500,
html.theme-dark .text-slate-400,
html.theme-dark .text-gray-400{ color:#94a3b8 !important; }


html.theme-dark .hover\:bg-white:hover,
html.theme-dark .hover\:bg-white\/80:hover,
html.theme-dark .hover\:bg-slate-50:hover,
html.theme-dark .hover\:bg-gray-50:hover{ background-color: rgba(30,41,59,.72) !important; }

html.theme-dark .billing-plans .billing-plans__header,
html.theme-dark .billing-plans .billing-plans__current{
  background: var(--panel-muted) !important;
  background-image: none !important;
}

html.theme-dark .hover\:text-slate-900:hover,
html.theme-dark .hover\:text-gray-900:hover{ color:#f8fafc !important; }

html.theme-dark .docs-chip{
  border-color: rgba(148,163,184,.22) !important;
  background: rgba(15,23,42,.55) !important;
  color:#cbd5e1;
}
html.theme-dark .docs-code{
  border-color: rgba(148,163,184,.24) !important;
  background: rgba(2,6,23,.45) !important;
  color:#e2e8f0;
}

html.theme-dark .it-tab{
  color:#cbd5e1;
}
html.theme-dark .it-tab:hover{
  background: rgba(30,41,59,.72);
  border-color: rgba(148,163,184,.25);
}
html.theme-dark .it-tab[aria-selected="true"]{
  background: rgba(30,41,59,.9);
  border-color: rgba(96,165,250,.45);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

html.theme-dark .ww-tab{
  color:#cbd5e1;
}
html.theme-dark .ww-tab:hover{
  background: rgba(30,41,59,.72);
  border-color: rgba(148,163,184,.25);
}
html.theme-dark .ww-tab[aria-selected="true"]{
  background: rgba(15,23,42,.85);
  border-color: rgba(96,165,250,.35);
}

html.theme-dark .billing-progress{
  background: rgba(2,6,23,.75) !important;
  border: 1px solid rgba(148,163,184,.25);
}
html.theme-dark .billing-progress__fill{
  box-shadow: inset 0 0 0 1px rgba(2,6,23,.25);
}

html.theme-dark .theme-toggle__track{
  background: rgba(148,163,184,.4);
  border: 1px solid rgba(226,232,240,.4);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.35);
}
html.theme-dark .theme-toggle__thumb{
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.35);
  box-shadow: 0 3px 10px rgba(2,6,23,.55);
}

html.theme-dark ::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
html.theme-dark ::-webkit-scrollbar-track{
  background: rgba(2,6,23,.65);
}
html.theme-dark ::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
  border-radius: 999px;
  border: 2px solid rgba(2,6,23,.65);
}

/* =========================
   Dropdown / context menu (⋯)
   ========================= */
.ui-dd{
  position:absolute;
  top:.75rem;
  right:.75rem;
  z-index:20;
}
.ui-dd__btn{
  font-size:18px;
  line-height:1;
}
.ui-dd__menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  padding:.35rem;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:.85rem;
  box-shadow:0 16px 40px rgba(2,6,23,.18);
}
.ui-dd__menu--left{
  right:auto;
  left:0;
}
.ui-dd__item{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  padding:.55rem .65rem;
  border-radius:.65rem;
  font-size:.875rem;
  color:#0f172a;
  text-decoration:none;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
}
.ui-dd__item:hover{ background: rgba(15,23,42,.04); }
.ui-dd__item--danger{ color:#b91c1c; }
.ui-dd__item--danger:hover{ background: rgba(239,68,68,.10); }
.ui-dd__sep{
  height:1px;
  background: rgba(15,23,42,.08);
  margin:.35rem .35rem;
}

/* focus for clickable cards */
[data-card-link]:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.22);
  border-radius: .9rem;
}

/* =========================
   Pickers (color/icon)
   ========================= */
.ui-picker-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:.55rem .7rem;
  border-radius:.75rem;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ui-picker-btn:hover{
  background:#fff;
  border-color: rgba(15,23,42,.14);
}
.ui-picker-preview{
  width:28px;
  height:28px;
  border-radius:.65rem;
  border:1px solid rgba(15,23,42,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}
.ui-picker-opt{
  width:40px;
  height:40px;
  border-radius:.75rem;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.ui-picker-opt:hover{ transform: translateY(-1px); }
.ui-picker-opt[aria-selected="true"]{
  border-color: rgba(37,99,235,.9);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* dark theme */
html.theme-dark .ui-dd__menu{
  background: rgba(15,23,42,.98);
  border-color: rgba(148,163,184,.22);
}
html.theme-dark .ui-dd__item{ color:#e2e8f0; }
html.theme-dark .ui-dd__item:hover{ background: rgba(148,163,184,.10); }
html.theme-dark .ui-dd__sep{ background: rgba(148,163,184,.18); }

html.theme-dark .ui-picker-btn{
  background: rgba(15,23,42,.65);
  border-color: rgba(148,163,184,.25);
}
html.theme-dark .ui-picker-btn:hover{
  background: rgba(30,41,59,.75);
}
html.theme-dark .ui-picker-opt{
  background: rgba(15,23,42,.60);
  border-color: rgba(148,163,184,.22);
}
html.theme-dark .ui-picker-opt[aria-selected="true"]{
  border-color: rgba(96,165,250,.65);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* ======================================================================
   Sidebar v2 — корпоративная полировка (добавьте в конец styles.css)
   ====================================================================== */

/* Section headers */
.nav-section{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.nav-section__label{
  padding: .25rem .75rem;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(100,116,139,.95);
}
html.sidebar-collapsed .nav-section__label{ display:none !important; }

/* Make icons look like “enterprise” line icons */
.nav-ico{
  background: transparent !important;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 12px;
  color: rgba(100,116,139,.95);
}
.nav-ico svg{
  width: 18px;
  height: 18px;
  display:block;
  stroke: currentColor;
  stroke-width: 2;
}
.nav-item:hover .nav-ico{
  background: rgba(15,23,42,.04) !important;
  color: rgba(15,23,42,.82);
}
.nav-item.is-active .nav-ico{
  background: rgba(37,99,235,.12) !important;
  color: rgba(30,64,175,1);
}

/* Slightly more “corporate” typography + less jumpy hover */
.nav-item{
  border-radius: 12px;
  font-weight: 800;
}
.nav-item:hover{ transform:none; }
.nav-item:active{ transform: scale(.99); }
html.sidebar-collapsed .nav-item:active{ transform:none; }

/* Primary CTA in sidebar (Create assistant) */
.side-action--primary{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.22);
}
.side-action--primary:hover{
  background: rgba(37,99,235,.16);
  border-color: rgba(37,99,235,.28);
}
.side-action--primary .side-action__ico{
  color: rgba(30,64,175,1);
}
.side-action__ico svg{
  width: 18px;
  height: 18px;
  display:block;
  stroke: currentColor;
  stroke-width: 2;
}

/* Account block (bottom) */
.sidebar-user{ position: relative; }
.sidebar-user__btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.6rem .65rem;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.sidebar-user__btn:hover{
  background:#fff;
  border-color: rgba(15,23,42,.16);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
  transform: translateY(-1px);
}
.sidebar-user__btn:active{ transform: translateY(0) scale(.99); }

.sidebar-user__avatar{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(37,99,235,.14);
  color: rgba(30,64,175,1);
  flex: 0 0 auto;
}
.sidebar-user__name{
  font-weight: 900;
  font-size: .9rem;
  color:#0f172a;
  line-height: 1.1;
}
.sidebar-user__meta{
  font-size: 12px;
  color: rgba(100,116,139,.95);
  margin-top: 2px;
}
.sidebar-user__chev{
  margin-left:auto;
  width: 18px;
  height: 18px;
  color: rgba(100,116,139,.95);
  flex: 0 0 auto;
  transition: transform .12s ease;
}
.sidebar-user__btn[aria-expanded="true"] .sidebar-user__chev{ transform: rotate(180deg); }

.sidebar-user__menu{
  position:absolute;
  left:0;
  bottom: calc(100% + 10px);
  width: 100%;
  min-width: 220px;
  padding: .5rem;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 50px rgba(2,6,23,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 50;
}

.sidebar-menu__item{
  width:100%;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding: .55rem .6rem;
  border-radius: 12px;
  color:#0f172a;
  font-weight: 900;
  font-size: .875rem;
  text-decoration:none;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.sidebar-menu__item:hover{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.06);
}
.sidebar-menu__item:active{ transform: scale(.99); }
.sidebar-menu__item--danger{
  color: rgba(185,28,28,1);
}
.sidebar-menu__item--danger:hover{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.18);
}

.sidebar-menu__ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.sidebar-menu__ico svg{
  width: 18px;
  height: 18px;
  display:block;
  stroke: currentColor;
  stroke-width: 2;
}

.sidebar-menu__sep{
  height: 1px;
  margin: .4rem .25rem;
  background: rgba(148,163,184,.45);
}

/* Collapsed mode: keep avatar nice and center things */
html.sidebar-collapsed .sidebar-user__btn{
  justify-content:center;
  padding: .6rem;
}
html.sidebar-collapsed .sidebar-user__avatar{
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
html.sidebar-collapsed .sidebar-user__chev{ display:none; }

/* IMPORTANT:
   Pseudo-tooltips in collapsed mode cause horizontal scrollbar (because ::after exists outside sidebar).
   We use native title="" tooltips in sidebar.html instead. */
html.sidebar-collapsed .nav-item[data-tooltip]::after{
  content: none !important;
}

/* Dark theme */
html.theme-dark .nav-section__label{ color: rgba(148,163,184,.80); }

html.theme-dark .nav-ico{ color: rgba(148,163,184,.92); }
html.theme-dark .nav-item:hover .nav-ico{
  background: rgba(148,163,184,.10) !important;
  color: #e2e8f0;
}
html.theme-dark .nav-item.is-active .nav-ico{
  background: rgba(96,165,250,.18) !important;
  color: #bfdbfe;
}

html.theme-dark .side-action--primary{
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.26);
}
html.theme-dark .side-action--primary .side-action__ico{ color: #bfdbfe; }

html.theme-dark .sidebar-user__btn{
  background: rgba(2,6,23,.52);
  border-color: rgba(148,163,184,.20);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
html.theme-dark .sidebar-user__btn:hover{
  background: rgba(2,6,23,.62);
  border-color: rgba(148,163,184,.26);
}
html.theme-dark .sidebar-user__name{ color: #e2e8f0; }
html.theme-dark .sidebar-user__meta{ color: rgba(148,163,184,.85); }
html.theme-dark .sidebar-user__avatar{
  background: rgba(96,165,250,.18);
  color: #bfdbfe;
}
html.theme-dark .sidebar-user__menu{
  background: rgba(2,6,23,.82);
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 28px 60px rgba(0,0,0,.55);
}
html.theme-dark .sidebar-menu__item{ color: #e2e8f0; }
html.theme-dark .sidebar-menu__item:hover{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.12);
}
html.theme-dark .sidebar-menu__sep{ background: rgba(148,163,184,.25); }
html.theme-dark .sidebar-menu__item--danger{ color: #fecaca; }
html.theme-dark .sidebar-menu__item--danger:hover{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.22);
}

/* =========================================================
   Light theme — normalize Tailwind form borders
   ========================================================= */

html:not(.theme-dark) input.border-gray-200\/70,
html:not(.theme-dark) select.border-gray-200\/70,
html:not(.theme-dark) textarea.border-gray-200\/70,
html:not(.theme-dark) input.border-slate-200\/70,
html:not(.theme-dark) select.border-slate-200\/70,
html:not(.theme-dark) textarea.border-slate-200\/70,
html:not(.theme-dark) input.border-gray-200,
html:not(.theme-dark) select.border-gray-200,
html:not(.theme-dark) textarea.border-gray-200,
html:not(.theme-dark) input.border-slate-200,
html:not(.theme-dark) select.border-slate-200,
html:not(.theme-dark) textarea.border-slate-200{
  border-color: var(--ui-control-border) !important;
}

html:not(.theme-dark) input.border-gray-200\/70:hover,
html:not(.theme-dark) select.border-gray-200\/70:hover,
html:not(.theme-dark) textarea.border-gray-200\/70:hover,
html:not(.theme-dark) input.border-slate-200\/70:hover,
html:not(.theme-dark) select.border-slate-200\/70:hover,
html:not(.theme-dark) textarea.border-slate-200\/70:hover{
  border-color: var(--ui-control-border-hover) !important;
}

/* Добавляем “дорогой” фокус там, где Tailwind его не задаёт */
html:not(.theme-dark) input.border-gray-200\/70:focus,
html:not(.theme-dark) select.border-gray-200\/70:focus,
html:not(.theme-dark) textarea.border-gray-200\/70:focus,
html:not(.theme-dark) input.border-slate-200\/70:focus,
html:not(.theme-dark) select.border-slate-200\/70:focus,
html:not(.theme-dark) textarea.border-slate-200\/70:focus{
  outline: none;
  border-color: var(--ui-control-border-focus) !important;
  box-shadow: 0 0 0 3px var(--ui-control-ring);
}

/* ------------------------------
   UI: Autosubmit fullscreen overlay (Analytics)
-------------------------------- */
html.autosubmit-loading { overflow: hidden; }
.autosubmit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
}
.autosubmit-overlay__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.7);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.autosubmit-overlay__text {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.autosubmit-spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2.5px solid rgba(148, 163, 184, 0.35);
  border-top-color: rgba(37, 99, 235, 0.95);
  animation: autosubmitSpin 1s linear infinite;
}
@keyframes autosubmitSpin {
  to { transform: rotate(360deg); }
}

html.theme-dark .autosubmit-overlay { background: rgba(0, 0, 0, 0.35); }
html.theme-dark .autosubmit-overlay__card {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.92);
}
html.theme-dark .autosubmit-overlay__text { color: #e2e8f0; }

/* ------------------------------
   Dark theme: missing palette overrides
-------------------------------- */
html.theme-dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(148, 163, 184, 0.22) !important;
}
html.theme-dark .divide-slate-200\/70 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html.theme-dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; }
html.theme-dark .border-rose-200 { border-color: rgba(244, 63, 94, 0.35) !important; }
html.theme-dark .text-rose-700 { color: #fda4af !important; }
html.theme-dark .text-rose-800 { color: #fecdd3 !important; }
html.theme-dark .text-rose-900 { color: #fecdd3 !important; }
html.theme-dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.16) !important; }


/* =========================================================
   LK THEME (Кабинет) — карточки в стиле landing/index.html
   Единый радиус/бордер/тень + верхняя подсветка ("cap")
   ========================================================= */

:root{
  --lk-card-radius: 18px;

  /* бордер и тени (light) */
  --lk-card-border: rgba(15,23,42,0.10);
  --lk-card-shadow: 0 14px 40px rgba(2,6,23,0.08);
  --lk-card-shadow-hover: 0 22px 64px rgba(2,6,23,0.12);

  /* верхняя подсветка, как .card__cap на лендинге */
  --lk-cap-1: radial-gradient(520px 220px at 18% 0%, rgba(37,99,235,0.18), transparent 60%);
  --lk-cap-2: radial-gradient(520px 220px at 82% 0%, rgba(99,102,241,0.12), transparent 60%);
}

html.theme-dark{
  /* бордер и тени (dark) */
  --lk-card-border: rgba(148,163,184,0.22);
  --lk-card-shadow: 0 18px 58px rgba(0,0,0,0.42);
  --lk-card-shadow-hover: 0 26px 86px rgba(0,0,0,0.52);

  --lk-cap-1: radial-gradient(520px 220px at 18% 0%, rgba(96,165,250,0.18), transparent 62%);
  --lk-cap-2: radial-gradient(520px 220px at 82% 0%, rgba(129,140,248,0.14), transparent 62%);
}

/* ===== Универсальная "панель" для любых блоков кабинета ===== */
.lk-panel{
  background: var(--panel-bg, #fff);
  border: 1px solid var(--lk-card-border);
  border-radius: var(--lk-card-radius);
  box-shadow: var(--lk-card-shadow);
}

/* Hover эффект — включаем явно, чтобы формы/таблицы не “прыгали” */
.lk-panel--hover{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lk-panel--hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--lk-card-shadow-hover);
}

/* Верхняя подсветка (“cap”) — как на landing карточках */
.lk-panel--cap{
  position: relative;
  z-index: 0; /* фикс для ::before с z-index:-1 */
}
.lk-panel--cap::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 86px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events:none;
  background: var(--lk-cap-1), var(--lk-cap-2);
  opacity: .95;
  z-index: -1; /* уводим подсветку под контент */
}

/* ===== Апгрейд существующих .ui-card (карточки ассистентов на /dashboard) ===== */
.ui-card{
  border-radius: var(--lk-card-radius);
  border-color: var(--lk-card-border);
  box-shadow: var(--lk-card-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ui-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--lk-card-shadow-hover);
}

/* Cap для ui-card — без правок HTML */
.ui-card{
  position: relative;
  z-index: 0; /* важно, чтобы ::before не “утекал” */
}
.ui-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 86px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events:none;
  background: var(--lk-cap-1), var(--lk-cap-2);
  opacity: .95;
  z-index: -1;
}

/* “Создать бота” (dashed card) — без подсветки и без “подпрыгивания” */
.ui-card[data-create-card]::before{ display:none; }
.ui-card[data-create-card]:hover{
  transform: none;
  box-shadow: none;
}

/* =========================================================
   LK UNIFIED DESIGN (cabinet) — 2026-02
   Единый стиль блоков внутри личного кабинета.
   Без синей градиентной подсветки шапок (cap нейтральный и отключаемый).
   ========================================================= */

.app-shell{
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tokens работают внутри всего кабинета (#app-main),
   чтобы работали и в page_header (он находится ВНЕ #app-content). */
#app-main{
  --lk-radius-lg: 18px;
  --lk-radius-md: 14px;
  --lk-radius-sm: 12px;

  /* стандарты расстояний */
  --lk-stack-gap: 24px;   /* отступ после шапки (.lk-bar) до следующего блока */
  --lk-sticky-top: 24px;  /* совпадает с main padding-top (p-6) */

  /* surfaces */
  --lk-surface: rgba(255,255,255,.86);
  --lk-surface-solid: rgba(255,255,255,.94);
  --lk-surface-muted: rgba(248,250,252,.74);

  /* borders */
  --lk-border: rgba(15,23,42,.10);
  --lk-border-strong: rgba(15,23,42,.14);


  /* controls (inputs/selects/filters) */
  --lk-control-radius: 14px;
  --lk-control-border: rgba(15,23,42,.18);
  --lk-control-border-hover: rgba(15,23,42,.26);
  --lk-control-border-focus: rgba(37,99,235,.45);
  --lk-control-ring: rgba(37,99,235,.16);

  /* shadows */
  --lk-shadow-sm: 0 6px 18px rgba(2,6,23,.06);
  --lk-shadow-md: 0 14px 46px rgba(2,6,23,.08);
  --lk-shadow-xl: 0 26px 86px rgba(2,6,23,.12);
  --lk-shadow-hover: 0 32px 96px rgba(2,6,23,.14);

  /* focus ring */
  --lk-ring: rgba(37,99,235,.22);

  /* OPTIONAL cap (нейтральный, НЕ синий).
     Если вообще не нужна подсветка верхней части — поставь:
     --lk-cap-1: none;
     --lk-cap-2: none;
  */
  --lk-cap-1: radial-gradient(800px 240px at 22% 0%, rgba(255,255,255,.75), transparent 60%);
  --lk-cap-2: radial-gradient(760px 220px at 78% 0%, rgba(255,255,255,.55), transparent 62%);

  /* совместимость с твоим inline-оверрайдом в base.html:
     .ui-card/.card фон берётся из --panel-bg */
  --panel-bg: var(--lk-surface);
  --panel-muted: var(--lk-surface-muted);
  --border-main: var(--lk-border);
}

/* lg:p-8 => 32px; чтобы sticky header не "ехал" при первом скролле */
@media (min-width: 1024px){
  #app-main{ --lk-sticky-top: 32px; }
}

html.theme-dark #app-main{
  --lk-surface: rgba(13,22,37,.88);
  --lk-surface-solid: rgba(13,22,37,.94);
  --lk-surface-muted: rgba(10,18,32,.80);

  --lk-border: rgba(148,163,184,.22);
  --lk-border-strong: rgba(148,163,184,.30);


  /* controls (inputs/selects/filters) */
  --lk-control-radius: 14px;
  --lk-control-border: rgba(148,163,184,.34);
  --lk-control-border-hover: rgba(148,163,184,.44);
  --lk-control-border-focus: rgba(96,165,250,.55);
  --lk-control-ring: rgba(96,165,250,.22);

  --lk-shadow-sm: 0 10px 30px rgba(0,0,0,.35);
  --lk-shadow-md: 0 18px 60px rgba(0,0,0,.45);
  --lk-shadow-xl: 0 30px 96px rgba(0,0,0,.60);
  --lk-shadow-hover: 0 36px 110px rgba(0,0,0,.68);

  --lk-ring: rgba(96,165,250,.28);

  --lk-cap-1: radial-gradient(800px 240px at 22% 0%, rgba(255,255,255,.08), transparent 60%);
  --lk-cap-2: radial-gradient(760px 220px at 78% 0%, rgba(255,255,255,.06), transparent 62%);

  --panel-bg: var(--lk-surface);
  --panel-muted: var(--lk-surface-muted);
  --border-main: var(--lk-border);
}

/* =========================================================
   Tailwind remap (только внутри #app-content):
   “перекрашивает” текущие блоки во всех шаблонах без правок HTML
   ========================================================= */

#app-content .bg-white,
#app-content .bg-white\/50,
#app-content .bg-white\/60,
#app-content .bg-white\/70,
#app-content .bg-white\/80,
#app-content .bg-white\/90{
  background-color: var(--lk-surface) !important;
}

#app-content .bg-slate-50,
#app-content .bg-slate-50\/60,
#app-content .bg-slate-50\/70,
#app-content .bg-slate-100,
#app-content .bg-slate-100\/60,
#app-content .bg-slate-100\/70{
  background-color: var(--lk-surface-muted) !important;
}

#app-content .border-slate-200,
#app-content .border-slate-200\/70,
#app-content .border-gray-200,
#app-content .border-gray-200\/70{
  border-color: var(--lk-border) !important;
}

/* ring-1 ring-slate-200 (таб-карточки и т.п.) */
#app-content .ring-1.ring-slate-200,
#app-content .ring-1.ring-slate-200\/70{
  --tw-ring-color: var(--lk-border) !important;
}

/* большие радиусы для контейнеров */
#app-content .rounded-xl,
#app-content .rounded-2xl{
  border-radius: var(--lk-radius-lg) !important;
}

/* unify shadows */
#app-content .shadow-sm,
#app-content .shadow{
  box-shadow: var(--lk-shadow-sm) !important;
}
#app-content .shadow-lg{
  box-shadow: var(--lk-shadow-md) !important;
}
#app-content .shadow-xl{
  box-shadow: var(--lk-shadow-xl) !important;
}

/* =========================================================
   Components: lk-panel / lk-bar / lk-iconbtn
   ========================================================= */

.lk-panel{
  background: var(--lk-surface);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  box-shadow: var(--lk-shadow-md);
}

.lk-panel--solid{ background: var(--lk-surface-solid); }
.lk-panel--muted{ background: var(--lk-surface-muted); }
.lk-panel--pad{ padding: 20px; }
.lk-panel--pad-sm{ padding: 14px; }
.lk-panel--pad-lg{ padding: 24px; }

.lk-panel--hover{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lk-panel--hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--lk-shadow-hover);
  border-color: var(--lk-border-strong);
}

/* Optional cap (нейтральный) — FIX: не клипаем popover/dropdown по умолчанию */
.lk-panel--cap{
  position: relative;
  overflow: visible; /* важно: dropdown меню больше не обрезается */
}

/* Если где-то реально нужно клипать контент панели — оставляем эту возможность
   через tailwind-класс overflow-hidden в разметке: class="lk-panel lk-panel--cap overflow-hidden" */
.lk-panel--cap.overflow-hidden{
  overflow: hidden;
}

.lk-panel--cap::before{
  content:"";
  position:absolute;

  /* было: -1px; при overflow:visible это начинает “вылезать” за рамку */
  left: 0;
  right: 0;
  top: 0;

  height: 92px;
  pointer-events:none;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: var(--lk-cap-1), var(--lk-cap-2);
  opacity: .95;

  /* гарантируем, что cap-подложка под контентом */
  z-index: 0;
}

/* контент панели выше подложки */
.lk-panel--cap > *{
  position: relative;
  z-index: 1;
}

/* Section bar */
.lk-bar{
  background: var(--lk-surface);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  box-shadow: var(--lk-shadow-md);
  padding: 14px 16px;
  margin-bottom: var(--lk-stack-gap, 24px);
}
@media (min-width: 640px){
  .lk-bar{ padding: 16px 18px; }
}
@media (min-width: 1024px){
  .lk-bar{ padding: 18px 20px; }
}

.lk-bar--sticky{
  position: sticky;
  top: var(--lk-sticky-top, 0px);
  z-index: 60;
  background: var(--lk-surface-solid);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* Sticky stack: фиксируем шапку + панели фильтров/табов одним блоком */
.lk-sticky-stack{
  position: sticky;
  top: var(--lk-sticky-top, 0px);
  z-index: 65;
}

/* Пин-стиль: когда .lk-bar внутри стека — выглядит как закреплённая шапка */
.lk-sticky-stack .lk-bar{
  background: var(--lk-surface-solid);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lk-bar__row{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
@media (min-width: 640px){
  .lk-bar__row{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

.lk-bar__left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.lk-bar__titles{ min-width: 0; }
.lk-bar__actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (min-width: 640px){
  .lk-bar__actions{ flex-wrap: nowrap; }
}

.lk-bar__title{
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  white-space: normal;
}
.lk-bar__subtitle{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft);
  white-space: normal;
}

.lk-iconbtn{
  width: 38px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--lk-radius-md);
  border: 1px solid var(--lk-border);
  background: var(--lk-surface-solid);
  color: var(--text-main);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: var(--lk-shadow-sm);
}
.lk-iconbtn:hover{
  transform: translateY(-1px);
  border-color: var(--lk-border-strong);
  background: var(--lk-surface);
  box-shadow: var(--lk-shadow-md);
}
.lk-iconbtn:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--lk-ring), var(--lk-shadow-sm);
}

/* Dashboard cards (.ui-card) — привести к общей теме */
#app-content .ui-card{
  border-radius: var(--lk-radius-lg) !important;
  border-color: var(--lk-border) !important;
  box-shadow: var(--lk-shadow-md) !important;
  background: var(--lk-surface) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#app-content .ui-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--lk-shadow-hover) !important;
  border-color: var(--lk-border-strong) !important;
}

/* Если у тебя уже был "cap" на ui-card через ::before — выключаем (по твоей просьбе) */
#app-content .ui-card::before{
  content: none !important;
  display: none !important;
}

/* Buttons + controls polish (весь кабинет, включая page_header) */
#app-main .btn{
  border-radius: var(--lk-radius-md);
}
#app-main .btn:focus{
  box-shadow: 0 0 0 3px var(--lk-ring);
}

/* ВАЖНО:
   background-color (не background) — чтобы НЕ убивать стрелку у .ui-select (background-image) */
#app-main .ui-input,
#app-main .ui-select{
  border-radius: var(--lk-control-radius);
  background-color: var(--lk-surface-solid);

  /* FIX: рамка задаётся целиком (width/style/color),
     поэтому её не сможет "обнулить" reset/preflight */
  border: 1px solid var(--lk-control-border) !important;
}

#app-main .ui-input:hover,
#app-main .ui-select:hover{
  border-color: var(--lk-control-border-hover) !important;
}

#app-main .ui-input:focus,
#app-main .ui-select:focus,
#app-main .ui-input:focus-visible,
#app-main .ui-select:focus-visible{
  border-color: var(--lk-control-border-focus) !important;
  box-shadow: 0 0 0 3px var(--lk-control-ring);
}

/* =========================================================
   FIX: верхние "шапки" кабинета не должны быть sticky
   (убираем эффект "ездят при скролле")
   ========================================================= */

#app-main .lk-bar--sticky,
#app-main .lk-sticky-stack{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* Чтобы визуально стали как обычные карточки (без blur-подложки sticky-режима) */
#app-main .lk-bar--sticky,
#app-main .lk-sticky-stack .lk-bar{
  background: var(--lk-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   FIX: вертикальное центрирование текста в фильтрах
   (ui-input/ui-select с фиксированной высотой h-10 / h-9)
   ========================================================= */

/* h-10 = 40px (Tailwind) -> content box 38px (минус 2px border) */
.ui-input.h-10,
.ui-select.h-10 {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 38px;
}

/* h-9 = 36px (Tailwind) -> content box 34px */
.ui-input.h-9,
.ui-select.h-9 {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 34px;
}

/* Analytics: компактный select метрик (height: 2rem = 32px) */
.metric-select {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 30px; /* 32px - 2px border */
}


/* ======================================================================
   FIX: красивое вертикальное выравнивание текста в фильтрах (как в "Диалоги")
   - input'ы (ui-input) можно центровать line-height'ом
   - select'ы (ui-select) НЕ надо центровать огромным line-height'ом (это часто ломает отрисовку);
     достаточно убрать вертикальные паддинги и дать line-height: normal
   ====================================================================== */

/* h-10 (Tailwind) = 40px */
.ui-input.h-10{
  padding-top: 0;
  padding-bottom: 0;
  line-height: 38px; /* 40px - 2px border */
}

/* --- FIX: нативные select в фильтрах (ui-select + h-9/h-10) ---
   Было: padding-top/bottom: 0 → текст прилипал к верхней дуге.
   Стало: возвращаем нормальные вертикальные отступы, как в базовом ui-select.
*/

/* h-10 (Tailwind) = 40px */
select.ui-select.h-10{
  padding-top: .55rem;
  padding-bottom: .55rem;
  line-height: 1.2;
}

/* h-9 (Tailwind) = 36px */
.ui-input.h-9{
  padding-top: 0;
  padding-bottom: 0;
  line-height: 34px; /* 36px - 2px border */
}

select.ui-select.h-9{
  padding-top: .5rem;
  padding-bottom: .5rem;
  line-height: 1.2;
}

/* На всякий случай: если где-то select по ошибке имеет И ui-input И ui-select —
   пусть select-правило выигрывает */
select.ui-input.ui-select.h-10,
select.ui-input.ui-select.h-9{
  line-height: normal;
}

/* =========================================================
   Emoji inside framed icons (ZWJ/"double" emoji safe)
   Пример проблемы: 🧑‍💻 иногда рендерится как 🧑 + 💻 (двойной),
   из-за чего "рамка" выглядит криво. Мы:
   - фиксируем центрирование
   - запрещаем перенос
   - даём JS-у возможность скейлить через CSS-переменную
   ========================================================= */

[data-emoji-frame]{
  /* рамка всегда аккуратная */
  overflow: hidden;

  /* на случай если где-то забыли flex-классы */
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-emoji-glyph]{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  transform-origin: center;

  /* JS будет менять только scale */
  --emoji-scale: 1;
  --emoji-y: 0px; /* если захочешь микросдвиг вниз: 0.5px или 1px */
  transform: translateY(var(--emoji-y)) scale(var(--emoji-scale));

  user-select: none;
}

/* =========================================================
   Knowledge Files Manager (KFM) — solid white surface
   Делает модалку не “серой/стеклянной”, а белой.
   ========================================================= */
#k-manager-overlay .kfm-surface{
  background:#fff !important;
}
html.theme-dark #k-manager-overlay .kfm-surface{
  background: var(--panel-bg) !important;
}

/* Dropzone: active drag-over state */
#k-manager-overlay #k-modal-drop{
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#k-manager-overlay #k-modal-drop.is-dragover{
  border-color: rgba(37,99,235,.55) !important;
  background: rgba(37,99,235,.06) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
#k-manager-overlay #k-modal-drop.is-dragover .kfm-dropzone__icon{
  background: rgba(37,99,235,.12) !important;
  color: rgba(37,99,235,1) !important;
}

/* Knowledge manager: smooth progress bar */
#k-manager-overlay #k-modal-uploading-bar{
  transition: width .2s ease;
}


/* =========================================================
   KFM (Knowledge Files Manager) — Dropzone + Activity bar
   ========================================================= */

/* Dropzone base */
#k-manager-overlay .kfm-dropzone{
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  border-color: rgba(15,23,42,.12);
}

html.theme-dark #k-manager-overlay .kfm-dropzone{
  background: linear-gradient(180deg, rgba(13,22,37,1) 0%, rgba(10,18,32,1) 100%);
  border-color: rgba(148,163,184,.28);
}

/* Icon block */
#k-manager-overlay .kfm-dropzone__icon{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
  color: rgba(71,85,105,1);
}

html.theme-dark #k-manager-overlay .kfm-dropzone__icon{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.14);
  color: rgba(226,232,240,1);
}

/* Filetype chips */
#k-manager-overlay .kfm-filetype-chip{
  display:inline-flex;
  align-items:center;
  padding:.2rem .55rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  font-size:.75rem;
  color: rgba(71,85,105,1);
}

html.theme-dark #k-manager-overlay .kfm-filetype-chip{
  border-color: rgba(148,163,184,.18);
  background: rgba(13,22,37,.55);
  color: rgba(226,232,240,.92);
}

/* Drag-over microinteraction */
#k-manager-overlay #k-modal-drop{
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#k-manager-overlay #k-modal-drop.is-dragover{
  border-color: rgba(37,99,235,.55) !important;
  background: rgba(37,99,235,.06) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10), 0 12px 28px rgba(2,6,23,.08);
  transform: translateY(-1px);
}

#k-manager-overlay #k-modal-drop.is-dragover .kfm-dropzone__icon{
  background: rgba(37,99,235,.12) !important;
  color: rgba(37,99,235,1) !important;
}

/* Activity / progress card */
#k-manager-overlay .kfm-progress{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.8);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

html.theme-dark #k-manager-overlay .kfm-progress{
  border-color: rgba(148,163,184,.22);
  background: rgba(13,22,37,.65);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* icon slot */
#k-manager-overlay .kfm-progress__icon{
  background: rgba(99,102,241,.10);
  border: 1px solid rgba(99,102,241,.18);
  color: rgba(79,70,229,1);
}

html.theme-dark #k-manager-overlay .kfm-progress__icon{
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.22);
  color: rgba(199,210,254,1);
}

/* progress bar animation */
#k-manager-overlay #k-modal-uploading-bar{
  transition: width .25s ease;
}

/* tiny spinner */
#k-manager-overlay .kfm-spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(99,102,241,.22);
  border-top-color: rgba(99,102,241,1);
  animation: kfmSpin .8s linear infinite;
}

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


/* =========================================================
   Docs assistant overlay — force SOLID white (fix grey surface)
   Scoped only to #docs-assistant-overlay
   ========================================================= */

#app-content #docs-assistant-overlay .bg-white,
#app-content #docs-assistant-overlay .bg-white\/50,
#app-content #docs-assistant-overlay .bg-white\/60,
#app-content #docs-assistant-overlay .bg-white\/70,
#app-content #docs-assistant-overlay .bg-white\/80,
#app-content #docs-assistant-overlay .bg-white\/90{
  background-color: #fff !important; /* ✅ чистый белый */
}

/* dark theme — оставляем тёмную “surface”, чтобы не слепило */
html.theme-dark #app-content #docs-assistant-overlay .bg-white,
html.theme-dark #app-content #docs-assistant-overlay .bg-white\/50,
html.theme-dark #app-content #docs-assistant-overlay .bg-white\/60,
html.theme-dark #app-content #docs-assistant-overlay .bg-white\/70,
html.theme-dark #app-content #docs-assistant-overlay .bg-white\/80,
html.theme-dark #app-content #docs-assistant-overlay .bg-white\/90{
  background-color: var(--panel-bg) !important;
}

/* =========================================================
   FIX v2 — ui-input / ui-select padding vs Tailwind preflight
   Причина: Tailwind CDN preflight задаёт input/select/textarea { padding:0 }
   по тегам (специфичность 0,0,1). Твои стили на :where(.ui-*) имеют
   специфичность 0 и проигрывают → текст липнет к краям.
   Решение: сделать специфичность 0,0,2 (выше preflight, но ниже классов),
   чтобы утилиты Tailwind (px-*, pl-*, h-*, rounded-*) продолжали побеждать.
   ========================================================= */

input:where(.ui-input):is(input),
textarea:where(.ui-input):is(textarea),
select:where(.ui-select):is(select){
  width:100%;
  border:1px solid var(--ui-control-border);
  border-radius:var(--ui-control-radius);
  padding:.55rem .75rem;
  background:#fff;
  font-size:14px;
  color:#0f172a;
  outline:none;
  line-height:1.2;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Placeholder */
input:where(.ui-input):is(input)::placeholder,
textarea:where(.ui-input):is(textarea)::placeholder{
  color: var(--ui-control-placeholder);
}

/* Hover */
input:where(.ui-input):is(input):hover,
textarea:where(.ui-input):is(textarea):hover,
select:where(.ui-select):is(select):hover{
  border-color: var(--ui-control-border-hover);
}

/* Focus (+ keyboard focus) */
input:where(.ui-input):is(input):focus,
textarea:where(.ui-input):is(textarea):focus,
select:where(.ui-select):is(select):focus,
input:where(.ui-input):is(input):focus-visible,
textarea:where(.ui-input):is(textarea):focus-visible,
select:where(.ui-select):is(select):focus-visible{
  border-color: var(--ui-control-border-focus);
  box-shadow:0 0 0 3px var(--ui-control-ring);
}

/* Disabled */
input:where(.ui-input):is(input):disabled,
textarea:where(.ui-input):is(textarea):disabled,
select:where(.ui-select):is(select):disabled{
  opacity:.65;
  cursor:not-allowed;
}

/* Select: стрелка + место справа под неё */
select:where(.ui-select):is(select){
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat:no-repeat;
  background-position:right .65rem center;
  background-size:1.1rem 1.1rem;
  padding-right:2.2rem;
  -webkit-appearance:none;
  appearance:none;
}

/* Dark theme: стрелку делаем светлее */
html.theme-dark .ui-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
}


/* ===========================
   SETTINGS: fixed left sidebar
   =========================== */

/* Desktop only (Tailwind lg = 1024px) */
@media (min-width: 1024px){
  /* 1) Grid items не должны растягиваться до высоты самой высокой колонки */
  #settingsRoot{
    align-items: start;
  }

  /* 2) Фиксируем высоту левого меню (не зависит от правой колонки) */
  #settingsRoot > aside{
    /* перебиваем lg:self-stretch + h-full из шаблона */
    align-self: start;

    /*
      В шаблоне у aside стоит lg:top-24 => 6rem.
      Делаем высоту = высота экрана - top offset - верхний padding кабинета.
      --lk-sticky-top уже есть в твоих токенах (#app-main) :contentReference[oaicite:1]{index=1}
    */
    height: calc(100vh - 6rem - var(--lk-sticky-top, 0px));
    max-height: calc(100vh - 6rem - var(--lk-sticky-top, 0px));

    /* modern viewport unit (если поддерживается) */
    height: calc(100dvh - 6rem - var(--lk-sticky-top, 0px));
    max-height: calc(100dvh - 6rem - var(--lk-sticky-top, 0px));
  }

  /* 3) Если пунктов станет много — прокрутка только списка, "Выйти" всегда внизу */
  #settingsRoot > aside .set-tabs{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px; /* чтобы скроллбар не налезал на текст */

  }
}