/* ========================================================================
   HUMAN-CENTERED EDITORIAL POLISH — AUGUST 2026
   A deliberately restrained final pass across the signed-in product.
   This layer only changes presentation: accounting behavior and workflows
   remain owned by their existing modules.
   ======================================================================== */

.app-shell {
  --human-canvas: #f4f6f8;
  --human-surface: #ffffff;
  --human-surface-subtle: #f8f9fb;
  --human-line: #d9e0e8;
  --human-line-strong: #c5cfdb;
  --human-ink: #17263a;
  --human-copy: #41546a;
  --human-muted: #718196;
  --human-primary: #1f63c5;
  --human-primary-hover: #184f9e;
  --human-focus: rgba(31, 99, 197, .18);
  --human-shadow: 0 1px 2px rgba(18, 38, 63, .04), 0 7px 20px rgba(18, 38, 63, .045);
  color: var(--human-ink);
}

/* Quiet, solid foundations feel considered and keep financial data central. */
.app-shell .workspace {
  gap: 16px;
  background: var(--human-canvas);
}

.app-shell .workspace::before {
  display: none;
}

.app-shell .sidebar {
  background: #0c1a2b;
  border-right: 1px solid rgba(176, 198, 224, .12);
  box-shadow: 8px 0 24px rgba(10, 25, 43, .07);
}

/* Zoho-inspired light navigation: calm lavender canvas, crisp dark labels,
   and one unmistakable blue selection. This is deliberately scoped to the
   signed-in sidebar so the rest of the product keeps its own presentation. */
html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar {
  background: #f7f7ff;
  color: #20283a;
  border-right-color: #e1e4ef;
  box-shadow: 4px 0 18px rgba(31, 42, 68, .035);
  scrollbar-color: #c8ccda transparent;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .brand-block {
  border-bottom-color: #e3e6f0;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .brand-block .eyebrow {
  color: #798197;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .brand-block h1 {
  color: #172033;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-close {
  color: #566078;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .nav-group + .nav-group {
  border-top-color: #e7e9f2;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] {
  border-color: transparent !important;
  background: transparent !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] > .nav-group-label {
  border: 1px solid transparent;
  color: #27344d !important;
  background: transparent !important;
  font-weight: 680 !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] > .nav-group-label:hover {
  border-color: #dce3f0;
  color: #15233b !important;
  background: #edf2fb !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group]:not(.collapsed) > .nav-group-label {
  border-color: #cfdbef;
  color: #174f9c !important;
  background: #eaf2ff !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group-icon {
  border-color: #d7deeb;
  color: #52647f;
  background: #f4f6fb;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group]:not(.collapsed) .nav-group-icon {
  border-color: #bfd1ed;
  color: #2366c5;
  background: #ffffff;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group-chevron {
  color: #66758d;
  opacity: .9;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] > .nav-group-label:hover .nav-group-chevron {
  color: #245ca8;
  background: #ffffff;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] > .nav-group-body {
  background: linear-gradient(#c7d7ee, #e7edf6) 12px 0 / 1px 100% no-repeat;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] .nav-item.nested {
  color: #3a4961 !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] .nav-item.nested svg {
  color: #687991;
  opacity: .82 !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] .nav-item.nested:hover {
  border-color: #dce4f0 !important;
  color: #14233a !important;
  background: #eef3fb !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] .nav-item.nested.active {
  border-color: #4389f5 !important;
  color: #ffffff !important;
  background: #4389f5 !important;
  box-shadow: 0 4px 12px rgba(67, 137, 245, .16) !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] .nav-item.nested.active svg {
  color: #ffffff;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .nav-item {
  border-color: transparent;
  background: transparent;
  color: #323b52;
  font-weight: 560;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .nav-item svg {
  color: #68738c;
  opacity: .92;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .nav-item:hover {
  border-color: #e0e5f2;
  background: #edeffa;
  color: #172033;
  transform: none;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .nav-item:hover svg {
  color: #2e6fcf;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .nav-item.active {
  border-color: #4389f5;
  background: #4389f5;
  color: #ffffff;
  font-weight: 680;
  box-shadow: 0 5px 13px rgba(67, 137, 245, .18);
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .nav-item.active::after {
  display: none;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .nav-item.active svg {
  color: #ffffff;
  opacity: 1;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group]:not(.collapsed) {
  border-color: #dce4f0 !important;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 3px 10px rgba(31, 42, 68, .035) !important;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-card,
html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-account {
  border-color: #dfe3ee;
  background: rgba(255, 255, 255, .72);
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-card strong {
  color: #172033;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-mini-grid,
html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-account-label {
  color: #737d93;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-mini-grid b {
  color: #293249;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-logout {
  border-color: #e3b8bd;
  background: #fff8f8;
  color: #b4232f;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar-logout:hover {
  border-color: #df8f98;
  background: #fff0f1;
  color: #971d28;
}

html:not([data-theme="dark"]) body.bb-app-active .app-shell #company-switcher-btn {
  border-color: #b8cdf4 !important;
  background: #edf3ff !important;
  color: #255fae !important;
}

.app-shell .brand-mark,
.app-shell .sidebar-card,
.app-shell .sidebar-account {
  box-shadow: none;
}

.app-shell .nav-item.active {
  border-color: rgba(113, 169, 238, .24);
  background: #17365f;
  box-shadow: none;
}

.app-shell .nav-item.active::after {
  width: 2px;
  background: #54c7b0;
  box-shadow: none;
}

.app-shell .nav-item:hover {
  background: #132c4a;
}

.app-shell .topbar {
  min-height: 64px;
  border: 1px solid var(--human-line);
  border-radius: 12px;
  background: var(--human-surface);
  box-shadow: var(--human-shadow);
  backdrop-filter: none;
}

.app-shell .topbar h2,
.app-shell .section-header h3 {
  color: var(--human-ink);
  font-weight: 750;
  letter-spacing: -.025em;
}

.app-shell .topbar .eyebrow,
.app-shell .nav-group-label,
.app-shell .metric-label,
.app-shell .mini-stat-label {
  letter-spacing: .055em;
}

.app-shell .topbar-search input {
  border-color: var(--human-line);
  border-radius: 9px;
  background: var(--human-surface-subtle);
  box-shadow: none;
}

.app-shell .topbar-search input:focus {
  border-color: var(--human-primary);
  box-shadow: 0 0 0 3px var(--human-focus);
}

.app-shell .topbar-account-avatar {
  background: #245fae;
  box-shadow: none;
}

.app-shell :where(.topbar-theme-toggle, .sidebar-toggle, .topbar-account-btn, .topbar-logout, .subscription-badge) {
  border-radius: 9px;
  box-shadow: none;
}

/* Remove repeated decorative treatments and let content create the rhythm. */
.app-shell :where(.panel, .metric-card, .table-shell) {
  border-color: var(--human-line);
  background: var(--human-surface);
  box-shadow: var(--human-shadow);
}

.app-shell .panel {
  border-radius: 13px;
}

.app-shell .metric-card {
  min-height: 102px;
  border-radius: 11px;
  padding: 16px 17px;
}

.app-shell .metric-card::after,
.app-shell .metric-card::before {
  display: none;
}

.app-shell .metric-card strong {
  color: var(--human-ink);
  font-weight: 760;
  letter-spacing: -.02em;
}

.app-shell :where(.section-header p, .muted-copy, .metric-label, .mini-stat-label) {
  color: var(--human-muted);
}

/* Controls use solid color and predictable states instead of decorative lift. */
.app-shell :where(.ghost-button, .primary-button, .danger-button) {
  min-height: 39px;
  border-radius: 9px;
  font-weight: 680;
}

.app-shell .primary-button {
  border-color: var(--human-primary);
  background: var(--human-primary);
  box-shadow: 0 2px 5px rgba(31, 99, 197, .16);
}

.app-shell .primary-button:hover {
  border-color: var(--human-primary-hover);
  background: var(--human-primary-hover);
  box-shadow: 0 2px 6px rgba(31, 79, 142, .18);
  transform: none;
}

.app-shell .ghost-button {
  border-color: var(--human-line-strong);
  color: #354b63;
  box-shadow: none;
}

.app-shell .ghost-button:hover {
  border-color: #9fb1c6;
  background: #f5f7fa;
  color: #203a58;
  box-shadow: none;
  transform: none;
}

.app-shell .table-action,
.app-shell .table-action:hover {
  border-radius: 7px;
  box-shadow: none;
  transform: none;
}

.app-shell :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--human-focus);
  outline-offset: 2px;
}

.app-shell :where(.field input, .field select, .field textarea, .field-input, .coa-input, .je-field, .line-editor input, .line-editor select) {
  border-color: var(--human-line-strong);
  border-radius: 8px;
  box-shadow: none;
}

.app-shell :where(.field input, .field select, .field textarea, .field-input, .coa-input, .je-field, .line-editor input, .line-editor select):focus {
  border-color: var(--human-primary);
  box-shadow: 0 0 0 3px var(--human-focus);
}

.app-shell :where(.field label, .form-row label) {
  color: #3c5067;
  font-weight: 680;
}

/* Dense financial tables should read like working documents, not card art. */
.app-shell .table-shell {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(18, 38, 63, .035);
}

.app-shell .table-shell :where(th, td) {
  padding: 11px 13px;
  border-bottom-color: #e3e8ee;
  color: #334a63;
}

.app-shell .table-shell thead th {
  color: #5b6f86;
  background: #f5f7f9;
  border-bottom-color: #d3dbe4;
  font-weight: 720;
  letter-spacing: .045em;
  box-shadow: none;
}

.app-shell .table-shell tbody tr:nth-child(even) {
  background: #fbfcfd;
}

.app-shell .table-shell tbody tr:hover {
  background: #f3f6fa;
}

.app-shell .status-badge,
.app-shell .subscription-badge,
.app-shell .filter-tab,
.app-shell .pill {
  box-shadow: none;
}

/* Dialogs read as focused workspaces instead of generated showcase cards. */
.modal-overlay {
  background: rgba(13, 25, 39, .52);
  backdrop-filter: blur(4px);
}

.modal-card {
  border-color: #cbd5df;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(8, 22, 39, .24), 0 2px 10px rgba(8, 22, 39, .08);
}

.modal-header {
  min-height: 64px;
  border-bottom-color: #dce3ea;
  background: #ffffff;
}

.modal-header h3 {
  font-weight: 750;
}

.modal-close {
  border-radius: 8px;
  background: #ffffff;
}

.modal-footer {
  border-top-color: #dce3ea;
  background: #f7f8fa;
}

html[data-theme="dark"] .app-shell {
  --human-canvas: #0a131f;
  --human-surface: #101c29;
  --human-surface-subtle: #142231;
  --human-line: #293a4c;
  --human-line-strong: #3a4c60;
  --human-ink: #e8eff7;
  --human-copy: #becbd8;
  --human-muted: #8fa0b2;
  --human-primary: #4c8ee8;
  --human-primary-hover: #6ca5f0;
  --human-focus: rgba(76, 142, 232, .24);
}

html[data-theme="dark"] .app-shell .workspace {
  background: var(--human-canvas);
}

html[data-theme="dark"] .app-shell .sidebar {
  background: #071321;
}

html[data-theme="dark"] .app-shell .nav-item.active {
  background: #17365a;
}

html[data-theme="dark"] .app-shell :where(.topbar, .panel, .metric-card, .table-shell),
html[data-theme="dark"] .app-shell :where(.ghost-button, .topbar-theme-toggle, .topbar-account-btn),
html[data-theme="dark"] .app-shell :where(.field input, .field select, .field textarea, .field-input, .coa-input, .je-field, .line-editor input, .line-editor select) {
  border-color: var(--human-line);
  background: var(--human-surface);
}

html[data-theme="dark"] .app-shell .table-shell thead th {
  background: #142231;
}

html[data-theme="dark"] .app-shell .table-shell tbody tr:nth-child(even) {
  background: #111f2d;
}

html[data-theme="dark"] .app-shell .table-shell tbody tr:hover {
  background: #17293a;
}

html[data-theme="dark"] .modal-header {
  background: #101c29;
}

@media (max-width: 760px) {
  .app-shell .workspace {
    gap: 12px;
    padding: 9px 9px 32px;
  }

  .app-shell .topbar,
  .app-shell .panel,
  .app-shell .metric-card {
    border-radius: 11px;
  }

  .app-shell .topbar {
    padding: 10px 11px;
  }

  .app-shell .panel,
  .app-shell .metric-card {
    padding: 14px;
  }

  .modal-overlay {
    backdrop-filter: blur(3px);
  }

  .modal-card {
    border-radius: 14px 14px 10px 10px;
  }
}

/* ========================================================================
   SETTINGS WORKSPACE — AUGUST 2026
   A focused, responsive control centre shared by every Settings page.
   Presentation only: existing forms, actions and accounting rules are intact.
   ======================================================================== */

/* Settings is a destination of its own. Removing the product-wide sidebar
   prevents two competing navigation systems from crowding the same screen. */
body.bb-app-active.bb-settings-focus .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.bb-app-active.bb-settings-focus .app-shell > .sidebar,
body.bb-app-active.bb-settings-focus .app-shell > .sidebar-backdrop,
body.bb-app-active.bb-settings-focus .sidebar-toggle {
  display: none !important;
}

body.bb-app-active.bb-settings-focus .workspace {
  width: 100%;
  min-width: 0;
  padding-inline: clamp(18px, 2.4vw, 44px);
}

body.bb-app-active.bb-settings-focus .workspace::before {
  inset-inline-start: 0;
}

body.bb-app-active.bb-settings-focus #settings {
  width: 100%;
  max-width: none;
}

body.bb-app-active #settings {
  --stg-canvas: #f3f6fa;
  --stg-surface: #ffffff;
  --stg-surface-soft: #f7f9fc;
  --stg-surface-blue: #f1f6ff;
  --stg-line: #dbe3ed;
  --stg-line-strong: #c7d3e1;
  --stg-ink: #14253b;
  --stg-copy: #40556d;
  --stg-muted: #71839a;
  --stg-blue: #1d63ce;
  --stg-blue-strong: #164fa8;
  --stg-blue-soft: #eaf2ff;
  --stg-green: #0d9f76;
  --stg-shadow-sm: 0 1px 2px rgba(16, 38, 65, .04), 0 8px 24px rgba(16, 38, 65, .055);
  --stg-shadow-lg: 0 18px 50px rgba(16, 38, 65, .09), 0 2px 8px rgba(16, 38, 65, .05);
}

body.bb-app-active #settings .stg-layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1040px);
  align-items: start;
  gap: 22px;
  width: 100%;
  max-width: 1348px;
  margin-inline: auto;
  min-height: 0;
  background: transparent;
}

body.bb-app-active #settings .stg-sidebar {
  position: sticky;
  top: 12px;
  width: 286px;
  max-height: calc(100dvh - 94px);
  overflow: hidden;
  border: 1px solid var(--stg-line);
  border-radius: 17px;
  background: var(--stg-surface);
  box-shadow: var(--stg-shadow-sm);
}

body.bb-app-active #settings .stg-sidebar-header {
  display: block;
  padding: 18px;
  border-bottom: 1px solid var(--stg-line);
  background:
    radial-gradient(circle at 92% 0%, rgba(29, 99, 206, .11), transparent 42%),
    linear-gradient(150deg, #ffffff 0%, #f7faff 100%);
}

body.bb-app-active #settings .stg-sidebar-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.bb-app-active #settings .stg-sidebar-titleblock {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

body.bb-app-active #settings .stg-exit-button {
  display: inline-flex;
  min-width: 62px;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--stg-line-strong);
  border-radius: 9px;
  color: var(--stg-copy);
  background: rgba(255, 255, 255, .86);
  font-family: inherit;
  font-size: 11px;
  font-weight: 720;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(16, 38, 65, .04);
  cursor: pointer;
}

body.bb-app-active #settings .stg-exit-button svg {
  width: 15px;
  height: 15px;
}

body.bb-app-active #settings .stg-exit-button:hover {
  border-color: #9dbce9;
  color: var(--stg-blue);
  background: var(--stg-blue-soft);
}

body.bb-app-active #settings .stg-sidebar-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #bfd3f4;
  border-radius: 11px;
  color: var(--stg-blue);
  background: var(--stg-blue-soft);
}

body.bb-app-active #settings .stg-sidebar-mark svg {
  width: 18px;
  height: 18px;
}

body.bb-app-active #settings .stg-sidebar-kicker {
  color: var(--stg-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

body.bb-app-active #settings .stg-sidebar-title {
  color: var(--stg-ink);
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -.025em;
}

body.bb-app-active #settings .stg-sidebar-copy {
  margin: 13px 0 0;
  color: var(--stg-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

body.bb-app-active #settings .stg-nav {
  padding: 10px;
  scrollbar-color: #c7d3e1 transparent;
  scrollbar-width: thin;
}

body.bb-app-active #settings .stg-nav-group {
  margin: 0;
  padding: 0 0 8px;
}

body.bb-app-active #settings .stg-nav-group + .stg-nav-group {
  padding-top: 7px;
  border-top: 1px solid #edf1f5;
}

body.bb-app-active #settings .stg-nav-group-label {
  padding: 7px 9px 5px;
  color: #8b9aab;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .115em;
}

body.bb-app-active #settings .stg-nav-item {
  position: relative;
  min-height: 42px;
  margin: 1px 0;
  padding: 6px 30px 6px 7px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--stg-copy);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
  box-shadow: none;
}

body.bb-app-active #settings .stg-nav-item::after {
  position: absolute;
  right: 11px;
  content: "›";
  color: #9aabba;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .16s ease, transform .16s ease;
}

body.bb-app-active #settings .stg-nav-item:hover {
  border-color: var(--stg-line);
  color: var(--stg-ink);
  background: var(--stg-surface-soft);
}

body.bb-app-active #settings .stg-nav-item:hover::after,
body.bb-app-active #settings .stg-nav-item.stg-nav-active::after {
  opacity: 1;
  transform: translateX(0);
}

body.bb-app-active #settings .stg-nav-item.stg-nav-active {
  border-color: #c7d9f5;
  color: var(--stg-blue);
  background: linear-gradient(90deg, #eaf2ff 0%, #f4f8ff 100%);
  box-shadow: inset 3px 0 var(--stg-blue);
}

body.bb-app-active #settings .stg-nav-icon {
  width: 30px;
  height: 30px;
  border: 1px solid var(--stg-line);
  border-radius: 9px;
  color: #63768c;
  background: var(--stg-surface);
}

body.bb-app-active #settings .stg-nav-item.stg-nav-active .stg-nav-icon {
  border-color: #bfd3f4;
  color: var(--stg-blue) !important;
  background: #ffffff !important;
}

body.bb-app-active #settings .stg-main {
  width: 100%;
  min-width: 0;
  padding: 0 0 48px;
}

body.bb-app-active #settings .stg-main-toolbar {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 2px 10px;
}

body.bb-app-active #settings .stg-breadcrumb {
  margin: 0;
  color: var(--stg-muted);
  font-size: 11.5px;
}

body.bb-app-active #settings .stg-breadcrumb svg {
  color: var(--stg-blue);
}

body.bb-app-active #settings .stg-breadcrumb-current {
  color: var(--stg-copy);
  font-weight: 680;
}

body.bb-app-active #settings .stg-main-context,
body.bb-app-active #settings .stg-content-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5f7289;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

body.bb-app-active #settings .stg-main-context i,
body.bb-app-active #settings .stg-content-badge i {
  width: 7px;
  height: 7px;
  border: 2px solid #bce9da;
  border-radius: 50%;
  background: var(--stg-green);
  box-shadow: 0 0 0 3px rgba(13, 159, 118, .08);
}

body.bb-app-active #settings .stg-panel {
  width: 100%;
  max-width: 1040px;
  overflow: hidden;
  border: 1px solid var(--stg-line);
  border-radius: 18px;
  background: var(--stg-surface);
  box-shadow: var(--stg-shadow-lg);
}

body.bb-app-active #settings .stg-content-header {
  position: relative;
  min-height: 92px;
  padding: 20px 24px;
  align-items: center;
  border-bottom: 1px solid var(--stg-line);
  background:
    radial-gradient(circle at 93% -40%, rgba(29, 99, 206, .14), transparent 36%),
    linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}

body.bb-app-active #settings .stg-content-icon {
  width: 46px;
  height: 46px;
  border: 1px solid #bfd3f4;
  border-radius: 13px;
  color: var(--stg-blue) !important;
  background: var(--stg-blue-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.bb-app-active #settings .stg-content-icon svg {
  width: 21px;
  height: 21px;
}

body.bb-app-active #settings .stg-content-eyebrow,
body.bb-app-active #settings .stg-avatar-kicker {
  display: block;
  margin: 0 0 3px;
  color: var(--stg-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bb-app-active #settings .stg-content-title {
  margin: 0 0 3px;
  color: var(--stg-ink);
  font-size: 18px;
  font-weight: 790;
  letter-spacing: -.025em;
}

body.bb-app-active #settings .stg-content-desc {
  max-width: 620px;
  color: var(--stg-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

body.bb-app-active #settings .stg-content-badge {
  align-self: flex-start;
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid #d7e2ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
}

body.bb-app-active #settings .stg-form {
  gap: 20px;
  padding: 24px;
  background: #fbfcfe;
}

body.bb-app-active #settings .stg-avatar-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 15px;
  min-height: 86px;
  align-items: center;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid #d6e2f0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 96% -25%, rgba(29, 99, 206, .12), transparent 38%),
    #ffffff;
}

body.bb-app-active #settings .stg-avatar-row .brand-logo-box {
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid #bfd3f4;
  border-radius: 13px;
  background: #f5f9ff;
  box-shadow: 0 3px 10px rgba(29, 99, 206, .08);
}

body.bb-app-active #settings .stg-avatar-row .brand-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.bb-app-active #settings .stg-avatar-label {
  color: var(--stg-ink);
  font-size: 13.5px;
  font-weight: 740;
}

body.bb-app-active #settings .stg-avatar-sub {
  color: var(--stg-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

body.bb-app-active #settings .stg-avatar-action {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--stg-line-strong);
  border-radius: 9px;
  color: var(--stg-blue);
  background: #ffffff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

body.bb-app-active #settings .stg-avatar-action:hover {
  border-color: #9dbce9;
  background: var(--stg-blue-soft);
}

body.bb-app-active #settings :is(.stg-card, .stg-danger-zone) {
  overflow: hidden;
  border: 1px solid var(--stg-line);
  border-radius: 14px;
  background: var(--stg-surface);
  box-shadow: 0 1px 2px rgba(16, 38, 65, .035);
}

body.bb-app-active #settings .stg-card-header {
  min-height: 39px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--stg-line);
  color: #60748a;
  background: #f5f8fb;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .095em;
}

body.bb-app-active #settings .stg-card-body {
  gap: 17px;
  padding: 19px;
}

body.bb-app-active #settings .stg-field-row {
  gap: 17px;
}

body.bb-app-active #settings .stg-field {
  gap: 6px;
}

body.bb-app-active #settings .stg-field label {
  color: #3b5068;
  font-size: 12px;
  font-weight: 700;
}

body.bb-app-active #settings .stg-input {
  min-height: 43px;
  padding: 9px 12px;
  border: 1px solid var(--stg-line-strong);
  border-radius: 9px;
  color: var(--stg-ink);
  background: #ffffff;
  font-size: 13px;
  box-shadow: inset 0 1px 1px rgba(16, 38, 65, .02);
}

body.bb-app-active #settings .stg-input:hover:not(:disabled) {
  border-color: #a9b9cb;
}

body.bb-app-active #settings .stg-input:focus {
  border-color: var(--stg-blue);
  box-shadow: 0 0 0 3px rgba(29, 99, 206, .13);
}

body.bb-app-active #settings .stg-input:disabled {
  color: #75879b;
  background: #f1f4f7;
  cursor: not-allowed;
}

body.bb-app-active #settings .stg-textarea {
  min-height: 86px;
  line-height: 1.5;
}

body.bb-app-active #settings .stg-hint {
  color: var(--stg-muted);
  font-size: 10.75px;
  line-height: 1.45;
}

body.bb-app-active #settings :is(.stg-info-row, .stg-backup-meta, .team-member-row) {
  border-color: var(--stg-line);
  border-radius: 11px;
  background: var(--stg-surface-soft);
}

body.bb-app-active #settings .stg-form-actions {
  position: sticky;
  z-index: 5;
  bottom: 0;
  gap: 9px;
  min-height: 68px;
  padding: 13px 24px;
  border-top: 1px solid var(--stg-line);
  background: rgba(248, 250, 252, .94);
  box-shadow: 0 -10px 24px rgba(16, 38, 65, .045);
  backdrop-filter: blur(12px);
}

body.bb-app-active #settings .stg-form-actions :is(.ghost-button, .primary-button) {
  min-height: 40px;
  padding-inline: 17px;
  border-radius: 9px;
  font-weight: 700;
}

body.bb-app-active #settings .stg-form-actions .primary-button {
  min-width: 132px;
  border-color: var(--stg-blue);
  background: var(--stg-blue);
  box-shadow: 0 5px 12px rgba(29, 99, 206, .18);
}

body.bb-app-active #settings .stg-form-actions .primary-button:hover {
  border-color: var(--stg-blue-strong);
  background: var(--stg-blue-strong);
}

body.bb-app-active #settings :is(.data-table-wrap, .cf-table, .myplan-table) {
  border-color: var(--stg-line);
}

body.bb-app-active #settings :is(.data-table, .cf-table, .myplan-table) th {
  color: #63768c;
  background: #f4f7fa;
}

html[data-theme="dark"] body.bb-app-active #settings {
  --stg-canvas: #0a131f;
  --stg-surface: #101c29;
  --stg-surface-soft: #142332;
  --stg-surface-blue: #142a45;
  --stg-line: #293b4e;
  --stg-line-strong: #3a4e63;
  --stg-ink: #e8eff7;
  --stg-copy: #bdcad8;
  --stg-muted: #8fa1b5;
  --stg-blue: #5a9bf0;
  --stg-blue-strong: #78adf2;
  --stg-blue-soft: #132d4d;
  --stg-shadow-sm: 0 8px 24px rgba(0, 0, 0, .16);
  --stg-shadow-lg: 0 18px 48px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] body.bb-app-active #settings :is(.stg-sidebar, .stg-panel, .stg-card, .stg-danger-zone) {
  background: var(--stg-surface);
  border-color: var(--stg-line);
}

html[data-theme="dark"] body.bb-app-active #settings :is(.stg-sidebar-header, .stg-content-header) {
  border-color: var(--stg-line);
  background: linear-gradient(145deg, #101c29 0%, #132538 100%);
}

html[data-theme="dark"] body.bb-app-active #settings .stg-nav-group + .stg-nav-group {
  border-top-color: #223344;
}

html[data-theme="dark"] body.bb-app-active #settings .stg-nav-item:hover {
  border-color: var(--stg-line);
  background: #152536;
}

html[data-theme="dark"] body.bb-app-active #settings .stg-nav-item.stg-nav-active {
  border-color: #315b8e;
  background: linear-gradient(90deg, #153151 0%, #14283e 100%);
}

html[data-theme="dark"] body.bb-app-active #settings :is(.stg-sidebar-mark, .stg-content-icon, .stg-nav-icon, .stg-nav-item.stg-nav-active .stg-nav-icon) {
  border-color: #315b8e;
  color: var(--stg-blue) !important;
  background: #132d4d !important;
}

html[data-theme="dark"] body.bb-app-active #settings .stg-main-context,
html[data-theme="dark"] body.bb-app-active #settings .stg-content-badge {
  color: var(--stg-muted);
}

html[data-theme="dark"] body.bb-app-active #settings .stg-content-badge {
  border-color: var(--stg-line);
  background: rgba(16, 28, 41, .78);
}

html[data-theme="dark"] body.bb-app-active #settings .stg-form {
  background: #0d1824;
}

html[data-theme="dark"] body.bb-app-active #settings .stg-avatar-row {
  border-color: var(--stg-line);
  background: linear-gradient(145deg, #101c29 0%, #132538 100%);
}

html[data-theme="dark"] body.bb-app-active #settings .stg-avatar-row .brand-logo-box,
html[data-theme="dark"] body.bb-app-active #settings .stg-avatar-action,
html[data-theme="dark"] body.bb-app-active #settings .stg-exit-button,
html[data-theme="dark"] body.bb-app-active #settings .stg-input {
  border-color: var(--stg-line-strong);
  color: var(--stg-ink);
  background: #101c29;
}

html[data-theme="dark"] body.bb-app-active #settings .stg-avatar-action:hover {
  border-color: #4b78ae;
  background: var(--stg-blue-soft);
}

html[data-theme="dark"] body.bb-app-active #settings .stg-card-header,
html[data-theme="dark"] body.bb-app-active #settings :is(.stg-info-row, .stg-backup-meta, .team-member-row) {
  border-color: var(--stg-line);
  color: var(--stg-muted);
  background: var(--stg-surface-soft);
}

html[data-theme="dark"] body.bb-app-active #settings .stg-field label,
html[data-theme="dark"] body.bb-app-active #settings .stg-avatar-label {
  color: var(--stg-copy);
}

html[data-theme="dark"] body.bb-app-active #settings .stg-input:disabled {
  color: #75879b;
  background: #0c1621;
}

html[data-theme="dark"] body.bb-app-active #settings .stg-form-actions {
  border-color: var(--stg-line);
  background: rgba(16, 28, 41, .94);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .12);
}

@media (max-width: 1040px) {
  body.bb-app-active #settings .stg-layout {
    display: block;
  }

  body.bb-app-active #settings .stg-sidebar {
    position: relative;
    top: auto;
    width: 100%;
    max-height: none;
    margin-bottom: 14px;
  }

  body.bb-app-active #settings .stg-sidebar-header {
    padding: 14px 15px;
  }

  body.bb-app-active #settings .stg-sidebar-copy {
    margin: 9px 0 0 50px;
  }

  body.bb-app-active #settings .stg-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 9px 10px 11px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  body.bb-app-active #settings .stg-nav-group {
    display: contents;
  }

  body.bb-app-active #settings .stg-nav-group-label {
    display: none;
  }

  body.bb-app-active #settings .stg-nav-item {
    width: auto;
    min-height: 40px;
    flex: 0 0 auto;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--stg-line);
    background: var(--stg-surface);
    scroll-snap-align: start;
  }

  body.bb-app-active #settings .stg-nav-item::after {
    display: none;
  }

  body.bb-app-active #settings .stg-nav-item.stg-nav-active {
    border-color: var(--stg-blue);
    color: #ffffff;
    background: var(--stg-blue);
    box-shadow: none;
  }

  body.bb-app-active #settings .stg-nav-item.stg-nav-active .stg-nav-icon {
    border-color: rgba(255, 255, 255, .25);
    color: #ffffff !important;
    background: rgba(255, 255, 255, .12) !important;
  }

  body.bb-app-active #settings .stg-main {
    padding-bottom: 30px;
  }

  body.bb-app-active #settings .stg-panel {
    max-width: none;
  }
}

@media (max-width: 600px) {
  body.bb-app-active.bb-settings-focus .workspace {
    padding-inline: 10px !important;
  }

  body.bb-app-active #settings .stg-sidebar {
    border-radius: 14px;
  }

  body.bb-app-active #settings .stg-sidebar-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body.bb-app-active #settings .stg-sidebar-copy {
    display: none;
  }

  body.bb-app-active #settings .stg-exit-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
  }

  body.bb-app-active #settings .stg-exit-button span {
    display: none;
  }

  body.bb-app-active #settings .stg-main-toolbar {
    min-height: 27px;
    margin: 0 1px 8px;
  }

  body.bb-app-active #settings .stg-main-context {
    display: none;
  }

  body.bb-app-active #settings .stg-panel {
    border-radius: 14px;
    box-shadow: var(--stg-shadow-sm);
  }

  body.bb-app-active #settings .stg-content-header {
    min-height: 78px;
    padding: 15px;
    gap: 11px;
  }

  body.bb-app-active #settings .stg-content-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  body.bb-app-active #settings .stg-content-title {
    font-size: 16px;
  }

  body.bb-app-active #settings .stg-content-desc {
    font-size: 11.5px;
  }

  body.bb-app-active #settings .stg-content-badge {
    display: none;
  }

  body.bb-app-active #settings .stg-form {
    gap: 14px;
    padding: 13px;
  }

  body.bb-app-active #settings .stg-avatar-row {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 76px;
    padding: 12px;
  }

  body.bb-app-active #settings .stg-avatar-row .brand-logo-box {
    width: 54px;
    height: 54px;
  }

  body.bb-app-active #settings .stg-avatar-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.bb-app-active #settings .stg-card-body {
    padding: 14px;
  }

  body.bb-app-active #settings .stg-field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.bb-app-active #settings .stg-form-actions {
    bottom: max(68px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    min-height: 66px;
    padding: 11px 13px;
  }

  body.bb-app-active #settings .stg-form-actions :is(.ghost-button, .primary-button) {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
  }

  body.bb-app-active #settings :is(.role-grid, .health-summary) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.bb-app-active #settings .stg-danger-body {
    align-items: stretch;
    flex-direction: column;
  }

  body.bb-app-active #settings .stg-danger-btn {
    width: 100%;
  }
}

/* ── The same navigation on a phone ──────────────────────────────────────────
   styles-responsive.css carries a "Mobile app sidebar" block that paints the
   drawer dark navy below 900px, and it does so with !important on every line
   and without asking which theme is on — it was written when the desktop
   sidebar was dark navy too, so matching it meant hard-coding that colour.
   The desktop navigation is light now, so the phone stopped matching it.

   This answers only the colours, in the same !important terms, and only when
   the theme is not dark. Everything that block sets for the sake of a touch
   screen — the 44px rows, the roomier padding, the larger gaps — is left
   exactly as it is, because those belong to the phone and not to the palette.
   The values below are the desktop ones above, deliberately repeated: two
   !important blocks can only be settled by a third.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar {
    background: #f7f7ff !important;
    border-right: 1px solid #e1e4ef !important;
    color: #20283a !important;
    scrollbar-color: #c8ccda transparent !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar.open {
    box-shadow: 22px 0 55px rgba(31, 42, 68, .16) !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .brand-block {
    background: #f7f7ff !important;
    border-bottom: 1px solid #e3e6f0 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .brand-block .eyebrow {
    color: #798197 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .brand-block h1 {
    color: #172033 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .sidebar-close {
    border: 1px solid #dfe3ee !important;
    background: #ffffff !important;
    color: #566078 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .sidebar-close:hover,
  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .sidebar-close:focus-visible {
    background: #edf2fb !important;
    color: #15233b !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group + .nav-group {
    border-top: 1px solid #e7e9f2 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group-label {
    color: #27344d !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group]:not(.collapsed) > .nav-group-label {
    color: #174f9c !important;
    background: #eaf2ff !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-item,
  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-item.nested {
    border-color: transparent !important;
    background: transparent !important;
    color: #323b52 !important;
    box-shadow: none !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] .nav-item.nested {
    color: #3a4961 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-item svg {
    color: #68738c !important;
    opacity: .92 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-item:hover {
    border-color: #e0e5f2 !important;
    background: #edeffa !important;
    color: #172033 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-item:hover svg {
    color: #2e6fcf !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-item.active,
  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group] .nav-item.nested.active {
    border-color: #4389f5 !important;
    background: #4389f5 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 13px rgba(67, 137, 245, .18) !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-item.active svg {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* The desktop selection is the filled blue row itself, so the green marker
     the phone draws down its left edge would be a second, contradicting one. */
  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-item.active::after {
    display: none !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .nav-group[data-nav-group]:not(.collapsed) {
    border-color: #dce4f0 !important;
    background: rgba(255, 255, 255, .58) !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .sidebar-card,
  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .sidebar-account {
    border: 1px solid #dfe3ee !important;
    background: rgba(255, 255, 255, .72) !important;
    color: #20283a !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .sidebar-account-label {
    color: #737d93 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .sidebar-logout {
    border-color: #e3b8bd !important;
    background: #fff8f8 !important;
    color: #b4232f !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar .sidebar-logout:hover {
    border-color: #df8f98 !important;
    background: #fff0f1 !important;
    color: #971d28 !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar #company-switcher-btn {
    border-color: #b8cdf4 !important;
    background: #edf3ff !important;
    color: #255fae !important;
  }

  html:not([data-theme="dark"]) body.bb-app-active .app-shell .sidebar #company-switcher-btn:hover {
    background: #dfeaff !important;
    color: #1c4f93 !important;
  }
}