[data-site-theme] { --brand-accent: #86520f; --brand-soft: #fff1d7; --brand-page: #fffaf3; --brand-line: #ead6b5; --brand-ink: #4b3828; }
[data-site-theme="blue"] { --brand-accent: #2459a6; --brand-soft: #e8f1ff; --brand-page: #f5f8ff; --brand-line: #cbdcf5; --brand-ink: #243b58; }
[data-site-theme="jade"] { --brand-accent: #146b58; --brand-soft: #e3f5ed; --brand-page: #f3faf6; --brand-line: #c3e3d5; --brand-ink: #254438; }
[data-site-theme="turquoise"] { --brand-accent: #087984; --brand-soft: #def8f5; --brand-page: #f2fbfb; --brand-line: #bae2e3; --brand-ink: #173e46; }
[data-site-theme="rose"] { --brand-accent: #a1305b; --brand-soft: #fce8ef; --brand-page: #fff7fa; --brand-line: #efcbda; --brand-ink: #533442; }
.brand-wordmark { white-space: normal; overflow-wrap: anywhere; }
.brand-wordmark--text { color: var(--brand-accent); font-weight: 600; letter-spacing: -.045em; }
.site-brand .brand-wordmark--text, .admin-brand .brand-wordmark--text { font-size: 20px; line-height: 1.3; }
.modal-brand .brand-wordmark--text { font-size: 25px; }
.brand-identity-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-width: 0; }
.brand-identity-copy > .brand-wordmark { display: block; line-height: 1.25; }
.brand-identity-copy > strong { display: flex; align-items: center; margin: 0; line-height: 1.25; }
:is(.site-brand, .admin-brand, .modal-brand) .brand-identity-copy > small { margin: 0; line-height: 1.25; }
.admin-brand-mark { width: 42px; height: 42px; padding: 0; }
.site-brand-icon .brand-logo-image, .admin-brand-mark .brand-logo-image { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.modal-brand .site-brand-icon { animation: none; }
.activity-toast.activity-toast--text { grid-template-columns: minmax(0, 1fr) 32px; gap: 7px 12px; }
.activity-toast--text .activity-toast-brand { grid-column: 1; grid-row: 1; display: block; width: auto; height: auto; padding: 3px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; min-width: 0; }
.activity-toast--text .activity-toast-copy { grid-column: 1 / -1; grid-row: 2; }
.activity-toast--text button { grid-column: 2; grid-row: 1; }
.brand-domain-suffix { white-space: nowrap; }
.site-header .site-brand { min-width: 0; max-width: 260px; }
.site-brand > span:last-child, .admin-brand > span:last-child { min-width: 0; }
.site-brand-icon, .admin-brand-mark { flex-shrink: 0; }
.admin-brand { min-width: 0; }
.hero-domain { position: relative; z-index: 1; min-width: 0; max-width: 100%; }
.hero-domain .brand-wordmark { max-width: 100%; }
.site-layout .hero-domain p { display: block; }

/* Gold retains the existing appearance; other palettes share these semantic colors. */
[data-site-theme]:not([data-site-theme="gold"]) { --teal: var(--brand-accent); --line: var(--brand-line); --ink: var(--brand-ink); --muted: #53616b; color: var(--brand-ink); background: var(--brand-page); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.site-header, .site-footer, .admin-sidebar, .admin-topbar, .auth-card, .auth-modal, .welcome-notice) { background: #fff; border-color: var(--brand-line); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.site-brand, .site-brand small, .modal-brand, .modal-brand small, .admin-brand, .admin-brand small, .hero-domain .brand-wordmark, .hero-domain p, .hero-domain p strong, .intro-eyebrow, .intro-card h2, .intro-card h2 span, .intro-columns h3, .eyebrow, .form-kicker, .hero-feature svg) { color: var(--brand-accent) !important; }
[data-site-theme]:not([data-site-theme="gold"]) .brand-domain-suffix { color: #fff; border-color: var(--brand-accent); background: var(--brand-accent); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.primary-button, .hero-side .button, .affiliate-home-link .primary-button) { color: #fff; background: var(--brand-accent); border-color: var(--brand-accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-accent) 18%, transparent); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.primary-button, .hero-side .button, .affiliate-home-link .primary-button):hover { color: #fff; background: color-mix(in srgb, var(--brand-accent) 85%, #000); border-color: var(--brand-accent); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.panel, .product-table-panel, .intro-card, .site-nav, .hero-feature, .site-footer, .steps-grid > div, .feature-tile, .activity-card, .affiliate-home-stats > div, .affiliate-home-link, .auth-tabs) { border-color: var(--brand-line); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.hero-side, .intro-columns > div, .affiliate-home-stats > div, .affiliate-home-link, .guide-card, .admin-sidebar-help, .auth-tabs) { background: var(--brand-page); border-color: var(--brand-line); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.panel-icon, .package-icon, .auth-card-icon, .hero-side-label, .featured-label, .steps-grid > div > span, .affiliate-stat-icon, .admin-brand-mark, .admin-help-icon, .admin-sidebar-link.active, .site-nav-link.active, .site-nav-link:hover, .balance-pill, .guest-locked-icon, .admin-avatar, .auth-tabs a.active) { color: var(--brand-accent); border-color: var(--brand-line); background: var(--brand-soft); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.feature-tile > header, .activity-card > header, .order-balance-card, .balance-card) { background: var(--brand-accent); }
[data-site-theme]:not([data-site-theme="gold"]) .site-nav-link.active::after,
[data-site-theme]:not([data-site-theme="gold"]) .intro-card::before,
[data-site-theme]:not([data-site-theme="gold"]) .home-order-panel::before { background: var(--brand-accent); }
[data-site-theme]:not([data-site-theme="gold"]) .home-order-panel { background: #fff; border-color: var(--brand-line); border-top-color: var(--brand-accent); }
[data-site-theme]:not([data-site-theme="gold"]) :is(th, .home-balance, .welcome-notice-header, .home-order-guest) { background: var(--brand-page); border-color: var(--brand-line); color: var(--brand-ink); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.home-order-heading, .home-order-checkout, .welcome-notice-footer, .product-table td) { border-color: var(--brand-line); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.affiliate-home-stats strong, .home-order-total strong, .home-balance strong, .welcome-notice-icon, .welcome-notice-eyebrow) { color: var(--brand-accent); }
[data-site-theme]:not([data-site-theme="gold"]) :is(.feature-tile > header, .activity-card > header, .order-balance-card, .balance-card) { color: #fff; }
[data-site-theme]:not([data-site-theme="gold"]) :is(.text-input:focus, .input-wrap:focus-within) { border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 18%, transparent); }
.site-header .site-brand:focus-visible, .theme-choice:has(input:focus-visible) { outline: 3px solid var(--brand-accent); outline-offset: 4px; }

.appearance-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 24px; }
.appearance-grid fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.appearance-grid legend { font-size: 12px; font-weight: 500; }
.appearance-other-settings { margin-top: 24px; line-height: 2; }
.brand-css-editor { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--brand-line); }
.brand-css-editor .code-input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.65; tab-size: 2; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.brand-css-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-css-actions .button { width: auto; }
.brand-css-guide { margin-top: 16px; font-size: 12px; line-height: 1.7; }
.brand-css-guide summary { cursor: pointer; font-weight: 500; min-height: 36px; }
.brand-css-guide p { margin: 8px 0 14px; }
.brand-css-guide pre { padding: 14px; border: 1px solid var(--brand-line); border-radius: 10px; background: var(--brand-page); overflow-x: auto; max-width: 100%; white-space: pre; }
.theme-choice { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 12px; border: 1px solid var(--brand-line); border-radius: 10px; cursor: pointer; }
.theme-choice:has(input:checked) { border-color: var(--brand-accent); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-accent); }
.theme-swatch { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: var(--brand-accent); }
.appearance-preview { contain: layout paint; padding: 24px; margin-bottom: 24px; border: 1px solid var(--brand-line); border-radius: 14px; background: var(--brand-page); color: var(--brand-ink); }
.appearance-preview .brand-wordmark { font-size: 23px; color: var(--brand-accent); }
.appearance-preview .brand-domain-suffix { color: #fff; background: var(--brand-accent); border-color: var(--brand-accent); }
.appearance-preview p { margin: 10px 0; line-height: 1.6; overflow-wrap: anywhere; }
.appearance-preview small { display: block; margin-top: 4px; color: var(--brand-ink); }
.appearance-preview .preview-domain { font-weight: 600; color: var(--brand-accent); }
.appearance-preview h3 { font-size: 18px; color: var(--brand-ink); margin-top: 20px; }
.appearance-preview a { display: inline-block; margin-top: 8px; color: var(--brand-accent); text-decoration: underline; }
.appearance-preview [hidden] { display: none !important; }
.appearance-preview-button { display: inline-block; padding: 10px 16px; border-radius: 8px; background: var(--brand-accent); color: #fff; font-size: 12px; }
.appearance-section-note { margin: 0 0 20px; }
.appearance-banner-preview video { display: block; width: 100%; height: 100%; object-fit: contain; background: #063640; }
.appearance-banner-preview [hidden] { display: none !important; }

[data-site-theme="turquoise"].site-layout { background: radial-gradient(ellipse 70% 520px at 90% 0%, #c7f4ed 0%, transparent 76%), linear-gradient(180deg, #f0fbfa, #f8fdfd 900px, #fff); }
[data-site-theme="turquoise"] :is(.site-header, .site-nav, .hero-side, .panel, .activity-card, .feature-tile) { box-shadow: 0 8px 28px #0758650d; }
[data-site-theme="turquoise"] :is(.site-header, .site-footer, .admin-sidebar) { border-color: var(--brand-line); }
[data-site-theme="turquoise"] .campaign-banner { border-color: #47b7b4; background: #053c46; box-shadow: 0 12px 34px #07586522; }
[data-site-theme="turquoise"].site-layout .hero-side { background: radial-gradient(circle at 60% 0%, #c3f3eb, transparent 65%), linear-gradient(145deg, #f4fffc, #e7f8f8); }
[data-site-theme="turquoise"] :is(.home-order-heading h2, .home-order-price strong, .product-card h3, .guide-row, .intro-columns ul, .order-panel-header h2) { color: var(--brand-ink); }
[data-site-theme="turquoise"] :is(.home-order-heading h2 svg, .featured-section .section-heading svg, .order-page-heading h1 svg, .quick-product strong, .product-table .money strong) { color: var(--brand-accent); }
[data-site-theme="turquoise"] :is(.secondary-button, .product-table-action, .quick-product, .guide-row, .preview-product, .wallet-auto-note) { background: var(--brand-page); border-color: var(--brand-line); color: var(--brand-accent); }
[data-site-theme="turquoise"] :is(.secondary-button, .product-table-action):hover { background: var(--brand-soft); border-color: var(--brand-accent); }
[data-site-theme="turquoise"] .quick-product.selected { border-color: var(--brand-accent); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand-accent); }
[data-site-theme="turquoise"] .feature-tile-art { background-image: linear-gradient(90deg, #053c46ed, #053c4633), url('../images/chungsuclq-banner.webp'); background-position: center, center 20%; }
[data-site-theme="turquoise"] .feature-tile-art strong { color: #f0fffd; text-shadow: 0 3px 12px #03363d; }
[data-site-theme="turquoise"] :is(.text-input, .input-wrap) { border-color: var(--brand-line); }
[data-site-theme="turquoise"] .brand-logo-image { border-radius: 14%; }

[data-site-theme="turquoise"] { --admin-gold: var(--brand-accent); }
[data-site-theme="turquoise"] :is(.account-profile-panel, .account-benefit, .daily-commission, .daily-kpi, .admin-quick-links a, .info-box) { background: var(--brand-page); border-color: var(--brand-line); }
[data-site-theme="turquoise"] .account-profile-panel::before { background: var(--brand-accent); }
[data-site-theme="turquoise"] .account-profile-decoration { color: var(--brand-accent); }
[data-site-theme="turquoise"] :is(.account-avatar, .account-small-icon, .account-member-label, .admin-topbar-avatar, .admin-task-icon:not(.green):not(.blue), .admin-quick-icon, .admin-soft-tag, .admin-task-count, .daily-report-mark, .daily-breakdown-heading > span, .stat-icon.amber, .daily-kpi-icon.amber) { color: var(--brand-accent); background: var(--brand-soft); border-color: var(--brand-line); }
[data-site-theme="turquoise"] :is(.account-profile-title h2, .account-info-grid dd, .account-wallet-heading h2, .account-section-heading h2, .account-benefit-copy h2, .admin-breadcrumb strong, .admin-task-text strong, .admin-quick-links strong, .daily-kpi-value, .daily-breakdown-heading h3, .stat-value) { color: var(--brand-ink); }
[data-site-theme="turquoise"] :is(.account-balance, .account-benefit > strong, .account-profile-meta svg, .account-action-links svg, .daily-commission-label, .daily-commission > strong, .admin-eyebrow, .daily-report-eyebrow, .reference, .admin-sidebar-link.active svg, .admin-task-list a:hover, .info-box > svg) { color: var(--brand-accent); }
[data-site-theme="turquoise"] :is(.account-profile-meta, .account-section-heading, .account-info-grid > div, .account-action-links a, .admin-brand-row, .admin-sidebar-bottom, .admin-footer, .admin-task-list a, .daily-report-header, .daily-kpi, .daily-report-notes, .daily-report-table th, .daily-report-table td, .stat-card) { border-color: var(--brand-line); }
[data-site-theme="turquoise"] :is(.account-profile-title p, .account-profile-meta, .account-info-grid dt, .account-wallet-heading p, .account-section-heading p, .account-benefit-copy p, .admin-nav-caption, .admin-sidebar-link svg, .admin-task-text small, .admin-quick-links small, .daily-commission > p, .daily-report-notes, .daily-empty-hint, .daily-kpi-heading, .daily-kpi-description, .daily-status, .admin-profile-text small, .admin-section-heading p, .stat-label, .helper-text, .table-subtitle) { color: #506b73; }
[data-site-theme="turquoise"] :is(.account-action-links a, .admin-site-link, .admin-profile, .admin-sidebar-link) { color: var(--brand-ink) !important; }
[data-site-theme="turquoise"] :is(.account-action-links a, .admin-site-link) { background: var(--brand-page); border-color: var(--brand-line); }
[data-site-theme="turquoise"] :is(.account-action-links a:hover, .admin-site-link:hover, .admin-sidebar-link:hover, .admin-sidebar-link.active, .admin-quick-links a:hover) { color: var(--brand-accent) !important; background: var(--brand-soft); border-color: var(--brand-line); }
[data-site-theme="turquoise"].admin-layout :is(.field > label, td, .daily-report-table td) { color: var(--brand-ink); }
[data-site-theme="turquoise"].admin-layout :is(th, .daily-report-table thead th, .text-input) { background: var(--brand-page); color: var(--brand-ink); border-color: var(--brand-line); }
[data-site-theme="turquoise"].admin-layout :is(.admin-quick-links a, .admin-sidebar-help a, .text-link, .admin-recent-panel a, .admin-logout, .admin-footer, .admin-profile-text small) { color: var(--brand-accent); }
[data-site-theme="turquoise"].admin-layout :is(.admin-page-intro p, .admin-sidebar-help strong, .admin-sidebar-help p, .admin-task-list a, .admin-recent-panel p, .empty-state, .admin-breadcrumb, .admin-overview-note, .daily-report-title p strong) { color: #506b73; }
@media (max-width: 480px) { .site-header .site-brand { max-width: calc(100% - 115px); }.appearance-theme-options { grid-template-columns: 1fr; }.appearance-preview { padding: 18px; } }