/* ============================================================
   GrowthOS theme — warm terracotta / ivory re-skin
   ------------------------------------------------------------
   Loaded LAST in index.html (after style.css, viewdetail.css,
   responsive.css). This file only overrides presentation —
   no markup or logic is changed. Class names match the
   existing app; values are remapped to the GrowthOS palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap');

:root {
  /* ---- GrowthOS design tokens ---- */
  --gos-bg-app: #f0eee6;
  --gos-surface: #fefdfb;
  --gos-surface-2: #faf9f4;
  --gos-surface-3: #f4f1e9;
  --gos-border: #e8e4d9;
  --gos-border-strong: #d7d1c2;

  --gos-text: #201d16;
  --gos-text-2: #6b6353;
  --gos-text-3: #9b937f;

  --gos-accent: #c96342;
  --gos-accent-hover: #b35430;
  --gos-accent-press: #9d4a2c;
  --gos-accent-soft: #f8ece5;
  --gos-accent-soft-2: #f1ddd0;
  --gos-accent-ink: #9c4a26;

  /* warm-dark sidebar rail (legacy — no longer used after shell rework) */
  --gos-rail: #2a2520;
  --gos-rail-2: #332d27;
  --gos-rail-text: #e8e2d6;

  /* shell layout (sidebar = background, page = rounded card on top) */
  --gos-pad: 8px;
  --gos-side-bg: #eae6dc;
  --gos-shell-border: #ddd7c8;
  --gos-bg-dark-2: #dfdacd;
  --gos-bg-dark-3: #fdfcf9;
  --gos-on-dark: #3d3829;
  --gos-on-dark-mut: #6b6453;
  --gos-on-dark-faint: #99917d;
  --gos-logo-grad-2: #a84a28;
  --gos-sb-foot-border: rgba(56, 46, 30, .09);

  /* status tints */
  --gos-rose-bg: #fce8f0;  --gos-rose-fg: #b34480;
  --gos-blue-bg: #e9f1fc;  --gos-blue-fg: #2e63a6;
  --gos-amber-bg: #fbf0d8; --gos-amber-fg: #9a751c;
  --gos-purple-bg: #efe9fb; --gos-purple-fg: #6a4fae;
  --gos-gray-bg: #efede6;  --gos-gray-fg: #6f6a5c;
  --gos-red-bg: #fdeaea;   --gos-red-fg: #c0473f;
  --gos-green-bg: #e2f4e8; --gos-green-fg: #2c7a45;

  --gos-r: 8px;
  --gos-r-lg: 14px;
  --gos-shadow-xs: 0 1px 2px rgba(56, 46, 30, .05);
  --gos-shadow-sm: 0 1px 3px rgba(56, 46, 30, .07), 0 1px 2px rgba(56, 46, 30, .04);
  --gos-shadow-md: 0 6px 18px -6px rgba(56, 46, 30, .12), 0 2px 6px rgba(56, 46, 30, .06);

  /* retarget Bootstrap primary so utility classes follow the accent */
  --bs-primary: #c96342;
  --bs-primary-rgb: 201, 99, 66;
  --bs-link-color: #9c4a26;
  --bs-link-color-rgb: 156, 74, 38;
  --bs-link-hover-color: #b35430;
  --bs-breadcrumb-color: var(--gos-text-3);
  --bs-breadcrumb-hover-color: var(--gos-accent-ink);
}

/* ---------- base ---------- */
body {
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--gos-side-bg);
  color: var(--gos-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The global reset in style.css applies `font-family: 'Roboto'` per element
   (div, span, a, li, td, …), which wins over the body's Inter inheritance.
   Force the GrowthOS typeface (Inter) globally so all text matches the new
   design (this is also what makes the type *size* read right — Roboto and
   Inter have different metrics). Form controls are included since browsers
   don't inherit font-family on them by default. */
*,
input,
select,
textarea,
button {
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* …but keep genuine monospace surfaces (code, logs) in a mono face. */
code,
pre,
kbd,
samp,
tt,
.logs {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
}

.gos-shell-main .dashboard_container,
.gos-shell-main .home-content,
.gos-shell-main .inner-page {
  background-color: var(--gos-bg-app) !important;
}

.inner-page {
  border-left-color: var(--gos-border);
}

/* ============================================================
   SHELL — sidebar is the background, the page floats on top
   as a rounded-corner card (GrowthOS inset layout)
   ============================================================ */
.gos-app {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  height: 100vh;
  width: 100%;
  padding: var(--gos-pad);
  gap: 0;
  background: var(--gos-side-bg) !important;
  overflow: hidden;
}

.gos-shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--gos-bg-app);
  border: 1px solid var(--gos-shell-border);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(56, 46, 30, .05);
  overflow: hidden;
}

.gos-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* header now lives inside the rounded card — match the GrowthOS topbar */
.gos-shell-main #main_header {
  position: static;
  margin-left: 0 !important;
  width: auto;
  height: 60px;
  min-height: 60px;
  padding: 0 22px;
  align-items: center;
  gap: 16px;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--gos-border);
  background: var(--gos-surface);
}

.gos-shell-main #main_header-mob {
  margin-left: 0 !important;
}

/* breadcrumb → topbar "crumb · title" treatment */
.gos-shell-main .breadcrumb {
  padding: 0;
  margin: 0;
  border-bottom: none;
  background: none;
}

.gos-shell-main .header-left {
  font-size: inherit;
  font-weight: 600;
}

.gos-shell-main .breadcrumb a,
.gos-shell-main .breadcrumb span.hs {
  font-size: 13px;
  font-weight: 500;
  color: var(--gos-text-3);
}

.gos-shell-main .breadcrumb span.curr,
.gos-shell-main .breadcrumb a.curr {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--gos-text);
}

.gos-shell-main .dashboard_container {
  margin-left: 0 !important;
  height: auto;
}

/* ============================================================
   SIDEBAR — GrowthOS light warm panel (transparent over .gos-app)
   ============================================================ */
.gos-sidebar {
  width: 244px;
  flex-shrink: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--gos-on-dark);
  background: transparent;
  user-select: none;
  transition: width .28s cubic-bezier(.4, 0, .2, 1);
}

.gos-sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 10px 16px;
  height: 64px;
}

.gos-sb-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--gos-accent), var(--gos-logo-grad-2));
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(201, 99, 66, .30);
}

.gos-sb-logo img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.gos-sb-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--gos-on-dark);
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
  transition: opacity .18s;
}

.gos-sb-collapse {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--gos-on-dark-mut);
  transition: background .15s, color .15s;
}

.gos-sb-collapse:hover {
  background: var(--gos-bg-dark-2);
  color: var(--gos-on-dark);
}

.gos-sb-collapse svg {
  display: block;
}

.gos-sb-section {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gos-on-dark-faint);
  padding: 6px 20px;
  margin-top: 6px;
  white-space: nowrap;
}

.gos-sb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  flex: 1;
  overflow-y: auto;
}

.gos-sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--gos-on-dark-mut);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  transition: background .15s, color .15s;
}

.gos-sb-item:hover,
.gos-sb-item:focus {
  background: var(--gos-bg-dark-2);
  color: var(--gos-on-dark);
}

.gos-sb-item.active {
  background: var(--gos-bg-dark-3);
  color: var(--gos-accent-ink);
  box-shadow: 0 1px 3px rgba(56, 46, 30, .10), 0 0 0 1px rgba(56, 46, 30, .04);
}

.gos-sb-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--gos-accent);
}

.gos-sb-chip {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.gos-sb-chip img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.gos-sb-label {
  flex: 1;
}

.gos-sb-item.disabledLink {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

.gos-sb-foot {
  padding: 12px;
  border-top: 1px solid var(--gos-sb-foot-border);
  margin-top: auto;
}

.gos-sb-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background .15s;
}

.gos-sb-user:hover {
  background: var(--gos-bg-dark-2);
}

.gos-sb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  cursor: pointer;
  background: var(--gos-accent);
}

.gos-sb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gos-sb-user-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gos-sb-user-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gos-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gos-sb-user-mail {
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--gos-on-dark-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gos-sb-logout {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--gos-on-dark-faint);
  transition: background .15s, color .15s;
}

.gos-sb-logout:hover {
  background: var(--gos-bg-dark-2);
}

.gos-sb-logout img {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(.45);
}

.gos-sb-logout svg {
  display: block;
  width: 15px;
  height: 15px;
}

/* ---- collapsed sidebar (icon-only rail) ---- */
.gos-sidebar.collapsed {
  width: 76px;
}

.gos-sidebar.collapsed .gos-sb-brand {
  gap: 0;
  padding: 14px 9px 10px 10px;
  justify-content: center;
}

.gos-sidebar.collapsed .gos-sb-name {
  opacity: 0;
  flex: 0 0 0;
  width: 0;
  pointer-events: none;
}

.gos-sidebar.collapsed .gos-sb-collapse {
  display: none;
}

.gos-sidebar.collapsed .gos-sb-logo {
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}

.gos-sidebar.collapsed .gos-sb-logo:hover {
  opacity: .8;
  transform: scale(1.08);
}

.gos-sidebar.collapsed .gos-sb-section {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.gos-sidebar.collapsed .gos-sb-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.gos-sidebar.collapsed .gos-sb-label {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.gos-sidebar.collapsed .gos-sb-user {
  justify-content: center;
}

.gos-sidebar.collapsed .gos-sb-user-meta {
  opacity: 0;
  width: 0;
  flex: 0 0 0;
  overflow: hidden;
}

.gos-sidebar.collapsed .gos-sb-logout {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

/* ============================================================
   HEADER
   ============================================================ */
#main_header {
  background-color: var(--gos-surface);
  box-shadow: 0 1px 0 var(--gos-border);
  border-bottom: 1px solid var(--gos-border);
}

.breadcrumb a,
.breadcrumb span.hs {
  color: var(--gos-text-3);
}

.breadcrumb a.curr,
.breadcrumb a:hover,
.breadcrumb span.curr,
.breadcrumb span:hover {
  color: var(--gos-accent-ink);
}

.search-bar:hover,
.search-bar:focus {
  border-color: var(--gos-accent);
}

/* topbar action icons (theme / notifications / settings) — ported from the
   GrowthOS design `.icon-btn`. 36px square, 18px stroke icon. */
.gos-tb-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gos-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  color: var(--gos-text-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.gos-icon-btn:hover {
  background: var(--gos-surface-3);
  color: var(--gos-text);
}

.gos-icon-btn.bordered {
  border-color: var(--gos-border);
  background: var(--gos-surface);
}

.gos-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.gos-dot-indicator {
  position: relative;
}

.gos-dot-indicator::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8635a;
  border: 1.5px solid var(--gos-surface);
}

/* add / plus button + dashboard switch */
.plus_btn {
  background: var(--gos-accent) !important;
  border-radius: var(--gos-r);
}

.plus_btn:hover {
  background: var(--gos-accent-hover) !important;
  border-color: var(--gos-accent-hover) !important;
}

.timelog-btn {
  background-color: var(--gos-accent);
}

/* ============================================================
   BUTTONS (app-wide)
   ============================================================ */
.btn-primary {
  background: var(--gos-accent) !important;
  border-color: var(--gos-accent) !important;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--gos-accent-hover) !important;
  border-color: var(--gos-accent-hover) !important;
  color: #fff;
}

.btn-outline-primary {
  background-color: #fff;
  border-color: var(--gos-accent);
  color: var(--gos-accent-ink);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--gos-accent) !important;
  border-color: var(--gos-accent) !important;
  color: #fff !important;
}

.modal_btn {
  background-color: var(--gos-accent);
  border-color: var(--gos-accent);
}

.modal_btn:hover {
  background-color: var(--gos-accent-hover);
  border-color: var(--gos-accent-hover);
}

.btn-checkIn {
  background-color: var(--gos-green-fg);
  border-color: var(--gos-green-fg);
  color: #fff;
}

.bg-primary {
  background-color: var(--gos-accent) !important;
}

.text-primary {
  color: var(--gos-accent-ink) !important;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background-color: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-r-lg);
}

.cardboxes .card {
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-r-lg);
  filter: none;
  box-shadow: var(--gos-shadow-sm);
}

.card-header,
.cardboxes .card-header {
  background-color: var(--gos-surface);
  border-bottom: 1px solid var(--gos-border);
}

.title-heading {
  color: var(--gos-text);
}

/* ============================================================
   HOME — KPI tiles
   ============================================================ */
.grid-box {
  background-color: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-r-lg);
  box-shadow: var(--gos-shadow-sm);
}

.grid-box.bg-lightblue {
  background-color: var(--gos-blue-bg) !important;
}

.grid-box.bg-lightgreen {
  background-color: var(--gos-green-bg) !important;
}

.grid-box.bg-lightorange {
  background-color: var(--gos-accent-soft) !important;
}

.flex_text h2 {
  color: var(--gos-text);
}

/* ============================================================
   TABLES
   ============================================================ */
.custom-table thead,
.custom-table th {
  background-color: var(--gos-surface-3);
  color: var(--gos-text-2);
}

.custom-table tbody tr:hover {
  background-color: var(--gos-accent-soft);
}

/* ============================================================
   TABS (dashboard / detail)
   ============================================================ */
.nav-tabs .nav-link.active {
  color: var(--gos-accent) !important;
}

.nav-tabs .nav-link::after,
.nav-tabs .nav-link.active::after {
  background-color: var(--gos-accent) !important;
}

/* ============================================================
   FORM CONTROLS — accent focus ring
   ============================================================ */
.form-control:focus,
.form-select:focus {
  border-color: var(--gos-accent) !important;
  box-shadow: 0 0 0 3px var(--gos-accent-soft) !important;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
*::-webkit-scrollbar-thumb {
  background-color: var(--gos-border-strong);
  border-radius: 8px;
}

/* ============================================================
   DASHBOARD (Home) — GrowthOS page-head + KPI cards
   ============================================================ */
.gos-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 28px 22px;
}

.gos-page-title {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--gos-text);
}

.gos-page-sub {
  font-size: 13.5px;
  color: var(--gos-text-2);
  margin-top: 4px;
}

/* page-head action buttons — ported from the GrowthOS design `.btn`.
   Row: [Standard Dashboard ▾] [Last 30 days ▾] [+ New Lead] */
.gos-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.gos-page-actions .dropdown {
  display: inline-flex;
}

.gos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.gos-btn svg {
  flex-shrink: 0;
}

.gos-btn-ghost {
  background: var(--gos-surface);
  color: var(--gos-text);
  border-color: var(--gos-border-strong);
}

.gos-btn-ghost:hover {
  background: var(--gos-surface-3);
  border-color: var(--gos-text-3);
  color: var(--gos-text);
}

.gos-btn-primary {
  background: var(--gos-accent);
  color: #fff;
  box-shadow: var(--gos-shadow-xs);
}

.gos-btn-primary:hover {
  background: var(--gos-accent-hover);
  color: #fff;
}

.gos-btn-primary:active {
  background: var(--gos-accent-press);
}

/* small terracotta status dot before the dashboard-switcher label */
.gos-dash-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gos-accent);
  flex-shrink: 0;
}

/* dashboard view switcher dropdown — ported verbatim from the claude.ai/design
   "growthos" project (.dash-switch / .dash-menu). */
.gos-dash-switch {
  position: relative;
}

.gos-dash-switch > .gos-btn .gos-caret {
  transition: transform .18s ease;
  opacity: .9;
}

.gos-dash-switch.open > .gos-btn .gos-caret {
  transform: rotate(180deg);
}

.gos-ds-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gos-accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--gos-accent-soft);
}

.gos-dash-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  min-width: 232px;
  background: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-radius: 12px;
  box-shadow: var(--gos-shadow-md);
  padding: 5px;
  animation: gosDdIn .14s ease;
}

.gos-dash-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gos-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.gos-dash-menu-item:hover {
  background: var(--gos-surface-3);
}

.gos-dash-menu-item.sel {
  background: var(--gos-accent-soft);
  color: var(--gos-accent-ink);
  font-weight: 600;
}

.gos-dash-menu-item > div > div:first-child {
  line-height: 1.35;
}

.gos-dash-menu-item .gos-di-sub {
  font-size: 11.5px;
  font-weight: 450;
  line-height: 1.35;
  color: var(--gos-text-3);
  margin-top: 3px;
}

.gos-dash-menu-item.sel .gos-di-sub {
  color: var(--gos-accent-ink);
  opacity: .75;
}

.gos-dash-menu-item .gos-di-check {
  margin-left: auto;
  color: var(--gos-accent);
  flex-shrink: 0;
}

@keyframes gosDdIn {
  from { transform: translateY(-4px); }
  to { transform: translateY(0); }
}

/* KPI row */
.flex_boxes {
  margin: 0 28px;
}

.flex_boxes .grid-container-box {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.gos-kpi {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0 !important;
  padding: 17px 18px !important;
  background: var(--gos-surface) !important;
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-r-lg);
  box-shadow: var(--gos-shadow-xs);
}

.gos-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gos-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.gos-kpi-icon svg {
  width: 18px;
  height: 18px;
}

.gos-kpi-spark {
  display: block;
  flex-shrink: 0;
}

.gos-kpi-label {
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--gos-text-2);
  font-weight: 500;
  margin-bottom: 5px;
}

.gos-kpi-val {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--gos-text);
}

.gos-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
}

.gos-kpi-delta svg {
  width: 13px;
  height: 13px;
}

.gos-delta-up {
  color: var(--gos-green-fg);
}

.gos-delta-down {
  color: #c0473f;
}

.gos-kpi-delta-sub {
  color: var(--gos-text-3);
  font-weight: 500;
  margin-left: 2px;
}

/* ---- GrowthOS graph cards (Pipeline / Lead Sources / Revenue / Activity) ---- */
.gos-graphs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 28px 0;
}

.gos-dash-2col {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
  align-content: start;
}

.gos-graphs .gos-card {
  align-self: start;
  height: auto;
}

.gos-card {
  background: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-r-lg);
  box-shadow: var(--gos-shadow-xs);
  overflow: hidden;
}

.gos-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--gos-border);
}

.gos-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--gos-text);
}

.gos-card-title svg {
  width: 17px;
  height: 17px;
  color: var(--gos-text-3);
}

.gos-link {
  color: var(--gos-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.gos-link:hover {
  color: var(--gos-accent-hover);
  text-decoration: underline;
}

.gos-card-pad {
  padding: 18px 20px;
}

.gos-graph-empty {
  padding: 28px 0;
  text-align: center;
  color: var(--gos-text-3);
  font-size: 13px;
}

/* pipeline overview (real data) */
.gos-pipe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gos-pipe-stage {
  flex: 1;
  min-width: 84px;
}

.gos-pipe-bar {
  height: 7px;
  border-radius: 99px;
  margin-bottom: 11px;
  opacity: .9;
}

.gos-pipe-name {
  font-size: 12.5px;
  color: var(--gos-text-2);
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.3;
}

.gos-pipe-count {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--gos-text);
}

/* lead sources donut */
.gos-donut-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.gos-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-width: 0;
}

.gos-donut-leg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.gos-donut-name {
  display: flex;
  align-items: center;
  color: var(--gos-text-2);
}

.gos-donut-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

.gos-donut-val {
  font-weight: 600;
  color: var(--gos-text);
}

/* recent activity */
.gos-activity-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--gos-border);
}

.gos-activity-item:last-child {
  border-bottom: none;
}

.gos-activity-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.gos-activity-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--gos-text);
}

.gos-activity-target {
  color: var(--gos-accent-ink);
  font-weight: 600;
}

.gos-activity-time {
  color: var(--gos-text-3);
  font-size: 11.5px;
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .gos-dash-2col {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Recent Tickets + Recent Open Opportunities (exact GrowthOS spec)
   ============================================================ */
.gos-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin: 16px 28px 40px;
}

.gos-flexcard {
  display: flex;
  flex-direction: column;
}

/* fixed height for the Recent Tickets / Opportunities cards;
   their inner list/table scrolls. Higher specificity + !important
   beats the card-unify `height: auto !important` rule below. */
.gos-shell-main .gos-grid2 > .gos-flexcard {
  height: 440px !important;
  overflow: hidden;
}

/* slim, minimal scrollbars — applied globally across the app
   (dashboard scroll body, card lists, tables, modals, etc.) */
* {
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: var(--gos-border) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--gos-border);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gos-text-3);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* segmented toggle (tickets) */
.gos-seg {
  display: inline-flex;
  background: var(--gos-surface-3);
  border: 1px solid var(--gos-border);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}

.gos-seg-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--gos-text-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s, color .15s, box-shadow .15s;
}

.gos-seg-btn:hover {
  color: var(--gos-text);
}

.gos-seg-btn.on {
  background: var(--gos-surface);
  color: var(--gos-text);
  font-weight: 600;
  box-shadow: var(--gos-shadow-xs);
}

.gos-seg-n {
  font-size: 11px;
  font-weight: 600;
  color: var(--gos-text-3);
}

.gos-seg-btn.on .gos-seg-n {
  color: var(--gos-accent-ink);
}

/* ticket list */
.gos-ticket-list {
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.gos-ticket-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  transition: background .12s;
}

.gos-ticket-row:hover {
  background: var(--gos-surface-3);
}

.gos-ticket-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.gos-dot-rose { background: var(--gos-rose-fg); }
.gos-dot-amber { background: var(--gos-amber-fg); }
.gos-dot-blue { background: var(--gos-blue-fg); }
.gos-dot-gray { background: var(--gos-text-3); }

.gos-ticket-main {
  flex: 1;
  min-width: 0;
}

.gos-ticket-subj {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gos-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gos-ticket-meta {
  font-size: 12px;
  color: var(--gos-text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gos-ticket-row .gos-badge {
  flex-shrink: 0;
}

/* badges (status + stage pills) */
.gos-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.gos-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
}

.gos-b-rose { background: var(--gos-rose-bg); color: var(--gos-rose-fg); }
.gos-b-blue { background: var(--gos-blue-bg); color: var(--gos-blue-fg); }
.gos-b-amber { background: var(--gos-amber-bg); color: var(--gos-amber-fg); }
.gos-b-green { background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-b-purple { background: var(--gos-purple-bg); color: var(--gos-purple-fg); }
.gos-b-gray { background: var(--gos-gray-bg); color: var(--gos-gray-fg); }
.gos-b-red { background: var(--gos-red-bg); color: var(--gos-red-fg); }

/* opportunities table */
.gos-opp-table {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.gos-tbl {
  width: 100%;
  border-collapse: collapse;
}

.gos-tbl thead th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gos-text-3);
  padding: 11px 16px;
  border-bottom: 1px solid var(--gos-border);
  white-space: nowrap;
  background: var(--gos-surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

.gos-tbl tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gos-border);
  font-size: 13.5px;
  vertical-align: middle;
  color: var(--gos-text);
}

.gos-tbl tbody tr {
  transition: background .12s;
}

.gos-tbl tbody tr:hover {
  background: var(--gos-surface-3);
}

.gos-tbl tbody tr:last-child td {
  border-bottom: none;
}

.gos-cell-name {
  font-weight: 600;
  color: var(--gos-text);
}

.gos-muted {
  color: var(--gos-text-2);
}

.gos-tbl-empty {
  text-align: center;
  color: var(--gos-text-3);
  padding: 24px 0;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .gos-grid2 {
    grid-template-columns: 1fr;
  }
}

/* ---- unify EVERY dashboard card to the exact GrowthOS spec ---- */
.gos-shell-main .card,
.gos-shell-main .gos-card,
.gos-shell-main .cardboxes .card,
.gos-shell-main .grid-box.gos-kpi {
  background: var(--gos-surface) !important;
  border: 1px solid var(--gos-border) !important;
  border-radius: var(--gos-r-lg) !important;     /* 14px */
  box-shadow: var(--gos-shadow-xs) !important;
  filter: none !important;
  /* neutralize App.css `.card { margin-bottom:30px; height:60vh }`
     which otherwise inflates the graph-row grid track (extra gap
     before Recent Tickets) and forces cards to 60vh tall */
  margin: 0 !important;
  height: auto !important;
}

/* section card headers → GrowthOS card-head (icon + title, clean) */
.gos-shell-main .grid-cards .card-header,
.gos-shell-main .cardboxes .card-header {
  padding: 15px 18px;
  min-height: 56px;
  background: var(--gos-surface);
  border-bottom: 1px solid var(--gos-border);
}

/* drop the old decorative absolute icons + their reserved gap */
.gos-shell-main .attachment-background,
.gos-shell-main .attachment-background2,
.gos-shell-main .attachment-background3 {
  display: none !important;
}

.gos-shell-main .title-heading {
  margin-left: 0 !important;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--gos-text);
}

.title-heading {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--gos-text);
}

/* ============================================================

   THEME SWITCHER - themes imported from claude.ai/design growthos.

   Each sets data-theme on <html> and overrides the --gos-* tokens.

   ============================================================ */

html[data-theme="sapphire"] {
  --gos-side-bg: #1b2b4b;
  --gos-bg-dark-2: #253759;
  --gos-bg-dark-3: #304468;
  --gos-on-dark: #e9eef8;
  --gos-on-dark-mut: #8fa0c0;
  --gos-on-dark-faint: #60709a;
  --gos-bg-app: #f4f6fa;
  --gos-surface: #ffffff;
  --gos-surface-2: #fafbfd;
  --gos-surface-3: #f2f4f9;
  --gos-border: #e6eaf2;
  --gos-border-strong: #d4dbe8;
  --gos-text: #101a30;
  --gos-text-2: #57637e;
  --gos-text-3: #8a94ab;
  --gos-accent: #2f5fd0;
  --gos-accent-hover: #2750b4;
  --gos-accent-press: #20439a;
  --gos-accent-soft: #eaf0fc;
  --gos-accent-soft-2: #dbe6f9;
  --gos-accent-ink: #1d49ad;
  --gos-gray-bg: #edf0f5;
  --gos-gray-fg: #5d6c85;
  --gos-logo-grad-2: #2444a4;
  --gos-shell-border: transparent;
  --gos-sb-foot-border: rgba(255,255,255,.06);
  --bs-primary: #2f5fd0;
  --bs-primary-rgb: 47, 95, 208;
}

html[data-theme="emerald"] {
  --gos-side-bg: #21535E;
  --gos-bg-dark-2: #2c636e;
  --gos-bg-dark-3: #38717c;
  --gos-on-dark: #e9f0f1;
  --gos-on-dark-mut: #8ba4a7;
  --gos-on-dark-faint: #5f797c;
  --gos-bg-app: #f4f7f6;
  --gos-surface: #ffffff;
  --gos-surface-2: #fafbfb;
  --gos-surface-3: #f3f6f5;
  --gos-border: #e6ebea;
  --gos-border-strong: #d6dedc;
  --gos-text: #0f2123;
  --gos-text-2: #586b6c;
  --gos-text-3: #8b9c9c;
  --gos-accent: #0e8c6f;
  --gos-accent-hover: #0b7359;
  --gos-accent-press: #095f4a;
  --gos-accent-soft: #e3f3ee;
  --gos-accent-soft-2: #d3ece4;
  --gos-accent-ink: #0a5b48;
  --gos-gray-bg: #eef1f1;
  --gos-gray-fg: #66767f;
  --gos-logo-grad-2: #0a6b53;
  --gos-shell-border: transparent;
  --gos-sb-foot-border: rgba(255,255,255,.06);
  --bs-primary: #0e8c6f;
  --bs-primary-rgb: 14, 140, 111;
}

html[data-theme="ice"] {
  --gos-side-bg: #e7ebf2;
  --gos-bg-dark-2: #dbe2ec;
  --gos-bg-dark-3: #ffffff;
  --gos-on-dark: #1c2942;
  --gos-on-dark-mut: #5b6b84;
  --gos-on-dark-faint: #94a3b8;
  --gos-bg-app: #f0f2f5;
  --gos-surface: #ffffff;
  --gos-surface-2: #f8fafc;
  --gos-surface-3: #edf1f7;
  --gos-border: rgba(26,86,219,.10);
  --gos-border-strong: rgba(26,86,219,.22);
  --gos-text: #0f172a;
  --gos-text-2: #51607a;
  --gos-text-3: #94a3b8;
  --gos-accent: #1a56db;
  --gos-accent-hover: #174cc2;
  --gos-accent-press: #1342a8;
  --gos-accent-soft: #e8eefb;
  --gos-accent-soft-2: #d6e2f8;
  --gos-accent-ink: #15449c;
  --gos-blue-bg: #dff4fd;
  --gos-blue-fg: #0284c7;
  --gos-gray-bg: #e2e8f0;
  --gos-gray-fg: #64748b;
  --gos-logo-grad-2: #0ea5e9;
  --gos-shell-border: rgba(26,86,219,.12);
  --gos-sb-foot-border: rgba(15,23,42,.08);
  --bs-primary: #1a56db;
  --bs-primary-rgb: 26, 86, 219;
}

html[data-theme="solar"] {
  --gos-side-bg: #f9e9df;
  --gos-bg-dark-2: #f3dccc;
  --gos-bg-dark-3: #ffffff;
  --gos-on-dark: #44291c;
  --gos-on-dark-mut: #8a6450;
  --gos-on-dark-faint: #bb947e;
  --gos-bg-app: #fff4ec;
  --gos-surface: #ffffff;
  --gos-surface-2: #fff8f2;
  --gos-surface-3: #fdefe4;
  --gos-border: #f6e0d2;
  --gos-border-strong: #ecc9b3;
  --gos-text: #331d12;
  --gos-text-2: #7d5a48;
  --gos-text-3: #b08c78;
  --gos-accent: #ff6b35;
  --gos-accent-hover: #f05a24;
  --gos-accent-press: #d94e1d;
  --gos-accent-soft: #ffece3;
  --gos-accent-soft-2: #ffd9c7;
  --gos-accent-ink: #c2451a;
  --gos-rose-bg: #fde4ee;
  --gos-rose-fg: #d72f72;
  --gos-amber-bg: #fff1d9;
  --gos-amber-fg: #9a6a10;
  --gos-gray-bg: #f5ebe4;
  --gos-gray-fg: #8d7263;
  --gos-logo-grad-2: #f7478a;
  --gos-shell-border: #f3dccc;
  --gos-sb-foot-border: rgba(86,40,20,.09);
  --bs-primary: #ff6b35;
  --bs-primary-rgb: 255, 107, 53;
}

html[data-theme="mint"] {
  --gos-side-bg: #e3f2ec;
  --gos-bg-dark-2: #d3ebe1;
  --gos-bg-dark-3: #ffffff;
  --gos-on-dark: #143c30;
  --gos-on-dark-mut: #4e7466;
  --gos-on-dark-faint: #8aab9e;
  --gos-bg-app: #eef9f5;
  --gos-surface: #ffffff;
  --gos-surface-2: #f4fdf9;
  --gos-surface-3: #e8f6f0;
  --gos-border: #ddeee7;
  --gos-border-strong: #bfded2;
  --gos-text: #0e2a22;
  --gos-text-2: #4e6f64;
  --gos-text-3: #87a59a;
  --gos-accent: #059669;
  --gos-accent-hover: #04855d;
  --gos-accent-press: #037351;
  --gos-accent-soft: #e3f6ef;
  --gos-accent-soft-2: #c9eee1;
  --gos-accent-ink: #047453;
  --gos-blue-bg: #dff5fb;
  --gos-blue-fg: #077992;
  --gos-purple-bg: #ecebfd;
  --gos-purple-fg: #6d5ae0;
  --gos-gray-bg: #eaf1ee;
  --gos-gray-fg: #647d73;
  --gos-logo-grad-2: #0891b2;
  --gos-shell-border: #d3ebe1;
  --gos-sb-foot-border: rgba(8,60,45,.09);
  --bs-primary: #059669;
  --bs-primary-rgb: 5, 150, 105;
}

html[data-theme="superleap"] {
  --gos-side-bg: #0a221d;
  --gos-bg-dark-2: #143229;
  --gos-bg-dark-3: #1d4336;
  --gos-on-dark: #e7f2ec;
  --gos-on-dark-mut: #8fae9f;
  --gos-on-dark-faint: #5d7c6e;
  --gos-bg-app: #f5f7f3;
  --gos-surface: #ffffff;
  --gos-surface-2: #fafcf8;
  --gos-surface-3: #eff4ee;
  --gos-border: #e3eae2;
  --gos-border-strong: #cfdacf;
  --gos-text: #11241c;
  --gos-text-2: #56695f;
  --gos-text-3: #8a9c91;
  --gos-accent: #12b76a;
  --gos-accent-hover: #0ea35e;
  --gos-accent-press: #0c8f53;
  --gos-accent-soft: #e6f7ee;
  --gos-accent-soft-2: #cdf0de;
  --gos-accent-ink: #0a7a47;
  --gos-green-bg: #def3e7;
  --gos-green-fg: #1d7a4b;
  --gos-gray-bg: #edf1ec;
  --gos-gray-fg: #62756a;
  --gos-logo-grad-2: #0a7a47;
  --gos-shell-border: transparent;
  --gos-sb-foot-border: rgba(255,255,255,.07);
  --bs-primary: #12b76a;
  --bs-primary-rgb: 18, 183, 106;
}

html[data-theme="forest"] {
  --gos-side-bg: #28511c;
  --gos-bg-dark-2: #325f24;
  --gos-bg-dark-3: #3d6e2d;
  --gos-on-dark: #ecf2e7;
  --gos-on-dark-mut: #a9bf9e;
  --gos-on-dark-faint: #7a9370;
  --gos-bg-app: #f6f4ec;
  --gos-surface: #fdfdfd;
  --gos-surface-2: #f9f8f2;
  --gos-surface-3: #f1eee2;
  --gos-border: #e6e1d0;
  --gos-border-strong: #cfc7ac;
  --gos-text: #2a2118;
  --gos-text-2: #71665c;
  --gos-text-3: #a0958a;
  --gos-accent: #356622;
  --gos-accent-hover: #28511c;
  --gos-accent-press: #1f4015;
  --gos-accent-soft: #e9f0e4;
  --gos-accent-soft-2: #d6e4cc;
  --gos-accent-ink: #28511c;
  --gos-blue-bg: #e3eef7;
  --gos-blue-fg: #3d72a4;
  --gos-green-bg: #e4eedd;
  --gos-green-fg: #38641f;
  --gos-gray-bg: #edeada;
  --gos-gray-fg: #7d7257;
  --gos-logo-grad-2: #173a0e;
  --gos-shell-border: transparent;
  --gos-sb-foot-border: rgba(255,255,255,.08);
  --bs-primary: #356622;
  --bs-primary-rgb: 53, 102, 34;
}

html[data-theme="everglade"] {
  --gos-side-bg: #264233;
  --gos-bg-dark-2: #2f5040;
  --gos-bg-dark-3: #3a5f4d;
  --gos-on-dark: #eaf1ec;
  --gos-on-dark-mut: #a3b8aa;
  --gos-on-dark-faint: #708a79;
  --gos-bg-app: #fdf0e3;
  --gos-surface: #fffaf4;
  --gos-surface-2: #fdf4e9;
  --gos-surface-3: #f8e9d9;
  --gos-border: #f0dcc6;
  --gos-border-strong: #e0c5a6;
  --gos-text: #21362b;
  --gos-text-2: #5e7166;
  --gos-text-3: #93a297;
  --gos-accent: #264233;
  --gos-accent-hover: #1d3428;
  --gos-accent-press: #172a20;
  --gos-accent-soft: #e7efe9;
  --gos-accent-soft-2: #d2e1d7;
  --gos-accent-ink: #264233;
  --gos-rose-bg: #fde6e6;
  --gos-rose-fg: #d8494d;
  --gos-amber-bg: #faf3c0;
  --gos-amber-fg: #8c8211;
  --gos-red-bg: #f8e0e0;
  --gos-red-fg: #bb2834;
  --gos-blue-bg: #e1edf7;
  --gos-blue-fg: #0f5c95;
  --gos-green-bg: #e2ece5;
  --gos-green-fg: #34604a;
  --gos-gray-bg: #ebeeea;
  --gos-gray-fg: #6c7a6e;
  --gos-logo-grad-2: #16291f;
  --gos-shell-border: transparent;
  --gos-sb-foot-border: rgba(255,255,255,.08);
  --bs-primary: #264233;
  --bs-primary-rgb: 38, 66, 51;
}

html[data-theme="solar"] .gos-shell-main { background: linear-gradient(135deg, #fff8f0 0%, #fff0e8 100%); }
html[data-theme="solar"] .gos-shell-main #main_header { background: linear-gradient(160deg, #ffffff 0%, #fff5ee 100%); }
html[data-theme="solar"] .gos-card { background: linear-gradient(145deg, #ffffff 0%, #fff8f2 100%) !important; }
html[data-theme="solar"] .gos-btn-primary { background: linear-gradient(135deg, #ff6b35 0%, #f7478a 100%); }
html[data-theme="solar"] .gos-sb-logo { background: linear-gradient(135deg, #ffb347 0%, #ff6b35 100%); }

html[data-theme="mint"] .gos-shell-main { background: linear-gradient(135deg, #f2fbf8 0%, #eaf7f4 100%); }
html[data-theme="mint"] .gos-shell-main #main_header { background: linear-gradient(160deg, #ffffff 0%, #f2fefa 100%); }
html[data-theme="mint"] .gos-card { background: linear-gradient(145deg, #ffffff 0%, #f4fdf9 100%) !important; }
html[data-theme="mint"] .gos-btn-primary { background: linear-gradient(135deg, #059669 0%, #0891b2 100%); }
html[data-theme="mint"] .gos-sb-logo { background: linear-gradient(135deg, #059669 0%, #0891b2 100%); }

/* theme switcher dropdown (palette icon) */
.gos-theme-wrap { position: relative; }
.gos-theme-menu {
  position: absolute; top: 44px; right: 0; z-index: 80; width: 200px;
  background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 12px;
  box-shadow: var(--gos-shadow-md); padding: 5px;
}
.gos-theme-menu-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gos-text-3); padding: 7px 10px 5px;
  text-align: left;
}
.gos-theme-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 550;
  color: var(--gos-text); text-align: left; background: none; border: none; cursor: pointer;
  transition: background .12s;
}
.gos-theme-opt:hover { background: var(--gos-surface-3); }
.gos-theme-swatch { display: flex; gap: 4px; flex-shrink: 0; }
.gos-theme-dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
.gos-theme-check { margin-left: auto; color: var(--gos-accent); display: grid; place-items: center; }

/* dark-sidebar themes: keep the active nav item legible (mirrors the design's
   --sb-active-fg: #fff on dark sidebars, which the app's static rule predates). */
html[data-theme="sapphire"] .gos-sb-item.active,
html[data-theme="emerald"] .gos-sb-item.active,
html[data-theme="superleap"] .gos-sb-item.active,
html[data-theme="forest"] .gos-sb-item.active,
html[data-theme="everglade"] .gos-sb-item.active {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: none;
}

/* ============================================================
   LEADS PAGE — GrowthOS re-skin (AG Grid theming + toolbar).
   Scoped under .gos-leads so other AG-grid pages are untouched.
   ============================================================ */
.gos-leads .ag-theme-balham {
  --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ag-font-size: 13.5px;
  --ag-background-color: var(--gos-surface);
  --ag-foreground-color: var(--gos-text);
  --ag-data-color: var(--gos-text);
  --ag-secondary-foreground-color: var(--gos-text-3);
  --ag-header-background-color: var(--gos-surface-2);
  --ag-header-foreground-color: var(--gos-text-3);
  --ag-border-color: var(--gos-border);
  --ag-row-border-color: var(--gos-border);
  --ag-row-border-width: 1px;
  --ag-row-hover-color: #f4f1e9;
  --ag-selected-row-background-color: var(--gos-accent-soft);
  --ag-odd-row-background-color: var(--gos-surface);
  --ag-control-panel-background-color: var(--gos-surface-2);
  --ag-header-height: 44px;
  --ag-row-height: 64px;
  --ag-cell-horizontal-padding: 16px;
  --ag-borders: solid 1px;
  --ag-checkbox-checked-color: var(--gos-accent);
  --ag-checkbox-indeterminate-color: var(--gos-accent);
  --ag-checkbox-unchecked-color: var(--gos-border-strong);
  --ag-input-focus-border-color: var(--gos-accent);
  --ag-range-selection-border-color: var(--gos-accent);
  --ag-range-selection-background-color: rgba(201, 99, 66, .10);
  --ag-selected-tab-underline-color: var(--gos-accent);
  --ag-active-color: var(--gos-accent);
}

/* header labels → uppercase micro-caps like the design's thead */
.gos-leads .ag-theme-balham .ag-header-cell-text {
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.gos-leads .ag-theme-balham .ag-header {
  border-bottom: 1px solid var(--gos-border);
}

/* lead name / link cells follow the accent ink */
.gos-leads .ag-theme-balham a {
  color: var(--gos-accent-ink);
  font-weight: 600;
}

/* rounded grid container to match GrowthOS cards */
.gos-leads .cutome_ag_theme {
  border: 1px solid var(--gos-border);
  border-top: 1px solid var(--gos-border);
  border-radius: 0 0 var(--gos-r-lg) var(--gos-r-lg);
  overflow: hidden;
  background: var(--gos-surface);
}

/* --- leads toolbar → GrowthOS page-head + actions --- */
/* page padding to match the design's .page (24px 28px 40px) — insets the
   title, toolbar and table together. */
.gos-leads .dash-container {
  padding: 24px 28px 24px !important;
}

.gos-leads .main-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 0;
  border: none;
  background: none;
}

.gos-leads .pagetitle {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--gos-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.gos-leads .pagetitle img { display: none; } /* drop the legacy back-arrow */

.gos-leads .third-div,
.gos-leads .left_lead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* primary "Create Lead" */
.gos-leads .timelog-btn {
  background: var(--gos-accent) !important;
  color: #fff !important;
  border: none !important;
  height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
}
.gos-leads .timelog-btn:hover { background: var(--gos-accent-hover) !important; }

.gos-leads .btn-group .dropdown-toggle-split {
  background: var(--gos-accent) !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 0 9px 9px 0 !important;
}
.gos-leads .btn-group .timelog-btn { border-radius: 9px 0 0 9px; }

/* ghost action buttons (Options / Tags / Actions / Create Ticket) */
.gos-leads .action-btn,
.gos-leads .task_btn {
  background: var(--gos-surface) !important;
  color: var(--gos-text) !important;
  border: 1px solid var(--gos-border-strong) !important;
  height: 38px;
  padding: 0 14px !important;
  border-radius: 9px !important;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.gos-leads .action-btn:hover,
.gos-leads .task_btn:hover {
  background: var(--gos-surface-3) !important;
  border-color: var(--gos-text-3) !important;
  color: var(--gos-text) !important;
}

/* selection mode: tint the toolbar like the design's bulk-bar */
.gos-leads .left_lead {
  background: var(--gos-accent-soft);
  box-shadow: inset 3px 0 0 var(--gos-accent);
  border-radius: 10px;
  padding: 8px 12px;
}

/* search box → GrowthOS .search treatment */
.gos-leads .search-container {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--gos-surface-3);
  border: 1px solid var(--gos-border);
  border-radius: 9px;
  height: 38px;
  transition: border-color .15s, background .15s;
}
.gos-leads .search-container:focus-within {
  border-color: var(--gos-accent);
  background: var(--gos-surface);
}
.gos-leads .search-container .form-control {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 40px 0 12px !important; /* right room for the search icon so text doesn't overlap */
  height: 36px;
  width: 100%;
  font-size: 13.5px;
  color: var(--gos-text);
}
.gos-leads .search-container .contactsearch svg { width: 16px; height: 16px; }
.gos-leads .search-container .clear-btn { color: var(--gos-text-3); cursor: pointer; }

/* --- leads: avatar Lead cell + Owner cell (design's two-line rows) --- */
.gos-leads .ag-theme-balham .ag-cell {
  display: flex;
  align-items: center;
}
.gos-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
}
.gos-ava.sm {
  width: 24px;
  height: 24px;
  font-size: 10.5px;
}
.gos-lead-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.gos-lead-cell-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.gos-lead-name {
  font-weight: 600;
  color: var(--gos-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.gos-lead-name:hover { color: var(--gos-accent-ink); }
.gos-lead-sub {
  font-size: 12px;
  color: var(--gos-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gos-owner-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gos-owner-name {
  font-size: 12.5px;
  color: var(--gos-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* leads page-head: title + sub stacked, hard left-aligned */
.gos-leads .gos-lead-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.gos-leads .gos-lead-head .pagetitle {
  margin: 0;
  padding: 0;
  line-height: 1.15;
  display: block;
  text-align: left;
}
.gos-leads .gos-lead-head .gos-page-sub {
  margin: 3px 0 0;
  padding: 0;
  text-align: left;
}

/* leads page-head action buttons (Import / Export / New Lead / ⋯) */
.gos-leads .gos-lead-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.gos-leads .gos-lead-actions .gos-more {
  display: inline-flex;
}

/* card toolbar — sits attached to the top of the table card (Options left,
   search right) like the design's card header */
.gos-leads .gos-lead-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 16px;
  background: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-bottom: none;
  border-radius: var(--gos-r-lg) var(--gos-r-lg) 0 0;
}
.gos-leads .gos-lead-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.gos-leads .gos-lead-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.gos-leads .gos-lead-toolbar-search .search-container { width: 300px; max-width: 100%; }
.gos-leads .result-count { font-size: 12.5px; color: var(--gos-text-3); white-space: nowrap; }
.gos-leads .result-count strong { color: var(--gos-text-2); font-weight: 650; }
.gos-leads .gos-filter-btn { flex-shrink: 0; }

/* override the app's global purple AG header gradient + lavender row tints
   (style.css paints these with !important; we neutralize them on leads) */
.gos-leads .ag-header,
.gos-leads .ag-advanced-filter-header,
.gos-leads .ag-header-viewport,
.gos-leads .ag-pinned-left-header,
.gos-leads .ag-pinned-left-header .ag-header-cell {
  background: var(--gos-surface-2) !important;
  background-image: none !important;
}
.gos-leads .ag-theme-balham .ag-row.ag-row-level-0,
.gos-leads .ag-pinned-left-cols-container .ag-row-level-0 {
  background-color: transparent !important;
  font-weight: 400 !important;
}

/* The global `* { font-family: Inter !important }` reset above also hits AG
   Grid's icon font, hiding sort arrows / menus / checkbox glyphs. Restore the
   theme icon fonts for the grids (app uses balham; alpine/material kept too). */
.ag-theme-balham .ag-icon,
.ag-theme-balham .ag-checkbox-input-wrapper,
.ag-theme-balham .ag-checkbox-input-wrapper::after {
  font-family: 'agGridBalham' !important;
}
.ag-theme-alpine .ag-icon,
.ag-theme-alpine .ag-checkbox-input-wrapper,
.ag-theme-alpine .ag-checkbox-input-wrapper::after {
  font-family: 'agGridAlpine' !important;
}
.ag-theme-material .ag-icon,
.ag-theme-material .ag-checkbox-input-wrapper,
.ag-theme-material .ag-checkbox-input-wrapper::after {
  font-family: 'agGridMaterial' !important;
}

/* Leads grid height: the shared `#CRM_pageSection .ag-grid-container` rule in
   style.css uses calc(100vh - 110px). The redesigned leads page has extra
   title + toolbar + page padding above the grid, so subtract more here so the
   grid scrolls internally and the page doesn't. Scoped to .gos-leads (with the
   #CRM_pageSection id) so other list pages keep their original height. */
#CRM_pageSection .gos-leads .ag-grid-container {
  height: calc(100vh - 250px) !important;
}

/* Leads with the My Leads/All Leads/Teams/Buckets tab bar: like Campaigns/Sales,
   there's an extra ~64px .gos-camptabs row above the grid, so subtract more so the
   grid scrolls internally and the page doesn't. Higher specificity (both classes)
   wins over the plain .gos-leads rule. */
#CRM_pageSection .gos-leads.gos-leads-tabs .ag-grid-container {
  height: calc(100vh - 314px) !important;
}
#CRM_pageSection .gos-leads.gos-leads-tabs.has-filterbar .ag-grid-container {
  height: calc(100vh - 366px) !important;
}

/* Leads scope tab bar (My Leads / All Leads / Teams / Buckets) — ported from the
   design growthos/LeadsList.jsx `.tabs.lead-tabs` / `.tab`. A lighter pill tab than
   the shared .gos-camptabs (Campaigns/Sales/Products): leads has its own design file. */
.gos-leads .gos-lead-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 14px 0 16px; }
.gos-leads .gos-lead-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border-radius: 8px; font-size: 13.5px; font-weight: 550; color: var(--gos-text-2);
  background: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background .14s, color .14s, border-color .14s;
}
.gos-leads .gos-lead-tab svg { width: 15px; height: 15px; flex: none; }
.gos-leads .gos-lead-tab:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-leads .gos-lead-tab.active {
  background: var(--gos-surface); color: var(--gos-text);
  border-color: var(--gos-border); box-shadow: var(--gos-shadow-xs); font-weight: 600;
}
.gos-leads .gos-lead-tab .count {
  font-size: 11px; font-weight: 600; color: var(--gos-text-3);
  background: var(--gos-surface-3); border-radius: 6px; padding: 1px 6px;
}
.gos-leads .gos-lead-tab.active .count { background: var(--gos-accent-soft); color: var(--gos-accent-ink); }

/* Teams / Buckets team-picker sits inside the shared toolbar's left group */
.gos-leads .gos-lead-picker-inline { width: 220px; flex: none; }
/* client-side quick-filter search for the tab grids (mirrors the GlobalSearch box) */
.gos-leads .gos-tab-search {
  width: 300px; max-width: 100%; height: 40px;
  border: 1px solid var(--gos-border-strong); border-radius: 10px;
  padding: 0 13px; font-size: 13.5px; color: var(--gos-text);
  background: var(--gos-surface); outline: none; font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
}
.gos-leads .gos-tab-search:focus { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-leads .gos-tab-search::placeholder { color: var(--gos-text-3); }

/* My Leads / Teams / Buckets tab bodies render a bare AG grid — give it a rounded,
   bordered card so it reads as a contained list (like the All Leads list card, whose
   top edge is the .gos-lead-toolbar). Scoped to the gos-tabgrid marker only. */
.gos-leads .gos-tabgrid {
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-r-lg);
  overflow: hidden;
  box-shadow: var(--gos-shadow-xs);
  background: var(--gos-surface);
}

/* ============================================================
   PAGER — custom grid pagination, ported from the GrowthOS
   design's PageFooter (CustomStatusBar renders .gos-pager).
   ============================================================ */
.gos-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; width: 100%;
  padding: 13px 18px; background: var(--gos-surface-2);
}
.gos-pager .pager-info { font-size: 12.5px; color: var(--gos-text-2); }
.gos-pager .pager-info strong { color: var(--gos-text); font-weight: 600; }
.gos-pager .pager-ctrls { display: flex; align-items: center; gap: 18px; }
.gos-pager .pager-size { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gos-text-3); }
.gos-pager .pager-size-sel { position: relative; display: inline-flex; align-items: center; }
.gos-pager .pager-size-sel select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gos-text);
  background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 8px;
  padding: 6px 26px 6px 10px;
}
.gos-pager .pager-size-sel select:hover { border-color: var(--gos-accent); }
.gos-pager .pager-size-sel svg { position: absolute; right: 8px; pointer-events: none; color: var(--gos-text-3); }
.gos-pager .pager-pages { display: flex; align-items: center; gap: 3px; }
.gos-pager .pager-num,
.gos-pager .pager-arrow {
  min-width: 32px; height: 32px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 550; color: var(--gos-text-2);
  transition: background .12s, color .12s, border-color .12s;
}
.gos-pager .pager-num:hover,
.gos-pager .pager-arrow:not(:disabled):hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-pager .pager-num.on { background: var(--gos-accent); border-color: var(--gos-accent); color: #fff; font-weight: 650; box-shadow: var(--gos-shadow-xs); }
.gos-pager .pager-arrow:disabled { opacity: .35; cursor: default; }
.gos-pager .pager-gap { min-width: 22px; text-align: center; color: var(--gos-text-3); font-size: 13px; user-select: none; }

/* make the AG status bar render the pager as one flush full-width footer (leads).
   The center section must stretch to 100% or the pager's space-between collapses
   and everything packs to the left. */
.gos-leads .ag-status-bar {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  border-top: 1px solid var(--gos-border) !important;
  background: var(--gos-surface-2);
}
.gos-leads .ag-status-bar-left,
.gos-leads .ag-status-bar-right {
  display: none !important;
}
.gos-leads .ag-status-bar-center {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.gos-leads .ag-status-bar-center > *,
.gos-leads .ag-status-bar-center .ag-status-panel {
  flex: 1 1 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gos-leads .ag-status-bar .gos-pager { width: 100% !important; }

/* grid borders → match the design's card: one ivory border (on .cutome_ag_theme),
   horizontal row borders only. Kill AG's grey grid border + vertical separators. */
.gos-leads .ag-theme-balham {
  border: none !important;
}
.gos-leads .ag-theme-balham .ag-cell,
.gos-leads .ag-theme-balham .ag-header-cell {
  border-right: none !important;
  border-left: none !important;
}
.gos-leads .ag-theme-balham .ag-pinned-left-cols-container,
.gos-leads .ag-theme-balham .ag-pinned-left-header,
.gos-leads .ag-theme-balham .ag-pinned-right-cols-container,
.gos-leads .ag-theme-balham .ag-cell.ag-cell-last-left-pinned,
.gos-leads .ag-theme-balham .ag-header-cell.ag-column-last,
.gos-leads .ag-theme-balham .ag-cell.ag-cell-last-left-pinned {
  border-right: none !important;
}
.gos-leads .ag-theme-balham .ag-pinned-left-header {
  border-right: none !important;
}
.gos-leads .ag-theme-balham .ag-horizontal-left-spacer {
  border-right: none !important;
}
.gos-leads .ag-theme-balham .ag-row {
  border-bottom: 1px solid var(--gos-border) !important;
}
.gos-leads .ag-theme-balham .ag-header {
  border-bottom: 1px solid var(--gos-border) !important;
}
/* App.css `.ag-row-hover` sets background directly (var(--table-row-hover-color)),
   beating the --ag-row-hover-color theme var; re-point it at the theme var here. */
.gos-leads .ag-theme-balham .ag-row.ag-row-hover {
  background-color: var(--ag-row-hover-color) !important;
}

/* three-dots "More" menu in the leads page-head (per design) */
.gos-leads .gos-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex-shrink: 0;
  border-radius: 9px; border: 1px solid var(--gos-border-strong);
  background: var(--gos-surface); color: var(--gos-text-2); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.gos-leads .gos-btn-icon:hover {
  background: var(--gos-surface-3); border-color: var(--gos-text-3); color: var(--gos-text);
}
.gos-leads .gos-btn-icon[aria-expanded="true"] {
  background: var(--gos-surface-3); border-color: var(--gos-accent); color: var(--gos-accent-ink);
}

/* the More dropdown — design's accent-bordered menu */
.gos-more-menu.dropdown-menu {
  min-width: 200px; padding: 0; overflow: hidden; margin-top: 6px;
  background: var(--gos-surface);
  border: 1.5px solid var(--gos-accent);
  border-radius: 10px;
  box-shadow: var(--gos-shadow-md);
}
.gos-more-menu .gos-more-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 15px; font-size: 13.5px; font-weight: 500;
  color: var(--gos-text); background: none; border: none; text-align: left; cursor: pointer;
}
.gos-more-menu .gos-more-item:hover { background: var(--gos-accent-soft); color: var(--gos-accent-ink); }
.gos-more-menu .gos-more-item svg { flex-shrink: 0; }

/* grid skeleton loader — shimmer placeholder rows. Starts BELOW the column
   header (44px = headerHeight) so the real headers stay visible and only the
   data rows shimmer. */
.gos-skel {
  position: absolute; top: 44px; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--gos-surface);
  display: flex; flex-direction: column; overflow: hidden;
}
.gos-skel-row {
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--gos-border);
}
.gos-skel-box { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
.gos-skel-lead { display: flex; align-items: center; gap: 11px; width: 230px; flex-shrink: 0; }
.gos-skel-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.gos-skel-lines { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.gos-skel-col { flex: 1; min-width: 0; }
.gos-skel-bar { display: block; height: 10px; border-radius: 5px; }
.gos-skel-bar.sm { height: 8px; }
.gos-skel-an {
  background: linear-gradient(90deg, var(--gos-surface-3) 25%, var(--gos-surface-2) 37%, var(--gos-surface-3) 63%);
  background-size: 400% 100%;
  animation: gosSkel 1.4s ease infinite;
}
@keyframes gosSkel {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* dashboard skeleton — graph card body (stacked bars) + recent-data list rows */
.gos-skel-graph { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.gos-skel-graph .gos-skel-bar { height: 14px; }
.gos-skel-list { padding: 6px 18px 14px; }
.gos-skel-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--gos-border);
}
.gos-skel-list-row:last-child { border-bottom: none; }

/* sidebar skeleton — nav placeholder rows matching .gos-sb-item rhythm */
.gos-sb-skel-item {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 12px; margin: 2px 0;
}
.gos-sb-skel-item .gos-skel-an,
.gos-sb-foot .gos-skel-an {
  background: linear-gradient(90deg, rgba(255,255,255,.45) 25%, rgba(255,255,255,.8) 37%, rgba(255,255,255,.45) 63%);
  background-size: 400% 100%;
}

/* full-page app-shell skeleton — topbar + page-head action placeholders */
.gos-skel-topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; min-height: 60px; padding: 0 22px; flex-shrink: 0;
  border-bottom: 1px solid var(--gos-border); background: var(--gos-surface);
}
.gos-skel-topbar-r { display: flex; align-items: center; gap: 10px; }
.gos-skel-topbar-r .gos-skel-box { width: 34px; height: 34px; border-radius: 9px; }
.gos-skel-head-actions { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   LEADS FILTERS — custom filter panel (ported from design)
   ============================================================ */
.gos-leads .gos-filter-wrap { position: relative; display: inline-flex; }

/* count badge on the Filters button */
.gos-leads .gos-filter-btn .count {
  font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: var(--gos-accent);
  border-radius: 999px; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gos-leads .gos-filter-btn.on { background: var(--gos-surface-3); border-color: var(--gos-text-3); }

/* the dropdown panel */
.gos-leads .gos-filter-menu {
  position: absolute; top: 44px; right: 0; left: auto; z-index: 80;
  min-width: 320px; background: var(--gos-surface);
  border: 1.5px solid var(--gos-accent); border-radius: 10px;
  box-shadow: var(--gos-shadow-md); overflow: hidden;
}
.gos-leads .filter-panel { display: flex; flex-direction: column; max-height: min(40vh, 540px); }
.gos-leads .filter-search { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--gos-border); color: var(--gos-text-3); }
.gos-leads .filter-search input { border: none; outline: none; background: transparent; font: inherit; font-size: 13.5px; color: var(--gos-text); width: 100%; }
.gos-leads .filter-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.gos-leads .filter-empty { padding: 18px 14px; font-size: 13px; color: var(--gos-text-3); text-align: center; }
.gos-leads .filter-field { border-bottom: 1px solid var(--gos-border); }
.gos-leads .filter-field:last-child { border-bottom: none; }
.gos-leads .filter-field-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 14px; background: transparent; border: none; cursor: pointer; text-align: left; transition: background .12s; }
.gos-leads .filter-field-head:hover { background: var(--gos-surface-3); }
.gos-leads .filter-field .ff-type { color: var(--gos-text-3); flex-shrink: 0; }
.gos-leads .filter-field.active .ff-type { color: var(--gos-accent); }
.gos-leads .ff-label { font-size: 13.5px; font-weight: 550; color: var(--gos-text); }
.gos-leads .ff-summary { font-size: 12px; color: var(--gos-accent-ink); background: var(--gos-accent-soft); border-radius: 6px; padding: 2px 7px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-leads .ff-caret { margin-left: auto; color: var(--gos-text-3); transition: transform .16s; flex-shrink: 0; }
.gos-leads .filter-field.open .ff-caret { transform: rotate(180deg); }
.gos-leads .filter-field-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.gos-leads .filter-row { display: flex; align-items: center; gap: 8px; }
.gos-leads .filter-row.col { flex-direction: column; align-items: stretch; }
.gos-leads .filter-input {
  font: inherit; font-size: 13px; color: var(--gos-text);
  background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 8px;
  padding: 7px 9px; width: 100%; outline: none;
}
.gos-leads .filter-input:focus { border-color: var(--gos-accent); }
.gos-leads .filter-op { -webkit-appearance: none; appearance: none; cursor: pointer; flex-shrink: 0; max-width: 140px; }
.gos-leads .filter-and { font-size: 12px; color: var(--gos-text-3); flex-shrink: 0; }
.gos-leads .filter-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.gos-leads .filter-chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 12px; font-weight: 550; color: var(--gos-text-2);
  background: var(--gos-surface-3); border: 1px solid transparent; border-radius: 7px; padding: 5px 9px;
  transition: background .12s, color .12s, border-color .12s;
}
.gos-leads .filter-chip:hover { border-color: var(--gos-border-strong); color: var(--gos-text); }
.gos-leads .filter-chip.on { background: var(--gos-accent-soft); color: var(--gos-accent-ink); border-color: var(--gos-accent); font-weight: 650; }
.gos-leads .filter-clear-mini { align-self: flex-start; border: none; background: transparent; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--gos-red-fg); padding: 0; }
.gos-leads .filter-clear-mini:hover { text-decoration: underline; }
.gos-leads .filter-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; gap: 12px; border-top: 1px solid var(--gos-border); }
.gos-leads .filter-foot .faint { color: var(--gos-text-3); }
.gos-leads .filter-foot .gos-foot-actions { display: flex; align-items: center; gap: 10px; }
.gos-leads .filter-foot .link { color: var(--gos-accent); font-size: 13px; font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; white-space: nowrap; }
.gos-leads .gos-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }

/* boolean yes/no segmented control */
.gos-leads .seg-bool { display: inline-flex; background: var(--gos-surface-3); border-radius: 9px; padding: 3px; gap: 2px; align-self: flex-start; }
.gos-leads .seg-bool button { border: none; background: transparent; cursor: pointer; padding: 5px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 550; color: var(--gos-text-2); }
.gos-leads .seg-bool button.on { background: var(--gos-surface); color: var(--gos-text); box-shadow: var(--gos-shadow-xs); font-weight: 600; }

/* active-filter chips bar (below the toolbar) */
.gos-leads .filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 16px; border-left: 1px solid var(--gos-border); border-right: 1px solid var(--gos-border); border-bottom: 1px solid var(--gos-border); background: var(--gos-surface-2); }
.gos-leads .filter-bar-label { font-size: 12px; font-weight: 600; color: var(--gos-text-3); margin-right: 2px; }
.gos-leads .active-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 550; color: var(--gos-text);
  background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 8px; padding: 5px 9px;
  transition: border-color .12s, color .12s, background .12s;
}
.gos-leads .active-chip:hover { border-color: var(--gos-red-fg); color: var(--gos-red-fg); background: var(--gos-red-bg); }
.gos-leads .active-chip .ac-key { color: var(--gos-text-3); font-weight: 600; }
.gos-leads .active-chip:hover .ac-key { color: var(--gos-red-fg); }
.gos-leads .active-chip .ac-x { display: inline-flex; align-items: center; opacity: .55; border-radius: 4px; }
.gos-leads .active-chip .ac-x:hover { opacity: 1; }
.gos-leads .filter-bar .link { color: var(--gos-accent); font-size: 12px; font-weight: 600; cursor: pointer; background: none; border: none; }

/* when the active-filter chips bar is shown it adds ~52px of height; shrink the
   grid by that amount so the table shows fewer rows instead of overflowing the
   page (keeps the pager on screen). */
#CRM_pageSection .gos-leads.has-filterbar .ag-grid-container {
  height: calc(100vh - 302px) !important;
}

/* ============================================================
   LEADS COLUMNS — show/hide column menu (ported from design)
   ============================================================ */
.gos-leads .gos-cols-wrap { position: relative; display: inline-flex; }
.gos-leads .gos-cols-menu {
  position: absolute; top: 44px; right: 0; left: auto; z-index: 80;
  min-width: 200px; background: var(--gos-surface);
  border: 1.5px solid var(--gos-accent); border-radius: 10px;
  box-shadow: var(--gos-shadow-md); overflow: hidden; padding-bottom: 4px;
}
.gos-leads .gos-cols-menu .menu-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gos-text-3); padding: 11px 14px 6px;
}
.gos-leads .col-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 7px; gap: 12px; border-bottom: 1px solid var(--gos-border); margin-bottom: 4px;
}
.gos-leads .col-toggle-all {
  border: none; background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 650; color: var(--gos-accent-ink); padding: 0; white-space: nowrap;
}
.gos-leads .col-toggle-all:hover { text-decoration: underline; }
.gos-leads .gos-cols-list { max-height: min(60vh, 420px); overflow-y: auto; }
.gos-leads .gos-cols-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 14px; font-size: 13.5px; font-weight: 500; color: var(--gos-text);
  background: none; border: none; text-align: left; cursor: pointer;
}
.gos-leads .gos-cols-item:hover { background: var(--gos-accent-soft); color: var(--gos-accent-ink); }
.gos-leads .gos-cols-item.is-locked { opacity: .55; cursor: default; }
.gos-leads .gos-cols-item.is-locked:hover { background: transparent; color: inherit; }
.gos-leads .col-lock-note {
  margin-left: auto; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gos-text-3);
}

/* checkbox glyph used in the columns menu */
.gos-leads .lead-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid var(--gos-border-strong);
  background: var(--gos-surface); display: flex; align-items: center; justify-content: center;
  color: #fff; flex: none; padding: 0; line-height: 1; transition: background .12s, border-color .12s;
}
.gos-leads .lead-check.sm { width: 18px; height: 18px; border-radius: 5px; }
.gos-leads .lead-check.on { background: var(--gos-accent); border-color: var(--gos-accent); }

/* ============================================================
   LEADS BULK BAR — selection toolbar (ported from design)
   ============================================================ */
.gos-leads .gos-lead-toolbar.bulk-bar {
  background: var(--gos-accent-soft);
  box-shadow: inset 3px 0 0 var(--gos-accent);
  border-radius: var(--gos-r-lg) var(--gos-r-lg) 0 0;
  animation: gosBulkIn .2s cubic-bezier(.4, 0, .2, 1);
}
@keyframes gosBulkIn { from { transform: translateY(-3px); } to { transform: translateY(0); } }
.gos-leads .bulk-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.gos-leads .bulk-right { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex-shrink: 0; }
.gos-leads .bulk-clear {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--gos-accent-ink); background: rgba(156, 74, 38, .09); border: none; cursor: pointer;
  transition: background .12s; flex-shrink: 0;
}
.gos-leads .bulk-clear:hover { background: rgba(156, 74, 38, .16); }
.gos-leads .bulk-count { font-size: 14px; font-weight: 700; color: var(--gos-accent-ink); }
.gos-leads .gos-bulk-link {
  color: var(--gos-accent); font-size: 13px; font-weight: 600; cursor: pointer;
  background: none; border: none; padding: 0;
}
.gos-leads .gos-bulk-link:hover { color: var(--gos-accent-hover); text-decoration: underline; }
.gos-leads .gos-bulk-dd { position: relative; display: inline-flex; }

/* small button size for the bulk-bar actions */
.gos-leads .gos-btn-sm { height: 36px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }

/* danger / separator items in the Actions menu */
.gos-leads .gos-more-item.danger { color: var(--gos-red-fg); }
.gos-leads .gos-more-item.danger:hover { background: var(--gos-red-bg); color: var(--gos-red-fg); }
.gos-leads .gos-more-item.has-sep { border-top: 1px solid var(--gos-border); }
/* destructive ghost button (Tickets bulk-bar Delete) */
.gos-leads .gos-btn-ghost.danger { color: var(--gos-red-fg); }
.gos-leads .gos-btn-ghost.danger:hover { background: var(--gos-red-bg); border-color: var(--gos-red-bg); color: var(--gos-red-fg); }

/* ============================================================
   LEADS IMPORT MODAL — ported from design (gos-import-* to avoid
   Bootstrap .modal/.modal-title collisions). Wired to real import.
   ============================================================ */
.gos-import-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(40, 33, 22, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 24px; overflow-y: auto;
}
.gos-import-modal {
  width: 100%; max-width: 600px; background: var(--gos-surface);
  border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(56, 46, 30, .30), 0 8px 24px -8px rgba(56, 46, 30, .18);
  display: flex; flex-direction: column; overflow: hidden;
  animation: gosImportPop .22s cubic-bezier(.34, 1.4, .5, 1);
}
@keyframes gosImportPop { from { transform: scale(.97) translateY(8px); } to { transform: scale(1) translateY(0); } }
.gos-import-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--gos-border); }
.gos-import-head-l { display: flex; align-items: center; gap: 10px; }
.gos-import-step-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--gos-accent-soft); color: var(--gos-accent); flex: none; }
.gos-import-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--gos-text); }
.gos-import-sub { font-size: 12px; color: var(--gos-text-3); }
.gos-import-close {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  border: none; background: none; color: var(--gos-text-2); cursor: pointer; transition: background .12s, color .12s;
}
.gos-import-close:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-import-close:disabled { opacity: .5; cursor: default; }

.gos-import-stepper { display: flex; align-items: center; padding: 16px 16px 4px; }
.gos-import-stepper-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--gos-text-3); }
.gos-import-stepper-item.active { color: var(--gos-text); }
.gos-import-stepper-dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; background: var(--gos-surface-3); color: var(--gos-text-3); flex: none;
}
.gos-import-stepper-item.active .gos-import-stepper-dot { background: var(--gos-accent); color: #fff; }
.gos-import-stepper-line { width: 38px; height: 2px; background: var(--gos-border); margin: 0 12px; border-radius: 2px; }
.gos-import-stepper-item.active .gos-import-stepper-line { background: var(--gos-accent-soft-2); }

.gos-import-body { padding: 8px 16px 12px; }
.gos-import-grow { flex: 1; min-width: 0; }
.gos-import-link { color: var(--gos-accent); font-weight: 600; }

.gos-import-drop {
  border: 1.5px dashed var(--gos-border-strong); border-radius: 14px; padding: 34px 20px; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s; margin-top: 8px; outline: none;
}
.gos-import-drop:hover,
.gos-import-drop:focus-visible { border-color: var(--gos-accent); background: var(--gos-surface-2); }
.gos-import-drop.drag { border-color: var(--gos-accent); background: var(--gos-accent-soft); }
.gos-import-drop-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gos-accent-soft); color: var(--gos-accent); margin-bottom: 12px; }
.gos-import-drop-title { font-size: 15px; font-weight: 650; color: var(--gos-text); }
.gos-import-drop-sub { font-size: 13px; color: var(--gos-text-3); margin-top: 4px; }

.gos-import-template { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--gos-border); border-radius: 11px; background: var(--gos-surface-2); }
.gos-import-tpl-ic { color: var(--gos-accent); flex: none; }
.gos-import-tpl-title { font-weight: 600; font-size: 13px; color: var(--gos-text); }
.gos-import-tpl-wrap { position: relative; flex: none; }
.gos-import-tpl-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--gos-text); background: var(--gos-surface);
  border: 1px solid var(--gos-border-strong); cursor: pointer; transition: background .12s, border-color .12s;
}
.gos-import-tpl-btn:hover { background: var(--gos-surface-3); border-color: var(--gos-text-3); }
.gos-import-tpl-btn.on { background: var(--gos-accent-soft-2); border-color: var(--gos-accent); color: var(--gos-accent-ink); }
.gos-import-tpl-menu {
  position: absolute; bottom: calc(100% + 6px); top: auto; right: 0; z-index: 5; min-width: 224px;
  background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 11px;
  box-shadow: var(--gos-shadow-md); padding: 5px;
}
.gos-import-tpl-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 8px; background: none; border: none; cursor: pointer;
  transition: background .12s;
}
.gos-import-tpl-item:hover { background: var(--gos-surface-3); }
.gos-import-tpl-badge {
  width: 34px; height: 30px; border-radius: 7px; flex: none; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.gos-import-tpl-badge.csv { background: #33425e; color: #fff; }
.gos-import-tpl-badge.xls { background: #217346; color: #fff; }
.gos-import-tpl-name { display: block; font-size: 13px; font-weight: 600; color: var(--gos-text); }
.gos-import-tpl-subt { display: block; font-size: 11.5px; color: var(--gos-text-3); margin-top: 1px; }

.gos-import-filechip { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--gos-border); border-radius: 10px; background: var(--gos-surface-2); margin: 8px 0 12px; }
.gos-import-filename { font-weight: 600; font-size: 13px; color: var(--gos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-import-replace { margin-left: auto; font-size: 12.5px; background: none; border: none; cursor: pointer; }
.gos-import-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--gos-text-2); margin: 14px 0 4px; padding: 11px 12px; background: var(--gos-accent-soft); border-radius: 9px; }
.gos-import-note svg { color: var(--gos-accent); flex: none; margin-top: 2px; }
.gos-import-note strong { color: var(--gos-accent-ink); }

.gos-import-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 22px 24px; text-align: center; }
.gos-import-done-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-import-done-title { font-size: 19px; font-weight: 700; color: var(--gos-text); }
.gos-import-done-sub { font-size: 13.5px; color: var(--gos-text-2); max-width: 340px; line-height: 1.5; }

.gos-import-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-top: 1px solid var(--gos-border); gap: 10px; }
.gos-import-foot.end { justify-content: flex-end; }
.gos-import-foot .gos-foot-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* import preview table (real parsed CSV rows) */
.gos-import-rows-badge { font-size: 11px; font-weight: 700; color: var(--gos-green-fg); background: var(--gos-green-bg); border-radius: 6px; padding: 2px 7px; flex: none; }
.gos-import-table-wrap { border: 1px solid var(--gos-border); border-radius: 11px; overflow: auto; max-height: 280px; margin: 0 0 4px; }
.gos-import-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gos-import-tbl thead th {
  position: sticky; top: 0; z-index: 1; background: var(--gos-surface-2); text-align: left;
  padding: 9px 12px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--gos-text-3); white-space: nowrap; border-bottom: 1px solid var(--gos-border);
}
.gos-import-tbl tbody td { padding: 8px 12px; border-bottom: 1px solid var(--gos-border); color: var(--gos-text); white-space: nowrap; }
.gos-import-tbl tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   LEADS CREATE TICKET MODAL — ported from design BulkModals.CreateTicket
   (reuses .gos-import-overlay/head/foot; gos-tkt-* + gos-dd-* form bits)
   ============================================================ */
.gos-tkt-modal {
  width: 100%; max-width: 680px; background: var(--gos-surface);
  border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(56, 46, 30, .30), 0 8px 24px -8px rgba(56, 46, 30, .18);
  display: flex; flex-direction: column; overflow: visible; /* let dropdown popups escape */
  animation: gosImportPop .22s cubic-bezier(.34, 1.4, .5, 1);
}
.gos-tkt-body { padding: 16px; }
.gos-tkt-scope {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gos-accent-ink);
  background: var(--gos-accent-soft); padding: 9px 12px; border-radius: 9px; margin-bottom: 16px;
}
.gos-tkt-scope svg { color: var(--gos-accent); flex: none; }
.gos-tkt-scope strong { font-weight: 700; }
.gos-tkt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.gos-tkt-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gos-tkt-field.full { grid-column: span 2; }
.gos-tkt-label { font-size: 12.5px; font-weight: 500; color: var(--gos-text-2); }
.gos-tkt-req { color: var(--gos-red-fg); margin-left: 2px; }
.gos-tkt-input {
  height: 40px; width: 100%; border: 1px solid var(--gos-border-strong); border-radius: 9px; padding: 0 11px;
  font: inherit; font-size: 13.5px; color: var(--gos-text); background: var(--gos-surface); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.gos-tkt-input:focus { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-tkt-textarea { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.5; }
.gos-tkt-remind-head { display: flex; align-items: center; gap: 10px; }
.gos-tkt-toggle {
  width: 38px; height: 22px; border-radius: 999px; border: none; background: var(--gos-border-strong);
  position: relative; cursor: pointer; flex: none; transition: background .15s; padding: 0;
}
.gos-tkt-toggle.on { background: var(--gos-accent); }
.gos-tkt-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s;
}
.gos-tkt-toggle.on .gos-tkt-toggle-knob { transform: translateX(16px); }
.gos-tkt-toggle-hint { font-size: 12.5px; color: var(--gos-text-3); }
.gos-tkt-remind-body { margin-top: 10px; }
.gos-tkt-preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gos-tkt-preset {
  height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--gos-border-strong);
  background: var(--gos-surface); font-size: 12px; font-weight: 550; color: var(--gos-text-2); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.gos-tkt-preset:hover { border-color: var(--gos-accent); color: var(--gos-text); }
.gos-tkt-preset.on { background: var(--gos-accent-soft); border-color: var(--gos-accent); color: var(--gos-accent-ink); font-weight: 650; }
.gos-tkt-remind-fields { display: flex; gap: 8px; margin-top: 8px; }
.gos-tkt-remind-fields .gos-tkt-input { max-width: 180px; }
.gos-tkt-remind-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--gos-text-3); }
.gos-tkt-remind-note svg { color: var(--gos-accent); flex: none; }

/* dropdown (ported from design .dd) */
.gos-dd { position: relative; width: 100%; }
.gos-dd-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 11px;
  border: 1px solid var(--gos-border-strong); border-radius: 9px; background: var(--gos-surface);
  font-size: 13.5px; color: var(--gos-text-3); cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.gos-dd-btn.has-val { color: var(--gos-text); }
.gos-dd-btn:hover { border-color: var(--gos-accent); }
.gos-dd-btn.open { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-dd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-dd-pop {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 60;
  background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 11px;
  box-shadow: 0 24px 60px -16px rgba(56, 46, 30, .30), 0 8px 24px -8px rgba(56, 46, 30, .18); overflow: hidden;
  animation: gosImportPop .14s ease;
}
.gos-dd-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--gos-border); color: var(--gos-text-3); }
.gos-dd-search input { flex: 1; border: none; outline: none; font-size: 13px; color: var(--gos-text); background: none; }
.gos-dd-list { max-height: 230px; overflow-y: auto; padding: 5px; }
.gos-dd-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--gos-text); background: none; border: none; cursor: pointer; text-align: left;
  transition: background .1s;
}
.gos-dd-item:hover { background: var(--gos-surface-3); }
.gos-dd-item.on { background: var(--gos-accent-soft); }
/* "Create …" row shown by the creatable Select variant (Product form's Vendor /
   Manufacturer / Product Category) when the typed value isn't in the list. */
.gos-dd-create { color: var(--gos-accent-ink); font-weight: 600; border-top: 1px solid var(--gos-border); border-radius: 0 0 7px 7px; }
.gos-dd-create svg { flex: none; color: var(--gos-accent); }
.gos-dd-grow { flex: 1; min-width: 0; }
.gos-dd-sub { font-size: 11px; color: var(--gos-text-3); margin-left: 7px; }
.gos-dd-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gos-dd-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--gos-text-3); }

/* responsive: single-column form on narrow screens */
@media (max-width: 560px) {
  .gos-tkt-grid { grid-template-columns: 1fr; }
  .gos-tkt-field.full { grid-column: span 1; }
}

/* ============================================================
   LEADS MASS UPDATE MODAL — multi-field builder (ported from design)
   reuses .gos-import-overlay/head/foot, .gos-tkt-modal/body, .gos-dd-*, .gos-tkt-input
   ============================================================ */
.gos-tkt-modal.gos-mu-modal { max-width: 560px; }
.gos-mu-fields-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gos-text-3); margin-bottom: 10px; }
.gos-mu-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.gos-mu-row { display: flex; align-items: flex-start; gap: 8px; }
.gos-mu-field { flex: 1 1 42%; min-width: 0; }
.gos-mu-val { flex: 1 1 58%; min-width: 0; }
.gos-mu-remove {
  width: 36px; height: 40px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--gos-border); border-radius: 9px; background: var(--gos-surface); color: var(--gos-text-3);
  transition: background .12s, border-color .12s, color .12s;
}
.gos-mu-remove:hover { background: var(--gos-red-bg); border-color: var(--gos-red-fg); color: var(--gos-red-fg); }
.gos-mu-value-empty {
  height: 40px; display: flex; align-items: center; padding: 0 11px; font-size: 13px; color: var(--gos-text-3);
  border: 1px dashed var(--gos-border-strong); border-radius: 9px;
}
.gos-mu-add {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px;
  border: 1px dashed var(--gos-border-strong); background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--gos-accent-ink); transition: background .12s, border-color .12s;
}
.gos-mu-add:hover { background: var(--gos-accent-soft); border-color: var(--gos-accent); }
.gos-mu-add.dis { opacity: .45; cursor: default; }
.gos-mu-add.dis:hover { background: none; border-color: var(--gos-border-strong); }
.gos-mu-bool { display: flex; gap: 6px; }
.gos-mu-bool-btn {
  height: 40px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--gos-border-strong);
  background: var(--gos-surface); font-size: 13px; font-weight: 550; color: var(--gos-text-2); cursor: pointer;
  transition: all .12s;
}
.gos-mu-bool-btn:hover { border-color: var(--gos-accent); color: var(--gos-text); }
.gos-mu-bool-btn.on { background: var(--gos-accent); border-color: var(--gos-accent); color: #fff; }

/* ============================================================
   MASS EMAIL log page  (src/components/leads/massEmailpage.jsx)
   Ported from the GrowthOS design `MassEmail.jsx` — stat strip +
   segmented tabs + table + footer pager. Scoped under .gos-mailpage.
   ============================================================ */
.gos-mailpage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 24px 14px;
  background: var(--gos-bg-app) !important;
}

/* page head */
.gos-mailpage .gos-me-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.gos-mailpage .gos-me-title {
  font-size: 23px; font-weight: 700; letter-spacing: -.025em; color: var(--gos-text); line-height: 1.1;
}
.gos-mailpage .gos-me-sub { font-size: 13.5px; color: var(--gos-text-2); margin-top: 4px; }
.gos-mailpage .gos-me-sub strong { color: var(--gos-text); font-weight: 600; }
.gos-mailpage .gos-me-export {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  height: 38px; padding: 0 15px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  background: var(--gos-surface); color: var(--gos-text); border: 1px solid var(--gos-border-strong);
  box-shadow: var(--gos-shadow-xs); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.gos-mailpage .gos-me-export:hover { background: var(--gos-surface-3); border-color: var(--gos-text-3); }
.gos-mailpage .gos-me-export svg { width: 16px; height: 16px; }

/* stat strip */
.gos-mailpage .gos-me-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px;
}
.gos-mailpage .gos-me-stat {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px;
  background: var(--gos-surface); border: 1px solid var(--gos-border);
  border-radius: 14px; box-shadow: var(--gos-shadow-xs);
}
.gos-mailpage .gos-me-stat-ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
}
.gos-mailpage .gos-me-stat-ic.tone-green { background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-mailpage .gos-me-stat-ic.tone-blue  { background: var(--gos-blue-bg);  color: var(--gos-blue-fg); }
.gos-mailpage .gos-me-stat-ic.tone-amber { background: var(--gos-amber-bg); color: var(--gos-amber-fg); }
.gos-mailpage .gos-me-stat-ic.tone-gray  { background: var(--gos-gray-bg);  color: var(--gos-gray-fg); }
.gos-mailpage .gos-me-stat-val {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--gos-text); line-height: 1.1;
}
.gos-mailpage .gos-me-stat-label { font-size: 12.5px; font-weight: 600; color: var(--gos-text-2); margin-top: 3px; }
.gos-mailpage .gos-me-stat-sub { font-size: 11.5px; color: var(--gos-text-3); margin-top: 1px; }

/* grid card — fills remaining height, only the table body scrolls */
.gos-mailpage .gos-me-card {
  background: var(--gos-surface); border: 1px solid var(--gos-border);
  border-radius: var(--gos-r-lg); box-shadow: var(--gos-shadow-xs);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.gos-mailpage .gos-me-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--gos-border); flex-wrap: wrap; flex-shrink: 0;
}

/* segmented tabs */
.gos-mailpage .gos-me-seg {
  display: inline-flex; background: var(--gos-surface-3); border-radius: 9px; padding: 3px; gap: 2px;
}
.gos-mailpage .gos-me-seg-btn {
  border: none; background: transparent; cursor: pointer; padding: 5px 12px; border-radius: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--gos-text-2);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.gos-mailpage .gos-me-seg-btn:hover { color: var(--gos-text); }
.gos-mailpage .gos-me-seg-btn.on {
  background: var(--gos-surface); color: var(--gos-text); font-weight: 600; box-shadow: var(--gos-shadow-xs);
}
.gos-mailpage .gos-me-seg-n { font-size: 11px; font-weight: 600; color: var(--gos-text-3); }
.gos-mailpage .gos-me-seg-btn.on .gos-me-seg-n { color: var(--gos-accent-ink); }

/* search box */
.gos-mailpage .gos-me-search {
  display: flex; align-items: center; gap: 9px; background: var(--gos-surface-3);
  border: 1px solid var(--gos-border); border-radius: 9px; padding: 8px 12px;
  width: 320px; color: var(--gos-text-3); transition: border-color .15s, background .15s;
}
.gos-mailpage .gos-me-search:focus-within { border-color: var(--gos-accent); background: #fff; }
.gos-mailpage .gos-me-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.gos-mailpage .gos-me-search input {
  border: none; outline: none; background: none; font-size: 13.5px; color: var(--gos-text); width: 100%;
}

/* table */
.gos-mailpage .gos-me-tbl-scroll {
  flex: 1; min-height: 240px; max-height: calc(100vh - 396px); overflow-y: auto;
}
.gos-mailpage .gos-me-tbl { width: 100%; border-collapse: collapse; }
.gos-mailpage .gos-me-tbl thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gos-text-3); padding: 11px 16px; border-bottom: 1px solid var(--gos-border);
  white-space: nowrap; background: var(--gos-surface-2);
}
.gos-mailpage .gos-me-tbl tbody td {
  padding: 13px 16px; border-bottom: 1px solid var(--gos-border); font-size: 13.5px; vertical-align: middle;
}
.gos-mailpage .gos-me-tbl tbody tr { transition: background .12s; }
.gos-mailpage .gos-me-tbl tbody tr:hover { background: var(--gos-surface-3); }
.gos-mailpage .gos-me-tbl tbody tr:last-child td { border-bottom: none; }

.gos-mailpage .gos-me-subj {
  font-size: 13.5px; font-weight: 600; color: var(--gos-text);
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gos-mailpage .gos-me-segline {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gos-text-3); margin-top: 3px;
}
.gos-mailpage .gos-me-segline svg { flex: none; opacity: .7; }
.gos-mailpage .gos-me-recip { font-size: 13.5px; font-weight: 650; color: var(--gos-text); }

/* status badge */
.gos-mailpage .gos-me-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.gos-mailpage .gos-me-badge .gos-me-pip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.gos-mailpage .gos-me-badge.b-green { background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-mailpage .gos-me-badge.b-blue  { background: var(--gos-blue-bg);  color: var(--gos-blue-fg); }
.gos-mailpage .gos-me-badge.b-amber { background: var(--gos-amber-bg); color: var(--gos-amber-fg); }
.gos-mailpage .gos-me-badge.b-gray  { background: var(--gos-gray-bg);  color: var(--gos-gray-fg); }
.gos-mailpage .gos-me-badge.b-red   { background: var(--gos-red-bg);   color: var(--gos-red-fg); }

/* sender */
.gos-mailpage .gos-me-sender { display: flex; align-items: center; gap: 8px; }
.gos-mailpage .gos-me-ava {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: #54738f; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.gos-mailpage .gos-me-sender-name {
  font-size: 12.5px; color: var(--gos-text-2);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gos-mailpage .gos-me-date { font-size: 13px; font-weight: 550; color: var(--gos-text); }
.gos-mailpage .gos-me-time { font-size: 11.5px; color: var(--gos-text-3); margin-top: 1px; }

.gos-mailpage .gos-me-empty {
  text-align: center; padding: 44px 20px; color: var(--gos-text-3); font-size: 13.5px;
}

/* footer pager — reuse the global .gos-pager skin, just flush to the card */
.gos-mailpage .gos-me-pager {
  flex-shrink: 0; border-top: 1px solid var(--gos-border); background: var(--gos-surface-2);
  border-radius: 0 0 var(--gos-r-lg) var(--gos-r-lg);
}

@media (max-width: 900px) { .gos-mailpage .gos-me-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .gos-mailpage .gos-me-stats { grid-template-columns: 1fr; }
  .gos-mailpage .gos-me-search { width: 100%; }
}

/* ============================================================
   BULK MODALS — Change Owner + Add to Campaign
   (LeadsChangeOwnerModal.jsx / LeadsAddCampaignModal.jsx)
   Ported from design BulkModals.ChangeOwner / .AddCampaign.
   Reuse the shared .gos-import-* / .gos-tkt-* shell; these add the
   list/search/note bits. Prefixed (modals render outside .gos-leads).
   ============================================================ */
.gos-tkt-modal.gos-bulk-modal { max-width: 460px; }
.gos-bulk-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gos-text-3); margin-bottom: 9px;
}
.gos-bulk-grow { flex: 1; min-width: 0; text-align: left; }

/* shared avatar / radio for owner + campaign rows */
.gos-bulk-ava {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.gos-opt-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--gos-border-strong);
  display: grid; place-items: center; flex: none;
}
.gos-owner-row.on .gos-opt-radio { border-color: var(--gos-accent); }
.gos-opt-radio-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gos-accent); }

/* owner / campaign list rows */
.gos-owner-list {
  display: flex; flex-direction: column; gap: 7px;
  max-height: 320px; overflow-y: auto; margin: 0 -4px; padding: 2px 4px;
}
.gos-owner-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--gos-border); background: var(--gos-surface); transition: all .12s; width: 100%;
  cursor: pointer; text-align: left;
}
.gos-owner-row:hover { border-color: var(--gos-border-strong); background: var(--gos-surface-2); }
.gos-owner-row.on { border-color: var(--gos-accent); background: var(--gos-accent-soft); }
.gos-owner-name { font-weight: 600; font-size: 13.5px; color: var(--gos-text); }
.gos-owner-sub { font-size: 12px; color: var(--gos-text-3); margin-top: 1px; }
.gos-camp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* add-to-campaign: icon + search + meta + list + note */
.gos-camp-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.gos-camp-search {
  display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; margin-bottom: 12px;
  border: 1px solid var(--gos-border-strong); border-radius: 10px; background: var(--gos-surface-2); color: var(--gos-text-3);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.gos-camp-search:focus-within { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); background: var(--gos-surface); }
.gos-camp-search input { flex: 1; border: none; outline: none; background: none; font-size: 13.5px; color: var(--gos-text); }
.gos-camp-search svg { flex: none; }
.gos-camp-search-clear {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  color: var(--gos-text-3); flex: none; border: none; background: none; cursor: pointer;
}
.gos-camp-search-clear:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-camp-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.gos-camp-tag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 240px; font-size: 11.5px; font-weight: 600;
  color: var(--gos-accent-ink); background: var(--gos-accent-soft); padding: 3px 9px; border-radius: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gos-camp-tag svg { flex: none; }
.gos-camp-list {
  display: flex; flex-direction: column; gap: 7px; max-height: 280px; overflow-y: auto;
  margin: 0 -4px; padding: 2px 4px;
}
.gos-camp-empty {
  display: flex; flex-direction: column; align-items: center; padding: 34px 20px; color: var(--gos-text-3); text-align: center;
}
.gos-bulk-note {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gos-text-2);
  margin-top: 14px; padding: 10px 12px; background: var(--gos-surface-3); border-radius: 9px;
}
.gos-bulk-note svg { color: var(--gos-text-3); flex: none; }

/* ============================================================
   CAMPAIGNS — page-level tab bar (Campaigns / Smart Sequence).
   Distinct from the per-record detail tab bar (.gos-lr-tabs) used by the
   Lead/Contact/Account/Deal record pages, and from Bootstrap's own .nav-tabs
   (still used by the legacy add/edit campaign form elsewhere in this file).
   ============================================================ */
/* Generalized to `.gos-leads` (was `.gos-campaigns`) so the Sales page
   (.gos-sales — Sales Order / Invoice tabs) reuses the same page-level tab bar.
   Both pages carry `gos-leads`, so campaigns still matches unchanged. */
.gos-leads .gos-camptabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 14px 0 16px;
}
.gos-leads .gos-camptabs-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--gos-r);
  background: none;
  color: var(--gos-text-2);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.gos-leads .gos-camptabs-tab svg { flex: none; width: 15px; height: 15px; }
.gos-leads .gos-camptabs-tab:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-leads .gos-camptabs-tab.active {
  background: var(--gos-surface);
  color: var(--gos-text);
  border-color: var(--gos-border);
  box-shadow: var(--gos-shadow-xs);
  font-weight: 600;
}
.gos-leads .gos-camptabs-tab .count {
  font-size: 11px; font-weight: 600; line-height: 1; color: var(--gos-text-3); background: var(--gos-surface-3);
  border-radius: var(--gos-r-sm); padding: 3px 6px; margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gos-leads .gos-camptabs-tab.active .count { color: var(--gos-accent-ink); background: var(--gos-accent-soft); }

/* Campaigns grid height: unlike the other list pages, this one has an extra
   ~64px tab-bar row (.gos-camptabs, 34px + 30px margin) above the grid, so the
   shared `.gos-leads` height (100vh - 250px / -302px with the filter bar) is too
   tall and the page body scrolls instead of the grid. Subtract the tab-bar
   height so the scroll stays inside the grid. Higher specificity (both classes)
   so it wins over the .gos-leads rule regardless of source order. */
#CRM_pageSection .gos-leads.gos-campaigns .ag-grid-container {
  height: calc(100vh - 314px) !important;
}
#CRM_pageSection .gos-leads.gos-campaigns.has-filterbar .ag-grid-container {
  height: calc(100vh - 366px) !important;
}

/* ============================================================
   SALES list — src/components/sales/sales.jsx (Sales Order / Invoice tabs)
   Reuses the shared .gos-leads list theme + the generalized .gos-camptabs
   tab bar above. Like campaigns it has an extra tab-bar row above the grid,
   so it subtracts the same ~64px. Filter state lives in the child grid
   (salesGrid/invoiceGrid), which toggles `has-filterbar` on its own body
   wrapper (.gos-sales-body) rather than the page root — hence the descendant
   combinator here (vs campaigns' root class). Same treatment as Quotes:
   no Actions column, Code → view link, edit/delete via the view page.
   ============================================================ */
#CRM_pageSection .gos-leads.gos-sales .ag-grid-container {
  height: calc(100vh - 314px) !important;
}
#CRM_pageSection .gos-leads.gos-sales .gos-sales-body.has-filterbar .ag-grid-container {
  height: calc(100vh - 366px) !important;
}

/* ============================================================
   PRODUCTS list — src/components/products/products.jsx
   (Products / Price Sheet tabs). Same shell as Sales: shared .gos-leads theme
   + the generalized .gos-camptabs tab bar + a child grid (productListing /
   priceListing) that owns its own filter state on its .gos-prod-body wrapper.
   Same ~64px tab-bar-row subtraction as Sales/Campaigns. No Actions column,
   Code / Name → view link, edit/delete via the view page (matches Quotes/Sales).
   ============================================================ */
#CRM_pageSection .gos-leads.gos-products .ag-grid-container {
  height: calc(100vh - 314px) !important;
}
#CRM_pageSection .gos-leads.gos-products .gos-prod-body.has-filterbar .ag-grid-container {
  height: calc(100vh - 366px) !important;
}

/* Shared list-cell helpers (scoped to .gos-leads so they can't collide with the
   legacy global CSS). Used by the Products/Price-Sheet grids' cell renderers. */
.gos-leads a.gos-lead-link {
  font-weight: 500;
  color: var(--gos-accent-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gos-leads a.gos-lead-link:hover { text-decoration: underline; }
.gos-leads .gos-mono-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--gos-text-2);
  letter-spacing: -0.01em;
}
.gos-leads .gos-num-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gos-text);
}
.gos-leads .gos-cell-muted { color: var(--gos-text-2); }
.gos-leads .gos-cell-dash { color: var(--gos-text-3); }
.gos-leads .gos-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--gos-surface-3);
  border: 1px solid var(--gos-border);
  color: var(--gos-text-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   QUOTES list — src/quoteAI/components/quote/dashboard.jsx
   Reuses the shared .gos-leads list theme. No Actions column
   (view via the Code link); .gos-quotes on the root is just a
   marker — no quotes-specific height override needed (the page
   has no extra tab-bar row).
   ============================================================ */
/* ---- "Create New Quote" modal (QuoteCreateModal.jsx) — inside the shared
   .gos-import-modal shell; only the line-of-business grid + inputs are custom. ---- */
.gos-qc-modal { max-width: 620px; }
.gos-qc-section { margin-bottom: 20px; }
.gos-qc-section:last-child { margin-bottom: 0; }
.gos-qc-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 650; color: var(--gos-text); margin-bottom: 10px;
}
.gos-qc-info { display: inline-flex; color: var(--gos-text-3); cursor: help; }
.gos-qc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gos-qc-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 10px; border: 1px solid var(--gos-border); border-radius: var(--gos-r-md);
  background: var(--gos-surface); cursor: pointer; text-align: center;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.gos-qc-card:hover { border-color: var(--gos-border-strong); }
.gos-qc-card.on { border-color: var(--gos-accent); background: var(--gos-accent-soft); box-shadow: var(--gos-shadow-xs); }
.gos-qc-card-ic {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.gos-qc-card-label { font-size: 12.5px; font-weight: 550; color: var(--gos-text-2); line-height: 1.3; }
.gos-qc-card.on .gos-qc-card-label { color: var(--gos-accent-ink); }
.gos-qc-card-check {
  position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gos-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.gos-qc-select {
  width: 100%; font: inherit; font-size: 13px; color: var(--gos-text);
  background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: var(--gos-r-sm);
  padding: 9px 12px; cursor: pointer;
}
.gos-qc-select:focus { outline: none; border-color: var(--gos-accent); }
.gos-qc-radios { display: flex; gap: 10px; }
.gos-qc-radio {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px;
  border: 1px solid var(--gos-border); border-radius: var(--gos-r-sm); cursor: pointer;
  font-size: 13px; font-weight: 550; color: var(--gos-text-2);
  transition: border-color .12s, background .12s, color .12s;
}
.gos-qc-radio input { display: none; }
.gos-qc-radio-dot {
  width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--gos-border-strong);
  position: relative; transition: border-color .12s;
}
.gos-qc-radio.on { border-color: var(--gos-accent); background: var(--gos-accent-soft); color: var(--gos-accent-ink); }
.gos-qc-radio.on .gos-qc-radio-dot { border-color: var(--gos-accent); }
.gos-qc-radio.on .gos-qc-radio-dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gos-accent);
}
.gos-qc-upload {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 16px;
  border: 1px dashed var(--gos-border-strong); border-radius: var(--gos-r-sm); cursor: pointer;
  font-size: 13px; color: var(--gos-text-2); background: var(--gos-surface-2);
  transition: border-color .12s, color .12s;
}
.gos-qc-upload:hover { border-color: var(--gos-accent); color: var(--gos-accent); }
@media (max-width: 560px) { .gos-qc-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   STANDARD QUOTE form — src/quoteAI/components/quote/regularQuoteForm.jsx
   (+ regularQuoteEdit.jsx). Ported from design growthos/QuoteForm.jsx. Reuses
   the shared .gos-cl-* form shell + .gos-dd-* selects; only the billing/shipping
   address grid and the Items table + live Quote Summary are quote-specific.
   ============================================================ */
/* width:100% so the form fills the content area even when it has no wide
   content of its own — without it the flex container shrink-wraps to content
   (the Quote/Sales forms only filled because their 1132px items table forced it;
   the Ticket form, having no wide table, collapsed to ~640px). */
.gos-cl.gos-quoteform { display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 0; }
.gos-quoteform .gos-qf-body { max-width: 1280px; margin: 0 auto; padding: 24px 28px 64px; display: flex; flex-direction: column; gap: 18px; width: 100%; }
.gos-quoteform .gos-cl-sec { width: 100%; }
/* compact select variant (used by the items grid product picker) */
.gos-dd-sm .gos-dd-btn { height: 36px; font-size: 12.5px; padding: 0 9px; }

/* Address: billing | shipping — two padded columns split by a divider, each a
   2-col field grid (matches design growthos/QuoteForm.jsx .qf-addr). */
.gos-qf-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.gos-qf-addr-col { padding: 18px 20px; min-width: 0; }
.gos-qf-addr-col:first-child { border-right: 1px solid var(--gos-border); }
.gos-qf-addr-title { font-size: 12.5px; font-weight: 700; color: var(--gos-accent-ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; min-height: 24px; display: flex; align-items: center; }
.gos-qf-addr-title.spread { justify-content: space-between; gap: 10px; }
.gos-qf-addr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; transition: opacity .15s; }
.gos-qf-addr-fields.is-disabled { opacity: .5; pointer-events: none; }
.gos-qf-addr-fields .gos-cl-field-full { grid-column: 1 / -1; }
.gos-qf-check { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gos-text-2); padding: 4px 6px; border-radius: 7px; text-transform: none; letter-spacing: 0; }
.gos-qf-check:hover:not(:disabled) { background: var(--gos-surface-3); }
.gos-qf-check:disabled { opacity: .5; cursor: not-allowed; }
.gos-qf-check.on { color: var(--gos-accent-ink); }

/* $-prefixed number input (Sales Commission / Excise Duty on the Sales/Invoice forms) */
.gos-qf-money { position: relative; display: flex; align-items: center; }
.gos-qf-money-sym { position: absolute; left: 12px; font-size: 13px; font-weight: 600; color: var(--gos-text-3); pointer-events: none; }
.gos-qf-money .gos-cl-input { padding-left: 26px; }

/* Items: grid + summary. `.gos-qf-items-scroll { flex:1; min-height:200px }` keeps
   the table area a consistent height even with a single row, like the design.
   Built from DIVs (not a <table>) to sidestep the legacy global table CSS
   (gradient thead / display overrides / #fff bg / 1.5rem line-height / `.num`). */
.gos-qf-items { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 0; align-items: stretch; }
.gos-qf-items-main { padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; }
.gos-qf-items-err { padding: 0 0 10px; }
.gos-qf-items-scroll { overflow-x: auto; border: 1px solid var(--gos-border); border-radius: var(--gos-r-md); background: var(--gos-surface); flex: 1; min-height: 200px; }
.gos-qf-grid { min-width: 1132px; }
.gos-qf-hrow, .gos-qf-row {
  display: grid;
  grid-template-columns: 34px 180px 190px 72px 92px 92px 72px 92px 72px 92px 100px 44px;
  align-items: center;
}
.gos-qf-hrow { background: var(--gos-surface-2); border-bottom: 1px solid var(--gos-border); }
.gos-qf-row { border-bottom: 1px solid var(--gos-border); }
.gos-qf-row:last-child { border-bottom: none; }
.gos-qf-hcell { padding: 9px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gos-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gos-qf-hcell.gos-num { text-align: right; }
.gos-qf-c { padding: 9px 6px; min-width: 0; font-size: 12.5px; color: var(--gos-text); }
.gos-qf-c.gos-num { text-align: right; font-variant-numeric: tabular-nums; }
.gos-qf-c.gos-qf-sn { color: var(--gos-text-3); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.gos-qf-c.gos-qf-ro { color: var(--gos-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gos-qf-c.gos-qf-total { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gos-qf-delcell { display: flex; justify-content: center; }
.gos-qf-cell { width: 100%; height: 36px; border: 1px solid transparent; border-radius: 7px; padding: 0 8px; font-size: 12.5px; color: var(--gos-text); background: transparent; outline: none; transition: border-color .12s, background .12s; }
.gos-qf-cell:hover { border-color: var(--gos-border-strong); }
.gos-qf-cell:focus { border-color: var(--gos-accent); background: var(--gos-surface); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-qf-cell.gos-num { text-align: right; font-variant-numeric: tabular-nums; }
.gos-qf-del { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 7px; background: transparent; color: var(--gos-text-3); cursor: pointer; transition: background .12s, color .12s; }
.gos-qf-del:hover:not(:disabled) { background: var(--gos-red-bg); color: var(--gos-red-fg); }
.gos-qf-del:disabled { opacity: .3; cursor: default; }
.gos-qf-prod .gos-dd-btn { height: 36px; background: transparent; border-color: transparent; }
.gos-qf-prod .gos-dd-btn:hover { border-color: var(--gos-border-strong); }
.gos-qf-prod .gos-dd-btn.open { border-color: var(--gos-accent); }

/* Summary card — gradient header, sits at the top-right of the items row */
.gos-qf-summary { display: flex; flex-direction: column; margin: 16px 18px 16px 0; border: 1px solid var(--gos-border); border-radius: 12px; overflow: hidden; box-shadow: var(--gos-shadow-xs); align-self: flex-start; }
.gos-qf-summary-head { background: var(--gos-accent); background: linear-gradient(135deg, var(--gos-accent) 0%, color-mix(in oklab, var(--gos-accent) 78%, #6a4fae) 100%); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; padding: 13px 18px; }
.gos-qf-summary-body { padding: 8px 18px 18px; display: flex; flex-direction: column; }
.gos-qf-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--gos-border); font-size: 13px; color: var(--gos-text-2); }
.gos-qf-sum-val { font-weight: 650; color: var(--gos-text); font-variant-numeric: tabular-nums; }
.gos-qf-adjust { width: 110px; height: 32px; padding: 0 10px; border: 1px solid var(--gos-border-strong); border-radius: 8px; background: var(--gos-surface); font-size: 13px; text-align: right; color: var(--gos-text); outline: none; font-variant-numeric: tabular-nums; }
.gos-qf-adjust:focus { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-qf-sum-row.gos-qf-grand { margin-top: 6px; border-bottom: none; border-top: 2px solid var(--gos-border-strong); padding-top: 13px; }
.gos-qf-sum-row.gos-qf-grand span:first-child { font-size: 14px; font-weight: 700; color: var(--gos-text); }
.gos-qf-sum-row.gos-qf-grand .gos-qf-sum-val { font-size: 16px; font-weight: 700; color: var(--gos-accent-ink); }

@media (max-width: 900px) {
  .gos-qf-items { grid-template-columns: 1fr; }
  .gos-qf-items-main { border-bottom: 1px solid var(--gos-border); }
  .gos-qf-summary { margin: 16px 18px; }
  .gos-qf-addr { grid-template-columns: 1fr; }
  .gos-qf-addr-col:first-child { border-right: none; border-bottom: 1px solid var(--gos-border); }
  .gos-qf-addr-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   QUOTE RECORD (view) — src/quoteAI/components/quote/regularQuoteView.jsx
   Reuses the shared .gos-leadrec / gos-lr-* detail shell + the .gos-qf-* items
   grid (read-only, 6 columns). Only these quote-record extras are new.
   ============================================================ */
.gos-leadrec .gos-lr-textbody { padding: 4px 16px 16px; font-size: 13px; line-height: 1.6; color: var(--gos-text-2); white-space: pre-wrap; }
.gos-leadrec .gos-lr-textbody.muted { color: var(--gos-text-3); }
.gos-leadrec .gos-qr-owner { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border: 1px solid var(--gos-border-strong); border-radius: 9px; font-size: 13px; font-weight: 550; color: var(--gos-text); }
.gos-leadrec .gos-qr-owner .gos-lr-ava { flex: none; }
.gos-leadrec .gos-lr-chip-blue { background: var(--gos-blue-bg); color: var(--gos-blue-fg); border-color: transparent; }
/* tinted header chips (Tickets Status/Priority; reusable on any detail page) */
.gos-leadrec .gos-lr-chip-green { background: var(--gos-green-bg); color: var(--gos-green-fg); border-color: transparent; }
.gos-leadrec .gos-lr-chip-amber { background: var(--gos-amber-bg); color: var(--gos-amber-fg); border-color: transparent; }
.gos-leadrec .gos-lr-chip-red { background: var(--gos-red-bg); color: var(--gos-red-fg); border-color: transparent; }
.gos-leadrec .gos-lr-chip-purple { background: var(--gos-purple-bg); color: var(--gos-purple-fg); border-color: transparent; }
.gos-leadrec .gos-lr-chip-gray { background: var(--gos-gray-bg); color: var(--gos-gray-fg); border-color: transparent; }
.gos-leadrec .gos-lr-chip-blue svg,
.gos-leadrec .gos-lr-chip-green svg,
.gos-leadrec .gos-lr-chip-amber svg,
.gos-leadrec .gos-lr-chip-red svg,
.gos-leadrec .gos-lr-chip-purple svg,
.gos-leadrec .gos-lr-chip-gray svg { color: currentColor; }
.gos-qr-empty { padding: 44px 16px; text-align: center; font-size: 13px; color: var(--gos-text-3); }
.gos-qr-lines.gos-qf-grid { min-width: 620px; }
.gos-qr-lines .gos-qf-hrow, .gos-qr-lines .gos-qf-row { grid-template-columns: 40px minmax(170px, 1.6fr) minmax(130px, 1.2fr) 80px 120px 130px; }

/* ============================================================
   LEAD RECORD (detail) page — src/components/leads/viewLead.jsx
   Rebuilt to design growthos/LeadRecord3: back row + header card +
   tab bar + Overview info-cards + sticky Details panel. Scoped under
   .gos-leadrec; gos-lr-* classes (prefixed to dodge Bootstrap .card/.tab/.chip/.badge).
   ============================================================ */
.ViewLeadPageOuter.gos-leadrec {
  display: block; width: 100%; height: 100%; overflow-y: auto;
  padding: 18px 24px 40px; background: var(--gos-bg-app) !important;
}
.gos-leadrec * { box-sizing: border-box; }

/* shared card */
.gos-lr-card {
  background: var(--gos-surface); border: 1px solid var(--gos-border);
  border-radius: var(--gos-r-lg); box-shadow: var(--gos-shadow-xs);
}
.gos-lr-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--gos-border);
}
.gos-lr-card-title {
  font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; color: var(--gos-text);
  display: flex; align-items: center; gap: 9px;
}
.gos-lr-card-title svg { width: 16px; height: 16px; color: var(--gos-text-3); }
.gos-lr-card-rows { padding: 6px 16px 10px; }

/* back row */
.gos-lr-backrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.gos-lr-ghost-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--gos-text); background: var(--gos-surface);
  border: 1px solid var(--gos-border-strong); cursor: pointer; transition: background .15s, border-color .15s;
}
.gos-lr-ghost-btn:hover { background: var(--gos-surface-3); border-color: var(--gos-text-3); }
.gos-lr-ghost-btn svg { width: 15px; height: 15px; }
.gos-lr-leadid { font-size: 12.5px; color: var(--gos-text-3); }
.gos-lr-leadid span { font-weight: 600; color: var(--gos-text-2); }

/* header card */
.gos-lr-header { padding: 18px 22px; margin-bottom: 16px; }
.gos-lr-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gos-lr-header-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.gos-lr-ava {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .02em;
}
.gos-lr-header-meta { min-width: 0; }
.gos-lr-name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--gos-text); line-height: 1.15; }
.gos-lr-subline {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--gos-text-2); margin-top: 4px;
}
.gos-lr-subline svg { width: 14px; height: 14px; color: var(--gos-text-3); flex: none; }
.gos-lr-dot { color: var(--gos-text-3); }
.gos-lr-actions { display: flex; align-items: center; gap: 8px; position: relative; flex-shrink: 0; }
.gos-lr-contact-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center; height: 34px; padding: 0 16px;
  border-radius: 9px; font-size: 13.5px; font-weight: 600; background: var(--gos-surface); color: var(--gos-accent-ink);
  border: 1px solid var(--gos-border-strong); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.gos-lr-contact-btn:hover { background: var(--gos-accent-soft); border-color: var(--gos-accent); box-shadow: var(--gos-shadow-xs); color: var(--gos-accent-ink); }
.gos-lr-contact-btn:disabled { opacity: .5; cursor: not-allowed; }
.gos-lr-contact-btn svg { width: 16px; height: 16px; }
.gos-lr-iconbtn {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  color: var(--gos-text-2); border: 1px solid transparent; background: transparent; transition: background .15s, color .15s, border-color .15s;
}
.gos-lr-iconbtn:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-lr-iconbtn-bordered { border-color: var(--gos-border); background: var(--gos-surface); }
.gos-lr-iconbtn svg { width: 18px; height: 18px; }

/* header dots menu */
.gos-lr-menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.gos-lr-menu {
  position: absolute; top: 42px; right: 0; z-index: 50; min-width: 188px; padding: 6px;
  background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 12px; box-shadow: var(--gos-shadow-md);
}
.gos-lr-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--gos-text); background: transparent; border: none; cursor: pointer; text-align: left;
}
.gos-lr-menu-item:hover { background: var(--gos-surface-3); }
.gos-lr-menu-item:disabled { opacity: .5; cursor: not-allowed; }
.gos-lr-menu-item svg { width: 15px; height: 15px; color: var(--gos-text-3); flex: none; }
.gos-lr-menu-item.has-sep { border-top: 1px solid var(--gos-border); margin-top: 4px; padding-top: 11px; }
.gos-lr-menu-accent { color: var(--gos-accent-ink); font-weight: 600; }
.gos-lr-menu-accent svg { color: var(--gos-accent); }

/* metadata chips */
.gos-lr-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.gos-lr-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 550; background: var(--gos-surface); border: 1px solid var(--gos-border);
  color: var(--gos-text-2); white-space: nowrap;
}
.gos-lr-chip svg { width: 14px; height: 14px; opacity: .85; color: var(--gos-text-3); }

/* ---------- lead tags (add / remove / create) ---------- */
.gos-leadrec .gos-lead-tags {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--gos-border);
}
.gos-leadrec .gos-lead-tags-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gos-text-3);
  margin-right: 2px;
}
.gos-leadrec .gos-lead-tags-label svg { color: var(--gos-text-3); }
.gos-leadrec .gos-lead-tag {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 5px 0 11px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600; border: 1px solid transparent;
  animation: gosTagPop .16s cubic-bezier(.34, 1.4, .5, 1);
}
@keyframes gosTagPop { from { transform: scale(.82); } to { transform: scale(1); } }
.gos-leadrec .gos-lead-tag .gos-lt-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.gos-leadrec .gos-lead-tag .gos-lt-x {
  width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center;
  color: inherit; opacity: .55; transition: opacity .12s, background .12s; border: none; background: none; padding: 0; cursor: pointer;
}
.gos-leadrec .gos-lead-tag .gos-lt-x:hover { opacity: 1; background: rgba(0, 0, 0, .10); }
.gos-leadrec .gos-lead-tag .gos-lt-x:disabled { cursor: default; opacity: .35; }

.gos-leadrec .gos-tag-add-wrap { position: relative; display: inline-flex; }
.gos-leadrec .gos-tag-add {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px;
  border: 1px dashed var(--gos-border-strong); background: var(--gos-surface); font-size: 12.5px; font-weight: 600; color: var(--gos-text-2);
  transition: border-color .12s, color .12s, background .12s; cursor: pointer;
}
.gos-leadrec .gos-tag-add:hover { border-color: var(--gos-accent); color: var(--gos-accent-ink); background: var(--gos-accent-soft); }
.gos-leadrec .gos-tag-add.on { border-style: solid; border-color: var(--gos-accent); color: var(--gos-accent-ink); background: var(--gos-accent-soft); }

.gos-leadrec .gos-tag-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 272px;
  background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 12px;
  box-shadow: var(--gos-shadow-md); overflow: hidden; animation: gosTagIn .14s ease;
}
@keyframes gosTagIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.gos-leadrec .gos-tag-pop-search { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--gos-border); color: var(--gos-text-3); }
.gos-leadrec .gos-tag-pop-search input { flex: 1; border: none; outline: none; background: none; font: inherit; font-size: 13px; color: var(--gos-text); }
.gos-leadrec .gos-tag-pop-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gos-text-3); padding: 10px 13px 4px; }
.gos-leadrec .gos-tag-pop-list { max-height: 234px; overflow-y: auto; padding: 2px 5px 5px; }
.gos-leadrec .gos-tag-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--gos-text); text-align: left; transition: background .1s; border: none; background: none; cursor: pointer;
}
.gos-leadrec .gos-tag-opt:hover { background: var(--gos-surface-3); }
.gos-leadrec .gos-tag-opt.on { background: var(--gos-surface-3); }
.gos-leadrec .gos-tag-opt:disabled { cursor: default; opacity: .6; }
.gos-leadrec .gos-tag-opt .gos-to-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.gos-leadrec .gos-tag-opt .gos-to-check {
  margin-left: auto; width: 18px; height: 18px; border-radius: 5px; flex: none;
  border: 1.6px solid var(--gos-border-strong); display: grid; place-items: center; color: #fff; transition: background .12s, border-color .12s;
}
.gos-leadrec .gos-tag-opt.on .gos-to-check { background: var(--gos-accent); border-color: var(--gos-accent); }
.gos-leadrec .gos-tag-create {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 13px; border-top: 1px solid var(--gos-border);
  font-size: 13px; font-weight: 550; color: var(--gos-text); background: var(--gos-surface-2); transition: background .12s; border: none; cursor: pointer;
}
.gos-leadrec .gos-tag-create:hover { background: var(--gos-accent-soft); }
.gos-leadrec .gos-tag-create:disabled { cursor: default; opacity: .6; }
.gos-leadrec .gos-tag-create strong { color: var(--gos-accent-ink); font-weight: 700; }
.gos-leadrec .gos-tag-create .gos-tc-swatch { width: 15px; height: 15px; border-radius: 5px; flex: none; }
.gos-leadrec .gos-tag-pop-empty { padding: 18px 13px; font-size: 12.5px; color: var(--gos-text-3); text-align: center; }

/* tab bar (single row, scrolls horizontally if it overflows) */
.gos-lr-tabs {
  display: flex; gap: 4px; align-items: center; margin-bottom: 16px;
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; padding-bottom: 2px;
}
.gos-lr-tabs::-webkit-scrollbar { height: 6px; }
.gos-lr-tabs::-webkit-scrollbar-thumb { background: var(--gos-border-strong); border-radius: 99px; }
.gos-lr-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 8px;
  font-size: 13.5px; font-weight: 550; color: var(--gos-text-2); border: 1px solid transparent;
  background: transparent; cursor: pointer; white-space: nowrap; flex: none;
  transition: background .14s, color .14s, border-color .14s;
}
.gos-lr-tab svg { width: 15px; height: 15px; }
.gos-lr-tab:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-lr-tab.active { background: var(--gos-surface); color: var(--gos-text); border-color: var(--gos-border); box-shadow: var(--gos-shadow-xs); font-weight: 600; }
.gos-lr-count {
  font-size: 11px; font-weight: 600; color: var(--gos-text-3); background: var(--gos-surface-3);
  border-radius: 6px; padding: 1px 6px;
}
.gos-lr-tab.active .gos-lr-count { background: var(--gos-accent-soft); color: var(--gos-accent-ink); }

/* layout */
.gos-lr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gos-lr-2col { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.gos-lr-main { min-width: 0; }
.gos-lr-sticky { position: sticky; top: 0; overflow: hidden; }

/* detail rows (info cards + sticky panel) */
.gos-lr-drow { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.gos-lr-dlabel {
  display: flex; align-items: center; gap: 8px; color: var(--gos-text-2); font-size: 13px;
  width: 140px; flex-shrink: 0; font-weight: 450;
}
.gos-lr-dlabel svg { width: 15px; height: 15px; color: var(--gos-text-3); flex-shrink: 0; }
.gos-lr-dval { font-size: 13.5px; font-weight: 500; color: var(--gos-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-lr-dval.muted { color: var(--gos-text-3); }
.gos-lr-dval-right { text-align: right; }
.gos-lr-link { color: var(--gos-accent); }
/* info-card rows get separators; sticky-panel rows don't */
.gos-lr-card > .gos-lr-card-rows .gos-lr-drow { border-bottom: 1px solid var(--gos-border); }
.gos-lr-card > .gos-lr-card-rows .gos-lr-drow:last-child { border-bottom: none; }

/* sticky details panel sections */
.gos-lr-sec { margin-bottom: 8px; }
.gos-lr-sec-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gos-text-3); padding: 14px 18px 8px; }
.gos-lr-sec .gos-lr-card-rows { padding: 0 18px; }
.gos-lr-sec .gos-lr-dlabel { width: 124px; }
.gos-lr-divider { height: 1px; background: var(--gos-border); }

/* placeholder (Tasks / Opportunity / Automation) */
.gos-lr-placeholder { padding: 56px 24px; text-align: center; }
.gos-lr-ph-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto 14px; background: var(--gos-accent-soft); color: var(--gos-accent); }
.gos-lr-ph-ic svg { width: 22px; height: 22px; }
.gos-lr-ph-title { font-weight: 650; font-size: 15.5px; color: var(--gos-text); }
.gos-lr-ph-text { font-size: 13.5px; color: var(--gos-text-2); margin: 6px auto 0; max-width: 380px; line-height: 1.5; }

/* ---- Activities tab: GrowthOS timeline (LeadActivityTimeline.jsx) ---- */
.gos-lr-act-tools { display: flex; align-items: center; gap: 8px; }
.gos-lr-btn-xs { height: 30px; padding: 0 11px; font-size: 12.5px; }
.gos-lr-btn-xs:disabled { opacity: .55; cursor: default; }
.gos-lr-iconbtn-sm { width: 32px; height: 32px; }
.gos-lr-act-body { padding: 18px; }
.gos-lr-act-empty { text-align: center; padding: 40px 20px; color: var(--gos-text-3); font-size: 13.5px; }
.gos-lr-act-empty .gos-lr-ph-ic { margin: 0 auto 14px; }

.gos-lr-tl-group { margin-bottom: 6px; }
.gos-lr-tl-date {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px;
  font-size: 12px; font-weight: 550; background: var(--gos-surface-3); color: var(--gos-text-2); margin-bottom: 16px;
}
.gos-lr-tl { position: relative; }
.gos-lr-tl-item { display: flex; gap: 16px; position: relative; }
.gos-lr-tl-time { width: 66px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--gos-text-3); font-weight: 500; padding-top: 5px; }
.gos-lr-tl-track { position: relative; width: 30px; flex-shrink: 0; display: flex; justify-content: center; }
.gos-lr-tl-track::before {
  content: ""; position: absolute; top: 0; bottom: -24px; left: 50%; transform: translateX(-50%);
  width: 2px; background: var(--gos-border);
}
.gos-lr-tl-item:last-child .gos-lr-tl-track::before { display: none; }
.gos-lr-tl-dot {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; z-index: 2; flex-shrink: 0;
  background: var(--gos-accent-soft); color: var(--gos-accent); border: 1px solid var(--gos-accent-soft-2);
}
.gos-lr-tl-dot svg { width: 15px; height: 15px; }
.gos-lr-tl-body { flex: 1; min-width: 0; padding-bottom: 26px; }
.gos-lr-tl-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 9px; flex-wrap: wrap; }
.gos-lr-tl-title { font-size: 14px; font-weight: 600; color: var(--gos-text); }
.gos-lr-tl-sub { font-size: 13px; color: var(--gos-text-3); }
.gos-lr-tl-note {
  border: 1px solid var(--gos-border); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; line-height: 1.55; color: var(--gos-text-2); background: var(--gos-surface);
}

/* minicard of field changes */
.gos-lr-mini { border: 1px solid var(--gos-border); border-radius: 10px; overflow: hidden; background: var(--gos-surface); }
.gos-lr-mini-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gos-text-3);
  padding: 9px 14px; background: var(--gos-surface-2); border-bottom: 1px solid var(--gos-border);
}
.gos-lr-mini-body { padding: 4px 14px; }
.gos-lr-mini-body .gos-lr-drow { padding: 7px 0; align-items: center; }
.gos-lr-mini-body .gos-lr-drow + .gos-lr-drow { border-top: 1px solid var(--gos-border); }
.gos-lr-mini-body .gos-lr-dlabel { width: 130px; font-size: 12.5px; }
.gos-lr-diff { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; white-space: normal; overflow: visible; font-size: 13px; }
.gos-lr-diff-old { color: var(--gos-text-3); text-decoration: line-through; text-decoration-color: var(--gos-border-strong); }
.gos-lr-diff-new { color: var(--gos-text); font-weight: 550; }
.gos-lr-diff-arrow { color: var(--gos-text-3); flex: none; }

/* ---- Attachments tab (LeadAttachments.jsx) ---- */
.gos-att { overflow: hidden; }
.gos-att-upload {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; background: var(--gos-accent-soft); color: var(--gos-accent-ink);
  border: 1px solid transparent; cursor: pointer; transition: background .15s;
}
.gos-att-upload:hover { background: var(--gos-accent-soft-2); }
.gos-att-upload:disabled { opacity: .6; cursor: default; }
.gos-att-upload svg { width: 14px; height: 14px; }

.gos-att-drop {
  display: flex; align-items: center; gap: 14px; margin: 14px 16px; padding: 15px 18px;
  border: 1.5px dashed var(--gos-border-strong); border-radius: 12px; background: var(--gos-surface-2);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.gos-att-drop.dragging { border-color: var(--gos-accent); background: var(--gos-accent-soft); }
.gos-att-drop-ic {
  width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--gos-surface-3); color: var(--gos-text-3); transition: background .15s, color .15s;
}
.gos-att-drop.dragging .gos-att-drop-ic { background: var(--gos-accent-soft-2); color: var(--gos-accent); }
.gos-att-drop-title { font-size: 13.5px; font-weight: 600; color: var(--gos-text-2); }
.gos-att-drop.dragging .gos-att-drop-title { color: var(--gos-accent-ink); }
.gos-att-drop-sub { font-size: 12px; color: var(--gos-text-3); margin-top: 2px; }

.gos-att-list { border-top: 1px solid var(--gos-border); }
.gos-att-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 18px;
  border-bottom: 1px solid var(--gos-border); transition: background .12s;
}
.gos-att-row:last-child { border-bottom: none; }
.gos-att-row:hover { background: var(--gos-surface-2); }

.gos-att-fic {
  width: 40px; height: 40px; border-radius: 10px; flex: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.gos-att-fic-ext { font-size: 7.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.gos-att-fic.tone-red { background: var(--gos-red-bg); color: var(--gos-red-fg); }
.gos-att-fic.tone-blue { background: var(--gos-blue-bg); color: var(--gos-blue-fg); }
.gos-att-fic.tone-green { background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-att-fic.tone-amber { background: var(--gos-amber-bg); color: var(--gos-amber-fg); }
.gos-att-fic.tone-purple { background: var(--gos-purple-bg); color: var(--gos-purple-fg); }
.gos-att-fic.tone-gray { background: var(--gos-gray-bg); color: var(--gos-gray-fg); }
.gos-att-fic.tone-neutral { background: var(--gos-surface-3); color: var(--gos-text-3); }

.gos-att-main { flex: 1; min-width: 0; }
.gos-att-name {
  font-size: 13.5px; font-weight: 600; color: var(--gos-text); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .12s;
}
.gos-att-row:hover .gos-att-name { color: var(--gos-accent-ink); }
.gos-att-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.gos-att-ava { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 8px; font-weight: 700; }
.gos-att-uploader { font-size: 12px; color: var(--gos-text-3); font-weight: 500; }
.gos-att-dot { font-size: 12px; color: var(--gos-border-strong); }
.gos-att-date { font-size: 12px; color: var(--gos-text-3); }
.gos-att-size { font-size: 12.5px; color: var(--gos-text-3); font-weight: 500; flex: none; width: 64px; text-align: right; }
.gos-att-actions { display: flex; align-items: center; gap: 2px; flex: none; width: 68px; opacity: 0; transition: opacity .15s; }
.gos-att-row:hover .gos-att-actions, .gos-att-actions:focus-within { opacity: 1; }
.gos-att-del:hover { color: var(--gos-red-fg); }

.gos-att-empty { padding: 38px 20px 32px; text-align: center; }
.gos-att-empty-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--gos-surface-3); color: var(--gos-text-3); display: grid; place-items: center; margin: 0 auto 13px; }
.gos-att-empty-title { font-size: 14.5px; font-weight: 650; color: var(--gos-text-2); margin-bottom: 5px; }
.gos-att-empty-text { font-size: 13px; color: var(--gos-text-3); line-height: 1.5; max-width: 300px; margin: 0 auto; }

.gos-att-foot {
  display: flex; align-items: center; gap: 7px; padding: 10px 18px; border-top: 1px solid var(--gos-border);
  background: var(--gos-surface-2); font-size: 12px; color: var(--gos-text-3); font-weight: 500;
}
.gos-att-foot svg { color: var(--gos-text-3); flex: none; }

/* ---- Notes tab (LeadNotes.jsx) ---- */
.gos-note-wrap { overflow: hidden; }
.gos-note-subhint { font-size: 12.5px; color: var(--gos-text-3); }
.gos-note-body { padding: 16px 18px 18px; }

.gos-note-composer {
  border: 1px solid var(--gos-border-strong); border-radius: var(--gos-r-lg);
  background: var(--gos-surface); box-shadow: var(--gos-shadow-xs);
  transition: border-color .15s, box-shadow .15s; overflow: hidden;
}
.gos-note-composer:focus-within { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-note-title-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 15px; font-weight: 650; color: var(--gos-text); padding: 13px 15px 4px;
}
.gos-note-title-input::placeholder { color: var(--gos-text-3); font-weight: 600; }
.gos-note-body-wrap { padding: 0 15px 11px; }
.gos-note-body-input {
  width: 100%; border: none; outline: none; background: transparent; resize: none;
  font-size: 13.5px; line-height: 1.55; color: var(--gos-text-2); font-family: inherit;
  min-height: 42px; padding: 2px 0 4px;
}
.gos-note-body-input::placeholder { color: var(--gos-text-3); }
.gos-note-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.gos-note-hint { font-size: 12px; color: var(--gos-text-3); }
.gos-note-send {
  width: 38px; height: 38px; border-radius: 50%; background: var(--gos-accent); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(201, 99, 66, .35); transition: transform .12s, background .15s;
}
.gos-note-send:hover { background: var(--gos-accent-ink); transform: translateY(-1px); }
.gos-note-send:disabled { background: var(--gos-surface-3); color: var(--gos-text-3); box-shadow: none; cursor: not-allowed; transform: none; }

.gos-note-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.gos-note-card {
  position: relative; border: 1px solid var(--gos-border); border-radius: var(--gos-r-lg);
  background: var(--gos-surface); padding: 14px 16px; transition: border-color .15s, box-shadow .15s;
}
.gos-note-card:hover { border-color: var(--gos-border-strong); box-shadow: var(--gos-shadow-xs); }
.gos-note-card.editing { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); padding: 12px 14px; }
.gos-note-card.editing .gos-note-title-input { padding: 4px 2px; }
.gos-note-card.editing .gos-note-body-input { padding: 0 2px; }
.gos-note-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.gos-note-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gos-note-card-title { font-size: 14.5px; font-weight: 650; color: var(--gos-text); line-height: 1.3; }
.gos-note-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; flex: none; }
.gos-note-card:hover .gos-note-actions, .gos-note-actions:focus-within { opacity: 1; }
.gos-note-ic {
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer;
  color: var(--gos-text-3); background: transparent; border: none; transition: background .12s, color .12s;
}
.gos-note-ic:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-note-ic.danger:hover { background: var(--gos-red-bg); color: var(--gos-red-fg); }
.gos-note-card-body { font-size: 13px; line-height: 1.6; color: var(--gos-text-2); margin-top: 6px; white-space: pre-wrap; }
.gos-note-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gos-note-datechip { height: 24px; }
.gos-note-author { font-size: 12px; color: var(--gos-text-3); margin-left: auto; }
.gos-note-author strong { color: var(--gos-text-2); font-weight: 600; }
.gos-note-empty { text-align: center; padding: 30px 20px; color: var(--gos-text-3); font-size: 13.5px; }

/* ---- Call modal (LeadCallModal.jsx) ---- */
.gos-call-modal {
  width: 100%; max-width: 420px; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(56, 46, 30, .30), 0 8px 24px -8px rgba(56, 46, 30, .18);
  animation: gosImportPop .22s cubic-bezier(.34, 1.4, .5, 1); transition: background .4s ease;
}
.gos-call-modal.connected { background: var(--gos-green-bg); }
.gos-call-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--gos-border); }
.gos-call-grid { color: var(--gos-text-3); flex: none; }
.gos-call-ph { color: var(--gos-accent); flex: none; }
.gos-call-ph-on { color: var(--gos-green-fg); flex: none; }
.gos-call-status { font-size: 13.5px; font-weight: 600; color: var(--gos-text-2); }
.gos-call-status.on { color: var(--gos-green-fg); }
.gos-call-spacer { flex: 1; }
.gos-call-round {
  width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid var(--gos-border-strong); background: var(--gos-surface);
  color: var(--gos-text-2); display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s;
}
.gos-call-round:hover { background: var(--gos-surface-3); }
.gos-call-round.muted-on { background: var(--gos-red-bg); color: var(--gos-red-fg); border-color: transparent; }
.gos-call-timer { font-size: 13px; font-weight: 600; color: var(--gos-text-2); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.gos-call-end {
  width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer; border: none;
  background: var(--gos-red-fg); color: #fff; display: grid; place-items: center; transition: filter .12s;
}
.gos-call-end:hover { filter: brightness(.93); }
.gos-call-card { border: 1px solid var(--gos-border); border-radius: 12px; background: var(--gos-surface); margin: 12px 16px 0; }
.gos-call-lead { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.gos-call-ava { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.gos-call-lead-meta { flex: 1; min-width: 0; }
.gos-call-name { font-weight: 650; font-size: 15px; color: var(--gos-text); }
.gos-call-company { font-size: 12px; color: var(--gos-text-3); }
.gos-call-rows { padding: 4px 16px; }
.gos-call-rows .gos-lr-drow { border-bottom: 1px solid var(--gos-border); padding: 11px 0; align-items: center; }
.gos-call-rows .gos-lr-drow:last-child { border-bottom: none; }
.gos-call-foot { padding: 12px 16px 16px; }
.gos-call-dispo {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 0;
  border: 1px solid var(--gos-border); border-radius: 12px; background: var(--gos-surface); cursor: pointer;
  font-weight: 650; font-size: 14.5px; color: var(--gos-text); transition: background .12s, border-color .12s;
}
.gos-call-dispo:hover { background: var(--gos-surface-3); border-color: var(--gos-border-strong); }
.gos-call-dispo svg { color: var(--gos-accent); }

/* ---- WhatsApp chat modal (LeadWhatsAppModal.jsx) ---- */
.gos-wa-modal {
  width: 430px; max-width: calc(100vw - 32px); height: 620px; max-height: 90vh;
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: var(--gos-surface);
  box-shadow: 0 24px 60px -16px rgba(56, 46, 30, .30), 0 8px 24px -8px rgba(56, 46, 30, .18);
  animation: gosImportPop .22s cubic-bezier(.34, 1.4, .5, 1);
}
.gos-wa-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--gos-surface); border-bottom: 1px solid var(--gos-border); flex: none; }
.gos-wa-ava { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.gos-wa-head-meta { flex: 1; min-width: 0; }
.gos-wa-name { font-weight: 650; font-size: 14.5px; color: var(--gos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-wa-phone { font-size: 11.5px; color: var(--gos-text-3); }
.gos-wa-body {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  background-color: #e7e3da;
  background-image: radial-gradient(circle at 1px 1px, rgba(56, 46, 30, .05) 1px, transparent 0);
  background-size: 22px 22px;
}
.gos-wa-empty { margin: auto; text-align: center; font-size: 12.5px; color: var(--gos-text-2); background: rgba(255, 255, 255, .8); padding: 8px 14px; border-radius: 9px; }
.gos-wa-day { align-self: center; background: rgba(255, 255, 255, .85); color: var(--gos-text-2); font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 8px; margin: 4px 0; }
.gos-wa-bubble { max-width: 76%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); position: relative; color: var(--gos-text); }
.gos-wa-in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.gos-wa-out { align-self: flex-end; background: #d6f3c8; border-top-right-radius: 3px; }
.gos-wa-meta { font-size: 10px; color: var(--gos-text-3); float: right; margin: 6px 0 -2px 10px; }
.gos-wa-foot { position: relative; flex: none; }
.gos-wa-input { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--gos-surface); border-top: 1px solid var(--gos-border); }
.gos-wa-input input { flex: 1; border: none; outline: none; font-size: 14px; background: var(--gos-surface-3); border-radius: 10px; padding: 10px 14px; color: var(--gos-text); }
.gos-wa-send { width: 40px; height: 40px; border-radius: 50%; background: var(--gos-accent); display: grid; place-items: center; color: #fff; flex-shrink: 0; border: none; cursor: pointer; transition: background .15s; }
.gos-wa-send:hover { background: var(--gos-accent-hover); }
.gos-wa-send:disabled { background: var(--gos-surface-3); color: var(--gos-text-3); cursor: not-allowed; }
.gos-wa-tmpl { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; background: var(--gos-surface-3); border: 1px solid var(--gos-border); font-size: 12.5px; font-weight: 600; color: var(--gos-accent-ink); cursor: pointer; flex: none; }
.gos-wa-tmpl:hover { background: var(--gos-accent-soft); }
.gos-wa-tmpl-backdrop { position: fixed; inset: 0; z-index: 1; }
.gos-wa-tmpl-menu {
  position: absolute; bottom: 62px; left: 14px; z-index: 2; min-width: 200px; padding: 6px;
  background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 12px; box-shadow: var(--gos-shadow-md);
}
.gos-wa-tmpl-item { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--gos-text); background: transparent; border: none; cursor: pointer; }
.gos-wa-tmpl-item:hover { background: var(--gos-surface-3); }

/* ---- Compose Email modal (LeadEmailModal.jsx) ---- */
.gos-em-modal {
  position: relative;
  width: 100%; max-width: 720px; height: 560px; max-height: 90vh; background: var(--gos-surface);
  border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -16px rgba(56, 46, 30, .30), 0 8px 24px -8px rgba(56, 46, 30, .18);
  animation: gosImportPop .22s cubic-bezier(.34, 1.4, .5, 1);
}
.gos-em-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--gos-border); flex: none; }
.gos-em-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--gos-text); }
.gos-em-head-actions { display: flex; align-items: center; gap: 10px; }
.gos-em-row { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--gos-border); flex: none; }
.gos-em-lab { width: 56px; color: var(--gos-text-2); font-size: 13px; font-weight: 500; flex-shrink: 0; }
.gos-em-row input {
  flex: 1; border: none; outline: none; font-size: 13.5px; color: var(--gos-text); background: none; min-width: 0;
}
.gos-em-row input::placeholder { color: var(--gos-text-3); }
/* From: custom dropdown (native <select> popup can't be themed) */
.gos-em-fromdd { flex: 1; min-width: 0; position: relative; }
.gos-em-from-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  border: 1px solid var(--gos-border); border-radius: 8px; background: var(--gos-surface-2);
  font-size: 13.5px; color: var(--gos-text); padding: 7px 10px; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.gos-em-from-btn:hover { border-color: var(--gos-border-strong); }
.gos-em-from-btn:disabled { opacity: .6; cursor: default; }
.gos-em-from-btn svg { color: var(--gos-text-3); flex: none; }
.gos-em-from-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-em-from-backdrop { position: fixed; inset: 0; z-index: 9; }
.gos-em-from-menu {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 10; max-height: 244px; overflow-y: auto;
  padding: 6px; background: var(--gos-surface); border: 1px solid var(--gos-border);
  border-radius: 11px; box-shadow: var(--gos-shadow-md);
}
.gos-em-from-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer; text-align: left;
  font-size: 13px; color: var(--gos-text); transition: background .12s;
}
.gos-em-from-item:hover { background: var(--gos-surface-3); }
.gos-em-from-item.on { background: var(--gos-accent-soft); color: var(--gos-accent-ink); font-weight: 600; }
.gos-em-from-item svg { color: var(--gos-accent); flex: none; }
.gos-em-from-item-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-em-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; flex: none;
  background: var(--gos-surface-3); border: 1px solid var(--gos-border); color: var(--gos-text-2);
  font-size: 12px; font-weight: 550; cursor: pointer;
}
.gos-em-chip:hover { background: var(--gos-accent-soft); color: var(--gos-accent-ink); border-color: var(--gos-accent); }
.gos-em-body { flex: 1; min-height: 0; padding: 16px; display: flex; flex-direction: column; overflow-y: auto; }
.gos-em-aihint { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gos-text-2); margin-bottom: 10px; }
.gos-em-aihint svg { color: var(--gos-accent); }
.gos-em-body textarea {
  flex: 1; width: 100%; border: none; outline: none; resize: none; font-size: 14px; line-height: 1.6;
  color: var(--gos-text); background: none; font-family: inherit;
}
.gos-em-body textarea::placeholder { color: var(--gos-text-3); }
.gos-em-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--gos-border); gap: 10px; flex: none; }
.gos-em-foot-l { display: flex; align-items: center; gap: 6px; position: relative; }
.gos-em-foot-r { display: flex; align-items: center; gap: 10px; }
.gos-em-divider { width: 1px; height: 22px; background: var(--gos-border); margin: 0 4px; }
.gos-em-tool { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--gos-text-3); background: transparent; border: none; cursor: default; }
.gos-em-tool:hover { background: var(--gos-surface-3); color: var(--gos-text-2); }
/* Insert-Template button active state */
.gos-lr-ghost-btn.has-tmpl { color: var(--gos-accent-ink); border-color: var(--gos-accent); background: var(--gos-accent-soft); }

/* in-modal two-pane Template Picker (slides over the compose modal) */
.gos-tmpl-panel {
  position: absolute; inset: 0; z-index: 5; background: var(--gos-surface);
  display: flex; flex-direction: column; animation: gosTmplIn .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes gosTmplIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.gos-tmpl-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--gos-border); flex-shrink: 0; }
.gos-tmpl-panel-title { font-size: 15px; font-weight: 700; color: var(--gos-text); }
.gos-tmpl-faint { font-size: 12px; color: var(--gos-text-3); }
.gos-tmpl-panel-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }
.gos-tmpl-list-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--gos-border); }
.gos-tmpl-search { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--gos-border); color: var(--gos-text-3); flex-shrink: 0; }
.gos-tmpl-search input { border: none; outline: none; background: none; font: inherit; font-size: 13px; color: var(--gos-text); width: 100%; }
.gos-tmpl-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.gos-tmpl-item { text-align: left; width: 100%; border: 1px solid transparent; background: transparent; border-radius: 9px; padding: 9px 11px; cursor: pointer; transition: background .12s, border-color .12s; }
.gos-tmpl-item:hover { background: var(--gos-surface-3); }
.gos-tmpl-item.on { background: var(--gos-accent-soft); border-color: var(--gos-accent); }
.gos-tmpl-item-name { font-size: 13px; font-weight: 650; color: var(--gos-text); }
.gos-tmpl-item-subj { font-size: 12px; color: var(--gos-text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-tmpl-item-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 11px; }
.gos-tmpl-tag { font-size: 10.5px; font-weight: 650; color: var(--gos-accent-ink); background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 5px; padding: 1px 6px; }
.gos-tmpl-item.on .gos-tmpl-tag { background: var(--gos-surface); border-color: var(--gos-accent); }
.gos-tmpl-preview-col { display: flex; flex-direction: column; min-height: 0; background: var(--gos-surface-2); }
.gos-tmpl-preview-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; }
.gos-tmpl-prev-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gos-text-3); margin-bottom: 5px; }
.gos-tmpl-prev-subject { font-size: 15px; font-weight: 650; color: var(--gos-text); margin-bottom: 18px; line-height: 1.4; }
.gos-tmpl-prev-body { font-size: 13.5px; line-height: 1.7; color: var(--gos-text); white-space: pre-wrap; }
.gos-tmpl-prev-note { font-size: 13px; line-height: 1.6; color: var(--gos-text-3); background: var(--gos-surface); border: 1px dashed var(--gos-border-strong); border-radius: 10px; padding: 14px; }
.gos-tmpl-preview-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--gos-border); background: var(--gos-surface); flex-shrink: 0; }
.gos-tmpl-empty { padding: 24px; text-align: center; color: var(--gos-text-3); font-size: 13px; }
.gos-tmpl-empty-center { margin: auto; }

/* ---- Compose Email preview mode (read-only sent email) ---- */
.gos-em-static { flex: 1; min-width: 0; font-size: 13.5px; color: var(--gos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-em-preview { overflow-y: auto; }
.gos-em-preview-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--gos-text); }
.gos-em-preview-html { font-size: 14px; line-height: 1.6; color: var(--gos-text); }
.gos-em-preview-html img { max-width: 100%; height: auto; }
.gos-em-preview-html table { max-width: 100%; }

/* ---- Campaigns tab (shared childCampaign.jsx, GrowthOS skin) ---- */
.gos-cmp { overflow: hidden; }
.gos-btn-danger { background: var(--gos-red-fg); border: 1px solid var(--gos-red-fg); color: #fff; }
.gos-btn-danger:hover { filter: brightness(.93); }
.gos-cmp-add {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; background: var(--gos-accent-soft); color: var(--gos-accent-ink);
  border: 1px solid transparent; cursor: pointer; transition: background .15s;
}
.gos-cmp-add:hover { background: var(--gos-accent-soft-2); }
.gos-cmp-add svg { width: 14px; height: 14px; }
.gos-cmp-searchbar { padding: 12px 16px; border-bottom: 1px solid var(--gos-border); }

.gos-cmp-list { display: flex; flex-direction: column; }
.gos-cmp-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  border-bottom: 1px solid var(--gos-border); transition: background .12s;
}
.gos-cmp-row:last-child { border-bottom: none; }
.gos-cmp-row:hover { background: var(--gos-surface-2); }
.gos-cmp-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.gos-cmp-main { flex: 1; min-width: 0; }
.gos-cmp-name {
  display: inline-block; max-width: 100%; font-size: 13.5px; font-weight: 600; color: var(--gos-text);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .12s;
}
a.gos-cmp-name:hover { color: var(--gos-accent-ink); }
.gos-cmp-row:hover .gos-cmp-name { color: var(--gos-accent-ink); }
.gos-cmp-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; flex-wrap: wrap; font-size: 12px; color: var(--gos-text-3); }
.gos-cmp-meta svg { color: var(--gos-text-3); flex: none; }
.gos-cmp-type { font-weight: 500; }
.gos-cmp-dot { color: var(--gos-border-strong); }
.gos-cmp-badges { display: flex; align-items: center; gap: 6px; flex: none; }
.gos-cmp-owner { display: flex; align-items: center; gap: 7px; flex: none; min-width: 110px; }
.gos-cmp-ava { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700; }
.gos-cmp-owner-name { font-size: 12.5px; color: var(--gos-text-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-cmp-remove { flex: none; opacity: 0; transition: opacity .15s; }
.gos-cmp-row:hover .gos-cmp-remove, .gos-cmp-remove:focus { opacity: 1; }
.gos-cmp-remove:hover { color: var(--gos-red-fg); }
.gos-cmp-foot {
  display: flex; align-items: center; gap: 7px; padding: 10px 18px; border-top: 1px solid var(--gos-border);
  background: var(--gos-surface-2); font-size: 12px; color: var(--gos-text-3); font-weight: 500;
}
.gos-cmp-foot svg { color: var(--gos-text-3); flex: none; }
.gos-cmp-nomatch { padding: 32px 20px; text-align: center; color: var(--gos-text-3); font-size: 13px; }
.gos-cmp-empty { padding: 38px 20px 32px; text-align: center; }
.gos-cmp-empty-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--gos-surface-3); color: var(--gos-text-3); display: grid; place-items: center; margin: 0 auto 13px; }
.gos-cmp-empty-title { font-size: 14.5px; font-weight: 650; color: var(--gos-text-2); margin-bottom: 5px; }
.gos-cmp-empty-text { font-size: 13px; color: var(--gos-text-3); line-height: 1.5; max-width: 300px; margin: 0 auto 18px; }

/* Add-to-Campaign modal (reuses .gos-camp-* / .gos-owner-row from the bulk modal) */
.gos-cmp-addmodal {
  width: 100%; max-width: 480px; background: var(--gos-surface); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(56, 46, 30, .30), 0 8px 24px -8px rgba(56, 46, 30, .18);
  animation: gosImportPop .22s cubic-bezier(.34, 1.4, .5, 1);
}
.gos-cmp-addhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--gos-border); }
.gos-cmp-addtitle { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; color: var(--gos-text); }
.gos-cmp-addtitle-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--gos-accent-soft); color: var(--gos-accent); display: grid; place-items: center; flex: none; }
.gos-cmp-addbody { padding: 14px 16px 16px; }
.gos-cmp-addlist { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

/* Unassign confirm */
.gos-cmp-confirm {
  width: 100%; max-width: 400px; background: var(--gos-surface); border-radius: 16px; padding: 22px;
  box-shadow: 0 24px 60px -16px rgba(56, 46, 30, .30), 0 8px 24px -8px rgba(56, 46, 30, .18);
  animation: gosImportPop .22s cubic-bezier(.34, 1.4, .5, 1);
}
.gos-cmp-confirm-title { font-size: 16px; font-weight: 650; color: var(--gos-text); margin-bottom: 8px; }
.gos-cmp-confirm-text { font-size: 13.5px; line-height: 1.6; color: var(--gos-text-2); margin-bottom: 18px; }
.gos-cmp-confirm-text strong { color: var(--gos-text); }
.gos-cmp-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ============================================================
   CREATE / EDIT LEAD page (addLead.jsx + leadForm.jsx)
   Ported from design growthos/CreateLead. Scoped under .gos-cl.
   ============================================================ */
.gos-cl { padding: 0 !important; background: var(--gos-bg-app) !important; }
.gos-cl-header {
  position: sticky; top: 0; display: flex; align-items: center; gap: 14px; padding: 14px 24px;
  background: var(--gos-surface); border-bottom: 1px solid var(--gos-border); z-index: 6;
}
.gos-cl-back {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; cursor: pointer;
  color: var(--gos-text-2); background: var(--gos-surface-2); border: 1px solid var(--gos-border); transition: all .14s;
}
.gos-cl-back:hover { background: var(--gos-surface-3); color: var(--gos-text); border-color: var(--gos-border-strong); }
.gos-cl-htitle { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--gos-text); line-height: 1.15; }
.gos-cl-hsub { font-size: 12.5px; color: var(--gos-text-3); margin-top: 2px; }
.gos-cl-reqdot { color: var(--gos-red-fg); font-weight: 700; }
.gos-cl-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.gos-cl3-body { max-width: 1280px; margin: 0 auto; padding: 24px 32px 64px; width: 100%; }

/* cover */
.gos-cl3-cover {
  position: relative; display: flex; align-items: center; gap: 26px; padding: 24px 28px; margin-bottom: 22px;
  border-radius: var(--gos-r-lg); overflow: hidden; border: 1px solid var(--gos-border); box-shadow: var(--gos-shadow-sm);
  background:
    radial-gradient(120% 160% at 100% 0%, var(--gos-accent-soft-2) 0%, transparent 46%),
    linear-gradient(115deg, var(--gos-accent-soft) 0%, var(--gos-surface) 58%);
}
.gos-cl-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; flex-shrink: 0; position: relative; z-index: 1; }
.gos-cl-photo {
  position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; overflow: hidden;
  background: var(--gos-surface); border: 2px dashed var(--gos-border-strong); color: var(--gos-text-3); transition: all .15s;
}
.gos-cl-photo:hover { border-color: var(--gos-accent); color: var(--gos-accent); background: var(--gos-accent-soft); }
.gos-cl-photo.has-img { border-style: solid; border-color: var(--gos-surface); box-shadow: 0 0 0 4px var(--gos-surface), 0 0 0 5px var(--gos-border-strong), var(--gos-shadow-md); cursor: default; }
.gos-cl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gos-cl-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.gos-cl-photo-empty span { font-size: 11px; font-weight: 600; }
.gos-cl-photo-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; cursor: pointer;
  background: linear-gradient(0deg, rgba(20, 16, 10, .55), transparent 60%); opacity: 0; transition: opacity .15s; color: #fff; font-size: 11px; font-weight: 650;
}
.gos-cl-photo.has-img:hover .gos-cl-photo-overlay { opacity: 1; }
.gos-cl-photo-actions { display: flex; gap: 6px; }
.gos-cl-photo-act {
  font-size: 11.5px; font-weight: 600; color: var(--gos-text-2); background: var(--gos-surface-2); cursor: pointer;
  border: 1px solid var(--gos-border); border-radius: 7px; padding: 4px 9px; display: inline-flex; align-items: center; gap: 5px; transition: all .12s;
}
.gos-cl-photo-act:hover { background: var(--gos-surface-3); color: var(--gos-text); border-color: var(--gos-border-strong); }
.gos-cl-photo-act.danger:hover { background: var(--gos-red-bg); color: var(--gos-red-fg); border-color: var(--gos-red-bg); }
.gos-cl-photo-hint { font-size: 11px; color: var(--gos-text-3); text-align: center; max-width: 116px; line-height: 1.4; }

.gos-cl3-id { flex: 1; min-width: 0; position: relative; z-index: 1; }
.gos-cl3-id-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gos-accent-ink); }
.gos-cl3-id-name { font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--gos-text); margin-top: 6px; line-height: 1.1; word-break: break-word; }
.gos-cl3-id-name.ph { color: var(--gos-text-3); font-weight: 650; }
.gos-cl3-id-sub { font-size: 14px; color: var(--gos-text-2); margin-top: 6px; }
.gos-cl3-id-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.gos-cl3-id-chips .gos-lr-chip { background: rgba(255, 255, 255, .7); }
.gos-cl3-ready {
  flex-shrink: 0; width: 230px; padding: 15px 17px; border-radius: var(--gos-r-md, 10px); position: relative; z-index: 1;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--gos-border); backdrop-filter: blur(4px);
}
.gos-cl3-ready-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gos-cl3-ready-label { font-size: 12.5px; font-weight: 650; color: var(--gos-text); }
.gos-cl3-ready-pct { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--gos-accent-ink); font-variant-numeric: tabular-nums; }
.gos-cl3-ready.full .gos-cl3-ready-pct { color: var(--gos-green-fg); }
.gos-cl3-bar { height: 7px; border-radius: 99px; background: var(--gos-surface-3); overflow: hidden; margin: 9px 0 8px; }
.gos-cl3-bar > div { height: 100%; border-radius: 99px; background: var(--gos-accent); transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.gos-cl3-ready.full .gos-cl3-bar > div { background: var(--gos-green-fg); }
.gos-cl3-ready-sub { font-size: 11.5px; color: var(--gos-text-3); display: flex; align-items: center; gap: 6px; }
.gos-cl3-ready-sub.ok { color: var(--gos-green-fg); font-weight: 600; }

/* sections grid */
.gos-cl3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.gos-cl3-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.gos-cl-sec { padding: 0; overflow: visible; box-shadow: var(--gos-shadow-sm); }
.gos-cl-sec:hover { border-color: var(--gos-border-strong); }
.gos-cl-sec-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--gos-border); }
.gos-cl-sec-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--gos-accent-soft); color: var(--gos-accent); flex-shrink: 0; }
.gos-cl-sec-title { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; color: var(--gos-text); }
.gos-cl-sec-sub { font-size: 12px; color: var(--gos-text-3); margin-top: 1px; }
.gos-cl-count { margin-left: auto; font-size: 11.5px; font-weight: 650; color: var(--gos-text-3); background: var(--gos-surface-3); border-radius: 7px; padding: 3px 9px; font-variant-numeric: tabular-nums; flex: none; }
.gos-cl-count.done { background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-cl-sec-body { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.gos-cl-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gos-cl-field-full { grid-column: 1 / -1; }

/* fields */
.gos-cl-label { font-size: 12.5px; font-weight: 550; color: var(--gos-text-2); }
.gos-cl-req { color: var(--gos-red-fg); margin-left: 2px; }
.gos-cl-input {
  width: 100%; height: 38px; border: 1px solid var(--gos-border-strong); border-radius: 8px; padding: 0 12px;
  font-size: 13.5px; color: var(--gos-text); background: var(--gos-surface); outline: none; transition: border-color .12s, box-shadow .12s;
}
.gos-cl-input:focus { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-cl-input::placeholder { color: var(--gos-text-3); }
.gos-cl-input.err { border-color: var(--gos-red-fg); }
.gos-cl-textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.5; font-family: inherit; }
.gos-cl-err { font-size: 11.5px; color: var(--gos-red-fg); }

/* opt-out toggle row */
.gos-cl-optrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--gos-surface-2); border: 1px solid var(--gos-border); border-radius: 10px; }
.gos-cl-optrow-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--gos-surface-3); color: var(--gos-text-3); flex: none; }
.gos-cl-optrow-meta { flex: 1; min-width: 0; }
.gos-cl-optrow-title { font-size: 13px; font-weight: 600; color: var(--gos-text); }
.gos-cl-optrow-sub { font-size: 11.5px; color: var(--gos-text-3); margin-top: 1px; }
.gos-cl-toggle { width: 42px; height: 24px; border-radius: 99px; background: var(--gos-border-strong); border: none; position: relative; cursor: pointer; flex: none; transition: background .15s; }
.gos-cl-toggle.on { background: var(--gos-accent); }
.gos-cl-toggle-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--gos-shadow-xs); transition: transform .15s; }
.gos-cl-toggle.on .gos-cl-toggle-knob { transform: translateX(18px); }

/* the form selects use the shared .gos-dd-* dropdown; make the trigger 38px tall */
.gos-cl-field .gos-dd-btn { height: 38px; }

@media (max-width: 1000px) { .gos-cl3-grid { grid-template-columns: 1fr; } .gos-cl3-cover { flex-wrap: wrap; gap: 18px; } .gos-cl3-ready { width: 100%; } }
@media (max-width: 760px) { .gos-cl-sec-body { grid-template-columns: 1fr; } .gos-cl3-body { padding: 16px 14px 48px; } }

@media (max-width: 1100px) { .gos-lr-2col { grid-template-columns: 1fr; } .gos-lr-sticky { position: static; } }
@media (max-width: 760px) { .gos-lr-grid2 { grid-template-columns: 1fr; } }

/* ============================================================
   SETTINGS - GrowthOS shell and Teams & Permissions
   Scoped to .gos-settings so existing settings pages keep their CSS.
   ============================================================ */
.gos-settings-page { min-height: 100%; padding: 24px 28px 32px !important; background: var(--gos-bg-app) !important; }
.gos-settings { display: grid; grid-template-columns: 234px minmax(0, 1fr); gap: 24px; align-items: start; color: var(--gos-text); }
.gos-set-content { min-width: 0; }
.gos-set-nav { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 16px; }
.gos-set-nav-group { padding: 16px 12px 7px; color: var(--gos-text-3); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gos-set-nav-group:first-child { padding-top: 2px; }
.gos-set-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--gos-text-2); font-size: 13.5px; font-weight: 500; text-align: left; transition: background .12s, color .12s; }
.gos-set-nav-item svg { flex: 0 0 auto; color: var(--gos-text-3); transition: color .12s; }
.gos-set-nav-item:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-set-nav-item.active { background: var(--gos-accent-soft); color: var(--gos-accent-ink); font-weight: 650; }
.gos-set-nav-item.active svg { color: var(--gos-accent); }
.gos-set-nav-item.disabled { cursor: not-allowed; opacity: .55; }
.gos-set-soon { margin-left: auto; padding: 2px 6px; border-radius: 6px; background: var(--gos-surface-3); color: var(--gos-text-3); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gos-set-fade { animation: gosSetFade .18s ease-out; }
@keyframes gosSetFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.gos-set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.gos-set-head h1 { margin: 0; color: var(--gos-text); font-size: 20px; font-weight: 700; letter-spacing: 0; }
.gos-set-head p, .gos-set-muted { margin: 4px 0 0; color: var(--gos-text-3); font-size: 12.5px; line-height: 1.5; }
.gos-set-card { overflow: hidden; background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: var(--gos-r-lg); box-shadow: var(--gos-shadow-xs); }
.gos-set-card.overflow-visible { overflow: visible; }
.gos-set-card-pad { padding: 18px 20px; }
.gos-set-general-card { max-width: 680px; }
.gos-set-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gos-set-field { display: flex; flex-direction: column; gap: 6px; }
.gos-set-field span { color: var(--gos-text-2); font-size: 12.5px; font-weight: 650; }
.gos-set-field input, .gos-set-search input { min-width: 0; outline: none; color: var(--gos-text); font-size: 13.5px; }
.gos-set-field input { height: 40px; padding: 0 12px; border: 1px solid var(--gos-border-strong); border-radius: 9px; background: var(--gos-surface); }
.gos-set-divider { height: 1px; margin: 20px 0; background: var(--gos-border); }
.gos-set-row { display: flex; align-items: center; gap: 8px; }
.gos-set-row.spread { justify-content: space-between; }
.gos-set-row.wrap { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.gos-set-row.center { align-items: center; }
.gos-set-strong { color: var(--gos-text); font-size: 13.5px; font-weight: 650; }
.gos-set-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.gos-set-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--gos-r); font-size: 13px; font-weight: 650; line-height: 1; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.gos-set-btn.small { min-height: 32px; padding-inline: 11px; font-size: 12.5px; }
.gos-set-btn.primary { background: var(--gos-accent); color: #fff; }
.gos-set-btn.primary:hover { background: var(--gos-accent-hover); }
.gos-set-btn.ghost { border-color: var(--gos-border); background: var(--gos-surface); color: var(--gos-text-2); }
.gos-set-btn.ghost:hover { border-color: var(--gos-border-strong); color: var(--gos-text); }
.gos-set-btn.soft { background: var(--gos-accent-soft); color: var(--gos-accent-ink); }
.gos-set-btn.soft:hover { background: var(--gos-accent-soft-2); }
.gos-set-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.gos-set-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--gos-text-2); font-size: 13px; font-weight: 650; }
.gos-set-tab svg { color: var(--gos-text-2); }
.gos-set-tab:hover { background: color-mix(in srgb, var(--gos-surface) 54%, transparent); color: var(--gos-text); }
.gos-set-tab.active { border-color: var(--gos-border); background: var(--gos-surface); color: var(--gos-text); box-shadow: var(--gos-shadow-xs); }
.gos-set-tab.active svg { color: var(--gos-text); }
.gos-set-role-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 18px; align-items: start; }
.gos-set-role-layout h2 { margin: 0; color: var(--gos-text); font-size: 15px; font-weight: 700; }
.gos-set-role-list { display: flex; flex-direction: column; gap: 7px; }
.gos-set-role-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border: 1px solid var(--gos-border); border-radius: 11px; background: var(--gos-surface); text-align: left; transition: background .12s, border-color .12s; }
.gos-set-role-item:hover { border-color: var(--gos-border-strong); background: var(--gos-surface-2); }
.gos-set-role-item.active {
  border: 1px solid var(--gos-accent);
  background: var(--gos-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gos-accent) 18%, transparent);
}
.gos-set-role-dot { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; }
.gos-set-role-dot.large { width: 13px; height: 13px; }
.gos-set-role-copy, .gos-set-cap-copy, .gos-set-team-top span:not([class]), .gos-set-team-lead span:not([class]), .gos-set-team-member span:not([class]), .gos-set-person-cell span:not([class]), .gos-set-stat { display: flex; flex-direction: column; min-width: 0; }
.gos-set-role-copy { flex: 1; }
.gos-set-role-copy strong, .gos-set-person-cell strong, .gos-set-team-top strong, .gos-set-team-lead strong, .gos-set-team-member strong, .gos-set-territory-card strong { overflow: hidden; color: var(--gos-text); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gos-set-role-copy small, .gos-set-person-cell small, .gos-set-team-top small, .gos-set-team-lead small, .gos-set-team-member small, .gos-set-territory-card small, .gos-set-stat small, .gos-set-cap-copy small { overflow: hidden; color: var(--gos-text-3); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.gos-set-badge { display: inline-flex; align-items: center; gap: 5px; width: max-content; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
/* design shows the status pip only on the green "Active" badge — Invited/System/Locked/Lead have none */
.gos-set-badge.green::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.gos-set-badge.gray { background: var(--gos-gray-bg); color: var(--gos-gray-fg); }
.gos-set-badge.green { background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-set-badge.amber { background: var(--gos-amber-bg); color: var(--gos-amber-fg); }
.gos-set-badge.purple { background: var(--gos-purple-bg); color: var(--gos-purple-fg); }
.gos-set-role-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.gos-set-role-title { display: flex; align-items: center; gap: 10px; }
.gos-set-role-title h2 { font-size: 17px; }
.gos-set-role-detail-head p { max-width: 560px; margin: 6px 0 0; color: var(--gos-text-2); font-size: 13px; line-height: 1.5; }
.gos-set-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--gos-text-3); transition: background .12s, border-color .12s, color .12s; }
.gos-set-icon-btn:hover { border-color: var(--gos-border); background: var(--gos-surface-3); color: var(--gos-text); }
.gos-set-icon-btn.danger { color: var(--gos-red-fg); }
.gos-set-note, .gos-set-inline-note { display: flex; align-items: center; gap: 8px; color: var(--gos-text-2); font-size: 12.5px; line-height: 1.45; }
.gos-set-note { margin-top: 16px; padding: 10px 12px; border: 1px solid var(--gos-border); border-radius: 10px; background: var(--gos-surface-2); }
.gos-set-perm-section { padding: 20px 0; border-top: 1px solid var(--gos-border); }
.gos-set-perm-section:first-of-type { border-top: 0; }
.gos-set-perm-section h3 { margin: 0 0 3px; color: var(--gos-text); font-size: 13px; font-weight: 700; }
.gos-set-perm-section p { margin: 0 0 15px; color: var(--gos-text-3); font-size: 12.5px; line-height: 1.5; }
.gos-set-matrix-wrap, .gos-set-table-wrap { overflow-x: auto; }
.gos-set-matrix, .gos-set-table { width: 100%; border-collapse: collapse; }
.gos-set-matrix thead, .gos-set-matrix thead tr, .gos-set-matrix th { background: transparent !important; }
.gos-set-matrix th { padding: 0 4px 11px; color: var(--gos-text-3); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.gos-set-matrix th.module, .gos-set-matrix td.module { min-width: 180px; padding-left: 2px; text-align: left; }
.gos-set-matrix td { padding: 9px 4px; border-top: 1px solid var(--gos-border); text-align: center; }
.gos-set-module-name { display: flex; align-items: center; gap: 11px; color: var(--gos-text); font-size: 13.5px; font-weight: 600; }
.gos-set-module-icon, .gos-set-scope-icon, .gos-set-cap-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--gos-surface-3); color: var(--gos-text-2); }
.gos-set-perm-cell { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto; border: 1.7px solid var(--gos-border-strong); border-radius: 7px; background: var(--gos-surface); color: #fff; transition: background .12s, border-color .12s; }
.gos-set-perm-cell svg { opacity: 0; transform: translateX(-1px); }
.gos-set-perm-cell:hover { border-color: var(--gos-accent); }
.gos-set-perm-cell.on { border-color: var(--gos-accent); background: var(--gos-accent); }
.gos-set-perm-cell.on svg { opacity: 1; }
.gos-set-perm-cell.disabled { border-color: var(--gos-border); background: var(--gos-surface-3); pointer-events: none; }
.gos-set-perm-cell.disabled.on { border-color: var(--gos-accent-soft-2); background: var(--gos-accent-soft-2); color: var(--gos-accent); }
.gos-set-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gos-set-scope-card { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 14px; border: 1.5px solid var(--gos-border-strong); border-radius: 12px; background: var(--gos-surface); text-align: left; transition: background .12s, border-color .12s; }
.gos-set-scope-card:hover, .gos-set-scope-card.active { border-color: var(--gos-accent); }
.gos-set-scope-card.active { background: var(--gos-accent-soft); }
.gos-set-scope-card.active .gos-set-scope-icon { background: var(--gos-accent-soft-2); color: var(--gos-accent); }
.gos-set-scope-card.disabled { opacity: .55; pointer-events: none; }
.gos-set-scope-card span:last-child { display: flex; flex-direction: column; }
.gos-set-scope-card strong { color: var(--gos-text); font-size: 13.5px; font-weight: 600; }
.gos-set-scope-card small { color: var(--gos-text-3); font-size: 12px; line-height: 1.4; }
.gos-set-cap-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--gos-border); }
.gos-set-cap-row:first-child { border-top: 0; }
.gos-set-cap-copy { flex: 1; }
.gos-set-cap-copy strong { color: var(--gos-text); font-size: 13.5px; font-weight: 600; }
.gos-set-switch { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border: 0; border-radius: 999px; background: var(--gos-border-strong); transition: background .16s; }
.gos-set-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(56, 46, 30, .25); transition: transform .18s cubic-bezier(.4, 0, .2, 1); }
.gos-set-switch.on { background: var(--gos-accent); }
.gos-set-switch.on::after { transform: translateX(16px); }
.gos-set-switch.disabled { opacity: .45; }
.gos-set-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--gos-border); }
.gos-set-card-title { display: flex; align-items: center; gap: 9px; color: var(--gos-text); font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.gos-set-card-title svg { color: var(--gos-text-3); }
.gos-set-card-title.larger { font-size: 15px; }
.gos-set-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--gos-surface-3); color: var(--gos-text-3); font-size: 11px; font-weight: 700; }
.gos-set-search-row { padding: 12px 16px; border-bottom: 1px solid var(--gos-border); }
.gos-set-search { display: flex; align-items: center; gap: 9px; width: min(100%, 320px); height: 42px; padding: 0 12px; border: 1px solid var(--gos-border-strong); border-radius: 10px; background: var(--gos-surface-2); color: var(--gos-text-3); transition: border-color .12s, box-shadow .12s, background .12s; }
.gos-set-search:focus-within { border-color: var(--gos-accent); background: var(--gos-surface); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-set-search input { flex: 1; border: 0; background: transparent; }
.gos-set-table { min-width: 760px; }
.gos-set-table th { padding: 11px 16px; border-bottom: 1px solid var(--gos-border); background: var(--gos-surface-2); color: var(--gos-text-3); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.gos-set-table td { padding: 13px 16px; border-bottom: 1px solid var(--gos-border); color: var(--gos-text-2); font-size: 13.5px; vertical-align: middle; }
.gos-set-table tbody tr { transition: background .12s; }
.gos-set-table tbody tr:hover { background: var(--gos-surface-3); }
.gos-set-table tbody tr:last-child td { border-bottom: none; }
.gos-set-person-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.gos-set-person-cell.compact { gap: 8px; }
.gos-set-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; text-align: center; }
.gos-set-role-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border: 1px solid var(--gos-border); border-radius: 8px; background: var(--gos-surface); color: var(--gos-text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gos-set-team-board { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; padding-bottom: 10px; }
.gos-set-team-col { flex: 0 0 286px; overflow: hidden; border: 1px solid var(--gos-border); border-radius: var(--gos-r-lg); background: var(--gos-surface); box-shadow: var(--gos-shadow-xs); }
.gos-set-team-bar { height: 4px; }
.gos-set-team-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px 11px; }
.gos-set-team-lead { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-top: 1px solid var(--gos-border); border-bottom: 1px solid var(--gos-border); background: var(--gos-surface-2); }
.gos-set-team-lead span:nth-child(2), .gos-set-team-member span:nth-child(2) { flex: 1; }
.gos-set-team-member { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--gos-border); }
.gos-set-team-member:hover { background: var(--gos-surface-2); }
.gos-set-team-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px; border: 0; background: transparent; color: var(--gos-text-3); font-size: 12.5px; font-weight: 650; }
.gos-set-team-add:hover { background: var(--gos-surface-3); color: var(--gos-accent); }
.gos-set-info-card { margin-bottom: 16px; }
.gos-set-inline-note { padding: 12px 18px; }
.gos-set-territory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gos-set-territory-card { overflow: hidden; border: 1px solid var(--gos-border); border-radius: var(--gos-r-lg); background: var(--gos-surface); box-shadow: var(--gos-shadow-xs); }
.gos-set-territory-top { display: flex; align-items: flex-start; gap: 13px; padding: 16px 17px 13px; }
.gos-set-territory-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; color: #fff; }
.gos-set-territory-card .grow { flex: 1; min-width: 0; }
.gos-set-territory-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 17px; border-top: 1px solid var(--gos-border); background: var(--gos-surface-2); }
.gos-set-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 7px; background: var(--gos-accent-soft); color: var(--gos-accent-ink); font-size: 11.5px; font-weight: 550; }
.gos-set-stat { text-align: right; }
.gos-set-stat strong { color: var(--gos-text); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.gos-set-stat small { font-size: 11px; }
/* per-context name typography — design uses distinct sizes/weights per surface */
.gos-set-team-top strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.gos-set-team-lead strong, .gos-set-team-member strong { font-size: 13px; }
.gos-set-territory-top strong { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.gos-set-territory-top small { font-size: 12px; margin-top: 2px; }
.gos-set-table .gos-set-person-cell small { font-size: 12px; }
.gos-set-person-cell.compact strong { font-size: 12.5px; }
.gos-set-person-cell.compact small { font-size: 11px; }
/* reveal the team-member remove button only on row hover (design) */
.gos-set-team-member .gos-set-icon-btn { opacity: 0; transition: opacity .12s; }
.gos-set-team-member:hover .gos-set-icon-btn { opacity: 1; }
.gos-set-stub { display: grid; justify-items: center; padding: 64px 24px; text-align: center; }
.gos-set-stub-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 14px; background: var(--gos-accent-soft); color: var(--gos-accent); }
.gos-set-stub strong { color: var(--gos-text); font-size: 16px; font-weight: 700; }
.gos-set-stub p { max-width: 380px; margin: 8px 0 0; color: var(--gos-text-3); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1080px) {
  .gos-settings { grid-template-columns: 1fr; gap: 16px; }
  .gos-set-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .gos-set-nav-group { flex-basis: 100%; padding-top: 10px; }
  .gos-set-nav-item { width: auto; }
  .gos-set-role-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .gos-settings-page { padding: 18px 14px 24px !important; }
  .gos-set-form-grid, .gos-set-scope-grid, .gos-set-territory-grid { grid-template-columns: 1fr; }
  .gos-set-actions, .gos-set-card-head, .gos-set-role-detail-head { align-items: stretch; flex-direction: column; }
  .gos-set-btn { width: 100%; }
  .gos-set-tabs { display: grid; grid-template-columns: 1fr; }
}

/* ============================================================
   Emails tab (lead/contact record) — ported from design growthos/Emails
   threaded, expandable history. Prefixed gos-eml-* to avoid colliding with
   compose.jsx's gos-em-* preview classes.
   ============================================================ */
.gos-eml-card { overflow: hidden; background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: var(--gos-r-lg); box-shadow: var(--gos-shadow-xs); }
.gos-eml-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--gos-border); }
.gos-eml-title { display: flex; align-items: center; gap: 9px; color: var(--gos-text); font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.gos-eml-title svg { color: var(--gos-text-3); }
.gos-eml-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--gos-surface-3); color: var(--gos-text-3); font-size: 11px; font-weight: 700; }

.gos-eml-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--gos-r); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.gos-eml-btn.soft { background: var(--gos-accent-soft); color: var(--gos-accent-ink); }
.gos-eml-btn.soft:hover { background: var(--gos-accent-soft-2); }
.gos-eml-btn.ghost { border-color: var(--gos-border); background: var(--gos-surface); color: var(--gos-text-2); }
.gos-eml-btn.ghost:hover { border-color: var(--gos-border-strong); color: var(--gos-text); }
.gos-eml-iconbtn { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--gos-border); border-radius: var(--gos-r); background: var(--gos-surface); color: var(--gos-text-3); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.gos-eml-iconbtn:hover { border-color: var(--gos-border-strong); color: var(--gos-text); }

.gos-eml-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--gos-border); background: var(--gos-surface-2); }
.gos-eml-stat { padding: 13px 16px; border-right: 1px solid var(--gos-border); }
.gos-eml-stat:last-child { border-right: none; }
.gos-eml-stat-val { color: var(--gos-text); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.gos-eml-stat-lbl { margin-top: 4px; color: var(--gos-text-3); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.gos-eml-filter { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--gos-border); }
.gos-eml-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--gos-border); border-radius: 9px; background: var(--gos-surface-3); }
.gos-eml-seg button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border: 0; border-radius: 7px; background: transparent; color: var(--gos-text-2); font-size: 12.5px; font-weight: 550; cursor: pointer; }
.gos-eml-seg button.active { background: var(--gos-surface); color: var(--gos-text); font-weight: 600; box-shadow: var(--gos-shadow-xs); }
.gos-eml-seg-n { color: var(--gos-text-3); font-size: 11px; font-weight: 600; }
.gos-eml-seg button.active .gos-eml-seg-n { color: var(--gos-accent-ink); }

.gos-eml-list { display: flex; flex-direction: column; }
.gos-eml-item { border-bottom: 1px solid var(--gos-border); transition: background .12s; }
.gos-eml-item:last-child { border-bottom: none; }
.gos-eml-item.open { background: var(--gos-surface-2); }
.gos-eml-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.gos-eml-item:not(.open) .gos-eml-row:hover { background: var(--gos-surface-2); }
.gos-eml-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; text-align: center; }
.gos-eml-ava { position: relative; flex-shrink: 0; }
.gos-eml-dir { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 16px; height: 16px; border: 2px solid var(--gos-surface); border-radius: 50%; color: #fff; }
.gos-eml-item.open .gos-eml-dir { border-color: var(--gos-surface-2); }
.gos-eml-dir.out { background: var(--gos-accent); }
.gos-eml-dir.in { background: var(--gos-purple-fg); }
.gos-eml-main { flex: 1; min-width: 0; }
.gos-eml-line1 { display: flex; align-items: center; gap: 8px; }
.gos-eml-subj { overflow: hidden; color: var(--gos-text); font-size: 13.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.gos-eml-snip { display: block; overflow: hidden; margin-top: 3px; color: var(--gos-text-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.gos-eml-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.gos-eml-when { width: 118px; color: var(--gos-text-3); font-size: 12px; font-weight: 500; text-align: right; white-space: nowrap; }
.gos-eml-chev { display: grid; place-items: center; color: var(--gos-text-3); transition: transform .18s; }
.gos-eml-item.open .gos-eml-chev { transform: rotate(180deg); color: var(--gos-text-2); }

.gos-eml-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.gos-eml-pip { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.gos-eml-badge.green { background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-eml-badge.blue { background: var(--gos-blue-bg); color: var(--gos-blue-fg); }
.gos-eml-badge.amber { background: var(--gos-amber-bg); color: var(--gos-amber-fg); }
.gos-eml-badge.gray { background: var(--gos-gray-bg); color: var(--gos-gray-fg); }
.gos-eml-badge.red { background: var(--gos-red-bg); color: var(--gos-red-fg); }
.gos-eml-badge.purple { background: var(--gos-purple-bg); color: var(--gos-purple-fg); }

.gos-eml-detail { padding: 2px 16px 16px 64px; }
.gos-eml-addr { margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--gos-border); border-radius: 10px; background: var(--gos-surface); }
.gos-eml-addr-row { display: flex; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.gos-eml-addr-k { flex-shrink: 0; width: 44px; color: var(--gos-text-3); font-weight: 600; }
.gos-eml-addr-v { color: var(--gos-text); font-weight: 550; word-break: break-word; }
.gos-eml-addr-v.muted { color: var(--gos-text-3); font-weight: 400; }
.gos-eml-body { color: var(--gos-text-2); font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; }
.gos-eml-body.muted { color: var(--gos-text-3); }
.gos-eml-body :where(p, ul, ol) { margin: 0 0 .6em; }
.gos-eml-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gos-border); }
.gos-eml-btn-row { display: flex; align-items: center; gap: 8px; }

.gos-eml-empty { padding: 44px 20px 40px; text-align: center; }
.gos-eml-empty-ic { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 13px; border-radius: 13px; background: var(--gos-surface-3); color: var(--gos-text-3); }
.gos-eml-empty-t { margin-bottom: 5px; color: var(--gos-text-2); font-size: 14.5px; font-weight: 650; text-transform: capitalize; }
.gos-eml-empty-s { max-width: 320px; margin-inline: auto; color: var(--gos-text-3); font-size: 13px; line-height: 1.5; }
.gos-eml-compose { margin-top: 16px; }

@media (max-width: 720px) {
  .gos-eml-stats { grid-template-columns: repeat(3, 1fr); }
  .gos-eml-when { display: none; }
  .gos-eml-detail { padding-left: 16px; }
}

/* ============================================================
   Opportunities tab (record pages) — ported from design growthos/Opportunities
   ============================================================ */
.gos-oppr-card { overflow: hidden; background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: var(--gos-r-lg); box-shadow: var(--gos-shadow-xs); }
.gos-oppr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--gos-border); }
.gos-oppr-title { display: flex; align-items: center; gap: 9px; color: var(--gos-text); font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.gos-oppr-title svg { color: var(--gos-text-3); }
.gos-oppr-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--gos-surface-3); color: var(--gos-text-3); font-size: 11px; font-weight: 700; }
.gos-oppr-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--gos-r); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.gos-oppr-btn.soft { background: var(--gos-accent-soft); color: var(--gos-accent-ink); }
.gos-oppr-btn.soft:hover { background: var(--gos-accent-soft-2); }

.gos-oppr-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--gos-border); }
.gos-oppr-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--gos-border); border-radius: 9px; background: var(--gos-surface-3); }
.gos-oppr-seg button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border: 0; border-radius: 7px; background: transparent; color: var(--gos-text-2); font-size: 12.5px; font-weight: 550; cursor: pointer; }
.gos-oppr-seg button.active { background: var(--gos-surface); color: var(--gos-text); font-weight: 600; box-shadow: var(--gos-shadow-xs); }
.gos-oppr-seg-n { color: var(--gos-text-3); font-size: 11px; font-weight: 600; }
.gos-oppr-seg button.active .gos-oppr-seg-n { color: var(--gos-accent-ink); }
.gos-oppr-search { display: flex; align-items: center; gap: 9px; width: min(100%, 240px); height: 38px; padding: 0 12px; border: 1px solid var(--gos-border-strong); border-radius: 10px; background: var(--gos-surface-2); color: var(--gos-text-3); transition: border-color .12s, box-shadow .12s, background .12s; }
.gos-oppr-search:focus-within { border-color: var(--gos-accent); background: var(--gos-surface); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-oppr-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--gos-text); font-size: 13.5px; }
.gos-oppr-search-clear { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--gos-text-3); cursor: pointer; }
.gos-oppr-search-clear:hover { background: var(--gos-surface-3); color: var(--gos-text); }

.gos-oppr-head-row { display: flex; align-items: center; gap: 14px; padding: 9px 18px; border-bottom: 1px solid var(--gos-border); background: var(--gos-surface-2); color: var(--gos-text-3); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.gos-oppr-col-name { flex: 1; min-width: 0; }
.gos-oppr-col-stage { width: 104px; flex-shrink: 0; }
.gos-oppr-col-value { width: 84px; flex-shrink: 0; text-align: right; }
.gos-oppr-col-owner { width: 128px; flex-shrink: 0; }
.gos-oppr-col-actions { width: 44px; flex-shrink: 0; }

.gos-oppr-list { display: flex; flex-direction: column; }
.gos-oppr-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--gos-border); transition: background .12s; }
.gos-oppr-row.last { border-bottom: none; }
.gos-oppr-row:hover { background: var(--gos-surface-2); }
.gos-oppr-ic { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; }
.gos-oppr-main { flex: 1; min-width: 0; }
.gos-oppr-name { overflow: hidden; color: var(--gos-text); font-size: 13.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.gos-oppr-name a { color: inherit; text-decoration: none; }
.gos-oppr-name a:hover { color: var(--gos-accent-ink); text-decoration: underline; }
.gos-oppr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; color: var(--gos-text-3); font-size: 12px; font-weight: 500; }
.gos-oppr-meta svg { flex-shrink: 0; color: var(--gos-text-3); }
.gos-oppr-dot { color: var(--gos-border-strong); }
.gos-oppr-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.gos-oppr-pip { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.gos-oppr-badge.green { background: var(--gos-green-bg); color: var(--gos-green-fg); }
.gos-oppr-badge.blue { background: var(--gos-blue-bg); color: var(--gos-blue-fg); }
.gos-oppr-badge.amber { background: var(--gos-amber-bg); color: var(--gos-amber-fg); }
.gos-oppr-badge.purple { background: var(--gos-purple-bg); color: var(--gos-purple-fg); }
.gos-oppr-badge.red { background: var(--gos-red-bg); color: var(--gos-red-fg); }
.gos-oppr-badge.gray { background: var(--gos-gray-bg); color: var(--gos-gray-fg); }
.gos-oppr-value { width: 84px; flex-shrink: 0; color: var(--gos-text); font-size: 13.5px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.gos-oppr-owner { display: flex; align-items: center; gap: 8px; width: 128px; flex-shrink: 0; color: var(--gos-text-2); font-size: 12.5px; font-weight: 500; }
.gos-oppr-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; }
.gos-oppr-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-oppr-actions { display: flex; justify-content: flex-end; gap: 4px; width: 44px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.gos-oppr-row:hover .gos-oppr-actions { opacity: 1; }
.gos-oppr-iconbtn { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--gos-text-3); cursor: pointer; transition: background .12s, color .12s; }
.gos-oppr-iconbtn:hover { background: var(--gos-surface-3); color: var(--gos-text); }

.gos-oppr-empty { padding: 44px 20px 40px; text-align: center; }
.gos-oppr-empty-ic { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 13px; border-radius: 13px; background: var(--gos-surface-3); color: var(--gos-text-3); }
.gos-oppr-empty-t { margin-bottom: 5px; color: var(--gos-text-2); font-size: 14.5px; font-weight: 650; text-transform: capitalize; }
.gos-oppr-empty-s { max-width: 320px; margin-inline: auto; color: var(--gos-text-3); font-size: 13px; line-height: 1.5; }

@media (max-width: 760px) {
  .gos-oppr-head-row, .gos-oppr-owner, .gos-oppr-col-owner { display: none; }
  .gos-oppr-row { flex-wrap: wrap; }
}

/* ============================================================
   EMAIL TEMPLATES list — src/components/settings/emailTemplate/templates.jsx
   Ported from the design ListScreen (growthos/TemplateFlow.jsx + templates.css),
   gos-prefixed and scoped under .gos-tpl. Reuses the .gos-btn and .gos-ava
   primitives. The Gallery + unlayer Editor pages are separate (phase 2).
   Design tokens mapped to --gos-* equivalents.
   ============================================================ */
.gos-tpl { max-width: 1360px; margin: 0 auto; padding: 24px 26px 48px; }
.gos-tpl .gos-btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.gos-tpl .gos-btn-sm svg { width: 14px; height: 14px; }
.gos-tpl .gos-btn.on { background: var(--gos-accent-soft); border-color: var(--gos-accent); color: var(--gos-accent-ink); }
.gos-tpl .gos-btn.has-count strong { color: var(--gos-accent-ink); }

/* head */
.gos-tpl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.gos-tpl-h1 { font-size: 25px; font-weight: 720; letter-spacing: -.03em; color: var(--gos-text); }
.gos-tpl-sub { font-size: 13.5px; color: var(--gos-text-2); margin-top: 4px; }
.gos-tpl-sub strong { color: var(--gos-text); font-weight: 650; }

/* toolbar */
.gos-tpl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.gos-tpl-grow { flex: 1; }
.gos-tpl-search { display: flex; align-items: center; gap: 9px; background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 10px; padding: 9px 12px; height: 40px; width: 320px; max-width: 100%; }
.gos-tpl-search:focus-within { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-tpl-search svg { flex-shrink: 0; color: var(--gos-text-3); }
.gos-tpl-search input { border: none; outline: none; background: none; font-size: 13.5px; color: var(--gos-text); width: 100%; }
.gos-tpl-search-clear { border: none; background: none; color: var(--gos-text-3); cursor: pointer; padding: 2px; display: grid; place-items: center; border-radius: 5px; }
.gos-tpl-search-clear:hover { background: var(--gos-surface-3); color: var(--gos-text); }

.gos-tpl-mini { position: relative; }
.gos-tpl-mini-lbl { color: var(--gos-text-3); font-weight: 550; }
.gos-tpl-mini > .gos-btn strong { color: var(--gos-text); font-weight: 650; }
.gos-tpl-mini-pop { position: absolute; top: 44px; left: 0; min-width: 190px; background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 11px; box-shadow: var(--gos-shadow-md); padding: 5px; z-index: 40; }
.gos-tpl-mini-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; font-size: 13px; font-weight: 500; border: none; background: none; border-radius: 7px; cursor: pointer; color: var(--gos-text); text-align: left; font-family: inherit; }
.gos-tpl-mini-item:hover { background: var(--gos-surface-3); }
.gos-tpl-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--gos-border-strong); display: inline-grid; place-items: center; flex-shrink: 0; color: #fff; }
.gos-tpl-check.on { background: var(--gos-accent); border-color: var(--gos-accent); }

.gos-tpl-viewtoggle { display: inline-flex; background: var(--gos-surface-3); border: 1px solid var(--gos-border); border-radius: 10px; padding: 3px; gap: 2px; }
.gos-tpl-viewtoggle button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: none; background: none; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--gos-text-2); cursor: pointer; font-family: inherit; transition: background .14s, color .14s, box-shadow .14s; }
.gos-tpl-viewtoggle button:hover { color: var(--gos-text); }
.gos-tpl-viewtoggle button.on { background: var(--gos-surface); color: var(--gos-text); box-shadow: var(--gos-shadow-xs); }

/* card + table */
.gos-tpl-card { background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 14px; box-shadow: var(--gos-shadow-xs); overflow: hidden; }
.gos-tpl-tbl-scroll { overflow-x: auto; }
.gos-tpl-tbl { width: 100%; border-collapse: collapse; }
.gos-tpl-tbl thead th { text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--gos-text-3); padding: 12px 18px; border-bottom: 1px solid var(--gos-border); background: var(--gos-surface-2); white-space: nowrap; }
.gos-tpl-tbl tbody td { padding: 12px 18px; border-bottom: 1px solid var(--gos-border); font-size: 13.5px; vertical-align: middle; color: var(--gos-text); }
.gos-tpl-tbl tbody tr { cursor: pointer; transition: background .12s; }
.gos-tpl-tbl tbody tr:hover { background: var(--gos-surface-2); }
.gos-tpl-tbl tbody tr:last-child td { border-bottom: none; }
.gos-tpl-name-cell { display: flex; align-items: center; gap: 12px; }
.gos-tpl-thumb { width: 40px; height: 30px; border-radius: 6px; overflow: hidden; border: 1px solid var(--gos-border); flex-shrink: 0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.gos-tpl-name-meta { min-width: 0; }
.gos-tpl-name-link { font-weight: 640; color: var(--gos-text); white-space: nowrap; text-decoration: none; }
.gos-tpl-tbl tbody tr:hover .gos-tpl-name-link { color: var(--gos-accent); }
.gos-tpl-subject { color: var(--gos-text-2); display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-tpl-byline { display: flex; align-items: center; gap: 8px; }
.gos-tpl-by { font-size: 12.5px; color: var(--gos-text-2); font-weight: 500; white-space: nowrap; }
.gos-tpl-date { color: var(--gos-text-3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* chips */
.gos-tpl-type { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gos-tpl-type-dot { width: 6px; height: 6px; border-radius: 50%; }
.gos-tpl-mod { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--gos-text-2); background: var(--gos-surface-3); border: 1px solid var(--gos-border); white-space: nowrap; }
.gos-tpl-mod svg { width: 12px; height: 12px; opacity: .8; }

/* grid view */
.gos-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px; }
.gos-tpl-gcard { background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 14px; overflow: hidden; cursor: pointer; transition: box-shadow .18s, transform .18s, border-color .18s; box-shadow: var(--gos-shadow-xs); }
.gos-tpl-gcard:hover { box-shadow: var(--gos-shadow-md); transform: translateY(-3px); border-color: var(--gos-border-strong); }
.gos-tpl-gthumb { position: relative; height: 176px; background: var(--gos-surface-3); border-bottom: 1px solid var(--gos-border); overflow: hidden; display: grid; place-items: start center; padding-top: 16px; }
.gos-tpl-ghover { position: absolute; inset: 0; background: rgba(32,29,22,.42); display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .18s; }
.gos-tpl-gcard:hover .gos-tpl-ghover { opacity: 1; }
.gos-tpl-gbody { padding: 13px 15px 15px; }
.gos-tpl-gtop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gos-tpl-gname { font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gos-text); }
.gos-tpl-gsub { font-size: 12.5px; color: var(--gos-text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gos-tpl-gfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--gos-border); }

/* email preview thumbnail */
.gos-tpl-pv { width: 168px; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 3px 10px rgba(40,33,22,.10); display: flex; flex-direction: column; }
.gos-tpl-pv.compact { width: 100%; height: 100%; box-shadow: none; border-radius: 0; }
.gos-tpl-pv.compact .gos-tpl-pv-band { height: 8px; padding: 0 3px; }
.gos-tpl-pv.compact .gos-tpl-pv-logo { width: 12px; height: 3px; }
.gos-tpl-pv.compact .gos-tpl-pv-hero { height: 12px; }
.gos-tpl-pv.compact .gos-tpl-pv-body { padding: 4px 4px; gap: 2px; }
.gos-tpl-pv.compact .gos-tpl-pv-line { height: 1.5px; }
.gos-tpl-pv.compact .gos-tpl-pv-cta { height: 5px; width: 30px; }
.gos-tpl-pv.compact .gos-tpl-pv-2col { height: 10px; padding: 0 4px 4px; }
.gos-tpl-pv.compact .gos-tpl-pv-sign, .gos-tpl-pv.compact .gos-tpl-pv-notice { display: none; }
.gos-tpl-pv-band { height: 22px; display: flex; align-items: center; padding: 0 10px; }
.gos-tpl-pv-band.sm { height: 6px; }
.gos-tpl-pv-logo { width: 34px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.85); }
.gos-tpl-pv-hero { height: 46px; }
.gos-tpl-pv-hero.tall { height: 66px; display: grid; place-items: center; }
.gos-tpl-pv-hero-txt { width: 60%; height: 8px; border-radius: 3px; background: rgba(255,255,255,.85); }
.gos-tpl-pv-date { width: 40px; height: 14px; border-radius: 3px; background: currentColor; opacity: .85; }
.gos-tpl-pv-body { padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.gos-tpl-pv-body.center { align-items: center; }
.gos-tpl-pv-line { height: 4px; border-radius: 2px; background: #cfc9bd; display: block; }
.gos-tpl-pv-line.faint { background: #e4dfd4; }
.gos-tpl-pv-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 12px 12px; height: 34px; }
.gos-tpl-pv-2col span { border-radius: 3px; display: block; }
.gos-tpl-pv-cta { width: 74px; height: 15px; border-radius: 4px; margin: 2px auto 12px; }
.gos-tpl-pv-notice { margin: 9px 12px 0; padding: 8px; border-left: 3px solid; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; }
.gos-tpl-pv-sign { display: flex; align-items: center; gap: 7px; padding: 0 12px 12px; }
.gos-tpl-pv-ava { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.gos-tpl-pv-sign-lines { display: flex; flex-direction: column; gap: 3px; }

/* pagination */
.gos-tpl-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; border-top: 1px solid var(--gos-border); background: var(--gos-surface-2); flex-wrap: wrap; }
.gos-tpl-pager-info { font-size: 12.5px; color: var(--gos-text-2); }
.gos-tpl-pager-info strong { color: var(--gos-text); font-weight: 650; }
.gos-tpl-pager-pages { display: flex; align-items: center; gap: 3px; }
.gos-tpl-pnum, .gos-tpl-parrow { min-width: 32px; height: 32px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 550; color: var(--gos-text-2); font-family: inherit; transition: background .12s, color .12s; }
.gos-tpl-pnum:hover, .gos-tpl-parrow:not(:disabled):hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-tpl-pnum.on { background: var(--gos-accent); border-color: var(--gos-accent); color: #fff; font-weight: 650; }
.gos-tpl-parrow:disabled { opacity: .35; cursor: default; }

.gos-tpl-empty { text-align: center; padding: 56px 20px; color: var(--gos-text-3); font-size: 13.5px; }

/* row menu + icon button */
.gos-tpl-menuwrap { position: relative; }
.gos-tpl-iconbtn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--gos-text-2); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.gos-tpl-iconbtn:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-tpl-iconbtn.on { border-color: var(--gos-border-strong); background: var(--gos-surface-3); }
.gos-tpl-menu { position: absolute; top: 36px; right: 0; min-width: 170px; background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 11px; box-shadow: var(--gos-shadow-md); overflow: hidden; z-index: 40; padding: 5px; }
.gos-tpl-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; font-size: 13px; font-weight: 500; border-radius: 7px; cursor: pointer; color: var(--gos-text); border: none; background: none; text-align: left; font-family: inherit; }
.gos-tpl-menu-item:hover { background: var(--gos-surface-3); }
.gos-tpl-menu-item.danger { color: var(--gos-red-fg); }
.gos-tpl-menu-item.danger:hover { background: var(--gos-red-bg); }
.gos-tpl-menu-item.sep { margin-top: 4px; border-top: 1px solid var(--gos-border); padding-top: 11px; border-radius: 0 0 7px 7px; }

/* module modal */
.gos-tpl-ov { position: fixed; inset: 0; background: rgba(40,33,22,.42); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 1200; padding: 24px; }
.gos-tpl-modal { background: var(--gos-surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.28); width: 100%; max-width: 480px; display: flex; flex-direction: column; overflow: hidden; animation: gosTplPop .22s cubic-bezier(.22,1,.36,1); }
@keyframes gosTplPop { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.gos-tpl-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px; border-bottom: 1px solid var(--gos-border); }
.gos-tpl-modal-head-l { display: flex; align-items: flex-start; gap: 12px; }
.gos-tpl-modal-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--gos-accent-soft); color: var(--gos-accent); display: grid; place-items: center; flex-shrink: 0; }
.gos-tpl-modal-title { font-size: 16px; font-weight: 680; letter-spacing: -.01em; color: var(--gos-text); }
.gos-tpl-modal-sub { font-size: 12.5px; color: var(--gos-text-2); margin-top: 3px; max-width: 320px; line-height: 1.45; }
.gos-tpl-modal-body { padding: 20px 18px; }
.gos-tpl-flabel { display: block; font-size: 12.5px; font-weight: 600; color: var(--gos-text-2); margin-bottom: 8px; }
.gos-tpl-flabel .req { color: var(--gos-red-fg); }
.gos-tpl-sel { position: relative; }
.gos-tpl-sel-btn { width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border: 1px solid var(--gos-border-strong); border-radius: 10px; background: var(--gos-surface); font-size: 14px; font-weight: 500; color: var(--gos-text); cursor: pointer; font-family: inherit; transition: border-color .14s, box-shadow .14s; }
.gos-tpl-sel-btn:hover { border-color: var(--gos-text-3); }
.gos-tpl-sel-btn.open { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-tpl-sel-btn .ph { color: var(--gos-text-3); }
.gos-tpl-sel-btn svg { color: var(--gos-text-3); }
.gos-tpl-sel-menu { position: absolute; top: 50px; left: 0; right: 0; background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 10px; box-shadow: var(--gos-shadow-md); padding: 5px; z-index: 5; }
.gos-tpl-sel-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: none; background: none; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--gos-text); cursor: pointer; font-family: inherit; }
.gos-tpl-sel-opt svg { color: var(--gos-text-3); }
.gos-tpl-sel-opt:hover { background: var(--gos-surface-3); }
.gos-tpl-sel-opt.on { color: var(--gos-accent-ink); font-weight: 600; }
.gos-tpl-sel-opt.on svg { color: var(--gos-accent); }
.gos-tpl-hint { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--gos-text-3); margin: 14px 0 0; line-height: 1.5; }
.gos-tpl-hint svg { flex-shrink: 0; margin-top: 1px; }
.gos-tpl-modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-top: 1px solid var(--gos-border); background: var(--gos-surface-2); }
.gos-tpl-foot-actions { display: flex; align-items: center; gap: 10px; }

/* ---- Template Gallery (templateGallery.jsx → design GalleryScreen) ---- */
.gos-tgal-backrow { margin-bottom: 14px; }
.gos-tgal-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 14px; box-shadow: var(--gos-shadow-xs); flex-wrap: wrap; }
.gos-tgal-context-l { display: flex; align-items: center; gap: 12px; }
.gos-tgal-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--gos-accent-soft); color: var(--gos-accent); display: grid; place-items: center; flex-shrink: 0; }
.gos-tgal-label { font-size: 11.5px; color: var(--gos-text-3); font-weight: 550; text-transform: uppercase; letter-spacing: .04em; }
.gos-tgal-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 1px; color: var(--gos-text); }

.gos-tgal-pills { display: flex; align-items: center; gap: 8px; padding: 18px 0 16px; flex-wrap: wrap; }
.gos-tgal-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gos-border-strong); background: var(--gos-surface); font-size: 13px; font-weight: 600; color: var(--gos-text-2); cursor: pointer; font-family: inherit; transition: background .14s, color .14s, border-color .14s; }
.gos-tgal-pill:hover { border-color: var(--gos-text-3); color: var(--gos-text); }
.gos-tgal-pill.on { background: var(--gos-accent); border-color: var(--gos-accent); color: #fff; box-shadow: 0 2px 8px rgba(201,99,66,.28); }
.gos-tgal-pill-count { font-size: 11px; font-weight: 700; background: var(--gos-surface-3); color: var(--gos-text-3); border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; }
.gos-tgal-pill.on .gos-tgal-pill-count { background: rgba(255,255,255,.24); color: #fff; }

.gos-tgal-sec { margin-bottom: 32px; scroll-margin-top: 64px; }
.gos-tgal-sec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.gos-tgal-sec-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gos-tgal-sec-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--gos-text); }
.gos-tgal-sec-count { font-size: 11.5px; font-weight: 700; color: var(--gos-text-3); background: var(--gos-surface-3); border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; }
.gos-tgal-sec-desc { font-size: 12.5px; color: var(--gos-text-3); margin-left: 4px; }

.gos-tgal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.gos-tgal-card { cursor: pointer; }
.gos-tgal-thumb { position: relative; height: 158px; background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 12px; overflow: hidden; display: grid; place-items: start center; padding-top: 14px; transition: box-shadow .18s, transform .18s, border-color .18s; box-shadow: var(--gos-shadow-xs); }
.gos-tgal-card:hover .gos-tgal-thumb { box-shadow: var(--gos-shadow-md); transform: translateY(-3px); border-color: var(--gos-border-strong); }
.gos-tgal-card:hover .gos-tpl-ghover { opacity: 1; }
.gos-tgal-card-name { font-size: 13px; font-weight: 600; margin-top: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; color: var(--gos-text); }

.gos-tgal-blank { height: 158px; border: 2px dashed var(--gos-border-strong); border-radius: 12px; background: var(--gos-surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; color: var(--gos-text-2); font-size: 13px; font-weight: 600; font-family: inherit; transition: border-color .16s, background .16s, color .16s; }
.gos-tgal-blank:hover { border-color: var(--gos-accent); background: var(--gos-accent-soft); color: var(--gos-accent-ink); }
.gos-tgal-blank-plus { width: 42px; height: 42px; border-radius: 50%; background: var(--gos-surface); border: 1px solid var(--gos-border); display: grid; place-items: center; }
.gos-tgal-blank:hover .gos-tgal-blank-plus { border-color: var(--gos-accent); color: var(--gos-accent); }

/* ---- Email Template builder chrome (emailTemplateBuilder.jsx → design TemplateEditor
   `ted-bar`); the canvas stays the real unlayer <EmailEditor>, only the top bar is
   reskinned. gos-prefixed + --gos-* tokens. ---- */
/* Only the builder header (legacy .formContainer) is reskinned to the GrowthOS bar;
   reset its legacy gradient/padding so .gos-ted-bar defines the look. The outer +
   .editor are made a flex column that fills the app scroll area so the unlayer editor
   (whose own wrapper is flex:1) takes ALL remaining height — no fixed viewport math,
   no bottom gap regardless of header/chrome height. */
.templateBuilderOuter { min-height: 100vh; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.templateBuilderOuter .formContainer.gos-ted-formhead { background: var(--gos-surface); padding: 0; border: none; box-shadow: none; flex: 0 0 auto; min-width: 0; }
.templateBuilderOuter .editor { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.templateBuilderOuter .editor > * { flex: 1 1 auto; min-height: 0; min-width: 0; }
.gos-ted-bar { height: 62px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--gos-surface); border-bottom: 1px solid var(--gos-border); }
.gos-ted-back { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px 0 9px; border-radius: 9px; border: 1px solid var(--gos-border-strong); background: var(--gos-surface); color: var(--gos-text); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; flex-shrink: 0; transition: background .14s, color .14s, border-color .14s; }
.gos-ted-back:hover { background: var(--gos-surface-3); border-color: var(--gos-text-3); }
.gos-ted-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; border-left: 1px solid var(--gos-border); padding-left: 14px; }
.gos-ted-name { border: none; outline: none; background: none; font-size: 15px; font-weight: 680; color: var(--gos-text); font-family: inherit; padding: 2px 4px; border-radius: 6px; width: 280px; max-width: 40vw; letter-spacing: -.01em; }
.gos-ted-subject { border: none; outline: none; background: none; font-size: 12.5px; color: var(--gos-text-2); font-family: inherit; padding: 2px 4px; border-radius: 6px; width: 280px; max-width: 40vw; }
.gos-ted-name:hover, .gos-ted-subject:hover, .gos-ted-name:focus, .gos-ted-subject:focus { background: var(--gos-surface-3); }
.gos-ted-name::placeholder, .gos-ted-subject::placeholder { color: var(--gos-text-3); }
.gos-ted-grow { flex: 1; }
.gos-ted-modchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--gos-surface-3); border: 1px solid var(--gos-border); color: var(--gos-text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gos-ted-modchip svg { color: var(--gos-text-3); }
.gos-ted-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.gos-ted-toggle input { display: none; }
.gos-ted-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--gos-border-strong); position: relative; transition: background .18s; flex-shrink: 0; }
.gos-ted-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.gos-ted-toggle input:checked + .gos-ted-switch { background: var(--gos-accent); }
.gos-ted-toggle input:checked + .gos-ted-switch::after { transform: translateX(16px); }
.gos-ted-toggle-label { font-size: 13px; font-weight: 550; color: var(--gos-text-2); }
.gos-ted-modsel { position: relative; }
.gos-ted-modsel-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--gos-border-strong); border-radius: 10px; background: var(--gos-surface); font-size: 13px; font-weight: 600; color: var(--gos-text); cursor: pointer; font-family: inherit; }
.gos-ted-modsel-btn svg:first-child, .gos-ted-modsel-btn svg:last-child { color: var(--gos-text-3); }
.gos-ted-modsel-btn:hover, .gos-ted-modsel-btn.open { border-color: var(--gos-accent); }
.gos-ted-modsel-val { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gos-ted-modsel-menu { position: absolute; top: 46px; right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 11px; box-shadow: var(--gos-shadow-md); padding: 5px; z-index: 60; }
.gos-ted-modsel-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: none; background: none; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--gos-text); cursor: pointer; font-family: inherit; text-align: left; }
.gos-ted-modsel-opt:hover { background: var(--gos-surface-3); }
.gos-ted-modsel-opt.on { color: var(--gos-accent-ink); font-weight: 600; }
@media (max-width: 900px) {
  .gos-ted-name, .gos-ted-subject { width: 150px; }
  .gos-ted-toggle-label { display: none; }
  .gos-ted-modchip { display: none; }
}

/* ============================================================
   MANAGE TAGS — src/components/leads/manageTagPage.jsx
   Ported from the design growthos/TagsManager.jsx (.tagm-*),
   gos-prefixed + --gos-* tokens, scoped under .gos-tagm. Reuses
   .gos-btn*, .gos-import-* (modal shell) and .gos-tpl-search/-check.
   Mock-only columns (description / usage / last-used) + color
   swatches are dropped — real tags carry only name + createdBy;
   tag & avatar colors are derived deterministically in the JS.
   ============================================================ */
.gos-tagm { max-width: 1160px; margin: 0 auto; padding: 24px 26px 48px; }

/* head */
.gos-tagm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.gos-tagm-back { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 0 0 8px; margin: 0; color: var(--gos-text-3); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: color .14s; }
.gos-tagm-back:hover { color: var(--gos-accent); }
.gos-tagm-h1 { font-size: 25px; font-weight: 720; letter-spacing: -.03em; color: var(--gos-text); line-height: 1.1; }
.gos-tagm-sub { font-size: 13.5px; color: var(--gos-text-2); margin-top: 4px; }

/* chip */
.gos-tagm-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: 600; white-space: nowrap; letter-spacing: -.01em; }
.gos-tagm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* stats */
.gos-tagm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 14px; margin-bottom: 18px; }
.gos-tagm-stat { background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 12px; padding: 15px 18px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--gos-shadow-xs); }
.gos-tagm-stat-num { font-size: 22px; font-weight: 720; letter-spacing: -.02em; color: var(--gos-text); line-height: 1.1; }
.gos-tagm-stat-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gos-text-3); }

/* card + toolbar */
.gos-tagm-card { background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 14px; box-shadow: var(--gos-shadow-xs); overflow: hidden; }
.gos-tagm-toolbar { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--gos-border); flex-wrap: wrap; }
.gos-tagm-grow { flex: 1; }
.gos-tagm-count-lbl { font-size: 12.5px; color: var(--gos-text-3); white-space: nowrap; }
.gos-tagm-count-lbl strong { color: var(--gos-text-2); font-weight: 650; }

/* row-menu + sort dropdown (shared) */
.gos-tagm-menu { position: relative; }
.gos-tagm-iconbtn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: 1px solid transparent; background: none; color: var(--gos-text-2); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.gos-tagm-iconbtn:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-tagm-iconbtn.on { border-color: var(--gos-border-strong); background: var(--gos-surface); }
.gos-tagm-dd { position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 150px; background: var(--gos-surface); border: 1px solid var(--gos-border); border-radius: 11px; box-shadow: var(--gos-shadow-md); padding: 5px; z-index: 40; animation: gosDdIn .14s ease; }
.gos-tagm-dd-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; font-size: 13px; font-weight: 500; border: none; background: none; border-radius: 7px; cursor: pointer; color: var(--gos-text); text-align: left; font-family: inherit; }
.gos-tagm-dd-item:hover { background: var(--gos-surface-3); }
.gos-tagm-dd-item.gos-danger { color: var(--gos-red-fg); }
.gos-tagm-dd-item.gos-danger:hover { background: var(--gos-red-bg); }
.gos-tagm-dd-item svg { flex-shrink: 0; }

/* table */
.gos-tagm-tbl-scroll { overflow-x: auto; }
.gos-tagm-tbl { width: 100%; border-collapse: collapse; }
.gos-tagm-tbl thead th { text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--gos-text-3); padding: 12px 18px; border-bottom: 1px solid var(--gos-border); background: var(--gos-surface-2); white-space: nowrap; }
.gos-tagm-tbl tbody td { padding: 12px 18px; border-bottom: 1px solid var(--gos-border); font-size: 13.5px; vertical-align: middle; color: var(--gos-text); }
.gos-tagm-tbl tbody tr { cursor: pointer; transition: background .12s; }
.gos-tagm-tbl tbody tr:hover { background: var(--gos-surface-2); }
.gos-tagm-tbl tbody tr:last-child td { border-bottom: none; }
.gos-tagm-byline { display: flex; align-items: center; gap: 8px; }
.gos-tagm-ava { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 650; font-size: 10px; flex-shrink: 0; }
.gos-tagm-by { font-size: 12.5px; color: var(--gos-text-2); font-weight: 500; white-space: nowrap; }
.gos-tagm-empty { padding: 40px 18px; text-align: center; font-size: 13.5px; color: var(--gos-text-3); }

/* modal (reuses .gos-import-* shell) */
.gos-tagm-modal-body { padding: 18px; }
.gos-tagm-preview { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--gos-surface-2); border: 1px solid var(--gos-border); border-radius: 11px; margin-bottom: 18px; }
.gos-tagm-preview-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gos-text-3); }
.gos-tagm-flabel { display: block; font-size: 12.5px; font-weight: 600; color: var(--gos-text-2); margin-bottom: 8px; }
.gos-tagm-req { color: var(--gos-red-fg); }
.gos-tagm-input { width: 100%; height: 42px; border: 1px solid var(--gos-border-strong); border-radius: 10px; padding: 0 13px; font-size: 14px; color: var(--gos-text); outline: none; background: var(--gos-surface); font-family: inherit; transition: border-color .14s, box-shadow .14s; }
.gos-tagm-input:focus { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-tagm-del-body { padding: 18px 18px 20px; }
.gos-tagm-del-body p { margin: 0; font-size: 14px; color: var(--gos-text-2); line-height: 1.55; }
.gos-tagm-del-body .gos-tagm-chip { margin: 0 2px; vertical-align: middle; }

/* danger button (delete) */
.gos-btn-danger { background: var(--gos-red-fg); color: #fff; border-color: var(--gos-red-fg); }
.gos-btn-danger:hover { background: var(--gos-red-fg); filter: brightness(.93); color: #fff; }
.gos-btn-danger:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  .gos-tagm-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   PERSONAL SETTINGS — design growthos/Settings.jsx `Personal`
   (standalone page at /settings/personalSettings). Scoped to
   .gos-personal; ported .ps-* → --gos-* tokens.
   ============================================================ */
.gos-personal { max-width: 760px; }
.gos-personal .gos-ps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.gos-personal .gos-ps-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--gos-text); }
.gos-personal .gos-ps-sub { font-size: 13.5px; color: var(--gos-text-2); margin-top: 3px; max-width: 460px; line-height: 1.55; }

.gos-personal .gos-ps-card { max-width: 720px; overflow: hidden; padding: 0; }

.gos-personal .gos-ps-identity { display: flex; align-items: center; gap: 18px; padding: 22px 24px; }
.gos-personal .gos-ps-avatar-wrap { position: relative; flex-shrink: 0; }
.gos-personal .gos-ps-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--gos-accent-soft); color: var(--gos-accent-ink);
  display: grid; place-items: center; font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  border: 1px solid var(--gos-accent-soft-2);
}
.gos-personal .gos-ps-avatar-img { object-fit: cover; }
.gos-personal .gos-ps-avatar-edit {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gos-accent); color: #fff; border: 2px solid var(--gos-surface);
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .14s;
}
.gos-personal .gos-ps-avatar-edit:hover { background: var(--gos-accent-hover); }
.gos-personal .gos-ps-identity-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gos-personal .gos-ps-idrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gos-personal .gos-ps-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--gos-text); }
.gos-personal .gos-ps-role-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; color: var(--gos-accent-ink);
  background: var(--gos-accent-soft); border: 1px solid var(--gos-accent-soft-2);
}
.gos-personal .gos-ps-subtitle { font-size: 13px; color: var(--gos-text-2); font-weight: 500; }
.gos-personal .gos-ps-email-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gos-text-3); }
.gos-personal .gos-ps-email-line svg { width: 13px; height: 13px; }

.gos-personal .gos-ps-divider { height: 1px; background: var(--gos-border); }

.gos-personal .gos-ps-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 24px; }
.gos-personal .gos-ps-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gos-personal .gos-ps-field.wide { grid-column: 1 / -1; }
.gos-personal .gos-ps-label { font-size: 12.5px; font-weight: 600; color: var(--gos-text-2); }
.gos-personal .gos-ps-req { color: var(--gos-red-fg); }
.gos-personal .gos-ps-input {
  height: 42px; border: 1px solid var(--gos-border-strong); border-radius: 10px; padding: 0 13px;
  font-size: 14px; color: var(--gos-text); outline: none; background: var(--gos-surface);
  font-family: inherit; width: 100%; transition: border-color .14s, box-shadow .14s;
}
.gos-personal .gos-ps-input:focus { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-personal .gos-ps-input:disabled { background: var(--gos-surface-3); color: var(--gos-text-2); cursor: not-allowed; }
.gos-personal .gos-ps-select-wrap { position: relative; }
.gos-personal .gos-ps-select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.gos-personal .gos-ps-select:disabled { cursor: not-allowed; }
.gos-personal .gos-ps-select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gos-text-3); pointer-events: none; }

.gos-personal .gos-ps-actions { display: flex; justify-content: flex-end; gap: 10px; max-width: 720px; margin-top: 18px; }
.gos-personal .gos-ps-actions .gos-btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.gos-personal .gos-ps-actions .gos-btn-primary:disabled:hover { background: var(--gos-accent); }

@media (max-width: 720px) {
  .gos-personal .gos-ps-form { grid-template-columns: 1fr; }
}

/* ============================================================
   AUDIT LOG — design growthos/AuditLog.jsx (`.al-*` → .gos-al-*).
   Standalone page at /settings/auditLog; scoped to .gos-auditlog
   (NOT the .gos-leads grid theme). Day-grouped activity feed.
   ============================================================ */
.gos-auditlog { max-width: 920px; }
.gos-auditlog .gos-al-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.gos-auditlog .gos-al-back {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--gos-border-strong); background: var(--gos-surface); color: var(--gos-text-2);
  cursor: pointer; margin-bottom: 8px; transition: background .12s, color .12s;
}
.gos-auditlog .gos-al-back:hover { background: var(--gos-surface-3); color: var(--gos-text); }
.gos-auditlog .gos-al-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--gos-text); }
.gos-auditlog .gos-al-sub { font-size: 13.5px; color: var(--gos-text-2); margin-top: 3px; max-width: 480px; line-height: 1.55; }

.gos-auditlog .gos-al-card { overflow: hidden; padding: 0; }

/* toolbar */
.gos-auditlog .gos-al-toolbar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--gos-border); flex-wrap: wrap; }
.gos-auditlog .gos-al-grow { flex: 1; }
.gos-auditlog .gos-al-search {
  display: flex; align-items: center; gap: 8px; width: 280px; max-width: 100%; height: 38px;
  padding: 0 11px; border: 1px solid var(--gos-border-strong); border-radius: 9px;
  background: var(--gos-surface); color: var(--gos-text-3); transition: border-color .14s, box-shadow .14s;
}
.gos-auditlog .gos-al-search:focus-within { border-color: var(--gos-accent); box-shadow: 0 0 0 3px var(--gos-accent-soft); }
.gos-auditlog .gos-al-search input { border: none; outline: none; background: transparent; font: inherit; font-size: 13.5px; color: var(--gos-text); width: 100%; }
.gos-auditlog .gos-al-clear { border: none; background: none; color: var(--gos-text-3); cursor: pointer; padding: 2px; display: grid; place-items: center; border-radius: 5px; }
.gos-auditlog .gos-al-clear:hover { background: var(--gos-surface-3); color: var(--gos-text); }

/* filter selects */
.gos-auditlog .gos-al-selwrap { position: relative; }
.gos-auditlog .gos-al-selbtn { height: 38px; }
.gos-auditlog .gos-al-selbtn.on { background: var(--gos-surface-3); border-color: var(--gos-text-3); }
.gos-auditlog .gos-al-selbtn.has-count { border-color: var(--gos-accent); color: var(--gos-accent-ink); }
.gos-auditlog .gos-al-sel-label { color: var(--gos-text-3); font-weight: 550; }
.gos-auditlog .gos-al-selbtn strong { font-weight: 700; }
.gos-auditlog .gos-al-dd {
  position: absolute; top: 44px; left: 0; z-index: 40; min-width: 180px; max-height: 300px; overflow-y: auto;
  background: var(--gos-surface); border: 1px solid var(--gos-border-strong); border-radius: 10px;
  box-shadow: var(--gos-shadow-md); padding: 4px 0;
}
.gos-auditlog .gos-al-dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 14px; font-size: 13.5px; font-weight: 500; color: var(--gos-text); cursor: pointer;
}
.gos-auditlog .gos-al-dd-item:hover { background: var(--gos-accent-soft); color: var(--gos-accent-ink); }
.gos-auditlog .gos-al-check {
  width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid var(--gos-border-strong);
  background: var(--gos-surface); display: grid; place-items: center; color: #fff; flex: none; transition: background .12s, border-color .12s;
}
.gos-auditlog .gos-al-check.on { background: var(--gos-accent); border-color: var(--gos-accent); }
.gos-auditlog .gos-al-linkbtn { border: none; background: none; color: var(--gos-accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0 4px; }
.gos-auditlog .gos-al-linkbtn:hover { text-decoration: underline; }

/* feed */
.gos-auditlog .gos-al-scroll { max-height: calc(100vh - 320px); min-height: 320px; overflow-y: auto; padding: 0 0 8px; background: var(--gos-surface); }
.gos-auditlog .gos-al-empty { text-align: center; padding: 48px 20px; color: var(--gos-text-3); font-size: 13.5px; }
.gos-auditlog .gos-al-group { padding: 0; }
.gos-auditlog .gos-al-day { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 20px 9px; background: var(--gos-surface); box-shadow: 0 1px 0 var(--gos-border); }
.gos-auditlog .gos-al-day-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gos-text-3); }
.gos-auditlog .gos-al-day-count { font-size: 11px; font-weight: 700; color: var(--gos-text-3); background: var(--gos-surface-3); border-radius: 999px; min-width: 19px; height: 19px; padding: 0 6px; display: inline-grid; place-items: center; }
.gos-auditlog .gos-al-timeline { position: relative; padding: 2px 0; }
.gos-auditlog .gos-al-timeline::before { content: ""; position: absolute; left: 34px; top: 6px; bottom: 6px; width: 1.5px; background: var(--gos-border); }
.gos-auditlog .gos-al-item { display: flex; align-items: flex-start; gap: 14px; padding: 9px 20px; position: relative; transition: background .12s; }
.gos-auditlog .gos-al-item:hover { background: var(--gos-surface-2); }
.gos-auditlog .gos-al-node { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; z-index: 1; box-shadow: 0 0 0 3px var(--gos-surface); }
.gos-auditlog .gos-al-item:hover .gos-al-node { box-shadow: 0 0 0 3px var(--gos-surface-2); }
.gos-auditlog .gos-al-body { flex: 1; min-width: 0; }
.gos-auditlog .gos-al-line1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13.5px; }
.gos-auditlog .gos-al-ava { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 650; font-size: 9px; flex-shrink: 0; }
.gos-auditlog .gos-al-actor { font-weight: 650; color: var(--gos-text); }
.gos-auditlog .gos-al-verb { color: var(--gos-text-3); }
.gos-auditlog .gos-al-mod { font-size: 11px; font-weight: 600; color: var(--gos-text-2); background: var(--gos-surface-3); border: 1px solid var(--gos-border); border-radius: 6px; padding: 1px 7px; }
.gos-auditlog .gos-al-desc { font-size: 12.5px; color: var(--gos-text-2); margin-top: 3px; line-height: 1.45; word-break: break-word; }
.gos-auditlog .gos-al-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; }
.gos-auditlog .gos-al-time { font-size: 12px; font-weight: 550; color: var(--gos-text-2); white-space: nowrap; }
.gos-auditlog .gos-al-abs { font-size: 11px; color: var(--gos-text-3); white-space: nowrap; }

/* footer */
.gos-auditlog .gos-al-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--gos-border); }
.gos-auditlog .gos-al-count { font-size: 12.5px; color: var(--gos-text-3); }
.gos-auditlog .gos-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }

@media (max-width: 720px) {
  .gos-auditlog .gos-al-abs { display: none; }
  .gos-auditlog .gos-al-item { gap: 11px; padding: 9px 14px; }
  .gos-auditlog .gos-al-search { width: 100%; }
}