/* Light remains the existing SeaPass theme. Only the new control has base styles. */
seapass-appearance-settings { display: block; }
.seapass-appearance-card { background: #fff; border: 1px solid rgba(11,26,42,.1); border-radius: .5rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.seapass-appearance-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.seapass-appearance-title { margin: 0; color: #0b1a2a; font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.seapass-appearance-help { margin: .25rem 0 0; color: #536273; font-size: .75rem; line-height: 1.65; }
.seapass-appearance-current { flex: none; border-radius: .25rem; background: #f0f2f4; color: #0b1a2a; padding: .45rem .65rem; font-size: .625rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.seapass-appearance-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-top: 1rem; }
.seapass-appearance-options button { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem; padding: .7rem; cursor: pointer; border: 2px solid #dce1e5; border-radius: .375rem; background: #fff; color: #0b1a2a; font: inherit; font-size: .8rem; font-weight: 700; }
.seapass-appearance-options svg { width: 1.3rem; height: 1.3rem; flex: none; }
.seapass-appearance-options button:hover { border-color: #006bad; }
.seapass-appearance-options button[aria-pressed="true"] { border-color: #006bad; background: #eef6fb; color: #005b92; }
.seapass-appearance-options button:focus-visible { outline: 3px solid #c6a052; outline-offset: 3px; }
.seapass-appearance-status { margin: .75rem 0 0; min-height: 1rem; color: #047857; font-size: .7rem; line-height: 1.5; }

html[data-seapass-theme="night"] {
  color-scheme: dark;
  --seapass-night-canvas: #081421;
  --seapass-night-surface: #112337;
  --seapass-night-raised: #192f45;
  --seapass-night-border: #354b60;
  --seapass-night-text: #e8eef6;
  --seapass-night-muted: #b3c2d2;
  --seapass-night-blue: #89caff;
  --color-marina-cream: #081421;
  --color-marina-text: #e8eef6;
  /* These variables belong to the standalone demo, not brand backgrounds. */
  --cream: #081421;
  --ink: #e8eef6;
  --muted: #b3c2d2;
  --line: #354b60;
  --gold-soft: #3b311e;
  background: var(--seapass-night-canvas);
}
html[data-seapass-theme="night"] body { background-color: var(--seapass-night-canvas) !important; color: var(--seapass-night-text); }

/* Explicit surfaces avoid recoloring the shared navy/gold brand variables. */
html[data-seapass-theme="night"] :is(.bg-white,.bg-gray-50,.bg-gray-100,.bg-slate-50,.bg-slate-100,.bg-zinc-50,.bg-zinc-100,[class~="bg-[#eef4f8]"],.demo-shell,.reviewer,.price-card,.choice,.btn-outline,.demo-head,.plan-card.selected,.seapass-appearance-card) { background-color: var(--seapass-night-surface) !important; }
html[data-seapass-theme="night"] :is(.bg-gray-200,.bg-gray-300,.bg-slate-200,.bg-zinc-200,[class~="bg-marina-navy/5"],[class~="bg-marina-navy/10"],[class~="bg-marina-cream/20"],[class~="bg-marina-cream/30"],[class~="bg-marina-cream/40"],[class~="bg-marina-cream/50"],.pricing-wrap,.progress) { background-color: var(--seapass-night-raised) !important; }
html[data-seapass-theme="night"] :is(.text-marina-navy,.text-marina-text,.text-gray-700,.text-gray-800,.text-gray-900,.text-slate-700,.text-slate-800,.text-slate-900,.text-zinc-800,[class~="text-[#0B1A2A]"],.seapass-appearance-title,.reviewer,.choice,.btn-outline) { color: var(--seapass-night-text) !important; }
html[data-seapass-theme="night"] :is(.text-gray-400,.text-gray-500,.text-gray-600,.text-slate-400,.text-slate-500,.text-slate-600,.text-zinc-400,.text-zinc-500,.text-zinc-600,[class~="text-marina-navy/20"],[class~="text-marina-navy/30"],[class~="text-marina-navy/40"],[class~="text-marina-navy/50"],[class~="text-marina-navy/55"],[class~="text-marina-navy/60"],[class~="text-marina-navy/65"],[class~="text-marina-navy/70"],[class~="text-marina-navy/75"],[class~="text-marina-text/20"],[class~="text-marina-text/40"],[class~="text-marina-text/50"],[class~="text-marina-text/55"],[class~="text-marina-text/60"],[class~="text-marina-text/65"],[class~="text-marina-text/70"],[class~="text-marina-text/75"],[class~="text-marina-text/80"],.seapass-appearance-help) { color: var(--seapass-night-muted) !important; }
html[data-seapass-theme="night"] :is(.text-marina-blue,.text-blue-500,.text-blue-600,.text-blue-700,.text-blue-800,.step,.progress-copy,.reviewer .short,.result-score) { color: var(--seapass-night-blue) !important; }
html[data-seapass-theme="night"] :is(.border-gray-100,.border-gray-200,.border-gray-300,.border-slate-100,.border-slate-200,.border-slate-300,.border-zinc-50,.border-zinc-100,.border-zinc-200,[class~="border-marina-navy/5"],[class~="border-marina-navy/10"],[class~="border-marina-navy/15"],[class~="border-marina-navy/20"],[class~="border-marina-navy/30"],.demo-shell,.demo-head,.choice,.choice .letter,.reviewer,.price-card,.btn-outline,.seapass-appearance-card) { border-color: var(--seapass-night-border); }
html[data-seapass-theme="night"] [class*="divide-marina-navy"] > :not(:last-child) { border-color: var(--seapass-night-border); }
html[data-seapass-theme="night"] :is([class~="hover:bg-marina-cream"],[class~="hover:bg-gray-50"],[class~="hover:bg-slate-50"],[class~="hover:bg-marina-navy/5"]):hover { background-color: var(--seapass-night-raised) !important; }
html[data-seapass-theme="night"] :is([class~="hover:text-marina-blue"],[class~="hover:text-marina-navy"]):hover { color: var(--seapass-night-blue) !important; }
html[data-seapass-theme="night"] :is(.bg-blue-50,[class~="bg-marina-blue/5"],[class~="bg-marina-blue/10"],.reviewer.active) { background-color: #132f49 !important; }

/* Correct/wrong feedback stays distinct; answer handlers are untouched. */
html[data-seapass-theme="night"] :is(.bg-green-50,.bg-green-100,.bg-emerald-50,.bg-emerald-100,[class~="bg-emerald-50/50"],[class~="bg-emerald-100/70"],.choice.correct,.feedback.good,.paymongo) { background-color: #10392e !important; }
html[data-seapass-theme="night"] :is(.text-green-600,.text-green-700,.text-green-800,.text-green-900,.text-emerald-600,.text-emerald-700,.text-emerald-800,.text-emerald-900,.text-emerald-950,.feedback.good,.result-score.perfect,.paymongo strong,.paymongo p,.seapass-appearance-status) { color: #91e5bd !important; }
html[data-seapass-theme="night"] :is(.bg-red-50,.bg-red-100,.choice.wrong,.feedback.bad) { background-color: #42232b !important; }
html[data-seapass-theme="night"] :is(.text-red-600,.text-red-700,.text-red-800,.text-red-900,[class~="text-red-600/70"],.feedback.bad) { color: #ffb2b9 !important; }
html[data-seapass-theme="night"] :is(.bg-amber-50,.bg-amber-100,.bg-yellow-50,.bg-orange-50,[class~="bg-amber-50/50"],[class~="bg-amber-50/80"],[class~="bg-amber-100/80"],[class~="bg-marina-gold/5"],[class~="bg-marina-gold/10"],[class~="bg-marina-gold/15"],[class~="bg-marina-gold/20"],.price-card.featured) { background-color: #3b311e !important; }
html[data-seapass-theme="night"] :is(.text-amber-600,.text-amber-700,.text-amber-800,.text-amber-900,[class~="text-amber-700/70"],.text-yellow-600,.text-yellow-700,.text-yellow-800,.text-orange-600,.text-orange-700) { color: #f3d08a !important; }
html[data-seapass-theme="night"] :is(.bg-marina-gold,.bg-amber-400,.bg-amber-500,.btn-gold) { color: #0b1a2a !important; }
html[data-seapass-theme="night"] :is(.bg-marina-gold,.btn-gold) .text-marina-navy { color: #0b1a2a !important; }
html[data-seapass-theme="night"] :is(.reviewer.active,.plan-card.selected) { border-color: #c6a052 !important; }
html[data-seapass-theme="night"] .choice:hover:not(:disabled) { border-color: #89caff; background-color: #192f45 !important; }
html[data-seapass-theme="night"] .choice.correct { border-color: #48c593; }
html[data-seapass-theme="night"] .choice.wrong { border-color: #f18b98; }
html[data-seapass-theme="night"] .demo-head .score-copy { color: #91e5bd; }
html[data-seapass-theme="night"] :is(.tag,.result-icon) { color: #f3d08a; }
html[data-seapass-theme="night"] .choice .letter { color: #c3d2e1; }
html[data-seapass-theme="night"] :is(.choice.correct,.choice.wrong) .letter { color: #fff; }
html[data-seapass-theme="night"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { color: var(--seapass-night-text); background-color: #102236; border-color: var(--seapass-night-border); }
html[data-seapass-theme="night"] ::placeholder { color: #a8b8c9; opacity: 1; }
html[data-seapass-theme="night"] :is(input,select,textarea,button,a):focus-visible { outline-color: #d5b568; }

/* Existing Text Size control injects its styles; keep it equally readable. */
html[data-seapass-theme="night"] #seapass-text-size-settings { background: var(--seapass-night-surface); border-color: var(--seapass-night-border); }
html[data-seapass-theme="night"] #seapass-text-size-settings :is(.seapass-text-size-title,.seapass-text-size-current,.seapass-text-size-button) { color: var(--seapass-night-text); }
html[data-seapass-theme="night"] #seapass-text-size-settings .seapass-text-size-help { color: var(--seapass-night-muted); }
html[data-seapass-theme="night"] #seapass-text-size-settings :is(.seapass-text-size-current,.seapass-text-size-button) { background: var(--seapass-night-raised); border-color: var(--seapass-night-border); }
html[data-seapass-theme="night"] #seapass-text-size-settings .seapass-text-size-button[data-selected="true"] { background: #133b57; color: #b9ddff; border-color: #89caff; }
html[data-seapass-theme="night"] #seapass-text-size-settings .seapass-text-size-status { color: #91e5bd; }
html[data-seapass-theme="night"] .seapass-appearance-current { color: #f3d08a; background: #3b311e; }
html[data-seapass-theme="night"] .seapass-appearance-options button { background: var(--seapass-night-raised); color: var(--seapass-night-text); border-color: var(--seapass-night-border); }
html[data-seapass-theme="night"] .seapass-appearance-options button[aria-pressed="true"] { background: #343123; color: #f3d08a; border-color: #c6a052; }

/* Standalone install and admin-voucher pages share the same saved choice. */
html[data-seapass-theme="night"] :is(.card,.guide,.guide-head,.tab:not(.active),.message,.badge,button.secondary) { background-color: var(--seapass-night-surface); color: var(--seapass-night-text); border-color: var(--seapass-night-border); }
html[data-seapass-theme="night"] :is(.steps li,.steps strong) { color: var(--seapass-night-text); }
html[data-seapass-theme="night"] :is(.muted,.card p,.card th) { color: var(--seapass-night-muted); }
html[data-seapass-theme="night"] :is(.code,.intro .eyebrow) { color: var(--seapass-night-blue); }
html[data-seapass-theme="night"] :is(.note,.badge.redeemed) { background-color: #10392e; color: #91e5bd; }
html[data-seapass-theme="night"] .copy-status { color: #91e5bd; }
html[data-seapass-theme="night"] :is(.browser-warning,.badge.reserved) { background-color: #3b311e; color: #f3d08a; }
html[data-seapass-theme="night"] .message.error { background-color: #42232b; color: #ffb2b9; }

/* Keep original diagram, logo and QR pixels. Transparent line art needs paper. */
html[data-seapass-theme="night"] figure:has(img[src*="question-images/"]) { background-color: #fff !important; border-radius: .5rem; }
html[data-seapass-theme="night"] img[src*="question-images/"] { background-color: #fff; }
html[data-seapass-theme="night"] [data-seapass-question-watermark="true"]::before { mix-blend-mode: normal; opacity: .08; }

@media (max-width: 420px) {
  .seapass-appearance-header { flex-wrap: wrap; gap: .5rem; }
  .seapass-appearance-current { white-space: normal; }
}
@media (forced-colors: active) {
  .seapass-appearance-options button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
}