/* ========================================================================== 
   4sensei NEXT — AI-native experience layer
   Front-end only. No backend contracts are changed by this stylesheet.
   ========================================================================== */

:root {
  --sx-bg: #f6f7ff;
  --sx-bg-2: #fbfbff;
  --sx-panel: rgba(255, 255, 255, 0.88);
  --sx-panel-solid: #ffffff;
  --sx-panel-soft: #f8f8ff;
  --sx-ink: #17172b;
  --sx-ink-2: #292a46;
  --sx-muted: #737792;
  --sx-faint: #9da1b8;
  --sx-line: rgba(101, 88, 160, 0.14);
  --sx-line-strong: rgba(101, 88, 160, 0.23);
  --sx-purple: #7a52ff;
  --sx-purple-2: #9d47f3;
  --sx-blue: #4c71ff;
  --sx-cyan: #20c6f4;
  --sx-pink: #df41c8;
  --sx-green: #1ec98b;
  --sx-yellow: #f4b942;
  --sx-red: #f05272;
  --sx-gradient: linear-gradient(115deg, #5f66ff 0%, #8b4ef4 48%, #db43c3 100%);
  --sx-gradient-soft: linear-gradient(135deg, rgba(93, 102, 255, .12), rgba(141, 78, 244, .07) 48%, rgba(219, 67, 195, .09));
  --sx-shadow: 0 18px 50px rgba(59, 43, 105, .09), 0 2px 8px rgba(35, 30, 68, .03);
  --sx-shadow-hover: 0 24px 70px rgba(82, 57, 150, .14), 0 4px 14px rgba(35, 30, 68, .04);
  --sx-radius: 24px;
  --sx-radius-md: 18px;
  --sx-radius-sm: 13px;
  --sx-topbar-h: 70px;
  --sx-sidebar-w: 258px;

  /* Re-map legacy visual tokens without touching backend or template contracts. */
  --jst-bg: var(--sx-bg);
  --jst-panel: #fff;
  --jst-ink: var(--sx-ink);
  --jst-muted: var(--sx-muted);
  --jst-line: var(--sx-line);
  --jst-nav: #24203f;
  --jst-nav-2: #342b60;
  --jst-accent: var(--sx-purple);
  --jst-accent-2: var(--sx-cyan);
  --jst-blue: var(--sx-purple);
  --jst-green: var(--sx-green);
  --jst-danger: var(--sx-red);
  --jst-shadow: var(--sx-shadow);
  --jst-radius: var(--sx-radius-md);
  --jst-radius-sm: var(--sx-radius-sm);

  --ie-blue: var(--sx-purple);
  --ie-blue-soft: rgba(122,82,255,.08);
  --ie-green: var(--sx-green);
  --ie-text: var(--sx-ink-2);
  --ie-muted: var(--sx-muted);
  --ie-border: rgba(99,84,157,.14);
  --ie-border-strong: rgba(99,84,157,.24);
  --ie-soft: #f8f8ff;

  --mx-bg: var(--sx-bg);
  --mx-panel: #fff;
  --mx-text: var(--sx-ink-2);
  --mx-title: var(--sx-ink);
  --mx-muted: var(--sx-muted);
  --mx-border: rgba(99,84,157,.14);
  --mx-border-strong: rgba(99,84,157,.24);
  --mx-blue: var(--sx-purple);
  --mx-blue-hover: #6543dc;
  --mx-blue-soft: rgba(122,82,255,.08);

  --emp-bg: var(--sx-bg);
  --emp-panel: #fff;
  --emp-text: var(--sx-ink-2);
  --emp-title: var(--sx-ink);
  --emp-muted: var(--sx-muted);
  --emp-border: rgba(99,84,157,.14);
  --emp-border-strong: rgba(99,84,157,.24);
  --emp-blue: var(--sx-purple);
  --emp-blue-hover: #6543dc;
  --emp-blue-soft: rgba(122,82,255,.08);

  --ef-bg: var(--sx-bg);
  --ef-panel: #fff;
  --ef-text: var(--sx-ink-2);
  --ef-title: var(--sx-ink);
  --ef-muted: var(--sx-muted);
  --ef-border: rgba(99,84,157,.14);
  --ef-border-strong: rgba(99,84,157,.24);
  --ef-blue: var(--sx-purple);
  --ef-blue-hover: #6543dc;
  --ef-blue-soft: rgba(122,82,255,.08);
}

html { scroll-behavior: smooth; }

body.sensei-ai-shell {
  color: var(--sx-ink);
  background:
    radial-gradient(circle at 88% -5%, rgba(123, 82, 255, .12), transparent 30rem),
    radial-gradient(circle at 14% 18%, rgba(32, 198, 244, .08), transparent 26rem),
    linear-gradient(180deg, #fafaff 0, var(--sx-bg) 48%, #f8f8fe 100%) !important;
  min-height: 100vh;
  letter-spacing: -.008em;
}

body.sensei-ai-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .42;
  background-image:
    linear-gradient(rgba(99, 83, 160, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 83, 160, .025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
}

::selection { background: rgba(122, 82, 255, .18); color: #241f49; }

/* --------------------------------------------------------------------------
   App shell — premium, bright and spatial instead of ERP-like.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  body.sensei-ai-shell > header {
    display: block !important;
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 140 !important;
    min-height: var(--sx-topbar-h) !important;
    background: rgba(251, 251, 255, .82) !important;
    border-bottom: 1px solid var(--sx-line) !important;
    box-shadow: 0 10px 34px rgba(48, 35, 95, .045) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
  }

  body.sensei-ai-shell > header > div {
    grid-template-columns: var(--sx-sidebar-w) minmax(0,1fr) auto !important;
    min-height: var(--sx-topbar-h) !important;
    max-width: none !important;
    padding-right: 22px !important;
    gap: 18px !important;
  }

  body.sensei-ai-shell > header a[aria-label="4sensei — strona główna"] {
    width: var(--sx-sidebar-w) !important;
    min-height: var(--sx-topbar-h) !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    padding: 0 20px !important;
    background: transparent !important;
    border-right: 1px solid var(--sx-line) !important;
  }

  .sensei-topbar-logo {
    width: 35px !important;
    height: 35px !important;
    filter: none !important;
    opacity: 1 !important;
    object-fit: contain;
  }

  .sensei-topbar-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    color: var(--sx-ink);
  }
  .sensei-topbar-brand-copy strong {
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.045em;
  }
  .sensei-topbar-brand-copy span {
    margin-top: 4px;
    color: #8d89a6;
    font-size: 8px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .sensei-topbar-workspace {
    align-items: center;
    gap: 10px;
    align-self: center;
    min-width: 0;
  }
  .sensei-topbar-workspace__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(122,82,255,.16);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(122,82,255,.11), rgba(32,198,244,.07));
    color: var(--sx-purple);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: -.02em;
  }
  .sensei-topbar-workspace__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .sensei-topbar-workspace__copy small {
    color: #a09cb7;
    font-size: 7px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .13em;
  }
  .sensei-topbar-workspace__copy strong {
    overflow: hidden;
    margin-top: 4px;
    color: #46445f;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sensei-ai-shell aside[aria-label="Menu modułów"] {
    top: var(--sx-topbar-h) !important;
    bottom: 32px !important;
    width: var(--sx-sidebar-w) !important;
    padding: 13px 12px 12px !important;
    background: rgba(250, 250, 255, .86) !important;
    border-right: 1px solid var(--sx-line) !important;
    color: var(--sx-muted) !important;
    box-shadow: 10px 0 34px rgba(55, 42, 100, .025) !important;
    backdrop-filter: blur(18px) saturate(140%);
  }

  body.sensei-ai-shell aside[aria-label="Menu modułów"] .sidebar-brand {
    display: none !important;
  }

  body.sensei-ai-shell aside[aria-label="Menu modułów"] nav {
    align-items: stretch !important;
    gap: 3px !important;
    padding: 4px 0 0 !important;
  }

  body.sensei-ai-shell main {
    padding-left: var(--sx-sidebar-w) !important;
    padding-top: var(--sx-topbar-h) !important;
  }
}

/* Mobile top bar */
@media (max-width: 767px) {
  body.sensei-ai-shell > header {
    background: rgba(251,251,255,.92) !important;
    border-bottom: 1px solid var(--sx-line) !important;
    box-shadow: 0 10px 28px rgba(54, 41, 103, .07) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
  }
  body.sensei-ai-shell > header a[aria-label="4sensei — strona główna"] {
    background: transparent !important;
  }
  .sensei-topbar-logo { filter: none !important; }
  .sensei-topbar-brand-copy { display: none; }
}

/* AI presence badge — status, not a network trigger. */
.sensei-ai-status {
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:0 11px;
  border:1px solid rgba(122,82,255,.16);
  border-radius:999px;
  background:linear-gradient(115deg, rgba(95,102,255,.08), rgba(219,67,195,.055));
  color:#6848d9;
  font-size:9px;
  font-weight:850;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.sensei-ai-status__spark {
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:7px;
  background:var(--sx-gradient);
  color:#fff;
  font-size:9px;
  box-shadow:0 4px 12px rgba(111,75,232,.22);
}

/* Account trigger */
.sensei-ai-shell .account-trigger {
  border-color: var(--sx-line) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.8) !important;
  color: var(--sx-ink-2) !important;
  box-shadow: 0 4px 14px rgba(51, 38, 97, .035) !important;
  backdrop-filter: blur(12px);
}
.sensei-ai-shell .account-trigger:hover,
.sensei-ai-shell .account-trigger[aria-expanded="true"] {
  border-color: rgba(122,82,255,.28) !important;
  background: #fff !important;
  box-shadow: 0 7px 24px rgba(68, 45, 130, .08) !important;
}
.sensei-ai-shell .account-trigger__icon { color: var(--sx-purple) !important; }
.sensei-ai-shell .account-menu {
  border-color: var(--sx-line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 26px 70px rgba(48,33,98,.17) !important;
  backdrop-filter: blur(22px) saturate(160%);
}
.sensei-ai-shell .account-menu__role {
  background: rgba(122,82,255,.09) !important;
  color: #6847db !important;
}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > a,
  .sensei-ai-shell .sidebar-group__summary,
  .sensei-ai-shell .sidebar-group__item,
  .sensei-ai-shell .sidebar-user {
    width: 100% !important;
    min-height: 43px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #77788f !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: -.01em;
  }

  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > a > svg,
  .sensei-ai-shell .sidebar-group__summary > svg:first-child,
  .sensei-ai-shell .sidebar-group__item > svg,
  .sensei-ai-shell .sidebar-user__avatar svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: #9a97b1 !important;
    transform: none !important;
  }

  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > a::after {
    content: attr(aria-label);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > a > span.absolute {
    display: none !important;
  }

  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > a:hover,
  .sensei-ai-shell .sidebar-group__summary:hover,
  .sensei-ai-shell .sidebar-group__item:hover,
  .sensei-ai-shell .sidebar-user:hover {
    background: rgba(119, 92, 255, .055) !important;
    color: #4b4764 !important;
  }

  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > a[aria-current="page"],
  .sensei-ai-shell .sidebar-group__item[aria-current="page"],
  .sensei-ai-shell .sidebar-user[aria-current="page"] {
    position: relative;
    background: linear-gradient(100deg, rgba(100, 95, 255, .13), rgba(203, 69, 220, .07)) !important;
    color: #6444d8 !important;
    box-shadow: inset 0 0 0 1px rgba(122,82,255,.13) !important;
  }

  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > a[aria-current="page"]::before,
  .sensei-ai-shell .sidebar-group__item[aria-current="page"]::before,
  .sensei-ai-shell .sidebar-user[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -6px;
    width: 3px;
    height: 23px;
    border-radius: 999px;
    background: var(--sx-gradient);
    box-shadow: 0 0 16px rgba(122,82,255,.32);
  }

  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > a[aria-current="page"] > svg,
  .sensei-ai-shell .sidebar-group__item[aria-current="page"] > svg {
    color: #714ef0 !important;
  }

  .sensei-ai-shell .sidebar-section-label {
    margin: 14px 10px 5px !important;
    color: #aaa7bd !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
  }

  .sensei-ai-shell .sidebar-group {
    border: 0 !important;
    background: transparent !important;
  }
  .sensei-ai-shell .sidebar-group__chevron {
    margin-left: auto;
    width: 13px !important;
    height: 13px !important;
    color: #aaa7bd !important;
  }
  .sensei-ai-shell .sidebar-group__items {
    margin: 3px 0 4px 12px !important;
    padding: 2px 0 2px 9px !important;
    border-left: 1px solid rgba(122,82,255,.12) !important;
    gap: 1px !important;
  }
  .sensei-ai-shell .sidebar-group__item {
    min-height: 37px !important;
    font-size: 10px !important;
  }

  .sensei-ai-shell aside[aria-label="Menu modułów"] nav > div.mt-auto {
    border-top-color: var(--sx-line) !important;
    background: transparent !important;
    padding-top: 10px !important;
  }
  .sensei-ai-shell .sidebar-user__avatar {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border: 1px solid rgba(122,82,255,.15) !important;
    border-radius: 10px !important;
    background: rgba(122,82,255,.07) !important;
  }
  .sensei-ai-shell .sidebar-user__identity strong { color: #3b3952 !important; }
  .sensei-ai-shell .sidebar-user__identity span { color: #a09cb4 !important; }

  .sensei-ai-shell aside form[action*="logout"] button {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
    background: transparent !important;
    color: #b66a7a !important;
  }
  .sensei-ai-shell aside form[action*="logout"] button::after {
    content: "Wyloguj";
    font-size: 10px;
    font-weight: 750;
  }
  .sensei-ai-shell aside form[action*="logout"] button:hover {
    background: rgba(240,82,114,.06) !important;
    color: #d84d68 !important;
  }
  .sensei-ai-shell aside form[action*="logout"] button > span.absolute { display:none !important; }
}

/* --------------------------------------------------------------------------
   Mobile navigation
   -------------------------------------------------------------------------- */
.sensei-ai-shell #mobileModuleNav {
  border-color: var(--sx-line) !important;
  background: rgba(251,251,255,.94) !important;
  box-shadow: 0 -16px 50px rgba(54,40,102,.10) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
}
.sensei-ai-shell #mobileModuleNav a {
  color: #88869d !important;
  font-weight: 750 !important;
}
.sensei-ai-shell #mobileModuleNav a[aria-current="page"] {
  border-top-color: transparent !important;
  background: linear-gradient(180deg, rgba(122,82,255,.10), transparent) !important;
  color: #6546d9 !important;
}

/* --------------------------------------------------------------------------
   Main surfaces, cards, forms, tables
   -------------------------------------------------------------------------- */
.sensei-ai-shell main {
  background: transparent !important;
}

.sensei-ai-shell main :is(.vbr-card, .vbr-filter-card, .vbr-table-card, .jst-auto-card, .jst-form-shell, [data-settings-panel]) {
  border-color: var(--sx-line) !important;
  border-radius: var(--sx-radius-md) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: var(--sx-shadow) !important;
  backdrop-filter: blur(16px) saturate(135%);
}

.sensei-ai-shell main :is(.vbr-card, .vbr-filter-card, .vbr-table-card, .jst-auto-card) {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sensei-ai-shell main :is(.vbr-card, .vbr-filter-card, .jst-auto-card):hover {
  border-color: rgba(122,82,255,.18) !important;
  box-shadow: var(--sx-shadow-hover) !important;
}

.sensei-ai-shell .vbr-page-hero,
.sensei-ai-shell .jst-matrix-page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 4px 0 10px !important;
  color: var(--sx-ink) !important;
}
.sensei-ai-shell .vbr-page-hero::before,
.sensei-ai-shell .jst-matrix-page-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80px;
  right: 6%;
  width: 260px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,82,255,.13), transparent 69%);
  filter: blur(6px);
}
.sensei-ai-shell .vbr-page-hero h1,
.sensei-ai-shell .jst-matrix-page-head h1 {
  color: var(--sx-ink) !important;
  font-size: clamp(25px, 2vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
}
.sensei-ai-shell .vbr-page-hero p,
.sensei-ai-shell .jst-matrix-page-head p { color: var(--sx-muted) !important; }

/* Inputs */
.sensei-ai-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .vbr-input, .vbr-select) {
  border-color: rgba(91, 78, 142, .18) !important;
  border-radius: 13px !important;
  background-color: rgba(255,255,255,.86) !important;
  color: var(--sx-ink-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 2px 8px rgba(42,32,83,.025) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.sensei-ai-shell :is(input, select, textarea):hover {
  border-color: rgba(122,82,255,.28) !important;
}
.sensei-ai-shell :is(input, select, textarea):focus {
  border-color: rgba(103,81,239,.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(122,82,255,.09) !important;
}
.sensei-ai-shell ::placeholder { color: #aaa7b9 !important; }

/* Buttons */
.sensei-ai-shell :is(.vbr-btn-primary, button[type="submit"].bg-blue-600, a.bg-blue-600) {
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--sx-gradient) !important;
  color: #fff !important;
  box-shadow: 0 11px 28px rgba(111,75,232,.22) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.sensei-ai-shell :is(.vbr-btn-primary, button[type="submit"].bg-blue-600, a.bg-blue-600):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 34px rgba(111,75,232,.29) !important;
  filter: saturate(1.07);
}
.sensei-ai-shell :is(.vbr-btn-outline, .vbr-btn-secondary) {
  border-color: var(--sx-line) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.82) !important;
  color: #54516d !important;
}
.sensei-ai-shell :is(.vbr-btn-outline, .vbr-btn-secondary):hover {
  border-color: rgba(122,82,255,.24) !important;
  background: rgba(122,82,255,.045) !important;
  color: #6547d5 !important;
}

/* Tables */
.sensei-ai-shell table {
  border-collapse: separate;
  border-spacing: 0;
}
.sensei-ai-shell thead th {
  color: #9390a8 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  background: rgba(248,248,253,.82) !important;
}
.sensei-ai-shell tbody tr { transition: background-color .15s ease, transform .15s ease; }
.sensei-ai-shell tbody tr:hover { background: rgba(122,82,255,.028) !important; }

/* Generic badges that were visually heavy. */
.sensei-ai-shell .vbr-pill,
.sensei-ai-shell [class*="rounded-full"][class*="text-"] {
  letter-spacing: -.005em;
}

/* Dialogs / drawers */
.sensei-ai-shell :is([role="dialog"].jst-dialog, .jst-dialog) {
  border-color: var(--sx-line) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 30px 100px rgba(45,31,94,.22) !important;
  backdrop-filter: blur(24px) saturate(150%);
}
.sensei-ai-shell :is(.vbr-drawer-header, .vbr-modal-header) {
  background: linear-gradient(125deg, #4d50e9, #7849ea 48%, #b43dc7) !important;
}

/* --------------------------------------------------------------------------
   Dashboard — command center / AI product feel
   -------------------------------------------------------------------------- */
.sensei-dashboard {
  position: relative;
  min-height: 100%;
  padding: 24px clamp(18px, 2.2vw, 34px) 42px;
}
.sensei-dashboard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 430px;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 14%, rgba(122,82,255,.10), transparent 32%),
    radial-gradient(circle at 86% 33%, rgba(32,198,244,.08), transparent 25%);
}

.sensei-command-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
  gap: 28px;
  min-height: 292px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(105,85,176,.14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 18%, rgba(117,84,255,.17), transparent 25%),
    radial-gradient(circle at 90% 80%, rgba(32,198,244,.12), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(249,248,255,.89));
  box-shadow: 0 26px 80px rgba(57,42,108,.11), inset 0 1px 0 rgba(255,255,255,.86);
}
.sensei-command-hero::after {
  content: "";
  position: absolute;
  inset: -40% -15% auto 45%;
  z-index: -1;
  height: 420px;
  transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(122,82,255,.045), rgba(218,65,198,.05), transparent);
}
.sensei-command-hero__copy { align-self: center; max-width: 760px; }
.sensei-command-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  color: #6b4de1;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sensei-command-hero__eyebrow::before {
  content: "✦";
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(122,82,255,.14), rgba(219,65,200,.08));
  box-shadow: inset 0 0 0 1px rgba(122,82,255,.10);
}
.sensei-command-hero h1 {
  margin: 0;
  max-width: 760px;
  color: var(--sx-ink);
  font-size: clamp(34px, 4vw, 58px);
  line-height: .99;
  font-weight: 900;
  letter-spacing: -.058em;
}
.sensei-command-hero h1 .sensei-gradient-text {
  background: var(--sx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sensei-command-hero__lead {
  max-width: 650px;
  margin: 18px 0 0;
  color: #6d7088;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.7;
  font-weight: 550;
}
.sensei-command-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 23px;
}
.sensei-command-hero__primary,
.sensei-command-hero__secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  padding: 0 17px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 850;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.sensei-command-hero__primary {
  border: 0;
  background: var(--sx-gradient);
  color: #fff;
  box-shadow: 0 14px 34px rgba(111,75,232,.27);
}
.sensei-command-hero__primary:hover { transform: translateY(-2px); box-shadow: 0 19px 42px rgba(111,75,232,.34); }
.sensei-command-hero__secondary {
  border: 1px solid var(--sx-line);
  background: rgba(255,255,255,.72);
  color: #54526b;
}
.sensei-command-hero__secondary:hover { border-color: rgba(122,82,255,.24); background: #fff; color:#6445d8; }

.sensei-command-hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
}
.sensei-ai-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #fff 0 5%, rgba(255,255,255,.3) 6% 12%, transparent 13%),
    radial-gradient(circle at 38% 30%, #53d7ff 0%, #5f64ff 39%, #8a4ef0 68%, #dc43c4 100%);
  box-shadow:
    0 26px 70px rgba(91,70,220,.25),
    0 0 0 18px rgba(121,82,255,.055),
    0 0 0 38px rgba(121,82,255,.028);
  animation: sx-float 5.2s ease-in-out infinite;
}
.sensei-ai-orb::before,
.sensei-ai-orb::after {
  content: "";
  position: absolute;
  inset: -26px;
  border: 1px solid rgba(122,82,255,.19);
  border-radius: 48% 52% 57% 43% / 44% 41% 59% 56%;
  animation: sx-orbit 12s linear infinite;
}
.sensei-ai-orb::after {
  inset: -48px;
  border-color: rgba(32,198,244,.13);
  animation-duration: 17s;
  animation-direction: reverse;
}
.sensei-ai-orb__core {
  color: #fff;
  font-size: 34px;
  filter: drop-shadow(0 4px 14px rgba(31,23,80,.35));
}
.sensei-orb-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 138px;
  padding: 10px 12px;
  border: 1px solid rgba(111,91,174,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 34px rgba(49,36,95,.10);
  backdrop-filter: blur(13px);
  animation: sx-float 5.8s ease-in-out infinite;
}
.sensei-orb-card--a { top: 9%; left: 1%; animation-delay:-1.2s; }
.sensei-orb-card--b { right: 0; bottom: 11%; animation-delay:-3s; }
.sensei-orb-card__dot { width: 8px; height: 8px; border-radius:50%; background: var(--sx-green); box-shadow: 0 0 0 5px rgba(30,201,139,.10); }
.sensei-orb-card strong { display:block; color:#3c3955; font-size:10px; font-weight:850; }
.sensei-orb-card span { display:block; margin-top:2px; color:#9895aa; font-size:8px; font-weight:650; }

.sensei-metric-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: 15px;
}
.sensei-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 17px 18px;
  border: 1px solid var(--sx-line);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 36px rgba(55,42,101,.055);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sensei-metric-card:hover { transform: translateY(-2px); border-color: rgba(122,82,255,.19); box-shadow: 0 18px 48px rgba(70,48,128,.10); }
.sensei-metric-card::after {
  content:"";
  position:absolute;
  right:-22px;
  top:-30px;
  width:80px;
  height:80px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(122,82,255,.10), transparent 68%);
}
.sensei-metric-card__label { color:#9b98ab; font-size:8px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.sensei-metric-card__value { margin-top:9px; color:var(--sx-ink); font-size:27px; line-height:1; font-weight:900; letter-spacing:-.045em; }
.sensei-metric-card__meta { margin-top:7px; color:#8c899d; font-size:9px; font-weight:650; }

/* Existing dashboard cards become softer and more content-first. */
.sensei-dashboard .sensei-section-card {
  border: 1px solid var(--sx-line);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 15px 46px rgba(55,41,103,.065);
  backdrop-filter: blur(14px);
}

/* --------------------------------------------------------------------------
   AI instruction editor — make real processing feel tangible.
   -------------------------------------------------------------------------- */
.sensei-ai-shell .ie-ai-launch {
  position: relative;
  overflow: hidden;
  border-color: rgba(122,82,255,.22) !important;
  background: linear-gradient(115deg, rgba(95,102,255,.09), rgba(139,78,244,.08), rgba(219,67,195,.08)) !important;
  color: #6847db !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 20px rgba(91,63,169,.07) !important;
}
.sensei-ai-shell .ie-ai-launch::after {
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:sx-shimmer 4.5s ease-in-out infinite;
}
/* The instruction AI recording modal now owns its complete appearance in
   instruction-ai-preserved.css (Clean Modal v2). Historical overrides here
   forced light backgrounds and a 12px overlay blur even in Dark Mode.
   Keep the launcher/processing-steps styling above/below this section. */
.sensei-ai-processing-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.sensei-ai-processing-step {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 9px;
  border:1px solid rgba(122,82,255,.09);
  border-radius:11px;
  background:rgba(255,255,255,.66);
  color:#9692a7;
  font-size:8px;
  font-weight:750;
  transition: all .25s ease;
}
.sensei-ai-processing-step::before {
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#cbc8d6;
}
.sensei-ai-processing-step.is-active { color:#6649d6; border-color:rgba(122,82,255,.18); background:rgba(122,82,255,.055); }
.sensei-ai-processing-step.is-active::before { background:#7a52ff; box-shadow:0 0 0 4px rgba(122,82,255,.09); }
.sensei-ai-processing-step.is-done { color:#5b796e; }
.sensei-ai-processing-step.is-done::before { background:#1ec98b; box-shadow:0 0 0 4px rgba(30,201,139,.08); }

/* --------------------------------------------------------------------------
   Public landing / login — studio-aligned control styling.
   Only the login card and form elements have changed. Marketing composition,
   visual hero, photo and headline gradients intentionally stay untouched.
   -------------------------------------------------------------------------- */
body.sensei-public {
  margin:0;
  color:var(--sx-ink);
  background:#fbfbff;
}
.sensei-public .sensei-hero {
  position:relative;
  background:
    radial-gradient(circle at 68% 27%, rgba(119,82,255,.14), transparent 26rem),
    radial-gradient(circle at 87% 74%, rgba(31,197,244,.10), transparent 24rem),
    linear-gradient(135deg, #fff 0%, #faf9ff 50%, #f1f5ff 100%) !important;
}
.sensei-public .sensei-grid {
  opacity:.55 !important;
  background-image:
    linear-gradient(rgba(99,82,164,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,82,164,.028) 1px, transparent 1px) !important;
  background-size:36px 36px !important;
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 62%, transparent 100%);
}
.sensei-public header img { filter: drop-shadow(0 6px 18px rgba(33,61,132,.08)); }
.sensei-public h1 { color:var(--sx-ink) !important; }
.sensei-public h1 span {
  background:var(--sx-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}
.sensei-public #login > div {
  position:relative;
  overflow:hidden;
  border:1px solid #dee6f2 !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 24px 64px rgba(24,48,88,.09) !important;
  backdrop-filter:blur(12px);
}
.sensei-public #login > div::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg,#1e40af 0%,#2563eb 70%,#60a5fa 100%);
}
.sensei-public #login input {
  border:1px solid #d9e2ef !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#13233c !important;
  box-shadow:none !important;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.sensei-public #login input:hover:not(:focus) { border-color:#b9c8df !important; }
.sensei-public #login input:focus {
  outline:none !important;
  border-color:#76a0e9 !important;
  box-shadow:0 0 0 2px rgba(59,130,246,.12) !important;
}
.sensei-public #login input:-webkit-autofill {
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:#13233c !important;
  caret-color:#13233c;
}
.sensei-public #login button[type="submit"] {
  border-radius:12px !important;
  background:#2458d3 !important;
  box-shadow:0 10px 25px rgba(37,88,211,.18) !important;
  transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.sensei-public #login button[type="submit"]:hover {
  background:#1d4bb9 !important;
  box-shadow:0 12px 28px rgba(37,88,211,.21) !important;
  transform:translateY(-1px);
}
.sensei-public #login button[type="submit"]:focus-visible {
  outline:2px solid #7ea8ed !important;
  outline-offset:3px;
}
.sensei-public #togglePassword:focus-visible,
.sensei-public header summary:focus-visible,
.sensei-public header a:focus-visible {
  outline:2px solid #7ea8ed;
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   Generic page motion — subtle only, no “template demo” feel.
   -------------------------------------------------------------------------- */
.sensei-page-enter {
  animation: sx-enter .38s cubic-bezier(.2,.8,.2,1) both;
}
.sensei-stagger-in {
  animation: sx-enter .42s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--sx-delay, 0ms);
}

/* Global submit state injected by sensei-next.js */
.sensei-submit-busy {
  pointer-events:none !important;
  opacity:.82 !important;
}
.sensei-submit-busy::after {
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  margin-left:8px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  vertical-align:-2px;
  animation:sx-spin .75s linear infinite;
}

/* Footer: visually recede instead of anchoring like an ERP status bar. */
body.sensei-ai-shell > footer,
body.sensei-ai-shell > footer > div {
  background: rgba(248,248,253,.94) !important;
  border-top-color: var(--sx-line) !important;
  backdrop-filter: blur(14px);
}
body.sensei-ai-shell > footer p { color:#9b98aa !important; }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

@keyframes sx-enter {
  from { opacity:0; transform:translateY(9px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes sx-float {
  0%,100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(-8px) rotate(1deg); }
}
@keyframes sx-orbit { to { transform:rotate(360deg); } }
@keyframes sx-spin { to { transform:rotate(360deg); } }
@keyframes sx-pulse {
  0%,100% { transform:scale(1); filter:saturate(1); }
  50% { transform:scale(1.045); filter:saturate(1.18); }
}
@keyframes sx-shimmer {
  0%, 62% { transform:translateX(-120%); }
  82%,100% { transform:translateX(140%); }
}

@media (max-width: 1023px) {
  .sensei-command-hero { grid-template-columns:1fr; }
  .sensei-command-hero__visual { min-height:210px; }
  .sensei-metric-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 639px) {
  .sensei-dashboard { padding:16px 13px 90px; }
  .sensei-command-hero { min-height:0; padding:22px 18px; border-radius:24px; }
  .sensei-command-hero h1 { font-size:36px; }
  .sensei-command-hero__visual { display:none; }
  .sensei-metric-strip { gap:8px; }
  .sensei-metric-card { padding:14px; min-height:92px; }
  .sensei-metric-card__value { font-size:23px; }
  .sensei-ai-processing-steps { grid-template-columns:1fr; }
}


/* Dashboard lower modules: same glass/card language as hero. */
.sensei-dashboard section.mt-5 > .overflow-hidden {
  border-color: var(--sx-line) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 16px 48px rgba(55,41,103,.065) !important;
  backdrop-filter: blur(14px);
}
.sensei-dashboard section.mt-5 > .overflow-hidden > div:first-child {
  border-bottom-color: rgba(99,84,157,.09) !important;
}
.sensei-dashboard section.mt-5 a.group { transition: background-color .16s ease, transform .16s ease; }
.sensei-dashboard section.mt-5 a.group:hover { background: rgba(122,82,255,.028) !important; }

/* Matrix/employee pages inherit the new palette even where their module CSS defines local tokens. */
.sensei-ai-shell .jst-matrix-theme {
  --mx-bg: var(--sx-bg) !important;
  --mx-panel: #fff !important;
  --mx-text: var(--sx-ink-2) !important;
  --mx-title: var(--sx-ink) !important;
  --mx-muted: var(--sx-muted) !important;
  --mx-border: rgba(99,84,157,.14) !important;
  --mx-border-strong: rgba(99,84,157,.24) !important;
  --mx-blue: var(--sx-purple) !important;
  --mx-blue-hover: #6543dc !important;
  --mx-blue-soft: rgba(122,82,255,.08) !important;
}
.sensei-ai-shell .employees-page {
  --emp-bg: var(--sx-bg) !important;
  --emp-panel: #fff !important;
  --emp-blue: var(--sx-purple) !important;
  --emp-blue-hover: #6543dc !important;
  --emp-blue-soft: rgba(122,82,255,.08) !important;
}
.sensei-ai-shell .employee-form-page {
  --ef-bg: var(--sx-bg) !important;
  --ef-panel: #fff !important;
  --ef-blue: var(--sx-purple) !important;
  --ef-blue-hover: #6543dc !important;
  --ef-blue-soft: rgba(122,82,255,.08) !important;
}

/* --------------------------------------------------------------------------
   Instruction library / instruction view — explicit product surfaces.
   -------------------------------------------------------------------------- */
.sensei-ai-shell .il-page,
.sensei-ai-shell .is-page {
  background: transparent !important;
}
.sensei-ai-shell .il-hero,
.sensei-ai-shell .is-header,
.sensei-ai-shell .is-map-card,
.sensei-ai-shell .is-training {
  border-color: var(--sx-line) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(122,82,255,.08), transparent 30%),
    rgba(255,255,255,.88) !important;
  box-shadow: 0 16px 48px rgba(55,41,103,.065) !important;
  backdrop-filter: blur(14px);
}
.sensei-ai-shell .il-hero {
  border-left: 1px solid var(--sx-line) !important;
  position:relative;
  overflow:hidden;
}
.sensei-ai-shell .il-hero::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--sx-gradient);
}
.sensei-ai-shell .il-hero__eyebrow,
.sensei-ai-shell .is-eyebrow,
.sensei-ai-shell .is-map-eyebrow,
.sensei-ai-shell .is-training__eyebrow {
  color:#704edb !important;
}
.sensei-ai-shell .il-hero__title,
.sensei-ai-shell .is-title,
.sensei-ai-shell .is-map-title,
.sensei-ai-shell .is-training__title {
  color:var(--sx-ink) !important;
  font-weight:900 !important;
  letter-spacing:-.04em !important;
}
.sensei-ai-shell .il-hero__description,
.sensei-ai-shell .is-description,
.sensei-ai-shell .is-training__description { color:var(--sx-muted) !important; }
.sensei-ai-shell .il-primary-action,
.sensei-ai-shell .is-training__start {
  border:0 !important;
  border-radius:14px !important;
  background:var(--sx-gradient) !important;
  color:#fff !important;
  box-shadow:0 13px 30px rgba(111,75,232,.24) !important;
}
.sensei-ai-shell .il-toolbar,
.sensei-ai-shell .il-table-wrap,
.sensei-ai-shell .il-mobile-card,
.sensei-ai-shell .is-summary,
.sensei-ai-shell .is-point-card {
  border-color:var(--sx-line) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.84) !important;
  box-shadow:0 10px 32px rgba(55,41,103,.045) !important;
}
.sensei-ai-shell .il-table-head { background:rgba(248,248,253,.86) !important; color:#9592a7 !important; }
.sensei-ai-shell .il-table-row:hover { background:rgba(122,82,255,.026) !important; }
.sensei-ai-shell .il-control,
.sensei-ai-shell .il-search-input,
.sensei-ai-shell .il-select {
  border-color:rgba(99,84,157,.16) !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.86) !important;
}
.sensei-ai-shell .il-row-action--open,
.sensei-ai-shell .is-button:not(.is-button--secondary) {
  border-color:rgba(122,82,255,.18) !important;
  background:rgba(122,82,255,.07) !important;
  color:#6848d9 !important;
}
.sensei-ai-shell .is-stat {
  border-color:var(--sx-line) !important;
  border-radius:15px !important;
  background:rgba(248,248,255,.82) !important;
}

/* Editor cards inherit the same geometry without disturbing editor behavior. */
.sensei-ai-shell .ie-basics-card,
.sensei-ai-shell .ie-workspace-card,
.sensei-ai-shell .ie-step-card,
.sensei-ai-shell .ie-subpoint-card {
  border-color:rgba(99,84,157,.14) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 10px 34px rgba(55,41,103,.045) !important;
}
.sensei-ai-shell .ie-step-card.is-active {
  border-color:rgba(30,201,139,.27) !important;
  border-left:4px solid var(--sx-green) !important;
  box-shadow:0 12px 34px rgba(42,154,117,.08) !important;
}
.sensei-ai-shell .ie-step-number,
.sensei-ai-shell .ie-subpoint-number {
  background:linear-gradient(145deg,#4e4d72,#29283f) !important;
  border-radius:12px !important;
}

/* ========================================================================== 
   4sensei NEXT v2 — dual theme, flat page headers and unified workspace width
   Front-end only. Loaded after every module stylesheet on purpose.
   ========================================================================== */

:root {
  --sx-content-max: 1500px;
  --sx-page-pad: clamp(20px, 2.3vw, 38px);
  --sx-page-top: 12px;
  --sx-surface: rgba(255,255,255,.88);
  --sx-surface-solid: #ffffff;
  --sx-surface-soft: rgba(248,248,255,.86);
  --sx-elevated: rgba(255,255,255,.96);
}

html[data-theme="dark"] {
  --sx-bg: #0d0d17;
  --sx-bg-2: #11111d;
  --sx-panel: rgba(23, 22, 37, .88);
  --sx-panel-solid: #171625;
  --sx-panel-soft: #1b1a2b;
  --sx-surface: rgba(24,23,39,.88);
  --sx-surface-solid: #181725;
  --sx-surface-soft: rgba(28,27,45,.90);
  --sx-elevated: rgba(29,28,47,.97);
  --sx-ink: #f4f2fb;
  --sx-ink-2: #dedbea;
  --sx-muted: #a09bb7;
  --sx-faint: #77738c;
  --sx-line: rgba(197, 189, 232, .12);
  --sx-line-strong: rgba(197, 189, 232, .22);
  --sx-purple: #9877ff;
  --sx-purple-2: #bc6dff;
  --sx-blue: #7390ff;
  --sx-cyan: #45d7ff;
  --sx-pink: #f05bd3;
  --sx-green: #36d89d;
  --sx-yellow: #f7c85a;
  --sx-red: #ff718a;
  --sx-gradient: linear-gradient(115deg, #7580ff 0%, #a565ff 48%, #e354c9 100%);
  --sx-gradient-soft: linear-gradient(135deg, rgba(117,128,255,.18), rgba(165,101,255,.10) 48%, rgba(227,84,201,.14));
  --sx-shadow: 0 20px 60px rgba(0,0,0,.28), 0 2px 10px rgba(0,0,0,.22);
  --sx-shadow-hover: 0 28px 80px rgba(0,0,0,.36), 0 4px 16px rgba(0,0,0,.28);

  --jst-bg: var(--sx-bg);
  --jst-panel: var(--sx-panel-solid);
  --jst-ink: var(--sx-ink);
  --jst-muted: var(--sx-muted);
  --jst-line: var(--sx-line);
  --jst-nav: #ece8ff;
  --jst-nav-2: #c7c1df;
  --jst-accent: var(--sx-purple);
  --jst-accent-2: var(--sx-cyan);
  --jst-blue: var(--sx-purple);
  --jst-green: var(--sx-green);
  --jst-danger: var(--sx-red);
  --jst-shadow: var(--sx-shadow);

  --ie-blue: var(--sx-purple);
  --ie-blue-soft: rgba(152,119,255,.14);
  --ie-green: var(--sx-green);
  --ie-text: var(--sx-ink-2);
  --ie-muted: var(--sx-muted);
  --ie-border: var(--sx-line);
  --ie-border-strong: var(--sx-line-strong);
  --ie-soft: var(--sx-panel-soft);

  --mx-bg: var(--sx-bg);
  --mx-panel: var(--sx-panel-solid);
  --mx-text: var(--sx-ink-2);
  --mx-title: var(--sx-ink);
  --mx-muted: var(--sx-muted);
  --mx-border: var(--sx-line);
  --mx-border-strong: var(--sx-line-strong);
  --mx-blue: var(--sx-purple);
  --mx-blue-hover: #ad91ff;
  --mx-blue-soft: rgba(152,119,255,.14);

  --emp-bg: var(--sx-bg);
  --emp-panel: var(--sx-panel-solid);
  --emp-text: var(--sx-ink-2);
  --emp-title: var(--sx-ink);
  --emp-muted: var(--sx-muted);
  --emp-border: var(--sx-line);
  --emp-border-strong: var(--sx-line-strong);
  --emp-blue: var(--sx-purple);
  --emp-blue-hover: #ad91ff;
  --emp-blue-soft: rgba(152,119,255,.14);

  --ef-bg: var(--sx-bg);
  --ef-panel: var(--sx-panel-solid);
  --ef-text: var(--sx-ink-2);
  --ef-title: var(--sx-ink);
  --ef-muted: var(--sx-muted);
  --ef-border: var(--sx-line);
  --ef-border-strong: var(--sx-line-strong);
  --ef-blue: var(--sx-purple);
  --ef-blue-hover: #ad91ff;
  --ef-blue-soft: rgba(152,119,255,.14);
}

/* --------------------------------------------------------------------------
   One workspace grid across every module.
   -------------------------------------------------------------------------- */

.sensei-ai-shell main > div {
  width: 100% !important;
  max-width: calc(var(--sx-content-max) + (var(--sx-page-pad) * 2)) !important;
  margin-inline: auto !important;
  padding: var(--sx-page-top) var(--sx-page-pad) 48px !important;
}

.sensei-ai-shell :is(
  .sensei-dashboard > div,
  .competence-center-container,
  .competence-map-container,
  .il-container,
  .ie-container,
  .is-container
) {
  width: 100% !important;
  max-width: var(--sx-content-max) !important;
  margin-inline: auto !important;
}

.sensei-ai-shell .sensei-dashboard {
  padding: 0 0 42px !important;
}

.sensei-ai-shell :is(
  .skills-catalog-page,
  .company-users-page,
  .competence-map-page,
  .employee-form-page,
  .employees-page,
  .jst-matrix-theme,
  .il-page,
  .is-page
) {
  background: transparent !important;
}

/* Old pages frequently hard-code their own desktop max width on the first-level
   shell. The app shell is now the single source of truth. */
.sensei-ai-shell :is(
  .vbr-page-hero,
  .employees-page .vbr-page-hero,
  .employee-form-page .vbr-page-hero
) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   Page headers — same spatial language as Swaydesk: no header card/table.
   -------------------------------------------------------------------------- */

.sensei-ai-shell :is(.competence-center-header, .il-header, .ie-header) {
  padding: 2px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.sensei-ai-shell section:has(> .vbr-page-hero) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.sensei-ai-shell :is(.jst-page-backdrop, .jst-matrix-head-backdrop) {
  display: none !important;
}

.sensei-ai-shell :is(
  .vbr-page-hero,
  .jst-matrix-page-head,
  .competence-center-hero,
  .il-hero,
  .ie-hero,
  .is-header
) {
  position: relative !important;
  overflow: visible !important;
  min-height: 0 !important;
  padding: 5px 0 20px !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--sx-ink) !important;
}

.sensei-ai-shell :is(
  .vbr-page-hero,
  .jst-matrix-page-head,
  .competence-center-hero,
  .il-hero,
  .ie-hero,
  .is-header
)::before,
.sensei-ai-shell .il-hero::before {
  display: none !important;
}

.sensei-ai-shell :is(
  .vbr-page-hero,
  .jst-matrix-page-head,
  .competence-center-hero,
  .il-hero,
  .ie-hero,
  .is-header
)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: var(--sx-gradient);
  opacity: .55;
}

.sensei-ai-shell :is(
  .vbr-page-hero h1,
  .jst-matrix-page-head h1,
  .competence-center-hero__title,
  .il-hero__title,
  .ie-hero__title,
  .is-title
) {
  color: var(--sx-ink) !important;
  font-size: clamp(28px, 2.25vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -.05em !important;
}

.sensei-ai-shell :is(
  .vbr-page-hero p,
  .jst-matrix-page-head p,
  .competence-center-hero__description,
  .il-hero__description,
  .ie-hero__description,
  .is-description
) {
  max-width: 820px !important;
  color: var(--sx-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.sensei-ai-shell :is(
  .competence-center-hero__eyebrow,
  .company-admin-hero__eyebrow,
  .il-hero__eyebrow,
  .ie-hero__eyebrow,
  .is-eyebrow,
  .vbr-page-hero [class*="uppercase"]
) {
  color: var(--sx-purple) !important;
}

/* Matrix page head is itself the outer section, unlike the other headers. */
.sensei-ai-shell .jst-matrix-page-head {
  margin: 0 !important;
}
.sensei-ai-shell .jst-matrix-page-head > div:not(.jst-matrix-head-backdrop) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* Forms use the same content measure as tables and lists. Individual grids
   still decide their internal columns, but the page no longer jumps between
   1180 / 1280 / 1320 / 1760 px shells. */
.sensei-ai-shell main :is(form.jst-form-theme, .jst-form-shell) {
  width: 100% !important;
  max-width: var(--sx-content-max) !important;
  margin-inline: auto !important;
}

.sensei-ai-shell :is(.employees-toolbar, .employees-page > section + section > div, .issues-page, .checklists-page) {
  max-width: var(--sx-content-max) !important;
}

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */

.sensei-theme-toggle {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--sx-line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #57546d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 3px 12px rgba(49,38,92,.035);
  backdrop-filter: blur(12px);
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.sensei-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(122,82,255,.26);
  background: rgba(255,255,255,.96);
  color: #6546d9;
}
.sensei-theme-toggle__icon {
  width: 14px;
  height: 14px;
}
.sensei-theme-toggle__icon--sun { display: none; }
html[data-theme="dark"] .sensei-theme-toggle__icon--moon { display: none; }
html[data-theme="dark"] .sensei-theme-toggle__icon--sun { display: block; }

/* --------------------------------------------------------------------------
   Dark mode — broad compatibility layer for legacy Tailwind/Jinja surfaces.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] body.sensei-ai-shell {
  color: var(--sx-ink);
  background:
    radial-gradient(circle at 87% -8%, rgba(145,107,255,.14), transparent 34rem),
    radial-gradient(circle at 12% 17%, rgba(36,191,237,.08), transparent 28rem),
    linear-gradient(180deg, #11101c 0, var(--sx-bg) 52%, #0b0b14 100%) !important;
}

html[data-theme="dark"] body.sensei-ai-shell::before {
  opacity: .26;
  background-image:
    linear-gradient(rgba(203,194,239,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,194,239,.035) 1px, transparent 1px);
}

html[data-theme="dark"] body.sensei-ai-shell > header {
  background: rgba(15,14,25,.86) !important;
  border-bottom-color: var(--sx-line) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.20) !important;
}
html[data-theme="dark"] body.sensei-ai-shell > header a[aria-label="4sensei — strona główna"] {
  border-right-color: var(--sx-line) !important;
}
html[data-theme="dark"] .sensei-topbar-brand-copy,
html[data-theme="dark"] .sensei-topbar-brand-copy strong,
html[data-theme="dark"] .sensei-topbar-workspace__copy strong {
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] .sensei-topbar-brand-copy span,
html[data-theme="dark"] .sensei-topbar-workspace__copy small {
  color: #7f7a94 !important;
}
html[data-theme="dark"] .sensei-topbar-workspace__mark {
  border-color: rgba(152,119,255,.20);
  background: linear-gradient(145deg, rgba(152,119,255,.16), rgba(69,215,255,.07));
  color: #b39cff;
}

html[data-theme="dark"] body.sensei-ai-shell aside[aria-label="Menu modułów"] {
  background: rgba(15,14,25,.84) !important;
  border-right-color: var(--sx-line) !important;
  color: var(--sx-muted) !important;
  box-shadow: 12px 0 34px rgba(0,0,0,.12) !important;
}
html[data-theme="dark"] .sensei-ai-shell aside[aria-label="Menu modułów"] :is(nav > a, .sidebar-group__summary, .sidebar-group__item, .sidebar-user) {
  color: #aaa6bd !important;
}
html[data-theme="dark"] .sensei-ai-shell aside[aria-label="Menu modułów"] :is(nav > a, .sidebar-group__summary, .sidebar-group__item)[aria-current="page"],
html[data-theme="dark"] .sensei-ai-shell aside[aria-label="Menu modułów"] .sidebar-group--active > .sidebar-group__summary {
  background: linear-gradient(115deg, rgba(117,128,255,.16), rgba(227,84,201,.08)) !important;
  color: #c9baff !important;
}
html[data-theme="dark"] .sensei-ai-shell aside[aria-label="Menu modułów"] :is(nav > a, .sidebar-group__summary, .sidebar-group__item):hover {
  background: rgba(255,255,255,.045) !important;
  color: #e8e4f5 !important;
}

html[data-theme="dark"] .sensei-theme-toggle,
html[data-theme="dark"] .sensei-ai-shell .account-trigger {
  border-color: var(--sx-line) !important;
  background: rgba(28,27,45,.78) !important;
  color: #d8d4e6 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .sensei-theme-toggle:hover,
html[data-theme="dark"] .sensei-ai-shell .account-trigger:hover,
html[data-theme="dark"] .sensei-ai-shell .account-trigger[aria-expanded="true"] {
  border-color: rgba(152,119,255,.32) !important;
  background: rgba(35,33,54,.98) !important;
  color: #fff !important;
}
html[data-theme="dark"] .sensei-ai-status {
  border-color: rgba(152,119,255,.22);
  background: linear-gradient(115deg, rgba(117,128,255,.13), rgba(227,84,201,.09));
  color: #b9a4ff;
  box-shadow: none;
}
html[data-theme="dark"] .sensei-ai-shell .account-menu {
  border-color: var(--sx-line) !important;
  background: var(--sx-elevated) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.42) !important;
  color: var(--sx-ink-2) !important;
}
html[data-theme="dark"] .sensei-ai-shell .account-menu :is(.account-menu__name, .account-menu__action) { color: var(--sx-ink-2) !important; }
html[data-theme="dark"] .sensei-ai-shell .account-menu__email { color: var(--sx-muted) !important; }

/* Standard cards and module shells. */
html[data-theme="dark"] .sensei-ai-shell main :is(
  .vbr-card, .vbr-filter-card, .vbr-table-card, .jst-auto-card, .jst-form-shell,
  [data-settings-panel], .il-toolbar, .il-table-wrap, .il-mobile-card, .is-summary,
  .is-point-card, .ie-basics-card, .ie-workspace-card, .ie-step-card, .ie-subpoint-card,
  .skills-catalog-editor, .company-users-editor, .company-users-main, .company-users-sidebar
) {
  border-color: var(--sx-line) !important;
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
  box-shadow: var(--sx-shadow) !important;
}

html[data-theme="dark"] .sensei-dashboard section.mt-5 > .overflow-hidden,
html[data-theme="dark"] .sensei-metric-card,
html[data-theme="dark"] .sensei-orb-card {
  border-color: var(--sx-line) !important;
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
  box-shadow: var(--sx-shadow) !important;
}

html[data-theme="dark"] .sensei-command-hero {
  border-color: var(--sx-line) !important;
  background:
    radial-gradient(circle at 84% 4%, rgba(152,119,255,.16), transparent 32%),
    radial-gradient(circle at 66% 92%, rgba(69,215,255,.08), transparent 30%),
    linear-gradient(135deg, rgba(26,24,44,.96), rgba(20,19,34,.94)) !important;
  box-shadow: var(--sx-shadow) !important;
}
html[data-theme="dark"] .sensei-command-hero h1,
html[data-theme="dark"] .sensei-metric-card__value { color: var(--sx-ink) !important; }
html[data-theme="dark"] .sensei-command-hero__lead,
html[data-theme="dark"] .sensei-metric-card__meta { color: var(--sx-muted) !important; }
html[data-theme="dark"] .sensei-command-hero__secondary {
  border-color: var(--sx-line) !important;
  background: rgba(31,29,49,.78) !important;
  color: #d8d3e8 !important;
}

/* Inputs / selects / textareas */
html[data-theme="dark"] .sensei-ai-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .vbr-input, .vbr-select, .il-control, .il-search-input, .il-select) {
  border-color: var(--sx-line-strong) !important;
  background-color: rgba(18,17,30,.94) !important;
  color: var(--sx-ink-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html[data-theme="dark"] .sensei-ai-shell :is(input, select, textarea):focus {
  border-color: rgba(152,119,255,.58) !important;
  box-shadow: 0 0 0 4px rgba(152,119,255,.12) !important;
}
html[data-theme="dark"] .sensei-ai-shell ::placeholder { color: #6e697f !important; }
html[data-theme="dark"] .sensei-ai-shell option { background: #181725; color: #e6e2ef; }

/* Generic light utility classes from older templates. Scoped to app only. */
html[data-theme="dark"] .sensei-ai-shell main :is(.bg-white, .bg-white\/95, .bg-white\/90, .bg-white\/85, .bg-white\/80) {
  background-color: var(--sx-surface) !important;
}
html[data-theme="dark"] .sensei-ai-shell main :is(.bg-slate-50, .bg-slate-50\/60, .bg-slate-50\/80, .bg-slate-50\/90, .bg-slate-100) {
  background-color: rgba(28,27,44,.68) !important;
}
html[data-theme="dark"] .sensei-ai-shell main :is(.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700) {
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] .sensei-ai-shell main :is(.text-slate-600, .text-slate-500, .text-slate-400) {
  color: var(--sx-muted) !important;
}
html[data-theme="dark"] .sensei-ai-shell main :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-slate-700, .ring-slate-200, .ring-slate-200\/80) {
  border-color: var(--sx-line) !important;
  --tw-ring-color: var(--sx-line) !important;
}

html[data-theme="dark"] .sensei-ai-shell thead th,
html[data-theme="dark"] .sensei-ai-shell .il-table-head {
  background: rgba(29,28,45,.92) !important;
  color: #88839b !important;
}
html[data-theme="dark"] .sensei-ai-shell tbody tr { border-color: var(--sx-line) !important; }
html[data-theme="dark"] .sensei-ai-shell tbody tr:hover,
html[data-theme="dark"] .sensei-ai-shell .il-table-row:hover { background: rgba(152,119,255,.055) !important; }

html[data-theme="dark"] .sensei-ai-shell :is(.vbr-btn-outline, .vbr-btn-secondary) {
  border-color: var(--sx-line-strong) !important;
  background: rgba(31,29,49,.82) !important;
  color: #d9d4e7 !important;
}
html[data-theme="dark"] .sensei-ai-shell :is(.vbr-btn-outline, .vbr-btn-secondary):hover {
  border-color: rgba(152,119,255,.32) !important;
  background: rgba(152,119,255,.10) !important;
  color: #c7b7ff !important;
}

html[data-theme="dark"] .sensei-ai-shell :is([role="dialog"].jst-dialog, .jst-dialog) {
  border-color: var(--sx-line) !important;
  background: var(--sx-elevated) !important;
  color: var(--sx-ink-2) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.52) !important;
}

html[data-theme="dark"] .sensei-ai-shell #mobileModuleNav {
  border-color: var(--sx-line) !important;
  background: rgba(15,14,25,.95) !important;
  box-shadow: 0 -16px 50px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .sensei-ai-shell footer,
html[data-theme="dark"] .sensei-ai-shell footer > div {
  background: #0a0a11 !important;
  border-color: rgba(255,255,255,.07) !important;
}

@media (max-width: 767px) {
  .sensei-ai-shell main > div {
    padding: 18px 14px 88px !important;
  }
  .sensei-ai-shell :is(.competence-center-hero, .il-hero, .ie-hero, .vbr-page-hero, .jst-matrix-page-head, .is-header) {
    padding-bottom: 17px !important;
  }
  .sensei-theme-toggle {
    width: 36px;
    padding: 0;
  }
  .sensei-theme-toggle > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sensei-theme-toggle { transition: none !important; }
}

/* Final alignment: Sway-style headers stay completely open — no decorative rule. */
.sensei-ai-shell :is(
  .vbr-page-hero,
  .jst-matrix-page-head,
  .competence-center-hero,
  .il-hero,
  .ie-hero,
  .is-header
)::after {
  display: none !important;
}

html[data-theme="dark"] .sensei-ai-shell .jst-matrix-theme {
  --mx-bg: var(--sx-bg) !important;
  --mx-panel: var(--sx-panel-solid) !important;
  --mx-text: var(--sx-ink-2) !important;
  --mx-title: var(--sx-ink) !important;
  --mx-muted: var(--sx-muted) !important;
  --mx-border: var(--sx-line) !important;
  --mx-border-strong: var(--sx-line-strong) !important;
  --mx-blue: var(--sx-purple) !important;
  --mx-blue-hover: #ad91ff !important;
  --mx-blue-soft: rgba(152,119,255,.14) !important;
}
html[data-theme="dark"] .sensei-ai-shell .employees-page {
  --emp-bg: var(--sx-bg) !important;
  --emp-panel: var(--sx-panel-solid) !important;
  --emp-text: var(--sx-ink-2) !important;
  --emp-title: var(--sx-ink) !important;
  --emp-muted: var(--sx-muted) !important;
  --emp-border: var(--sx-line) !important;
  --emp-border-strong: var(--sx-line-strong) !important;
  --emp-blue: var(--sx-purple) !important;
  --emp-blue-hover: #ad91ff !important;
  --emp-blue-soft: rgba(152,119,255,.14) !important;
}
html[data-theme="dark"] .sensei-ai-shell .employee-form-page {
  --ef-bg: var(--sx-bg) !important;
  --ef-panel: var(--sx-panel-solid) !important;
  --ef-text: var(--sx-ink-2) !important;
  --ef-title: var(--sx-ink) !important;
  --ef-muted: var(--sx-muted) !important;
  --ef-border: var(--sx-line) !important;
  --ef-border-strong: var(--sx-line-strong) !important;
  --ef-blue: var(--sx-purple) !important;
  --ef-blue-hover: #ad91ff !important;
  --ef-blue-soft: rgba(152,119,255,.14) !important;
}


/* ========================================================================== 
   4sensei NEXT v3 — employee surface cleanup
   Keep the employee screen spatially open; only filters and results are cards.
   ========================================================================== */
.sensei-ai-shell .employees-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 36px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.sensei-ai-shell .employees-page > section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sensei-ai-shell .employees-page > section:first-of-type {
  padding-top: 0 !important;
}
.sensei-ai-shell .employees-page .employees-hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 4px 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sensei-ai-shell .employees-page .employees-toolbar,
.sensei-ai-shell .employees-page .employees-list-card,
.sensei-ai-shell .employees-page > section > div {
  width: 100% !important;
  max-width: none !important;
}


/* 4sensei: unified page top spacing v1 */
/* Domyslnie 12px; wybrane ekrany 26px. */
.sensei-ai-shell:has(.studio-dashboard-home.home4),
.sensei-ai-shell:has(form#instructionForm),
.sensei-ai-shell:has(form#aiXlsxImportForm) {
  --sx-page-top: 26px;
}

/* 4sensei: dodatkowy odstep na stronie Start */
@media (min-width: 768px) {
  .sensei-ai-shell main > .home4-page-rings {
    --sx-page-top: 48px;
  }
}


/* 4sensei viewport consoles fix 20261026 */

@media (min-width: 801px) and (min-height: 600px) {

  body.sensei-ai-shell:has(
    :is(#employeeConsole, #skillsCatalog, #m4App)
  ) {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.sensei-ai-shell:has(
    :is(#employeeConsole, #skillsCatalog, #m4App)
  ) > div.flex.flex-1 {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.sensei-ai-shell:has(
    :is(#employeeConsole, #skillsCatalog, #m4App)
  ) main {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 36px !important;
  }

  body.sensei-ai-shell:has(
    :is(#employeeConsole, #skillsCatalog, #m4App)
  ) main > div {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  body.sensei-ai-shell :is(
    #employeeConsole.ep-app,
    #skillsCatalog.sc-app,
    #m4App.m4-app
  ) {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}