/* ====================================================
   HEALTHSYNC THEME SYSTEM v2
   Two independent axes:
     data-base="dark"  (default) | "light"
     data-colorblind="true"      (optional overlay)
   ==================================================== */


/* ------------------------------------------------
   BASE: DARK
   ------------------------------------------------ */
:root,
[data-base="dark"] {
  --th-bg1: #7fd3de;
  --th-bg2: #2b7c8a;
  --th-bg3: #0f3a44;
  --th-panel:          #23646d;
  --th-card:           rgba(36, 94, 108, 0.85);
  --th-border:         rgba(255, 255, 255, 0.75);
  --th-border-subtle:  rgba(255, 255, 255, 0.22);
  --th-text:           #ffffff;
  --th-muted:          rgba(255, 255, 255, 0.75);
  --th-placeholder:    rgba(255, 255, 255, 0.45);
  --th-field-bg:       rgba(255, 255, 255, 0.10);
  --th-field-border:   #ffffff;
  --th-field-text:     #ffffff;
  --th-option-bg:      #245e6c;
  --th-btn-bg:         rgba(20, 22, 22, 0.92);
  --th-btn-text:       #ffffff;
  --th-btn-border:     rgba(255, 255, 255, 0.5);
  --th-btn-hover:      rgba(40, 44, 44, 0.95);
  --th-accent:         #4ecdc4;
  --th-accent-hover:   #6adbd3;
  --th-scale-bg:       #1f5663;
  --th-summary-bg:     rgba(12, 47, 55, 0.92);
  --th-summary-tag:    rgba(255, 255, 255, 0.92);
  --th-summary-tag-text: #111111;
  --th-callout-bg:     rgba(255, 107, 107, 0.10);
  --th-callout-border: rgba(255, 255, 255, 0.22);
  --th-callout-text:   #ffe7e7;
  --th-overlay-bg:     rgba(0, 0, 0, 0.55);
  --th-overlay-card:   #0b2c36;
  --th-shadow:         0 20px 60px rgba(30, 84, 98, 0.92);
  --th-body-gradient:        linear-gradient(135deg, #7fd3de 0%, #2b7c8a 55%, #0f3a44 100%);
  --th-body-gradient-simple: linear-gradient(180deg, #7fd3de 0%, #3b8c99 100%);
  --th-consent-card:         rgba(30, 84, 98, 0.92);
  --th-emergency-bg:         rgba(180, 40, 40, 0.18);
  --th-emergency-border:     #e07070;
  --th-emergency-title:      #ffaaaa;
  --th-emergency-text:       #ffd4d4;
  --tw-panel-bg:    rgba(15, 40, 55, 0.96);
  --tw-panel-border:rgba(255, 255, 255, 0.18);
  --tw-label-color: rgba(255, 255, 255, 0.45);
  --tw-label-rule:  rgba(255, 255, 255, 0.10);
  --tw-opt-color:   rgba(255, 255, 255, 0.80);
  --tw-opt-active-color: #0f3a44;
  --tw-opt-active-bg:    rgba(255, 255, 255, 0.10);
  --tw-opt-active-border:rgba(255, 255, 255, 0.40);
  --tw-opt-hover-bg:     rgba(255, 255, 255, 0.07);
  --tw-btn-bg:      rgba(30, 60, 80, 0.88);
  --tw-btn-border:  rgba(255, 255, 255, 0.45);
  --tw-btn-color:   #ffffff;
  --tw-track-off:   rgba(255,255,255,0.22);
  --tw-track-on:    #4ecdc4;
  --tw-thumb:       #ffffff;
}

/* ------------------------------------------------
   BASE: LIGHT
   ------------------------------------------------ */
[data-base="light"] {
  --th-bg1: #e0f7fa;
  --th-bg2: #b2ebf2;
  --th-bg3: #80deea;
  --th-panel:          #ffffff;
  --th-card:           rgba(255, 255, 255, 0.97);
  --th-border:         rgba(0, 100, 120, 0.35);
  --th-border-subtle:  rgba(0, 100, 120, 0.18);
  --th-text:           #0d3940;
  --th-muted:          #3a7080;
  --th-placeholder:    #7aacb5;
  --th-field-bg:       #f4fafb;
  --th-field-border:   #7ecad4;
  --th-field-text:     #0d3940;
  --th-option-bg:      #e0f7fa;
  --th-btn-bg:         #0d3940;
  --th-btn-text:       #ffffff;
  --th-btn-border:     rgba(0, 100, 120, 0.30);
  --th-btn-hover:      #1a5060;
  --th-accent:         #0097a7;
  --th-accent-hover:   #00838f;
  --th-scale-bg:       #d7f0f4;
  --th-summary-bg:     #e6f6f9;
  --th-summary-tag:    rgba(13, 57, 64, 0.12);
  --th-summary-tag-text: #0d3940;
  --th-callout-bg:     rgba(0, 114, 178, 0.08);
  --th-callout-border: rgba(0, 114, 178, 0.35);
  --th-callout-text:   #003d6b;
  --th-overlay-bg:     rgba(0, 0, 0, 0.35);
  --th-overlay-card:   #ffffff;
  --th-shadow:         0 20px 60px rgba(0, 60, 80, 0.12);
  --th-body-gradient:        linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 55%, #80deea 100%);
  --th-body-gradient-simple: linear-gradient(180deg, #b2ebf2 0%, #80deea 100%);
  --th-consent-card:         rgba(255, 255, 255, 0.97);
  --th-emergency-bg:         #fff4f4;
  --th-emergency-border:     #d9534f;
  --th-emergency-title:      #b02a2a;
  --th-emergency-text:       #5a1f1f;
  --tw-panel-bg:    rgba(255, 255, 255, 0.98);
  --tw-panel-border:rgba(0, 100, 120, 0.22);
  --tw-label-color: rgba(0, 50, 70, 0.45);
  --tw-label-rule:  rgba(0, 100, 120, 0.12);
  --tw-opt-color:   rgba(0, 50, 70, 0.80);
  --tw-opt-active-color: #0d3940;
  --tw-opt-active-bg:    rgba(0, 100, 120, 0.08);
  --tw-opt-active-border:rgba(0, 100, 120, 0.38);
  --tw-opt-hover-bg:     rgba(0, 100, 120, 0.06);
  --tw-btn-bg:      rgba(255, 255, 255, 0.92);
  --tw-btn-border:  rgba(0, 100, 120, 0.40);
  --tw-btn-color:   #0d3940;
  --tw-track-off:   rgba(0, 100, 120, 0.22);
  --tw-track-on:    #0097a7;
  --tw-thumb:       #ffffff;
}

/* ------------------------------------------------
   COLORBLIND OVERLAY: DARK BASE
   Navy / amber / sky-blue — deuteranopia/protanopia safe
   ------------------------------------------------ */
[data-colorblind="true"],
[data-base="dark"][data-colorblind="true"] {
  --th-bg1: #1a1a2e;
  --th-bg2: #16213e;
  --th-bg3: #0f3460;
  --th-panel:          #1e2a4a;
  --th-card:           rgba(30, 42, 74, 0.95);
  --th-border:         #e8b84b;
  --th-border-subtle:  rgba(232, 184, 75, 0.40);
  --th-text:           #f0e6d3;
  --th-muted:          #c4a96e;
  --th-placeholder:    rgba(196, 169, 110, 0.55);
  --th-field-bg:       rgba(232, 184, 75, 0.07);
  --th-field-border:   #e8b84b;
  --th-field-text:     #f0e6d3;
  --th-option-bg:      #16213e;
  --th-btn-bg:         #e8b84b;
  --th-btn-text:       #0f1a30;
  --th-btn-border:     #e8b84b;
  --th-btn-hover:      #f0c95c;
  --th-accent:         #56b4e9;
  --th-accent-hover:   #72c4f5;
  --th-scale-bg:       #12193a;
  --th-summary-bg:     rgba(10, 15, 35, 0.95);
  --th-summary-tag:    #e8b84b;
  --th-summary-tag-text: #0f1a30;
  --th-callout-bg:     rgba(86, 180, 233, 0.12);
  --th-callout-border: rgba(86, 180, 233, 0.45);
  --th-callout-text:   #a8d8f0;
  --th-overlay-bg:     rgba(0, 0, 0, 0.70);
  --th-overlay-card:   #1a1a2e;
  --th-shadow:         0 20px 60px rgba(0, 0, 0, 0.60);
  --th-body-gradient:        linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
  --th-body-gradient-simple: linear-gradient(180deg, #1a1a2e 0%, #0f3460 100%);
  --th-consent-card:         rgba(30, 42, 74, 0.97);
  --th-emergency-bg:         rgba(86, 180, 233, 0.12);
  --th-emergency-border:     #56b4e9;
  --th-emergency-title:      #a8d8f0;
  --th-emergency-text:       #c8e8f8;
  --tw-panel-bg:    rgba(26, 26, 46, 0.98);
  --tw-panel-border:#e8b84b;
  --tw-label-color: rgba(196, 169, 110, 0.65);
  --tw-label-rule:  rgba(232, 184, 75, 0.25);
  --tw-opt-color:   rgba(196, 169, 110, 0.90);
  --tw-opt-active-color: #f0e6d3;
  --tw-opt-active-bg:    rgba(232, 184, 75, 0.12);
  --tw-opt-active-border:#e8b84b;
  --tw-opt-hover-bg:     rgba(232, 184, 75, 0.07);
  --tw-btn-bg:      #1e2a4a;
  --tw-btn-border:  #e8b84b;
  --tw-btn-color:   #f0e6d3;
  --tw-track-off:   rgba(232, 184, 75, 0.25);
  --tw-track-on:    #e8b84b;
  --tw-thumb:       #0f1a30;
}

/* ------------------------------------------------
   COLORBLIND OVERLAY: LIGHT BASE
   Warm cream / amber / cobalt-blue
   ------------------------------------------------ */
[data-base="light"][data-colorblind="true"] {
  --th-bg1: #fdf6e3;
  --th-bg2: #f5e6c0;
  --th-bg3: #e8d09a;
  --th-panel:          #ffffff;
  --th-card:           rgba(255, 252, 240, 0.98);
  --th-border:         #c17f00;
  --th-border-subtle:  rgba(193, 127, 0, 0.35);
  --th-text:           #1a1200;
  --th-muted:          #5c3d00;
  --th-placeholder:    rgba(92, 61, 0, 0.50);
  --th-field-bg:       #fffdf0;
  --th-field-border:   #c17f00;
  --th-field-text:     #1a1200;
  --th-option-bg:      #fdf6e3;
  --th-btn-bg:         #1a1200;
  --th-btn-text:       #fdf6e3;
  --th-btn-border:     #c17f00;
  --th-btn-hover:      #2e2100;
  --th-accent:         #0072b2;
  --th-accent-hover:   #005a8e;
  --th-scale-bg:       #fef3cc;
  --th-summary-bg:     #fff8e1;
  --th-summary-tag:    rgba(193, 127, 0, 0.15);
  --th-summary-tag-text: #1a1200;
  --th-callout-bg:     #fff3e0;
  --th-callout-border: rgba(200, 100, 0, 0.25);
  --th-callout-text:   #7a3800;
  --th-overlay-bg:     rgba(0, 0, 0, 0.40);
  --th-overlay-card:   #ffffff;
  --th-shadow:         0 20px 60px rgba(80, 50, 0, 0.14);
  --th-body-gradient:        linear-gradient(135deg, #fdf6e3 0%, #f5e6c0 55%, #e8d09a 100%);
  --th-body-gradient-simple: linear-gradient(180deg, #fdf6e3 0%, #e8d09a 100%);
  --th-consent-card:         rgba(255, 252, 240, 0.98);
  --th-emergency-bg:         rgba(0, 114, 178, 0.08);
  --th-emergency-border:     #0072b2;
  --th-emergency-title:      #003d6b;
  --th-emergency-text:       #003d6b;
  --tw-panel-bg:    rgba(255, 252, 240, 0.99);
  --tw-panel-border:#c17f00;
  --tw-label-color: rgba(92, 61, 0, 0.55);
  --tw-label-rule:  rgba(193, 127, 0, 0.20);
  --tw-opt-color:   rgba(26, 18, 0, 0.80);
  --tw-opt-active-color: #1a1200;
  --tw-opt-active-bg:    rgba(193, 127, 0, 0.10);
  --tw-opt-active-border:#c17f00;
  --tw-opt-hover-bg:     rgba(193, 127, 0, 0.06);
  --tw-btn-bg:      rgba(255, 252, 240, 0.95);
  --tw-btn-border:  #c17f00;
  --tw-btn-color:   #1a1200;
  --tw-track-off:   rgba(193, 127, 0, 0.25);
  --tw-track-on:    #c17f00;
  --tw-thumb:       #fdf6e3;
}


/* ====================================================
   SHARED THEME OVERRIDES
   ==================================================== */

body {
  background: var(--th-body-gradient) !important;
  background-attachment: fixed !important;
  color: var(--th-text) !important;
}

.form-container, .container, .review-container {
  background: var(--th-panel) !important;
  box-shadow: var(--th-shadow) !important;
  color: var(--th-text) !important;
}

.card { background: var(--th-card) !important; color: var(--th-text) !important; }

fieldset {
  background: var(--th-card) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

legend { color: var(--th-text) !important; }
:is(label, h1, h2, h3, p, span):not(#theme-toggle-widget *) { color: var(--th-text); }

/* Explicitly protect all widget text from page-level theme overrides */
#theme-toggle-widget,
#theme-toggle-widget * {
  color: revert;
  background: revert;
  border-color: revert;
}
#theme-panel            { background: var(--tw-panel-bg) !important; border-color: var(--tw-panel-border) !important; }
.tw-section-label       { color: var(--tw-label-color) !important; }
.tw-mode-label          { color: var(--tw-opt-color) !important; }
.tw-pill-track          { background: var(--tw-track-off) !important; }
.tw-pill-option         { color: var(--tw-opt-color) !important; background: transparent !important; border: none !important;
                          display: flex !important; width: auto !important; flex: 1 !important;
                          margin-top: 0 !important; padding: 6px 0 !important;
                          border-radius: 999px !important; font-size: 12px !important; }
.tw-pill-option.active  { background: var(--tw-thumb) !important; color: var(--tw-opt-active-color) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.20) !important; }
.tw-cb-name             { color: var(--tw-opt-color) !important; }
.tw-cb-desc             { color: var(--tw-label-color) !important; }
.tw-switch-track        { background: var(--tw-track-off) !important; }
.tw-switch input:checked ~ .tw-switch-track { background: var(--tw-track-on) !important; }
.tw-switch-thumb        { background: var(--tw-thumb) !important; }
#theme-toggle-btn       { background: var(--tw-btn-bg) !important; border-color: var(--tw-btn-border) !important; color: var(--tw-btn-color) !important; }

input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
select, textarea {
  background: var(--th-field-bg) !important;
  border-color: var(--th-field-border) !important;
  color: var(--th-field-text) !important;
}

input::placeholder, textarea::placeholder { color: var(--th-placeholder) !important; }
select option { background: var(--th-option-bg) !important; color: var(--th-text) !important; }

.phone-prefix {
  background: var(--th-field-bg) !important;
  border-color: var(--th-field-border) !important;
  color: var(--th-field-text) !important;
}

.review-section { background: var(--th-card) !important; border-color: var(--th-border) !important; }
.review-header  { border-bottom-color: var(--th-border) !important; }
.info-label, .info-value, .empty-value { color: var(--th-text) !important; }

.symptom-card { background: var(--th-card) !important; border-color: var(--th-border) !important; }
.symptom-card.selected .symptom-btn-header { border-bottom-color: var(--th-border) !important; }
.followup-panel, .box-for-question { background: var(--th-card) !important; border-color: var(--th-border) !important; }

.radio-label, .checkbox-card, .checkbox-card-symptom, .checkbox-pill, .checkbox {
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

.symptom-text      { color: var(--th-text) !important; }
.checkmark         { color: var(--th-text) !important; }
.severity-label    { color: var(--th-text) !important; }
.followup-label    { color: var(--th-text) !important; }
.helper-text       { color: var(--th-muted) !important; }
.section-title     { color: var(--th-text) !important; }
.btn-back          { color: var(--th-text) !important; background: var(--th-field-bg) !important; }
.scale-strip       { background: var(--th-scale-bg) !important; }
.slider-numbers    { color: var(--th-text) !important; }
.selection-summary  { background: var(--th-summary-bg) !important; }
.summary-title      { color: var(--th-text) !important; }
.summary-content    { color: var(--th-muted) !important; }
.summary-number     { color: var(--th-text) !important; }
.summary-tag        { background: var(--th-summary-tag) !important; color: var(--th-summary-tag-text) !important; border: 1px solid var(--th-border) !important; }

.btn-continue,
.submit-button,
button[type="submit"],
button[type="button"]:not(.edit-button):not(#closeOverlayBtn):not(#declineBtn):not(#continueBtn):not(.tw-pill-option) {
  background: var(--th-btn-bg) !important;
  color: var(--th-btn-text) !important;
  border-color: var(--th-btn-border) !important;
}

.page > .card, section.card { background: var(--th-card) !important; color: var(--th-text) !important; }
.subtext { color: var(--th-muted) !important; }
.meta    { color: var(--th-muted) !important; }
.footer  { color: var(--th-muted) !important; }
.small   { color: var(--th-muted) !important; }

.terms {
  border-color: var(--th-border-subtle) !important;
  background: var(--th-field-bg) !important;
  color: var(--th-text) !important;
}
.terms p, .terms li { color: var(--th-muted) !important; }

.callout {
  background: var(--th-callout-bg) !important;
  border-color: var(--th-callout-border) !important;
  color: var(--th-callout-text) !important;
}

.overlay      { background: var(--th-overlay-bg) !important; }
.overlay-card { background: var(--th-overlay-card) !important; border-color: var(--th-border-subtle) !important; }

.btn.primary          { background: var(--th-accent) !important; color: #ffffff !important; }
.btn.primary:hover    { background: var(--th-accent-hover) !important; }
.btn.secondary        { color: var(--th-text) !important; border-color: var(--th-border) !important; }
.btn.secondary:hover  { background: var(--th-field-bg) !important; }
.edit-button          { border-color: var(--th-border) !important; color: var(--th-text) !important; }
.btn-back             { border-color: var(--th-border) !important; color: var(--th-text) !important; }
.home-card            { background: var(--th-card) !important; color: var(--th-text) !important; }
.brand-name, .tagline { color: var(--th-text) !important; }
.description          { color: var(--th-muted) !important; }
.panel                { background: var(--th-card) !important; border-color: var(--th-border-subtle) !important; }
.panel h2, .panel ul, .panel li { color: var(--th-text) !important; }
#ocrStatus, #scanInfo { background: var(--th-card) !important; border-color: var(--th-border) !important; color: var(--th-text) !important; }

/* Emergency notice box — theme-aware */
.emergency-notice {
  background: var(--th-emergency-bg) !important;
  border-left-color: var(--th-emergency-border) !important;
}
.emergency-notice strong {
  color: var(--th-emergency-title) !important;
}
.emergency-notice p {
  color: var(--th-emergency-text) !important;
}

/* Info/note boxes in intake form (e.g. emergency contact helper text) */
p.info-note {
  background: var(--th-field-bg) !important;
  border: 1px solid var(--th-border-subtle) !important;
  color: var(--th-muted) !important;
  padding: 10px;
  border-radius: 8px;
  margin-top: 15px;
}

/* Infection screening section (symptomsv2) */
.infection-screening-section {
  background: var(--th-card) !important;
  border-color: var(--th-border-subtle) !important;
  color: var(--th-text) !important;
}
.screening-question               { color: var(--th-text) !important; }
.screening-question label         { color: var(--th-text) !important; }
.screening-question select        { background: var(--th-field-bg) !important; border-color: var(--th-field-border) !important; color: var(--th-field-text) !important; }
.infection-screening-section h2   { color: var(--th-text) !important; }

/* Multi-select dropdowns (symptoms page) */
.dropdown-header {
  background: var(--th-card) !important;
  border-color: var(--th-border) !important;
}
.dropdown-header:hover            { border-color: var(--th-field-border) !important; }
.dropdown-selected-text           { color: var(--th-text) !important; }
.dropdown-arrow                   { color: var(--th-muted) !important; }
.dropdown-content {
  background: var(--th-card) !important;
  border-color: var(--th-border) !important;
}
.dropdown-option                  { color: var(--th-text) !important; }
.dropdown-option:hover            { background: var(--th-field-bg) !important; }
.dropdown-option span             { color: var(--th-text) !important; }
.dropdown-sub-label               { color: var(--th-text) !important; }

/* Review page — info grid values */
.info-grid { color: var(--th-text) !important; }


/* ====================================================
   COLORBLIND ENHANCEMENTS
   ==================================================== */

[data-colorblind="true"] .symptom-card.selected {
  outline: 3px solid var(--th-accent) !important;
  outline-offset: 2px;
}

[data-colorblind="true"] .severity-value {
  font-size: 14px !important;
  flex-direction: column;
  gap: 0;
}

[data-colorblind="true"] .severity-value::after {
  display: block;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.9;
}

[data-colorblind="true"] .severity-value.low::after    { content: 'LOW'; }
[data-colorblind="true"] .severity-value.medium::after { content: 'MED'; }
[data-colorblind="true"] .severity-value.high::after   { content: 'HIGH'; }

/* Font weight is consistent across all modes — no jump when toggling */
label, legend, .info-label { font-weight: 500 !important; }

[data-colorblind="true"] input[type="checkbox"],
[data-colorblind="true"] input[type="radio"] { accent-color: var(--th-accent) !important; }


/* ====================================================
   WIDGET STYLES
   ==================================================== */

#theme-toggle-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  user-select: none;
}

#theme-toggle-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--tw-btn-border);
  background: var(--tw-btn-bg);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.30);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: var(--tw-btn-color);
  margin-left: auto;
}

#theme-toggle-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(0,0,0,0.38);
}

#theme-panel {
  position: absolute;
  bottom: 54px;
  right: 0;
  width: 260px;
  background: var(--tw-panel-bg);
  border: 1px solid var(--tw-panel-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 44px rgba(0,0,0,0.42);
  backdrop-filter: blur(14px);
  display: none;
  flex-direction: column;
  gap: 4px;
  transform-origin: bottom right;
}

#theme-panel.open {
  display: flex;
  animation: panelIn 0.18s ease;
}

@keyframes panelIn {
  from { opacity: 0; transform: scale(0.93) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.tw-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--tw-label-color);
  padding: 2px 4px 7px;
  border-bottom: 1px solid var(--tw-label-rule);
  margin-bottom: 4px;
}

.tw-divider {
  border: none;
  border-top: 1px solid var(--tw-label-rule);
  margin: 4px 0;
}

/* Dark / Light pill row */
.tw-mode-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px;
}

.tw-mode-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tw-label-color);
}

.tw-pill-track {
  display: flex;
  background: var(--tw-track-off);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  width: 100%;
}

.tw-pill-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 0;
  flex: 1;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tw-opt-color);
  transition: all 0.18s ease;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: transparent;
}

.tw-pill-option.active {
  background: var(--tw-thumb);
  color: var(--tw-opt-active-color);
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
}

/* Colorblind toggle row */
.tw-cb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}

.tw-cb-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tw-cb-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tw-opt-color);
}

.tw-cb-desc {
  font-size: 11px;
  color: var(--tw-label-color);
}

/* On/off switch */
.tw-switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

.tw-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.tw-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--tw-track-off);
  transition: background 0.22s ease;
  cursor: pointer;
}

.tw-switch input:checked ~ .tw-switch-track {
  background: var(--tw-track-on);
}

.tw-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tw-thumb);
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  transition: transform 0.22s ease;
  pointer-events: none;
}

.tw-switch input:checked ~ .tw-switch-track ~ .tw-switch-thumb {
  transform: translateX(16px);
}