:root {
  --bg: #f5f8fc;
  --panel: #ffffff;
  --panel-soft: #f9fafb;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #dde6f2;
  --accent: #0b2f63;
  --accent-strong: #2563eb;
  --accent-soft: #eaf2ff;
  --danger: #e31e24;
  --warning: #f59e0b;
  --success: #16a34a;
  --sidebar: #071e3d;
  --shadow-soft: 0 12px 35px rgba(15, 23, 42, .07);
  --shadow-lift: 0 24px 70px rgba(15, 23, 42, .11);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: #f5f8fc;
  color: var(--ink);
  font-family: Calibri, Carlito, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
button, input, select, textarea { transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  padding: 10px 13px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
label { display: grid; gap: 7px; color: #334155; font-size: 13px; font-weight: 800; }
textarea { min-height: 110px; resize: vertical; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: 32px; line-height: 1.08; letter-spacing: 0; }
h2 { margin-bottom: 12px; font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: 24px; line-height: 1.15; letter-spacing: 0; }
h3 { margin-bottom: 10px; font-size: 16px; font-weight: 900; letter-spacing: 0; }
::selection { background: rgba(99,102,241,.18); }

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 42px;
  align-items: center;
  overflow-x: hidden;
  padding: 56px;
  background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(14,165,233,.10)), #f8fafc;
}
.login-brand-panel { max-width: 780px; color: var(--ink); }
.logo-lockup, .sidebar-brand { display: flex; align-items: center; gap: 12px; font-weight: 900; }
.logo-lockup strong, .sidebar-brand span:last-child { font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: 24px; letter-spacing: 0; }
.logo-mark {
  width: 42px; height: 42px; border-radius: 16px; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #0b2f63, #e31e24); color: #fff; font-weight: 900;
  box-shadow: 0 16px 35px rgba(11, 47, 99, .25);
}
.login-brand-panel h1 { margin: 34px 0 18px; font-size: clamp(42px, 6vw, 72px); line-height: .98; }
.login-brand-panel p { max-width: 660px; color: var(--muted); font-size: 19px; line-height: 1.7; }
.login-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.login-proof-grid span { border: 1px solid rgba(226,232,240,.95); border-radius: 18px; padding: 14px; background: rgba(255,255,255,.72); color: #334155; font-size: 13px; font-weight: 800; box-shadow: var(--shadow-soft); }
.login-card { background: #fff; border: 1px solid rgba(226,232,240,.9); border-radius: 24px; box-shadow: var(--shadow-lift); padding: 32px; display: grid; gap: 17px; }
.login-card h2 { font-size: 30px; }
.login-card button, .primary-button {
  min-height: 44px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  border-radius: 12px;
  font-weight: 900;
  padding: 11px 16px;
  box-shadow: 0 16px 35px rgba(79, 70, 229, .22);
}
.login-card button:hover, .primary-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; }
.login-row a { color: var(--accent); font-weight: 900; text-decoration: none; }
.checkline { display: flex; align-items: center; gap: 8px; }
.checkline input { width: auto; min-height: auto; }
.error { color: var(--danger); font-weight: 800; margin: 0; }
.error:not(:empty) { display: flex; align-items: center; gap: 8px; }
.error:not(:empty)::before {
  content: "!";
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff1f2;
  color: #e31e24;
  font-size: 12px;
  font-weight: 950;
}

/* Premium Salestos login */
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  justify-items: center;
  padding: 0;
  background: #f7f9fc;
  overflow: auto;
  font-family: "Sora", "Inter", sans-serif;
}
.login-form-panel {
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  padding: 32px 20px;
  background: transparent;
}
.login-card {
  width: min(100%, 390px);
  display: grid;
  gap: 16px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #E4EBF5;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
}
.login-logo-link { display: inline-flex; align-items: center; justify-self: center; margin-bottom: 4px; }
.login-logo-link img { width: 174px; max-width: 72vw; height: auto; display: block; }
.login-copy { display: grid; gap: 0; margin-bottom: 4px; text-align: center; }
.login-copy h1 { font-family: "Sora", "Inter", sans-serif; font-size: 23px; line-height: 1.18; font-weight: 650; color: #0B1220; }
.login-copy p { display: none; }
.login-card label { color: #0B1220; font-size: 13px; font-weight: 600; }
.login-card input {
  min-height: 48px;
  border-radius: 10px;
  border-color: #DCE6F2;
  background: #fff;
  color: #0B1220;
  padding: 12px 13px;
}
.login-card input:focus { border-color: #0b2f63; box-shadow: 0 0 0 4px rgba(11,47,99,.10); }
.field-with-icon { position: relative; display: block; }
.field-with-icon input { padding-left: 45px; }
.field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #0b2f63;
  pointer-events: none;
}
.field-icon svg,
.brand-feature-list svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.password-field { position: relative; display: block; }
.password-field input { padding-right: 48px; }
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: #0b2f63;
  box-shadow: none;
  padding: 0;
}
.password-toggle:hover { background: transparent; color: #e31e24; transform: translateY(-50%); box-shadow: none; }
.password-toggle:focus-visible { outline: 2px solid rgba(227,30,36,.3); outline-offset: 3px; }
.password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-row { margin-top: -2px; color: #667085; }
.login-row a, .login-footer a { color: #0B2F63; font-weight: 600; text-decoration: none; }
.login-row a:hover, .login-footer a:hover { color: #2563EB; text-decoration: underline; }
.checkline { display: inline-flex; align-items: center; gap: 9px; color: #667085; font-size: 13px; font-weight: 500; }
.checkline input { width: 16px; height: 16px; min-height: 16px; accent-color: #0b2f63; }
.login-submit {
  min-height: 50px;
  margin-top: 4px;
  border-radius: 10px;
  background: #0b2f63;
  color: #fff;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: 0 14px 28px rgba(11,47,99,.16);
}
.login-submit:hover { background: #071e3d; transform: translateY(-1px); box-shadow: 0 18px 36px rgba(7,30,61,.22); }
.login-submit.loading { opacity: .78; cursor: progress; }
.login-footer {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}
.login-brand-panel {
  position: relative;
  max-width: none;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 72px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(227,30,36,.28), transparent 26%),
    linear-gradient(145deg, #071e3d 0%, #0b2f63 58%, #071e3d 100%);
}
.brand-panel-content { position: relative; z-index: 2; max-width: 620px; display: grid; gap: 18px; }
.brand-square-logo {
  width: 96px;
  height: 72px;
  object-fit: contain;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 55px rgba(0,0,0,.22);
}
.login-brand-panel .eyebrow { color: rgba(255,255,255,.68); margin: 8px 0 -6px; }
.login-brand-panel h2 {
  margin: 0;
  max-width: 540px;
  font-family: Calibri, Carlito, "Segoe UI", sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.02;
  font-weight: 950;
  color: #fff;
}
.login-brand-panel p { max-width: 590px; margin: 0; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.72; }
.brand-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.brand-feature-list li {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 850;
  backdrop-filter: blur(12px);
}
.brand-feature-list span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e31e24;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.brand-graphic { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dot-pattern {
  position: absolute;
  right: 48px;
  top: 54px;
  width: 168px;
  height: 168px;
  opacity: .22;
  background-image: radial-gradient(rgba(255,255,255,.85) 1.3px, transparent 1.3px);
  background-size: 16px 16px;
}
.chart-bars { position: absolute; right: 92px; bottom: 118px; display: flex; align-items: end; gap: 12px; opacity: .24; }
.chart-bars i { width: 20px; border-radius: 999px 999px 0 0; background: rgba(255,255,255,.80); }
.chart-bars i:nth-child(1) { height: 70px; }
.chart-bars i:nth-child(2) { height: 112px; }
.chart-bars i:nth-child(3) { height: 150px; background: rgba(227,30,36,.86); }
.chart-bars i:nth-child(4) { height: 196px; }
.growth-arrow {
  position: absolute;
  right: 160px;
  bottom: 210px;
  width: 210px;
  height: 120px;
  border-top: 3px solid rgba(255,255,255,.35);
  border-right: 3px solid rgba(255,255,255,.35);
  transform: skew(-28deg) rotate(-8deg);
  border-radius: 0 24px 0 0;
}
.growth-arrow::after {
  content: "";
  position: absolute;
  right: -9px;
  top: -10px;
  width: 15px;
  height: 15px;
  border-top: 3px solid rgba(255,255,255,.45);
  border-right: 3px solid rgba(255,255,255,.45);
  transform: rotate(45deg);
}
.curve-line {
  position: absolute;
  left: 10%;
  bottom: -24%;
  width: 620px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  transform: rotate(-18deg);
}
@media (max-width: 960px) {
  .login-screen { grid-template-columns: 1fr; overflow: auto; }
  .login-form-panel { min-height: 100vh; padding: 34px 22px; }
  .login-brand-panel { display: none; }
  .login-card { width: min(100%, 430px); }
  .login-logo-link img { width: 205px; }
}

.suite-shell { min-height: 100vh; display: grid; grid-template-columns: 76px minmax(0, 1fr); background: #f7f9fc; transition: grid-template-columns .2s ease; }
.suite-shell.sidebar-expanded { grid-template-columns: 292px minmax(0, 1fr); }
.suite-sidebar {
  position: sticky; top: 0; height: 100vh; overflow: auto;
  background: linear-gradient(180deg, #071827, #0f2d3f);
  color: #fff; padding: 14px 12px; border-right: 1px solid rgba(148,163,184,.14);
}
.sidebar-brand { min-height: 52px; margin-bottom: 16px; justify-content: center; position: relative; }
.sidebar-expanded .sidebar-brand { justify-content: flex-start; padding-right: 44px; }
.sidebar-brand .logo-mark { width: 40px; height: 40px; border-radius: 14px; }
.sidebar-collapsed .sidebar-brand span:last-child { display: none; }
.sidebar-toggle {
  position: absolute; right: 0; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08); color: #fff;
}
.sidebar-toggle::before { content: "›"; display: block; font-size: 24px; line-height: 28px; }
.sidebar-expanded .sidebar-toggle::before { content: "‹"; }
.sidebar-nav { display: grid; gap: 6px; }
.nav-group { position: relative; }
.nav-button {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 46px; color: #cbd5e1; background: transparent; border-radius: 14px; padding: 6px; text-align: left; font-size: 13px; font-weight: 850;
}
.sidebar-collapsed .nav-button { grid-template-columns: 44px; justify-content: center; }
.nav-button:hover, .nav-button.active { background: rgba(255,255,255,.11); color: #fff; }
.nav-button.active { box-shadow: inset 3px 0 0 #2dd4bf; }
.nav-icon { width: 44px; height: 34px; border-radius: 12px; display: inline-grid; place-items: center; background: rgba(255,255,255,.08); color: #dbeafe; }
.nav-svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-collapsed .nav-label { display: none; }
.sidebar-collapsed .nav-group:hover::after {
  content: attr(data-tooltip);
}
.sidebar-collapsed .nav-group:hover .nav-button::after {
  content: attr(aria-label);
  position: fixed; left: 72px; transform: translateY(-1px); z-index: 40;
  min-width: max-content; padding: 8px 10px; border-radius: 10px;
  background: #0f172a; color: #fff; font-size: 12px; box-shadow: var(--shadow-lift);
}
.nav-submenu { display: grid; gap: 4px; margin: 3px 0 8px 54px; padding-left: 10px; border-left: 1px solid rgba(148,163,184,.25); }
.nav-submenu button {
  min-height: 31px; color: #aab8cf; background: transparent; text-align: left; border-radius: 9px; padding: 6px 9px; font-size: 12px; font-weight: 800;
}
.nav-submenu button:hover, .nav-submenu button.active { color: #fff; background: rgba(255,255,255,.08); }
.suite-main { min-width: 0; padding: 28px; }
.suite-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  margin: -28px -28px 26px; padding: 18px 28px; border-bottom: 1px solid rgba(226,232,240,.8);
  background: rgba(255,255,255,.86); backdrop-filter: blur(16px);
}
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px; }
.topbar-controls { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(6, minmax(118px, .7fr)) auto 88px 42px auto auto; align-items: center; gap: 8px; }
.topbar-controls select, .topbar-controls input { min-height: 40px; border-radius: 10px; font-size: 13px; }
.compare-toggle { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px 10px; white-space: nowrap; }
.compare-toggle input { width: auto; min-height: auto; }
.icon-button, .ghost-button, .profile-button, .secondary-button {
  min-height: 42px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; font-weight: 900; padding: 10px 13px; box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.icon-button { width: 42px; height: 42px; padding: 0; }
.profile-button { min-width: 128px; text-align: left; }
.ghost-button:hover, .secondary-button:hover, .icon-button:hover { background: var(--accent-soft); border-color: #c7d2fe; color: var(--accent); transform: translateY(-1px); }
.status-bar { border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 14px; padding: 13px 15px; margin-bottom: 16px; color: #3730a3; font-weight: 800; }
.content-stack { display: grid; gap: 20px; }

.hero-panel, .panel, .chart-card, .stat-card, .module-card, .data-card, .empty-state {
  background: var(--panel); border: 1px solid rgba(226,232,240,.95); border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
}
.hero-panel { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.hero-panel p { color: var(--muted); max-width: 780px; line-height: 1.65; margin-bottom: 0; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.module-card { padding: 22px; display: grid; gap: 13px; text-align: left; color: var(--ink); }
.module-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.module-card p { color: var(--muted); margin: 0; line-height: 1.6; }
.module-card strong { font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: 24px; letter-spacing: 0; }
.module-card .module-icon { width: 46px; height: 46px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 900; }
.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { position: relative; overflow: hidden; padding: 16px; min-height: 108px; }
.stat-card::before {
  content: ""; position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(15,118,110,.14), rgba(29,78,216,.12));
}
.stat-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.stat-card strong { display: block; margin-top: 10px; font-size: 27px; font-weight: 900; letter-spacing: 0; }
.stat-card small { color: var(--muted); }
.chart-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-card { padding: 18px; min-height: 246px; }
.bi-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.bi-header p { margin: 0; color: var(--muted); line-height: 1.55; }
.bi-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bi-section-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.bi-section-tabs button { min-height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 10px; color: var(--ink); padding: 8px 11px; font-weight: 900; }
.bi-section-tabs button.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(15,118,110,.25); }
.drill-button { background: transparent; color: var(--accent); font-weight: 900; padding: 0; }
.chart-card header, .section-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.bar-list { display: grid; gap: 12px; }
.bar-row { display: grid; gap: 7px; }
.bar-row-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 800; }
.bar-track { height: 9px; border-radius: 999px; background: #eef2ff; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.donut-list { display: grid; gap: 9px; }
.donut-list div { display: flex; justify-content: space-between; border-bottom: 1px solid #eef2f7; padding-bottom: 9px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.filter-bar .left, .filter-bar .right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filter-bar input, .filter-bar select { width: auto; min-width: 180px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-chip { display: inline-grid; gap: 2px; min-width: 132px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; font-size: 12px; color: var(--muted); }
.mini-chip strong { color: var(--ink); font-size: 11px; text-transform: uppercase; }
.app-access-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-access-list article { display: grid; gap: 6px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.app-access-list span { color: var(--accent); font-weight: 900; }
.app-access-list small { color: var(--muted); line-height: 1.45; }
.settings-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.settings-layout aside { display: grid; align-content: start; gap: 8px; border-right: 1px solid var(--line); padding-right: 14px; }
.settings-layout aside button { text-align: left; justify-content: flex-start; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: 8px; padding: 9px 10px; }
.settings-layout aside button.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(15,118,110,.18); }
.settings-layout main { display: grid; gap: 12px; }
.settings-layout main header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-role-picker { display: grid; gap: 10px; margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.app-role-picker header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.app-role-row { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(150px, 1fr); gap: 10px; align-items: center; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.tabbar { display: flex; flex-wrap: wrap; gap: 8px; }
.tabbar button { min-height: 38px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 9px 13px; font-weight: 900; }
.tabbar button.active { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; }
.data-card { overflow: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; }
th, td { padding: 15px 16px; border-bottom: 1px solid #eef2f7; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; background: #f8fafc; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
tr:hover td { background: #f8fafc; }
tr:last-child td { border-bottom: 0; }
.cell-title { display: grid; gap: 4px; }
.cell-title small, .muted { color: var(--muted); }
.badge { display: inline-flex; align-items: center; min-height: 26px; border-radius: 999px; padding: 4px 9px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 900; }
.badge.warn { background: #fff7ed; color: var(--warning); }
.badge.danger { background: #fff1f2; color: var(--danger); }
.badge.success { background: #ecfdf5; color: var(--success); }
.empty-state { padding: 32px; text-align: center; display: grid; gap: 11px; justify-items: center; color: var(--muted); }
.empty-state strong { color: var(--ink); font-size: 20px; font-weight: 900; }
.loading { padding: 28px; color: var(--muted); font-weight: 900; }

.drawer-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.50); display: flex; justify-content: flex-end; z-index: 30; backdrop-filter: blur(4px); }
.drawer { width: min(560px, 100%); background: #fff; min-height: 100vh; box-shadow: var(--shadow-lift); padding: 24px; overflow: auto; }
.drawer header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.drawer form { display: grid; gap: 15px; }
.form-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }

@media (max-width: 1180px) {
  .suite-shell, .suite-shell.sidebar-expanded { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar-brand span:last-child, .nav-label, .nav-submenu { display: none; }
  .nav-button { grid-template-columns: 44px; justify-content: center; }
  .topbar-controls { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .profile-button, .ghost-button { display: none; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .login-proof-grid, .module-grid, .chart-grid, .stat-grid { grid-template-columns: 1fr; }
  .suite-shell { grid-template-columns: 1fr; }
  .suite-shell.sidebar-expanded { grid-template-columns: 1fr; }
  .suite-sidebar { position: sticky; top: 0; z-index: 20; height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; }
  .sidebar-brand { margin: 0; min-height: auto; }
  .sidebar-nav { display: flex; overflow-x: auto; }
  .nav-button { width: auto; min-width: 48px; }
  .nav-submenu { display: none; }
  .suite-main { padding: 18px; }
  .suite-topbar { margin: -18px -18px 20px; padding: 16px 18px; align-items: flex-start; flex-direction: column; }
  .topbar-controls { width: 100%; grid-template-columns: 1fr 1fr; }
  .hero-panel { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Compact BI shell inspired by enterprise analytics dashboards. */
.suite-shell { grid-template-columns: 56px minmax(0, 1fr); background: #f4f7fb; }
.suite-shell.sidebar-expanded { grid-template-columns: 248px minmax(0, 1fr); }
.suite-shell { display: block; }
.suite-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
  width: 56px; height: 100vh; background: #073f8f; padding: 8px 7px;
  overflow-x: hidden; overflow-y: auto;
}
.sidebar-expanded .suite-sidebar { width: 248px; }
.suite-main { margin-left: 56px; min-height: 100vh; }
.sidebar-expanded .suite-main { margin-left: 248px; }
.sidebar-brand { min-height: 42px; margin-bottom: 10px; }
.sidebar-brand .logo-mark { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }
.sidebar-toggle { width: 30px; height: 30px; border-radius: 8px; font-size: 0; }
.sidebar-toggle::before { content: ">"; display: block; font-size: 18px; line-height: 24px; }
.sidebar-expanded .sidebar-toggle::before { content: "<"; }
.sidebar-nav { gap: 3px; }
.nav-button { grid-template-columns: 38px minmax(0, 1fr); min-height: 38px; border-radius: 8px; padding: 3px; color: #dbeafe; font-size: 12px; font-weight: 800; }
.sidebar-collapsed .nav-button { grid-template-columns: 38px; }
.nav-button:hover, .nav-button.active { background: rgba(255,255,255,.16); color: #fff; }
.nav-button.active { box-shadow: inset 3px 0 0 #fff; }
.nav-icon { width: 38px; height: 32px; border-radius: 8px; background: transparent; color: #eaf3ff; }
.nav-svg { width: 18px; height: 18px; stroke-width: 2; }
.sidebar-collapsed .nav-group:hover .nav-button::after { left: 58px; }
.nav-submenu { margin: 2px 0 7px 46px; gap: 2px; }
.nav-submenu button { min-height: 28px; padding: 5px 8px; font-size: 11px; }
.suite-main { padding: 14px; }
.suite-topbar { margin: -14px -14px 12px; padding: 8px 14px; background: rgba(255,255,255,.96); }
.suite-topbar h1 { font-size: 28px; }
.topbar-controls { grid-template-columns: minmax(160px, 1.2fr) repeat(5, minmax(108px, .6fr)) 118px auto 68px 34px auto auto; gap: 6px; }
.topbar-controls select, .topbar-controls input { min-height: 32px; border-radius: 7px; font-size: 12px; padding: 6px 9px; }
.compare-toggle { min-height: 32px; border-radius: 7px; padding: 6px 8px; font-size: 12px; }
.icon-button, .ghost-button, .profile-button, .secondary-button { min-height: 32px; border-radius: 7px; padding: 6px 9px; font-size: 12px; }
.icon-button { width: 32px; height: 32px; }
.content-stack { gap: 10px; }
.hero-panel, .panel, .chart-card, .stat-card, .module-card, .data-card, .empty-state { border-radius: 8px; box-shadow: 0 4px 14px rgba(15,23,42,.045); }
.stat-grid { gap: 9px; }
.stat-card { min-height: 82px; padding: 11px 12px; }
.stat-card::before { width: 28px; height: 28px; border-radius: 9px; top: 10px; right: 10px; }
.stat-card span { font-size: 10px; }
.stat-card strong { margin-top: 6px; font-size: 20px; }
.chart-grid { gap: 9px; }
.chart-card { min-height: 190px; padding: 12px; }
.chart-card header, .section-header { margin-bottom: 9px; }
.bar-list { gap: 8px; }
.bar-track { height: 7px; }
.donut-list { gap: 6px; }
.donut-list div { padding-bottom: 6px; font-size: 12px; }
th, td { padding: 10px 12px; font-size: 12px; }
.badge { min-height: 22px; padding: 3px 8px; font-size: 11px; }
.bi-header { padding: 12px 14px; border-radius: 8px; align-items: center; }
.bi-header h2 { margin-bottom: 5px; font-size: 21px; }
.bi-header p { font-size: 12px; }
.bi-section-tabs { gap: 5px; }
.bi-section-tabs button { min-height: 30px; border-radius: 6px; padding: 5px 9px; font-size: 12px; }

.suite-sidebar { background: #071e3d; scrollbar-width: none; }
.suite-sidebar::-webkit-scrollbar { width: 0; height: 0; }
.suite-main { transition: margin-left .18s ease; }
.nav-button.active { background: rgba(37,99,235,.24); box-shadow: inset 3px 0 0 #e31e24; }
.suite-shell.sidebar-expanded .suite-sidebar { width: 272px; padding: 14px 12px; }
.suite-shell.sidebar-expanded .suite-main { margin-left: 272px; }
.suite-shell.sidebar-expanded .nav-button {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 44px;
  padding: 5px 8px;
  gap: 10px;
}
.suite-shell.sidebar-expanded .nav-label {
  display: block;
  color: #eff6ff;
  font-size: 13px;
}
.suite-shell.sidebar-expanded .sidebar-brand {
  justify-content: flex-start;
  padding-right: 36px;
  gap: 10px;
}
.suite-shell.sidebar-expanded .sidebar-brand span:last-child {
  display: block;
  color: #fff;
  font-size: 20px;
}
.suite-shell.sidebar-expanded .sidebar-toggle {
  right: 0;
}
.nav-icon svg,
.nav-icon path,
.quick-access-card svg,
.quick-access-card path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-icon svg { width: 19px; height: 19px; }
.nav-icon {
  background: rgba(255,255,255,.08);
}
.nav-button:hover .nav-icon,
.nav-button.active .nav-icon {
  background: rgba(255,255,255,.14);
}
.nav-group:nth-child(1) .nav-icon { color: #bfdbfe; }
.nav-group:nth-child(2) .nav-icon { color: #60a5fa; }
.nav-group:nth-child(3) .nav-icon { color: #2dd4bf; }
.nav-group:nth-child(4) .nav-icon { color: #86efac; }
.nav-group:nth-child(5) .nav-icon { color: #fbbf24; }
.nav-group:nth-child(6) .nav-icon { color: #c4b5fd; }
.nav-group:nth-child(7) .nav-icon { color: #a5b4fc; }
.nav-group:nth-child(8) .nav-icon { color: #67e8f9; }
.home-welcome {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(15,23,42,.045);
}
.home-welcome h2 { margin-bottom: 4px; }
.home-welcome p { margin-bottom: 0; color: var(--muted); }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.quick-access-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.quick-access-card {
  min-height: 118px; padding: 14px; text-align: left; display: grid; gap: 8px; align-content: start;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  box-shadow: 0 4px 14px rgba(15,23,42,.045);
}
.quick-access-card:hover { border-color: #bfdbfe; background: #f8fbff; transform: translateY(-1px); }
.quick-access-card span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #eaf2ff; color: #0b2f63; }
.quick-access-card svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.quick-access-card strong { font-size: 14px; }
.quick-access-card small { color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) { .quick-access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .home-welcome { align-items: stretch; flex-direction: column; } .quick-access-grid { grid-template-columns: 1fr; } }

.account-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start; }
.account-main { display: grid; gap: 10px; }
.account-context { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.account-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.account-avatar { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: #e8f0ff; color: #073f8f; font-weight: 900; }
.account-name strong { display: block; font-size: 14px; }
.account-name small, .account-metric small { display: block; color: var(--muted); font-size: 10px; }
.account-metric strong { display: block; font-size: 13px; }
.workspace-tabs { display: flex; gap: 4px; padding: 0 2px; overflow-x: auto; }
.workspace-tabs button { min-height: 28px; padding: 5px 9px; border-radius: 6px; background: transparent; color: #475569; font-size: 12px; font-weight: 800; }
.workspace-tabs button.active { background: #eaf2ff; color: #073f8f; }
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.score-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.score-panel h3 { font-size: 13px; margin-bottom: 10px; }
.score-circles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.score-circle { display: grid; justify-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.ring { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #0f172a; background: conic-gradient(#2f80ed var(--score), #e8edf5 0); }
.ring span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.recommendation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.recommendation-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 7px; }
.recommendation-card strong { font-size: 12px; }
.recommendation-card small { color: var(--muted); }
.highlight-panel { background: #fff; border-left: 1px solid var(--line); min-height: calc(100vh - 92px); padding: 10px; display: grid; align-content: start; gap: 8px; }
.highlight-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.highlight-tabs button { min-height: 28px; border-radius: 6px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 850; }
.highlight-tabs button.active { background: #073f8f; color: #fff; }
.highlight-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: grid; gap: 4px; }
.highlight-item strong { font-size: 12px; }
.highlight-item small { color: var(--muted); font-size: 10px; }
@media (max-width: 1180px) { .account-shell { grid-template-columns: 1fr; } .highlight-panel { min-height: auto; border-left: 0; } }
@media (max-width: 780px) {
  .suite-sidebar { position: sticky; width: auto; height: auto; }
  .suite-main, .sidebar-expanded .suite-main { margin-left: 0; }
  .score-grid, .score-circles, .recommendation-grid, .account-context { grid-template-columns: 1fr; }
}

/* Wired dashboard polish: static section labels should look intentional, not like dead buttons. */
.bi-section-tabs span {
  min-height: 30px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  color: var(--ink);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}
.bi-section-tabs span.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(15,118,110,.25);
}
.highlight-tabs span {
  min-height: 28px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.highlight-tabs span.active { background: #073f8f; color: #fff; }

/* Professional BI dashboard shell refresh. */
body { background: #f5f7fb; }
.suite-shell, .suite-shell.sidebar-expanded { display: block; background: #f5f7fb; }
.suite-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 72px;
  height: 100vh;
  padding: 10px 8px;
  background: #0f4b93;
  overflow-x: visible;
  overflow-y: auto;
  scrollbar-width: thin;
  box-shadow: 6px 0 18px rgba(15, 23, 42, .08);
}
.sidebar-expanded .suite-sidebar { width: 260px; }
.suite-main { margin-left: 72px; min-height: 100vh; padding: 0; }
.sidebar-expanded .suite-main { margin-left: 260px; }
.sidebar-brand {
  min-height: 48px;
  margin: 0 0 8px;
  justify-content: center;
  gap: 0;
  overflow: visible;
}
.sidebar-brand .logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  color: #0f4b93;
  box-shadow: none;
}
.sidebar-collapsed .sidebar-brand span:last-of-type { display: none !important; }
.sidebar-expanded .sidebar-brand { justify-content: flex-start; gap: 10px; padding: 0 40px 0 6px; }
.sidebar-expanded .sidebar-brand span:last-of-type { display: inline !important; color: #fff; font-size: 20px; }
.sidebar-toggle {
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
}
.sidebar-collapsed .sidebar-toggle { display: none; }
.sidebar-nav { gap: 5px; padding-top: 4px; }
.nav-group { display: grid; justify-items: center; }
.nav-button {
  width: 54px;
  height: 46px;
  min-height: 46px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0;
  border-radius: 13px;
  color: #eaf3ff;
  background: transparent;
  overflow: visible;
}
.sidebar-expanded .nav-group { justify-items: stretch; }
.sidebar-expanded .nav-button {
  width: 100%;
  grid-template-columns: 42px minmax(0, 1fr);
  justify-content: start;
  padding: 4px 8px;
  gap: 10px;
  text-align: left;
}
.nav-icon { width: 42px; height: 38px; border-radius: 11px; background: transparent; }
.nav-svg { width: 21px; height: 21px; stroke-width: 2.1; }
.nav-button:hover, .nav-button.active { background: rgba(255,255,255,.18); color: #fff; }
.nav-button.active { box-shadow: inset 3px 0 0 #fff; }
.sidebar-collapsed .nav-label { display: none !important; }
.sidebar-expanded .nav-label { display: block; color: #fff; font-size: 13px; font-weight: 850; }
.sidebar-collapsed .nav-group:hover .nav-button::after {
  left: 78px;
  background: #111827;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 14px 35px rgba(15,23,42,.18);
}
.nav-submenu { margin: 0 0 7px 52px; padding-left: 8px; }

.suite-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  margin: 0;
  padding: 10px 16px 14px;
  display: grid;
  gap: 14px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e6ebf2;
  backdrop-filter: blur(18px);
}
.topbar-primary { display: grid; grid-template-columns: auto minmax(220px, 1fr) minmax(520px, auto); gap: 12px; align-items: center; }
.menu-button { width: 28px; height: 28px; border-radius: 8px; background: transparent; color: #334155; font-size: 18px; font-weight: 900; }
.menu-button { width: 24px; height: 24px; min-width: 24px; min-height: 24px; border-radius: 7px; background: transparent; color: #334155; font-size: 15px; font-weight: 900; }
.topbar-title { display: grid; gap: 2px; }
.suite-topbar h1 { font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: 20px; line-height: 1.15; font-weight: 900; margin: 0; }
.topbar-title p { margin: 0; color: #64748b; font-size: 13px; font-weight: 700; }
.topbar-title strong { color: #059669; }
.topbar-utility { display: grid; grid-template-columns: minmax(230px, 1fr) 36px 36px auto auto; gap: 8px; align-items: center; }
.topbar-utility input { min-height: 38px; border-radius: 12px; padding-left: 36px; background: #fff; }
.topbar-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(132px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
}
.topbar-controls label:not(.compare-toggle) { gap: 4px; color: #475569; font-size: 11px; font-weight: 850; }
.topbar-controls select, .topbar-controls input { min-height: 38px; border-radius: 10px; padding: 7px 10px; font-size: 12px; }
.compare-toggle { min-height: 38px; border-radius: 10px; align-self: end; }
.export-button { min-height: 38px; border-radius: 10px; align-self: end; box-shadow: none; background: #0f9f76; }
.notification-button { position: relative; }
.notification-button span { position: absolute; top: -7px; right: -5px; min-width: 16px; height: 16px; border-radius: 999px; background: #ef4444; color: #fff; display: grid; place-items: center; font-size: 9px; }
.profile-button { min-width: 148px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-stack { padding: 16px; gap: 14px; }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.metric-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}
.metric-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #2563eb; background: #eaf2ff; }
.metric-icon.target, .metric-icon.collection { color: #16a34a; background: #eafbea; }
.metric-icon.gap { color: #f97316; background: #fff3e6; }
.metric-icon.incentive { color: #9333ea; background: #f5e8ff; }
.metric-card small { color: #475569; font-size: 11px; font-weight: 850; }
.metric-card strong { display: block; margin-top: 4px; font-size: 20px; font-weight: 950; color: #111827; }
.metric-card em { display: block; margin-top: 4px; font-style: normal; color: #64748b; font-size: 11px; }
.metric-card.up em::before { content: "↑ "; color: #16a34a; }
.metric-card.down em::before { content: "↓ "; color: #ef4444; }
.dashboard-grid { display: grid; gap: 12px; }
.dashboard-grid-main { grid-template-columns: 1.15fr .9fr .9fr; }
.dashboard-grid-lower { grid-template-columns: 1.1fr 1.1fr .75fr; }
.dashboard-grid-bottom { grid-template-columns: minmax(0, 1.7fr) minmax(320px, .85fr); }
.chart-card, .data-card, .score-panel, .empty-state { border-radius: 14px; border-color: #e6ebf2; box-shadow: 0 8px 24px rgba(15,23,42,.045); }
.chart-card { min-height: 224px; padding: 16px; }
.chart-card header h3 { font-size: 14px; }
.achievement-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 18px; min-height: 155px; }
.achievement-ring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#20b981 var(--score), #f87171 0); }
.achievement-ring span { width: 104px; height: 104px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #111827; font-size: 24px; font-weight: 950; }
.achievement-ring small { margin-top: -48px; font-size: 11px; color: #64748b; }
.achievement-legend { display: grid; gap: 14px; }
.achievement-legend div { display: grid; grid-template-columns: 10px 1fr; gap: 4px 8px; align-items: center; }
.achievement-legend small { grid-column: 2; color: #64748b; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.success { background: #20b981; }
.dot.danger { background: #fb7185; }
.approval-list { display: grid; gap: 10px; }
.approval-list button { min-height: 38px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: transparent; color: #0f172a; border-radius: 10px; text-align: left; }
.approval-list button:hover { background: #f8fafc; }
.approval-list svg { width: 18px; height: 18px; stroke: #2563eb; }
.approval-list em { min-width: 28px; border-radius: 999px; padding: 4px 8px; background: #eaf2ff; color: #2563eb; font-style: normal; font-size: 11px; font-weight: 900; text-align: center; }
.recommendation-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.recommendation-card { background: linear-gradient(135deg, #f8fbff, #fff); border-radius: 12px; min-height: 126px; }
.recommendation-card .secondary-button { justify-self: start; min-height: 30px; }
.collection-stack { display: flex; min-height: 44px; border-radius: 8px; overflow: hidden; margin-top: 36px; background: #eef2f7; }
.collection-stack span { flex: var(--w) 1 0; display: grid; place-items: center; min-width: 52px; color: #fff; background: var(--c); font-size: 11px; font-weight: 900; text-align: center; padding: 6px; }
.collection-tabs { align-items: start; }
.collection-tabs .left { min-width: 0; overflow: hidden; }
.collection-tabs .tabbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.collection-tabs .tabbar::-webkit-scrollbar { display: none; }
.collection-tabs .tabbar button {
  flex: 0 0 auto;
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid #dbe5f0;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}
.collection-tabs .tabbar button.active {
  color: #fff;
  background: #0a4d8f;
  border-color: #0a4d8f;
  box-shadow: 0 8px 18px rgba(10, 77, 143, .18);
}
.collection-tabs .right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.empty-inline { color: #64748b; font-weight: 800; padding: 12px; }
@media (max-width: 1440px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-grid-main, .dashboard-grid-lower, .dashboard-grid-bottom { grid-template-columns: 1fr; }
  .topbar-primary { grid-template-columns: auto minmax(180px, 1fr); }
  .topbar-utility { grid-column: 1 / -1; grid-template-columns: minmax(220px, 1fr) 36px 36px auto auto; }
  .topbar-controls { grid-template-columns: repeat(3, minmax(132px, 1fr)) auto auto; }
}
@media (max-width: 780px) {
  .suite-sidebar { position: fixed; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar-expanded .suite-sidebar { transform: translateX(0); width: 260px; }
  .suite-main, .sidebar-expanded .suite-main { margin-left: 0; }
  .metric-grid, .recommendation-strip, .topbar-controls, .topbar-utility { grid-template-columns: 1fr; }
  .topbar-primary { grid-template-columns: auto 1fr; }
  .content-stack { padding: 12px; }
}

/* Final SaaS sidebar navigation: fixed rail, hidden internal scroll, bottom actions. */
.suite-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 74px;
  height: 100vh;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 9px;
  overflow: hidden;
  background: linear-gradient(180deg, #0a3f7a 0%, #073467 58%, #062b55 100%);
  box-shadow: 8px 0 24px rgba(15, 23, 42, .10);
}
.sidebar-expanded .suite-sidebar { width: 262px; }
.suite-main { margin-left: 74px; }
.sidebar-expanded .suite-main { margin-left: 262px; }
.sidebar-brand {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.sidebar-expanded .sidebar-brand { justify-content: flex-start; padding: 0 42px 0 5px; gap: 10px; }
.sidebar-brand .logo-mark { width: 38px; height: 38px; border-radius: 12px; background: #ffffff; color: #0a3f7a; }
.sidebar-collapsed .sidebar-brand span:last-of-type { display: none !important; }
.sidebar-expanded .sidebar-brand span:last-of-type { display: inline !important; color: #fff; font-size: 20px; }
.sidebar-toggle { top: 14px; right: 10px; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.10); }
.sidebar-collapsed .sidebar-toggle { display: none; }
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 2px 0;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.sidebar-nav::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar-button,
.suite-sidebar::-webkit-scrollbar,
.suite-sidebar::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.sidebar-bottom {
  flex: 0 0 auto;
  display: grid;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.nav-group { width: 100%; position: relative; display: grid; justify-items: center; }
.nav-button {
  width: 52px;
  height: 44px;
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(235,245,255,.88);
  box-shadow: none;
}
.sidebar-expanded .nav-button {
  width: 100%;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  justify-content: start;
  padding: 3px 10px;
}
.nav-icon { width: 42px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: transparent; color: currentColor; }
.nav-svg { width: 21px; height: 21px; stroke-width: 2.05; }
.nav-button:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-button.active {
  background: rgba(255,255,255,.20);
  color: #fff;
  box-shadow: inset 3px 0 0 #ffffff;
}
.sidebar-collapsed .nav-label { display: none !important; }
.sidebar-expanded .nav-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 13px; font-weight: 850; }
.sidebar-collapsed .nav-group:hover .nav-button::after {
  content: attr(aria-label);
  position: fixed;
  left: 84px;
  z-index: 100;
  min-width: max-content;
  padding: 8px 10px;
  border-radius: 9px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 16px 38px rgba(15,23,42,.22);
  pointer-events: none;
}
.nav-submenu { margin: 2px 0 8px 52px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.nav-submenu button { color: rgba(235,245,255,.72); background: transparent; border-radius: 8px; }
.nav-submenu button:hover, .nav-submenu button.active { color: #fff; background: rgba(255,255,255,.10); }
@media (max-width: 960px) {
  .suite-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar-expanded .suite-sidebar { transform: translateX(0); width: 262px; }
  .suite-main, .sidebar-expanded .suite-main { margin-left: 0; }
  .sidebar-expanded .sidebar-toggle { display: block; }
}

/* Tenant dashboard audit fixes: fixed icon-only rail and clean responsive cards. */
.suite-shell.sidebar-expanded .suite-sidebar,
.suite-sidebar {
  width: 76px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.suite-shell.sidebar-expanded .suite-main,
.suite-main { margin-left: 76px !important; }
.sidebar-brand { justify-content: center !important; padding: 0 !important; }
.sidebar-brand span:last-of-type,
.sidebar-expanded .sidebar-brand span:last-of-type,
.nav-label,
.sidebar-expanded .nav-label,
.nav-submenu { display: none !important; }
.sidebar-toggle { display: none !important; }
.sidebar-nav {
  gap: 5px !important;
  padding: 4px 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sidebar-nav::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar-button,
.suite-sidebar::-webkit-scrollbar,
.suite-sidebar::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
.nav-group { justify-items: center !important; }
.nav-button,
.sidebar-expanded .nav-button {
  width: 54px !important;
  height: 43px !important;
  min-height: 43px !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 13px !important;
  overflow: visible !important;
}
.nav-icon { width: 42px !important; height: 38px !important; display: grid !important; place-items: center !important; }
.nav-svg { width: 20px !important; height: 20px !important; }
.nav-button.active {
  background: rgba(255,255,255,.18) !important;
  box-shadow: none !important;
}
.nav-button:hover { background: rgba(255,255,255,.12) !important; }
.sidebar-collapsed .nav-group:hover .nav-button::after,
.nav-group:hover .nav-button::after {
  content: attr(aria-label);
  position: fixed;
  left: 86px;
  z-index: 120;
  max-width: 220px;
  white-space: nowrap;
  padding: 7px 9px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(15,23,42,.22);
  pointer-events: none;
}
.sidebar-bottom { gap: 6px !important; padding-top: 9px !important; }

.suite-topbar { padding: 14px 18px !important; gap: 12px !important; }
.suite-topbar h1 { font-size: 24px !important; font-weight: 950 !important; letter-spacing: 0 !important; }
.topbar-primary { grid-template-columns: auto minmax(230px, 1fr) minmax(420px, .9fr) !important; }
.topbar-controls {
  grid-template-columns: repeat(6, minmax(126px, 1fr)) auto auto !important;
  gap: 10px !important;
  align-items: end !important;
}
.topbar-controls label:not(.compare-toggle) { min-width: 0 !important; }
.topbar-controls select,
.topbar-controls input { width: 100% !important; min-width: 0 !important; }
.content-stack { padding: 16px 18px 24px !important; gap: 14px !important; }
.metric-grid { gap: 12px !important; }
.metric-card,
.chart-card,
.data-card,
.empty-state,
.score-panel {
  border-radius: 14px !important;
  padding: 16px !important;
  overflow: hidden !important;
}
.metric-card { padding: 14px !important; }
.chart-card header h3,
.data-card h3 { font-size: 15px !important; font-weight: 900 !important; }
.metric-card strong { font-size: 21px !important; }
.metric-card small,
.metric-card em,
.muted { color: #64748b !important; }
.dashboard-grid { align-items: stretch !important; }
.dashboard-grid-lower > .data-card,
.dashboard-grid-lower > .chart-card { min-height: 100% !important; }
.data-card { overflow-x: hidden !important; }
table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-spacing: 0 !important;
}
th, td {
  padding: 11px 12px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
th { top: 0; }
.cell-title strong,
td strong { overflow-wrap: anywhere !important; }
.badge { white-space: nowrap !important; }
.approvals-card { align-self: stretch !important; }
.approval-list { gap: 8px !important; }
.approval-list button { min-width: 0 !important; }
.recommendation-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.recommendation-card { min-width: 0 !important; overflow: hidden !important; }
@media (max-width: 1440px) {
  .topbar-primary { grid-template-columns: auto minmax(220px, 1fr) !important; }
  .topbar-utility { grid-column: 1 / -1 !important; }
  .topbar-controls { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto !important; }
  .recommendation-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 960px) {
  .suite-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .suite-shell.sidebar-expanded .suite-sidebar { transform: translateX(0); width: 76px !important; }
  .suite-shell.sidebar-expanded .suite-main,
  .suite-main { margin-left: 0 !important; }
  .topbar-controls,
  .topbar-utility { grid-template-columns: 1fr !important; }
  .metric-grid,
  .recommendation-strip { grid-template-columns: 1fr !important; }
}
.quick-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.quick-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
  cursor: pointer;
}
.quick-card:hover { border-color: rgba(37, 99, 235, .35); box-shadow: 0 16px 32px rgba(15, 23, 42, .08); }
.quick-card span { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eff6ff; color: #2563eb; }
.quick-card svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.quick-card small { color: var(--muted); font-weight: 700; }
.quick-card strong { font-size: 1.35rem; }
.hierarchy-list { display: grid; gap: 10px; }
.hierarchy-list div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.hierarchy-list div:last-child { border-bottom: 0; }
.hierarchy-list span, .hierarchy-list em { color: var(--muted); font-style: normal; font-size: .88rem; }
.permission-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.permission-groups article { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #f8fafc; }
.permission-groups strong { display: block; margin-bottom: 6px; }
.permission-groups small { color: var(--muted); line-height: 1.5; }
.permission-drawer-grid { display: grid; gap: 12px; margin: 14px 0; }
.permission-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.permission-fieldset legend { padding: 0 6px; font-weight: 800; color: var(--ink); }
.permission-fieldset label { display: block; margin: 8px 0; color: var(--muted); }
@media (max-width: 1100px) {
  .quick-card-grid, .permission-groups, .app-access-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-layout aside { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 12px; }
}
@media (max-width: 720px) {
  .quick-card-grid, .permission-groups, .app-access-list, .app-role-row { grid-template-columns: 1fr; }
  .hierarchy-list div { grid-template-columns: 1fr; }
}
.sidebar-nav {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}
/* Phase 1 shell: keep full navigation reachable with an invisible internal scroller. */
.sidebar-nav {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sidebar-nav::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.drawer-overlay {
  z-index: 300 !important;
}

/* Platform home */
.platform-page {
  display: grid;
  gap: 22px;
  position: relative;
}
.platform-page::before {
  content: "";
  position: fixed;
  inset: 70px 0 auto 76px;
  height: 260px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 28%, rgba(37, 99, 235, .12), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(227, 30, 36, .10), transparent 24%),
    repeating-radial-gradient(circle at 80% 70%, rgba(11,47,99,.12) 0 1px, transparent 1px 14px);
  opacity: .72;
}
.platform-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid #e6ebf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}
.platform-header img {
  width: 186px;
  max-width: 54vw;
  height: auto;
  display: block;
}
.platform-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-header-actions .icon-button svg {
  width: 19px;
  height: 19px;
}
.platform-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: stretch;
  padding: 30px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 12%, rgba(227, 30, 36, .32), transparent 26%),
    linear-gradient(135deg, #071e3d 0%, #0b2f63 58%, #071e3d 100%);
  box-shadow: 0 18px 46px rgba(7, 30, 61, .16);
}
.platform-hero .eyebrow {
  color: rgba(255,255,255,.7);
}
.platform-hero h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 950;
}
.platform-hero h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}
.platform-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.7;
}
.platform-hero aside {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 170px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
}
.platform-hero aside span,
.platform-card span,
.platform-action span {
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #e31e24;
  color: #fff;
  box-shadow: 0 14px 26px rgba(227, 30, 36, .22);
}
.platform-hero aside span {
  width: 50px;
  height: 50px;
}
.platform-hero aside svg,
.platform-card svg,
.platform-action svg {
  width: 22px;
  height: 22px;
}
.platform-hero aside strong {
  color: #fff;
  font-size: 22px;
  font-weight: 950;
}
.platform-hero aside small {
  color: rgba(255,255,255,.72);
  font-weight: 750;
}
.platform-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.platform-card {
  min-height: 188px;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 18px;
  border: 1px solid #e6ebf2;
  border-radius: 18px;
  background: #fff;
  color: #0f172a;
  text-align: left;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}
.platform-card:hover {
  border-color: rgba(227, 30, 36, .28);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .09);
  transform: translateY(-2px);
}
.platform-card span {
  width: 46px;
  height: 46px;
}
.platform-card strong {
  font-size: 17px;
  font-weight: 950;
}
.platform-card small {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 650;
}
.platform-card em {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e31e24;
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
}
.platform-card em svg {
  width: 16px;
  height: 16px;
}
.platform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.platform-actions.compact {
  display: grid;
}
.platform-action {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 900;
}
.platform-action:hover {
  border-color: rgba(227, 30, 36, .28);
  background: #fff7f7;
}
.platform-action span {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.platform-action svg {
  width: 17px;
  height: 17px;
}
.platform-footer {
  display: grid;
  grid-template-columns: minmax(250px, 1.3fr) repeat(4, minmax(120px, .65fr)) minmax(230px, .9fr);
  gap: 22px;
  padding: 26px;
  border-radius: 22px;
  background: #071e3d;
  color: #dbeafe;
}
.platform-footer img {
  width: 166px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
}
.platform-footer p {
  margin: 14px 0 0;
  color: #b6c5dc;
  line-height: 1.7;
}
.platform-footer nav,
.newsletter-form {
  display: grid;
  align-content: start;
  gap: 9px;
}
.platform-footer strong {
  color: #fff;
  font-weight: 950;
}
.platform-footer nav button {
  width: max-content;
  padding: 0;
  background: transparent;
  color: #b6c5dc;
  text-align: left;
  font-weight: 750;
}
.platform-footer nav button:hover {
  color: #fff;
}
.platform-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.platform-social span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e31e24;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.newsletter-form input {
  min-height: 42px;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.newsletter-form input::placeholder {
  color: #b6c5dc;
}
.platform-footer small {
  grid-column: 1 / -1;
  color: #92a4bf;
}
@media (max-width: 1320px) {
  .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .platform-hero { grid-template-columns: 1fr; padding: 24px; }
  .platform-grid, .platform-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-header { align-items: flex-start; flex-direction: column; }
  .platform-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .platform-grid, .platform-metrics, .platform-footer { grid-template-columns: 1fr; }
  .platform-header-actions, .platform-actions { width: 100%; }
  .platform-header-actions .secondary-button, .platform-action { flex: 1; justify-content: center; }
}

/* Public Salestos homepage */
.public-home-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 7% 18%, rgba(37,99,235,.10) 0 1.5px, transparent 1.7px 13px),
    radial-gradient(circle at 96% 63%, rgba(37,99,235,.12) 0 1.5px, transparent 1.7px 13px),
    linear-gradient(180deg, #ffffff 0%, #f5f8fc 62%, #ffffff 100%);
}
.public-home {
  position: relative;
  overflow: hidden;
}
.public-home::before,
.public-home::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.public-home::before {
  top: 76px;
  right: -120px;
  width: 520px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, .12);
  box-shadow: 0 16px 0 rgba(37,99,235,.04), 0 32px 0 rgba(37,99,235,.035), 0 48px 0 rgba(37,99,235,.03), 0 64px 0 rgba(37,99,235,.025);
  transform: rotate(-12deg);
}
.public-home::after {
  left: -100px;
  top: 470px;
  width: 360px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(37,99,235,.08);
  box-shadow: 0 18px 0 rgba(37,99,235,.035), 0 36px 0 rgba(37,99,235,.03);
  transform: rotate(-18deg);
}
.public-home-header,
.public-hero,
.public-app-section,
.public-quick-section,
.public-footer {
  position: relative;
  z-index: 1;
  width: min(100% - 64px, 1680px);
  margin-inline: auto;
}
.public-home-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0 10px;
}
.public-logo img {
  width: 260px;
  max-width: 55vw;
  display: block;
}
.public-home-actions,
.public-hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.public-icon-link,
.public-outline-link,
.public-primary-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 900;
}
.public-icon-link {
  width: 46px;
  color: #0b2f63;
  background: transparent;
}
.public-icon-link svg,
.public-outline-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.public-outline-link {
  padding: 0 18px;
  border: 1px solid #2563eb;
  color: #0b4eea;
  background: rgba(255,255,255,.72);
}
.public-primary-link {
  padding: 0 20px;
  color: #fff;
  background: #0b2f63;
  box-shadow: 0 14px 28px rgba(11,47,99,.16);
}
.public-primary-link.large,
.public-outline-link.large {
  min-height: 50px;
  padding-inline: 24px;
}
.public-primary-link:hover,
.public-outline-link:hover {
  transform: translateY(-1px);
}
.public-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 14px 0 32px;
}
.public-hero h1 {
  color: #071e3d;
  font-size: clamp(42px, 5.6vw, 62px);
  line-height: 1.08;
  font-weight: 950;
}
.public-hero h1 span {
  color: #135bf2;
}
.public-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0 12px;
  color: #071e3d;
  font-size: 22px;
  font-weight: 800;
}
.public-subtitle span,
.public-app-section h2 span,
.public-quick-section h2 span {
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: #135bf2;
}
.public-subtitle span:last-child,
.public-app-section h2 span:last-child,
.public-quick-section h2 span:last-child {
  background: #e31e24;
}
.public-description {
  margin: 0 0 24px;
  color: #24406f;
  font-size: 16px;
}
.public-app-section,
.public-quick-section {
  display: grid;
  gap: 18px;
}
.public-app-section h2,
.public-quick-section h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  color: #071e3d;
  font-size: 19px;
  font-weight: 950;
}
.public-app-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.public-app-card,
.public-quick-grid a {
  min-height: 194px;
  position: relative;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 20px 22px;
  border: 1px solid #dde6f2;
  border-radius: 12px;
  color: #071e3d;
  background: rgba(255,255,255,.9);
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(15,23,42,.065);
}
.public-app-card:hover,
.public-quick-grid a:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, .26);
  box-shadow: 0 24px 52px rgba(15,23,42,.10);
}
.public-app-card span,
.public-quick-grid span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}
.public-app-card svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.public-app-card strong {
  min-height: 22px;
  font-size: 16px;
  font-weight: 950;
}
.public-app-card p,
.public-quick-grid p {
  margin: 0;
  color: #071e3d;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 600;
}
.public-app-card em,
.public-quick-grid em {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: #071e3d;
  font-size: 24px;
  font-style: normal;
}
.public-app-card.blue { color: #2563eb; }
.public-app-card.teal { color: #0d9488; }
.public-app-card.green { color: #16a34a; }
.public-app-card.orange { color: #f97316; }
.public-app-card.purple { color: #9333ea; }
.public-app-card.indigo { color: #4f46e5; }
.public-app-card.cyan { color: #0891b2; }
.public-app-card.navy { color: #0b2f63; }
.public-app-card.amber { color: #f59e0b; }
.public-app-card.red { color: #e31e24; }
.public-app-card.blue span { background: #eaf2ff; }
.public-app-card.teal span { background: #dcf7ef; }
.public-app-card.green span { background: #dcfce7; }
.public-app-card.orange span { background: #ffeddc; }
.public-app-card.purple span { background: #f1e8ff; }
.public-app-card.indigo span { background: #eceafe; }
.public-app-card.cyan span { background: #dff8fb; }
.public-app-card.navy span { background: #e6ebf2; }
.public-app-card.amber span { background: #fff3d8; }
.public-app-card.red span { background: #ffe4e8; }
.public-quick-section {
  padding: 16px 0 22px;
}
.public-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.public-quick-grid a {
  min-height: 104px;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  padding: 16px 20px;
}
.public-quick-grid span {
  grid-row: span 2;
  width: 50px;
  height: 50px;
  color: #135bf2;
  background: #eef4ff;
  font-size: 28px;
  font-weight: 900;
}
.public-quick-grid strong {
  color: #071e3d;
  font-size: 15px;
  font-weight: 950;
}
.public-quick-grid p {
  font-size: 13px;
}
.public-footer {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) repeat(4, minmax(130px, .75fr)) minmax(270px, .95fr);
  gap: 34px;
  margin-top: 0;
  padding: 30px max(42px, calc((100vw - 1680px) / 2 + 42px));
  color: #dbeafe;
  background:
    radial-gradient(circle at 7% 20%, rgba(37,99,235,.32), transparent 34%),
    linear-gradient(135deg, #071e3d 0%, #0b2f63 52%, #071e3d 100%);
}
.footer-brand img {
  width: 230px;
  display: block;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
}
.footer-brand p {
  max-width: 330px;
  margin: 16px 0;
  color: #dbeafe;
  line-height: 1.65;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}
.public-footer nav,
.footer-newsletter {
  display: grid;
  align-content: start;
  gap: 9px;
}
.public-footer strong {
  color: #fff;
  font-weight: 950;
}
.public-footer a {
  color: #dbeafe;
  text-decoration: none;
  font-weight: 650;
}
.public-footer a:hover {
  color: #fff;
}
.footer-newsletter label {
  color: #dbeafe;
  font-weight: 650;
}
.footer-newsletter {
  position: relative;
}
.footer-newsletter input {
  margin-top: 10px;
  min-height: 48px;
  padding-right: 58px;
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.footer-newsletter input::placeholder {
  color: #b7c8e8;
}
.footer-newsletter button {
  position: absolute;
  right: 0;
  top: 66px;
  width: 52px;
  height: 48px;
  border-radius: 0 10px 10px 0;
  color: #fff;
  background: #135bf2;
  font-size: 22px;
  font-weight: 900;
}
.public-footer > small {
  grid-column: 1 / -1;
  text-align: center;
  color: #c9d8ee;
}
@media (max-width: 1320px) {
  .public-app-grid,
  .public-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .public-home-header { align-items: flex-start; flex-direction: column; }
  .public-app-grid,
  .public-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .public-home-header,
  .public-hero,
  .public-app-section,
  .public-quick-section { width: min(100% - 28px, 1680px); }
  .public-home-actions,
  .public-hero-ctas { width: 100%; }
  .public-outline-link,
  .public-primary-link { flex: 1; }
  .public-hero h1 { font-size: 34px; }
  .public-subtitle { font-size: 16px; gap: 10px; }
  .public-app-grid,
  .public-quick-grid,
  .public-footer { grid-template-columns: 1fr; }
}

/* Windows 11-style Salestos application hub */
.hub-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 16%, rgba(37,99,235,.18), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(227,30,36,.10), transparent 24%),
    linear-gradient(135deg, #f5f8fc 0%, #eef6ff 46%, #ffffff 100%);
}
.hub-shell {
  width: min(100% - 56px, 1540px);
  margin: 0 auto;
  padding: 22px 0 28px;
}
.hub-header {
  display: grid;
  grid-template-columns: 260px minmax(260px, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 72px;
}
.hub-logo img {
  width: 238px;
  display: block;
}
.hub-search {
  position: relative;
  display: block;
}
.hub-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: #64748b;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hub-search input {
  min-height: 48px;
  padding-left: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 18px 55px rgba(15,23,42,.06);
  backdrop-filter: blur(18px);
}
.hub-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hub-icon-button,
.hub-soft-button,
.hub-profile,
.hub-primary,
.hub-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
}
.hub-icon-button {
  position: relative;
  width: 44px;
  color: #0b2f63;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(221,230,242,.9);
}
.hub-icon-button i {
  position: absolute;
  right: 9px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e31e24;
}
.hub-soft-button,
.hub-profile,
.hub-secondary {
  padding: 0 15px;
  color: #0b2f63;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(221,230,242,.9);
}
.hub-primary {
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #0b2f63, #135bf2);
  box-shadow: 0 18px 42px rgba(11,47,99,.18);
}
.hub-profile span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #e31e24;
}
.hub-actions svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hub-hero {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: end;
  padding: 46px 0 28px;
}
.hub-hero p {
  margin: 0 0 8px;
  color: #64748b;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hub-hero h1 {
  color: #071e3d;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 950;
}
.hub-hero span {
  display: block;
  margin-top: 8px;
  color: #24406f;
  font-size: 19px;
  font-weight: 650;
}
.hub-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}
.hub-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.hub-section-title.quick {
  margin-top: 22px;
}
.hub-section-title h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
}
.hub-section-title a {
  color: #135bf2;
  text-decoration: none;
  font-weight: 900;
}
.hub-workspace-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 154px;
  gap: 16px;
}
.hub-tile,
.hub-quick-grid a,
.hub-recommended a {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(221,230,242,.86);
  border-radius: 22px;
  background: rgba(255,255,255,.68);
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 24px 70px rgba(15,23,42,.08);
  backdrop-filter: blur(18px);
}
.hub-tile {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
}
.hub-tile:hover,
.hub-quick-grid a:hover,
.hub-recommended a:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 90px rgba(15,23,42,.12);
}
.tile-large { grid-column: span 2; grid-row: span 2; }
.tile-medium { grid-column: span 2; }
.tile-small { grid-column: span 1; }
.hub-tile span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
}
.hub-tile svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hub-tile b {
  font-size: 18px;
  font-weight: 950;
}
.tile-large b {
  font-size: 26px;
}
.hub-tile p {
  max-width: 360px;
  margin: 0;
  color: #64748b;
  line-height: 1.55;
  font-weight: 650;
}
.hub-tile small {
  width: max-content;
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0b2f63;
  background: rgba(11,47,99,.08);
  font-weight: 900;
}
.hub-tile em {
  position: absolute;
  right: 18px;
  bottom: 16px;
  color: currentColor;
  font-style: normal;
  font-weight: 950;
}
.tile-blue { color: #2563eb; }
.tile-teal { color: #0d9488; }
.tile-green { color: #16a34a; }
.tile-orange { color: #f97316; }
.tile-purple { color: #9333ea; }
.tile-indigo { color: #4f46e5; }
.tile-cyan { color: #0891b2; }
.tile-navy { color: #0b2f63; }
.tile-amber { color: #f59e0b; }
.tile-red { color: #e31e24; }
.tile-blue span { background: #dbeafe; }
.tile-teal span { background: #ccfbf1; }
.tile-green span { background: #dcfce7; }
.tile-orange span { background: #ffedd5; }
.tile-purple span { background: #f3e8ff; }
.tile-indigo span { background: #e0e7ff; }
.tile-cyan span { background: #cffafe; }
.tile-navy span { background: #dbeafe; }
.tile-amber span { background: #fef3c7; }
.tile-red span { background: #ffe4e6; }
.hub-quick-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.hub-quick-grid a {
  min-height: 126px;
  display: grid;
  gap: 6px;
  padding: 14px;
}
.hub-quick-grid span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: #e31e24;
  font-weight: 950;
}
.hub-quick-grid b {
  font-size: 14px;
}
.hub-quick-grid p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}
.hub-recommended {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(221,230,242,.86);
  border-radius: 26px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 24px 70px rgba(15,23,42,.08);
  backdrop-filter: blur(18px);
}
.hub-recommended a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  padding: 12px;
  box-shadow: none;
}
.hub-recommended span {
  grid-row: span 3;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0b2f63, #e31e24);
}
.hub-recommended b {
  font-size: 13px;
}
.hub-recommended p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}
.hub-recommended small {
  color: #64748b;
  font-size: 11px;
}
.hub-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 30px 0 4px;
  color: #64748b;
  font-weight: 750;
}
.hub-footer nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hub-footer a {
  color: #0b2f63;
  text-decoration: none;
  font-weight: 900;
}
@media (max-width: 1320px) {
  .hub-layout { grid-template-columns: 1fr; }
  .hub-recommended { position: static; }
  .hub-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .hub-header { grid-template-columns: 1fr; }
  .hub-actions { justify-content: space-between; }
  .hub-hero { align-items: start; flex-direction: column; }
  .hub-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .tile-large, .tile-medium, .tile-small { grid-column: span 1; grid-row: span 1; }
  .tile-large b { font-size: 18px; }
}
@media (max-width: 620px) {
  .hub-shell { width: min(100% - 28px, 1540px); }
  .hub-logo img { width: 210px; }
  .hub-workspace-grid,
  .hub-quick-grid { grid-template-columns: 1fr; }
  .hub-tile { min-height: 168px; }
  .hub-footer { align-items: flex-start; flex-direction: column; }
}

/* Final app-launcher icon treatment */
.hub-body {
  background:
    radial-gradient(circle at 50% 0%, rgba(11, 47, 99, .06), transparent 34%),
    #f8fafc !important;
}
.hub-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 72px !important;
  background: rgba(248,250,252,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #e2e8f0;
}
.hub-layout {
  display: block !important;
}
.hub-main {
  width: min(100%, 1260px);
  margin-inline: auto;
}
.hub-hero {
  justify-content: center !important;
  text-align: center;
  padding: 28px 0 26px !important;
}
.hub-hero h1 {
  font-size: clamp(34px, 4vw, 48px) !important;
  font-weight: 800 !important;
}
.hub-hero p {
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #0b2f63 !important;
  font-size: 18px;
}
.hub-hero-actions {
  display: none !important;
}
.hub-section-title {
  justify-content: center !important;
  margin: 4px 0 20px !important;
}
.hub-section-title h2 {
  font-size: 16px !important;
}
.hub-section-title a {
  display: none;
}
.hub-workspace-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 42px 54px !important;
  align-items: start;
}
.hub-tile,
.hub-tile.tile-large,
.hub-tile.tile-medium,
.hub-tile.tile-small {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  display: grid !important;
  justify-items: center;
  align-content: start;
  gap: 12px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  backdrop-filter: none !important;
}
.hub-tile:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: none !important;
}
.hub-tile span {
  width: 118px !important;
  height: 118px !important;
  border-radius: 26px !important;
  color: #fff !important;
  box-shadow: 0 20px 42px rgba(15,23,42,.18), inset 0 1px 1px rgba(255,255,255,.32);
}
.hub-tile svg {
  width: 54px !important;
  height: 54px !important;
  stroke: currentColor;
  stroke-width: 2.2 !important;
}
.hub-tile b,
.tile-large b {
  margin-top: 4px;
  color: #0f172a;
  font-size: 17px !important;
  font-weight: 800 !important;
}
.hub-tile p {
  max-width: 190px;
  color: #334155 !important;
  font-size: 14px;
  line-height: 1.55;
}
.hub-tile small,
.hub-tile em {
  display: none !important;
}
.tile-blue span { background: linear-gradient(145deg, #60a5fa 0%, #135bf2 58%, #0b54d8 100%) !important; }
.tile-teal span { background: linear-gradient(145deg, #5eead4 0%, #10b981 56%, #059669 100%) !important; }
.tile-green span { background: linear-gradient(145deg, #86efac 0%, #4ade80 34%, #16a34a 100%) !important; }
.tile-orange span { background: linear-gradient(145deg, #fdba74 0%, #f97316 50%, #ea580c 100%) !important; }
.tile-purple span { background: linear-gradient(145deg, #d8b4fe 0%, #a855f7 48%, #7e22ce 100%) !important; }
.tile-indigo span { background: linear-gradient(145deg, #a5b4fc 0%, #6366f1 48%, #4338ca 100%) !important; }
.tile-cyan span { background: linear-gradient(145deg, #67e8f9 0%, #06b6d4 50%, #0891b2 100%) !important; }
.tile-navy span { background: linear-gradient(145deg, #2563eb 0%, #0b2f63 56%, #071e3d 100%) !important; }
.tile-amber span { background: linear-gradient(145deg, #fde68a 0%, #facc15 48%, #eab308 100%) !important; }
.tile-red span { background: linear-gradient(145deg, #fb7185 0%, #f43f5e 48%, #e31e24 100%) !important; }
.hub-recommended {
  position: static !important;
  width: min(100%, 1260px);
  margin: 34px auto 0;
  padding: 18px 24px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.055) !important;
}
.hub-recommended {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.hub-recommended .hub-section-title {
  grid-column: 1 / -1;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}
.hub-recommended a {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  border: 0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.hub-recommended a:last-child {
  border-right: 0 !important;
}
.hub-recommended span {
  border-radius: 12px !important;
}
.hub-quick-grid {
  width: min(100%, 1260px);
  margin-inline: auto;
}
.hub-quick-grid a {
  min-height: 52px !important;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.045) !important;
}
.hub-quick-grid p {
  display: none;
}
.hub-footer {
  width: min(100%, 1260px);
  margin-inline: auto;
  border-top: 1px solid #e2e8f0;
}
.launchpad-page {
  display: grid;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 0 28px;
}
.launch-welcome {
  text-align: center;
  padding: 18px 0 6px;
}
.launch-welcome h2 {
  color: #0f172a;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
}
.launch-welcome p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 17px;
}
.launch-section-title {
  text-align: center;
  margin-bottom: 18px;
}
.launch-section-title h3 {
  color: #0f172a;
  font-size: 16px;
}
.launch-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 42px 54px;
}
.launch-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 0;
  color: #0f172a;
  background: transparent;
  text-align: center;
}
.launch-card:hover {
  transform: translateY(-4px) scale(1.02);
}
.launch-card span {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  color: #fff;
  background: var(--tile-color);
  box-shadow: 0 20px 42px rgba(15,23,42,.18), inset 0 1px 1px rgba(255,255,255,.32);
}
.launch-card:nth-child(1) span { background: linear-gradient(145deg, #60a5fa, #135bf2 58%, #0b54d8); }
.launch-card:nth-child(2) span { background: linear-gradient(145deg, #5eead4, #10b981 56%, #059669); }
.launch-card:nth-child(3) span { background: linear-gradient(145deg, #86efac, #4ade80 34%, #16a34a); }
.launch-card:nth-child(4) span { background: linear-gradient(145deg, #fdba74, #f97316 50%, #ea580c); }
.launch-card:nth-child(5) span { background: linear-gradient(145deg, #d8b4fe, #a855f7 48%, #7e22ce); }
.launch-card:nth-child(6) span { background: linear-gradient(145deg, #a5b4fc, #6366f1 48%, #4338ca); }
.launch-card:nth-child(7) span { background: linear-gradient(145deg, #67e8f9, #06b6d4 50%, #0891b2); }
.launch-card:nth-child(8) span { background: linear-gradient(145deg, #2563eb, #0b2f63 56%, #071e3d); }
.launch-card:nth-child(9) span { background: linear-gradient(145deg, #fde68a, #facc15 48%, #eab308); }
.launch-card:nth-child(10) span { background: linear-gradient(145deg, #fb7185, #f43f5e 48%, #e31e24); }
.launch-card svg {
  width: 54px;
  height: 54px;
  stroke-width: 2.2;
}
.launch-card strong {
  font-size: 17px;
  font-weight: 800;
}
.launch-card small {
  max-width: 190px;
  color: #334155;
  font-size: 14px;
  line-height: 1.55;
}
.launch-card em {
  display: none;
}
.launch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.launch-action {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
}
.launch-action span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #2563eb;
}
.launch-action svg {
  width: 20px;
  height: 20px;
}
.launch-recent {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 18px 22px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
}
.launch-recent button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 8px 14px;
  border-right: 1px solid #e2e8f0;
  background: transparent;
  color: #0f172a;
  text-align: left;
}
.launch-recent button:last-child {
  border-right: 0;
}
.launch-recent span {
  grid-row: span 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #60a5fa, #135bf2);
}
.launch-recent svg {
  width: 19px;
  height: 19px;
}
.launch-recent strong {
  font-size: 13px;
}
.launch-recent small,
.launch-recent em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}
.launch-empty {
  grid-column: 1 / -1;
  color: #64748b;
  text-align: center;
}
@media (max-width: 1100px) {
  .hub-workspace-grid,
  .launch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hub-recommended,
  .launch-recent { grid-template-columns: 1fr; }
  .hub-recommended a,
  .launch-recent button { border-right: 0 !important; border-bottom: 1px solid #e2e8f0; }
}
@media (max-width: 640px) {
  .hub-workspace-grid,
  .launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 18px !important; }
  .hub-tile span,
  .launch-card span { width: 94px !important; height: 94px !important; border-radius: 22px !important; }
  .hub-tile svg,
  .launch-card svg { width: 42px !important; height: 42px !important; }
}

/* Clean macOS Launchpad-style home */
.launch-home-body {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, rgba(15,23,42,.055), transparent 34%), #f8fafc;
}
.launch-home {
  width: min(100% - 56px, 1480px);
  margin: 0 auto;
}
.launch-home-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  display: grid;
  grid-template-columns: 250px minmax(260px, 1fr) auto;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  background: rgba(248,250,252,.9);
  backdrop-filter: blur(16px);
}
.launch-home-logo img {
  width: 230px;
  display: block;
}
.launch-home-search {
  position: relative;
  display: block;
}
.launch-home-search svg {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: #0b2f63;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.launch-home-search input {
  min-height: 46px;
  padding-left: 46px;
  border-color: #e2e8f0;
  border-radius: 14px;
  background: #fff;
}
.launch-home-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.launch-home-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
}
.launch-home-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.launch-home-profile b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0b2f63;
}
.launch-home-title {
  padding: 28px 0 24px;
  text-align: center;
}
.launch-home-title h1 {
  color: #0f172a;
  font-size: 30px;
  font-weight: 700;
}
.launch-home-title p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 16px;
}
.launch-workspaces {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 42px 48px;
  justify-items: center;
  max-width: 1180px;
  margin: 0 auto 34px;
}
.launch-app {
  display: grid;
  justify-items: center;
  gap: 13px;
  color: #0f172a;
  text-align: center;
  text-decoration: none;
  transition: transform .16s ease;
}
.launch-app:hover {
  transform: translateY(-4px) scale(1.02);
}
.launch-app span,
.launch-activity span {
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 18px 38px rgba(15,23,42,.14), inset 0 1px 1px rgba(255,255,255,.35);
}
.launch-app span {
  width: 112px;
  height: 112px;
  border-radius: 26px;
}
.launch-app svg,
.launch-activity svg,
.launch-quick svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.launch-app svg {
  width: 52px;
  height: 52px;
  stroke-width: 2.2;
}
.launch-app strong {
  max-width: 180px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.28;
}
.launch-app.app-blue,
.launch-app.app-teal,
.launch-app.app-green,
.launch-app.app-orange,
.launch-app.app-purple,
.launch-app.app-indigo,
.launch-app.app-cyan,
.launch-app.app-navy,
.launch-app.app-amber,
.launch-app.app-rose {
  background: transparent !important;
}
.launch-app.app-blue span,
.launch-activity span.app-blue { background: linear-gradient(145deg, #60a5fa, #2563eb 58%, #1d4ed8); }
.launch-app.app-teal span,
.launch-activity span.app-teal { background: linear-gradient(145deg, #5eead4, #14b8a6 55%, #0d9488); }
.launch-app.app-green span,
.launch-activity span.app-green { background: linear-gradient(145deg, #86efac, #22c55e 48%, #16a34a); }
.launch-app.app-orange span,
.launch-activity span.app-orange { background: linear-gradient(145deg, #fdba74, #f97316 52%, #ea580c); }
.launch-app.app-purple span,
.launch-activity span.app-purple { background: linear-gradient(145deg, #d8b4fe, #a855f7 48%, #7e22ce); }
.launch-app.app-indigo span,
.launch-activity span.app-indigo { background: linear-gradient(145deg, #a5b4fc, #6366f1 48%, #4338ca); }
.launch-app.app-cyan span,
.launch-activity span.app-cyan { background: linear-gradient(145deg, #67e8f9, #06b6d4 50%, #0891b2); }
.launch-app.app-navy span,
.launch-activity span.app-navy { background: linear-gradient(145deg, #2563eb, #0b2f63 58%, #071e3d); }
.launch-app.app-amber span,
.launch-activity span.app-amber { background: linear-gradient(145deg, #fde68a, #facc15 48%, #eab308); }
.launch-app.app-rose span,
.launch-activity span.app-rose { background: linear-gradient(145deg, #fecdd3, #fb7185 48%, #e31e24); }
.launch-activity,
.launch-quick {
  max-width: 1260px;
  margin: 0 auto 16px;
  padding: 18px 22px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.045);
}
.launch-activity header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.launch-activity h2,
.launch-quick h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}
.launch-activity header a {
  color: #0b2f63;
  text-decoration: none;
  font-weight: 700;
}
.launch-activity > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.launch-activity a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 8px 14px;
  border-right: 1px solid #e2e8f0;
  color: #0f172a;
  text-decoration: none;
}
.launch-activity a:last-child {
  border-right: 0;
}
.launch-activity span {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.launch-activity svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
.launch-activity strong {
  font-size: 13px;
  font-weight: 700;
}
.launch-activity small {
  color: #64748b;
  font-size: 12px;
}
.launch-quick {
  margin-bottom: 22px;
}
.launch-quick h2 {
  margin-bottom: 12px;
}
.launch-quick > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.launch-quick a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #0f172a;
  background: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(15,23,42,.035);
}
.launch-quick svg {
  width: 20px;
  height: 20px;
  color: #2563eb;
  stroke-width: 2.1;
}
.launch-footer {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  max-width: 1260px;
  margin: 0 auto;
  padding: 18px 0;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-weight: 400;
}
.launch-footer div,
.launch-footer nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.launch-footer img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.launch-footer a {
  color: #64748b;
  text-decoration: none;
  font-weight: 400;
}
.launchpad-page .launch-card small,
.launchpad-page .launch-card em {
  display: none !important;
}
@media (max-width: 980px) {
  .launch-home-header { grid-template-columns: 1fr; padding-bottom: 14px; }
  .launch-workspaces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .launch-activity > div { grid-template-columns: 1fr; }
  .launch-activity a { border-right: 0; border-bottom: 1px solid #e2e8f0; }
}
@media (max-width: 640px) {
  .launch-home { width: min(100% - 28px, 1480px); }
  .launch-workspaces { grid-template-columns: 1fr; gap: 28px; }
  .launch-footer { align-items: flex-start; flex-direction: column; }
}

/* Local SalesTOS login and orbit home overrides */
.login-screen {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(37,99,235,.12), transparent 26%),
    radial-gradient(circle at 86% 84%, rgba(11,47,99,.10), transparent 28%),
    linear-gradient(145deg, #fff 0%, #f8fbff 48%, #edf6ff 100%);
}

/* Incentive slab engine */
.incentive-engine-page{display:grid;gap:22px;color:#172033}.incentive-page-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}.incentive-page-heading p{margin:0 0 8px;color:#7b8495;font-size:13px}.incentive-page-heading h1{margin:0;font-size:30px;letter-spacing:-.03em}.incentive-page-heading span{display:block;margin-top:7px;color:#737d8f}.incentive-module-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.incentive-module-nav button{display:grid;grid-template-columns:38px 1fr;text-align:left;gap:2px 10px;padding:15px;border:1px solid #e5e8ef;border-radius:12px;background:#fff;color:#1d2738;box-shadow:0 2px 8px #17203308}.incentive-module-nav button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#f1f3f8;color:#6d7585;font-size:12px}.incentive-module-nav strong{font-size:14px}.incentive-module-nav small{color:#828b9b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.incentive-module-nav button.active{border-color:#7656d8;background:#faf9ff}.incentive-module-nav button.active>span{background:#7656d8;color:#fff}.incentive-empty{min-height:320px;display:grid;place-items:center;align-content:center;text-align:center;padding:42px;border:1px solid #e4e7ed;border-radius:16px;background:#fff}.incentive-empty-art{font-size:64px;color:#8267dc;line-height:1}.incentive-empty h2{margin:12px 0 6px;font-size:20px}.incentive-empty p{max-width:590px;margin:0 0 20px;color:#778092;line-height:1.6}.incentive-empty small{margin-top:12px;color:#939baa}.incentive-empty.compact{min-height:240px}.incentive-empty.compact select{min-width:300px;margin:0 0 14px}.incentive-assistant{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid #e6e2f5;border-radius:14px;background:linear-gradient(100deg,#faf8ff,#fff)}.incentive-assistant>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#7554d5;color:#fff}.incentive-assistant div{display:grid;flex:1}.incentive-assistant small{color:#7d8493;margin-top:3px}.incentive-assistant button{border:0;background:transparent;color:#6746ca;font-weight:700}.incentive-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.incentive-summary article{padding:17px;border:1px solid #e6e9ef;border-radius:13px;background:#fff}.incentive-summary span{display:block;color:#7c8492;font-size:12px;margin-bottom:8px}.incentive-summary strong{font-size:22px}.incentive-list-card,.scheme-detail-card,.incentive-wizard{border:1px solid #e4e7ed;border-radius:16px;background:#fff;overflow:hidden}.incentive-list-head{display:flex;gap:12px;padding:15px;border-bottom:1px solid #eceef2}.incentive-list-head input{flex:1}.incentive-table{display:grid}.incentive-tr{display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr .5fr;align-items:center;gap:14px;width:100%;padding:15px 18px;border:0;border-bottom:1px solid #eceef2;background:#fff;text-align:left;color:#273146}.incentive-tr:not(.heading):hover{background:#faf9ff}.incentive-tr.heading{font-size:11px;text-transform:uppercase;color:#89909c;background:#fafbfc}.incentive-tr span{display:grid;gap:4px}.incentive-tr small{color:#8992a1}.incentive-status{display:inline-flex!important;width:max-content;padding:5px 9px;border-radius:20px;background:#eef0f4;color:#606979;font-size:11px}.status-active,.status-approved{background:#e6f7ef;color:#18734b}.status-pending-approval,.status-under-review{background:#fff3d9;color:#8b5c00}.status-rejected,.status-paused{background:#feeceb;color:#a2332d}.incentive-wizard{display:grid;grid-template-columns:230px 1fr}.incentive-wizard>ol{list-style:none;margin:0;padding:24px;background:#f8f8fb;border-right:1px solid #e7e8ed}.incentive-wizard>ol li{display:flex;align-items:center;gap:10px;padding:11px 5px;color:#89909d;font-size:13px}.incentive-wizard>ol span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e8e9ee}.incentive-wizard>ol li.active{color:#6344c4;font-weight:700}.incentive-wizard>ol li.active span{background:#7656d8;color:#fff}.wizard-panel{min-height:400px;padding:28px}.wizard-panel h2{margin-top:0}.wizard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.wizard-grid label{display:grid;gap:7px;color:#596274;font-size:13px}.wizard-grid .wide{grid-column:1/-1}.wizard-grid textarea{min-height:90px}.wizard-actions{grid-column:2;display:flex;justify-content:flex-end;gap:10px;padding:16px 28px;border-top:1px solid #e7e9ee}.wizard-actions #wizardBack{margin-right:auto}.scheme-slab-head,.scheme-slab-row{display:grid;grid-template-columns:1.2fr .7fr .7fr 1fr .7fr 34px;gap:8px;align-items:center;margin-bottom:8px}.scheme-slab-head{font-size:11px;text-transform:uppercase;color:#858d9b}.scheme-slab-row button{height:36px;border:0;border-radius:8px;background:#fff0ef;color:#b13d35;font-size:20px}.scheme-review{display:grid;gap:12px;padding:20px;border-radius:12px;background:#f7f6fb}.review-check{display:flex;gap:8px;margin-top:20px}.scheme-detail-card{padding:24px}.scheme-detail-title{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}.scheme-detail-title h2{margin:5px 0 10px}.scheme-detail-title>div:last-child{display:flex;align-items:start;gap:8px}.scheme-detail-card h3{margin-top:25px}.scheme-detail-card .incentive-tr{grid-template-columns:2fr 1fr 1fr 1fr}.incentive-operational pre{max-width:720px;text-align:left;white-space:pre-wrap;background:#171d2a;color:#dfe7f4;border-radius:10px;padding:15px;overflow:auto}
@media(max-width:900px){.incentive-module-nav{grid-template-columns:1fr 1fr}.incentive-summary{grid-template-columns:1fr 1fr}.incentive-wizard{grid-template-columns:1fr}.incentive-wizard>ol{display:flex;overflow:auto;border-right:0;border-bottom:1px solid #e7e8ed}.incentive-wizard>ol li{min-width:max-content}.wizard-actions{grid-column:1}.incentive-tr{grid-template-columns:1.5fr 1fr 1fr}.incentive-tr>*:nth-child(3),.incentive-tr>*:nth-child(5){display:none}}
@media(max-width:600px){.incentive-page-heading{align-items:start;flex-direction:column}.incentive-module-nav,.incentive-summary,.wizard-grid{grid-template-columns:1fr}.wizard-panel{padding:20px}.scheme-slab-head{display:none}.scheme-slab-row{grid-template-columns:1fr 1fr}.scheme-slab-row>*:first-child{grid-column:1/-1}.scheme-detail-title{flex-direction:column}.incentive-assistant{align-items:start}.incentive-empty.compact select{min-width:0;width:100%}}

/* Pixel-matched Incentive landing page based on inscentive.png */
.incentive-engine-page{gap:24px;min-height:calc(100vh - 120px);padding:2px 0 0;background:transparent;font-family:Inter,"Segoe UI",sans-serif}.incentive-reference-breadcrumb{display:flex;align-items:center;gap:18px;height:34px;color:#64728a;font-size:14px}.incentive-reference-breadcrumb svg{width:21px;height:21px}.incentive-reference-breadcrumb i{font-style:normal;color:#aab4c5;font-size:25px;font-weight:300}.incentive-reference-breadcrumb strong{color:#172033}.incentive-page-heading{display:block;margin:2px 0 1px}.incentive-page-heading h1{font-size:25px;line-height:1.2;font-weight:700;letter-spacing:-.025em;color:#101827}.incentive-page-heading span{margin-top:13px;font-size:15px;color:#64718a}.incentive-empty{min-height:240px;display:flex;align-items:center;justify-content:center;gap:74px;padding:34px;border:1px solid #dbe3ef;border-radius:17px;background:rgba(255,255,255,.78);box-shadow:none;text-align:left}.incentive-empty-art{position:relative;width:92px;height:112px;flex:none;font-size:0;color:transparent}.incentive-empty-art>span{display:block;width:72px;height:108px;border:1.5px solid #87a6d8;border-radius:8px;background:linear-gradient(145deg,#fff,#f2f7ff);box-shadow:inset 0 0 15px #dce9fb}.incentive-empty-art>span:before{content:"";position:absolute;left:14px;top:20px;width:38px;height:5px;border-radius:5px;background:#2867df;box-shadow:0 20px 0 #c9d5e8,0 39px 0 #c9d5e8,0 58px 0 #c9d5e8}.incentive-empty-art b{position:absolute;right:0;bottom:4px;display:grid;place-items:center;width:57px;height:57px;border-radius:50%;background:linear-gradient(145deg,#3475ef,#1558d9);box-shadow:0 8px 18px #2161db35;color:#fff;font-size:43px;line-height:1;font-weight:300}.incentive-empty-copy{min-width:500px}.incentive-empty-copy h2{margin:0 0 14px;font-size:18px;color:#111827}.incentive-empty-copy p{margin:0 0 20px;max-width:none;font-size:15px;color:#66738a}.incentive-empty-copy .primary-button{height:45px;padding:0 20px;border-radius:9px;background:linear-gradient(135deg,#285fdb,#1763ea);font-size:14px;box-shadow:0 5px 12px #2563db2b}.incentive-empty-copy .primary-button span{display:inline-grid;place-items:center;width:21px;height:21px;margin-right:8px;border:1px solid #fff;border-radius:50%;font-size:18px;font-weight:300}.incentive-module-nav{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}.incentive-module-nav button{position:relative;display:flex;min-width:0;height:133px;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:14px 6px;border:1px solid #dce4f0;border-radius:13px;background:rgba(255,255,255,.8);box-shadow:0 4px 15px #44546a08;text-align:center}.incentive-module-nav button>span{display:grid;place-items:center;width:37px;height:37px;border:0;border-radius:0;background:transparent;color:#2368df}.incentive-module-nav button>span svg{width:31px;height:31px;stroke-width:2}.incentive-module-nav button strong{font-size:13px;font-weight:500;color:#111827}.incentive-module-nav button.active{border-color:#cbdcf7;background:linear-gradient(180deg,#f8fbff,#fff);box-shadow:inset 0 -4px 0 #2168eb}.incentive-module-nav button.active strong{color:#1760dc}.incentive-module-nav button.active>span{background:transparent;color:#2168e7}.incentive-assistant{display:block;padding:22px;border:1px solid #dbe3ef;border-radius:18px;background:rgba(255,255,255,.78);box-shadow:none}.incentive-ask-row{display:flex;align-items:center;gap:12px}.incentive-ask-row label{display:flex;align-items:center;flex:1;height:55px;padding:0 20px;border:1px solid #d8e2f0;border-radius:14px;background:#fbfdff}.incentive-ask-row label span{margin-right:15px;color:#3271e7;font-size:26px}.incentive-ask-row input{width:100%;height:auto;padding:0;border:0;outline:0;background:transparent;color:#41506a;font-size:14px}.incentive-ask-row>button{height:53px;padding:0 24px;border:0;border-radius:12px;background:linear-gradient(140deg,#2b65db,#135be5);color:#fff;font-size:15px}.incentive-ask-row>button strong{margin-left:7px}.incentive-prompts{display:flex;flex-wrap:wrap;gap:10px;margin:17px 0 16px}.incentive-prompts button{height:42px;padding:0 15px;border:1px solid #dbe3ef;border-radius:11px;background:#fff;color:#536177;font-size:13px}.incentive-assistant>small{display:block;color:#65738a;font-size:12px}.incentive-footer{display:grid;place-items:center;gap:16px;min-height:115px;margin:4px -30px 0;padding:22px;background:linear-gradient(180deg,transparent,#f5f9ff);color:#637189;font-size:12px}.incentive-footer img{width:112px;height:auto}.incentive-list-card{margin-bottom:0}
@media(max-width:1100px){.incentive-module-nav{grid-template-columns:repeat(3,1fr)}.incentive-empty-copy{min-width:0}.incentive-empty{gap:35px}.incentive-module-nav button{height:105px}}
@media(max-width:700px){.incentive-empty{flex-direction:column;gap:20px;text-align:center}.incentive-empty-copy p{margin-left:auto;margin-right:auto}.incentive-module-nav{grid-template-columns:repeat(2,1fr)}.incentive-ask-row{align-items:stretch}.incentive-ask-row label{height:auto;min-height:55px}.incentive-ask-row>button{height:auto}.incentive-reference-breadcrumb{gap:9px}.incentive-footer{margin-left:-16px;margin-right:-16px}}

/* Keep the platform login independent from tenant-branded login pages. */
body:not(.tenant-login-page) #loginScreen.login-screen { display: grid; grid-template-columns: 1fr; grid-template-rows: none; min-height: 100vh; overflow: auto; }
body:not(.tenant-login-page) #loginScreen .login-form-panel { min-height: 100vh; width: auto; max-width: none; margin: 0; padding: 44px 20px 28px; display: grid; align-content: center; justify-items: center; gap: 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body:not(.tenant-login-page) #loginScreen .login-copy { width: auto; margin: 0 0 6px; text-align: center; }
body:not(.tenant-login-page) #loginScreen .login-copy h1 { font-size: clamp(32px,5vw,44px); color: #0f172a; }
body:not(.tenant-login-page) #loginScreen .login-copy p { display: block; margin: 0; font-size: 16px; }
body:not(.tenant-login-page) #loginScreen .login-card { width: min(100%,430px); gap: 16px; padding: 28px; border: 1px solid rgba(203,213,225,.72); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 28px 70px rgba(15,23,42,.12); backdrop-filter: blur(18px); }
body:not(.tenant-login-page) #loginScreen .login-card label { font-size: 13px; font-weight: 850; }
body:not(.tenant-login-page) #loginScreen .login-card input { min-height: 50px; padding-left: 46px; border-radius: 13px; font-size: inherit; }
body:not(.tenant-login-page) #loginScreen .login-card .checkline input { width: 16px; height: 16px; min-height: 16px; padding: 0; }
body:not(.tenant-login-page) #loginScreen .field-icon { left: 14px; }
body:not(.tenant-login-page) #loginScreen .login-row { flex-direction: row; align-items: center; font-size: 13px; }
body:not(.tenant-login-page) #loginScreen .login-row a { font-size: 13px; }
body:not(.tenant-login-page) #loginScreen .login-submit { min-height: 50px; margin: 2px 0 0; border-radius: 13px; font-size: inherit; background: linear-gradient(135deg,#0b2f63,#2563eb); }
body:not(.tenant-login-page) #loginScreen .login-footer { position: relative; width: min(100%,760px); height: auto; margin: 6px 0 0; padding: 0; display: flex; grid-template-columns: none; justify-content: center; flex-wrap: wrap; gap: 8px 16px; border: 0; background: transparent; font-size: 12px; }
body:not(.tenant-login-page) #loginScreen .footer-salestos-logo { flex: 0 0 100%; width: 70px; max-height: 24px; margin: 2px auto 0; }

@media (max-width: 560px) {
  body:not(.tenant-login-page) #loginScreen .login-form-panel { padding: 30px 16px 24px; }
  body:not(.tenant-login-page) #loginScreen .login-card { padding: 22px; border-radius: 20px; }
  body:not(.tenant-login-page) #loginScreen .login-row { align-items: flex-start; flex-direction: column; gap: 10px; }
}

#suiteShell[data-route="sales-360-execution"] .suite-sidebar {
  display: none !important;
}

#suiteShell[data-route="sales-360-execution"] .suite-main {
  margin-left: 0 !important;
}

#suiteShell[data-route="sales-360-execution"] #content {
  padding: 0 !important;
}

#suiteShell[data-route="sales-360-execution"] .suite-topbar {
  display: none !important;
}

@media (max-width: 1320px) {
  .execution-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .execution-main-grid,
  .execution-lower-grid {
    grid-template-columns: 1fr;
  }
}

/* Final isolation: the default /login keeps its original compact card. */
body:not(.tenant-login-page) #loginScreen.login-screen { display:grid; grid-template-columns:1fr; grid-template-rows:none; min-height:100vh; overflow:auto; }
body:not(.tenant-login-page) #loginScreen .login-form-panel { min-height:100vh; width:auto; max-width:none; margin:0; padding:44px 20px 28px; display:grid; align-content:center; justify-items:center; gap:16px; border:0; border-radius:0; background:transparent; box-shadow:none; }
body:not(.tenant-login-page) #loginScreen .login-copy { width:auto; margin:0 0 6px; text-align:center; }
body:not(.tenant-login-page) #loginScreen .login-copy h1 { font-size:clamp(32px,5vw,44px); color:#0f172a; }
body:not(.tenant-login-page) #loginScreen .login-copy p { display:block; margin:0; font-size:16px; }
body:not(.tenant-login-page) #loginScreen .login-card { width:min(100%,430px); gap:16px; padding:28px; border:1px solid rgba(203,213,225,.72); border-radius:24px; background:rgba(255,255,255,.88); box-shadow:0 28px 70px rgba(15,23,42,.12); backdrop-filter:blur(18px); }
body:not(.tenant-login-page) #loginScreen .login-card label { font-size:13px; font-weight:850; }
body:not(.tenant-login-page) #loginScreen .login-card input { min-height:50px; padding-left:46px; border-radius:13px; font-size:inherit; }
body:not(.tenant-login-page) #loginScreen .login-card .checkline input { width:16px; height:16px; min-height:16px; padding:0; }
body:not(.tenant-login-page) #loginScreen .field-icon { left:14px; }
body:not(.tenant-login-page) #loginScreen .login-row { flex-direction:row; align-items:center; font-size:13px; }
body:not(.tenant-login-page) #loginScreen .login-row a { font-size:13px; }
body:not(.tenant-login-page) #loginScreen .login-submit { min-height:50px; margin:2px 0 0; border-radius:13px; font-size:inherit; background:linear-gradient(135deg,#0b2f63,#2563eb); }
body:not(.tenant-login-page) #loginScreen .login-footer { position:relative; width:min(100%,760px); height:auto; margin:6px 0 0; padding:0; display:flex; grid-template-columns:none; justify-content:center; flex-wrap:wrap; gap:8px 16px; border:0; background:transparent; font-size:12px; }
body:not(.tenant-login-page) #loginScreen .footer-salestos-logo { flex:0 0 100%; width:70px; max-height:24px; margin:2px auto 0; }
@media (max-width:560px) { body:not(.tenant-login-page) #loginScreen .login-form-panel { padding:30px 16px 24px; } body:not(.tenant-login-page) #loginScreen .login-card { padding:22px; border-radius:20px; } body:not(.tenant-login-page) #loginScreen .login-row { align-items:flex-start; flex-direction:column; gap:10px; } }
.impersonation-banner{position:sticky;top:0;z-index:10000;min-height:44px;display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 18px;background:#8a3ffc;color:#fff;box-shadow:0 3px 10px rgba(46,18,98,.2);font-family:Calibri,"Segoe UI",sans-serif}.impersonation-banner strong{font-size:14px}.impersonation-banner span{font-size:12px;opacity:.9}.impersonation-banner button{padding:6px 12px;border:1px solid rgba(255,255,255,.6);border-radius:6px;background:#fff;color:#5b21b6;font-weight:700;cursor:pointer}@media(max-width:650px){.impersonation-banner{flex-wrap:wrap;gap:6px 10px}.impersonation-banner span{flex-basis:100%;text-align:center}}

@media (max-width: 980px) {
  .execution-top-header {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .execution-module-nav {
    justify-content: flex-start;
  }

  .execution-user-tools {
    justify-content: space-between;
  }

  .execution-page {
    padding: 16px;
  }

  .execution-page-head,
  .execution-page-head > div:last-child,
  .execution-card header {
    align-items: stretch;
    flex-direction: column;
  }

  .execution-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .execution-target-top {
    grid-template-columns: 1fr;
  }

  .execution-ring {
    justify-self: center;
  }
}

@media (max-width: 620px) {
  .execution-summary-grid,
  .execution-quick-card section,
  .execution-target-top section {
    grid-template-columns: 1fr;
  }

  .execution-page-head h2 {
    font-size: 24px;
  }

  .execution-summary-card {
    padding: 16px;
  }
}

.target-tree {
  display: grid;
  gap: 8px;
}

.target-tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
}

.target-tree-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.target-tree-row strong,
.target-tree-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-tree-row small {
  color: #64748B;
}

#suiteShell[data-route="target-planning-engine"] {
  background: linear-gradient(180deg, #EEF6FF 0%, #F8FAFC 72%, #FFFFFF 100%);
}

.target-planner-shell {
  display: grid;
  gap: 16px;
  color: #0F172A;
}

.target-planner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #D8E4F0;
  border-radius: 8px;
  background: #FFFFFF;
}

.target-planner-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.target-planner-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.target-planner-brand p,
.target-planner-card p {
  margin: 0;
  color: #64748B;
  font-size: 12px;
}

.target-planner-brand h2,
.target-planner-card h3 {
  margin: 0;
}

.target-planner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.target-planner-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.target-planner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.target-planner-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid #D8E4F0;
}

.target-planner-section-title h3 {
  margin: 0;
  color: #0F172A;
}

.target-planner-section-title span {
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
}

.target-planner-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid #D8E4F0;
  border-radius: 8px;
  background: #FFFFFF;
}

.target-planner-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.target-planner-wide,
.target-planner-matrix {
  grid-column: 1 / -1;
}

.target-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.target-form-grid label,
.target-planner-card label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.target-planner-card input,
.target-planner-card select {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 0 10px;
  background: #FFFFFF;
  color: #0F172A;
}

.target-planner-tree {
  display: grid;
  gap: 8px;
}

.target-planner-node {
  display: grid;
  grid-template-columns: 36px minmax(160px, 1fr) minmax(140px, 1fr) 150px 110px 130px minmax(120px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
}

.target-planner-node.active {
  border-color: #2563EB;
  background: #EFF6FF;
}

.target-node-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #0F172A;
  text-align: left;
}

.target-node-main strong,
.target-node-main small,
.target-planner-node small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-validation-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.target-validation-list > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border-radius: 8px;
  background: #F8FAFC;
}

@media (max-width: 980px) {
  .target-planner-top,
  .target-planner-card header {
    align-items: stretch;
    flex-direction: column;
  }

  .target-planner-summary,
  .target-planner-grid,
  .target-form-grid {
    grid-template-columns: 1fr;
  }

  .target-planner-section-title {
    align-items: start;
    flex-direction: column;
  }

  .target-planner-node {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .target-planner-node input,
  .target-planner-node select,
  .target-planner-node > span,
  .target-planner-node > small,
  .target-planner-node > .secondary-button {
    grid-column: 2;
  }
}

#suiteShell[data-route="target-planning-engine"] .sidebar,
#suiteShell[data-route="target-planning-engine"] .suite-sidebar {
  display: none;
}

#suiteShell[data-route="target-planning-engine"] .main-shell,
#suiteShell[data-route="target-planning-engine"] .suite-main,
#suiteShell[data-route="target-planning-engine"] main {
  margin-left: 0;
}

#suiteShell[data-route="target-planning-engine"] .content,
#suiteShell[data-route="target-planning-engine"] #content {
  padding: 0;
}

#suiteShell[data-route="target-planning-engine"] .suite-topbar {
  display: none !important;
}

#suiteShell[data-route="sales-360-execution"] .sidebar,
#suiteShell[data-route="sales-360-execution"] .suite-sidebar {
  display: none;
}

#suiteShell[data-route="sales-360-execution"] .main-shell,
#suiteShell[data-route="sales-360-execution"] .suite-main,
#suiteShell[data-route="sales-360-execution"] main {
  margin-left: 0 !important;
}

#suiteShell[data-route="sales-360-execution"] .content,
#suiteShell[data-route="sales-360-execution"] #content {
  padding: 0;
}

#suiteShell[data-route="sales-360-execution"] .suite-topbar {
  display: none !important;
}

.execution-workspace-shell {
  min-height: 100vh;
  background: linear-gradient(180deg, #F6FAFF 0%, #EEF6FF 100%);
  color: #08245C;
}

.execution-top-header {
  min-height: 78px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid #DCE8F7;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 28px rgba(8, 36, 92, .06);
}

.execution-brand img {
  width: 188px;
  height: 54px;
  object-fit: contain;
}

.execution-module-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
}

.execution-module-nav button {
  min-width: 92px;
  min-height: 68px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #08245C;
  font-weight: 900;
}

.execution-module-nav button.active,
.execution-module-nav button:hover {
  border-color: #DCE8F7;
  background: #EEF5FF;
  box-shadow: 0 8px 18px rgba(18, 102, 241, .08);
}

.execution-module-nav span,
.execution-summary-card header > span,
.execution-timeline article > span,
.execution-table-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
}

.execution-module-nav strong {
  font-size: 12px;
}

.execution-user-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.execution-user-tools button {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #061A44;
}

.execution-user-tools button b {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 9px;
}

.execution-user-tools > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #F4F7FB;
  color: #08245C;
}

.execution-user-tools strong,
.execution-user-tools small {
  display: block;
}

.execution-user-tools small {
  color: #4E6594;
  font-size: 11px;
  font-weight: 800;
}

.execution-page {
  display: grid;
  gap: 18px;
  padding: 22px 28px 30px;
}

.execution-breadcrumb {
  margin: 0;
}

.execution-page-head,
.execution-page-head > div:last-child,
.execution-card header,
.execution-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.execution-page-head h2 {
  margin: 0 0 6px;
  color: #08245C;
  font-size: 28px;
  line-height: 1.1;
}

.execution-page-head p {
  margin: 0;
  color: #4E6594;
  font-size: 14px;
  font-weight: 700;
}

.primary-button.dark {
  background: #072B73;
  border-color: #072B73;
  color: #FFFFFF;
}

.execution-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 14px;
}

.execution-summary-card,
.execution-card {
  border: 1px solid #DCE8F7;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(8, 36, 92, .06);
}

.execution-summary-card {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.execution-summary-card:hover,
.execution-card:hover {
  transform: translateY(-2px);
  border-color: #C4D9F5;
  box-shadow: 0 16px 32px rgba(8, 36, 92, .09);
}

.execution-summary-card header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.execution-summary-card header > span {
  width: 50px;
  height: 50px;
}

.tone-blue { background: #EAF2FF; color: #1266F1; }
.tone-green { background: #EAFBF1; color: #159451; }
.tone-orange { background: #FFF5E8; color: #EA7A12; }
.tone-purple { background: #F1ECFF; color: #7C3AED; }
.tone-cyan { background: #E9FBFD; color: #0E9FAE; }
.tone-red { background: #FFF0F0; color: #E11D48; }

.execution-summary-card small,
.execution-summary-card em {
  display: block;
  color: #4E6594;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.execution-summary-card strong {
  display: block;
  margin: 6px 0;
  color: #08245C;
  font-size: 24px;
  line-height: 1;
}

.execution-progress,
.execution-mini-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #E5ECF7;
}

.execution-progress i,
.execution-mini-progress i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #1266F1;
}

.execution-summary-card button,
.execution-card footer button,
.execution-recent-card header button {
  border: 0;
  background: transparent;
  color: #1266F1;
  font-weight: 950;
}

.execution-main-grid {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(470px, 1.15fr) minmax(300px, .78fr);
  gap: 16px;
  align-items: stretch;
}

.execution-card {
  min-width: 0;
  padding: 18px;
}

.execution-card h3,
.execution-card h4 {
  margin: 0;
  color: #08245C;
}

.execution-card h3 {
  font-size: 17px;
}

.execution-card h4 {
  font-size: 13px;
}

.execution-card header {
  margin-bottom: 16px;
}

.execution-card header > button,
.execution-customers-card header button,
.execution-customers-card label {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #DCE8F7;
  border-radius: 8px;
  background: #FFFFFF;
  color: #08245C;
  padding: 0 12px;
  font-weight: 850;
}

.execution-customers-card header > div {
  display: flex;
  gap: 10px;
}

.execution-customers-card input {
  width: 190px;
  border: 0;
  outline: 0;
  color: #08245C;
}

.execution-target-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: center;
}

.execution-target-top small {
  color: #4E6594;
  font-weight: 850;
}

.execution-target-top strong {
  display: block;
  margin: 8px 0 18px;
  color: #08245C;
  font-size: 24px;
}

.execution-target-top section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.execution-target-top b {
  display: block;
  margin-top: 6px;
  font-size: 17px;
}

.execution-target-top .positive { color: #16A34A; }
.execution-target-top .negative { color: #EF4444; }

.execution-ring {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #FFFFFF 58%, transparent 60%),
    conic-gradient(#1266F1 calc(var(--value) * 1%), #E4EBF6 0);
}

.execution-ring strong {
  margin: 0;
  font-size: 28px;
}

.execution-ring small {
  display: block;
}

.execution-product-table {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #DCE8F7;
  border-radius: 8px;
}

.execution-table-wrap {
  overflow-x: auto;
}

.execution-table-wrap table,
.execution-product-table table {
  width: 100%;
  border-collapse: collapse;
}

.execution-table-wrap th,
.execution-table-wrap td,
.execution-product-table th,
.execution-product-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #E5EDF8;
  color: #263B68;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

.execution-table-wrap th,
.execution-product-table th {
  color: #4E6594;
  font-size: 11px;
  font-weight: 950;
}

.execution-table-wrap tr[role="button"] {
  cursor: pointer;
}

.execution-table-wrap tr[role="button"]:hover {
  background: #F6FAFF;
}

.execution-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.execution-status.success { background: #DCFCE7; color: #16803A; }
.execution-status.warn { background: #FFEDD5; color: #EA580C; }
.execution-status.info { background: #EAF2FF; color: #1266F1; }
.execution-status.muted { background: #EEF2F7; color: #64748B; }

.execution-timeline {
  display: grid;
  gap: 20px;
  position: relative;
  padding-left: 4px;
}

.execution-timeline::before {
  content: "";
  position: absolute;
  left: 76px;
  top: 10px;
  bottom: 18px;
  width: 2px;
  background: #DCE8F7;
}

.execution-timeline article {
  display: grid;
  grid-template-columns: 68px 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  position: relative;
}

.execution-timeline time {
  color: #263B68;
  font-size: 12px;
  font-weight: 850;
}

.execution-timeline strong,
.execution-timeline small,
.execution-timeline em {
  display: block;
}

.execution-timeline strong {
  color: #08245C;
}

.execution-timeline small {
  margin: 3px 0;
  color: #263B68;
  font-weight: 800;
}

.execution-timeline em {
  color: #4E6594;
  font-style: normal;
  font-weight: 800;
}

.execution-timeline em.overdue {
  color: #EF4444;
}

.execution-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 16px;
}

.execution-table-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
}

.execution-quick-card section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.execution-quick-card section button {
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid #DCE8F7;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1266F1;
  font-weight: 950;
  text-align: left;
}

.execution-quick-card section button:hover {
  background: #F6FAFF;
  border-color: #C4D9F5;
}

.target-mock-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 118%, rgba(18, 102, 241, 0.10), transparent 34%),
    linear-gradient(180deg, #F6FAFF 0%, #EEF6FF 100%);
  color: #08245C;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.target-mock-header {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid #DCE8F7;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 28px rgba(8, 36, 92, 0.06);
}

.target-mock-header > div {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.target-mock-header img {
  width: 198px;
  height: 52px;
  object-fit: contain;
}

.target-mock-header nav {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #4E6594;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.target-mock-header nav span {
  color: #8AA2C7;
}

.target-mock-header nav button {
  border: 0;
  background: transparent;
  color: #4E6594;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.target-mock-header nav button:hover,
.target-mock-header nav button:focus-visible {
  color: #1266F1;
}

.target-mock-header nav strong {
  color: #08245C;
  font-weight: 900;
}

.target-profile-button {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #1266F1;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(18, 102, 241, 0.28);
}

.target-profile-button i {
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  background: #20C56B;
}

.target-mock-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 380px;
  gap: 18px;
  padding: 26px 36px 34px 0;
}

.target-mock-stepper {
  position: sticky;
  top: 90px;
  align-self: start;
  min-height: calc(100vh - 110px);
  padding: 18px 18px 18px 38px;
  border-right: 1px solid #DCE8F7;
  background: rgba(255, 255, 255, 0.48);
}

.target-mock-stepper button {
  position: relative;
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  border: 0;
  background: transparent;
  color: #08245C;
  text-align: left;
}

.target-mock-stepper button::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 68px;
  width: 2px;
  height: 54px;
  background: #DCE8F7;
}

.target-mock-stepper button:last-child::before {
  display: none;
}

.target-mock-stepper button span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #C9D9EF;
  border-radius: 999px;
  background: #FFFFFF;
  color: #08245C;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(8, 36, 92, 0.05);
  z-index: 1;
}

.target-mock-stepper button strong {
  align-self: end;
  font-size: 15px;
  font-weight: 900;
}

.target-mock-stepper button small {
  align-self: start;
  color: #4E6594;
  font-size: 13px;
  font-weight: 700;
}

.target-mock-stepper button.active {
  border-left: 3px solid #1266F1;
}

.target-mock-stepper button.active span {
  background: #1266F1;
  border-color: #1266F1;
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(18, 102, 241, 0.28);
}

.target-mock-main,
.target-mock-side {
  display: grid;
  align-content: start;
  gap: 24px;
}

.target-hero-card,
.target-main-card,
.target-summary-card,
.target-side-card {
  border: 1px solid #D9E6F6;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 16px 42px rgba(8, 36, 92, 0.08);
}

.target-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 28px;
  padding: 24px;
}

.target-hero-main {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.target-hero-icon,
.target-soft-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #EEE6FF;
  color: #6D46D9;
}

.target-soft-icon.orange {
  background: #FFF1DF;
  color: #FF7A1A;
}

.target-hero-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.target-hero-title h1 {
  margin: 4px 0 0;
  color: #08245C;
  font-size: 28px;
  letter-spacing: 0;
}

.target-hero-title p {
  width: 100%;
  margin: 0;
  color: #4E6594;
  font-size: 15px;
  font-weight: 700;
}

.target-hero-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 64px 210px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
}

.target-hero-metrics small,
.target-summary-card small,
.target-side-card small {
  color: #536B99;
  font-size: 13px;
  font-weight: 800;
}

.target-hero-metrics strong {
  display: block;
  margin-top: 8px;
  color: #08245C;
  font-size: 24px;
  font-weight: 900;
}

.target-hero-metrics button,
.target-amount-card button,
.link-button {
  border: 0;
  background: transparent;
  color: #1266F1;
  font-weight: 900;
}

.target-progress-block {
  min-height: 70px;
  padding-left: 44px;
  border-left: 1px solid #D9E6F6;
}

.target-progress-block span,
.target-summary-card i {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #E8EEF7;
}

.target-progress-block span i,
.target-summary-card i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #18B96C;
}

.target-progress-block em {
  display: inline-block;
  margin-top: 8px;
  color: #4E6594;
  font-style: normal;
  font-weight: 900;
}

.target-recommendation {
  padding: 20px;
  border: 1px solid #FFC98D;
  border-radius: 14px;
  background: #FFF9F2;
}

.target-recommendation h3 {
  margin: 0 0 16px;
  color: #F47716;
  font-size: 13px;
  font-weight: 950;
}

.target-recommendation ul {
  display: grid;
  gap: 13px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.target-recommendation li {
  color: #23426F;
  font-size: 13px;
  font-weight: 750;
}

.target-recommendation li::before {
  content: "✓";
  margin-right: 10px;
  color: #1266F1;
  font-weight: 900;
}

.target-main-card {
  padding: 20px;
}

.target-main-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.target-main-card h2,
.target-side-card h3,
.target-summary-card h3 {
  margin: 0;
  color: #08245C;
  font-size: 20px;
  font-weight: 950;
}

.target-main-card p {
  margin: 6px 0 0;
  color: #4E6594;
  font-weight: 700;
}

.target-setup-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 18px;
  border: 1px solid #D9E6F6;
  border-radius: 14px;
  background: #FFFFFF;
}

.target-setup-panel label,
.target-product-cards label,
.target-quarter-cards label {
  display: grid;
  gap: 8px;
  color: #536B99;
  font-size: 12px;
  font-weight: 900;
}

.target-setup-panel input,
.target-setup-panel select,
.target-product-cards input,
.target-quarter-cards input {
  width: 100%;
  height: 42px;
  min-width: 0;
  border: 1px solid #C9D9EF;
  border-radius: 10px;
  padding: 0 12px;
  background: #FFFFFF;
  color: #08245C;
  font-size: 15px;
  font-weight: 750;
}

.target-percent-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
}

.target-percent-input input {
  border-radius: 10px 0 0 10px;
}

.target-percent-input i {
  display: grid;
  place-items: center;
  border: 1px solid #C9D9EF;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: #F3F7FE;
  color: #536B99;
  font-style: normal;
  font-weight: 900;
}

.target-amount-card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 20px;
  border: 1px solid #FFC98D;
  border-radius: 14px;
  background: #FFF9F2;
}

.target-amount-card > span {
  grid-row: 1 / 4;
  color: #FF7A1A;
}

.target-amount-card strong {
  color: #08245C;
  font-size: 27px;
  font-weight: 950;
}

.target-amount-card input {
  margin-top: 6px;
}

.target-checkbox {
  grid-column: 1 / 3;
  display: flex !important;
  align-items: center;
  gap: 10px !important;
}

.target-checkbox input {
  width: 18px;
  height: 18px;
}

.target-main-card > footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.target-main-card .primary-button,
.target-recommendation .secondary-button {
  min-height: 42px;
  border-radius: 10px;
  padding: 0 20px;
  font-weight: 900;
}

.target-side-card {
  padding: 20px;
}

.target-actions-card {
  display: grid;
  gap: 14px;
}

.target-actions-card button {
  min-height: 44px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #C9D9EF;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1266F1;
  font-weight: 900;
  text-align: left;
}

.target-actions-card button:disabled {
  background: #F2F5FA;
  color: #8798B7;
}

.target-actions-card button small {
  display: block;
  margin-top: 2px;
}

.target-side-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.target-side-card header b {
  color: #12A866;
  font-size: 13px;
  font-weight: 950;
}

.target-check-list {
  display: grid;
  gap: 13px;
}

.target-check-list div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  color: #23426F;
  font-size: 13px;
  font-weight: 800;
}

.target-check-list i,
.target-check-list em {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}

.target-check-list .pass i,
.target-check-list .pass em {
  background: #E4F8ED;
  color: #10A963;
}

.target-check-list .warn i,
.target-check-list .warn em {
  background: #FFF0DF;
  color: #F47716;
}

.target-check-list .fail i,
.target-check-list .fail em {
  background: #FEE2E2;
  color: #DC2626;
}

.target-summary-card {
  padding: 20px;
}

.target-summary-card > div {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.target-summary-card section {
  min-height: 108px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  border: 1px solid #D9E6F6;
  border-radius: 12px;
  background: #FFFFFF;
}

.target-summary-card section > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #EAF2FF;
  color: #1266F1;
}

.target-summary-card section.green > span {
  background: #E4F8ED;
  color: #10A963;
}

.target-summary-card section.orange > span {
  background: #FFF0DF;
  color: #F47716;
}

.target-summary-card strong {
  color: #08245C;
  font-size: 18px;
  font-weight: 950;
}

.target-summary-card em {
  color: #10A963;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.target-summary-card section.orange em {
  color: #F47716;
}

.target-product-cards,
.target-quarter-cards,
.target-publish-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.target-product-cards article,
.target-quarter-cards article,
.target-publish-preview article {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #D9E6F6;
  border-radius: 14px;
  background: #F8FBFF;
}

.target-product-cards article > span,
.target-quarter-cards article > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #EAF2FF;
  color: #1266F1;
  font-weight: 950;
}

.target-product-cards strong,
.target-quarter-cards strong,
.target-publish-preview strong {
  color: #08245C;
  font-size: 18px;
  font-weight: 950;
}

.target-product-cards small,
.target-quarter-cards small,
.target-publish-preview small {
  color: #536B99;
  font-weight: 800;
}

.target-hierarchy-panel .target-planner-node {
  border-radius: 14px;
  border-color: #D9E6F6;
  background: #F8FBFF;
}

.target-workflow-card > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
}

.target-workflow-card span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #7C8EAD;
  font-weight: 900;
}

.target-workflow-card span::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #DCE8F7;
  z-index: 0;
}

.target-workflow-card span:last-child::after {
  display: none;
}

.target-workflow-card i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #E6EBF3;
  color: #8B98AA;
  z-index: 1;
}

.target-workflow-card .active i {
  background: #1266F1;
  color: #FFFFFF;
}

.target-workflow-card .active small {
  color: #1266F1;
}

.target-workflow-card p {
  margin: 24px 0 0;
  color: #6A7EA5;
  font-size: 13px;
  font-weight: 750;
}

.target-mock-footer {
  padding: 0 0 18px;
  color: #6A7EA5;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 1300px) {
  .target-mock-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    padding-right: 22px;
  }

  .target-mock-side {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .target-workflow-card {
    grid-column: 1 / -1;
  }

  .target-hero-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .target-mock-header {
    height: auto;
    align-items: flex-start;
    padding: 14px;
  }

  .target-mock-header > div,
  .target-mock-header nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .target-mock-layout {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .target-mock-stepper {
    position: static;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    border-right: 0;
    background: transparent;
  }

  .target-mock-stepper button {
    min-height: 78px;
    padding: 10px;
    border: 1px solid #D9E6F6;
    border-radius: 14px;
    background: #FFFFFF;
  }

  .target-mock-stepper button::before {
    display: none;
  }

  .target-mock-side {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .target-setup-panel,
  .target-product-cards,
  .target-quarter-cards,
  .target-publish-preview,
  .target-summary-card > div,
  .target-hero-metrics {
    grid-template-columns: 1fr;
  }

  .target-amount-card,
  .target-checkbox {
    grid-column: auto;
  }
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.toggle-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.toggle-grid input {
  width: 16px;
  min-height: 16px;
}

.product-target-header .workspace-header-title p {
  max-width: 860px;
}

.product-target-rules .chart-card {
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15,23,42,.05), 0 -4px 18px rgba(15,23,42,.03);
}

.target-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.target-preview-grid article {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.target-preview-grid span {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
  font-weight: 850;
}

.target-preview-grid small {
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 720px) {
  .toggle-grid,
  .target-preview-grid {
    grid-template-columns: 1fr;
  }
}
.login-bg-waves { position: absolute; inset: 0; pointer-events: none; opacity: .65; background: repeating-radial-gradient(ellipse at 50% 118%, transparent 0 34px, rgba(37,99,235,.08) 35px 36px, transparent 37px 70px), repeating-radial-gradient(ellipse at -8% 42%, transparent 0 42px, rgba(11,47,99,.055) 43px 44px, transparent 45px 88px); }
.login-dot { position: absolute; width: 112px; height: 112px; pointer-events: none; background-image: radial-gradient(rgba(11,47,99,.22) 1.2px, transparent 1.2px); background-size: 13px 13px; opacity: .55; }
.login-dot-a { top: 92px; left: 42px; }
.login-dot-b { right: 44px; bottom: 92px; }
.login-form-panel { position: relative; z-index: 1; min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 44px 20px 28px; background: transparent; }
.login-logo-link { display: inline-flex; align-items: center; justify-content: center; justify-self: center; margin: 0; }
.login-logo-link img { width: min(270px, 72vw); height: auto; display: block; }
.login-copy { display: grid; gap: 7px; margin: 0 0 6px; text-align: center; }
.login-copy h1 { margin: 0; color: #0f172a; font-size: clamp(32px, 5vw, 44px); line-height: 1.08; font-weight: 950; }
.login-copy p { margin: 0; color: #64748b; font-size: 16px; line-height: 1.5; }
.login-card { width: min(100%, 430px); display: grid; gap: 16px; padding: 28px; border: 1px solid rgba(203,213,225,.72); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 28px 70px rgba(15,23,42,.12); backdrop-filter: blur(18px); }
.login-card label { color: #0f172a; font-size: 13px; font-weight: 850; }
.login-card input { min-height: 50px; border-radius: 13px; border-color: #dbe5f0; background: #fff; color: #0f172a; }
.login-card input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.11); }
.field-icon { color: #0b2f63; }
.password-toggle { color: #0b2f63; border-radius: 10px; }
.password-toggle:hover { color: #e31e24; background: #fff5f5; }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -2px 0 0; }
.checkline { display: inline-flex; align-items: center; gap: 9px; color: #64748b; font-size: 13px; }
.checkline input { width: 16px; height: 16px; min-height: 16px; accent-color: #2563eb; }
.login-row a { color: #0b2f63; font-size: 13px; font-weight: 850; text-decoration: none; }
.login-row a:hover { color: #e31e24; text-decoration: underline; }
.login-submit { min-height: 50px; margin: 2px 0 0; border-radius: 13px; background: linear-gradient(135deg, #0b2f63 0%, #2563eb 100%); color: #fff; font-weight: 950; box-shadow: 0 18px 36px rgba(37,99,235,.24); }
.login-submit:hover { background: linear-gradient(135deg, #071e3d 0%, #1d4ed8 100%); transform: translateY(-1px); box-shadow: 0 22px 44px rgba(37,99,235,.28); }
.login-divider { position: relative; display: grid; place-items: center; color: #94a3b8; font-size: 12px; font-weight: 850; }
.login-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e2e8f0; }
.login-divider span { position: relative; padding: 0 12px; background: rgba(255,255,255,.9); }
.login-sso { min-height: 48px; border: 1px solid #dbe5f0; border-radius: 13px; background: #fff; color: #0b2f63; font-weight: 900; }
.login-sso:hover { border-color: #b9c8dc; background: #f8fbff; transform: translateY(-1px); }
.login-footer { width: min(100%, 760px); display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; text-align: center; }
.login-footer a { color: #0b2f63; font-weight: 800; text-decoration: none; }
.login-footer a:hover { color: #e31e24; text-decoration: underline; }
@media (max-width: 560px) {
  .login-screen { overflow: auto; }
  .login-form-panel { padding: 30px 16px 24px; }
  .login-logo-link img { width: min(226px, 72vw); }
  .login-card { padding: 22px; border-radius: 20px; }
  .login-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .login-dot { display: none; }
}
.launch-home-body { min-height: 100vh; background: radial-gradient(circle at 50% 22%, rgba(37,99,235,.14), transparent 28%), radial-gradient(circle at 86% 8%, rgba(20,184,166,.12), transparent 24%), linear-gradient(145deg, #fff 0%, #f7fbff 44%, #eef6ff 100%); }
.orbit-home { min-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; color: #0f172a; }
.orbit-topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(100% - 48px, 1420px); margin: 0 auto; border-bottom: 1px solid rgba(148,163,184,.22); }
.orbit-brand, .orbit-actions, .orbit-user { display: inline-flex; align-items: center; }
.orbit-brand { gap: 10px; color: #0b2f63; text-decoration: none; font-weight: 950; }
.orbit-brand img { width: 118px; height: 54px; object-fit: contain; }
.orbit-actions { gap: 12px; }
.orbit-icon-button, .orbit-user { min-height: 42px; border: 1px solid rgba(148,163,184,.22); border-radius: 999px; background: rgba(255,255,255,.78); color: #0f172a; box-shadow: 0 14px 34px rgba(15,23,42,.07); backdrop-filter: blur(16px); text-decoration: none; }
.orbit-icon-button { width: 42px; justify-content: center; }
.orbit-icon-button svg, .orbit-user svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.orbit-user { gap: 9px; padding: 5px 12px 5px 6px; }
.orbit-user span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #0b2f63, #2563eb); color: #fff; font-size: 12px; font-weight: 950; }
.orbit-user strong { font-size: 14px; font-weight: 850; }
.orbit-stage { --orbit-radius: clamp(210px, 27vw, 360px); position: relative; min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 18px 24px 44px; }
.orbit-rings, .orbit-modules, .orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.orbit-rings { width: min(72vw, 820px); aspect-ratio: 1; pointer-events: none; }
.orbit-rings span { position: absolute; inset: var(--ring-inset, 0); border: 1px solid rgba(37,99,235,.13); border-radius: 50%; box-shadow: inset 0 0 34px rgba(37,99,235,.035); }
.orbit-rings span:nth-child(2) { --ring-inset: 14%; border-style: dashed; }
.orbit-rings span:nth-child(3) { --ring-inset: 29%; }
.orbit-core { z-index: 3; width: clamp(220px, 23vw, 320px); min-height: clamp(220px, 23vw, 320px); display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,251,255,.72)); box-shadow: 0 34px 90px rgba(15,23,42,.13), inset 0 1px 1px rgba(255,255,255,.9); backdrop-filter: blur(20px); text-align: center; }
.orbit-core img { width: min(238px, 86%); height: auto; object-fit: contain; margin-bottom: 0; }
.orbit-core small { color: #64748b; font-size: 14px; font-weight: 750; }
.orbit-modules { z-index: 4; width: 1px; height: 1px; }
.orbit-module { position: absolute; left: 0; top: 0; width: 142px; display: grid; justify-items: center; gap: 10px; color: #0f172a; text-align: center; text-decoration: none; transform: rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) translate(-50%, -50%); transition: transform .18s ease, filter .18s ease; }
.orbit-module:hover { filter: saturate(1.08); transform: rotate(var(--angle)) translate(calc(var(--orbit-radius) + 7px)) rotate(calc(-1 * var(--angle))) translate(-50%, -50%); }
.orbit-module span { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; color: #fff; box-shadow: 0 18px 40px rgba(15,23,42,.16), inset 0 1px 1px rgba(255,255,255,.38); }
.orbit-module svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.orbit-module strong { display: block; width: 142px; color: #172033; font-size: 14px; font-weight: 850; line-height: 1.22; text-wrap: balance; }
.orbit-module.app-blue span { background: linear-gradient(145deg, #60a5fa, #2563eb 58%, #1d4ed8); }
.orbit-module.app-teal span { background: linear-gradient(145deg, #5eead4, #14b8a6 55%, #0d9488); }
.orbit-module.app-green span { background: linear-gradient(145deg, #86efac, #22c55e 48%, #16a34a); }
.orbit-module.app-orange span { background: linear-gradient(145deg, #fdba74, #f97316 52%, #ea580c); }
.orbit-module.app-purple span { background: linear-gradient(145deg, #d8b4fe, #a855f7 48%, #7e22ce); }
.orbit-module.app-indigo span { background: linear-gradient(145deg, #a5b4fc, #6366f1 48%, #4338ca); }
.orbit-module.app-cyan span { background: linear-gradient(145deg, #67e8f9, #06b6d4 50%, #0891b2); }
.orbit-module.app-navy span { background: linear-gradient(145deg, #2563eb, #0b2f63 58%, #071e3d); }
.orbit-module.app-amber span { background: linear-gradient(145deg, #fde68a, #facc15 48%, #eab308); }
.orbit-module.app-rose span { background: linear-gradient(145deg, #fecdd3, #fb7185 48%, #e31e24); }
@media (max-width: 980px) {
  .orbit-home { overflow: visible; }
  .orbit-topbar { width: min(100% - 28px, 1420px); }
  .orbit-stage { display: grid; gap: 28px; min-height: auto; padding: 32px 14px 42px; }
  .orbit-rings, .orbit-modules, .orbit-core { position: relative; left: auto; top: auto; transform: none; }
  .orbit-rings { display: none; }
  .orbit-core { width: min(100%, 340px); min-height: 340px; justify-self: center; }
  .orbit-modules { width: min(100%, 620px); height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; justify-self: center; }
  .orbit-module, .orbit-module:hover { position: relative; left: auto; top: auto; width: auto; min-height: 142px; align-content: center; padding: 18px 10px; border: 1px solid rgba(148,163,184,.2); border-radius: 22px; background: rgba(255,255,255,.76); box-shadow: 0 16px 38px rgba(15,23,42,.08); transform: none; }
  .orbit-module strong { width: min(100%, 150px); }
}
@media (max-width: 520px) {
  .orbit-topbar { align-items: flex-start; padding: 14px 0; }
  .orbit-user strong { display: none; }
  .orbit-core { width: min(100%, 292px); min-height: 292px; padding: 22px; }
  .orbit-core small { font-size: 13px; }
  .orbit-modules { gap: 12px; }
  .orbit-module { min-height: 132px; border-radius: 18px; }
  .orbit-module span { width: 62px; height: 62px; border-radius: 17px; }
  .orbit-module svg { width: 29px; height: 29px; }
  .orbit-module strong { font-size: 13px; }
}

.collections-app { margin: -2px; }
.collections-shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 18px; align-items: start; }
.collections-nav { position: sticky; top: 118px; display: grid; gap: 6px; padding: 14px; background: #fff; border: 1px solid #e6ebf2; border-radius: 18px; box-shadow: 0 10px 26px rgba(15,23,42,.045); }
.collections-nav > div { display: grid; gap: 2px; padding: 6px 8px 12px; border-bottom: 1px solid #eef2f7; margin-bottom: 6px; }
.collections-nav strong { font-size: 15px; color: #0f172a; }
.collections-nav span { font-size: 12px; color: #64748b; }
.collections-nav button { min-height: 38px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 9px; border-radius: 11px; background: transparent; color: #475569; text-align: left; font-weight: 800; }
.collections-nav .nav-svg { width: 18px; height: 18px; stroke-width: 1.8; }
.collections-nav button:hover, .collections-nav button.active { background: #f5f8fc; color: #0f172a; }
.collections-workspace { display: grid; gap: 14px; min-width: 0; }
.collections-hero, .collections-exec-hero, .collections-kpis article, .collection-panel, .collection-strategy-card { background: #fff; border: 1px solid #e6ebf2; border-radius: 18px; box-shadow: 0 10px 26px rgba(15,23,42,.045); }
.collections-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; border-radius: 20px; }
.collections-hero p, .collections-exec-hero p { margin: 0 0 5px; color: #64748b; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.collections-hero h2, .collections-exec-hero h2 { margin: 0; font-size: 24px; line-height: 1.15; color: #0f172a; }
.collections-hero-tools { display: flex; align-items: center; gap: 8px; }
.collections-filterbar { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)) auto; gap: 8px; padding: 10px; background: #fff; border: 1px solid #e6ebf2; border-radius: 16px; }
.collections-filterbar select, .collections-filterbar button { min-height: 34px; border-radius: 10px; font-size: 12px; }
.collections-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #fff; border: 1px solid #e6ebf2; border-radius: 16px; }
.collections-toolbar.sticky { position: sticky; top: 92px; z-index: 18; box-shadow: 0 12px 28px rgba(15,23,42,.075); }
.collections-toolbar > strong { min-height: 34px; display: inline-flex; align-items: center; padding: 0 10px; color: #2563eb; font-size: 13px; }
.collections-toolbar button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; color: #0f172a; background: #f8fafc; border: 1px solid #e6ebf2; font-weight: 850; }
.collections-toolbar button.disabled { opacity: .48; }
.collections-toolbar button span { color: #2563eb; font-size: 17px; line-height: 1; }
.collections-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.collections-kpis article { min-height: 86px; padding: 15px; display: grid; gap: 6px; align-content: center; }
.collections-kpis span { color: #64748b; font-size: 12px; font-weight: 850; }
.collections-kpis strong { font-size: 21px; color: #0f172a; }
.collections-grid { display: grid; gap: 12px; }
.collections-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collections-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.collections-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.collection-panel, .collection-strategy-card { padding: 16px; min-height: 220px; }
.collection-panel header, .collection-strategy-card header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; }
.collection-list { display: grid; gap: 9px; }
.collection-list div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.collection-list span { color: #334155; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-list strong { color: #0f172a; font-size: 13px; }
.collections-exec-hero { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.collections-exec-hero span { color: #64748b; }
.collections-decision-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.collections-decision-actions button { min-height: 34px; border-radius: 10px; padding: 8px 11px; background: #f8fafc; border: 1px solid #e6ebf2; font-weight: 850; }
.collection-timeline { display: grid; gap: 12px; }
.collection-timeline section { display: grid; gap: 8px; }
.collection-timeline section > strong { color: #64748b; font-size: 12px; }
.collection-timeline div { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid #e6ebf2; }
.collection-timeline span { color: #0f172a; font-weight: 850; }
.collection-timeline small { color: #64748b; }
.collection-strategy-card > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.collection-strategy-card span { color: #64748b; font-weight: 850; }
.collection-strategy-card strong { color: #0f172a; font-weight: 850; }
.collection-invoice-table tr.selected { background: #eef6ff; }
.collection-invoice-table tbody tr.selected td { border-color: #bfdbfe; }
.collection-check { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 7px; font-size: 12px; font-weight: 850; color: #475569; }
.collection-check input, .collection-invoice-table input[type="checkbox"] { width: 16px; min-height: 16px; accent-color: #2563eb; }
.collection-selected-summary { grid-column: 1 / -1; display: grid; gap: 5px; padding: 12px; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; }
.collection-selected-summary strong { color: #0f172a; }
.collection-selected-summary span { color: #475569; font-size: 12px; }
.collections-settings-page { display: grid; gap: 18px; padding: 2px; background: #f3f6fb; color: #111827; }
.collections-settings-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 22px 24px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 22px rgba(15,23,42,.045); }
.collections-settings-header nav { color: #64748b; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.collections-settings-header h2 { margin: 0; color: #0f172a; font-size: 26px; letter-spacing: 0; }
.collections-settings-header p { margin: 6px 0 0; color: #64748b; }
.collections-settings-header > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.collections-settings-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.collections-settings-sidebar { position: sticky; top: 92px; display: grid; gap: 18px; padding: 16px 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 22px rgba(15,23,42,.045); }
.collections-settings-sidebar section { display: grid; gap: 4px; padding: 0 12px 12px; border-bottom: 1px solid #eef2f7; }
.collections-settings-sidebar section:last-child { border-bottom: 0; padding-bottom: 0; }
.collections-settings-sidebar h4 { margin: 0 0 5px; padding: 0 10px; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.collections-settings-sidebar button { min-height: 38px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; border-left: 3px solid transparent; background: transparent; color: #334155; text-align: left; font-weight: 750; }
.collections-settings-sidebar button.active { border-left-color: #2563eb; background: #eff6ff; color: #0f172a; font-weight: 900; }
.collections-settings-sidebar .nav-svg { width: 17px; height: 17px; color: #2563eb; }
.collections-settings-content { display: grid; gap: 16px; min-width: 0; }
.collections-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.collections-settings-grid .collections-settings-card:first-child { grid-column: span 2; }
.collections-settings-card { display: grid; gap: 14px; padding: 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 22px rgba(15,23,42,.045); }
.collections-settings-card header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.collections-settings-card h3 { margin: 0; color: #0f172a; font-size: 17px; }
.collections-settings-card p { margin: 0; }
.collections-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.collections-settings-form label { display: grid; gap: 6px; color: #475569; font-size: 12px; font-weight: 850; }
.collections-settings-form input, .collections-settings-form select { width: 100%; min-height: 40px; border-radius: 8px; border: 1px solid #dbe3ef; background: #fff; color: #0f172a; padding: 8px 10px; font: inherit; }
.collections-settings-form input[type="color"] { padding: 3px; }
.collections-settings-switches, .collections-permission-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.collections-settings-toggle, .collections-permission-matrix label { min-height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; color: #334155; font-weight: 800; }
.collections-settings-toggle input, .collections-permission-matrix input { width: 17px; height: 17px; accent-color: #2563eb; }
.collections-settings-table { display: grid; gap: 10px; }
.collections-settings-table div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 38px; gap: 8px; align-items: center; }
.collections-settings-table input { min-height: 38px; border: 1px solid #dbe3ef; border-radius: 8px; padding: 8px; color: #0f172a; }
.collections-settings-table button { min-height: 38px; border-radius: 8px; background: #eff6ff; color: #2563eb; }
.collections-integration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.topbar-controls { grid-template-columns: repeat(6, minmax(118px, 1fr)) auto !important; }
.ghost-button#logoutButton { display: none; }
.login-footer { font-size: 12px; color: #94a3b8; font-weight: 400; }
@media (max-width: 1440px) {
  .collections-shell { grid-template-columns: 1fr; }
  .collections-nav { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .collections-nav > div { grid-column: 1 / -1; }
  .collections-grid.four, .collections-grid.three, .collections-grid.two, .collections-filterbar, .collections-kpis, .collections-integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collections-settings-layout { grid-template-columns: 1fr; }
  .collections-settings-sidebar { position: static; }
}
@media (max-width: 960px) {
  .collections-nav, .collections-grid.four, .collections-grid.three, .collections-grid.two, .collections-filterbar, .collections-kpis, .collections-exec-hero, .collections-settings-grid, .collections-settings-form, .collections-settings-switches, .collections-permission-matrix, .collections-integration-grid { grid-template-columns: 1fr; }
  .collections-settings-grid .collections-settings-card:first-child { grid-column: auto; }
  .collections-hero { align-items: flex-start; flex-direction: column; }
  .collections-settings-header { flex-direction: column; }
  .collections-settings-table div { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  .collections-settings-page { background: #0f172a; color: #e5e7eb; }
  .collections-settings-header, .collections-settings-sidebar, .collections-settings-card { background: #111827; border-color: #243244; box-shadow: none; }
  .collections-settings-header h2, .collections-settings-card h3 { color: #f8fafc; }
  .collections-settings-header p, .collections-settings-header nav, .collections-settings-sidebar h4 { color: #94a3b8; }
  .collections-settings-sidebar button, .collections-settings-form label, .collections-settings-toggle, .collections-permission-matrix label { color: #cbd5e1; }
  .collections-settings-sidebar button.active { background: rgba(37,99,235,.18); color: #f8fafc; }
  .collections-settings-form input, .collections-settings-form select, .collections-settings-table input { background: #0f172a; border-color: #334155; color: #f8fafc; }
  .collections-settings-toggle, .collections-permission-matrix label { background: #0f172a; border-color: #334155; }
}

/* Salestos UI 3.0 local shell layer */
:root {
  --bg: #F5F8FC;
  --panel: #ffffff;
  --panel-soft: #f8fbff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #DDE6F2;
  --accent: #0B2F63;
  --accent-strong: #071E3D;
  --accent-soft: #eef6ff;
  --danger: #E31E24;
  --warning: #f59e0b;
  --success: #16a34a;
  --sidebar: #071E3D;
  --shadow-soft: 0 8px 22px rgba(15, 23, 42, .045);
  --shadow-lift: 0 18px 45px rgba(15, 23, 42, .10);
}

html,
body,
button,
input,
select,
textarea {
  font-family: Calibri, Carlito, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

body { background: var(--bg) !important; }

.suite-shell,
.suite-shell.sidebar-collapsed,
.suite-shell.sidebar-expanded {
  display: block !important;
  background: var(--bg) !important;
}

.suite-sidebar {
  width: 76px !important;
  padding: 12px 10px !important;
  background: var(--sidebar) !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 10px 0 28px rgba(7,30,61,.12) !important;
  overflow-x: visible !important;
}

.suite-shell.sidebar-expanded .suite-sidebar {
  width: 292px !important;
  padding: 14px 14px !important;
  overflow-x: hidden !important;
}

.suite-main,
.suite-shell.sidebar-collapsed .suite-main {
  margin-left: 76px !important;
  min-height: 100vh !important;
  padding: 0 !important;
  background: var(--bg) !important;
  transition: margin-left .18s ease !important;
}

.suite-shell.sidebar-expanded .suite-main { margin-left: 292px !important; }

.sidebar-brand {
  min-height: 52px !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
}

.suite-shell.sidebar-expanded .sidebar-brand {
  justify-content: flex-start !important;
  padding-right: 42px !important;
}

.sidebar-brand .logo-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.sidebar-brand span:last-of-type,
.sidebar-expanded .sidebar-brand span:last-of-type {
  display: none !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.suite-shell.sidebar-expanded .sidebar-brand span:last-of-type { display: block !important; }

.sidebar-toggle {
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  right: 0 !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}

.sidebar-toggle::before { content: "‹"; font-size: 20px; line-height: 1; }
.sidebar-collapsed .sidebar-toggle::before { content: "›"; }

.sidebar-nav,
.sidebar-bottom {
  gap: 6px !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}

.nav-group {
  width: 100% !important;
  justify-items: stretch !important;
}

.nav-button,
.sidebar-expanded .nav-button {
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  place-items: initial !important;
  gap: 9px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  color: #dbe7f7 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

.sidebar-collapsed .nav-button {
  width: 54px !important;
  height: 44px !important;
  min-height: 44px !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 0 !important;
}

.nav-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  color: #bfdbfe !important;
  background: transparent !important;
}

.nav-svg { width: 18px !important; height: 18px !important; stroke-width: 2 !important; }

.nav-label,
.sidebar-expanded .nav-label {
  display: block !important;
  color: #edf5ff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sidebar-collapsed .nav-label { display: none !important; }

.nav-button:hover,
.nav-button.active {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}

.nav-button.active {
  box-shadow: inset 3px 0 0 var(--danger) !important;
}

.nav-button:hover .nav-icon,
.nav-button.active .nav-icon {
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
}

.nav-submenu {
  display: none !important;
  margin: 4px 0 8px 47px !important;
  padding-left: 9px !important;
  border-left: 1px solid rgba(255,255,255,.13) !important;
  gap: 2px !important;
}

.suite-shell.sidebar-expanded .active-group .nav-submenu,
.suite-shell.sidebar-expanded .nav-group:hover .nav-submenu {
  display: grid !important;
}

.nav-submenu button {
  min-height: 30px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #b9c7d9 !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.nav-submenu button:hover,
.nav-submenu button.active {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}

.suite-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 35 !important;
  margin: 0 !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--line) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
}

.topbar-primary {
  display: grid !important;
  grid-template-columns: auto minmax(240px, 1fr) minmax(520px, auto) !important;
  gap: 14px !important;
  align-items: center !important;
}

.menu-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: var(--accent) !important;
}

.suite-topbar h1 {
  color: var(--accent-strong) !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.topbar-title p {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.topbar-title strong { color: var(--accent) !important; }

.topbar-utility {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) 140px 36px 36px 36px minmax(120px, auto) !important;
  gap: 8px !important;
  align-items: center !important;
}

.topbar-utility input,
.topbar-utility select {
  min-height: 36px !important;
  border-radius: 8px !important;
  border-color: var(--line) !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  padding: 7px 10px !important;
}

.icon-button,
.ghost-button,
.profile-button,
.secondary-button,
.primary-button {
  border-radius: 8px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.primary-button {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(11,47,99,.15) !important;
}

.primary-button:hover { background: var(--accent-strong) !important; }

.secondary-button,
.icon-button,
.ghost-button,
.profile-button {
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.secondary-button:hover,
.icon-button:hover,
.ghost-button:hover,
.profile-button:hover {
  background: var(--accent-soft) !important;
  border-color: #c7d8ee !important;
  transform: translateY(-1px) !important;
}

.icon-button {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}

.profile-button {
  min-height: 36px !important;
  min-width: 118px !important;
  max-width: 168px !important;
  padding: 7px 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notification-button span {
  background: var(--danger) !important;
  color: #ffffff !important;
}

.content-stack {
  padding: 18px 22px 30px !important;
  gap: 16px !important;
}

.bi-header,
.hero-panel,
.panel,
.chart-card,
.stat-card,
.module-card,
.data-card,
.empty-state,
.metric-card,
.score-panel,
.collections-hero,
.collections-exec-hero,
.collections-kpis article,
.collection-panel,
.collection-strategy-card {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-soft) !important;
}

.bi-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  padding: 18px 20px !important;
}

.bi-header .eyebrow {
  color: var(--accent) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.bi-header h2 {
  color: var(--accent-strong) !important;
  font-size: 24px !important;
  margin-bottom: 6px !important;
}

.stat-grid,
.metric-grid,
.collections-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.stat-card,
.metric-card {
  min-height: 92px !important;
  padding: 14px !important;
}

.stat-card::before {
  background: var(--accent-soft) !important;
  border-radius: 8px !important;
}

.stat-card span,
.metric-card small {
  color: var(--muted) !important;
  font-size: 12px !important;
  text-transform: none !important;
}

.stat-card strong,
.metric-card strong {
  color: var(--accent-strong) !important;
  font-size: 22px !important;
}

.metric-icon {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-radius: 8px !important;
}

.filter-bar,
.collections-filterbar,
.collections-toolbar {
  position: sticky !important;
  top: 66px !important;
  z-index: 18 !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-soft) !important;
}

.data-grid-card {
  padding: 0 !important;
  overflow: hidden !important;
}

.data-grid-toolbar,
.data-grid-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--line) !important;
}

.data-grid-footer {
  border-top: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

.data-grid-toolbar > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.data-grid-toolbar strong {
  color: var(--accent-strong) !important;
  font-size: 14px !important;
}

.data-grid-toolbar span {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.data-grid-scroll {
  overflow: auto !important;
  max-width: 100% !important;
}

.data-card table {
  min-width: 860px !important;
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.data-card th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #f8fbff !important;
  color: #475569 !important;
  text-transform: none !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--line) !important;
}

.data-card td {
  color: #1f2937 !important;
  border-bottom: 1px solid #edf2f8 !important;
}

.data-card tr:hover td { background: #f8fbff !important; }

.mission-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.mission-kpi-card {
  min-height: 126px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 18px !important;
  gap: 5px 12px !important;
  align-content: start !important;
  align-items: center !important;
  padding: 17px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  text-align: left !important;
  box-shadow: var(--shadow-soft) !important;
}

.mission-kpi-card::after {
  content: "›";
  grid-column: 3;
  grid-row: 1 / span 3;
  justify-self: end;
  align-self: center;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
}

.mission-kpi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lift) !important;
  border-color: #c7d8ee !important;
}

.mission-kpi-icon {
  grid-row: 1 / span 3;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.mission-kpi-icon .nav-svg {
  width: 20px !important;
  height: 20px !important;
}

.mission-kpi-card strong {
  grid-column: 2;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.mission-kpi-card b {
  grid-column: 2;
  color: var(--accent-strong) !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

.mission-kpi-card small {
  grid-column: 2;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.mission-progress {
  grid-column: 2 / 4;
  width: 100%;
  height: 8px;
  display: block;
  overflow: hidden;
  margin-top: 7px;
  border-radius: 999px;
  background: #edf2f8;
}

.mission-progress em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563EB, #16a34a);
}

.badge {
  border-radius: 999px !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.badge.danger,
.danger { color: var(--danger) !important; background: #fff5f5 !important; }
.badge.warn,
.warn { color: var(--warning) !important; background: #fff8eb !important; }
.badge.success,
.success { color: var(--success) !important; background: #effaf3 !important; }

@media (max-width: 1180px) {
  .topbar-primary { grid-template-columns: auto minmax(180px, 1fr) !important; }
  .topbar-utility { grid-column: 1 / -1; grid-template-columns: minmax(180px, 1fr) 130px repeat(3, 36px) minmax(110px, auto) !important; }
  .stat-grid,
  .metric-grid,
  .mission-kpi-grid,
  .collections-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .suite-sidebar,
  .suite-shell.sidebar-collapsed .suite-sidebar {
    transform: translateX(-100%) !important;
    width: 292px !important;
  }
  .suite-shell.sidebar-expanded .suite-sidebar { transform: translateX(0) !important; }
  .suite-main,
  .suite-shell.sidebar-collapsed .suite-main,
  .suite-shell.sidebar-expanded .suite-main { margin-left: 0 !important; }
  .topbar-primary,
  .topbar-utility,
  .bi-header,
  .filter-bar,
  .collections-filterbar { grid-template-columns: 1fr !important; }
  .topbar-utility { display: grid !important; }
  .stat-grid,
  .metric-grid,
  .mission-kpi-grid,
  .collections-kpis { grid-template-columns: 1fr !important; }
}

/* Sales 360 UI 4.0 Mission Control */
#suiteShell[data-route^="sales-360"] .suite-sidebar,
#suiteShell[data-route="sales-settings"] .suite-sidebar {
  width: 76px !important;
  padding: 12px 10px !important;
  overflow: hidden !important;
}

#suiteShell[data-route^="sales-360"] .suite-main,
#suiteShell[data-route="sales-settings"] .suite-main {
  margin-left: 76px !important;
}

#suiteShell[data-route^="sales-360"] .sidebar-brand,
#suiteShell[data-route="sales-settings"] .sidebar-brand {
  justify-content: center !important;
  padding: 0 !important;
}

#suiteShell[data-route^="sales-360"] .sidebar-brand span:last-of-type,
#suiteShell[data-route^="sales-360"] .nav-label,
#suiteShell[data-route^="sales-360"] .nav-submenu,
#suiteShell[data-route^="sales-360"] .sidebar-toggle,
#suiteShell[data-route="sales-settings"] .sidebar-brand span:last-of-type,
#suiteShell[data-route="sales-settings"] .nav-label,
#suiteShell[data-route="sales-settings"] .nav-submenu,
#suiteShell[data-route="sales-settings"] .sidebar-toggle {
  display: none !important;
}

#suiteShell[data-route^="sales-360"] .nav-button,
#suiteShell[data-route="sales-settings"] .nav-button {
  width: 54px !important;
  height: 44px !important;
  min-height: 44px !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 0 !important;
}

#suiteShell[data-route^="sales-360"] .content-stack,
#suiteShell[data-route="sales-settings"] .content-stack {
  padding: 16px 18px 24px !important;
}

.topbar-filter-button {
  width: auto;
  min-width: 116px;
  min-height: 40px;
  border-radius: 8px;
  padding: 0 14px;
  white-space: nowrap;
}

.workspace-header {
  position: sticky;
  top: 72px;
  z-index: 24;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 13px 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--workspace-accent);
  border-radius: 8px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.workspace-header:not(.sticky) {
  position: relative;
  top: auto;
}

.workspace-header-title {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.workspace-header-title nav {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.workspace-header-title h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 24px;
  line-height: 1.1;
}

.workspace-header-title p {
  margin: 5px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.workspace-header-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--workspace-accent) 12%, white);
  color: var(--workspace-accent);
}

.workspace-header-icon .nav-svg {
  width: 22px !important;
  height: 22px !important;
}

.workspace-header-actions,
.workspace-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workspace-header-actions .primary-button,
.workspace-header-actions .secondary-button,
.workspace-action-bar .primary-button,
.workspace-action-bar .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
}

.workspace-header-search {
  grid-column: 1;
  display: grid;
  gap: 4px;
  max-width: 420px;
}

.workspace-header-search span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.workspace-header-search input {
  min-height: 36px;
  border-radius: 8px;
}

.workspace-kpi-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.workspace-kpi {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f8fbff;
  text-align: left;
}

button.workspace-kpi {
  cursor: pointer;
}

.workspace-kpi small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.workspace-kpi strong {
  color: var(--accent-strong);
  font-size: 18px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.workspace-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fbff;
  color: #475569;
  text-align: center;
}

.workspace-empty-state > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--accent-strong);
}

.workspace-empty-state h3,
.workspace-empty-state p {
  margin: 0;
}

.permission-aware-menu {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.permission-aware-menu section {
  display: grid;
  gap: 6px;
}

.permission-aware-menu h3 {
  margin: 8px 8px 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.permission-aware-menu button {
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.permission-aware-menu button.active,
.permission-aware-menu button:hover {
  background: #eef6ff;
  color: var(--accent-strong);
}

.more-filters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.command-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.guided-command-desk {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
}

.command-main,
.command-sidebar {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.command-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: stretch;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--command-accent);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.guided-command-desk .command-opening {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
}

.command-opening h2 {
  margin: 0 0 7px;
  color: var(--accent-strong);
  font-size: 28px;
}

.command-opening h3 {
  margin: 0 0 7px;
  color: #1f2937;
  font-size: 18px;
}

.command-opening span,
.command-opening small,
.command-brief span,
.command-brief li {
  color: var(--muted);
  line-height: 1.45;
}

.command-opening aside {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border-radius: 8px;
  background: #f8fbff;
}

.command-snapshot header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.command-snapshot > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.command-snapshot > div span {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #e8f0f9;
  border-radius: 8px;
  background: #ffffff;
}

.command-snapshot p {
  margin: 8px 0 0;
  color: var(--muted);
}

.command-opening aside strong,
.command-status-grid span,
.command-workspace-card em {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.command-opening aside strong.healthy,
.command-status-grid .healthy span,
.command-workspace-card.healthy em {
  background: #effaf3;
  color: var(--success);
}

.command-opening aside strong.attention,
.command-status-grid .attention-required span,
.command-status-grid .attention span,
.command-workspace-card.attention em,
.command-workspace-card.attention-required em {
  background: #fff8eb;
  color: var(--warning);
}

.command-opening aside strong.critical,
.command-status-grid .critical span,
.command-workspace-card.critical em {
  background: #fff5f5;
  color: var(--danger);
}

.command-opening aside b {
  color: var(--accent-strong);
  font-size: 30px;
  line-height: 1;
}

.command-snapshot > div b {
  color: var(--accent-strong);
  font-size: 17px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.command-brief,
.command-status-grid button,
.command-workspace-card,
.command-side-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.command-brief {
  padding: 16px;
}

.command-brief.compact p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.command-brief header,
.command-workspace-group header,
.command-side-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.command-brief h3,
.command-workspace-group h3,
.command-side-card h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 15px;
}

.command-brief ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.command-actions .primary-button,
.command-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
}

.command-question {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.command-question h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 22px;
}

.command-review-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.command-review-options .primary-button,
.command-review-options .secondary-button {
  min-height: 72px;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  box-shadow: none;
}

.command-review-options .primary-button svg,
.command-review-options .secondary-button svg {
  flex: 0 0 auto;
}

.command-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.command-status-grid button {
  min-height: 116px;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  text-align: left;
}

.command-status-grid button:hover,
.command-workspace-card:hover,
.command-side-card button:hover {
  transform: translateY(-2px);
  border-color: #c7d8ee;
  box-shadow: var(--shadow-lift);
}

.command-status-grid strong,
.command-workspace-card strong,
.command-side-card strong {
  color: var(--accent-strong);
}

.command-status-grid b,
.command-workspace-card b {
  color: #1f2937;
  font-size: 22px;
  overflow-wrap: anywhere;
}

.command-status-grid small,
.command-workspace-card small,
.command-workspace-card footer,
.command-side-card small,
.command-side-card p {
  color: var(--muted);
}

.command-launcher,
.command-workspace-group {
  display: grid;
  gap: 12px;
}

.command-workspace-group > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.command-workspace-card {
  min-height: 136px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 14px;
}

.command-workspace-card header,
.command-workspace-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.command-workspace-card header span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.command-workspace-card footer .secondary-button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 10px;
}

.command-side-card {
  padding: 14px;
}

.command-side-card > div {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.command-side-card button,
.command-palette button {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f8fbff;
  text-align: left;
}

.command-palette {
  display: grid;
  gap: 12px;
}

.command-palette-header {
  display: grid;
  gap: 8px;
}

.command-palette-header input {
  min-height: 46px;
  border: 1px solid #D9E5F4;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 14px;
}

.command-palette-header p {
  margin: 0;
  color: #64748B;
  font-size: 12px;
}

.command-palette #commandPaletteResults {
  display: grid;
  gap: 10px;
}

.command-palette #commandPaletteResults button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
}

.command-palette #commandPaletteResults button span {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #EEF4FF;
  color: #2563EB;
}

.command-palette #commandPaletteResults button strong {
  color: #0F172A;
  font-size: 14px;
}

.command-palette #commandPaletteResults button small {
  color: #64748B;
  font-size: 12px;
}

.command-palette-empty {
  margin: 6px 0 0;
}

.command-palette input {
  border-radius: 8px;
}

.command-palette > div {
  display: grid;
  gap: 8px;
}

.command-palette button {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
}

.command-palette button span {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.command-palette button small {
  color: var(--muted);
}

.sales360-workspace-page {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.sales360-workspace-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sales360-filters {
  display: grid;
  grid-template-columns: 170px 150px minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.sales360-filters label {
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.sales360-filters input {
  min-height: 38px;
  border-radius: 8px;
  text-transform: none;
}

.sales360-filters button {
  min-height: 38px;
  border-radius: 8px;
}

.sales360-operating-hero {
  grid-template-columns: minmax(220px, .72fr) minmax(360px, 1.35fr) minmax(230px, .8fr);
}

.sales360-operating-hero .sales360-mission-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales360-operating-hero .sales360-mission-grid button {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 11px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f8fbff;
  text-align: left;
}

.sales360-operating-hero .sales360-mission-grid button:hover {
  background: var(--accent-soft);
  border-color: #c7d8ee;
}

.sales360-business-section > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales360-operating-widget {
  min-height: 148px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.sales360-operating-widget:hover {
  transform: translateY(-2px);
  border-color: #c7d8ee;
  box-shadow: var(--shadow-lift);
}

.sales360-operating-widget header,
.sales360-operating-widget footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sales360-operating-widget header span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.sales360-operating-widget header strong {
  flex: 1;
  color: var(--accent-strong);
  font-size: 14px;
}

.sales360-operating-widget b {
  color: #0f172a;
  font-size: 25px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.sales360-operating-widget small,
.sales360-operating-widget em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.sales360-operating-widget footer .secondary-button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 10px;
}

.sales360-page-block {
  display: grid;
  gap: 10px;
}

.sales360-page-block > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sales360-page-block h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 16px;
}

.sales360-insight-block,
.sales360-activity-block {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.sales360-insight-block button,
.sales360-activity-block article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f8fbff;
  text-align: left;
}

.sales360-insight-block button + button,
.sales360-activity-block article + article {
  margin-top: 8px;
}

.sales360-insight-block strong,
.sales360-activity-block strong {
  color: var(--accent-strong);
  font-size: 14px;
}

.sales360-insight-block small,
.sales360-activity-block small {
  color: var(--muted);
  font-size: 12px;
}

.sales360-person-picker,
.sales360-mode-banner {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.sales360-mode-banner span {
  color: var(--muted);
  font-weight: 800;
}

.sales360-section-switcher {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.sales360-section-switcher button {
  min-height: 48px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  text-align: left;
  font-weight: 900;
}

.sales360-section-switcher button.active,
.sales360-section-switcher button:hover {
  border-color: #c7d8ee;
  background: var(--accent-soft);
  color: var(--accent);
}

.sales-settings-approved {
  display: grid;
  gap: 18px;
  max-width: 1560px;
  margin: 0 auto;
  color: #0f1d3d;
}

.sales-settings-hero {
  display: grid;
  gap: 22px;
}

.sales-settings-breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 30px;
  color: #344260;
  font-size: 13px;
  font-weight: 800;
}

.sales-settings-breadcrumb button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #344260;
  font: inherit;
}

.sales-settings-breadcrumb svg {
  width: 15px;
  height: 15px;
}

.sales-settings-title-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 4px;
}

.sales-settings-title-row h2 {
  margin: 0 0 3px;
  color: #071a44;
  font-size: 28px;
  letter-spacing: 0;
}

.sales-settings-title-row p {
  margin: 0;
  color: #4a5874;
  font-size: 15px;
}

.sales-settings-hero-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf2ff;
  color: #1268f3;
  border: 1px solid #d9e7ff;
}

.sales-settings-hero-icon svg {
  width: 31px;
  height: 31px;
  stroke-width: 2.2;
}

.sales-settings-recommendation,
.sales-settings-ai-card,
.sales-settings-module-strip,
.sales-settings-panel {
  border: 1px solid #dde6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.sales-settings-recommendation {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 96px;
  padding: 18px 24px;
  border-color: #ffd9bf;
  background: #fffdfb;
}

.sales-settings-recommendation > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0e4;
  color: #ff6a00;
  border: 1px solid #ffd4b6;
}

.sales-settings-recommendation small {
  display: block;
  margin-bottom: 5px;
  color: #ff6a00;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
}

.sales-settings-recommendation strong {
  display: block;
  color: #101b3a;
  font-size: 17px;
  margin-bottom: 3px;
}

.sales-settings-recommendation p {
  margin: 0;
  color: #42506c;
  font-size: 14px;
}

.sales-settings-recommendation .primary-button {
  min-height: 40px;
  border-radius: 8px;
  background: #ff6a00;
  border-color: #ff6a00;
  padding: 0 18px;
  gap: 9px;
}

.sales-settings-recommendation .primary-button svg {
  width: 15px;
  height: 15px;
}

.sales-settings-ai-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.sales-settings-ai-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
}

.sales-settings-ai-input input {
  width: 100%;
  min-height: 52px;
  border: 1px solid #dbe5f2;
  border-radius: 999px;
  background: #fbfdff;
  color: #1f2d46;
  padding: 0 20px;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
}

.sales-settings-ai-input button {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #0b3478;
  color: #fff;
  box-shadow: 0 9px 18px rgba(11, 52, 120, .22);
}

.sales-settings-ai-input button svg {
  width: 21px;
  height: 21px;
}

.sales-settings-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sales-settings-ai-chip {
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid #dbe5f2;
  border-radius: 999px;
  background: #fff;
  color: #31415f;
  font-size: 13px;
  font-weight: 800;
}

.sales-settings-module-strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(86px, 1fr));
  gap: 18px;
  padding: 22px;
}

.sales-settings-module-tile {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: #fff;
  color: #101b3a;
  text-align: center;
}

.sales-settings-module-tile:disabled {
  cursor: default;
}

.sales-settings-module-tile > span,
.sales-settings-activity-row > span,
.sales-settings-quick-row > span {
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
}

.sales-settings-module-tile > span {
  width: 68px;
  height: 68px;
  border-radius: 17px;
}

.sales-settings-module-tile svg {
  width: 27px;
  height: 27px;
  stroke-width: 2.1;
}

.sales-settings-module-tile strong {
  color: #0b1e44;
  font-size: 13px;
  line-height: 1.2;
}

.sales-settings-module-tile small {
  max-width: 118px;
  color: #52617d;
  font-size: 11.5px;
  line-height: 1.45;
}

.sales-settings-module-tile.tone-blue,
.sales-settings-module-tile.tone-green,
.sales-settings-module-tile.tone-orange,
.sales-settings-module-tile.tone-red,
.sales-settings-module-tile.tone-purple {
  background: #fff;
  border-color: transparent !important;
}

.tone-blue,
.sales-settings-module-tile.tone-blue > span { background: #eaf2ff; color: #1268f3; border-color: #d7e6ff !important; }
.tone-green,
.sales-settings-module-tile.tone-green > span { background: #e9f8ef; color: #16a34a; border-color: #cbeed7 !important; }
.tone-orange,
.sales-settings-module-tile.tone-orange > span { background: #fff4df; color: #d97706; border-color: #f8dfad !important; }
.tone-red,
.sales-settings-module-tile.tone-red > span { background: #ffeaea; color: #e23d4d; border-color: #ffd1d4 !important; }
.tone-purple,
.sales-settings-module-tile.tone-purple > span { background: #f2eaff; color: #7c3aed; border-color: #e2d3ff !important; }

.sales-settings-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr);
  gap: 16px;
}

.sales-settings-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.sales-settings-panel h3 {
  margin: 0;
  color: #0b1e44;
  font-size: 16px;
}

.sales-settings-activity-list,
.sales-settings-quick-list {
  display: grid;
  gap: 6px;
}

.sales-settings-activity-row,
.sales-settings-quick-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border: 1px solid #e3ebf6;
  border-radius: 9px;
  background: #fff;
}

.sales-settings-activity-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  padding: 8px 12px;
}

.sales-settings-activity-row > span,
.sales-settings-quick-row > span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.sales-settings-activity-row strong,
.sales-settings-quick-row strong {
  display: block;
  color: #0b1e44;
  font-size: 13px;
}

.sales-settings-activity-row small {
  display: block;
  color: #52617d;
  font-size: 12px;
}

.sales-settings-activity-row time {
  color: #52617d;
  font-size: 12px;
  white-space: nowrap;
}

.sales-settings-quick-row {
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  padding: 8px 12px;
  text-align: left;
}

.sales-settings-quick-row i {
  color: #0b1e44;
}

.sales-settings-quick-row i svg {
  width: 16px;
  height: 16px;
}

.sales-settings-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #1268f3;
  font-weight: 900;
  padding: 2px 0;
}

.sales-settings-link svg {
  width: 14px;
  height: 14px;
}

.sales-settings-safe-state {
  padding: 14px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 1180px) {
  .sales-settings-module-strip {
    grid-template-columns: repeat(6, minmax(112px, 1fr));
  }
}

@media (max-width: 780px) {
  .sales-settings-approved {
    gap: 14px;
  }

  .sales-settings-breadcrumb {
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
  }

  .sales-settings-title-row {
    gap: 14px;
    align-items: flex-start;
  }

  .sales-settings-title-row h2 {
    font-size: 23px;
  }

  .sales-settings-hero-icon {
    width: 50px;
    height: 50px;
  }

  .sales-settings-recommendation {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 14px;
  }

  .sales-settings-recommendation > span {
    width: 42px;
    height: 42px;
  }

  .sales-settings-recommendation .primary-button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .sales-settings-ai-input {
    grid-template-columns: minmax(0, 1fr) 46px;
  }

  .sales-settings-ai-input input {
    min-height: 46px;
    padding: 0 14px;
    font-size: 13px;
  }

  .sales-settings-ai-input button {
    width: 44px;
    height: 44px;
  }

  .sales-settings-ai-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .sales-settings-ai-chip {
    flex: 0 0 auto;
  }

  .sales-settings-module-strip {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding: 16px;
    scroll-snap-type: x proximity;
  }

  .sales-settings-module-tile {
    flex: 0 0 116px;
    scroll-snap-align: start;
  }

  .sales-settings-bottom-grid {
    grid-template-columns: 1fr;
  }

  .sales-settings-activity-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .sales-settings-activity-row time {
    grid-column: 2;
  }
}

.sales360-section-switcher small {
  color: var(--muted);
  font-size: 11px;
}

.salesperson-focus-page {
  display: grid;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4px 0 36px;
}

.salesperson-focus-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid #E4EBF5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
}

.salesperson-focus-header p,
.salesperson-focus-panel header p {
  margin: 0;
  color: #0B2F63;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.salesperson-focus-header h2 {
  margin: 6px 0;
  color: #0B1220;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 650;
  line-height: 1.05;
}

.salesperson-focus-header span {
  color: #667085;
  font-size: 14px;
}

.salesperson-context-label {
  display: inline-flex;
  width: max-content;
  min-height: 26px;
  align-items: center;
  margin-top: 10px;
  padding: 0 10px;
  border: 1px solid #DCE6F2;
  border-radius: 999px;
  background: #F8FBFF;
  color: #0B2F63;
  font-size: 12px;
  font-weight: 650;
}

.salesperson-focus-controls {
  min-width: min(420px, 100%);
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

.salesperson-focus-picker {
  min-width: 250px;
  display: grid;
  gap: 6px;
  color: #475467;
  font-size: 12px;
  font-weight: 600;
}

.salesperson-focus-picker select {
  min-height: 42px;
  border-radius: 12px;
  border-color: #DCE6F2;
  background: #ffffff;
}

.salesperson-focus-picker input {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid #DCE6F2;
  background: #ffffff;
  color: #0B1220;
}

.salesperson-focus-controls .salesperson-focus-controls {
  min-width: 0;
}

.salesperson-selector-list {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #E4EBF5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
}

.salesperson-selector-list header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.salesperson-selector-list header p {
  margin: 0;
  color: #0B2F63;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.salesperson-selector-list header span {
  color: #667085;
  font-size: 12px;
}

.salesperson-selector-list > div {
  display: grid;
  gap: 8px;
}

.salesperson-selector-list button {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #EEF2F7;
  border-radius: 12px;
  background: #ffffff;
  color: #0B1220;
  box-shadow: none;
  text-align: left;
}

.salesperson-selector-list button:hover {
  border-color: #BBD2F0;
  background: #F8FBFF;
  color: #2563EB;
}

.salesperson-selector-list button strong {
  color: inherit;
  font-size: 14px;
  font-weight: 650;
}

.salesperson-selector-list button span {
  grid-column: 1;
  color: #667085;
  font-size: 12px;
}

.salesperson-selector-list button em {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #0B2F63;
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.salesperson-summary-card {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid #E4EBF5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
}

.salesperson-summary-card h3 {
  margin: 0;
  color: #0B1220;
  font-size: 16px;
  font-weight: 650;
}

.salesperson-summary-card p {
  margin: 0;
  max-width: 920px;
  color: #344054;
  font-size: 14px;
  line-height: 1.55;
}

.salesperson-performance-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.salesperson-performance-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid #E1E9F4;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #344054;
}

.salesperson-performance-pill span {
  font-size: 12px;
  font-weight: 600;
}

.salesperson-performance-pill strong {
  font-size: 12px;
  font-weight: 650;
}

.salesperson-performance-pill.healthy {
  border-color: #BFE8D0;
  color: #166534;
}

.salesperson-performance-pill.attention {
  border-color: #FED7AA;
  color: #9A3412;
}

.salesperson-performance-pill.pending {
  border-color: #FDE68A;
  color: #92400E;
}

.salesperson-performance-pill.not-enough-data {
  border-color: #E4EBF5;
  color: #667085;
}

.salesperson-more-actions {
  position: relative;
}

.salesperson-more-actions summary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #DCE6F2;
  border-radius: 12px;
  background: #ffffff;
  color: #0B2F63;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  list-style: none;
}

.salesperson-more-actions summary::-webkit-details-marker {
  display: none;
}

.salesperson-more-actions[open] summary {
  border-color: #BBD2F0;
  color: #2563EB;
}

.salesperson-more-actions div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 18;
  min-width: 190px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #E4EBF5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .14);
}

.salesperson-more-actions button {
  min-height: 34px;
  justify-content: flex-start;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #0B1220;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
}

.salesperson-more-actions button:hover {
  background: #F4F7FB;
  color: #2563EB;
}

.salesperson-focus-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.salesperson-focus-summary div {
  min-width: 150px;
  flex: 1 1 150px;
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid #E8EEF7;
  border-radius: 12px;
  background: #ffffff;
}

.salesperson-focus-summary small {
  color: #667085;
  font-size: 12px;
}

.salesperson-focus-summary strong {
  color: #0B1220;
  font-size: 17px;
  font-weight: 650;
}

.salesperson-focus-summary span {
  color: #667085;
  font-size: 12px;
}

.salesperson-focus-sections {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
}

.salesperson-focus-sections::-webkit-scrollbar {
  display: none;
}

.salesperson-focus-sections button {
  min-height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #E1E9F4;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #344054;
  box-shadow: none;
  font-size: 13px;
  font-weight: 550;
}

.salesperson-focus-sections button.active,
.salesperson-focus-sections button:hover {
  border-color: #BBD2F0;
  background: #F4F7FB;
  color: #2563EB;
}

.salesperson-focus-sections small {
  color: #667085;
  font-size: 11px;
}

.salesperson-focus-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 16px;
  align-items: start;
}

.salesperson-focus-panel,
.salesperson-focus-aside,
.salesperson-focus-empty {
  border: 1px solid #E4EBF5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
}

.salesperson-focus-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid #EEF2F7;
}

.salesperson-focus-panel h3 {
  margin: 4px 0 0;
  color: #0B1220;
  font-size: 20px;
  font-weight: 650;
}

.salesperson-focus-panel header > span {
  color: #667085;
  font-size: 12px;
}

.salesperson-focus-list {
  display: grid;
}

.salesperson-focus-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #F0F4F8;
}

.salesperson-focus-list article:last-child {
  border-bottom: 0;
}

.salesperson-focus-list strong {
  color: #0B1220;
  font-size: 14px;
  font-weight: 600;
}

.salesperson-focus-list small {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
}

.salesperson-focus-list em {
  color: #0B2F63;
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.salesperson-focus-aside {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.salesperson-focus-aside h3 {
  margin: 0;
  color: #0B1220;
  font-size: 16px;
  font-weight: 650;
}

.salesperson-focus-aside p {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}

.salesperson-focus-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 34px 22px;
  color: #667085;
  text-align: center;
}

.salesperson-focus-empty.large {
  min-height: 280px;
  align-content: center;
}

.salesperson-focus-empty strong {
  color: #0B1220;
  font-size: 16px;
}

@media (max-width: 980px) {
  .salesperson-focus-header,
  .salesperson-focus-body {
    grid-template-columns: 1fr;
  }

  .salesperson-focus-controls {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .salesperson-focus-picker {
    flex: 1 1 260px;
  }
}

.sales360-workspace-header {
  position: sticky;
  top: 72px;
  z-index: 24;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 13px 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--workspace-accent);
  border-radius: 8px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.sales360-workspace-title {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.sales360-workspace-title nav {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales360-workspace-title h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 24px;
  line-height: 1.1;
}

.sales360-workspace-title p {
  margin: 5px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.sales360-workspace-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--workspace-accent) 12%, white);
  color: var(--workspace-accent);
}

.sales360-workspace-icon .nav-svg {
  width: 22px !important;
  height: 22px !important;
}

.sales360-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.sales360-workspace-search {
  grid-column: 1;
  display: grid;
  gap: 4px;
  max-width: 420px;
}

.sales360-workspace-search span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.sales360-workspace-search input {
  min-height: 36px;
  border-radius: 8px;
}

.sales360-workspace-kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.sales360-workspace-kpis article {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f8fbff;
}

.sales360-workspace-kpis small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales360-workspace-kpis strong {
  color: var(--accent-strong);
  font-size: 18px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.sales360-os {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 326px;
  gap: 16px;
  align-items: start;
}

.sales360-menu {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.sales360-menu section {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f8;
}

.sales360-menu section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sales360-menu h3 {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sales360-menu button {
  min-height: 36px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 7px;
  background: transparent;
  color: #334155;
  text-align: left;
  font-weight: 800;
}

.sales360-menu button:hover,
.sales360-menu button.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.sales360-menu .nav-svg {
  width: 17px !important;
  height: 17px !important;
}

.sales360-center,
.sales360-right-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sales360-mission-hero {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr) minmax(230px, .8fr);
  gap: 16px;
  align-items: center;
  min-height: 184px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.sales360-mission-hero h2 {
  margin: 0 0 6px;
  color: var(--accent-strong);
  font-size: 28px;
  line-height: 1.08;
}

.sales360-mission-hero span {
  color: var(--muted);
  font-weight: 800;
}

.sales360-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sales360-mission-grid div {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 11px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f8fbff;
}

.sales360-mission-grid small,
.sales360-workspace-card small,
.sales360-workspace-card em,
.sales360-side-panel small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.sales360-mission-grid strong {
  color: var(--accent-strong);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.sales360-mission-action {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.sales360-mission-action strong {
  color: #334155;
  line-height: 1.4;
}

.sales360-workspace-section {
  display: grid;
  gap: 10px;
}

.sales360-workspace-section header h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 16px;
}

.sales360-workspace-section > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sales360-workspace-card {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: start;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.sales360-workspace-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: #c7d8ee;
}

.sales360-workspace-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.sales360-workspace-card strong,
.sales360-side-panel strong {
  display: block;
  color: var(--accent-strong);
  font-size: 14px;
}

.sales360-workspace-card b {
  display: block;
  margin: 7px 0 3px;
  color: #0f172a;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.sales360-workspace-card em {
  position: absolute;
  left: 15px;
  bottom: 13px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f8fbff;
  font-style: normal;
}

.sales360-workspace-card i {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #94a3b8;
  font-style: normal;
  font-size: 22px;
}

.sales360-side-panel {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.sales360-side-panel header h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 15px;
}

.sales360-side-panel > div {
  display: grid;
  gap: 7px;
}

.sales360-side-panel button {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f8fbff;
  text-align: left;
}

.sales360-side-panel button:hover {
  background: var(--accent-soft);
  border-color: #c7d8ee;
}

.sales360-side-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1500px) {
  .sales360-os {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .sales360-right-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sales360-workspace-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .sales360-os,
  .sales360-workspace-page,
  .command-desk,
  .command-opening,
  .sales360-mission-hero,
  .sales360-workspace-section > div,
  .sales360-right-rail,
  .workspace-header,
  .sales360-workspace-header {
    grid-template-columns: 1fr;
  }
  .workspace-header-actions,
  .workspace-action-bar,
  .sales360-workspace-actions {
    justify-content: flex-start;
  }
  .workspace-header-search,
  .sales360-workspace-search {
    max-width: none;
  }
  .workspace-kpi-strip,
  .sales360-workspace-kpis {
    grid-template-columns: 1fr;
  }
  .permission-aware-menu,
  .sales360-menu {
    position: static;
    max-height: none;
  }
  .more-filters-grid {
    grid-template-columns: 1fr;
  }
  .sales360-filters,
  .sales360-person-picker,
  .sales360-mode-banner,
  .sales360-section-switcher {
    grid-template-columns: 1fr;
  }
  .command-status-grid,
  .command-workspace-group > div,
  .command-review-options,
  .command-snapshot > div {
    grid-template-columns: 1fr;
  }
  .sales360-operating-hero .sales360-mission-grid,
  .sales360-business-section > div {
    grid-template-columns: 1fr;
  }
}

/* Salestos Design Language 1.0 foundation */
:root {
  --bg: #F6F8FB;
  --panel: #ffffff;
  --panel-soft: #F9FBFE;
  --ink: #0F172A;
  --muted: #667085;
  --line: #DCE6F2;
  --accent: #0B2F63;
  --accent-strong: #071E3D;
  --accent-soft: #EAF2FF;
  --danger: #E31E24;
  --warning: #B7791F;
  --success: #15803D;
  --sidebar: #071E3D;
  --shadow-soft: 0 8px 24px rgba(7, 30, 61, .055);
  --shadow-lift: 0 20px 60px rgba(7, 30, 61, .11);
}

html,
body,
button,
input,
select,
textarea {
  font-family: Calibri, Aptos, "Segoe UI", sans-serif !important;
  font-size: 15px;
  letter-spacing: 0 !important;
}

body {
  background: var(--bg) !important;
  color: var(--ink);
}

h1 { font-size: 28px; line-height: 1.12; }
h2 { font-size: 23px; line-height: 1.18; }
h3 { font-size: 16px; line-height: 1.25; }

.suite-sidebar {
  background: var(--sidebar) !important;
}

.sidebar-brand .logo-mark,
#brandMark.logo-mark {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
  object-fit: contain !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: transparent !important;
  box-shadow: 0 8px 18px rgba(7, 30, 61, .14) !important;
}

.suite-shell.sidebar-expanded .sidebar-brand span:last-of-type {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 900 !important;
}

.primary-button,
.login-card button,
.login-submit,
.tabbar button.active {
  background: linear-gradient(135deg, #0B2F63, #174B8F) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(11, 47, 99, .20) !important;
}

.nav-button.active,
.nav-button:hover {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}

.nav-button.active {
  box-shadow: inset 3px 0 0 #7FB3FF !important;
}

.nav-icon,
.workspace-header-icon,
.command-workspace-card header span,
.sales360-workspace-card > span,
.sales360-operating-widget header span,
.command-palette button span,
.launch-card span,
.launch-action span,
.quick-access-card span,
.public-app-card span,
.tile-red span,
.launch-activity span.app-rose,
.metric-icon {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.badge.danger,
.danger,
.error,
.notification-button span {
  color: var(--danger) !important;
}

.notification-button span {
  background: #FFF1F2 !important;
}

.command-desk,
.workspace-header,
.sales360-workspace-page,
.collections-page {
  color: var(--ink);
}

/* SalesOS assistant-style Command Desk */
html,
body,
button,
input,
select,
textarea {
  font-family: "Sora", "Inter", Calibri, Aptos, "Segoe UI", sans-serif !important;
}

.guided-command-desk {
  max-width: 1220px;
}

.guided-command-desk .command-main {
  gap: 18px;
}

.command-executive-brief {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) !important;
  padding: 30px !important;
  border-left-width: 5px !important;
}

.command-executive-brief h2 {
  margin: 0 0 18px;
  color: var(--accent-strong);
  font-size: 36px;
  line-height: 1.08;
  font-weight: 850;
}

.command-executive-brief p:not(.eyebrow) {
  max-width: 880px;
  margin: 0;
  color: #26364D;
  font-size: 20px;
  line-height: 1.72;
  font-weight: 500;
}

.command-executive-brief .eyebrow,
.command-question .eyebrow,
.command-recommendation .eyebrow {
  color: #4B6384;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em !important;
}

.command-snapshot {
  background: #F8FBFF !important;
}

.command-snapshot > div {
  grid-template-columns: 1fr !important;
}

.command-snapshot > div span {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.command-snapshot > div b {
  font-size: 18px !important;
}

.command-recommendation,
.command-summary,
.command-priority-grid article {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.command-recommendation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  border-left: 5px solid var(--success);
}

.command-recommendation.attention {
  border-left-color: var(--warning);
}

.command-recommendation h3 {
  margin: 0 0 8px;
  color: var(--accent-strong);
  font-size: 25px;
  line-height: 1.16;
}

.command-recommendation span,
.command-summary p,
.command-priority-grid p,
.command-priority-grid div span {
  color: #4B5870;
  font-size: 15px;
  line-height: 1.55;
}

.command-summary {
  padding: 21px 24px;
}

.command-summary header,
.command-priority-grid header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.command-summary h3,
.command-priority-grid h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 20px;
}

.command-summary p {
  margin: 0;
  max-width: 920px;
}

.command-priority-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.command-priority-grid article {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.command-priority-grid div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #E8EEF7;
  border-radius: 12px;
  background: #F9FBFE;
}

.command-priority-grid div.critical {
  border-color: #F7D9DF;
  background: #FFF7F8;
}

.command-priority-grid div.warning {
  border-color: #F4E4BD;
  background: #FFFBF0;
}

.command-priority-grid div.healthy {
  border-color: #CFEAD8;
  background: #F3FBF6;
}

.command-priority-grid div strong {
  color: var(--accent-strong);
  font-size: 14px;
}

.command-question {
  padding: 20px 22px !important;
  border-radius: 14px !important;
}

.command-review-options {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.command-shortcut {
  min-height: 84px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #E3EBF6;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #F9FBFE 100%);
  color: var(--accent-strong);
  text-align: left;
  box-shadow: 0 8px 18px rgba(7, 30, 61, .045);
}

.command-shortcut:hover {
  transform: translateY(-2px);
  border-color: #BBD2F0;
  box-shadow: var(--shadow-lift);
}

.command-shortcut span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.command-shortcut strong {
  color: var(--accent-strong);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .command-executive-brief,
  .command-recommendation,
  .command-priority-grid,
  .command-review-options {
    grid-template-columns: 1fr !important;
  }
  .command-executive-brief h2 {
    font-size: 30px;
  }
  .command-executive-brief p:not(.eyebrow) {
    font-size: 17px;
  }
}

/* SalesTOS SDL 2.0 Home Screen */
#suiteShell[data-route="platform-home"] {
  background: #F8FAFC !important;
}

#suiteShell[data-route="sales-360"] {
  background: #F8FAFC !important;
}

#suiteShell[data-route="platform-home"] .suite-sidebar {
  display: none !important;
}

#suiteShell[data-route="sales-360"] .suite-sidebar {
  display: none !important;
}

#suiteShell[data-route="collections-360"] .suite-sidebar {
  display: none !important;
}

#suiteShell[data-route="sales-360-salesperson"] .suite-sidebar,
#suiteShell[data-route="sales-360-employee-detail"] .suite-sidebar {
  display: none !important;
}

#suiteShell[data-route="platform-home"] .suite-main {
  margin-left: 0 !important;
  background: #F8FAFC !important;
}

#suiteShell[data-route="sales-360"] .suite-main {
  margin-left: 0 !important;
  background: #F8FAFC !important;
}

#suiteShell[data-route="collections-360"] .suite-main {
  margin-left: 0 !important;
  background: #F8FAFC !important;
}

#suiteShell[data-route="sales-360-salesperson"] .suite-main,
#suiteShell[data-route="sales-360-employee-detail"] .suite-main {
  margin-left: 0 !important;
  background: #F8FAFC !important;
}

#suiteShell[data-route="platform-home"] .suite-topbar {
  min-height: 72px !important;
  padding: 0 34px !important;
  border-bottom: 1px solid #E8EEF7 !important;
  background: rgba(248, 250, 252, .9) !important;
  backdrop-filter: blur(18px);
  box-shadow: none !important;
}

#suiteShell[data-route="sales-360"] .suite-topbar {
  min-height: 72px !important;
  padding: 0 34px !important;
  border-bottom: 1px solid #E8EEF7 !important;
  background: rgba(248, 250, 252, .9) !important;
  backdrop-filter: blur(18px);
  box-shadow: none !important;
}

#suiteShell[data-route="collections-360"] .suite-topbar {
  min-height: 72px !important;
  padding: 0 34px !important;
  border-bottom: 1px solid #E8EEF7 !important;
  background: rgba(248, 250, 252, .9) !important;
  backdrop-filter: blur(18px);
  box-shadow: none !important;
}

#suiteShell[data-route="sales-360-salesperson"] .suite-topbar,
#suiteShell[data-route="sales-360-employee-detail"] .suite-topbar {
  min-height: 72px !important;
  padding: 0 34px !important;
  border-bottom: 1px solid #E8EEF7 !important;
  background: rgba(248, 250, 252, .9) !important;
  backdrop-filter: blur(18px);
  box-shadow: none !important;
}

#suiteShell[data-route="platform-home"] .topbar-primary {
  min-height: 72px !important;
}

.topbar-home-logo {
  display: none;
}

#suiteShell[data-route="platform-home"] .topbar-home-logo {
  display: block;
  width: 154px;
  height: auto;
  cursor: pointer;
}

#suiteShell[data-route="platform-home"] .topbar-title {
  min-width: 180px;
}

#suiteShell[data-route="platform-home"] .topbar-title h1,
#suiteShell[data-route="platform-home"] .topbar-title p,
#suiteShell[data-route="platform-home"] #branchSelector,
#suiteShell[data-route="platform-home"] #moreFiltersButton,
#suiteShell[data-route="platform-home"] #themeToggle,
#suiteShell[data-route="platform-home"] #helpButton,
#suiteShell[data-route="platform-home"] .menu-button {
  display: none !important;
}

#suiteShell[data-route="platform-home"] .topbar-utility {
  flex: 1;
  justify-content: flex-end;
}

#suiteShell[data-route="platform-home"] #globalSearch {
  max-width: 540px;
  min-height: 44px;
  border-radius: 999px;
  background: #ffffff;
}

#suiteShell[data-route="platform-home"] #globalSearch::placeholder {
  color: #667085;
}

#suiteShell[data-route="platform-home"] #globalSearch {
  color: var(--ink);
  font-size: 15px;
}

#suiteShell[data-route="platform-home"] .content-stack {
  min-height: calc(100vh - 72px);
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  align-items: stretch;
}

#suiteShell[data-route="sales-360"] .content-stack {
  min-height: calc(100vh - 72px);
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  align-items: stretch;
}

#suiteShell[data-route="collections-360"] .content-stack {
  min-height: calc(100vh - 72px);
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  align-items: stretch;
}

#suiteShell[data-route="sales-360-salesperson"] .content-stack,
#suiteShell[data-route="sales-360-employee-detail"] .content-stack {
  min-height: calc(100vh - 72px);
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  align-items: stretch;
}

.os-home {
  display: grid;
  gap: 0;
  width: 100%;
  min-height: calc(100vh - 72px);
  color: #000000;
  font-family: "Sora", "Inter", sans-serif !important;
  animation: osFadeIn .38s ease both;
}

.os-home-greeting {
  display: grid;
  gap: 8px;
  width: 100%;
  justify-items: center;
  padding: clamp(30px, 3.4vw, 50px) clamp(28px, 6vw, 96px) clamp(22px, 2.8vw, 34px);
  border-bottom: 1px solid #E8EEF7;
  background: #ffffff;
  text-align: center;
}

.os-home-greeting p {
  margin: 0;
  color: #000000;
  font-size: clamp(28px, 3.2vw, 47px);
  font-weight: 700;
  line-height: 1.06;
}

.os-home-greeting span,
.os-home-greeting small {
  color: #000000;
  font-size: 15px;
  font-weight: 400;
}

.os-home-greeting strong {
  margin-top: 2px;
  color: #000000;
  font-size: clamp(16px, 1.6vw, 23px);
  font-weight: 500;
  line-height: 1.35;
  max-width: 980px;
}

.os-brief-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 16px clamp(28px, 6vw, 96px);
  border-bottom: 1px solid #E8EEF7;
  background: #ffffff;
  animation: osSlideUp .42s ease both;
}

.os-brief-item {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000000;
  font-weight: 600;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0;
  box-shadow: none;
}

.os-brief-item.warning {
  color: #9A3412;
}

.os-brief-item.healthy {
  color: #14532D;
}

.os-brief-dot {
  color: #98A2B3;
  font-size: 18px;
  line-height: 1;
}

.os-recommendation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  width: 100%;
  padding: clamp(22px, 3vw, 34px) clamp(28px, 6vw, 96px) clamp(18px, 2.4vw, 28px);
  border-bottom: 0;
  background: #F8FAFC;
}

.os-recommendation small {
  color: #000000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.os-recommendation h3 {
  margin: 8px 0 8px;
  color: #000000;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.05;
}

.os-recommendation p {
  margin: 0;
  color: #000000;
  font-size: clamp(14px, 1.18vw, 17px);
  line-height: 1.45;
}

.os-recommendation button {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  background: #0B2F63;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(11, 47, 99, .18);
  font-weight: 700;
}

.os-ai-panel {
  display: grid;
  gap: 18px;
  width: 100%;
  padding: 0 clamp(28px, 6vw, 96px) clamp(22px, 3vw, 34px);
  border-bottom: 1px solid #E8EEF7;
  background: #F8FAFC;
  box-shadow: none;
}

.os-ai-panel.os-ai-only {
  min-height: calc(100vh - 72px);
  align-content: center;
  gap: 14px;
  padding: clamp(30px, 5vw, 72px) clamp(28px, 6vw, 96px);
  border-bottom: 0;
  background: #F8FAFC;
  transform: translateY(clamp(-104px, -8vh, -78px));
}

.os-ai-greeting {
  display: grid;
  gap: 5px;
  justify-items: center;
  text-align: center;
}

.os-ai-greeting p {
  margin: 0;
  color: #0B1220;
  font-size: clamp(17px, 1.75vw, 24px);
  font-weight: 590;
  line-height: 1.08;
}

.os-ai-greeting span {
  color: #475467;
  font-size: 14px;
  font-weight: 400;
}

.os-executive-brief {
  margin: 0;
  justify-self: center;
  max-width: min(760px, 100%);
  color: #26364D;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.os-ai-panel header h3 {
  margin: 0;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.os-ai-panel header p,
.os-ai-panel > p {
  margin: 0;
  max-width: 980px;
  color: #000000;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
}

.os-ai-panel header,
.os-ai-panel > p {
  text-align: center;
  justify-self: center;
}

.os-ai-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(780px, 100%);
  justify-self: center;
  min-height: 54px;
  padding: 6px;
  border: 1px solid #DADCE0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .10);
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.os-ai-only .os-ai-input {
  width: min(920px, 100%);
  min-height: 64px;
  border-radius: 999px;
}

.os-ai-only .os-ai-input input {
  min-height: 52px;
  font-size: 16px;
}

.os-ai-only .os-ai-input button {
  width: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.os-ai-only .os-ai-input button svg {
  width: 19px;
  height: 19px;
}

.os-prompt-chips,
.os-continue {
  width: min(920px, 100%);
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.os-prompt-chips {
  gap: 10px;
}

.os-prompt-chips button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #DADCE0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #202124;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
  transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, background-color .16s ease, transform .16s ease;
}

.os-prompt-chips button:hover {
  border-color: #C7D2FE;
  background: #F8FAFF;
  color: #1A73E8;
  box-shadow: 0 2px 7px rgba(60, 64, 67, .16);
  transform: none;
}

.os-continue {
  gap: 9px;
  margin-top: 2px;
}

.os-continue button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #E4EBF5;
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  color: #344054;
  box-shadow: none;
}

.os-continue button strong,
.os-continue button span {
  font-size: 12px;
  font-weight: 500;
}

.os-continue button span {
  color: #667085;
}

.os-sales-carousel {
  width: min(1220px, 100%);
  justify-self: center;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
}

.os-sales-app-icons {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 0 12px;
}

.os-sales-app-icons::-webkit-scrollbar {
  display: none;
}

.os-carousel-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #FFFFFF;
  color: #3C4043;
  box-shadow: none;
  display: grid;
  place-items: center;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.os-carousel-button svg {
  width: 18px;
  height: 18px;
}

.os-carousel-button:hover {
  color: #1A73E8;
  border-color: #DADCE0;
  background: #F8Fafd;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18);
  transform: none;
}

@media (min-width: 1260px) {
  .os-sales-app-icons {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .os-sales-carousel {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 6px;
  }
}

.os-sales-app-icons {
  display: flex;
}

.os-sales-app-icons button {
  width: 104px;
  flex: 0 0 104px;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 6px 4px 8px;
  border: 0;
  background: transparent;
  color: #3C4043;
  box-shadow: none;
  transition: transform .18s ease, color .18s ease;
}

.os-sales-app-icons button span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #E8F0FE;
  color: #1A73E8;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, .06);
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.os-sales-app-icons button svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.os-sales-app-icons button strong {
  width: 100%;
  color: #202124;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.15;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  transition: color .18s ease;
}

.os-sales-app-icons button:hover {
  transform: none;
}

.os-sales-app-icons button:hover span,
.os-sales-app-icons button:hover strong {
  color: #1A73E8;
}

.os-sales-app-icons button:hover span {
  background: #DDEBFF;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, .12), 0 4px 12px rgba(60, 64, 67, .14);
  transform: none;
}

.os-prompt-chips button,
.os-carousel-button,
.os-sales-app-icons button,
.os-sales-app-icons button span {
  will-change: auto;
}

.os-prompt-chips button:active,
.os-prompt-chips button:focus,
.os-carousel-button:active,
.os-carousel-button:focus,
.os-sales-app-icons button:active,
.os-sales-app-icons button:focus,
.os-sales-app-icons button:active span,
.os-sales-app-icons button:focus span {
  transform: none;
}

.os-sales-app-icons button:nth-child(4n + 2) span {
  background: #E6F4EA;
  color: #188038;
}

.os-sales-app-icons button:nth-child(4n + 2):hover span,
.os-sales-app-icons button:nth-child(4n + 2):hover strong {
  color: #188038;
}

.os-sales-app-icons button:nth-child(4n + 3) span {
  background: #FEF7E0;
  color: #B06000;
}

.os-sales-app-icons button:nth-child(4n + 3):hover span,
.os-sales-app-icons button:nth-child(4n + 3):hover strong {
  color: #B06000;
}

.os-sales-app-icons button:nth-child(4n + 4) span {
  background: #FCE8E6;
  color: #D93025;
}

.os-sales-app-icons button:nth-child(4n + 4):hover span,
.os-sales-app-icons button:nth-child(4n + 4):hover strong {
  color: #D93025;
}

.os-ai-input:focus-within {
  border-color: #2563EB;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, .10), 0 18px 45px rgba(15, 23, 42, .08);
}

.os-ai-input input {
  min-height: 42px;
  border: 0;
  border-radius: 22px;
  padding: 0 18px;
  font-size: 15px;
  color: #000000;
  box-shadow: none;
}

.os-ai-input button {
  min-height: 40px;
  border-radius: 999px;
  background: #0B2F63;
  color: #ffffff;
  padding: 0 22px;
  font-weight: 500;
}

.os-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
  padding: 18px clamp(28px, 6vw, 96px) 48px;
  background: #ffffff;
}

.os-prompts button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #E1E9F4;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #000000;
  font-size: 13px;
  font-weight: 500;
}

.os-brief-loading span {
  width: clamp(120px, 16vw, 220px);
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #EEF3F8 0%, #F8FAFC 45%, #EEF3F8 100%);
  background-size: 220% 100%;
  animation: osSkeleton 1.1s ease-in-out infinite;
}

.os-recommendation-loading button {
  opacity: .45;
}

#suiteShell[data-route="platform-home"] .salestos-global-header .topbar-home-logo {
  width: 48px !important;
  height: 48px !important;
}

.salestos-global-header .header-launcher-button {
  min-height: 62px !important;
}

.salestos-global-header .topbar-home-logo,
#suiteShell[data-route="platform-home"] .salestos-global-header .topbar-home-logo,
#suiteShell[data-route="sales-360"] .salestos-global-header .topbar-home-logo {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
}

.salestos-global-header .header-breadcrumbs {
  display: flex !important;
}

/* Home dashboard KPI composition from the approved SalesTOS reference. */
.os-dashboard-home { background: #f7f9fc; overflow-x: hidden; }
.os-dashboard-home .os-ai-panel.os-ai-only {
  min-height: calc(100vh - 72px); align-content: start; gap: 0; transform: none;
  padding: 42px max(24px, calc((100% - 1420px) / 2)) 24px; background: #f7f9fc;
}
.os-dashboard-home .os-ai-greeting { gap: 6px; }
.os-dashboard-home .os-ai-greeting p { font-size: clamp(28px, 2vw, 30px); font-weight: 700; }
.os-dashboard-home .os-ai-greeting span { color: #64748b; font-size: 14px; }
.os-dashboard-home .os-executive-brief { max-width: 980px; margin-top: 24px; color: #1f2937; font-size: 16px; }
.home-kpi-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.home-kpi-card {
  min-width: 0; min-height: 220px; display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: auto 1fr;
  gap: 18px; padding: 28px 26px; text-align: left; border: 1px solid #dfe4ea; border-radius: 20px;
  background: #fff; color: #111827; box-shadow: 0 2px 8px rgba(15,23,42,.03); cursor: pointer;
}
.home-kpi-card:hover { transform: none; border-color: #cbd5e1; box-shadow: 0 5px 15px rgba(15,23,42,.06); }
.home-kpi-card:focus-visible { outline: 3px solid rgba(37,99,235,.25); outline-offset: 3px; }
.home-kpi-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 18px; background: #eaf2ff; color: #3b82f6; }
.home-kpi-icon svg { width: 28px; height: 28px; stroke-width: 2; }
.home-kpi-card.target .home-kpi-icon { background: #fff4d8; color: #d97706; }
.home-kpi-card.achieved .home-kpi-icon { background: #e2f6e9; color: #16a34a; }
.home-kpi-card.collections .home-kpi-icon { background: #fde8e8; color: #ef4444; }
.home-kpi-copy { min-width: 0; align-self: center; display: grid; gap: 8px; }
.home-kpi-copy small { color: #64748b; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.home-kpi-copy strong { color: #111827; font-size: clamp(25px, 1.8vw, 30px); line-height: 1.1; white-space: nowrap; }
.home-kpi-card.achieved .home-kpi-copy strong { color: #16a34a; }
.home-kpi-detail { grid-column: 1 / -1; align-self: center; display: grid; gap: 20px; color: #475569; font-size: 14px; font-style: normal; }
.home-kpi-detail em { color: #64748b; font-style: normal; }
.home-kpi-detail b { font-weight: 700; }
.home-kpi-detail.growth { display: block; color: #16a34a; }
.home-kpi-detail.growth em { margin-left: 4px; }
.home-kpi-detail .days { display: inline-flex; align-items: center; gap: 7px; color: #2563eb; }
.home-kpi-detail .days svg { width: 18px; height: 18px; }
.home-kpi-card.collections .home-kpi-detail em b { color: #16a34a; }
.home-kpi-card.collections .home-kpi-detail strong { font-weight: 600; }
.home-achievement { grid-column: 1 / -1; align-self: end; position: relative; display: grid; gap: 7px; padding-top: 9px; }
.home-progress-marker { position: absolute; top: 0; width: 0; height: 0; transform: translateX(-5px); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #111827; }
.home-progress { width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: #dfe5ec; }
.home-progress i { display: block; height: 100%; border-radius: inherit; background: #22a95a; transition: width .55s ease; }
.home-progress-scale { display: flex; justify-content: space-between; color: #64748b; }
.home-progress-scale em { font-size: 12px; font-style: normal; }
.home-achievement > b { margin-top: 12px; text-align: center; color: #16a34a; font-size: 15px; font-weight: 600; }
.home-achievement > b.warning { color: #d97706; } .home-achievement > b.danger { color: #dc2626; }
.os-dashboard-home .os-ai-input { width: min(900px, 100%); min-height: 82px; margin-top: 38px; padding: 8px 8px 8px 28px; }
.os-dashboard-home .os-ai-input input { min-height: 62px; padding: 0; font-size: 15px; }
.os-dashboard-home .os-ai-input button { width: 62px; min-height: 62px; }
.os-dashboard-home .os-ai-input button svg { width: 25px; height: 25px; }
.os-dashboard-home .os-prompt-chips { margin-top: 24px; gap: 10px; }
.os-dashboard-home .os-prompt-chips button { min-height: 42px; padding: 0 20px; }
.os-dashboard-home .os-continue { margin-top: 12px; }
.os-dashboard-home .os-sales-carousel { width: 100%; margin-top: 26px; grid-template-columns: 46px minmax(0,1fr) 46px; }
.os-dashboard-home .os-carousel-button { width: 46px; height: 46px; border-color: #e2e8f0; box-shadow: 0 2px 6px rgba(15,23,42,.06); }
.os-dashboard-home .os-sales-app-icons { padding: 4px 16px 12px; }
.home-dashboard-footer { margin-top: 50px; padding-bottom: 0; color: #7c8798; font-size: 13px; text-align: center; }
@media (max-width: 1199px) {
  .home-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .os-dashboard-home .os-ai-input { width: 100%; }
}
@media (max-width: 767px) {
  .os-dashboard-home .os-ai-panel.os-ai-only { padding: 28px 16px 20px; }
  .os-dashboard-home .os-ai-greeting p { font-size: 24px; }
  .os-dashboard-home .os-executive-brief { margin-top: 18px; font-size: 14px; }
  .home-kpi-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .home-kpi-card { min-height: auto; padding: 22px; }
  .os-dashboard-home .os-ai-input { min-height: 62px; margin-top: 28px; padding: 6px 6px 6px 20px; }
  .os-dashboard-home .os-ai-input input { min-height: 48px; font-size: 14px; }
  .os-dashboard-home .os-ai-input button { width: 48px; min-height: 48px; }
  .os-dashboard-home .os-prompt-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px; scrollbar-width: none; }
  .os-dashboard-home .os-prompt-chips button { flex: 0 0 auto; }
  .os-dashboard-home .os-sales-carousel { grid-template-columns: 36px minmax(0,1fr) 36px; gap: 4px; }
  .os-dashboard-home .os-carousel-button { width: 36px; height: 36px; }
  .home-dashboard-footer { margin-top: 36px; }
}

.salestos-global-header #headerWorkspaceName {
  display: block !important;
}

.mobile-menu-action {
  display: none;
}

@media (max-width: 900px) {
  .suite-topbar.salestos-global-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 64px !important;
    height: 64px !important;
    gap: 10px !important;
    padding: 0 14px !important;
  }

  .salestos-global-header .header-left {
    gap: 10px !important;
    min-width: 0 !important;
  }

  .salestos-global-header .menu-button {
    display: inline-grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border: 1px solid #E1E9F4 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    color: #0B2F63 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
  }

  .salestos-global-header .header-launcher-button,
  .salestos-global-header .header-right,
  .salestos-global-header .header-center,
  .salestos-global-header #headerWorkspaceName,
  .salestos-global-header .header-breadcrumbs {
    display: none !important;
  }

  .salestos-global-header .header-identity strong {
    display: block !important;
    max-width: calc(100vw - 96px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  .mobile-menu-action {
    display: block;
  }
}

.salestos-global-header .header-launcher-button {
  min-height: 62px !important;
}

.salestos-global-header .topbar-home-logo,
#suiteShell[data-route="platform-home"] .salestos-global-header .topbar-home-logo,
#suiteShell[data-route="sales-360"] .salestos-global-header .topbar-home-logo {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
}

.salestos-global-header .header-breadcrumbs {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 18px;
  margin-top: 4px;
}

.salestos-global-header .header-breadcrumbs button,
.salestos-global-header .header-breadcrumbs span {
  font-size: 11px;
  line-height: 1.2;
}

.salestos-global-header .header-breadcrumbs button {
  color: #0B2F63;
}

.salestos-global-header .header-breadcrumbs span[aria-current="page"] {
  color: #0F172A;
  font-weight: 600;
}

.sales360-incentives-workspace,
.sales360-incentive-form-page {
  --workspace-accent: #0B2F63;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  font-family: "Sora", "Inter", sans-serif;
  color: #0B1220;
}

.sales360-incentives-workspace .workspace-header,
.sales360-incentive-form-page .workspace-header {
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(11, 47, 99, .08);
}

.sales360-incentives-workspace .salestos-summary {
  border-left-color: #0B2F63;
}

.sales360-incentives-workspace .salestos-summary p {
  max-width: 920px;
  font-size: 15px;
  line-height: 1.65;
}

.sales360-incentives-workspace .incentive-ai {
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(11, 47, 99, .07);
}

.sales360-incentives-workspace .incentive-ai input {
  min-height: 58px;
  border-radius: 999px;
  padding-inline: 20px;
}

.sales360-incentives-workspace .incentive-ai form button {
  min-height: 50px;
  border-radius: 999px;
}

.sales360-incentives-workspace .incentive-ai p {
  margin: 0;
  color: #52637A;
  font-size: 12px;
}

.sales360-incentives-workspace .workspace-actions {
  justify-content: center;
  gap: 18px;
  padding: 8px 0 12px;
}

.sales360-incentives-workspace .workspace-action {
  min-width: 96px;
  min-height: 84px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #0B2F63;
}

.sales360-incentives-workspace .workspace-action span {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #F3F7FC;
  color: #0B2F63;
  box-shadow: inset 0 0 0 1px #DDE8F5;
}

.sales360-incentives-workspace .workspace-action strong {
  color: #0B1220;
  font-size: 12px;
}

.sales360-incentives-workspace .workspace-action:hover,
.sales360-incentives-workspace .workspace-action.selected {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #2563EB;
  transform: translateY(-3px);
}

.sales360-incentives-workspace .workspace-action:hover span,
.sales360-incentives-workspace .workspace-action.selected span {
  color: #2563EB;
  background: #EAF2FF;
  box-shadow: inset 0 0 0 1px #BED6FF, 0 10px 24px rgba(37, 99, 235, .12);
}

.sales360-incentives-workspace .workspace-action:hover strong,
.sales360-incentives-workspace .workspace-action.selected strong {
  color: #2563EB;
}

.sales360-incentives-workspace .focused-workspace-container {
  min-height: 260px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.incentive-focus-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid #E1E9F4;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 18px 50px rgba(11, 47, 99, .08);
}

.incentive-focus-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.incentive-focus-header span,
.incentive-step-form section > span {
  display: block;
  color: #0B2F63;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.incentive-focus-header h3,
.incentive-step-form h3 {
  margin: 4px 0 6px;
  color: #0B1220;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
}

.incentive-focus-header p {
  margin: 0;
  color: #52637A;
  font-size: 14px;
  line-height: 1.55;
}

.incentive-record-list {
  display: grid;
  gap: 10px;
}

.incentive-record-list article {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #E7EEF7;
  border-radius: 16px;
  background: #FBFDFF;
}

.incentive-record-list span {
  display: block;
  margin-bottom: 4px;
  color: #607089;
  font-size: 11px;
  font-weight: 600;
}

.incentive-record-list strong {
  color: #0B1220;
  font-size: 13px;
  font-weight: 600;
}

.incentive-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.incentive-focused-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  border: 1px dashed #CDD9EA;
  border-radius: 18px;
  background: #F8FBFF;
  text-align: center;
}

.incentive-focused-empty strong {
  color: #0B1220;
  font-size: 16px;
}

.incentive-focused-empty span {
  max-width: 520px;
  color: #52637A;
}

.incentive-simulation-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid #E7EEF7;
  border-radius: 18px;
  background: #FBFDFF;
}

.incentive-simulation-form label,
.incentive-step-form label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}

.incentive-simulation-form input,
.incentive-simulation-form select,
.incentive-step-form input,
.incentive-step-form select,
.incentive-step-form textarea {
  min-height: 44px;
  width: 100%;
  border: 1px solid #DCE6F2;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0B1220;
  font: inherit;
  padding: 0 12px;
}

.incentive-step-form textarea {
  min-height: 84px;
  padding: 10px 12px;
  resize: vertical;
}

.incentive-insight-list {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #E7EEF7;
  border-radius: 18px;
  background: #FBFDFF;
}

.incentive-insight-list p {
  margin: 0;
  color: #52637A;
  line-height: 1.55;
}

.incentive-insight-list strong {
  color: #0B1220;
}

.sales360-incentive-form-page > .text-button {
  width: max-content;
}

.incentive-step-form {
  display: grid;
  gap: 14px;
}

.incentive-step-form section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid #E1E9F4;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 14px 36px rgba(11, 47, 99, .06);
}

.incentive-step-form section > span,
.incentive-step-form h3 {
  grid-column: 1 / -1;
}

.incentive-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 900px) {
  .sales360-incentives-workspace,
  .sales360-incentive-form-page {
    max-width: none;
  }
  .incentive-focus-header,
  .incentive-row-actions,
  .incentive-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .incentive-record-list article,
  .incentive-simulation-form,
  .incentive-step-form section {
    grid-template-columns: 1fr;
  }
}

/* Universal SalesTOS breadcrumbs */
.salestos-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
  color: #667085;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.salestos-breadcrumbs button,
.salestos-breadcrumbs span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 220px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
}

.salestos-breadcrumbs button {
  cursor: pointer;
  transition: color .16s ease;
}

.salestos-breadcrumbs button:hover {
  color: #2563EB;
}

.salestos-breadcrumbs span[aria-current="page"] {
  color: #0B1220;
  font-weight: 600;
}

.salestos-breadcrumbs i {
  color: #C7D0DD;
  font-style: normal;
  font-weight: 400;
}

.header-breadcrumbs {
  margin-top: 3px;
}

.salestos-global-header .header-identity {
  min-width: 0;
}

.salestos-global-header .header-breadcrumbs {
  max-width: min(520px, 42vw);
}

.workspace-header-title .salestos-breadcrumbs,
.salestos-workspace-framework .workspace-header-title .salestos-breadcrumbs {
  display: flex !important;
  margin: 0 0 6px;
}

.salestos-breadcrumbs.compact {
  font-size: 11px;
  gap: 5px;
}

@media (max-width: 900px) {
  .salestos-global-header .header-breadcrumbs {
    display: none;
  }
  .workspace-header-title .salestos-breadcrumbs {
    max-width: 100%;
  }
}

#suiteShell[data-route="sales-360"] .salestos-global-header .topbar-home-logo {
  width: 48px !important;
  height: 48px !important;
}

/* SalesTOS SDL 3.0 Workspace Framework */
.salestos-workspace-framework {
  display: grid;
  gap: 16px;
  width: 100%;
  color: #0B1220;
  font-family: "Sora", "Inter", sans-serif;
}

.salestos-workspace-framework .workspace-header {
  position: relative;
  top: auto;
  z-index: 1;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 18px 20px;
  border: 1px solid #E4EBF5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .05);
}

.salestos-workspace-framework .workspace-header.sticky {
  position: sticky;
  top: 84px;
}

.salestos-workspace-framework .workspace-header-title {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
}

.salestos-workspace-framework .workspace-header-title nav {
  display: none;
}

.salestos-workspace-framework .workspace-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #F1F6FC;
  color: var(--workspace-accent, #0B2F63);
}

.salestos-workspace-framework .workspace-header-title h2 {
  margin: 0;
  color: #0B1220;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 650;
  letter-spacing: 0;
}

.salestos-workspace-framework .workspace-header-title p {
  margin: 5px 0 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}

.salestos-workspace-framework .workspace-header-title b {
  display: inline-flex;
  width: max-content;
  margin-top: 10px;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #DCE6F2;
  border-radius: 999px;
  background: #F8FBFF;
  color: #0B2F63;
  font-size: 12px;
  font-weight: 600;
}

.salestos-summary {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid #E4EBF5;
  border-left: 4px solid #0B2F63;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .045);
}

.salestos-summary.priority-critical {
  border-left-color: #DC2626;
}

.salestos-summary.priority-warning,
.salestos-summary.priority-attention {
  border-left-color: #D97706;
}

.salestos-summary.priority-healthy {
  border-left-color: #16A34A;
}

.salestos-summary.empty {
  border-left-color: #CBD5E1;
  background: #FBFCFE;
}

.salestos-summary header {
  display: grid;
  gap: 4px;
}

.salestos-summary header span {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.salestos-summary header strong {
  color: #0B1220;
  font-size: 18px;
  font-weight: 650;
}

.salestos-summary p {
  margin: 0;
  max-width: 980px;
  color: #344054;
  font-size: 14px;
  line-height: 1.55;
}

.salestos-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.salestos-ai {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid #E4EBF5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .045);
}

.salestos-ai form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.salestos-ai input {
  min-height: 52px;
  border-radius: 16px;
  border-color: #DCE6F2;
  background: #F8FBFF;
  color: #0B1220;
  font-size: 14px;
}

.salestos-ai input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, .10);
}

.salestos-ai form button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 16px;
  background: #0B2F63;
  color: #ffffff;
  font-weight: 650;
  box-shadow: 0 14px 30px rgba(11, 47, 99, .15);
}

.salestos-ai form button svg {
  width: 18px;
  height: 18px;
}

.salestos-ai-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.salestos-ai-prompts button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #E1E9F4;
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

.salestos-ai-prompts button:hover {
  border-color: #BBD2F0;
  color: #2563EB;
  transform: translateY(-1px);
}

.workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  overflow: visible;
  padding: 4px 2px 10px;
}

.workspace-actions.empty {
  display: none;
}

.workspace-action {
  min-width: 108px;
  min-height: 78px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #0B2F63;
  box-shadow: none;
  text-align: center;
}

.workspace-action span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.workspace-action svg {
  width: 26px;
  height: 26px;
}

.workspace-action strong {
  color: #0B1220;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.2;
}

.workspace-action:hover,
.workspace-action.selected {
  border-color: #DCEBFF;
  background: #F8FBFF;
  color: #2563EB;
  transform: translateY(-2px);
}

.workspace-action:hover strong,
.workspace-action.selected strong {
  color: #2563EB;
}

.workspace-action.priority-critical {
  color: #DC2626;
}

.workspace-action.priority-warning,
.workspace-action.priority-attention {
  color: #D97706;
}

.workspace-more-actions {
  position: relative;
  flex: 0 0 auto;
}

.workspace-more-actions summary {
  min-width: 108px;
  min-height: 78px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #0B2F63;
  cursor: pointer;
  list-style: none;
  text-align: center;
}

.workspace-more-actions summary::-webkit-details-marker {
  display: none;
}

.workspace-more-actions summary span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.workspace-more-actions summary svg {
  width: 26px;
  height: 26px;
}

.workspace-more-actions summary strong {
  color: #0B1220;
  font-size: 12px;
  font-weight: 550;
}

.workspace-more-actions summary:hover,
.workspace-more-actions[open] summary {
  border-color: #DCEBFF;
  background: #F8FBFF;
  color: #2563EB;
  transform: translateY(-2px);
}

.workspace-more-actions summary:hover strong,
.workspace-more-actions[open] summary strong {
  color: #2563EB;
}

.workspace-more-actions > div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 220px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #E4EBF5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .14);
}

.workspace-action.compact {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  grid-template-columns: 28px minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
}

.workspace-action.compact span {
  width: 28px;
  height: 28px;
}

.workspace-action.compact svg {
  width: 20px;
  height: 20px;
}

.focused-workspace-container {
  min-height: 260px;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #E4EBF5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .045);
}

.salesperson-framework-page {
  width: 100%;
}

.salesperson-framework-module {
  display: grid;
  gap: 14px;
}

.salesperson-framework-module header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: end;
}

.salesperson-framework-module header p,
.salesperson-framework-module header h3 {
  margin: 0;
}

.salesperson-framework-module header p {
  color: #0B2F63;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.salesperson-framework-module header h3 {
  color: #0B1220;
  font-size: 20px;
  font-weight: 650;
}

.salesperson-framework-module header span {
  grid-row: 1 / span 2;
  color: #667085;
  font-size: 12px;
  font-weight: 500;
}

.salesperson-framework-module > div {
  display: grid;
  gap: 10px;
}

.salesperson-framework-module article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #EEF2F7;
}

.salesperson-framework-module article:last-child {
  border-bottom: 0;
}

.salesperson-framework-module article strong {
  color: #0B1220;
  font-size: 14px;
  font-weight: 600;
}

.salesperson-framework-module article small {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
}

.salesperson-framework-module article em {
  color: #0B2F63;
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
}

.people-workspace-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding: clamp(28px, 4vw, 54px);
  color: #0B1220;
  font-family: "Sora", "Inter", sans-serif;
}

.people-workspace-intro {
  display: grid;
  gap: 10px;
  text-align: left;
}

.people-workspace-intro h2 {
  margin: 0;
  color: #0B1220;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  font-weight: 650;
  letter-spacing: 0;
}

.people-workspace-intro p {
  margin: 0;
  max-width: 760px;
  color: #475467;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
}

.people-workspace-ai {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(760px, 100%);
  min-height: 64px;
  padding: 6px;
  border: 1px solid #DCE6F2;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
}

.people-workspace-ai input {
  min-height: 52px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #0B1220;
  padding: 0 18px;
  font-size: 15px;
  box-shadow: none;
}

.people-workspace-ai button {
  width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #0B2F63;
  color: #ffffff;
  padding: 0;
}

.people-workspace-ai button svg {
  width: 19px;
  height: 19px;
}

.people-workspace-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.people-workspace-intents button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #E1E9F4;
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
}

.people-workspace-intents button:hover {
  border-color: #BBD2F0;
  color: #2563EB;
  transform: translateY(-1px);
}

.people-workspace-finder {
  width: min(460px, 100%);
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 600;
}

.people-workspace-finder input {
  min-height: 48px;
  border-radius: 14px;
  border-color: #DCE6F2;
  background: #ffffff;
}

.people-workspace-empty {
  display: grid;
  gap: 8px;
  min-height: 180px;
  align-content: center;
  justify-items: center;
  padding: 28px;
  border: 1px dashed #D8E3F0;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  text-align: center;
}

.people-workspace-empty strong {
  color: #0B1220;
  font-size: 17px;
  font-weight: 650;
}

.people-workspace-empty p {
  margin: 0;
  max-width: 560px;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.people-os-finder {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px 0 12px;
  border: 1px solid #E4EBF5;
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  color: #344054;
  font-size: 12px;
  font-weight: 500;
}

.people-os-finder input {
  width: min(220px, 42vw);
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 8px;
  color: #0B1220;
  font-size: 12px;
  box-shadow: none;
}

.people-os-finder input:focus {
  box-shadow: none;
}

#suiteShell[data-route="sales-360-salesperson"] .os-ai-panel.os-ai-only,
#suiteShell[data-route="sales-360-employee-detail"] .os-ai-panel.os-ai-only {
  min-height: calc(100vh - 72px);
  align-content: start;
  gap: 12px;
  padding-top: clamp(28px, 5vh, 52px);
  padding-bottom: 34px;
  transform: none;
}

#suiteShell[data-route="sales-360-salesperson"] .os-ai-greeting p,
#suiteShell[data-route="sales-360-employee-detail"] .os-ai-greeting p {
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.12;
}

#suiteShell[data-route="sales-360-salesperson"] .os-ai-greeting span,
#suiteShell[data-route="sales-360-employee-detail"] .os-ai-greeting span {
  max-width: 720px;
  line-height: 1.45;
}

#suiteShell[data-route="sales-360-salesperson"] .os-executive-brief,
#suiteShell[data-route="sales-360-employee-detail"] .os-executive-brief {
  max-width: 720px;
}

.people-os-finder select {
  width: min(260px, 48vw);
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 8px;
  color: #0B1220;
  font-size: 12px;
  box-shadow: none;
}

.people-os-finder select:focus {
  box-shadow: none;
}

.people-service-carousel .os-sales-app-icons button.active span,
.people-service-carousel .os-sales-app-icons button.active strong {
  color: #1A73E8;
}

.people-service-carousel .os-sales-app-icons button.active span {
  background: #DDEBFF;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, .16), 0 3px 10px rgba(60, 64, 67, .12);
}

.people-service-carousel {
  width: min(1120px, 100%);
  margin-top: 2px;
}

.people-service-carousel .os-sales-app-icons {
  gap: 16px;
  justify-content: flex-start;
}

.people-service-carousel .os-sales-app-icons button {
  width: 96px;
  flex: 0 0 96px;
  gap: 8px;
  padding: 6px 3px 8px;
}

.people-service-carousel .os-sales-app-icons button span {
  width: 48px;
  height: 48px;
}

.people-service-carousel .os-sales-app-icons button svg {
  width: 24px;
  height: 24px;
}

.people-service-carousel .os-sales-app-icons button strong {
  font-size: 12px;
  line-height: 1.15;
}

.people-service-carousel .os-sales-app-icons button.pending {
  opacity: .58;
}

.people-service-carousel .os-sales-app-icons button.pending span {
  background: #F1F3F4;
  color: #5F6368;
}

.collections-os-home .collections-os-panel {
  min-height: calc(100vh - 72px);
  align-content: center;
  padding-top: clamp(32px, 6vh, 70px);
  padding-bottom: 42px;
}

.collections-os-home .os-ai-greeting p {
  font-size: clamp(28px, 4vw, 52px);
}

.collections-os-home .os-ai-greeting span {
  max-width: 780px;
}

.collections-os-recommendation {
  width: min(920px, 100%);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #E8EAED;
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .10);
}

.collections-os-recommendation div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.collections-os-recommendation small {
  color: #5F6368;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.collections-os-recommendation strong {
  color: #202124;
  font-size: 19px;
  line-height: 1.2;
}

.collections-os-recommendation span {
  color: #3C4043;
  font-size: 14px;
  line-height: 1.45;
}

.collections-os-recommendation button,
.collections-focus-header button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #1A73E8;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(26, 115, 232, .18);
}

.collections-service-carousel {
  width: min(1120px, 100%);
  margin-top: 4px;
}

.collections-service-carousel .os-sales-app-icons button.active span {
  background: #DDEBFF;
  color: #1A73E8;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, .16), 0 3px 10px rgba(60, 64, 67, .12);
}

.collections-service-carousel .os-sales-app-icons button.active strong {
  color: #1A73E8;
}

.collections-os-focused {
  min-height: calc(100vh - 72px);
  padding: 32px clamp(18px, 4vw, 54px) 54px;
  background: #F8FAFC;
}

.collections-os-focused .collections-workspace {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.collections-focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 0 4px;
}

.collections-focus-header div {
  display: grid;
  gap: 6px;
}

.collections-focus-header small {
  color: #1A73E8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.collections-focus-header h2 {
  margin: 0;
  color: #202124;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
}

.collections-focus-header p {
  margin: 0;
  color: #5F6368;
  font-size: 14px;
}

.collections-focus-dock {
  width: 100%;
  margin: 10px 0 4px;
}

.collections-os-focused .collections-filterbar,
.collections-os-focused .collections-toolbar {
  border-color: #E8EAED;
  border-radius: 22px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .08);
}

.collections-os-focused .data-card,
.collections-os-focused .collection-panel,
.collections-os-focused .collection-strategy-card {
  border-color: #E8EAED !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .08) !important;
}

.people-identity,
.people-focus-panel {
  width: min(920px, 100%);
  justify-self: center;
}

.people-identity {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  text-align: center;
}

.people-identity strong {
  color: #0B1220;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 650;
}

.people-identity span {
  color: #667085;
  font-size: 13px;
}

.people-focus-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #E4EBF5;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .05);
}

.people-focus-panel.empty {
  justify-items: center;
  text-align: center;
}

.people-focus-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.people-focus-panel small {
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.people-focus-panel h3 {
  margin: 3px 0 0;
  color: #0B1220;
  font-size: 20px;
  font-weight: 650;
}

.people-focus-panel p,
.people-pending-note {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.people-focus-list {
  display: grid;
  gap: 8px;
}

.people-focus-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 10px 0;
  border-bottom: 1px solid #EEF2F7;
}

.people-focus-list article:last-child {
  border-bottom: 0;
}

.people-focus-list strong {
  color: #0B1220;
  font-size: 13px;
  font-weight: 600;
}

.people-focus-list span {
  color: #475467;
  font-size: 13px;
}

.people-focus-panel footer {
  display: flex;
  justify-content: center;
}

.people-focus-panel footer button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #0B2F63;
  color: #ffffff;
  font-size: 12px;
  font-weight: 650;
}

.people-pending-note {
  width: min(920px, 100%);
  justify-self: center;
  color: #8A5A00;
}

.people-setup-empty,
.people-management-page,
.sdl-form-page {
  width: min(1040px, 100%);
  justify-self: center;
  display: grid;
  gap: 18px;
  color: #0B1220;
}

.people-setup-empty {
  justify-items: center;
  padding: 26px;
  border: 1px dashed #D8E3F0;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  text-align: center;
}

.people-setup-empty h3,
.people-management-page h2,
.sdl-form-page h2 {
  margin: 0;
  color: #0B1220;
  font-weight: 650;
}

.people-setup-empty p,
.people-management-page p,
.sdl-form-page p {
  margin: 0;
  color: #667085;
  line-height: 1.5;
}

.people-setup-empty div,
.people-management-page header,
.sdl-form-page footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.people-setup-empty button,
.people-management-page header button,
.sdl-form-page footer button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #0B2F63;
  color: #ffffff;
  font-size: 13px;
  font-weight: 650;
}

.people-management-page header {
  justify-content: space-between;
  padding: 20px 0 4px;
}

.people-management-page header small,
.sdl-form-page header small {
  color: #0B2F63;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.people-management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.people-management-grid article,
.people-management-grid button {
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px;
  border: 1px solid #E4EBF5;
  border-radius: 16px;
  background: #ffffff;
  color: #0B1220;
  text-align: left;
  box-shadow: 0 14px 35px rgba(15,23,42,.045);
}

.people-management-grid strong {
  font-size: 15px;
  font-weight: 650;
}

.people-management-grid span,
.people-management-grid small {
  color: #667085;
  font-size: 12px;
}

.people-management-grid em {
  color: #0B2F63;
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.sdl-form-page {
  padding: clamp(28px, 4vw, 54px);
}

.sdl-form-page header {
  display: grid;
  gap: 8px;
}

.sdl-step-list {
  display: grid;
  gap: 14px;
}

.sdl-step-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid #E4EBF5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(15,23,42,.045);
}

.sdl-step-list article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #EAF2FF;
  color: #0B2F63;
  font-weight: 700;
}

.sdl-step-list h3 {
  margin: 0 0 12px;
  color: #0B1220;
  font-size: 16px;
  font-weight: 650;
}

.people-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.people-toggle-grid label {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid #E4EBF5;
  border-radius: 12px;
  background: #F8FBFF;
}

.role-workspace-page {
  width: min(1260px, 100%);
  justify-self: center;
  display: grid;
  gap: 32px;
  padding-bottom: 92px;
  color: #071225;
}

.suite-shell,
.suite-main,
#content,
.content-stack {
  background: #EEF5FA !important;
}

.suite-main:has(.role-workspace-page),
#content:has(.role-workspace-page) {
  background: #EEF5FA !important;
}

.role-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 2px 2px 0;
  color: #70809A;
  font-size: 13px;
  font-weight: 650;
}

.role-breadcrumb button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #70809A;
  font: inherit;
}

.role-breadcrumb button:hover,
.role-breadcrumb button:focus-visible {
  color: #2E6BFF;
}

.role-breadcrumb strong {
  color: #071225;
  font-weight: 800;
}

.role-hero-card,
.role-form-section,
.role-summary-card {
  border: 1px solid #DCE5F2;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: none;
}

.role-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 2.6vw, 28px);
}

.role-hero-card small,
.role-form-section small,
.role-summary-card small {
  color: #0d7b58;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.role-hero-card h2,
.role-form-section h3,
.role-summary-card h3 {
  margin: 0;
  color: #071225;
  font-weight: 750;
  letter-spacing: 0;
}

.role-hero-card h2 {
  margin-top: 6px;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
}

.role-hero-card p {
  max-width: 760px;
  margin: 8px 0 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.55;
}

.role-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.role-hero-stats article {
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px 18px;
  border: 1px solid #DCE5F2;
  border-radius: 16px;
  background: #FFFFFF;
}

.role-hero-stats span {
  color: #70809A;
  font-size: 12px;
  font-weight: 700;
}

.role-hero-stats strong {
  color: #071225;
  font-size: 31px;
  line-height: 1;
  font-weight: 800;
}

.role-workspace-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.role-workspace-form {
  display: grid;
  gap: 32px;
}

.role-form-section {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 26px);
}

.role-form-section > header,
.role-summary-card header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.role-form-section h3,
.role-summary-card h3 {
  font-size: 16px;
  font-weight: 600;
}

.role-form-section > header > span,
.role-summary-card header > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #EEF5FF;
  color: #2E6BFF;
}

.role-form-section > header svg,
.role-summary-card header svg {
  width: 22px;
  height: 22px;
}

.role-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.role-form-grid label,
.role-template-select {
  display: grid;
  gap: 8px;
  color: #43546F;
  font-size: 13px;
  font-weight: 500;
}

.role-form-grid .full {
  grid-column: 1 / -1;
}

.role-form-grid input,
.role-form-grid select,
.role-form-grid textarea,
.role-template-select select,
.role-code-field input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #DCE5F2;
  border-radius: 13px;
  background: #ffffff;
  color: #071225;
  font: inherit;
  font-weight: 600;
  padding: 0 14px;
  outline: none;
}

.role-form-grid textarea {
  min-height: 94px;
  padding-top: 12px;
  resize: vertical;
}

.role-form-grid input:focus,
.role-form-grid select:focus,
.role-form-grid textarea:focus,
.role-template-select select:focus,
.role-code-field input:focus {
  border-color: #2E6BFF;
  box-shadow: 0 0 0 3px rgba(46,107,255,.10);
}

.role-code-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.role-code-field button,
.role-action-footer button,
.role-permission-row label {
  min-height: 44px;
}

.role-code-field button {
  padding: 0 14px;
  border: 1px solid #DCE5F2;
  border-radius: 13px;
  background: #FFFFFF;
  color: #2E6BFF;
  font-weight: 750;
}

.role-code-field button:hover,
.role-code-field button:focus-visible {
  border-color: #BFD3F5;
}

.role-inline-check {
  min-height: 46px;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #DCE5F2;
  border-radius: 13px;
  background: #FFFFFF;
}

.role-hierarchy-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border: 1px dashed #BFD3F5;
  border-radius: 16px;
  background: #FFFFFF;
}

.role-hierarchy-preview span {
  padding: 8px 12px;
  border: 1px solid #DCE5F2;
  border-radius: 999px;
  background: #ffffff;
  color: #071225;
  font-size: 13px;
  font-weight: 750;
}

.role-hierarchy-preview b {
  color: #8CA0BD;
}

.role-app-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.role-app-access-grid label {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid #DCE5F2;
  border-radius: 16px;
  background: #ffffff;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.role-app-access-grid label:has(input:checked) {
  border-color: #2E6BFF;
  background: #EEF5FF;
}

.role-app-access-grid label:hover {
  border-color: #BFD3F5;
}

.role-app-access-grid label.disabled {
  opacity: .62;
  background: #F7F9FD;
}

.role-app-access-grid strong {
  color: #071225;
  font-size: 14px;
}

.role-app-access-grid span {
  color: #667085;
  font-size: 12px;
}

.role-template-select {
  display: grid;
  gap: 8px;
  color: #43546F;
  font-size: 13px;
  font-weight: 700;
}

.role-template-select select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #FFFFFF;
  color: #071225;
  font: inherit;
  font-weight: 650;
  padding: 0 12px;
  outline: none;
}

.role-template-select select:focus {
  border-color: #2E6BFF;
  box-shadow: 0 0 0 3px rgba(46,107,255,.10);
}

.role-permission-table {
  display: grid;
  gap: 10px;
}

.role-permission-head {
  display: none;
}

#rolePermissionMatrix {
  display: grid;
  gap: 14px;
}

.role-permission-row {
  display: grid;
  gap: 0;
  align-items: start;
  padding: 0;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #FFFFFF;
  overflow: hidden;
}

.role-permission-row:hover {
  border-color: #BFD3F5;
}

.role-permission-row > header {
  display: grid;
  gap: 6px;
}

.role-permission-row summary {
  min-height: 46px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 0 12px;
  color: #071225;
  cursor: pointer;
  list-style: none;
}

.role-permission-row summary::-webkit-details-marker {
  display: none;
}

.role-permission-row[open] summary {
  border-bottom: 1px solid #EEF2F7;
}

.role-permission-row summary strong {
  color: #071225;
  font-size: 14px;
  font-weight: 750;
}

.role-permission-row summary span {
  color: #64748B;
  font-size: 12px;
  font-weight: 650;
}

.role-permission-row > header strong {
  color: #071225;
  font-size: 16px;
  font-weight: 700;
}

.role-permission-row > header span {
  color: #6B7280;
  font-size: 13px;
  font-weight: 500;
}

.role-permission-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
}

.role-permission-groups section {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #F8FBFF;
}

.role-permission-groups h4 {
  margin: 0;
  color: #0d7b58;
  font-size: 13px;
  font-weight: 700;
}

.role-permission-row label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  color: #43546F;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.role-permission-row label:has(input:checked) {
  border-color: #2E6BFF;
  background: #EEF5FF;
  color: #0B2F63;
}

.role-permission-row label.disabled {
  color: #94A3B8;
  border-color: #DCE5F2;
  border-style: dashed;
  background: transparent;
}

.role-permission-row input,
.role-app-access-grid input,
.role-inline-check input {
  width: 17px;
  height: 17px;
  accent-color: #2E6BFF;
}

.role-empty-matrix {
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed #BFD3F5;
  border-radius: 16px;
  background: #FFFFFF;
  color: #5B6C86;
  text-align: center;
}

.role-advanced-permissions {
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  padding: 12px;
  background: #FFFFFF;
}

.role-advanced-permissions summary {
  cursor: pointer;
  color: #2E6BFF;
  font-weight: 800;
}

.role-advanced-permissions textarea {
  width: 100%;
  margin-top: 12px;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  padding: 12px;
  color: #43546F;
  font: 12px/1.5 Consolas, monospace;
}

.role-summary-card {
  position: static;
  display: grid;
  gap: 18px;
  padding: 22px;
}

.role-summary-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.role-summary-dashboard article {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid #DCE5F2;
  border-radius: 16px;
  background: #FFFFFF;
}

.role-summary-dashboard article > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #EEF5FF;
  color: #0d7b58;
}

.role-summary-dashboard svg {
  width: 18px;
  height: 18px;
}

.role-summary-dashboard small {
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.role-summary-dashboard strong {
  color: #071225;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.role-summary-card section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #DCE5F2;
  background: #FFFFFF;
}

.role-summary-card p {
  margin: 0;
  color: #8A5A00;
  font-size: 12px;
  font-weight: 700;
}

.role-summary-card p.ready {
  color: #127A42;
}

.role-workspace-errors {
  display: grid;
  gap: 8px;
}

.role-workspace-errors:empty {
  display: none;
}

.role-workspace-errors article {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #F3B8B8;
  border-radius: 14px;
  background: #FDECEC;
  color: #7A1F1F;
}

.role-workspace-errors article > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #FFFFFF;
  color: #B42318;
}

.role-workspace-errors strong {
  display: block;
  color: #7A1F1F;
  font-size: 13px;
  font-weight: 700;
}

.role-workspace-errors p {
  margin: 2px 0 0;
  color: #8A4B4B;
  font-size: 13px;
  font-weight: 500;
}

.role-action-footer {
  position: sticky;
  bottom: 16px;
  z-index: 18;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #DCE5F2;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.role-action-footer .primary-button {
  background: #2E6BFF;
  border-color: #2E6BFF;
  color: #FFFFFF;
}

.role-action-footer .secondary-button {
  border-color: #DCE5F2;
  background: #FFFFFF;
  color: #0B2F63;
}

.role-action-footer button:hover,
.role-action-footer button:focus-visible {
  border-color: #BFD3F5;
}

.role-action-footer div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.role-builder-page {
  width: min(1440px, 100%);
  justify-self: center;
  display: grid;
  gap: 18px;
  color: #071225;
}

.suite-main:has(.role-builder-page),
#content:has(.role-builder-page) {
  background: #EEF5FA !important;
}

.role-builder-hero,
.role-builder-tree-card,
.role-builder-panel,
.role-builder-selected-drawer {
  border: 1px solid #DCE5F2;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: none;
}

.role-builder-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 18px 22px;
}

.role-builder-hero small,
.role-builder-panel small,
.role-builder-selected-drawer small {
  color: #0d7b58;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.role-builder-hero h2 {
  margin: 5px 0 0;
  color: #071225;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  font-weight: 750;
}

.role-builder-hero p {
  max-width: 760px;
  margin: 8px 0 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.45;
}

.role-builder-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.role-builder-meta-row span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid #DCE5F2;
  border-radius: 999px;
  background: #F8FBFF;
  color: #52637C;
  font-size: 12px;
  font-weight: 650;
}

.role-builder-meta-row strong {
  color: #0B2F63;
  font-size: 13px;
  font-weight: 800;
}

.role-builder-root-cta {
  min-height: 42px;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.role-builder-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 0;
}

.role-builder-toolbar label {
  min-width: 0;
  flex: 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  background: #FFFFFF;
  color: #6B7280;
}

.role-builder-toolbar label svg {
  width: 17px;
  height: 17px;
}

.role-builder-toolbar input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #071225;
  font: inherit;
  font-weight: 600;
}

.role-builder-toolbar div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.role-builder-toolbar button,
.role-builder-panel footer button,
.role-builder-selected-drawer footer button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.role-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(360px, 40fr);
  gap: 18px;
  align-items: start;
}

.role-builder-layout.organization-only {
  grid-template-columns: 1fr;
}

.role-builder-tree-card {
  min-height: 560px;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  overflow: visible;
}

.role-builder-tree-card > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.role-builder-tree-card > header small {
  color: #0d7b58;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.role-builder-tree-card > header h3 {
  margin: 2px 0 0;
  color: #0F172A;
  font-size: 16px;
}

.role-builder-tree-card > header button {
  min-height: 36px;
  padding-inline: 12px;
}

.role-tree-canvas {
  min-width: 0;
}

.role-tree-root,
.role-tree-root ul {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.role-tree-root ul {
  margin-left: 14px;
  padding-left: 16px;
}

.role-tree-root ul::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -5px;
  bottom: 18px;
  width: 1px;
  background: #C9D8EC;
}

.role-tree-root li {
  position: relative;
}

.role-tree-root ul > li::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 23px;
  width: 11px;
  height: 1px;
  background: #C9D8EC;
}

.role-tree-node {
  min-height: 48px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.role-tree-node:hover,
.role-tree-node.active,
.role-tree-node.search-hit {
  border-color: #2E6BFF;
  background: #EEF5FF;
}

.role-tree-node.active {
  box-shadow: none;
}

.role-tree-node.dragging {
  opacity: .55;
}

.role-tree-node.drop-target {
  border-color: #0d7b58;
  background: #EAFBF5;
}

.role-tree-collapse {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0B2F63;
}

.role-tree-collapse:disabled {
  opacity: .45;
}

.role-tree-collapse svg {
  width: 15px;
  height: 15px;
}

.role-tree-node strong {
  display: block;
  color: #071225;
  font-size: 13px;
  font-weight: 750;
}

.role-tree-node strong em {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid #DCE5F2;
  border-radius: 999px;
  background: #F8FBFF;
  color: #0d7b58;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: capitalize;
}

.role-tree-node span {
  display: block;
  margin-top: 2px;
  color: #6B7280;
  font-size: 12px;
}

.role-tree-node small {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.role-tree-node small b,
.role-tree-node small i {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid #DCE5F2;
  border-radius: 999px;
  background: #FFFFFF;
  color: #43546F;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.role-tree-node small i {
  flex-basis: 100%;
  border-color: transparent;
  background: transparent;
  color: #64748B;
  padding: 0;
}

.role-node-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.role-tree-node:hover .role-node-actions,
.role-tree-node:focus-within .role-node-actions,
.role-tree-node.active .role-node-actions {
  opacity: 1;
  pointer-events: auto;
}

.role-node-actions button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #DCE5F2;
  border-radius: 9px;
  background: #FFFFFF;
  color: #0B2F63;
}

.role-node-more {
  position: relative;
}

.role-node-more[open] {
  z-index: 40;
}

.role-node-more summary {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #DCE5F2;
  border-radius: 9px;
  background: #FFFFFF;
  color: #0B2F63;
  cursor: pointer;
  list-style: none;
}

.role-node-more summary::-webkit-details-marker {
  display: none;
}

.role-node-more div {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 25;
  min-width: 190px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(20, 35, 80, 0.05);
}

.role-node-more div button {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 12px;
}

.role-node-more div button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.role-node-more div button:hover,
.role-node-more div button:focus-visible {
  border-radius: 8px;
  background: #EEF5FF;
  color: #2E6BFF;
}

.role-node-actions button:hover,
.role-node-actions button:focus-visible {
  border-color: #2E6BFF;
  color: #2E6BFF;
}

.role-node-actions svg {
  width: 15px;
  height: 15px;
}

.role-permission-drawer {
  display: grid;
  gap: 18px;
}

.role-permission-drawer-role {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #DCE5F2;
  border-radius: 16px;
  background: #F8FBFF;
}

.role-permission-drawer-role small,
.role-drawer-apps header p,
.role-permission-drawer-app-section header small,
.role-drawer-module summary span {
  color: #667085;
  font-size: 12px;
}

.role-permission-drawer-role strong {
  color: #071225;
  font-size: 20px;
  font-weight: 750;
}

.role-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.role-permission-copy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #F8FBFF;
}

.role-permission-copy-panel label {
  display: grid;
  gap: 6px;
  color: #43546F;
  font-size: 12px;
  font-weight: 700;
}

.role-permission-copy-panel select {
  min-height: 42px;
  width: 100%;
  border: 1px solid #DCE5F2;
  border-radius: 10px;
  background: #FFFFFF;
  color: #071225;
  font: inherit;
  padding: 0 12px;
}

.role-permission-copy-panel p {
  margin: 0;
  color: #667085;
  font-size: 13px;
}

.role-drawer-apps,
.role-permission-drawer-app-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #DCE5F2;
  border-radius: 16px;
  background: #FFFFFF;
}

.role-drawer-apps header,
.role-permission-drawer-app-section header {
  display: grid;
  gap: 4px;
}

.role-drawer-apps h3,
.role-permission-drawer-app-section h3 {
  margin: 0;
  color: #071225;
  font-size: 16px;
}

.role-drawer-apps header p {
  margin: 0;
}

.role-drawer-apps > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.role-drawer-app {
  min-height: 46px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  background: #FFFFFF;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.role-drawer-app.selected {
  border-color: #2E6BFF;
  background: #F8FBFF;
  color: #0B2F63;
}

.role-drawer-app input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2E6BFF;
}

.role-drawer-app span {
  min-width: 0;
}

.role-drawer-app small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #DCE5F2;
  border-radius: 999px;
  background: #FFFFFF;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.role-drawer-app.selected small {
  border-color: #BFD3F5;
  background: #EEF5FF;
  color: #0B2F63;
}

.role-drawer-apps-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.role-drawer-apps-footer strong {
  color: #0d7b58;
  font-size: 13px;
  font-weight: 800;
}

.role-drawer-modules {
  display: grid;
  gap: 14px;
}

.role-permission-drawer-app-section.hidden {
  display: none;
}

.role-drawer-module {
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #FFFFFF;
  overflow: hidden;
}

.role-drawer-module summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.role-drawer-module summary strong {
  color: #071225;
  font-size: 14px;
}

.role-drawer-permission-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 14px 14px;
}

.role-drawer-permission-groups section {
  display: grid;
  grid-template-columns: 116px repeat(3, minmax(92px, 1fr));
  align-items: center;
  gap: 0;
  min-height: 48px;
  padding: 0;
  border: 1px solid #DCE5F2;
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
}

.role-drawer-permission-groups h4 {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid #DCE5F2;
  background: #F8FBFF;
  color: #43546F;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.role-drawer-permission {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid #EEF2F7;
  border-radius: 0;
  background: #FFFFFF;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.role-drawer-permission:last-child {
  border-right: 0;
}

.role-drawer-permission input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #2E6BFF;
}

.role-drawer-permission.disabled {
  opacity: .48;
  cursor: not-allowed;
}

.role-drawer-permission em {
  color: #98A2B3;
  font-style: normal;
}

.role-drawer-permission:has(input:checked) {
  border-color: #EEF2F7;
  background: #FFFFFF;
  color: #0B2F63;
}

.role-permission-drawer-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 0;
  background: #FFFFFF;
}

.role-permission-drawer-footer strong {
  color: #0d7b58;
  font-size: 13px;
}

@media (max-width: 720px) {
  .role-drawer-apps > div,
  .role-drawer-permission-groups {
    grid-template-columns: 1fr;
  }

  .role-drawer-permission-groups section {
    grid-template-columns: 1fr;
  }

  .role-drawer-actions,
  .role-drawer-apps-footer,
  .role-permission-copy-panel,
  .role-permission-drawer-footer {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .role-permission-drawer-footer .primary-button,
  .role-drawer-actions button,
  .role-drawer-apps-footer button,
  .role-permission-copy-panel button {
    width: 100%;
  }
}

.role-builder-empty,
.role-builder-panel.empty,
.role-builder-selected-drawer.empty {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
}

.role-builder-empty > span,
.role-builder-panel.empty > span,
.role-builder-selected-drawer.empty > span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #EEF5FF;
  color: #2E6BFF;
}

.role-builder-empty h3,
.role-builder-panel.empty h3,
.role-builder-selected-drawer.empty h3 {
  margin: 0;
  color: #071225;
  font-size: 22px;
}

.role-builder-empty p,
.role-builder-panel.empty p,
.role-builder-selected-drawer.empty p {
  margin: 0;
  color: #6B7280;
}

.role-builder-panel {
  position: sticky;
  top: 118px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.role-builder-selected-drawer {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #F8FBFF;
}

.role-builder-selected-drawer.empty {
  min-height: 190px;
}

.role-builder-panel > header,
.role-builder-selected-drawer > header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.role-builder-panel > header > span,
.role-builder-selected-drawer > header > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #EEF5FF;
  color: #2E6BFF;
}

.role-builder-panel h3 {
  margin: 0;
  color: #071225;
  font-size: 17px;
  font-weight: 750;
}

.role-builder-selected-drawer h3 {
  margin: 0;
  color: #071225;
  font-size: 17px;
  font-weight: 750;
}

.role-builder-form,
.role-builder-fields,
.role-builder-apps,
.role-builder-permissions {
  display: grid;
  gap: 12px;
}

.role-builder-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.role-builder-fields .full {
  grid-column: 1 / -1;
}

.role-builder-fields label,
.role-builder-apps label {
  display: grid;
  gap: 8px;
  color: #43546F;
  font-size: 13px;
  font-weight: 600;
}

.role-builder-fields input,
.role-builder-fields select,
.role-builder-fields textarea,
.role-builder-permissions select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #FFFFFF;
  color: #071225;
  font: inherit;
  font-weight: 600;
  padding: 0 14px;
  outline: none;
}

.role-builder-fields textarea {
  min-height: 72px;
  padding-top: 10px;
}

.role-builder-fields input:focus,
.role-builder-fields select:focus,
.role-builder-fields textarea:focus,
.role-builder-permissions select:focus {
  border-color: #2E6BFF;
  box-shadow: none;
}

.role-builder-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.role-builder-meta article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #F8FBFF;
}

.role-builder-meta small {
  color: #6B7280;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.role-builder-meta strong {
  color: #071225;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.role-builder-apps,
.role-builder-permissions {
  padding: 12px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #FFFFFF;
}

.role-builder-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #FFFFFF;
}

.role-builder-apps h4,
.role-builder-permissions h4,
.role-builder-section h4 {
  margin: 0;
  color: #0d7b58;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.role-builder-apps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.role-builder-apps.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border: 0;
  background: transparent;
}

.role-builder-apps h4 {
  grid-column: 1 / -1;
}

.role-builder-apps label {
  min-height: 42px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 0 10px;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  background: #F8FBFF;
}

.role-builder-apps label:has(input:checked) {
  border-color: #2E6BFF;
  background: #EEF5FF;
}

.role-assigned-employees {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.role-assigned-employees span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #DCE5F2;
  border-radius: 999px;
  background: #FFFFFF;
  color: #43546F;
  font-size: 12px;
  font-weight: 700;
}

.role-builder-panel footer,
.role-builder-selected-drawer footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.role-builder-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.role-builder-chip-list span,
.role-app-tabs button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #DCE5F2;
  border-radius: 999px;
  background: #F8FBFF;
  color: #43546F;
  font-size: 12px;
  font-weight: 700;
}

.role-app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-app-tabs button.active {
  border-color: #2E6BFF;
  background: #EEF5FF;
  color: #0B2F63;
}

.role-permission-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #F8FBFF;
}

.role-permission-summary strong {
  color: #0F172A;
  font-size: 13px;
}

.role-permission-summary span {
  color: #64748B;
  font-size: 12px;
}

.role-inline-editor {
  display: grid;
  gap: 10px;
  margin: 6px 0 8px 34px;
  padding: 12px;
  border: 1px solid #2E6BFF;
  border-radius: 14px;
  background: #F8FBFF;
}

.role-inline-editor > strong {
  color: #0B2F63;
  font-size: 13px;
}

.role-inline-editor > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.role-inline-editor label {
  display: grid;
  gap: 5px;
  color: #43546F;
  font-size: 12px;
  font-weight: 650;
}

.role-inline-editor .full {
  grid-column: 1 / -1;
}

.role-inline-editor input,
.role-inline-editor select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #DCE5F2;
  border-radius: 10px;
  background: #FFFFFF;
  color: #0F172A;
  font: inherit;
  padding: 0 10px;
  outline: none;
}

.role-inline-permissions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  background: #FFFFFF;
}

.role-inline-permissions div {
  display: grid;
  gap: 2px;
}

.role-inline-permissions small {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.role-inline-permissions strong {
  color: #0B2F63;
  font-size: 13px;
}

.role-inline-permissions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.role-inline-permissions svg {
  width: 15px;
  height: 15px;
}

.role-inline-editor footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.settings-workspace {
  width: min(1440px, 100%);
  justify-self: center;
  display: grid;
  gap: 18px;
  color: #0F172A;
}

.suite-main:has(.settings-workspace),
#content:has(.settings-workspace) {
  background: #EEF5FA !important;
}

.role-builder-hero.compact {
  align-items: center;
}

.role-builder-hero.compact h2 {
  font-size: clamp(26px, 2.5vw, 34px);
}

.role-permissions-shell,
.role-applications-shell {
  display: grid;
  grid-template-columns: minmax(280px, .34fr) minmax(0, .66fr);
  gap: 18px;
  align-items: start;
}

.role-permissions-editor,
.role-applications-editor {
  min-width: 0;
}

.settings-mini-nav {
  display: grid;
  gap: 8px;
}

.settings-mini-nav button {
  min-height: 38px;
  justify-content: start;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0B2F63;
  font-weight: 700;
}

.settings360-control-center {
  gap: 24px;
}

.settings360-hero,
.settings360-toolbar,
.settings360-nav,
.settings360-detail-panel,
.settings360-detail-card,
.settings360-module-card,
.settings360-integration-card,
.settings360-wide-card,
.settings360-status-card {
  border: 1px solid #DCE5F2;
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}

.settings360-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 22px;
  align-items: start;
  padding: 26px;
  border-radius: 24px;
}

.settings360-hero > div {
  display: grid;
  gap: 8px;
}

.settings360-hero small,
.settings360-detail-panel > header small,
.settings360-nav header small {
  color: #0d7b58;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.settings360-hero h2 {
  margin: 0;
  color: #071225;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
}

.settings360-hero p,
.settings360-detail-panel > header p,
.settings360-detail-card p,
.settings360-module-card p,
.settings360-integration-card p {
  margin: 0;
  color: #4B5E7E;
  line-height: 1.5;
}

.settings360-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings360-status-card {
  display: grid;
  gap: 6px;
  min-height: 116px;
  padding: 14px;
  border-radius: 16px;
}

.settings360-status-card span,
.settings360-detail-panel > header > span,
.settings360-nav header > span,
.settings360-detail-card header > span,
.settings360-module-card header > span,
.settings360-integration-card header > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #EEF5FF;
  color: #0B2F63;
}

.settings360-status-card svg,
.settings360-detail-panel > header svg,
.settings360-nav header svg,
.settings360-detail-card header svg,
.settings360-module-card header svg,
.settings360-integration-card header svg {
  width: 21px;
  height: 21px;
}

.settings360-status-card small {
  color: #667085;
  font-size: 12px;
  font-weight: 750;
}

.settings360-status-card strong {
  color: #071225;
  font-size: 24px;
  font-weight: 850;
}

.settings360-status-card em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
}

.settings360-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, .45fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
}

.settings360-search {
  min-height: 48px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #DCE5F2;
  border-radius: 14px;
  background: #F8FBFF;
  color: #0B2F63;
}

.settings360-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #071225;
  font: inherit;
}

.settings360-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.settings360-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.settings360-quick-action svg {
  width: 17px;
  height: 17px;
}

.settings360-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.settings360-nav {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
}

.settings360-nav header,
.settings360-detail-panel > header,
.settings360-detail-card header,
.settings360-module-card header,
.settings360-integration-card header,
.settings360-wide-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.settings360-nav button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #344054;
  text-align: left;
}

.settings360-nav button.active,
.settings360-nav button:hover {
  border-color: #BFD3F5;
  background: #EEF5FF;
  color: #0B2F63;
}

.settings360-nav button > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #F4F8FF;
  color: currentColor;
}

.settings360-nav button strong,
.settings360-detail-panel h3,
.settings360-detail-card h4,
.settings360-module-card h4,
.settings360-integration-card h4,
.settings360-wide-card h4 {
  margin: 0;
  color: #071225;
}

.settings360-nav button small {
  grid-column: 2;
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
}

.settings360-detail-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 18px;
  border-radius: 22px;
}

.settings360-detail-panel > header {
  grid-template-columns: auto minmax(0, 1fr);
  padding-bottom: 16px;
  border-bottom: 1px solid #EEF2F7;
}

.settings360-detail-panel h3 {
  font-size: 26px;
}

.settings360-detail-grid,
.settings360-module-grid,
.settings360-integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings360-detail-card,
.settings360-module-card,
.settings360-integration-card,
.settings360-wide-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
}

.settings360-wide-card {
  grid-column: 1 / -1;
}

.settings360-detail-card footer,
.settings360-module-card footer,
.settings360-wide-card footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.settings360-module-card.disabled {
  background: #F8FAFC;
}

.settings360-permission-preview {
  display: grid;
  gap: 10px;
}

.settings360-permission-preview article {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  overflow: hidden;
}

.settings360-permission-preview article > strong {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 12px;
  background: #F8FBFF;
  color: #43546F;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.settings360-permission-preview div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings360-permission-preview label {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-left: 1px solid #EEF2F7;
  color: #344054;
  font-weight: 700;
}

.settings360-timeline {
  display: grid;
  gap: 12px;
}

.settings360-timeline article {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #DCE5F2;
  border-radius: 16px;
  background: #FFFFFF;
}

.settings360-timeline article > span {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: #0d7b58;
}

.settings360-timeline strong {
  color: #071225;
}

.settings360-timeline p,
.settings360-timeline small {
  margin: 3px 0 0;
  color: #667085;
}

.settings360-config-form {
  display: grid;
  gap: 12px;
}

.settings360-config-form label {
  display: grid;
  gap: 6px;
  color: #43546F;
  font-size: 13px;
  font-weight: 750;
}

.settings360-config-form input,
.settings360-config-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #DCE5F2;
  border-radius: 12px;
  color: #071225;
  padding: 10px 12px;
  font: inherit;
}

.settings360-config-form textarea {
  min-height: 84px;
  resize: vertical;
}

.settings360-config-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.settings360-filtered-out {
  display: none !important;
}

.product-catalogue-empty,
.product-intelligence-note {
  display: grid;
  gap: 10px;
  padding: 26px;
  border: 1px solid #DCE5F2;
  border-radius: 18px;
  background: #FFFFFF;
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}

.product-catalogue-empty strong,
.product-intelligence-note strong {
  color: #071225;
  font-size: 20px;
}

.product-catalogue-empty span,
.product-intelligence-note span {
  color: #4B5E7E;
}

.product-catalogue-empty div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.product-intelligence-note {
  grid-template-columns: minmax(0, 1fr);
  text-align: left;
  border-left: 4px solid #0d7b58;
}

.product-intelligence-note.ready {
  border-left-color: #2E6BFF;
}

.product-import-errors {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.product-import-errors article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #F7CACA;
  border-radius: 10px;
  background: #FFF7F7;
  color: #7F1D1D;
  text-align: left;
}

.product-profile-drawer {
  display: grid;
  gap: 10px;
}

.product-profile-drawer p {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #EEF2F7;
  color: #344054;
}

@media (max-width: 1080px) {
  .settings360-hero,
  .settings360-toolbar,
  .settings360-layout {
    grid-template-columns: 1fr;
  }

  .settings360-nav {
    position: static;
  }

  .settings360-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings360-quick-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .settings360-control-center {
    gap: 16px;
  }

  .settings360-hero,
  .settings360-toolbar,
  .settings360-nav,
  .settings360-detail-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .settings360-status-grid,
  .settings360-detail-grid,
  .settings360-module-grid,
  .settings360-integration-grid,
  .settings360-permission-preview div {
    grid-template-columns: 1fr;
  }

  .settings360-nav {
    max-height: 360px;
    overflow: auto;
  }

  .settings360-nav button {
    min-height: 52px;
  }

  .settings360-detail-panel > header,
  .settings360-detail-card header,
  .settings360-module-card header,
  .settings360-integration-card header,
  .settings360-wide-card header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .settings360-module-card header .badge,
  .settings360-integration-card header .badge {
    grid-column: 2;
    justify-self: start;
  }

  .settings360-quick-action,
  .settings360-detail-card footer button,
  .settings360-module-card footer button,
  .settings360-wide-card footer button,
  .settings360-integration-card button,
  .settings360-config-form footer button {
    width: 100%;
  }

  .settings360-detail-card footer,
  .settings360-module-card footer,
  .settings360-wide-card footer,
  .settings360-config-form footer {
    flex-direction: column;
  }

  .settings360-permission-preview article,
  .settings360-timeline article {
    grid-template-columns: 1fr;
  }

  .settings360-permission-preview label {
    border-left: 0;
    border-top: 1px solid #EEF2F7;
  }
}

.role-applications-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 1280px) {
  .role-access-panel .role-permission-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .role-builder-hero,
  .role-builder-layout {
    grid-template-columns: 1fr;
  }

  .role-permissions-shell,
  .role-applications-shell {
    grid-template-columns: 1fr;
  }

  .role-builder-panel {
    position: static;
  }

  .role-tree-canvas {
    min-width: 0;
    overflow-x: auto;
  }

  .role-inline-editor > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-builder-apps.compact,
  .role-applications-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .role-builder-page {
    gap: 22px;
  }

  .role-builder-hero,
  .role-builder-toolbar,
  .role-builder-tree-card,
  .role-builder-panel,
  .role-builder-selected-drawer {
    border-radius: 20px;
  }

  .role-builder-hero,
  .role-builder-toolbar {
    padding: 18px;
  }

  .role-builder-fields,
  .role-builder-meta,
  .role-builder-apps,
  .role-builder-apps.compact,
  .role-applications-grid {
    grid-template-columns: 1fr;
  }

  .role-builder-toolbar {
    display: grid;
  }

  .role-builder-toolbar label {
    min-width: 0;
  }

  .role-builder-toolbar div,
  .role-builder-panel footer,
  .role-builder-selected-drawer footer {
    justify-content: stretch;
  }

  .role-builder-toolbar button,
  .role-builder-panel footer button,
  .role-builder-selected-drawer footer button {
    flex: 1;
    justify-content: center;
  }

  .role-builder-tree-card {
    min-height: 360px;
    padding: 14px;
  }

  .role-tree-canvas {
    min-width: 0;
  }

  .role-tree-node {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .role-node-actions {
    grid-column: 2;
    opacity: 1;
    pointer-events: auto;
  }

  .role-inline-editor {
    margin-left: 0;
  }

  .role-inline-editor > div,
  .role-permission-summary {
    grid-template-columns: 1fr;
  }

  .role-permission-summary {
    display: grid;
  }
}

@media (max-width: 980px) {
  .role-hero-card,
  .role-workspace-layout {
    grid-template-columns: 1fr;
  }

  .role-summary-card {
    position: static;
  }

  .role-app-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .role-workspace-page {
    gap: 24px;
    padding-bottom: 120px;
  }

  .role-hero-card,
  .role-form-section,
  .role-summary-card {
    border-radius: 18px;
    padding: 18px;
  }

  .role-hero-card h2 {
    font-size: 30px;
  }

  .role-hero-stats,
  .role-form-grid,
  .role-app-access-grid {
    grid-template-columns: 1fr;
  }

  .role-permission-head {
    display: none;
  }

  .role-permission-row {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .role-permission-groups,
  .role-summary-dashboard {
    grid-template-columns: 1fr;
  }

  .role-permission-row strong {
    font-size: 16px;
  }

  .role-permission-row label {
    min-height: 46px;
  }

  .role-action-footer {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .role-action-footer div,
  .role-action-footer button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .salestos-ai form {
    grid-template-columns: 1fr;
  }

  .salestos-ai form button {
    justify-content: center;
  }

  .workspace-action {
    min-width: 96px;
  }
}

.os-prompts button:hover {
  border-color: #BBD2F0;
  color: #000000;
  transform: translateY(-1px);
}

.os-launchpad-list {
  display: grid;
  gap: 12px;
}

.os-launchpad-list button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 3px 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #E3EAF5;
  border-radius: 16px;
  background: #ffffff;
  color: #000000;
  text-align: left;
}

.os-launchpad-list button span {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #F1F6FC;
  color: #0B2F63;
}

.os-launchpad-list button strong {
  color: #000000;
  font-size: 15px;
}

.os-launchpad-list button small {
  color: #475467;
  font-size: 13px;
  line-height: 1.35;
}

.drawer-overlay.left-drawer {
  justify-content: flex-start;
}

.drawer-overlay.left-drawer .drawer {
  width: min(560px, 100%);
  border-radius: 0 28px 28px 0;
  animation: osDrawerSlide .24s ease both;
}

@keyframes osFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes osSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes osDrawerSlide {
  from { transform: translateX(-24px); opacity: .85; }
  to { transform: translateX(0); opacity: 1; }
}

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

@media (max-width: 900px) {
  #suiteShell[data-route="platform-home"] .suite-topbar {
    padding: 0 16px !important;
  }
  #suiteShell[data-route="platform-home"] .topbar-primary,
  #suiteShell[data-route="platform-home"] .topbar-utility {
    gap: 10px;
  }
  #suiteShell[data-route="platform-home"] #globalSearch {
    max-width: 100%;
  }
  #suiteShell[data-route="platform-home"] .content-stack {
    padding: 42px 18px 64px !important;
  }
  .os-ai-input {
    grid-template-columns: 1fr;
  }
  .os-recommendation {
    grid-template-columns: 1fr;
  }
  .os-recommendation button {
    width: 100%;
  }
}

/* SalesTOS SDL Header 1.0 */
.suite-topbar.salestos-global-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  min-height: 72px !important;
  height: 72px !important;
  display: grid !important;
  grid-template-columns: minmax(280px, auto) minmax(80px, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  border-bottom: 1px solid #E7EDF5 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #0B1220 !important;
  font-family: "Sora", "Inter", sans-serif !important;
}

.salestos-global-header .header-left,
.salestos-global-header .header-right {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.salestos-global-header .header-left {
  gap: 14px !important;
}

.salestos-global-header .header-center {
  min-width: 80px !important;
}

.salestos-global-header .header-right {
  justify-content: flex-end !important;
  gap: 22px !important;
}

.salestos-global-header .menu-button {
  display: none !important;
}

.salestos-global-header .header-launcher-button,
.salestos-global-header .business-events-button,
.salestos-global-header .header-profile-button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0B2F63 !important;
  font-family: "Sora", "Inter", sans-serif !important;
  letter-spacing: 0 !important;
}

.salestos-global-header .header-launcher-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 0 !important;
}

.salestos-global-header .topbar-home-logo,
#suiteShell[data-route="platform-home"] .salestos-global-header .topbar-home-logo {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  cursor: pointer !important;
}

.salestos-global-header .header-launcher-button span {
  display: none !important;
}

.salestos-global-header .header-identity {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.salestos-global-header .header-identity strong {
  color: #0B1220 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.salestos-global-header .header-identity span {
  color: #475467 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.salestos-global-header .header-page-title,
.salestos-global-header .header-hidden-control,
.salestos-global-header #globalSearch,
.salestos-global-header #branchSelector,
.salestos-global-header #moreFiltersButton,
.salestos-global-header #themeToggle,
.salestos-global-header #helpButton,
.salestos-global-header .topbar-utility,
.salestos-global-header .topbar-primary,
.salestos-global-header .topbar-title {
  display: none !important;
}

.salestos-global-header .business-events-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 !important;
}

.salestos-global-header .business-events-button > span {
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #0B2F63 !important;
}

.salestos-global-header .business-events-button svg {
  width: 20px !important;
  height: 20px !important;
}

.salestos-global-header .business-events-button strong {
  color: #0B1220 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.salestos-global-header .header-profile-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  padding: 0 2px !important;
  text-align: left !important;
}

.salestos-global-header .header-profile-button strong {
  color: #0B1220 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.salestos-global-header .header-profile-button span {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.salestos-global-header .header-profile-button em {
  display: none !important;
}

.salestos-global-header .header-profile-button b {
  font-style: normal !important;
  font-weight: 400 !important;
  color: #667085 !important;
}

.salestos-global-header button:focus-visible {
  outline: 2px solid #2563EB !important;
  outline-offset: 4px !important;
  border-radius: 8px !important;
}

.business-events-drawer,
.profile-menu-drawer {
  display: grid;
  gap: 10px;
}

.business-events-drawer button,
.profile-menu-drawer button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #EEF2F7;
  border-radius: 0;
  background: transparent;
  color: #0B1220;
  text-align: left;
  box-shadow: none;
}

.business-events-drawer button span {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  color: #0B2F63;
}

.business-events-drawer button strong,
.profile-menu-drawer button {
  font-weight: 500;
}

.business-events-drawer button small {
  color: #667085;
}

.profile-menu-drawer header h3 {
  margin: 0;
  color: #0B1220;
  font-size: 20px;
}

.profile-menu-drawer header p {
  margin: 3px 0 12px;
  color: #667085;
}

.profile-menu-drawer button {
  grid-template-columns: 1fr;
}

.tenant-profile-menu {
  position: fixed;
  z-index: 140;
  width: min(236px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid #E4EBF5;
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .14);
  color: #0B1220;
  font-family: "Sora", "Inter", sans-serif;
  animation: tenantMenuIn .16s ease both;
}

.tenant-profile-menu header {
  display: grid;
  gap: 3px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid #EEF2F7;
  margin-bottom: 4px;
}

.tenant-profile-menu header strong {
  color: #0B1220;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.tenant-profile-menu header span {
  color: #667085;
  font-size: 12px;
  line-height: 1.2;
}

.tenant-profile-menu button {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #0B1220;
  box-shadow: none;
  text-align: left;
  transition: color .16s ease, background-color .16s ease;
}

.tenant-profile-menu button span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #0B2F63;
}

.tenant-profile-menu button svg {
  width: 17px;
  height: 17px;
}

.tenant-profile-menu button strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.tenant-profile-menu button:hover {
  background: #F4F7FB;
  color: #2563EB;
}

.tenant-profile-menu button:hover span {
  color: #2563EB;
}

@keyframes tenantMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .suite-topbar.salestos-global-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  .salestos-global-header .header-center {
    display: none !important;
  }
  .salestos-global-header .menu-button {
    display: inline-grid !important;
  }
  .salestos-global-header .header-launcher-button span,
  .salestos-global-header .header-identity strong,
  .salestos-global-header .business-events-button strong,
  .salestos-global-header .header-profile-button strong {
    display: none !important;
  }
  .salestos-global-header .header-identity span {
    max-width: 150px !important;
    font-size: 12px !important;
  }
  .salestos-global-header .header-right {
    gap: 12px !important;
  }
}

#suiteShell[data-route="platform-home"] .salestos-global-header .topbar-home-logo {
  width: 48px !important;
  height: 48px !important;
}

.salestos-global-header .header-launcher-button {
  min-height: 62px !important;
}

.salestos-global-header .topbar-home-logo,
#suiteShell[data-route="platform-home"] .salestos-global-header .topbar-home-logo,
#suiteShell[data-route="sales-360"] .salestos-global-header .topbar-home-logo {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
}

.salestos-global-header #headerWorkspaceName,
.salestos-global-header .header-breadcrumbs {
  display: none !important;
}

.mobile-menu-action {
  display: none;
}

@media (max-width: 900px) {
  .suite-topbar.salestos-global-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 64px !important;
    height: 64px !important;
    gap: 10px !important;
    padding: 0 14px !important;
  }

  .salestos-global-header .header-left {
    gap: 10px !important;
    min-width: 0 !important;
  }

  .salestos-global-header .menu-button {
    display: inline-grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border: 1px solid #E1E9F4 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    color: #0B2F63 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
  }

  .salestos-global-header .header-launcher-button,
  .salestos-global-header .header-center,
  .salestos-global-header .header-right,
  .salestos-global-header #headerWorkspaceName,
  .salestos-global-header .header-breadcrumbs {
    display: none !important;
  }

  .salestos-global-header .header-identity strong {
    display: block !important;
    max-width: calc(100vw - 96px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  .mobile-menu-action {
    display: block;
  }
}

/* Mobile header correction: keep menu and breadcrumbs visible, hide only workspace label. */
.salestos-global-header #headerWorkspaceName {
  display: none !important;
}

.salestos-global-header .header-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

@media (max-width: 900px) {
  .suite-topbar.salestos-global-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .salestos-global-header .header-left {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .salestos-global-header .menu-button,
  #mobileMenuButton {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .salestos-global-header .header-launcher-button,
  .salestos-global-header .header-center,
  .salestos-global-header .header-right,
  .salestos-global-header #headerWorkspaceName {
    display: none !important;
  }

  .salestos-global-header .header-identity {
    display: grid !important;
    min-width: 0 !important;
  }

  .salestos-global-header .header-identity strong,
  .salestos-global-header .header-breadcrumbs {
    display: flex !important;
    max-width: calc(100vw - 96px) !important;
  }
}

/* Incentives workspace: remove legacy left menu and use full-width workspace shell. */
#suiteShell[data-route="sales-360-incentives"] .suite-sidebar,
#suiteShell[data-route="sales-360-incentive-scheme-new"] .suite-sidebar {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
}

#suiteShell[data-route="sales-360-incentives"] .suite-main,
#suiteShell[data-route="sales-360-incentive-scheme-new"] .suite-main {
  margin-left: 0 !important;
  background: #F8FAFC !important;
}

#suiteShell[data-route="sales-360-incentives"] .content-stack,
#suiteShell[data-route="sales-360-incentive-scheme-new"] .content-stack {
  max-width: none !important;
  margin: 0 !important;
  padding-inline: clamp(18px, 3vw, 44px) !important;
}

/* Sales 360 function pages: OS-style shell and universal icon bubbles. */
#suiteShell[data-route^="sales-360"] {
  background: #F8FAFC !important;
}

@media (min-width: 901px) {
  #suiteShell[data-route^="sales-360"] .suite-sidebar {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
  }

  #suiteShell[data-route^="sales-360"] .suite-main {
    margin-left: 0 !important;
  }
}

#suiteShell[data-route^="sales-360"] .content-stack {
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(18px, 2.5vw, 36px) clamp(18px, 3vw, 44px) !important;
}

#suiteShell[data-route="sales-360"] .content-stack,
#suiteShell[data-route="sales-360-salesperson"] .content-stack,
#suiteShell[data-route="sales-360-employee-detail"] .content-stack {
  padding: 0 !important;
}

.sales360-workspace-page {
  width: min(1280px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}

.sales360-workspace-main {
  gap: 18px !important;
}

.sales360-menu {
  display: none !important;
}

.sales360-workspace-header {
  position: relative !important;
  top: auto !important;
  border-radius: 24px !important;
  border: 1px solid #DCE6F3 !important;
  border-left: 0 !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .06) !important;
}

.sales360-workspace-header .workspace-header-icon,
.sales360-workspace-header .workspace-header-title > span,
.sales360-workspace-card > span,
.workspace-action span {
  border-radius: 18px !important;
  background: #E8F0FE !important;
  color: #1A73E8 !important;
  box-shadow: inset 0 0 0 1px rgba(26,115,232,.08) !important;
}

.sales360-function-carousel {
  width: min(1220px, 100%) !important;
  margin: 2px auto 4px !important;
}

.sales360-function-carousel .os-sales-app-icons button.active span,
.sales360-function-carousel .os-sales-app-icons button:hover span,
.workspace-action:hover span,
.workspace-action.selected span {
  background: #DDEBFF !important;
  color: #1A73E8 !important;
  box-shadow: inset 0 0 0 1px rgba(26,115,232,.12), 0 4px 12px rgba(60,64,67,.14) !important;
}

.sales360-function-carousel .os-sales-app-icons button.active strong,
.sales360-function-carousel .os-sales-app-icons button:hover strong {
  color: #1A73E8 !important;
}

.sales360-filters,
.sales360-workspace-section,
.sales360-page-block,
.sales360-data-grid,
.sales360-insights-block,
.sales360-activity-block {
  border-radius: 24px !important;
}

.sales360-filters {
  border-color: #E4EBF5 !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.045) !important;
}

.sales360-workspace-section > div {
  gap: 14px !important;
}

.sales360-workspace-card {
  min-height: 132px !important;
  grid-template-columns: 56px minmax(0, 1fr) 16px !important;
  border-color: #E4EBF5 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 38px rgba(15,23,42,.045) !important;
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.sales360-workspace-card:hover {
  transform: translateY(-1px) !important;
  border-color: #D5E6FF !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.07) !important;
}

.sales360-workspace-card > span {
  width: 52px !important;
  height: 52px !important;
}

.sales360-workspace-card > span svg,
.sales360-workspace-card > span .nav-svg,
.workspace-action span svg {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 2 !important;
}

.sales360-workspace-kpis article {
  border-color: #E4EBF5 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.035) !important;
}

.sales360-incentives-workspace .workspace-actions,
.workspace-actions {
  justify-content: center !important;
  gap: 18px !important;
}

.sales360-incentives-workspace .workspace-action,
.workspace-action {
  min-width: 104px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #3C4043 !important;
  box-shadow: none !important;
}

.sales360-incentives-workspace .workspace-action span,
.workspace-action span {
  width: 52px !important;
  height: 52px !important;
}

.sales360-incentives-workspace .workspace-action:hover,
.sales360-incentives-workspace .workspace-action.selected,
.workspace-action:hover,
.workspace-action.selected {
  background: transparent !important;
  color: #1A73E8 !important;
  transform: none !important;
}

.sales360-incentives-workspace .workspace-action:hover strong,
.sales360-incentives-workspace .workspace-action.selected strong,
.workspace-action:hover strong,
.workspace-action.selected strong {
  color: #1A73E8 !important;
}

@media (max-width: 900px) {
  #suiteShell[data-route^="sales-360"].sidebar-expanded .suite-sidebar {
    display: grid !important;
  }

  #suiteShell[data-route^="sales-360"] .content-stack {
    padding: 16px !important;
  }

  #suiteShell[data-route="sales-360"] .content-stack,
  #suiteShell[data-route="sales-360-salesperson"] .content-stack,
  #suiteShell[data-route="sales-360-employee-detail"] .content-stack {
    padding: 0 !important;
  }

  .sales360-workspace-section > div,
  .sales360-workspace-kpis {
    grid-template-columns: 1fr !important;
  }
}

/* Performance 360 focused dashboard */
.performance360-page .sales360-workspace-main {
  gap: 20px !important;
}

.performance360-page .workspace-actions {
  justify-content: flex-start !important;
}

.performance-dashboard {
  display: grid;
  gap: 20px;
}

.performance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.performance-hero-kpi {
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px;
  border: 1px solid #E4EBF5;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .055);
}

.performance-hero-kpi span {
  color: #475467;
  font-size: 13px;
  font-weight: 650;
}

.performance-hero-kpi strong {
  color: #0B1220;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
}

.performance-hero-kpi small {
  color: #667085;
  font-size: 13px;
}

.performance-hero-kpi.tone-blue { border-top: 4px solid #1A73E8; }
.performance-hero-kpi.tone-green { border-top: 4px solid #188038; }
.performance-hero-kpi.tone-amber { border-top: 4px solid #F9AB00; }
.performance-hero-kpi.tone-purple { border-top: 4px solid #7C3AED; }

.performance-overview-grid,
.performance-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
  gap: 16px;
}

.performance-overview-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, .75fr) minmax(260px, .8fr);
}

.performance-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
  gap: 16px;
}

.performance-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  border: 1px solid #E4EBF5;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .05);
}

.performance-panel h3 {
  margin: 0;
  color: #0B1220;
  font-size: 18px;
  font-weight: 650;
}

.performance-factor-row {
  display: grid;
  gap: 8px;
}

.performance-factor-row div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.performance-factor-row strong {
  color: #0B1220;
  font-size: 14px;
  font-weight: 650;
}

.performance-factor-row span {
  color: #667085;
  font-size: 12px;
}

.performance-factor-row em {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #E8EEF7;
}

.performance-factor-row i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #1A73E8, #34A853);
}

.performance-top-list {
  display: grid;
  gap: 10px;
}

.performance-top-list article {
  min-height: 54px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #EEF2F7;
}

.performance-top-list article:last-child {
  border-bottom: 0;
}

.performance-top-list article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #E8F0FE;
  color: #1A73E8;
  font-size: 12px;
  font-weight: 700;
}

.performance-top-list strong,
.performance-top-list b {
  color: #0B1220;
  font-size: 13px;
}

.performance-top-list small {
  color: #667085;
  font-size: 12px;
}

.performance-insights-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: #344054;
  line-height: 1.55;
}

.performance-rules-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid #DCE6F3;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .055);
}

.performance-rules-card header {
  display: grid;
  gap: 6px;
}

.performance-rules-card small {
  color: #1A73E8;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.performance-rules-card h3 {
  margin: 0;
  color: #0B1220;
  font-size: 26px;
}

.performance-rules-card p {
  margin: 0;
  color: #667085;
}

.performance-rules-card div {
  display: grid;
  gap: 10px;
}

.performance-rules-card article,
.performance-rules-card footer {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border: 1px solid #EEF2F7;
  border-radius: 14px;
  background: #F8FAFC;
}

.performance-rules-card input {
  width: 90px;
  min-height: 34px;
  border: 1px solid #DCE6F3;
  border-radius: 10px;
  background: #FFFFFF;
  color: #0B1220;
  text-align: right;
  font-weight: 650;
}

.performance-rules-card footer {
  background: #E8F0FE;
  color: #0B2F63;
  font-weight: 750;
}

.performance-activity-compact p {
  margin: 0;
  color: #667085;
}

@media (max-width: 1100px) {
  .performance-kpi-grid,
  .performance-overview-grid,
  .performance-grid-two,
  .performance-lower-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .performance-kpi-grid,
  .performance-overview-grid,
  .performance-grid-two,
  .performance-lower-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile OS drawer: floating menu instead of permanent side rail. */
.mobile-workspace-menu {
  display: none;
}

@media (max-width: 900px) {
  .suite-topbar.salestos-global-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 96px !important;
    height: 96px !important;
    padding: 0 26px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 1px 0 rgba(11, 47, 99, .08) !important;
  }

  .salestos-global-header .menu-button,
  #mobileMenuButton {
    width: 78px !important;
    height: 78px !important;
    flex-basis: 78px !important;
    border-radius: 28px !important;
    border-color: #DDE7F4 !important;
    background: rgba(255,255,255,.96) !important;
    color: #0B2F63 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08) !important;
  }

  .salestos-global-header .header-identity strong {
    display: block !important;
    max-width: calc(100vw - 180px) !important;
    color: #071B4D !important;
    font-size: clamp(20px, 5vw, 30px) !important;
    font-weight: 750 !important;
  }

  .salestos-global-header .header-breadcrumbs {
    display: none !important;
  }

  .salestos-global-header .header-right {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  .salestos-global-header .header-profile-button {
    display: none !important;
  }

  .salestos-global-header .business-events-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    color: #071B4D !important;
  }

  .salestos-global-header .business-events-button strong {
    display: none !important;
  }

  .salestos-global-header .business-events-button > span,
  .salestos-global-header .business-events-button svg {
    width: 30px !important;
    height: 30px !important;
  }

  .suite-shell .suite-sidebar,
  .suite-shell.sidebar-collapsed .suite-sidebar,
  #suiteShell[data-route^="sales-360"] .suite-sidebar,
  #suiteShell[data-route^="sales-360"].sidebar-collapsed .suite-sidebar {
    position: fixed !important;
    top: 108px !important;
    left: 28px !important;
    z-index: 120 !important;
    width: min(288px, calc(100vw - 56px)) !important;
    max-height: calc(100vh - 132px) !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 18px 14px !important;
    border: 1px solid rgba(221, 231, 244, .88) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.96) !important;
    color: #071B4D !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .16) !important;
    overflow: auto !important;
    transform: translateX(-18px) scale(.98) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease !important;
  }

  .suite-shell.sidebar-expanded .suite-sidebar,
  #suiteShell[data-route^="sales-360"].sidebar-expanded .suite-sidebar {
    transform: translateX(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .suite-sidebar .sidebar-brand,
  .suite-sidebar .sidebar-bottom,
  .suite-sidebar .sidebar-nav > .nav-group {
    display: none !important;
  }

  .suite-sidebar .sidebar-nav {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .mobile-workspace-menu {
    display: grid !important;
    gap: 10px !important;
  }

  .mobile-workspace-menu button {
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #071B4D;
    box-shadow: none;
    text-align: left;
  }

  .mobile-workspace-menu button.active {
    background: #EEF5FF;
    color: #1A73E8;
  }

  .mobile-workspace-menu button span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: currentColor;
  }

  .mobile-workspace-menu button svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.2;
  }

  .mobile-workspace-menu button strong {
    color: currentColor;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
  }

  .suite-main,
  .suite-shell.sidebar-expanded .suite-main,
  #suiteShell[data-route^="sales-360"] .suite-main,
  #suiteShell[data-route^="sales-360"].sidebar-expanded .suite-main {
    margin-left: 0 !important;
  }
}

/* Performance 360 command center refinement */
.performance360-page {
  overflow-x: hidden;
}

.performance360-page .sales360-workspace-main {
  width: min(100%, 1480px) !important;
  padding-inline: clamp(18px, 3vw, 36px) !important;
}

.performance-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid #DDE8F7;
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 22px 55px rgba(11, 47, 99, .08);
}

.performance-hero-card .salestos-breadcrumbs {
  margin-bottom: 18px;
}

.performance-hero-kicker {
  margin: 0 0 8px;
  color: #0B3A75;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.performance-hero-card h1 {
  margin: 0;
  color: #071B4D;
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800;
  line-height: 1.02;
}

.performance-hero-card p:last-child {
  max-width: 760px;
  margin: 14px 0 0;
  color: #4B5E7E;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
}

.performance-hero-badge {
  min-width: 210px;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  border-radius: 24px;
  background: #F4F8FD;
  color: #071B4D;
}

.performance-hero-badge span {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #EAF2FF;
  color: #0B3A75;
}

.performance-hero-badge svg {
  width: 30px;
  height: 30px;
}

.performance-hero-badge strong {
  font-size: 18px;
  font-weight: 800;
}

.performance-hero-badge small {
  color: #64748B;
  font-size: 13px;
  font-weight: 700;
}

.performance-workspace-carousel {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: 14px;
  align-items: center;
}

.performance-workspace-track {
  min-width: 0;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding: 8px 2px 14px;
}

.performance-workspace-icon {
  flex: 0 0 136px;
  min-height: 128px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: #071B4D;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background-color .18s ease;
}

.performance-workspace-icon span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid #D8E6F8;
  border-radius: 22px;
  background: #F5F9FF;
  box-shadow: 0 12px 24px rgba(11, 47, 99, .06);
  color: #0B3A75;
}

.performance-workspace-icon:nth-child(3n + 2) span {
  background: #ECFDF3;
  color: #0F8B4C;
}

.performance-workspace-icon:nth-child(3n + 3) span {
  background: #FFF8E6;
  color: #B76A00;
}

.performance-workspace-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
}

.performance360-page .performance-workspace-icon span {
  width: 68px !important;
  min-width: 68px !important;
  height: 68px !important;
  min-height: 68px !important;
}

.performance360-page .performance-workspace-icon svg,
.performance360-page .performance-workspace-icon .nav-svg {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  stroke-width: 2.25 !important;
}

.performance-workspace-icon strong {
  color: currentColor;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.performance-workspace-icon:hover,
.performance-workspace-icon.active {
  color: #1A73E8;
  transform: translateY(-4px);
}

.performance-workspace-icon.active span {
  border-color: #A7C7FA;
  background: #EAF2FF;
  color: #1A73E8;
  box-shadow: 0 18px 34px rgba(26, 115, 232, .16);
}

.performance-view-selector {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr) minmax(260px, .9fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #DDE8F7;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

.performance-view-selector small,
.performance-view-selector label span {
  display: block;
  color: #64748B;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.performance-view-selector strong {
  color: #071B4D;
  font-size: 18px;
  font-weight: 800;
}

.performance-view-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.performance-view-options button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #DDE8F7;
  border-radius: 999px;
  background: #FFFFFF;
  color: #334155;
  font-weight: 800;
}

.performance-view-options button.active {
  border-color: #A7C7FA;
  background: #EAF2FF;
  color: #1A73E8;
}

.performance-view-selector select {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  border: 1px solid #DDE8F7;
  border-radius: 14px;
  background: #FFFFFF;
  color: #071B4D;
  font-weight: 700;
}

.performance-view-selector select:disabled {
  opacity: .55;
  background: #F8FAFC;
}

.performance-carousel-button {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #DDE8F7;
  border-radius: 999px;
  background: #FFFFFF;
  color: #071B4D;
  box-shadow: 0 12px 28px rgba(11, 47, 99, .08);
  cursor: pointer;
}

.performance-carousel-button:disabled {
  opacity: .35;
  cursor: default;
  box-shadow: none;
}

.performance360-page .sales360-filters {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 1.4fr) auto;
  align-items: end;
  gap: 16px;
  padding: 20px;
  border: 1px solid #DDE8F7;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 16px 40px rgba(11, 47, 99, .06);
}

.performance360-page .sales360-filters label {
  min-width: 0;
}

.performance360-page .sales360-filters button {
  min-height: 50px;
  white-space: nowrap;
}

.performance360-page .performance-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.performance360-page .performance-hero-kpi {
  min-height: 172px;
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(11, 47, 99, .06);
}

.performance360-page .performance-hero-kpi strong {
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1;
}

.performance360-page .performance-overview-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr) minmax(240px, .8fr);
  align-items: stretch;
}

.performance360-page .performance-lower-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
}

.performance-panel {
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(11, 47, 99, .06);
}

.performance-focused-empty {
  display: grid;
  gap: 18px;
}

.performance-focused-empty > .primary-button {
  justify-self: start;
}

.performance-rules-card.invalid footer strong {
  color: #C2410C;
}

.performance-rules-card.invalid footer::after {
  content: "Total must equal 100%";
  margin-left: 12px;
  color: #C2410C;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .performance360-page .performance-kpi-grid,
  .performance360-page .performance-overview-grid,
  .performance360-page .performance-lower-grid {
    grid-template-columns: 1fr 1fr;
  }

  .performance360-page .sales360-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .performance-workspace-carousel {
    display: none !important;
  }

  .performance360-page .sales360-workspace-main {
    padding: 22px 18px 40px !important;
    gap: 18px !important;
  }

  .performance-hero-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 28px;
  }

  .performance-hero-card h1 {
    font-size: 42px;
  }

  .performance-hero-badge {
    width: 100%;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .performance-hero-badge small {
    grid-column: 2;
  }

  .performance360-page .sales360-filters,
  .performance360-page .performance-view-selector,
  .performance360-page .performance-kpi-grid,
  .performance360-page .performance-overview-grid,
  .performance360-page .performance-grid-two,
  .performance360-page .performance-lower-grid {
    grid-template-columns: 1fr !important;
  }

  .performance360-page .sales360-filters {
    padding: 22px;
    border-radius: 28px;
  }

  .performance360-page .sales360-filters button {
    width: 100%;
  }

  .performance360-page .performance-hero-kpi {
    min-height: 134px;
  }
}

@media (max-width: 560px) {
  .performance-hero-card h1 {
    font-size: 34px;
  }

  .performance-hero-card p:last-child {
    font-size: 16px;
  }

  .performance-hero-badge span {
    width: 50px;
    height: 50px;
    border-radius: 18px;
  }

  .performance360-page .performance-workspace-icon {
    flex-basis: 118px;
    min-height: 116px;
  }

  .performance360-page .performance-workspace-icon span {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
  }

  .performance360-page .performance-workspace-icon svg,
  .performance360-page .performance-workspace-icon .nav-svg {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
  }
}

/* SalesTOS card shadow standard: border first, subtle centered elevation. */
:root {
  --salestos-card-shadow-sm: 0 4px 12px rgba(15, 23, 42, .05);
  --salestos-card-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

.performance360-page .performance-hero-card,
.performance360-page .performance-panel,
.performance360-page .performance-hero-kpi,
.performance360-page .performance-rules-card,
.performance360-page .sales360-filters,
.performance360-page .performance-view-selector {
  border: 1px solid #DDE8F7 !important;
  background: #FFFFFF !important;
  box-shadow: var(--salestos-card-shadow) !important;
}

.performance360-page .performance-workspace-icon span,
.performance360-page .performance-carousel-button,
.performance360-page .performance-hero-badge {
  box-shadow: var(--salestos-card-shadow-sm) !important;
}

.performance360-page .performance-workspace-icon.active span,
.performance360-page .performance-workspace-icon:hover span {
  box-shadow: var(--salestos-card-shadow) !important;
}

/* Approved Performance 360 workspace */
.sp360-page {
  min-height: 100%;
  padding: 0 clamp(18px, 3.2vw, 46px) 36px;
  background: #F7FAFF;
  color: #071B4D;
}

.sp360-page button {
  font: inherit;
}

.sp360-topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #E5EDF8;
  background: #FFFFFF;
  margin: 0 calc(clamp(18px, 3.2vw, 46px) * -1) 20px;
  padding: 0 clamp(18px, 3.2vw, 46px);
}

.sp360-topbar > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sp360-topbar > div > button,
.sp360-user-dot {
  width: 38px;
  height: 38px;
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #08255D;
}

.sp360-topbar b {
  position: absolute;
  top: -3px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #FF3B3B;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 18px;
}

.sp360-user-dot {
  background: #08255D;
  color: #FFFFFF;
}

.sp360-hero-row {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.5fr);
  gap: 18px;
  margin-bottom: 14px;
}

.sp360-hero-title,
.sp360-recommendation,
.sp360-ai-card,
.sp360-icon-nav,
.sp360-card {
  border: 1px solid #DDE8F7;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.sp360-hero-title {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 28px;
}

.sp360-hero-title > span {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #E8F0FF;
  color: #0B63F6;
}

.sp360-hero-title svg {
  width: 34px;
  height: 34px;
}

.sp360-hero-title h2 {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.1;
}

.sp360-hero-title p,
.sp360-recommendation p {
  margin: 0;
  color: #40537A;
  line-height: 1.45;
}

.sp360-recommendation {
  min-height: 112px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  border-color: #FED7AA;
}

.sp360-recommendation > span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #FFEDD5;
  color: #F97316;
}

.sp360-recommendation small {
  display: block;
  margin-bottom: 6px;
  color: #F97316;
  font-size: 12px;
  font-weight: 900;
}

.sp360-recommendation strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
}

.sp360-recommendation .primary-button {
  min-width: 168px;
  background: #FA5B13;
  border-color: #FA5B13;
  box-shadow: 0 12px 20px rgba(250, 91, 19, .18);
}

.sp360-ai-card {
  padding: 14px 28px;
  margin-bottom: 14px;
}

.sp360-ai-card form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
}

.sp360-ai-card input,
.sp360-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #DDE8F7;
  border-radius: 999px;
  background: #FFFFFF;
  padding: 0 18px;
  color: #071B4D;
  font-weight: 700;
}

.sp360-ai-card form button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #082D70;
  color: #FFFFFF;
}

.sp360-ai-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.sp360-ai-card > div button {
  min-height: 32px;
  padding: 0 18px;
  border: 1px solid #DDE8F7;
  border-radius: 999px;
  background: #FFFFFF;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.sp360-icon-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 16px 0;
  margin-bottom: 14px;
}

.sp360-icon-nav .performance-workspace-track {
  width: 100%;
  min-width: 0;
}

.sp360-nav-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #E5EDF8;
  border-radius: 999px;
  background: #FFFFFF;
  color: #08255D;
}

.sp360-nav-item {
  flex: 0 0 116px;
  min-height: 86px;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  border-radius: 14px;
  background: #FFFFFF;
  color: #071B4D;
}

.sp360-nav-item span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #D8E6F8;
  border-radius: 14px;
  background: #EEF5FF;
  color: #0B63F6;
}

.sp360-nav-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.1;
}

.sp360-nav-item.tone-green span { background: #EAFBF1; color: #159451; }
.sp360-nav-item.tone-purple span { background: #F1ECFF; color: #6D4AFF; }
.sp360-nav-item.tone-red span { background: #FFF0F0; color: #E11D48; }
.sp360-nav-item.tone-orange span { background: #FFF5E8; color: #EA7A12; }
.sp360-nav-item.tone-slate span { background: #F4F7FB; color: #3B4A61; }

.sp360-nav-item strong {
  font-size: 12px;
  font-weight: 900;
}

.sp360-nav-item.active {
  color: #0B63F6;
  background: #FFFFFF;
  box-shadow: none;
}

.sp360-nav-item.active::after {
  content: "";
  width: 82px;
  height: 3px;
  position: absolute;
  bottom: 0;
  border-radius: 999px;
  background: #0B63F6;
}

.sp360-workspace-grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(520px, 1.55fr) minmax(330px, .95fr);
  gap: 14px;
  align-items: start;
}

.sp360-card {
  padding: 18px;
}

.sp360-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sp360-card h3 {
  margin: 0;
  font-size: 17px;
}

.sp360-card header > button {
  border: 0;
  background: transparent;
  color: #0B63F6;
  font-weight: 900;
}

.sp360-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  margin-bottom: 12px;
}

.sp360-search button {
  border: 1px solid #DDE8F7;
  border-radius: 12px;
  background: #FFFFFF;
  color: #08255D;
}

.sp360-employee-list {
  display: grid;
  gap: 10px;
}

.sp360-employee-row {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 18px;
  gap: 12px;
  align-items: center;
  border: 1px solid #E4ECF7;
  border-radius: 12px;
  background: #FFFFFF;
  padding: 12px;
  text-align: left;
  color: #071B4D;
}

.sp360-employee-row.active {
  border-color: #0B63F6;
  background: #F5F9FF;
  box-shadow: 0 8px 18px rgba(11, 99, 246, .09);
}

.sp360-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #DDE7F5, #F9FBFF);
  color: #08255D;
  font-size: 13px;
  font-weight: 900;
}

.sp360-avatar.large {
  width: 90px;
  height: 90px;
  font-size: 24px;
}

.sp360-employee-row strong,
.sp360-employee-row small,
.sp360-employee-row em {
  display: block;
}

.sp360-employee-row small {
  margin: 4px 0;
  color: #64748B;
  font-size: 12px;
  font-style: normal;
}

.sp360-employee-row em {
  color: #334155;
  font-size: 12px;
  font-style: normal;
}

.sp360-employee-row b {
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 11px;
  white-space: nowrap;
}

.sp360-employee-row b.tone-green { background: #DCFCE7; color: #16803A; }
.sp360-employee-row b.tone-orange { background: #FFEDD5; color: #EA580C; }

.sp360-stars {
  color: #F59E0B;
  letter-spacing: 1px;
}

.sp360-employees-card footer {
  margin-top: 14px;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
}

.sp360-employees-card header button {
  color: #0B63F6;
  font-size: 12px;
}

.sp360-profile-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, auto);
  align-items: start !important;
  gap: 18px !important;
}

.sp360-profile-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.sp360-profile-head h3 i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22C55E;
}

.sp360-profile-head p {
  margin: 0 0 14px;
  color: #40537A;
  font-weight: 700;
}

.sp360-profile-head section {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: #40537A;
  font-size: 13px;
}

.sp360-profile-head section span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sp360-profile-head aside {
  display: grid;
  grid-template-columns: auto auto;
  gap: 7px 14px;
  align-items: center;
  font-size: 13px;
}

.sp360-profile-head aside small {
  color: #40537A;
  font-weight: 800;
}

.sp360-profile-head aside b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 6px solid #22C55E;
  border-radius: 999px;
  color: #16803A;
}

.sp360-profile-head aside em {
  color: #EA580C;
  font-style: normal;
  font-weight: 900;
}

.sp360-tabs {
  display: flex;
  gap: clamp(10px, 2vw, 34px);
  overflow-x: auto;
  border-bottom: 1px solid #E5EDF8;
}

.sp360-tabs button {
  position: relative;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.sp360-tabs button.active {
  color: #0B63F6;
}

.sp360-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #0B63F6;
}

.sp360-kpi-toolbar {
  margin: 14px 0;
}

.sp360-kpi-toolbar button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #DDE8F7;
  border-radius: 999px;
  background: #FFFFFF;
  padding: 0 14px;
  color: #40537A;
  font-weight: 800;
}

.sp360-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sp360-kpi-grid article {
  min-height: 78px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #E5EDF8;
  border-radius: 12px;
  padding: 12px;
}

.sp360-kpi-grid span,
.sp360-agenda article > span,
.sp360-recognition-list span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
}

.sp360-page .tone-blue { background: #EEF5FF; color: #0B63F6; }
.sp360-page .tone-green { background: #EAFBF1; color: #159451; }
.sp360-page .tone-purple { background: #F1ECFF; color: #6D4AFF; }
.sp360-page .tone-red { background: #FFF0F0; color: #E11D48; }
.sp360-page .tone-orange { background: #FFF5E8; color: #EA7A12; }

.sp360-kpi-grid small,
.sp360-kpi-grid em {
  display: block;
  color: #64748B;
  font-style: normal;
  font-weight: 800;
}

.sp360-kpi-grid strong {
  display: block;
  margin: 4px 0;
  font-size: 17px;
}

.sp360-kpi-grid b {
  color: #16A34A;
  font-size: 12px;
}

.sp360-kpi-grid b.down {
  color: #DC2626;
}

.sp360-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 20px;
  margin-top: 14px;
  border: 1px solid #E5EDF8;
  border-radius: 12px;
  padding: 14px 18px;
}

.sp360-summary h4 {
  margin: 0 0 8px;
}

.sp360-summary p {
  margin: 5px 0;
  color: #40537A;
  font-size: 13px;
  line-height: 1.35;
}

.sp360-summary aside {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  border-left: 1px solid #E5EDF8;
  padding-left: 18px;
  text-align: center;
}

.sp360-summary aside strong {
  font-size: 25px;
}

.sp360-review-card header b {
  padding: 6px 10px;
  border-radius: 7px;
  background: #EAF2FF;
  color: #0B63F6;
  font-size: 12px;
}

.sp360-review-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.sp360-review-meta div {
  border-right: 1px solid #E5EDF8;
}

.sp360-review-meta small,
.sp360-review-meta strong {
  display: block;
}

.sp360-review-meta small {
  color: #64748B;
  font-weight: 800;
}

.sp360-agenda {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
}

.sp360-agenda article,
.sp360-agenda-choice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
}

.sp360-agenda-choice {
  grid-template-columns: 18px 38px minmax(0, 1fr);
  cursor: pointer;
}

.sp360-agenda-choice input {
  width: 16px;
  height: 16px;
  accent-color: #0B63F6;
}

.sp360-agenda small {
  display: block;
  margin-top: 2px;
  color: #64748B;
}

.sp360-agenda i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 2px solid #94A3B8;
  border-radius: 999px;
  color: #16A34A;
}

.sp360-agenda i.done {
  border-color: transparent;
}

.sp360-selected-agenda {
  display: grid;
  gap: 8px;
  margin: 4px 0 14px;
}

.sp360-selected-agenda small {
  color: #64748B;
  font-weight: 900;
}

.sp360-selected-agenda div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp360-selected-agenda b {
  padding: 5px 8px;
  border-radius: 7px;
  background: #EAF2FF;
  color: #0B63F6;
  font-size: 11px;
}

.sp360-review-fields {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
}

.sp360-review-fields h4 {
  margin: 0;
}

.sp360-review-fields label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.sp360-review-fields textarea,
.sp360-review-fields input {
  width: 100%;
  border: 1px solid #DDE8F7;
  border-radius: 10px;
  padding: 10px 12px;
  background: #FFFFFF;
  color: #08255D;
  font: inherit;
}

.sp360-ai-helper {
  justify-self: start;
}

.sp360-drawer-agenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sp360-drawer-agenda > small {
  flex-basis: 100%;
  color: #64748B;
  font-weight: 900;
}

.sp360-drawer-agenda label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 7px 9px;
  border: 1px solid #DDE8F7;
  border-radius: 8px;
  background: #F8FBFF;
  font-size: 12px;
}

.sp360-full-button {
  width: 100%;
  justify-content: center;
}

.sp360-bottom-grid {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
  gap: 14px;
  margin-top: 14px;
}

.sp360-recognition-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sp360-recognition-list div {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid #E5EDF8;
  border-radius: 10px;
  padding: 18px 10px;
  text-align: center;
}

.sp360-recognition-list small,
.sp360-history small {
  color: #64748B;
}

.sp360-history {
  display: grid;
  grid-template-columns: repeat(6, minmax(96px, 1fr));
  gap: 0;
  overflow-x: auto;
}

.sp360-history div {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 96px;
  padding: 8px 12px 20px;
  border-right: 1px solid #E5EDF8;
  text-align: center;
}

.sp360-history div::after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: 4px;
  border: 3px solid #BFD4FF;
  border-radius: 999px;
  background: #0B63F6;
}

@media (max-width: 1320px) {
  .sp360-workspace-grid {
    grid-template-columns: minmax(260px, .85fr) minmax(440px, 1.25fr);
  }

  .sp360-review-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .sp360-hero-row,
  .sp360-workspace-grid,
  .sp360-bottom-grid,
  .sp360-profile-head,
  .sp360-summary {
    grid-template-columns: 1fr !important;
  }

  .sp360-kpi-grid,
  .sp360-recognition-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp360-summary aside {
    border-left: 0;
    border-top: 1px solid #E5EDF8;
    padding: 16px 0 0;
  }
}

@media (max-width: 620px) {
  .sp360-page {
    padding-inline: 12px;
  }

  .sp360-topbar {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .sp360-recommendation {
    grid-template-columns: 1fr;
  }

  .sp360-recommendation .primary-button {
    width: 100%;
  }

  .sp360-icon-nav {
    grid-template-columns: 1fr;
  }

  .sp360-nav-arrow {
    display: none;
  }

  .sp360-kpi-grid,
  .sp360-recognition-list {
    grid-template-columns: 1fr;
  }

  .sp360-employee-row {
    grid-template-columns: 44px minmax(0, 1fr) 16px;
  }

  .sp360-employee-row b {
    grid-column: 2;
    justify-self: start;
  }
}

body,
.suite-shell,
.suite-main,
#content,
.content-stack {
  background:
    radial-gradient(circle at 14% 12%, rgba(37,99,235,.12), transparent 26%),
    radial-gradient(circle at 86% 84%, rgba(11,47,99,.10), transparent 28%),
    linear-gradient(145deg, #fff 0%, #f8fbff 48%, #edf6ff 100%) !important;
}

.content-stack {
  background: transparent !important;
}

.suite-main {
  position: relative;
  isolation: isolate;
}

.suite-main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .65;
  background:
    repeating-radial-gradient(ellipse at 50% 118%, transparent 0 34px, rgba(37,99,235,.08) 35px 36px, transparent 37px 70px),
    repeating-radial-gradient(ellipse at -8% 42%, transparent 0 42px, rgba(11,47,99,.055) 43px 44px, transparent 45px 88px);
}

.suite-main > * {
  position: relative;
  z-index: 1;
}

/* Universal app shell rule: pages use the top workspace header, not a left side menu. */
.suite-shell .suite-sidebar,
.suite-shell.sidebar-expanded .suite-sidebar,
.suite-shell.sidebar-collapsed .suite-sidebar {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.suite-main,
.suite-shell.sidebar-expanded .suite-main,
.suite-shell.sidebar-collapsed .suite-main {
  margin-left: 0 !important;
}

#mobileMenuButton,
.salestos-global-header .menu-button,
.sidebar-toggle {
  display: none !important;
}

.login-logo-stack {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.tenant-login-logo {
  width: min(190px, 58vw);
  max-height: 74px;
  object-fit: contain;
}

.suite-logo-strip {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.suite-tenant-logo {
  width: min(178px, 38vw);
  max-height: 48px;
  object-fit: contain;
}

.login-card .password-toggle,
.login-card .password-toggle:hover,
.login-card .password-toggle:active,
.login-card .password-toggle:focus,
.login-card .password-toggle:focus-visible {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  color: #0B2F63 !important;
  outline: 0 !important;
  appearance: none !important;
}

.login-card .password-toggle svg {
  width: 19px !important;
  height: 19px !important;
}

.login-footer,
.suite-footer {
  position: relative;
  z-index: 1;
}

.footer-salestos-logo {
  flex: 0 0 100%;
  width: 70px;
  max-height: 24px;
  object-fit: contain;
  margin: 2px auto 0;
}

.suite-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 18px 24px 24px;
  color: #64748b;
  font-size: 12px;
}

.role-workspace-layout {
  grid-template-columns: 1fr !important;
}

.role-summary-card {
  position: static !important;
  width: 100%;
  max-width: 100%;
  z-index: auto;
}

.role-hero-card {
  border-top: 0 !important;
}

/* Keep the login background visible across route bodies, not only the footer. */
#suiteShell,
#suiteShell .suite-main,
#suiteShell #content,
#suiteShell .content-stack,
#suiteShell[data-route] .suite-main,
#suiteShell[data-route] .content-stack,
.sales360-workspace-page,
.sales360-workspace-main,
.sales360-os,
.collections-page,
.collections-app,
.collections-shell,
.collections-workspace,
.collections-settings-page,
.collections-os-focused,
.performance360-page,
.performance360-page .sales360-workspace-main,
.sales360-incentives-workspace,
.sales360-incentive-form-page,
.role-workspace-page,
.settings-workspace {
  background-color: transparent !important;
}

#suiteShell,
#suiteShell .suite-main {
  background:
    radial-gradient(circle at 14% 12%, rgba(37,99,235,.12), transparent 26%),
    radial-gradient(circle at 86% 84%, rgba(11,47,99,.10), transparent 28%),
    linear-gradient(145deg, #fff 0%, #f8fbff 48%, #edf6ff 100%) !important;
}

#suiteShell .suite-footer {
  background: transparent !important;
}

/* Final UI contract: Calibri everywhere, one header identity, mobile drawer only on mobile. */
html,
body,
body *,
body *::before,
body *::after,
button,
input,
select,
textarea,
table,
.suite-shell,
.suite-main,
.content-stack,
.login-screen,
.login-copy h1,
.salestos-global-header,
.tenant-profile-menu,
.sales360-incentives-workspace,
.sales360-incentive-form-page,
.collections-os-home,
.collections-os-focused,
.performance360-page,
.role-workspace-page,
.settings-workspace {
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif !important;
}

/* Turbolux tenant login: primary credentials only. */
#loginScreen.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) 72px;
  overflow: hidden;
  background: #fbfcff;
}

#loginScreen .login-bg-waves {
  opacity: .42;
  background-color: #fbfcff;
  background-image: linear-gradient(30deg, rgba(45,55,170,.045) 12%, transparent 12.5%, transparent 87%, rgba(45,55,170,.045) 87.5%, rgba(45,55,170,.045)), linear-gradient(150deg, rgba(45,55,170,.045) 12%, transparent 12.5%, transparent 87%, rgba(45,55,170,.045) 87.5%, rgba(45,55,170,.045));
  background-size: 94px 164px;
}

.login-brand-showcase {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(640px, 84%);
  margin: auto;
  color: #081b5b;
}

.login-brand-showcase .tenant-login-logo { width: min(520px, 100%); max-height: 150px; object-position: left center; }
.login-brand-showcase > p { max-width: 520px; margin: 26px 0 18px; font-size: clamp(20px, 1.65vw, 28px); line-height: 1.3; font-weight: 500; }
.tenant-workspace-badge { align-self: flex-start; display: flex; align-items: center; gap: 12px; padding: 12px 20px; border: 1px solid #d7daf0; border-radius: 10px; color: #2826c7; background: rgba(246,246,255,.86); box-shadow: 0 7px 20px rgba(49,46,180,.07); font-size: 17px; }
.login-network-art { position: relative; height: 300px; margin-top: 28px; color: #171aa7; }
.login-network-art::before { content: ""; position: absolute; inset: 42px 10% 30px; background: radial-gradient(circle, rgba(62,65,210,.15) 1.5px, transparent 1.8px); background-size: 9px 9px; opacity: .7; }
.network-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 118px; height: 118px; border: 16px solid #d7d8fa; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#3538d3,#7779eb); box-shadow: 0 14px 30px rgba(48,51,190,.25); font-size: 52px; font-weight: 900; }
.network-label { position: absolute; font-size: 14px; font-weight: 700; }
.network-sales { top: 4px; left: 8%; }.network-dealers { top: 4px; right: 8%; }.network-targets { top: 50%; left: 3%; }.network-collections { top: 50%; right: 1%; }.network-performance { bottom: 2px; left: 50%; translate: -50%; }

#loginScreen .login-form-panel {
  position: relative;
  z-index: 1;
  align-self: center;
  width: calc(100% - 30px);
  max-width: 760px;
  min-height: 0;
  margin: 14px 15px 8px 0;
  padding: clamp(42px, 5vw, 82px);
  display: block;
  border: 1px solid #d8deea;
  border-radius: 20px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 28px rgba(26,37,70,.12);
}

#loginScreen .login-copy { width: 100%; max-width: none; margin: 0 0 34px; text-align: left; }
#loginScreen .login-copy h1 { font-size: clamp(34px, 3vw, 44px); color: #07184c; }
#loginScreen .login-copy p { display: block; margin-top: 10px; color: #667085; font-size: 21px; }
#loginScreen .login-card { width: 100%; max-width: none; gap: 26px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
#loginScreen .login-card label { font-size: 17px; font-weight: 500; }
#loginScreen .login-card input { min-height: 62px; padding-left: 60px; border-color: #d2d8e4; border-radius: 8px; font-size: 18px; }
#loginScreen .login-card .checkline input { width: 20px; height: 20px; min-height: 20px; padding: 0; border-radius: 4px; }
#loginScreen .login-card .password-field input { padding-right: 52px; }
#loginScreen .field-icon { left: 22px; color: #667085; }
#loginScreen .tenant-field input { color: #101828; background: linear-gradient(90deg,#f5f5fb,#fff); font-size: 20px; }
.tenant-lock { position: absolute; right: 22px; top: 50%; translate: 0 -50%; color: #667085; }
#loginScreen .login-row { flex-direction: row; align-items: center; margin-top: -2px; font-size: 16px; }
#loginScreen .login-row a { color: #2624ca; font-size: 16px; }
#loginScreen .login-submit { min-height: 64px; margin: 0; border-radius: 8px; background: linear-gradient(135deg,#3738dc,#292ac8); font-size: 21px; }
.login-support-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 84px; padding: 14px 22px; border: 1px solid #d7deea; border-radius: 9px; color: #344054; text-decoration: none; font-size: 16px; }
.login-support-card strong { display: block; margin-top: 5px; color: #2826d0; font-weight: 500; }
.support-icon { color: #3e50a6; font-size: 27px; }.support-arrow { color: #101828; font-size: 32px; }
#loginScreen .login-card .error:empty { display: none; }

#loginScreen .login-footer { grid-column: 1 / -1; width: 100%; height: 72px; margin: 0; padding: 0 5%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid #d9deea; background: rgba(255,255,255,.72); color: #667085; font-size: 15px; }
#loginScreen .login-footer > span:last-child { justify-self: end; }
#loginScreen .login-footer nav { display: flex; align-items: center; gap: 20px; }
#loginScreen .login-footer nav i { width: 1px; height: 20px; background: #aab1bf; }
#loginScreen .login-footer a { color: #667085; font-weight: 400; }
.login-powered { display: flex; align-items: center; gap: 12px; }
#loginScreen .footer-salestos-logo { flex: none; width: 112px; max-height: 30px; margin: 0; }

@media (max-width: 900px) {
  #loginScreen.login-screen { display: block; min-height: 100vh; overflow: auto; padding-bottom: 0; }
  .login-brand-showcase { display: none; }
  #loginScreen .login-form-panel { width: min(94%, 620px); margin: 24px auto; padding: 32px 22px; border-radius: 16px; }
  #loginScreen .login-copy { margin-bottom: 26px; }
  #loginScreen .login-copy h1 { font-size: 32px; }
  #loginScreen .login-copy p { font-size: 17px; }
  #loginScreen .login-card { gap: 20px; }
  #loginScreen .login-card input { min-height: 56px; font-size: 16px; }
  #loginScreen .login-row { flex-direction: row; align-items: center; gap: 12px; }
  #loginScreen .login-submit { min-height: 56px; font-size: 18px; }
  #loginScreen .login-footer { position: static; height: auto; min-height: 120px; padding: 20px; grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  #loginScreen .login-footer > span:last-child { justify-self: center; }
}

.suite-topbar .topbar-title h1,
.suite-topbar .topbar-title p,
.salestos-global-header #headerWorkspaceName {
  display: none !important;
}

.salestos-global-header .header-breadcrumbs,
.header-breadcrumbs,
.salestos-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.salestos-global-header .header-breadcrumbs button,
.salestos-breadcrumbs button {
  color: #0B2F63 !important;
  font: inherit !important;
}

#suiteShell,
#suiteShell[data-route],
#suiteShell .suite-main,
#suiteShell[data-route] .suite-main,
#suiteShell #content,
#suiteShell[data-route] #content,
#suiteShell .content-stack,
#suiteShell[data-route] .content-stack,
.sales360-workspace-page,
.sales360-workspace-main,
.sales360-os,
.sales360-incentives-workspace,
.sales360-incentive-form-page,
.collections-page,
.collections-app,
.collections-shell,
.collections-workspace,
.collections-settings-page,
.collections-os-focused,
.collections-os-home,
.performance360-page,
.performance360-page .sales360-workspace-main,
.role-workspace-page,
.role-builder-page,
.settings-workspace {
  background:
    radial-gradient(circle at 14% 12%, rgba(37,99,235,.12), transparent 26%),
    radial-gradient(circle at 86% 84%, rgba(11,47,99,.10), transparent 28%),
    linear-gradient(145deg, #fff 0%, #f8fbff 48%, #edf6ff 100%) !important;
}

.sales360-workspace-page,
.sales360-workspace-main,
.sales360-os,
.sales360-incentives-workspace,
.sales360-incentive-form-page,
.collections-page,
.collections-app,
.collections-shell,
.collections-workspace,
.collections-settings-page,
.collections-os-focused,
.collections-os-home,
.performance360-page,
.performance360-page .sales360-workspace-main,
.role-workspace-page,
.role-builder-page,
.settings-workspace {
  background-color: transparent !important;
}

@media (min-width: 901px) {
  #mobileMenuButton,
  .salestos-global-header .menu-button,
  .suite-shell .suite-sidebar,
  .suite-shell.sidebar-expanded .suite-sidebar,
  .suite-shell.sidebar-collapsed .suite-sidebar {
    display: none !important;
  }
}

@media (max-width: 900px) {
  #mobileMenuButton,
  .salestos-global-header .menu-button {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    place-items: center !important;
  }

  .suite-shell .suite-sidebar,
  .suite-shell.sidebar-collapsed .suite-sidebar {
    position: fixed !important;
    top: 96px !important;
    left: 18px !important;
    z-index: 140 !important;
    width: min(300px, calc(100vw - 36px)) !important;
    max-height: calc(100vh - 120px) !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 16px !important;
    border: 1px solid rgba(221,231,244,.9) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 28px 80px rgba(15,23,42,.16) !important;
    overflow: auto !important;
    transform: translateX(-18px) scale(.98) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .suite-shell.sidebar-expanded .suite-sidebar {
    display: grid !important;
    transform: translateX(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .suite-sidebar .sidebar-brand,
  .suite-sidebar .sidebar-bottom,
  .suite-sidebar .sidebar-nav > .nav-group {
    display: none !important;
  }

  .suite-sidebar .sidebar-nav {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .mobile-workspace-menu {
    display: grid !important;
  }

  .salestos-global-header .header-breadcrumbs,
  .header-breadcrumbs,
  .salestos-breadcrumbs {
    display: flex !important;
  }
}

/* Common authenticated SaaS header: logo left, account menu right. */
#suiteShell .suite-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  min-height: 68px !important;
  height: 68px !important;
  margin: 0 !important;
  padding: 0 clamp(18px, 3vw, 36px) !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid #EAEAEA !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.035) !important;
  backdrop-filter: blur(14px) !important;
}

#suiteShell .topbar-primary {
  width: 100% !important;
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
}

#suiteShell .topbar-title {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

#suiteShell .suite-logo-strip {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#suiteShell .suite-tenant-logo {
  width: clamp(128px, 14vw, 178px) !important;
  max-height: 46px !important;
}

#suiteShell .topbar-utility {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  grid-column: auto !important;
}

#suiteShell #globalSearch,
#suiteShell #notificationButton,
#suiteShell #helpButton,
#suiteShell .notification-button,
#suiteShell .topbar-utility input,
#suiteShell .topbar-utility > .icon-button:not(.profile-button),
#suiteShell .topbar-utility > button:not(#profileButton) {
  display: none !important;
}

#suiteShell #profileButton.profile-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid #DDE7F4 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: #0B2F63 !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.055) !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

#suiteShell #profileButton.profile-button::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 35%, #fff 0 14%, transparent 15%),
    radial-gradient(circle at 50% 72%, rgba(255,255,255,.92) 0 27%, transparent 28%),
    linear-gradient(135deg, #0B2F63, #2563EB);
}

#suiteShell #profileButton.profile-button::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 2px solid #FFFFFF;
  background: #16A34A;
}

#suiteShell #profileButton.profile-button:hover,
#suiteShell #profileButton.profile-button:focus-visible {
  border-color: #BFD0E8 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.10) !important;
  outline: 0 !important;
}

.tenant-profile-menu {
  right: 24px !important;
  min-width: 238px !important;
  border: 1px solid #E5EAF2 !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.14) !important;
  transform-origin: top right;
}

#suiteShell .suite-footer {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

@media (max-width: 900px) {
  #suiteShell .suite-topbar {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
  }

  #suiteShell .topbar-primary {
    min-height: 68px !important;
    width: 100% !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #suiteShell .menu-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid #DDE7F4 !important;
    background: rgba(255,255,255,.96) !important;
    font-size: 15px !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.06) !important;
  }

  #suiteShell .topbar-title {
    justify-items: center !important;
    text-align: center !important;
    gap: 0 !important;
  }

  #suiteShell .topbar-title h1,
  #suiteShell .topbar-title p,
  #suiteShell .header-breadcrumbs {
    display: none !important;
  }

  #suiteShell .suite-logo-strip {
    justify-self: center !important;
  }

  #suiteShell .suite-tenant-logo {
    width: min(150px, 40vw) !important;
    max-height: 36px !important;
  }

  #suiteShell .topbar-utility {
    justify-content: flex-end !important;
    grid-template-columns: auto !important;
  }

  #suiteShell #profileButton.profile-button {
    display: inline-grid !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
  }

  #suiteShell .mobile-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 14px 0 !important;
    color: #64748B !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  #suiteShell .mobile-breadcrumbs button,
  #suiteShell .mobile-breadcrumbs span {
    color: #64748B !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  #suiteShell .mobile-breadcrumbs button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #suiteShell .content-stack {
    padding: 12px 12px 16px !important;
    gap: 12px !important;
  }

  #suiteShell[data-route="platform-home"] .suite-topbar,
  #suiteShell[data-route="sales-360"] .suite-topbar,
  #suiteShell[data-route="sales-360-reviews"] .suite-topbar {
    background: rgba(255,255,255,.98) !important;
  }

  #suiteShell[data-route="sales-360"] .suite-topbar,
  #suiteShell[data-route="sales-360-reviews"] .suite-topbar {
    border-bottom: 1px solid #E6EBF2 !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-modules,
  #suiteShell[data-route="sales-360-reviews"] .review-center-modules {
    display: flex !important;
    overflow-x: auto !important;
    gap: 10px !important;
    scroll-snap-type: x proximity !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-module,
  #suiteShell[data-route="sales-360-reviews"] .review-center-module {
    min-width: 116px !important;
    scroll-snap-align: start !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-search form,
  #suiteShell[data-route="sales-360-reviews"] .review-center-search form {
    width: 100% !important;
    min-height: 56px !important;
    padding: 6px 8px 6px 16px !important;
    border-radius: 12px !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-search input,
  #suiteShell[data-route="sales-360-reviews"] .review-center-search input {
    font-size: 15px !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-chips,
  #suiteShell[data-route="sales-360-reviews"] .review-center-chips {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-chips button,
  #suiteShell[data-route="sales-360-reviews"] .review-center-chips button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-workspace,
  #suiteShell[data-route="sales-360-reviews"] .review-center-workspace,
  #suiteShell[data-route="sales-360"] .review-center-top-row,
  #suiteShell[data-route="sales-360-reviews"] .review-center-top-row {
    grid-template-columns: 1fr !important;
  }
}

#suiteShell .mobile-breadcrumbs {
  display: none !important;
}

/* Mobile breadcrumb row and review-center layout. */
#suiteShell[data-route="sales-360-reviews"] .suite-footer {
  display: none !important;
}

#suiteShell[data-route="sales-360-reviews"] .content-stack {
  padding-top: 16px !important;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-page {
  width: min(1480px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding: 0 0 20px;
  color: #0F172A;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-titlebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px 2px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-eyebrow {
  margin: 0 0 8px;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-titlebar h2 {
  margin: 0;
  color: #0F172A;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-titlebar p {
  margin: 8px 0 0;
  color: #64748B;
  font-size: 14px;
  line-height: 1.5;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-filter-pill,
#suiteShell[data-route="sales-360-reviews"] .review-center-filter-icon {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #D7E3F2;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #0F172A;
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-filter-icon {
  width: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.4fr;
  gap: 14px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-recommendation,
#suiteShell[data-route="sales-360-reviews"] .review-center-kpi-strip,
#suiteShell[data-route="sales-360-reviews"] .review-center-list-card,
#suiteShell[data-route="sales-360-reviews"] .review-center-summary-card,
#suiteShell[data-route="sales-360-reviews"] .review-center-ai-card,
#suiteShell[data-route="sales-360-reviews"] .review-center-timeline,
#suiteShell[data-route="sales-360-reviews"] .review-center-metric-card {
  border: 1px solid #DCE7F6;
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 38px rgba(11, 47, 99, .06);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-recommendation {
  display: grid;
  gap: 10px;
  padding: 22px;
  align-content: start;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-recommendation-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(245, 158, 11, .12);
  color: #D97706;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-recommendation small,
#suiteShell[data-route="sales-360-reviews"] .review-center-summary-meta span,
#suiteShell[data-route="sales-360-reviews"] .review-center-summary-meta small,
#suiteShell[data-route="sales-360-reviews"] .review-center-metric-card small {
  color: #64748B;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-recommendation h3 {
  margin: 0;
  color: #0F172A;
  font-size: 22px;
  line-height: 1.15;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-recommendation p {
  margin: 0;
  color: #64748B;
  font-size: 14px;
  line-height: 1.5;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-kpi-strip div {
  display: grid;
  gap: 4px;
  padding: 16px 14px;
  border: 1px solid #E5EEF9;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #F9FBFF 100%);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-kpi-strip strong {
  color: #0B3B82;
  font-size: 28px;
  line-height: 1;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-kpi-strip span {
  color: #0F172A;
  font-size: 14px;
  font-weight: 700;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-kpi-strip small {
  color: #64748B;
  font-size: 12px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-search {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 4px 0 2px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-search form {
  width: min(920px, 100%);
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 18px;
  border: 1px solid #DCE7F6;
  border-radius: 12px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #0F172A;
  font: inherit;
  font-size: 16px;
  outline: 0;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-search button {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  background: #0B3B82;
  color: #fff;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-chips button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #DCE7F6;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #0F172A;
  box-shadow: 0 12px 26px rgba(15,23,42,.04);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-modules {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 2px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-module {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 84px;
  padding: 14px 12px 12px;
  border: 1px solid #DCE7F6;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  color: #0F172A;
  box-shadow: 0 12px 30px rgba(15,23,42,.05);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-module span {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: #EEF4FF;
  color: #2563EB;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-module strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-module.active {
  border-color: #B7CAF2;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .12);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-module.active::after {
  content: "";
  width: 42px;
  height: 3px;
  margin-top: 2px;
  border-radius: 999px;
  background: #2563EB;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: 14px;
  align-items: start;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-list-card,
#suiteShell[data-route="sales-360-reviews"] .review-center-summary-card {
  padding: 18px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-list-card > header,
#suiteShell[data-route="sales-360-reviews"] .review-center-summary-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-list-card h3,
#suiteShell[data-route="sales-360-reviews"] .review-center-summary-card h3,
#suiteShell[data-route="sales-360-reviews"] .review-center-timeline h4,
#suiteShell[data-route="sales-360-reviews"] .review-center-ai-card h4 {
  margin: 0;
  color: #0F172A;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-list-card p,
#suiteShell[data-route="sales-360-reviews"] .review-center-summary-card p {
  margin: 4px 0 0;
  color: #64748B;
  font-size: 13px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-list-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-list-search {
  min-width: 280px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 40px;
  border: 1px solid #DCE7F6;
  border-radius: 999px;
  background: #fff;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-list-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #0F172A;
  font: inherit;
  font-size: 14px;
  outline: 0;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-tabs button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #DCE7F6;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-tabs button.active {
  border-color: #B7CAF2;
  background: #EEF4FF;
  color: #0B3B82;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-employee-list {
  display: grid;
  gap: 10px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-employee {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #E3EBF6;
  border-left: 4px solid transparent;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  box-shadow: 0 10px 28px rgba(15,23,42,.04);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-employee.selected {
  border-left-color: #2563EB;
  background: #EEF4FF;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-avatar,
#suiteShell[data-route="sales-360-reviews"] .review-center-summary-avatar {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #DDEBFF, #BFD6FF);
  color: #0B3B82;
  font-weight: 800;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-summary-avatar {
  width: 56px;
  height: 56px;
  font-size: 15px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-employee strong,
#suiteShell[data-route="sales-360-reviews"] .review-center-employee em,
#suiteShell[data-route="sales-360-reviews"] .review-center-employee b {
  display: block;
  font-style: normal;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-employee strong {
  color: #0F172A;
  font-size: 14px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-employee small,
#suiteShell[data-route="sales-360-reviews"] .review-center-employee em,
#suiteShell[data-route="sales-360-reviews"] .review-center-employee b {
  color: #64748B;
  font-size: 12px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-summary-card {
  display: grid;
  gap: 16px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-summary-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-summary-identity h3 {
  font-size: 20px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-summary-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-stars {
  display: inline-flex;
  gap: 2px;
  color: #CBD5E1;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-stars i {
  width: 14px;
  height: 14px;
  display: inline-grid;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-stars i.active {
  color: #F59E0B;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-open-button {
  justify-self: start;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-metric-card {
  display: grid;
  gap: 6px;
  padding: 14px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-metric-card strong {
  color: #0F172A;
  font-size: 20px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-metric-card span {
  color: #64748B;
  font-size: 13px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #E8EFF9;
  overflow: hidden;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563EB, #0B3B82);
}

#suiteShell[data-route="sales-360-reviews"] .review-center-timeline,
#suiteShell[data-route="sales-360-reviews"] .review-center-ai-card {
  padding: 16px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-timeline > div {
  display: grid;
  gap: 8px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-timeline article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #EEF2F7;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-timeline strong,
#suiteShell[data-route="sales-360-reviews"] .review-center-timeline span {
  font-size: 13px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-ai-card {
  display: grid;
  gap: 12px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-ai-card header {
  display: flex;
  align-items: center;
  gap: 10px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-ai-card header span {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, .10);
  color: #2563EB;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-ai-card ul {
  margin: 0;
  padding: 0 0 0 18px;
  color: #334155;
  display: grid;
  gap: 8px;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-ai-card button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563EB;
  font-weight: 700;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 6px 0 8px;
  color: #64748B;
}

#suiteShell[data-route="sales-360-reviews"] .review-center-footer img {
  width: 96px;
  justify-self: center;
}

@media (max-width: 1100px) {
  #suiteShell[data-route="sales-360-reviews"] .review-center-top-row,
  #suiteShell[data-route="sales-360-reviews"] .review-center-workspace {
    grid-template-columns: 1fr;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-modules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #suiteShell .mobile-breadcrumbs {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 0;
    color: #64748B;
    font-size: 12px;
    line-height: 1.3;
  }

  #suiteShell .mobile-breadcrumbs button,
  #suiteShell .mobile-breadcrumbs span {
    color: #64748B;
    font-size: 12px;
    line-height: 1.3;
  }

  #suiteShell .header-breadcrumbs {
    display: none !important;
  }

  #suiteShell .mobile-breadcrumbs button {
    padding: 0;
    border: 0;
    background: transparent;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-titlebar {
    align-items: flex-start;
    flex-direction: column;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-filters {
    justify-content: flex-start;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-top-row,
  #suiteShell[data-route="sales-360-reviews"] .review-center-workspace,
  #suiteShell[data-route="sales-360-reviews"] .review-center-metrics {
    grid-template-columns: 1fr;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-modules {
    display: flex;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-module {
    min-width: 118px;
    scroll-snap-align: start;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-list-card > header,
  #suiteShell[data-route="sales-360-reviews"] .review-center-summary-card > header {
    flex-direction: column;
    align-items: flex-start;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-list-tools {
    width: 100%;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-list-search {
    min-width: 0;
    width: 100%;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-employee {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-employee em,
  #suiteShell[data-route="sales-360-reviews"] .review-center-employee b {
    grid-column: 2;
  }

  #suiteShell[data-route="sales-360-reviews"] .review-center-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  #suiteShell[data-route="sales-360"] .review-center-search,
  #suiteShell[data-route="sales-360-reviews"] .review-center-search {
    padding: 2px 0 0 !important;
    gap: 10px !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-search form,
  #suiteShell[data-route="sales-360-reviews"] .review-center-search form {
    width: calc(100% - 32px) !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 48px 0 14px !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: none !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-search input,
  #suiteShell[data-route="sales-360-reviews"] .review-center-search input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: #0F172A !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-search input::placeholder,
  #suiteShell[data-route="sales-360-reviews"] .review-center-search input::placeholder {
    color: #64748B !important;
    opacity: 1 !important;
  }

  #suiteShell[data-route="sales-360"] .review-center-search button,
  #suiteShell[data-route="sales-360-reviews"] .review-center-search button {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    background: #0B3B82 !important;
    color: #fff !important;
    box-shadow: none !important;
  }
}

body:not(.tenant-login-page) #loginScreen.login-screen { display:grid; grid-template-columns:1fr; grid-template-rows:none; min-height:100vh; overflow:auto; }
body:not(.tenant-login-page) #loginScreen .login-form-panel { min-height:100vh; width:auto; max-width:none; margin:0; padding:44px 20px 28px; display:grid; align-content:center; justify-items:center; gap:16px; border:0; border-radius:0; background:transparent; box-shadow:none; }
body:not(.tenant-login-page) #loginScreen .login-copy { width:auto; margin:0 0 6px; text-align:center; }
body:not(.tenant-login-page) #loginScreen .login-copy h1 { font-size:clamp(32px,5vw,44px); color:#0f172a; }
body:not(.tenant-login-page) #loginScreen .login-copy p { display:block; margin:0; font-size:16px; }
body:not(.tenant-login-page) #loginScreen .login-card { width:min(100%,430px); gap:16px; padding:28px; border:1px solid rgba(203,213,225,.72); border-radius:24px; background:rgba(255,255,255,.88); box-shadow:0 28px 70px rgba(15,23,42,.12); backdrop-filter:blur(18px); }
body:not(.tenant-login-page) #loginScreen .login-card label { font-size:13px; font-weight:850; }
body:not(.tenant-login-page) #loginScreen .login-card input { min-height:50px; padding-left:46px; border-radius:13px; font-size:inherit; }
body:not(.tenant-login-page) #loginScreen .login-card .checkline input { width:16px; height:16px; min-height:16px; padding:0; }
body:not(.tenant-login-page) #loginScreen .field-icon { left:14px; }
body:not(.tenant-login-page) #loginScreen .login-row { flex-direction:row; align-items:center; font-size:13px; }
body:not(.tenant-login-page) #loginScreen .login-row a { font-size:13px; }
body:not(.tenant-login-page) #loginScreen .login-submit { min-height:50px; margin:2px 0 0; border-radius:13px; font-size:inherit; background:linear-gradient(135deg,#0b2f63,#2563eb); }
body:not(.tenant-login-page) #loginScreen .login-footer { position:relative; width:min(100%,760px); height:auto; margin:6px 0 0; padding:0; display:flex; grid-template-columns:none; justify-content:center; flex-wrap:wrap; gap:8px 16px; border:0; background:transparent; font-size:12px; }
body:not(.tenant-login-page) #loginScreen .footer-salestos-logo { flex:0 0 100%; width:70px; max-height:24px; margin:2px auto 0; }
@media (max-width:560px) { body:not(.tenant-login-page) #loginScreen .login-form-panel { padding:30px 16px 24px; } body:not(.tenant-login-page) #loginScreen .login-card { padding:22px; border-radius:20px; } body:not(.tenant-login-page) #loginScreen .login-row { align-items:flex-start; flex-direction:column; gap:10px; } }