:root[data-ui-theme="vbz-classic"] {
  --ui-nav-start: #24377e;
  --ui-nav-end: #1b285c;
  --ui-nav-text: #dce4ff;
  --ui-nav-muted: #aebbe7;
  --ui-nav-icon: #91a7ef;
  --ui-nav-active-start: rgba(8, 164, 223, .52);
  --ui-nav-active-end: rgba(8, 164, 223, .18);
  --ui-nav-focus: #08a4df;
  --ui-nav-active-text: #ffffff;
}

:root[data-ui-theme="ki-petrol"] {
  --ui-nav-start: #155565;
  --ui-nav-end: #083b47;
  --ui-nav-text: #ffffff;
  --ui-nav-muted: #c2dfe3;
  --ui-nav-icon: #2bc4b6;
  --ui-nav-active-start: #2bc4b6;
  --ui-nav-active-end: #168f87;
  --ui-nav-focus: #2bc4b6;
  --ui-nav-active-text: #ffffff;
}

:root[data-ui-theme="office-light"] {
  --ui-nav-start: #f3f0e8;
  --ui-nav-end: #dfd8ca;
  --ui-nav-text: #14273c;
  --ui-nav-muted: #526276;
  --ui-nav-icon: #215ca8;
  --ui-nav-active-start: #215ca8;
  --ui-nav-active-end: #17467f;
  --ui-nav-focus: #215ca8;
  --ui-nav-active-text: #ffffff;
}

:root[data-ui-theme="graphite"] {
  --ui-nav-start: #46515d;
  --ui-nav-end: #29323a;
  --ui-nav-text: #f1f5f7;
  --ui-nav-muted: #c4cdd3;
  --ui-nav-icon: #8bdcf5;
  --ui-nav-active-start: rgba(8, 164, 223, .64);
  --ui-nav-active-end: rgba(8, 164, 223, .22);
  --ui-nav-focus: #08a4df;
  --ui-nav-active-text: #ffffff;
}

:root[data-ui-theme="high-contrast"] {
  --ui-nav-start: #10263c;
  --ui-nav-end: #050d16;
  --ui-nav-text: #ffffff;
  --ui-nav-muted: #dce5ee;
  --ui-nav-icon: #f4bd27;
  --ui-nav-active-start: #f4bd27;
  --ui-nav-active-end: #d99a00;
  --ui-nav-focus: #f4bd27;
  --ui-nav-active-text: #101820;
}

:root[data-ui-theme] .sidebar,
:root[data-ui-theme] .ki-interface .ki-sidebar {
  color: var(--ui-nav-text);
  border-right-color: color-mix(in srgb, var(--ui-nav-text) 15%, transparent);
  background:
    radial-gradient(circle at 10% 0, color-mix(in srgb, var(--ui-nav-focus) 22%, transparent), transparent 22rem),
    linear-gradient(180deg, var(--ui-nav-start), var(--ui-nav-end));
  box-shadow: 8px 0 26px color-mix(in srgb, var(--ui-nav-end) 16%, transparent);
}

:root[data-ui-theme] .sidebar .nav-item,
:root[data-ui-theme] .ki-sidebar .nav-item,
:root[data-ui-theme] .ki-sidebar .ki-module-item,
:root[data-ui-theme] .ki-sidebar .ki-nav-group > summary {
  color: var(--ui-nav-text);
}

:root[data-ui-theme] .sidebar .nav-item span,
:root[data-ui-theme] .ki-sidebar .nav-item span,
:root[data-ui-theme] .ki-sidebar .ki-module-item span,
:root[data-ui-theme] .ki-sidebar .ki-brand-card span {
  color: var(--ui-nav-icon);
}

:root[data-ui-theme] .ki-sidebar .ki-nav-group > summary > span {
  color: var(--ki-nav-section-accent);
}

:root[data-ui-theme] .sidebar .nav-item.active,
:root[data-ui-theme] .ki-sidebar .nav-item.active,
:root[data-ui-theme] .ki-sidebar .ki-module-item.active {
  color: var(--ui-nav-active-text);
  background: linear-gradient(90deg, var(--ui-nav-active-start), var(--ui-nav-active-end));
  box-shadow: inset 3px 0 0 var(--ui-nav-focus);
}

:root[data-ui-theme] .sidebar-footer,
:root[data-ui-theme] .ki-sidebar-footer {
  color: var(--ui-nav-text);
  border-top-color: color-mix(in srgb, var(--ui-nav-text) 16%, transparent);
  background: color-mix(in srgb, var(--ui-nav-end) 28%, transparent);
}

:root[data-ui-theme] .sidebar-footer span,
:root[data-ui-theme] .ki-sidebar-footer small {
  color: var(--ui-nav-muted);
}

:root[data-ui-theme="office-light"] .ki-brand-card strong,
:root[data-ui-theme="office-light"] .ki-system-state strong,
:root[data-ui-theme="office-light"] .sidebar-footer strong {
  color: #17384a;
}

:root[data-ui-theme="office-light"] .ki-sidebar-collapse,
:root[data-ui-theme="office-light"] .ki-nav-search > div {
  color: #17384a;
  border-color: rgba(23, 56, 74, .18);
  background: rgba(255, 255, 255, .52);
}

.ui-theme-settings-card {
  overflow: hidden;
  border-color: #d6e1e8;
  box-shadow: 0 16px 42px rgba(30, 55, 72, .08);
}
.ui-theme-settings-intro {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(110deg, #f8fbfd, #eef8fc);
}
.ui-theme-settings-intro strong,
.ui-theme-settings-intro span { display: block; }
.ui-theme-settings-intro strong { color: #233b4c; font-size: 13px; }
.ui-theme-settings-intro span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.ui-theme-grid {
  padding: 17px 18px;
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 11px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.ui-theme-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 15px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ui-theme-card:hover { transform: translateY(-2px); border-color: #93a9b8; box-shadow: 0 9px 22px rgba(38, 58, 74, .09); }
.ui-theme-card.selected { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(47, 69, 159, .13); }
.ui-theme-card-preview {
  height: 88px;
  display: grid;
  grid-template-columns: 34% 1fr;
  border-bottom: 1px solid #e4e9ed;
  background: #f1f5f7;
}
.ui-theme-card-preview > i {
  padding: 11px 8px;
  display: grid;
  align-content: start;
  gap: 8px;
  background: linear-gradient(180deg, var(--theme-start), var(--theme-end));
}
.ui-theme-card-preview > i::before,
.ui-theme-card-preview > i::after {
  content: "";
  height: 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--theme-text) 74%, transparent);
}
.ui-theme-card-preview > i::after { height: 20px; margin-top: 4px; border-left: 3px solid var(--theme-text); background: var(--theme-accent); }
.ui-theme-card-preview > span {
  padding: 13px 9px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 8px;
}
.ui-theme-card-preview > span::before,
.ui-theme-card-preview > span::after {
  content: "";
  height: 27px;
  border: 1px solid #dfe6eb;
  border-radius: 7px;
  background: #fff;
}
.ui-theme-card-copy {
  min-height: 92px;
  padding: 11px 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-content: start;
}
.ui-theme-card-copy strong { color: #1d3444; font-size: 12px; }
.ui-theme-card-copy small { font-size: 9px; }
.ui-theme-card-copy small { grid-column: 1 / -1; color: var(--muted); line-height: 1.45; }
.ui-theme-card-copy b {
  padding: 3px 6px;
  align-self: start;
  color: #31556a;
  border-radius: 999px;
  background: #eaf5f9;
  font-size: 8px;
  white-space: nowrap;
}

.ui-theme-editor-layout {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(390px, 1.1fr);
  gap: 18px;
  align-items: start;
  background: #fff;
}
.ui-theme-large-preview {
  overflow: hidden;
  min-height: 390px;
  border: 1px solid #d6e0e6;
  border-radius: 16px;
  background: #f3f6f8;
  box-shadow: 0 12px 26px rgba(35, 55, 68, .10);
}
.ui-theme-large-preview > header {
  height: 48px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #32495a;
  border-bottom: 1px solid #dce4e9;
  background: #fff;
}
.ui-theme-large-preview > header > span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--theme-accent);
}
.ui-theme-large-preview > header > b { font-size: 12px; }
.ui-theme-large-preview > header > i {
  width: 70px;
  height: 10px;
  margin-left: auto;
  border-radius: 999px;
  background: #e4e9ed;
}
.ui-theme-large-preview > div {
  min-height: 342px;
  display: grid;
  grid-template-columns: 31% 1fr;
}
.ui-theme-large-preview aside {
  padding: 20px 13px;
  display: grid;
  align-content: start;
  gap: 10px;
  color: var(--theme-text);
  background: linear-gradient(180deg, var(--theme-start), var(--theme-end));
}
.ui-theme-large-preview aside strong {
  margin-bottom: 13px;
  color: var(--theme-text);
  font-size: 18px;
}
.ui-theme-large-preview aside span {
  height: 30px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--theme-text) 17%, transparent);
}
.ui-theme-large-preview aside span.active {
  border-left: 4px solid var(--theme-text);
  background: var(--theme-accent);
}
.ui-theme-large-preview main {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 11px;
}
.ui-theme-large-preview main > b {
  grid-column: 1 / -1;
  width: 56%;
  height: 15px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: #cdd7dd;
}
.ui-theme-large-preview main > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ui-theme-large-preview main > div i,
.ui-theme-large-preview main > section {
  height: 62px;
  border: 1px solid #dce4e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(36, 54, 66, .05);
}
.ui-theme-large-preview main > div i:first-child {
  border-top: 4px solid var(--theme-accent);
}
.ui-theme-large-preview main > section { height: 130px; }
.ui-theme-editor {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dae3e8;
  border-radius: 15px;
  background: #fbfcfd;
}
.ui-theme-editor-heading {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ui-theme-editor-heading span,
.ui-theme-editor-heading strong { display: block; }
.ui-theme-editor-heading span { color: #708190; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ui-theme-editor-heading strong { margin-top: 2px; color: #183448; font-size: 15px; }
.ui-theme-editor-heading em {
  padding: 5px 8px;
  color: #34566a;
  border-radius: 999px;
  background: #e7f2f6;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.ui-theme-color-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ui-theme-color-grid > label {
  padding: 10px;
  display: grid;
  gap: 7px;
  border: 1px solid #dce4e9;
  border-radius: 11px;
  background: #fff;
}
.ui-theme-color-grid > label > span {
  color: #536a79;
  font-size: 10px;
  font-weight: 800;
}
.ui-theme-color-grid > label > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
}
.ui-theme-color-grid input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 2px;
  border: 1px solid #cfd9df;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.ui-theme-color-grid input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #cfd9df;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
}
.ui-theme-color-grid input.invalid { border-color: #d84051; background: #fff3f4; }
.ui-theme-editor-note {
  margin-top: 12px;
  padding: 9px 11px;
  color: #4c6575;
  border-radius: 9px;
  background: #eaf4f8;
  font-size: 10px;
  line-height: 1.45;
}
.ui-theme-editor-note.is-dirty { color: #774b0a; background: #fff4d8; }
.ui-theme-editor-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 8px;
  align-items: center;
}
.ui-theme-editor-actions .button { white-space: nowrap; }
.ui-theme-editor-actions .button:disabled { opacity: .48; cursor: not-allowed; }
.ui-theme-editor-actions [hidden] { display: none !important; }

@media (max-width: 1180px) {
  .ui-theme-editor-layout { grid-template-columns: 1fr; }
  .ui-theme-large-preview { min-height: 330px; }
}

@media (max-width: 1350px) {
  .ui-theme-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
}
@media (max-width: 850px) {
  .ui-theme-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}
@media (max-width: 620px) {
  .ui-theme-settings-intro { align-items: flex-start; flex-direction: column; }
  .ui-theme-grid { grid-template-columns: 1fr; padding: 12px; }
  .ui-theme-editor-layout { padding: 12px; }
  .ui-theme-editor { padding: 12px; }
  .ui-theme-color-grid { grid-template-columns: 1fr; }
  .ui-theme-editor-actions { grid-template-columns: 1fr; }
  .ui-theme-editor-actions > span { display: none; }
  .ui-theme-editor-actions .button { width: 100%; }
}

/* Additional personal pink, rose and berry palettes. Business status colors stay fixed. */
:root[data-ui-palette="pink-clear"] { --theme-primary:#9d175c; --theme-primary-dark:#761144; --theme-accent:#bb246f; --theme-canvas:#fff2f8; --theme-ink:#321b2b; --theme-muted:#725769; --theme-line:#ead6e2; }
:root[data-ui-palette="pink-pastel"] { --theme-primary:#a51d68; --theme-primary-dark:#7c154e; --theme-accent:#b21a68; --theme-canvas:#fff7fb; --theme-ink:#321b2b; --theme-muted:#735869; --theme-line:#ecd8e4; }
:root[data-ui-palette="rose-warm"] { --theme-primary:#914155; --theme-primary-dark:#6e3040; --theme-accent:#a34b5f; --theme-canvas:#fff8f5; --theme-ink:#35232b; --theme-muted:#705b63; --theme-line:#e8d8d7; }
:root[data-ui-palette="berry-elegant"] { --theme-primary:#78385f; --theme-primary-dark:#542744; --theme-accent:#92517c; --theme-canvas:#fbf3f9; --theme-ink:#332333; --theme-muted:#6e596b; --theme-line:#e5d5e1; }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) { --brand-blue:var(--theme-primary); --brand-blue-dark:var(--theme-primary-dark); --brand-cyan:var(--theme-accent); --brand-cyan-soft:color-mix(in srgb,var(--theme-accent) 9%,white); --canvas:var(--theme-canvas); --ink:var(--theme-ink); --muted:var(--theme-muted); --line:var(--theme-line); --ki-blue-700:var(--theme-primary); --ki-blue-600:var(--theme-primary); --ki-cyan-600:var(--theme-accent); --ki-cyan-100:var(--brand-cyan-soft); --ki-ink:var(--theme-ink); --ki-muted:var(--theme-muted); --ki-line:var(--theme-line); --ki-canvas:var(--theme-canvas); --ki-surface-soft:var(--theme-canvas); }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) body.ki-interface { background:radial-gradient(circle at 88% 0,color-mix(in srgb,var(--theme-accent) 7%,transparent),transparent 28rem),var(--theme-canvas); }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-interface .ki-topbar { background:linear-gradient(110deg,#fff,var(--theme-canvas)); }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-interface .button.primary { color:#fff; border-color:var(--theme-primary-dark); background:linear-gradient(135deg,var(--theme-primary),var(--theme-primary-dark)); }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-interface :focus-visible { outline-color:var(--theme-primary); }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .ki-brand-card strong,
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .ki-system-state strong,
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .sidebar-footer strong { color:var(--ui-nav-text); }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .ki-nav-search > div,
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .ki-sidebar-collapse { color:var(--ui-nav-text); border-color:color-mix(in srgb,var(--ui-nav-text) 25%,transparent); background:color-mix(in srgb,var(--ui-nav-start) 78%,transparent); }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .nav-item.active,
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .ki-module-item.active { background:var(--ui-nav-active-start); color:var(--ui-nav-active-text); }
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .nav-item.active span,
:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-sidebar .ki-module-item.active span { color:var(--ui-nav-active-text); }

:root:is([data-ui-palette="pink-clear"],[data-ui-palette="pink-pastel"],[data-ui-palette="rose-warm"],[data-ui-palette="berry-elegant"]) .ki-interface .settings-tab.active[data-settings-target] { color:#fff; border-color:var(--theme-primary-dark); background:linear-gradient(135deg,var(--theme-primary),var(--theme-primary-dark)); }