/* Palette only: retain the original layout, typography and semantic colors. */
:root[data-palette="amber"],
:root[data-palette="amber"] body {
    --bg: #131417;
    --surface: #1a1c20;
    --surface-2: #23262c;
    --border: #2c2f37;
    --text: #ececea;
    --text-dim: #a0a3ac;
    --text-muted: #6a6e79;
    --accent: #d99a4e;
    --accent-rgb: 217,154,78;
    --accent-strong: #e6b877;
    --palette-on-accent: #1c1b17;
    --blue: var(--accent);
    --gradient-main: linear-gradient(180deg, var(--accent-strong), #c9883a);
    --gradient-subtle: linear-gradient(180deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.04));
    --gradient-border: linear-gradient(180deg, var(--accent-strong), #c9883a);
    --header-bg: rgba(19,20,23,0.9);
    --overlay-bg: rgba(10,11,13,0.88);
    --nav-bg: rgba(21,23,27,0.98);
    --code-bg: #16181c;
}

:root[data-palette="amber"].light-mode,
:root[data-palette="amber"].light-mode body {
    --bg: #f6f5f1;
    --surface: #fff;
    --surface-2: #efece4;
    --border: #dcd8ce;
    --text: #1c1b17;
    --text-dim: #57544c;
    --text-muted: #8a877c;
    --accent: #a86f16;
    --accent-rgb: 168,111,22;
    --accent-strong: #8a5a10;
    --palette-on-accent: #fff;
    --gradient-main: linear-gradient(180deg, var(--accent-strong), #986313);
    --gradient-border: linear-gradient(180deg, var(--accent-strong), #986313);
    --header-bg: rgba(246,245,241,0.88);
    --overlay-bg: rgba(28,26,20,0.4);
    --nav-bg: rgba(255,255,255,0.97);
    --code-bg: #f1efe8;
    --gradient-subtle: linear-gradient(180deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.03));
}

:root[data-palette="amber"] .logo stop:first-child { stop-color: #e6b877; }
:root[data-palette="amber"] .logo stop:last-child { stop-color: #cf8f3f; }
:root[data-palette="amber"] .logo svg > path { stroke: #1c1b17; }
:root[data-palette="amber"].light-mode .logo-text { color: var(--text); }
:root[data-palette="amber"].light-mode .btn-main { background: var(--text); }

:root[data-palette="amber"] body::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--accent-rgb),0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--accent-rgb),0.06) 0%, transparent 50%);
}
:root[data-palette="amber"].light-mode body::before { display: none; }

:root[data-palette="amber"] .action-btn.primary,
:root[data-palette="amber"] .raw-scan-badge,
:root[data-palette="amber"] .ps-page-title .title-icon,
:root[data-palette="amber"] .my-domains-title .title-icon,
:root[data-palette="amber"] .monitors-title .title-icon,
:root[data-palette="amber"] .step-num,
:root[data-palette="amber"] .domain-card:hover::before,
:root[data-palette="amber"] .toggle-switch input:checked + .toggle-slider {
    background: var(--gradient-main);
}
:root[data-palette="amber"] .loader {
    background: conic-gradient(from 0deg, transparent, var(--accent), var(--accent-strong), transparent);
}
:root[data-palette="amber"] .timeline-progress::after {
    background: var(--accent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb),0.5);
}

:root[data-palette="amber"] .action-btn.primary,
:root[data-palette="amber"] .raw-scan-badge,
:root[data-palette="amber"] .search-prefix,
:root[data-palette="amber"] .step-num,
:root[data-palette="amber"] .billing-opt.active,
:root[data-palette="amber"] .plan-badge,
:root[data-palette="amber"] .ps-page-title .title-icon,
:root[data-palette="amber"] .my-domains-title .title-icon,
:root[data-palette="amber"] .monitors-title .title-icon {
    color: var(--palette-on-accent);
}
:root[data-palette="amber"] .btn-main:hover {
    background: var(--gradient-main);
    color: var(--palette-on-accent);
}

/* These colors identify data/status types rather than the selected palette. */
:root[data-palette="amber"] .role-badge.user,
:root[data-palette="amber"] .tree-icon.registrant,
:root[data-palette="amber"] .hierarchy-icon.registrant,
:root[data-palette="amber"] .toast.info,
:root[data-palette="amber"] .chain-step.initial,
:root[data-palette="amber"] .monitor-type-badge.active,
:root[data-palette="amber"] .event-icon.dns_change,
:root[data-palette="amber"] .api-method-post,
:root[data-palette="amber"] .whois-section {
    --blue: #3b82f6;
}

/* Keep the existing corner tools in place; give the choice a visible name. */
.page-corner-actions { align-items: flex-end; }
.palette-control {
    position: relative;
    display: block;
    width: 108px;
}
.palette-label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-dim);
    font-size: 10px;
    text-align: right;
}
.palette-control select {
    width: 100%;
    min-height: 34px;
    padding: 6px 24px 6px 28px;
    border-radius: 6px;
    background-position: right 9px center;
    font-size: 12px;
}
.palette-control select:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}
.palette-swatch {
    position: absolute;
    left: 10px;
    bottom: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gradient-main);
    pointer-events: none;
}
@media (pointer: coarse) {
    .palette-control select { min-height: 44px; }
    .palette-swatch { bottom: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .palette-control select { transition: none; }
}
