:root{
  --sys-bg:#f4f7fb;
  --sys-bg-soft:#eef3fb;
  --sys-surface:#ffffff;
  --sys-surface-soft:#f8fbff;
  --sys-border:#d8e2f2;
  --sys-border-strong:#c6d4ea;
  --sys-text:#1c2743;
  --sys-text-soft:#5f6f91;
  --sys-primary:#3f63d8;
  --sys-primary-strong:#2f52c7;
  --sys-success:#1f9b66;
  --sys-warning:#de9e33;
  --sys-danger:#d65063;
  --sys-shadow:0 16px 38px rgba(42,63,112,.08);
  --sys-shadow-lg:0 28px 64px rgba(32,49,95,.12);
  --sys-radius-xl:28px;
  --sys-radius-lg:20px;
  --sys-radius-md:16px;
}

html{scroll-behavior:smooth}
body.app-body{
  background:
    radial-gradient(circle at top left, rgba(63,99,216,.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(79,109,209,.06), transparent 25%),
    var(--sys-bg) !important;
  color:var(--sys-text) !important;
}
body.sidebar-open{overflow:hidden}

.shell{gap:20px!important;padding:20px!important;align-items:start}
.main-area{gap:20px!important;min-width:0}
.content{padding-right:0!important}
.platform-content,
.auth-wrap,
.page-block{max-width:1380px;width:100%;margin:0 auto}
.platform-content{padding-bottom:40px}

.topbar,
.sidebar,
.card,
.table-shell,
.toolbar-card,
.drawer,
.drawer-card,
.workday-pill,
.rail-btn,
.company-user-card,
.auth-card,
.auth-hero,
.platform-topbar,
.hero-kpi,
.quick-filters-card,
.onboarding-panel{
  background:var(--sys-surface)!important;
  border:1px solid var(--sys-border)!important;
  box-shadow:var(--sys-shadow)!important;
}

.topbar{
  min-height:84px;
  border-radius:var(--sys-radius-xl)!important;
  grid-template-columns:minmax(220px,auto) minmax(320px,1fr) auto!important;
}
.topbar-left h1{font-size:clamp(1.7rem,2vw,2.35rem)!important;letter-spacing:-.03em}
.search-shell{height:54px!important;border-radius:18px!important;background:var(--sys-surface-soft)!important}
.search-shell span{font-size:18px;color:var(--sys-text-soft)}

.sidebar{
  border-radius:32px!important;
  padding:22px 18px 18px!important;
  background:linear-gradient(180deg,#102e67 0%, #15376f 100%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 24px 54px rgba(17,38,79,.28)!important;
}
.sidebar .brand,
.sidebar .nav-section-label,
.sidebar .company-user-card strong,
.sidebar .company-user-card p,
.sidebar .company-user-card .mini,
.sidebar .nav-link,
.sidebar .ghost-btn{color:#eef4ff!important}
.sidebar .brand p,
.sidebar .nav-section-label,
.sidebar .company-user-card p,
.sidebar .company-user-card .mini{opacity:.78}
.sidebar .brand{border-bottom-color:rgba(255,255,255,.08)!important;margin-bottom:10px!important;padding-bottom:16px!important}
.sidebar .logo{background:linear-gradient(135deg,#4f81ff,#21c4ff)!important;box-shadow:0 14px 28px rgba(27,124,255,.28)!important}
.sidebar .nav{gap:6px!important}
.sidebar .nav-link{
  min-height:48px;
  display:flex!important;
  align-items:center;
  border-radius:16px!important;
  padding:12px 14px!important;
  border:1px solid transparent;
  font-weight:700!important;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.is-active,
.sidebar .nav-link[aria-current="page"]{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#fff!important;
  transform:none!important;
}
.sidebar .company-user-card{
  margin-top:18px!important;
  margin-bottom:14px!important;
  padding:14px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.1)!important;
}
.sidebar-footer{padding-top:8px}
.sidebar .ghost-btn{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.12)!important}
.sidebar .danger-btn{background:rgba(255,255,255,.12)!important;color:#fff!important}

.skip-link{
  z-index:200;
  border-radius:14px;
  box-shadow:var(--sys-shadow-lg);
}

.primary-btn,
.ghost-btn,
.input,
.textarea,
.inline-control,
select.input{
  min-height:46px!important;
  border-radius:16px!important;
}
.primary-btn{
  background:linear-gradient(135deg,var(--sys-primary),var(--sys-primary-strong))!important;
  box-shadow:0 14px 28px rgba(63,99,216,.24)!important;
}
.primary-btn:hover{transform:translateY(-1px)}
.ghost-btn{
  background:#fff!important;
  border:1px solid var(--sys-border)!important;
}
.input,
.textarea,
.inline-control,
select.input{
  background:#fff!important;
  border:1px solid var(--sys-border-strong)!important;
  color:var(--sys-text)!important;
}
.input:focus,
.textarea:focus,
.inline-control:focus,
select.input:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible,
.kanban-card:focus-visible,
.nav-link:focus-visible,
.rail-btn:focus-visible,
.company-user-card:focus-visible{
  outline:none!important;
  border-color:var(--sys-primary)!important;
  box-shadow:0 0 0 4px rgba(63,99,216,.16)!important;
}

.section-head{align-items:flex-end!important}
.section-head h2,.card-title h3{letter-spacing:-.03em}
.section-head p,.card-title + p,.muted{color:var(--sys-text-soft)!important}
.card,.drawer-card{border-radius:var(--sys-radius-xl)!important;padding:22px!important}
.metric-card strong{font-size:2rem!important}
.hero-kpi{padding:18px!important;gap:14px!important}
.hero-kpi>div,.drawer-stat{background:var(--sys-surface-soft)!important;border:1px solid var(--sys-border)!important;border-radius:18px!important}
.table-shell,.table-like{border-radius:26px!important;overflow:hidden}
.table-row{padding:16px 18px!important}
.table-head{background:var(--sys-surface-soft)!important;color:var(--sys-text-soft)!important}
.list-item,.task-row,.notice-row{padding:14px 0!important}
.badge{border-radius:999px!important}
.progress{height:10px!important;background:#edf2fb!important}
.progress>span{background:linear-gradient(90deg,var(--sys-primary),#79a6ff)!important}

.quick-filters-card{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:22px;
}
.quick-filter-chip{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--sys-border);
  background:#fff;
  color:var(--sys-text);
  font-weight:700;
}
.quick-filter-chip strong{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--sys-bg-soft);color:var(--sys-primary)}
.quick-filter-chip.is-active{background:linear-gradient(180deg,#f2f6ff,#eaf0ff)!important;border-color:#cad8f1!important}

.onboarding-panel{padding:24px!important;border-radius:32px!important;align-items:start}
.onboarding-step{padding:14px 16px!important;border-radius:18px!important}
.tip-card{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px!important}

.kanban-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
  gap:16px!important;
  align-items:start!important;
}
.kanban-col{
  min-width:0!important;
  background:linear-gradient(180deg,#fcfdff 0%,#f6f9fe 100%)!important;
  border:1px solid var(--sys-border)!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
.kanban-head{
  padding:16px 18px!important;
  background:linear-gradient(180deg,#f7faff 0%,#f2f6fd 100%)!important;
  border-bottom:1px solid var(--sys-border)!important;
}
.kanban-list{
  display:grid!important;
  gap:12px!important;
  min-height:220px!important;
  padding:14px!important;
  transition:background .18s ease, box-shadow .18s ease;
}
.kanban-list.drag-over{
  background:linear-gradient(180deg,rgba(63,99,216,.08),rgba(63,99,216,.02))!important;
  box-shadow:inset 0 0 0 2px rgba(63,99,216,.18)!important;
}
.kanban-card{
  padding:14px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid var(--sys-border)!important;
  box-shadow:0 10px 24px rgba(44,64,112,.06)!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  cursor:grab;
}
.kanban-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(44,64,112,.1)!important}
.kanban-card:active{cursor:grabbing}
.kanban-card.dragging{opacity:.65!important;transform:rotate(1deg) scale(.99)!important}
.kanban-card.drop-before::before{left:14px!important;right:14px!important;top:-8px!important;height:4px!important;background:var(--sys-primary)!important}
.kanban-empty{
  border:1px dashed var(--sys-border-strong)!important;
  background:rgba(255,255,255,.8)!important;
  min-height:64px;
  display:grid;
  place-items:center;
}
.kanban-toolbar-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:18px;
  background:var(--sys-surface-soft);
  border:1px solid var(--sys-border);
}
.kanban-toolbar-note code{padding:2px 8px;border-radius:999px;background:#fff;border:1px solid var(--sys-border)}

.auth-wrap.auth-split{
  max-width:1220px!important;
  min-height:calc(100vh - 40px);
  align-items:center!important;
  padding:20px 0!important;
}
.auth-hero,
.auth-card{
  min-height:0!important;
  height:auto!important;
}
.auth-hero{
  background:linear-gradient(160deg,#ffffff 0%,#f5f9ff 100%)!important;
  padding:26px!important;
}
.auth-hero h1{font-size:clamp(2.2rem,4vw,4rem)!important;line-height:1.02!important;letter-spacing:-.05em}
.auth-hero p{font-size:1.05rem;max-width:54ch}
.auth-head h2{font-size:2rem;letter-spacing:-.04em}
.auth-card{max-width:520px;width:100%;margin-left:auto}
.auth-card label{display:grid;gap:8px;font-weight:700;color:var(--sys-text)}
.auth-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-points{display:grid;gap:12px;margin-top:18px}
.hero-points>div{padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--sys-border)}

.platform-topbar{
  max-width:1380px;
  width:100%;
  margin:0 auto;
  min-height:84px;
  justify-content:space-between!important;
}
.centered-platform-topbar{grid-template-columns:minmax(240px,1fr) auto!important}
.platform-grid{max-width:1380px;margin:0 auto;gap:20px!important}
.platform-grid .section-head{align-items:flex-start!important}
.platform-grid .hero-kpi{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.platform-grid .hero-kpi > div{min-height:122px;display:grid;align-content:start;gap:8px}
.company-card{padding:22px!important}
.form-inline{display:grid!important;grid-template-columns:minmax(220px,1.4fr) 140px 120px 110px 120px 110px 150px 120px;gap:12px;align-items:center}
.small-input{min-width:0!important}

.entity-builder-grid{
  display:grid;
  gap:18px;
}
.entity-builder-note{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg,#f8fbff,#f2f6fd);
  border:1px solid var(--sys-border);
}
.builder-field-row{position:relative;padding-right:42px}
.builder-remove-field{
  position:absolute;
  top:14px;
  right:0;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--sys-border);
  background:#fff;
  color:var(--sys-danger);
  cursor:pointer;
}
.builder-field-row:first-child .builder-remove-field{display:none}
.builder-summary-list{display:grid;gap:10px}
.builder-summary-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:var(--sys-surface-soft);border:1px solid var(--sys-border)}
.builder-summary-meta{display:flex;gap:8px;flex-wrap:wrap}

.mobile-only{display:none!important}
.desktop-only{display:block!important}

@media (max-width:1280px){
  .shell{grid-template-columns:280px minmax(0,1fr) 64px!important}
  .form-inline{grid-template-columns:minmax(220px,1.2fr) 120px 110px 100px 120px 110px 150px 120px}
}

@media (max-width:1180px){
  .shell{grid-template-columns:1fr!important;padding:14px!important}
  .sidebar{display:flex!important;position:fixed!important;inset:0 auto 0 0!important;width:min(360px,100vw)!important;height:100vh!important;max-height:none!important;transform:translateX(-102%);border-radius:0 28px 28px 0!important;z-index:120!important;padding-bottom:24px!important;overflow:auto!important}
  .sidebar.mobile-open{transform:translateX(0)!important}
  .mobile-overlay{position:fixed!important;inset:0!important;background:rgba(11,21,43,.42)!important;backdrop-filter:blur(4px);z-index:110!important;display:none}
  .mobile-overlay.open{display:block!important}
  .right-rail{display:none!important}
  .topbar{position:sticky!important;top:10px!important;z-index:90!important;grid-template-columns:1fr!important;gap:14px!important;padding:16px!important}
  .mobile-only-trigger{display:inline-flex!important}
  .desktop-shell .mobile-only-trigger{display:none!important}
  .platform-grid .hero-kpi{grid-template-columns:1fr!important}
  .form-inline{grid-template-columns:1fr!important}
}

@media (max-width:860px){
  .auth-wrap.auth-split{padding:10px 0 22px!important}
  .auth-card{max-width:none!important;margin-left:0!important}
  .onboarding-panel{grid-template-columns:1fr!important}
  .drawer-grid,
  .stats-grid,
  .split-grid,
  .reviews-grid,
  .filters-grid,
  .form-grid{grid-template-columns:1fr!important}
  .section-head,.tip-card,.kanban-toolbar-note{align-items:flex-start!important}
  .quick-filters-card{padding:10px!important;gap:8px!important}
  .quick-filter-chip{flex:1 1 calc(50% - 8px)}
  .platform-topbar,.platform-grid,.platform-content,.auth-wrap,.page-block{max-width:100%!important}
}