body.public-mode { min-width: 320px; background: var(--site-page-background, #f4f7f4); }
.public-shell { width: min(100% - 40px, 1000px); min-height: 100vh; margin: 0 auto; padding: 24px 0 28px; }
.public-shell:focus { outline: none; }
.public-header { display: flex; min-height: 55px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.public-brand { display: inline-flex; align-items: center; gap: 11px; color: #20392d; }
.public-brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 13px 13px 13px 4px; background: #2f755c; color: #fff; font: 800 1.5rem/1 Georgia, serif; }
.public-brand strong, .public-brand small { display: block; }
.public-brand strong { font: 800 1.5625rem/1 "Segoe UI", system-ui, sans-serif; letter-spacing: -1.6px; }
.public-brand small { margin-top: 4px; color: #687970; font-size: 0.75rem; }
.public-header-note { color: #66756c; font-size: 0.875rem; }
.public-skip { position: fixed; top: 10px; left: 10px; z-index: 10; transform: translateY(-160%); padding: 12px 16px; border-radius: 8px; background: #20392d; color: white; font-weight: 700; }
.public-skip:focus { transform: translateY(0); }
.public-welcome { display: grid; min-height: 490px; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); align-items: center; gap: clamp(26px, 6vw, 75px); padding: clamp(26px, 6vw, 68px); border: 1px solid #e3ebe4; border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgb(34 63 45 / 6%); }
.public-welcome-copy { max-width: 520px; }
.public-eyebrow { margin: 0 0 12px; color: #317259; font-size: 0.8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.public-welcome h1, .public-card h1, .public-path-page h1 { margin: 0 0 16px; color: #21382c; font: 750 clamp(1.875rem, var(--site-vw-font-5, 3.0625rem), 3.0625rem)/1.12 "Segoe UI", system-ui, sans-serif; letter-spacing: -1.8px; }
.public-lead { max-width: 670px; margin: 0 0 24px; color: #53645a; font-size: 1.125rem; line-height: 1.65; }
.public-trust { display: flex; align-items: flex-start; gap: 10px; color: #52675a; font-size: 0.9375rem; line-height: 1.5; }
.public-trust > span:first-child { display: grid; width: 23px; height: 23px; flex: none; place-items: center; border-radius: 50%; background: #e7f2e9; color: #2e7556; font-weight: 800; }
.public-entry-card { display: grid; gap: 13px; padding: clamp(20px, 3vw, 31px); border: 1px solid #e5ebe5; border-radius: 17px; background: #f8faf8; }
.public-entry-card p { margin: 7px 0 0; color: #68766e; font-size: 0.875rem; line-height: 1.55; }
.public-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; border: 2px solid transparent; border-radius: 11px; cursor: pointer; font-size: 1.0625rem; font-weight: 750; line-height: 1.3; text-align: center; transition: background .15s, border-color .15s, transform .15s; }
.public-button:hover { transform: translateY(-1px); }
.public-button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.public-button-primary { background: #2f755c; color: white; }
.public-button-primary:hover { background: #245d49; }
.public-button-secondary { border-color: #cbd9ce; background: #fff; color: #2b5d43; }
.public-button-secondary:hover { border-color: #84a792; background: #f3f8f4; }
.public-entry-card .public-button { width: 100%; }
.public-footer { display: flex; justify-content: center; padding: 23px 10px 0; color: #718077; font-size: 0.8125rem; line-height: 1.5; text-align: center; }
.public-card { width: min(100%, 660px); margin: 25px auto 0; padding: clamp(24px, 6vw, 52px); border: 1px solid #e3ebe4; border-radius: 22px; background: white; box-shadow: 0 18px 55px rgb(34 63 45 / 6%); }
.public-card h1 { font-size: clamp(1.8125rem, var(--site-vw-font-4, 2.5rem), 2.5rem); }
.public-card .public-lead { font-size: 1.0625rem; }
.public-id-card, .public-result-card { text-align: center; }
.public-success-mark { display: grid; width: 57px; height: 57px; margin: 0 auto 18px; place-items: center; border-radius: 50%; background: #e6f2e8; color: #2b7554; font-size: 1.6875rem; font-weight: 800; }
.public-code { margin: 25px 0 13px; padding: 21px 14px; border: 2px dashed #abc5b1; border-radius: 14px; background: #f5faf5; color: #214c36; font: 800 clamp(1.75rem, var(--site-vw-font-6, 2.625rem), 2.625rem)/1.1 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.public-copy-button { min-width: min(100%, 260px); }
.public-small-note { margin: 18px 0 24px; color: #6a786f; font-size: 0.875rem; line-height: 1.6; }
.public-wide-button { width: 100%; margin-top: 4px; }
.public-back { min-height: 42px; padding: 7px 5px; border: 0; background: transparent; color: #39634c; cursor: pointer; font-size: 0.9375rem; font-weight: 700; text-align: left; }
.public-back:hover { color: #1e4833; text-decoration: underline; }
.public-identify-form { display: grid; gap: 10px; margin-top: 24px; }
.public-identify-form label { color: #344c3d; font-size: 0.9375rem; font-weight: 750; }
.public-code-input { width: 100%; min-height: 58px; padding: 10px 15px; border: 2px solid #cbd9ce; border-radius: 10px; background: white; color: #214c36; font: 700 1.375rem ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.public-code-input:focus { border-color: #387a57; }
.public-error { min-height: 22px; color: #a43c35; font-size: 0.875rem; }
.public-path-page { padding: 8px 0 22px; }
.public-user-chip { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 23px; padding: 9px 13px; border: 1px solid #dce8de; border-radius: 30px; background: #fff; color: #54665a; font-size: 0.875rem; font-weight: 650; }
.public-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: #63a879; }
.public-path-page h1 { font-size: clamp(1.875rem, var(--site-vw-font-4, 2.625rem), 2.625rem); }
.public-path-page > .public-lead { margin-bottom: 26px; }
.public-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.public-path-card { display: flex; min-height: 315px; flex-direction: column; align-items: flex-start; padding: 23px; border: 1px solid #e0e9e1; border-radius: 17px; background: white; box-shadow: 0 10px 30px rgb(34 63 45 / 4%); }
.public-path-number { display: grid; width: 38px; height: 38px; margin-bottom: 19px; place-items: center; border-radius: 12px; background: #e9f2ea; color: #397354; font-size: 0.9375rem; font-weight: 800; }
.public-path-card h2 { margin: 0 0 10px; color: #263c30; font: 750 1.3125rem/1.25 "Segoe UI", system-ui, sans-serif; letter-spacing: -.35px; }
.public-path-card p { margin: 0 0 20px; color: #5d6c62; font-size: 0.9375rem; line-height: 1.6; }
.public-path-meta { margin-top: auto; margin-bottom: 15px; color: #748178; font-size: 0.875rem; }
.public-path-card .public-button { width: 100%; min-height: 48px; padding: 9px 12px; font-size: 0.9375rem; }
.public-path-back { margin-top: 14px; }
.public-phase-card { width: min(100%, 740px); }
.public-phase-card > .public-back { margin: -14px 0 24px; }
.public-phase-card h1 { margin-bottom: 12px; }
.public-phase-options { display: grid; gap: 12px; margin-top: 27px; }
.public-phase-button { display: grid; min-height: 91px; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 15px 18px; border: 2px solid #e2eae3; border-radius: 13px; background: #fff; color: #263a2e; cursor: pointer; text-align: left; }
.public-phase-button:hover { border-color: #8eb49a; background: #f7faf7; }
.public-phase-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #e8f1e9; color: #397353; font-size: 1rem; font-weight: 800; }
.public-phase-button strong, .public-phase-button small { display: block; }
.public-phase-button strong { margin-bottom: 5px; font-size: 1.0625rem; }
.public-phase-button small { color: #68766d; font-size: 0.875rem; line-height: 1.4; }
.public-phase-arrow { color: #467759; font-size: 1.5rem; }
.public-quiz { width: min(100%, 790px); margin: 0 auto; }
.public-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 23px; color: #64736a; font-size: 0.875rem; text-align: right; }
.public-progress-wrap { display: grid; gap: 9px; margin-bottom: 15px; color: #596960; font-size: 0.875rem; font-weight: 700; }
.public-progress { height: 10px; overflow: hidden; border-radius: 20px; background: #dfe9e1; }
.public-progress > span { display: block; height: 100%; border-radius: inherit; background: #4d936b; transition: width .2s ease; }
.public-question-card { padding: clamp(22px, 5vw, 40px); border: 1px solid #e3ebe4; border-radius: 19px; background: white; box-shadow: 0 12px 38px rgb(34 63 45 / 5%); }
.public-question-area { display: inline-block; margin-bottom: 14px; padding: 7px 10px; border-radius: 7px; background: #edf4ee; color: #3d7652; font-size: 0.875rem; font-weight: 750; }
.public-question-card h1 { margin: 0 0 9px; color: #24392d; font: 750 clamp(1.5rem, var(--site-vw-font-4, 2.125rem), 2.125rem)/1.25 "Segoe UI", system-ui, sans-serif; letter-spacing: -.7px; }
.public-question-hint { margin: 0 0 22px; color: #68766e; font-size: 0.9375rem; line-height: 1.55; }
.public-answer-list { display: grid; gap: 10px; }
.public-answer { display: grid; min-height: 62px; grid-template-columns: 35px 1fr 24px; align-items: center; gap: 12px; padding: 11px 15px; border: 2px solid #e0e8e1; border-radius: 12px; background: #fff; color: #34483b; cursor: pointer; font-size: 1rem; line-height: 1.45; text-align: left; }
.public-answer:not(:disabled):hover { border-color: #86ae93; background: #f8fbf8; }
.public-answer:disabled { cursor: default; opacity: 1; }
.public-answer.is-correct { border-color: #72a984; background: #f0f8f1; }
.public-answer.is-selected { border-color: #d0aa6e; background: #fff9ee; }
.public-answer-letter { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #eef2ee; color: #4f6355; font-size: 0.875rem; font-weight: 800; }
.public-answer-mark { color: #2f755c; font-size: 1.3125rem; font-weight: 800; text-align: center; }
.public-feedback { margin-top: 16px; padding: 14px 16px; border-radius: 11px; font-size: 0.9375rem; line-height: 1.55; }
.public-feedback strong { display: block; margin-bottom: 4px; }
.public-feedback p { margin: 0; }
.public-feedback.is-good { background: #edf7ef; color: #2e6642; }
.public-feedback.is-kind { background: #fff5e8; color: #70562b; }
.public-quiz-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.public-quiz-step { color: #718077; font-size: 0.875rem; }
.public-result-card .public-eyebrow { margin-top: 4px; }
.public-result-card h1 { margin-bottom: 12px; }
.public-result-card .public-lead { margin: 0 auto 18px; font-size: 1rem; }
.public-score { color: #2f755c; font: 800 clamp(3.25rem, var(--site-vw-font-9, 4.625rem), 4.625rem)/1 "Segoe UI", system-ui, sans-serif; letter-spacing: -3px; }
.public-score small { margin-left: 5px; color: #758279; font-size: 1.375rem; letter-spacing: 0; }
.public-score-caption { margin: 8px 0 21px; color: #617067; font-size: 0.9375rem; }
.public-compare { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 19px; padding: 13px 16px; border: 1px solid #d8e8da; border-radius: 12px; background: #f1f8f1; color: #2e6242; text-align: left; }
.public-compare-icon { font-size: 1.625rem; }
.public-compare strong, .public-compare small { display: block; }
.public-compare strong { font-size: 1rem; }
.public-compare small { margin-top: 3px; color: #61756a; font-size: 0.8125rem; }
.public-compare-note { margin: 0 auto 19px; padding: 13px 15px; border-radius: 11px; background: #f2f5f2; color: #5e6e63; font-size: 0.875rem; line-height: 1.55; }
.public-domain-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 19px 0; }
.public-domain-chip { padding: 8px 11px; border-radius: 25px; background: #edf3ee; color: #52685a; font-size: 0.8125rem; }
.public-reminder { margin: 17px 0 20px; color: #52645a; font-size: 0.9375rem; line-height: 1.55; }
.public-reminder strong { color: #254c36; font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.public-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.public-toast { position: fixed; right: 18px; bottom: 18px; z-index: 20; max-width: min(430px, calc(100vw - 36px)); padding: 14px 18px; transform: translateY(12px); border: 1px solid #d5e3d7; border-radius: 11px; background: white; color: #315b40; box-shadow: 0 10px 35px rgb(28 49 38 / 15%); font-size: 0.9375rem; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.public-toast.is-visible { transform: translateY(0); opacity: 1; }

@media (max-width: 760px) {
  .public-shell { width: min(100% - 28px, 620px); padding-top: 15px; }
  .public-header { margin-bottom: 18px; }
  .public-header-note { font-size: 0.75rem; }
  .public-welcome { min-height: 0; grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .public-entry-card { padding: 20px; }
  .public-path-grid { grid-template-columns: 1fr; }
  .public-path-card { min-height: 0; }
  .public-quiz-top { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (max-width: 480px) {
  .public-shell { width: min(100% - 20px, 430px); padding-top: 10px; }
  .public-brand-mark { width: 34px; height: 34px; }
  .public-brand strong { font-size: 1.375rem; }
  .public-brand small { font-size: 0.625rem; }
  .public-header-note { max-width: 100px; text-align: right; }
  .public-welcome { padding: 22px; border-radius: 17px; }
  .public-lead { font-size: 1rem; }
  .public-button { min-height: 52px; font-size: 1rem; }
  .public-card { margin-top: 8px; padding: 23px 19px; border-radius: 17px; }
  .public-phase-button { grid-template-columns: 40px 1fr 16px; gap: 10px; padding: 12px; }
  .public-phase-icon { width: 38px; height: 38px; }
  .public-phase-button strong { font-size: 0.9375rem; }
  .public-phase-button small { font-size: 0.8125rem; }
  .public-question-card { padding: 20px 15px; }
  .public-answer { grid-template-columns: 29px 1fr 18px; gap: 8px; padding: 10px; font-size: 0.9375rem; }
  .public-answer-letter { width: 28px; height: 28px; }
  .public-quiz-footer { align-items: stretch; flex-direction: column; }
  .public-quiz-footer .public-button { width: 100%; }
  .public-quiz-step { text-align: center; }
  .public-result-actions { grid-template-columns: 1fr; }
  .public-footer { padding: 16px 8px 0; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .public-button, .public-toast, .public-progress > span { transition: none; }
}

/* Public site landing page and reusable personalization controls. */
.home-mode { min-width: 320px; background: #f4f7f4; color: #24392d; }
.home-shell { width: min(100% - 40px, 1120px); min-height: 100vh; margin: 0 auto; padding: 22px 0 30px; }
.home-header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.home-brand { display: inline-flex; align-items: center; gap: 12px; color: #20392d; text-decoration: none; }
.home-brand > span:last-child { display: block; }
.home-brand strong, .home-brand small { display: block; }
.home-brand strong { font-size: 1.3125rem; font-weight: 800; letter-spacing: -.5px; }
.home-brand small { margin-top: 4px; color: #687970; font-size: 0.8125rem; }
.home-brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px 14px 14px 5px; background: var(--site-brand, #2f755c); color: var(--site-on-brand, #fff); font: 800 1.5625rem/1 Georgia, serif; }
.home-logo { width: 52px; height: 52px; object-fit: contain; }
.home-admin-link { min-height: 40px; padding: 10px 13px; border: 1px solid #dce5dd; border-radius: 9px; background: #fff; color: #425a4a; font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.home-admin-link:hover { border-color: #9fb7a5; background: #f9fbf9; }
.home-hero { display: grid; min-height: 490px; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: center; gap: clamp(28px, 6vw, 80px); padding: clamp(28px, 7vw, 78px); overflow: hidden; border: 1px solid #e3ebe4; border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgb(34 63 45 / 6%); }
.home-copy { max-width: 610px; }
.home-copy h1 { margin: 0 0 18px; color: #21382c; font: 760 clamp(2.125rem, var(--site-vw-font-5, 3.375rem), 3.375rem)/1.1 "Segoe UI", system-ui, sans-serif; letter-spacing: -1.8px; }
.home-intro { margin: 0 0 13px; color: #53645a; font-size: clamp(1.125rem, var(--site-vw-font-2-2, 1.3125rem), 1.3125rem); line-height: 1.55; }
.home-details { margin: 0 0 23px; color: #65736a; font-size: 1rem; line-height: 1.65; }
.home-start { width: fit-content; min-width: 250px; text-decoration: none; }
.home-reassurance { margin: 13px 0 0; color: #718077; font-size: 0.8125rem; line-height: 1.5; }
.home-visual { display: grid; min-height: 310px; place-items: center; }
.home-illustration { position: relative; display: grid; width: min(100%, 340px); aspect-ratio: 1; place-items: center; border: 1px solid #e6eee7; border-radius: 48% 52% 44% 56%; background: radial-gradient(circle at 51% 48%, #fff 0 24%, #f0f6f0 24.5% 46%, #e6f0e8 46.5% 68%, #f8faf8 68.5%); color: #345843; }
.home-illustration > div { padding: 18px 25px; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgb(34 63 45 / 10%); font-size: 1.5rem; font-weight: 800; line-height: 1.15; text-align: center; }
.home-illustration > span { position: absolute; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #dce9de; border-radius: 15px; background: #fff; color: var(--site-accent-text, #245d49); font-size: 1.1875rem; font-weight: 800; box-shadow: 0 7px 20px rgb(34 63 45 / 7%); }
.home-illustration > span:nth-child(1) { top: 17%; left: 19%; }
.home-illustration > span:nth-child(2) { top: 20%; right: 15%; }
.home-illustration > span:nth-child(3) { right: 20%; bottom: 16%; }
.home-hero-image { width: min(100%, 440px); max-height: 390px; object-fit: contain; border-radius: 20px; }
.home-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 20px; }
.home-steps article { display: flex; gap: 14px; padding: 21px; border: 1px solid #e4ebe4; border-radius: 15px; background: #fff; }
.home-steps article > span { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 11px; background: #eef4ef; color: var(--site-accent-text, #245d49); font-size: 0.8125rem; font-weight: 800; }
.home-steps h2 { margin: 0 0 6px; color: #2a4032; font-size: 1rem; }
.home-steps p { margin: 0; color: #68766e; font-size: 0.875rem; line-height: 1.55; }
.home-footer { padding: 24px 12px 0; color: #718077; font-size: 0.8125rem; line-height: 1.5; text-align: center; }
.public-brand-logo { width: 43px; height: 43px; flex: none; object-fit: contain; }
.public-question-image { display: block; width: auto; max-width: 100%; max-height: 360px; margin: 16px auto 22px; border-radius: 12px; object-fit: contain; }
.public-button-primary { background: var(--site-brand, #2f755c); color: var(--site-on-brand, #fff); }
.public-button-primary:hover { background: color-mix(in srgb, var(--site-brand, #2f755c) 82%, #000); }
.public-brand-mark { background: var(--site-brand, #2f755c); color: var(--site-on-brand, #fff); }
.public-eyebrow, .public-score, .public-answer-mark { color: var(--site-accent-text, #245d49); }
.public-progress > span { background: var(--site-brand, #2f755c); }
.color-input { width: 72px; min-height: 44px; padding: 4px; border: 1px solid #cbd5cd; border-radius: 8px; background: #fff; cursor: pointer; }
.brand-assets-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.brand-asset-card { display: grid; align-content: start; gap: 12px; padding: 17px; border: 1px solid #e4e9e4; border-radius: 13px; background: #fbfcfb; }
.image-preview-frame { display: grid; min-height: 135px; place-items: center; overflow: hidden; border: 1px dashed #cbd7cd; border-radius: 10px; background: #fff; }
.image-preview-wide { min-height: 190px; }
.admin-image-preview { width: auto; max-width: 100%; max-height: 220px; object-fit: contain; }
.admin-logo-preview { width: 115px; height: 115px; }
.question-image-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .7fr) minmax(0, 1.2fr); align-items: center; gap: 15px; margin: 14px 0; padding: 14px; border: 1px solid #e4e9e4; border-radius: 11px; background: #fbfcfb; }
.question-image-preview { width: auto; max-width: 100%; max-height: 150px; object-fit: contain; }
.export-choice-list { display: grid; gap: 10px; }
.export-choice-list p { display: grid; gap: 4px; margin: 0; padding: 12px 14px; border: 1px solid #e3e9e3; border-radius: 9px; background: #fafcfa; }
.export-choice-list span { color: #68766e; font-size: 0.875rem; line-height: 1.5; }
@media (max-width: 800px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-visual { min-height: 240px; }
  .home-illustration { width: min(72vw, 270px); }
  .home-steps { grid-template-columns: 1fr; }
  .question-image-settings { grid-template-columns: 1fr 1fr; }
  .question-image-settings > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .home-shell { width: min(100% - 24px, 1120px); padding-top: 12px; }
  .home-header { margin-bottom: 14px; }
  .home-brand strong { font-size: 1.125rem; }
  .home-brand small { max-width: 180px; font-size: 0.6875rem; }
  .home-admin-link { padding: 9px 10px; font-size: 0.75rem; }
  .home-hero { min-height: 0; padding: 25px 20px; border-radius: 18px; }
  .home-start { width: 100%; }
  .home-visual { min-height: 220px; }
  .brand-assets-grid, .question-image-settings { grid-template-columns: 1fr; }
  .question-image-settings > :first-child { grid-column: auto; }
}
.admin-login-mode { min-height: 100vh; background: #f4f7f4; }
.admin-login-shell { display: grid; width: min(100% - 32px, 520px); min-height: 100vh; align-content: center; margin: 0 auto; padding: 28px 0; }
.admin-login-back { justify-self: start; margin-bottom: 18px; color: #3d624d; font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.admin-login-back:hover { text-decoration: underline; }
.admin-login-card { padding: clamp(26px, 6vw, 44px); border: 1px solid #e1e9e2; border-radius: 20px; background: #fff; box-shadow: 0 18px 55px rgb(34 63 45 / 7%); }
.admin-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.admin-login-brand strong, .admin-login-brand small { display: block; }
.admin-login-brand strong { color: #20392d; font-size: 1.25rem; font-weight: 800; }
.admin-login-brand small { margin-top: 4px; color: #687970; font-size: 0.75rem; }
.admin-login-card h1 { margin: 0 0 10px; color: #21382c; font-size: 2rem; letter-spacing: -.8px; }
.admin-login-card > p:not(.public-eyebrow) { margin: 0 0 22px; color: #617067; line-height: 1.55; }
.admin-login-card form { display: grid; gap: 10px; }
.admin-login-card label { color: #344c3d; font-size: 0.9375rem; font-weight: 750; }
.admin-login-card input { width: 100%; min-height: 54px; padding: 11px 13px; border: 2px solid #cbd9ce; border-radius: 10px; background: #fff; color: #263b2e; font: inherit; }
.admin-login-card input:focus { border-color: #387a57; outline: 3px solid rgb(56 122 87 / 15%); }
.admin-login-card button { width: 100%; margin-top: 5px; }
.admin-login-card button:disabled { cursor: wait; opacity: .65; }
.admin-login-error { min-height: 22px; margin: 0; color: #a43c35; font-size: 0.875rem; }

/* Saved appearance settings are shared by the home, participant, and admin pages. */
html, body, body * { font-family: var(--site-font-family, system-ui, sans-serif) !important; }
.home-logo, .public-brand-logo { width: var(--site-logo-size, 52px); height: var(--site-logo-size, 52px); object-fit: contain; }
.home-hero-image { width: min(100%, var(--site-home-image-size, 440px)); }
.public-question-image { width: auto; max-width: min(100%, var(--site-question-image-size, 640px)); }
.home-footer, .public-footer {
  display: grid;
  gap: 12px;
  border-radius: 10px;
  background: var(--site-footer-background, #f5f7f5);
  color: var(--site-footer-color, #718077);
  text-align: var(--site-footer-alignment, center);
}
.footer-brand-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--site-footer-justify, center);
  gap: 14px;
}
.footer-brand-logos img {
  display: block;
  width: auto;
  max-width: min(100%, 220px);
  max-height: var(--site-footer-logo-size, 48px);
  object-fit: contain;
}
.footer-logo-list { display: grid; gap: 12px; margin-top: 14px; }
.footer-logo-item { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid #e4e9e4; border-radius: 11px; background: #fbfcfb; }
.footer-logo-preview { display: grid; min-height: 70px; place-items: center; padding: 8px; border: 1px dashed #cbd7cd; border-radius: 8px; background: #fff; }
.footer-logo-preview img { display: block; width: auto; max-width: 100%; max-height: 60px; object-fit: contain; }
.footer-logo-empty { margin: 0; color: #68766e; font-size: 0.875rem; }
@media (max-width: 680px) {
  .footer-logo-item { grid-template-columns: 85px minmax(0, 1fr); }
  .footer-logo-item > button { grid-column: 1 / -1; justify-self: start; }
}

/* The shared rem scale makes the advisor's text-size preference global. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] body * { color: #e7eee9 !important; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] .public-welcome,
:root[data-theme="dark"] .public-card,
:root[data-theme="dark"] .public-path-card,
:root[data-theme="dark"] .public-question-card,
:root[data-theme="dark"] .public-phase-button,
:root[data-theme="dark"] .public-answer,
:root[data-theme="dark"] .public-button-secondary,
:root[data-theme="dark"] .home-hero,
:root[data-theme="dark"] .home-steps article,
:root[data-theme="dark"] .home-illustration > div,
:root[data-theme="dark"] .home-illustration > span,
:root[data-theme="dark"] .home-admin-link,
:root[data-theme="dark"] .admin-login-card,
:root[data-theme="dark"] .public-user-chip,
:root[data-theme="dark"] .public-code-input,
:root[data-theme="dark"] .admin-login-card input {
  border-color: #405047 !important;
  background-color: #202a24 !important;
}
:root[data-theme="dark"] .public-entry-card,
:root[data-theme="dark"] .public-compare,
:root[data-theme="dark"] .public-compare-note,
:root[data-theme="dark"] .public-domain-chip,
:root[data-theme="dark"] .public-code,
:root[data-theme="dark"] .home-illustration,
:root[data-theme="dark"] .home-steps article > span,
:root[data-theme="dark"] .public-trust > span:first-child,
:root[data-theme="dark"] .public-path-number,
:root[data-theme="dark"] .public-question-area,
:root[data-theme="dark"] .public-answer-letter,
:root[data-theme="dark"] .public-success-mark,
:root[data-theme="dark"] .public-phase-icon {
  border-color: #405047 !important;
  background-color: #29382f !important;
}
:root[data-theme="dark"] .public-button-primary,
:root[data-theme="dark"] .admin-login-card button {
  border-color: #4e9e70 !important;
  background: #216542 !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .public-button-primary:hover,
:root[data-theme="dark"] .admin-login-card button:hover { background: #2b7950 !important; }
:root[data-theme="dark"] .public-button-secondary:hover,
:root[data-theme="dark"] .public-phase-button:hover,
:root[data-theme="dark"] .public-answer:not(:disabled):hover { background-color: #2b3b31 !important; }
:root[data-theme="dark"] .public-brand-mark,
:root[data-theme="dark"] .home-brand-mark {
  border-color: #4e9e70 !important;
  background: #216542 !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .public-footer,
:root[data-theme="dark"] .home-footer { color: var(--site-footer-color, #e3ece5) !important; }
:root[data-theme="dark"] .public-error,
:root[data-theme="dark"] .admin-login-error { color: #ffaaa5 !important; }
:root[data-theme="dark"] .public-feedback.is-good { background: #243b2c !important; }
:root[data-theme="dark"] .public-feedback.is-kind { background: #3a3020 !important; }
:root[data-theme="dark"] .public-toast { border-color: #405047 !important; background: #202a24 !important; }
:root[data-theme="dark"] .public-progress { background: #35443a !important; }
:root[data-theme="dark"] body.home-mode,
:root[data-theme="dark"] body.admin-login-mode { background: var(--site-page-background, #141b17) !important; }
:root[data-theme="dark"] .home-illustration {
  background: radial-gradient(circle at 51% 48%, #29382f 0 24%, #25342b 24.5% 46%, #202d25 46.5% 68%, #19241d 68.5%) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #aab8af !important; opacity: 1; }