.theme-settings {
  position: relative;
  z-index: 140;
}

.theme-settings-trigger {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
  color: var(--soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.theme-settings-trigger:hover,
.theme-settings-trigger[aria-expanded='true'] {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel-solid));
  color: var(--accent);
}

.theme-settings-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  margin: 0;
  width: min(318px, calc(100vw - 28px));
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--panel-solid);
  color: var(--text);
  box-shadow: 0 22px 60px rgba(var(--shadow-rgb), 0.28);
}

.theme-settings-heading strong,
.theme-settings-heading span {
  display: block;
}

.theme-settings-heading strong {
  font-size: 16px;
}

.theme-settings-heading span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.theme-settings-group {
  min-width: 0;
  margin: 13px 0 0;
  padding: 0;
  border: 0;
}

.theme-settings-group legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.theme-settings-options {
  display: grid;
  gap: 7px;
}

.theme-settings-options.is-surface {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-settings-options.is-accent {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-settings-options button {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
  color: var(--soft);
  cursor: pointer;
  font-size: 12px;
}

.theme-settings-options button.is-selected {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, var(--panel-solid));
  color: var(--text);
}

.theme-swatch {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 1px solid rgba(127, 137, 151, 0.35);
  border-radius: 50%;
}

.theme-swatch.is-dark {
  background: #080a0e;
}

.theme-swatch.is-light {
  background: #f7f8fb;
}

.theme-swatch.is-green {
  background: #4f9b69;
}

.theme-swatch.is-blue {
  background: #4f80eb;
}

.theme-swatch.is-orange {
  background: #d28246;
}

/* Homepage uses the same saved preferences as the workspace. */
:root{--panel-solid:var(--panel);--panel-soft:var(--bg);--line-strong:var(--line);--soft:var(--text);--shadow-rgb:0,0,0}
:root[data-accent=blue]{--accent:#9fc5ff}
:root[data-accent=orange]{--accent:#ffc08d}
:root[data-surface=light]{color-scheme:light;--bg:#f7f8f5;--panel:#fff;--line:#d5dbd1;--text:#20271e;--muted:#596353;--accent:#22603a}
:root[data-surface=light][data-accent=blue]{--accent:#1d4ed8}
:root[data-surface=light][data-accent=orange]{--accent:#9a420a}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.home-theme .theme-settings-trigger{min-height:38px;color:var(--text)}
.home-theme .theme-settings-popover{left:auto;right:0;z-index:200;text-align:left;line-height:1.7}
.home-theme .theme-settings-options button.is-selected{box-shadow:inset 0 0 0 1px var(--accent);border-color:var(--accent)}
.nav nav a:hover{color:var(--text)}
.button:hover{background:color-mix(in srgb,var(--accent) 85%,white)}
:root[data-surface=light] .button{color:#fff}
.button.secondary{background:var(--panel);border-color:var(--line);color:var(--text)}
.button.secondary:hover{background:color-mix(in srgb,var(--panel) 92%,var(--accent))}
.web-launch{background:var(--text);border-color:var(--text);color:var(--bg)}
:root[data-surface=light] .web-launch{color:var(--bg)}
.web-launch:hover{background:var(--text);border-color:var(--accent)}
.hero-download small,.brand>span,.text-link,.feature-number,.tags,.workflow-inner p,.workflow-steps small,.account-title>span,.account-grid p,.account-note,.downloads small,.install-note,footer{color:var(--muted)}
.workflow-section{background:color-mix(in srgb,var(--panel) 95%,var(--accent));border-color:var(--line)}
.workflow-inner .text-link,.install-note a,.account-grid li:before,.os-icon{color:var(--accent)}
.workflow-steps b,.workflow-steps>div:not(:last-child):before,.account-title>span{border-color:color-mix(in srgb,var(--line) 65%,var(--accent))}
.account-grid ul,footer .brand{color:var(--text)}
.downloads article{background:var(--panel);border-color:var(--line)}
.account-title .vip-label,.feature-grid h3 em{background:color-mix(in srgb,var(--panel) 88%,var(--accent));color:var(--accent)}
.showcase-switch button{color:var(--muted)}
.showcase-switch button[aria-selected=true]{background:color-mix(in srgb,var(--panel) 90%,var(--accent));color:var(--text);border-color:var(--line)}
/* The sample desktop interface stays dark, matching the client illustration. */
.app-window{color:#f5f6f3}
:root[data-style=minimal] .app-window,:root[data-style=minimal] .web-launch,:root[data-style=minimal] .theme-settings-popover{box-shadow:none}
:root[data-style=minimal] .showcase:before{display:none}
:root[data-style=minimal] .button,:root[data-style=minimal] .account-grid article,:root[data-style=minimal] .downloads article,:root[data-style=minimal] .theme-settings-popover{border-radius:4px}
:root[data-style=minimal] .workflow-section,:root[data-style=minimal] .downloads article{background:var(--bg)}
@media(max-width:1100px){.nav{gap:14px}.nav nav{gap:14px}.brand>span{display:none}}
@media(max-width:600px){.nav-actions{gap:8px}.home-theme .theme-settings-trigger{min-height:34px;padding:0 9px}.home-theme .theme-settings-trigger>span{display:none}.home-theme .theme-settings-popover{width:min(318px,calc(100vw - 32px))}}

.downloads .button,.downloads .button.secondary{background:var(--accent);border-color:var(--accent);color:#192015}.downloads .button:hover,.downloads .button.secondary:hover{background:color-mix(in srgb,var(--accent) 85%,white)}:root[data-surface=light] .downloads .button{color:#fff}