/* Appearance is independent of protocol identity. Dark keeps its approved skin. */
html{color-scheme:dark}
/* A still, softly lit canvas. Only the colour changes with the protocol;
   registered colour interpolation avoids snapping between gradient images. */
@property --workspace-wash{syntax:"<color>";inherits:true;initial-value:transparent}
html[data-appearance] body{
 --workspace-wash:rgba(var(--toxin-rgb),.10);
 background:
  radial-gradient(ellipse clamp(420px,42vw,1100px) clamp(500px,75vh,1100px) at 0% 18%,var(--workspace-wash),transparent 78%),
  radial-gradient(ellipse clamp(400px,38vw,1000px) clamp(500px,70vh,1000px) at 100% 88%,var(--workspace-wash),transparent 78%),
  #101113;
 background-attachment:fixed;
 transition:--workspace-wash 650ms ease;
}
@media(prefers-reduced-motion:reduce){html[data-appearance] body{transition:none}}
/* Keep the old snapshot solid underneath: the new skin dissolves over it
   without a white flash, a dark dip, movement or a temporary blank page. */
::view-transition,::view-transition-group(root),::view-transition-image-pair(root),::view-transition-old(root),::view-transition-new(root){pointer-events:none}
::view-transition-group(root){animation-duration:420ms;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:appearance-dissolve 420ms cubic-bezier(.22,.61,.36,1) both;mix-blend-mode:normal}
@keyframes appearance-dissolve{from{opacity:0}to{opacity:1}}
html.appearance-dissolving,html.appearance-dissolving :is(body,.panel,.output-box,input,textarea,select,button,label,.access-modal,.help-modal){transition:background-color 360ms ease,color 360ms ease,border-color 360ms ease,box-shadow 360ms ease!important}
@media(prefers-reduced-motion:reduce){::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}html.appearance-dissolving,html.appearance-dissolving *{transition:none!important}}
.appearance-settings{margin:18px 0;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.appearance-settings h3{margin:0 0 10px;font:600 14px/1.4 var(--font-body);color:var(--text)}
.appearance-options{display:flex;gap:6px;max-width:360px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.appearance-options button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;min-height:44px;padding:7px 10px;background:transparent;color:var(--text-dim);border:1px solid transparent;border-radius:8px;font:600 13px/1.4 var(--font-body);cursor:pointer}
.appearance-options button[aria-pressed="true"]{background:var(--surface-2);border-color:var(--border-strong);color:var(--text);box-shadow:0 2px 5px #0001}
.appearance-options button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.appearance-options button span{font-size:18px;line-height:1}
.appearance-hint{margin:9px 0 0;font:400 12px/1.5 var(--font-body);color:var(--text-dim)}
html[data-appearance="light"]{
 color-scheme:light;background:#f5f5f2;
 --bg:#f5f5f2;--surface:#ffffff;--surface-2:#f0f2ef;--border:#d9ded9;--border-strong:#a7b1aa;
 --text:#202a28;--text-dim:#59665f;--text-faint:#68746d;--accent:#46564e;--danger:#b72c39;--danger-dim:#fcebee;
 --skin-panel:#fff;--skin-inset:#f6f7f4;--skin-border:#d9ded9;--skin-control-border:#87998c;--skin-muted:#59665f;--skin-ink:#202a28;--skin-accent:#386719;
 --skin-shadow:0 8px 28px -18px #233a2826;--skin-float-shadow:0 20px 65px #213a2826;
}
html[data-appearance="light"] body{--workspace-wash:rgba(var(--toxin-rgb),.065);background-color:var(--bg);color:var(--text)}
html[data-appearance="light"] body.protocol-ms{--skin-accent:#98406e}
html[data-appearance="light"] body.protocol-fairy{--skin-accent:#7248a3}
html[data-appearance="light"] body.protocol-blitz{--skin-accent:#825813}
html[data-appearance="light"] body.protocol-beida{--skin-accent:#885427}
html[data-appearance="light"] body.protocol-of{--skin-accent:#086a88}
html[data-appearance="light"] body.protocol-preply{--skin-accent:#50559b}
html[data-appearance="light"] .header{border-color:var(--skin-border)}
/* Keep the actual brand artwork vivid; a fine edge supplies contrast on white
   instead of darkening every protocol into olive, plum or brown. */
html[data-appearance="light"] #kbLogo{filter:saturate(1.12) drop-shadow(0 .5px .4px #20342580)!important}
html[data-appearance="light"] body.protocol-fairy #kbLogo{filter:brightness(1.14) saturate(.82) drop-shadow(0 .5px .4px #66315080)!important}
html[data-appearance="light"] :is(.panel,#accountPanel.account-panel,.access-modal,.help-modal,#krispIntegrationPanel[popover],#krispInboxPanel){background:var(--skin-panel)!important;border-color:var(--skin-border)!important;color:var(--skin-ink)!important;box-shadow:var(--skin-shadow)!important}
html[data-appearance="light"] :is(.access-modal,.help-modal,#krispIntegrationPanel[popover],#krispInboxPanel){box-shadow:var(--skin-float-shadow)!important}
html[data-appearance="light"] .help-modal-head{background:var(--skin-inset)!important;border-color:var(--skin-border)!important}
html[data-appearance="light"] :is(.first-guide-intro p,.first-guide-step p,.first-guide-details>summary,.first-guide-secondary){color:var(--skin-muted)!important}
html[data-appearance="light"] :is(.help-modal,.access-modal,#krispIntegrationPanel,#krispInboxPanel) :is(p,summary,li){color:var(--skin-muted)!important}
html[data-appearance="light"] :is(.help-modal,.access-modal,#krispIntegrationPanel,#krispInboxPanel) strong{color:var(--skin-ink)!important}
html[data-appearance="light"] .first-guide-icon{background:#e9f0e1!important;border-color:#bfceb0!important;color:var(--skin-accent)!important}
html[data-appearance="light"] :is(#licenseModalOverlay,.help-modal-overlay,.access-modal-overlay){background:rgba(45,57,50,.34)!important;backdrop-filter:blur(6px)}
html[data-appearance="light"] :is(h1,h2,h3,h4,.field-label,.account-title,.account-value,.account-trials-title,.feedback-card-label,.license-modal-plan-name,.krisp-pending-title,.radar-van-title,.radar-van-item-title){color:var(--skin-ink)!important;text-shadow:none!important}
html[data-appearance="light"] :is(.account-summary,.account-label,.account-support,.account-support>summary,.owner-fold>summary,.small-note,.brand-promise,.length-summary,.feedback-privacy,.feedback-status,.license-modal-subtitle,.license-modal-trust,.license-modal-step-note,.help-subtitle,.help-step-copy,.krisp-everyday-hint,.krisp-card-heading p,.krisp-connection-status p,.krisp-setup-steps,.krisp-setup-steps p,.krisp-inbox-eyebrow,.krisp-inbox-description,.krisp-guide-figure figcaption,.krisp-guide-figure figcaption .help-step-copy,.radar-van-hint,.radar-van-item-meta,.radar-van-item-preview){color:var(--skin-muted)!important}
html[data-appearance="light"] :is(.brand-promise strong,.krisp-setup-steps strong,.krisp-inbox-heading h2,.help-modal p strong,.license-modal-trust strong){color:var(--skin-ink)!important}
html[data-appearance="light"] :is(input:not([type="radio"]):not([type="checkbox"]),textarea,select,.output-box,.account-owner-result){background:var(--skin-inset)!important;border-color:var(--skin-control-border)!important;color:var(--skin-ink)!important;box-shadow:none!important}
html[data-appearance="light"] :is(textarea,input)::placeholder{color:#6b756f!important;opacity:1}
html[data-appearance="light"] :is(input,textarea,select,[contenteditable="true"]):focus{border-color:var(--skin-accent)!important;outline-color:var(--skin-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--skin-accent) 12%,transparent)!important}
html[data-appearance="light"] #outputBox.empty,html[data-appearance="light"] #outputBox.empty::after{color:var(--skin-muted)!important}
html[data-appearance="light"] :is(.field,.help-divider,.account-actions,.krisp-controls-row,.krisp-inbox,.radar-van-inbox,.appearance-settings){border-color:var(--skin-border)!important}
html[data-appearance="light"] :is(.btn-secondary,.feedback-submit-btn,#licenseModalCloseBtn,.access-modal-close,.help-modal-close,#krispPanelClose,#krispInboxClose){background:var(--skin-panel)!important;border-color:var(--skin-control-border)!important;color:var(--skin-ink)!important;box-shadow:0 1px 3px #20342508!important}
html[data-appearance="light"] :is(.btn-secondary,.feedback-submit-btn):hover:not(:disabled){background:#edf1eb!important;border-color:var(--skin-accent)!important}
html[data-appearance="light"] :is(button,a,summary):focus-visible{outline-color:var(--skin-accent)!important}
html[data-appearance="light"] :is(button:disabled){opacity:.5}
html[data-appearance="light"] .pill-chip{background:#edf0eb!important;color:var(--skin-muted)!important}
html[data-appearance="light"] #helpBtn{background:#fff8e9!important;border-color:#d9c393!important;color:#6f531d!important}
html[data-appearance="light"] #helpBtn::before{background:#eee2c8!important;color:#6f531d!important}
html[data-appearance="light"] #krispIntegrationBtn{color:#386719!important}
html[data-appearance="light"] #krispPendingBtn[data-has-pending="true"]{background:#fff8eb!important;border-color:#c4a56b!important;color:#70531d!important}
html[data-appearance="light"] .krisp-inbox-badge{background:#e7ece6!important;color:#4d5c50!important}
html[data-appearance="light"] .mode-badge{background:var(--skin-brand)!important;color:#fff!important;border-color:var(--skin-brand)!important;text-shadow:none}
/* Readable, saturated companions to the original neon artwork. These are
   brand-only tokens: field focus, report content and dark mode stay intact. */
html[data-appearance="light"] body{--skin-brand:#467500}
html[data-appearance="light"] body.protocol-ms{--skin-brand:#b31580}
html[data-appearance="light"] body.protocol-fairy{--skin-brand:#a33382}
html[data-appearance="light"] body.protocol-blitz{--skin-brand:#806400}
html[data-appearance="light"] body.protocol-beida{--skin-brand:#a6500a}
html[data-appearance="light"] body.protocol-of{--skin-brand:#06718f}
html[data-appearance="light"] body.protocol-preply{--skin-brand:#7042b2}
html[data-appearance="light"] #protocolSelect>label:has(input[value="MA"]){--skin-protocol-name:#467500}
html[data-appearance="light"] #protocolSelect>label:has(input[value="MS"]){--skin-protocol-name:#b31580}
html[data-appearance="light"] #protocolSelect>label:has(input[value="FAIRY"]){--skin-protocol-name:#7640ad}
html[data-appearance="light"] #protocolSelect>label:has(input[value="BLITZ"]){--skin-protocol-name:#806400}
html[data-appearance="light"] #protocolSelect>label:has(input[value="BEIDA"]){--skin-protocol-name:#a6500a}
html[data-appearance="light"] #protocolSelect>label:has(input[value="OF"]){--skin-protocol-name:#06718f}
html[data-appearance="light"] #protocolSelect>label:has(input[value="PREPLY"]){--skin-protocol-name:#7042b2}
html[data-appearance="light"] #protocolSelect>label{background:color-mix(in srgb,var(--armory) 7%,white)!important;border-color:color-mix(in srgb,var(--armory) 28%,#6b7d70)!important;color:var(--skin-protocol-name)!important;box-shadow:none!important}
html[data-appearance="light"] #protocolSelect>label:hover{background:color-mix(in srgb,var(--armory) 11%,white)!important}
html[data-appearance="light"] #protocolSelect>label:has(input:checked){background:color-mix(in srgb,var(--armory) 14%,white)!important;border-color:var(--skin-accent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--armory) 12%,transparent)!important}
html[data-appearance="light"] #protocolSelect>label::after{color:var(--skin-muted)!important}
html[data-appearance="light"] #protocolSelect .protocol-help{background:#ffffff80!important;border-color:#b8c3b8!important;color:#536451!important;box-shadow:none!important}
html[data-appearance="light"] #protocolSelect .info-icon{background:#ffffffb0!important;border-color:#b8c3b8!important;color:#536451!important;box-shadow:none!important}
html[data-appearance="light"] .info-icon::after{background:#fff!important;border-color:var(--skin-border)!important;color:var(--skin-ink)!important;box-shadow:var(--skin-float-shadow)!important}
html[data-appearance="light"] #lengthFormatSelect{background:#edf0e9;border-color:var(--skin-border);box-shadow:none}
html[data-appearance="light"] #lengthFormatSelect>label{background:#f5f6f3!important;border-color:var(--skin-control-border)!important;color:var(--skin-ink)!important;box-shadow:none!important}
html[data-appearance="light"] #lengthFormatSelect>label:has(input:checked){background:color-mix(in srgb,var(--skin-accent) 8%,white)!important;border-color:var(--skin-accent)!important}
html[data-appearance="light"] #lengthFormatSelect>label::after{color:var(--skin-muted)!important}
html[data-appearance="light"] #lengthFormatSelect>label:has(input:checked) .length-detail-icon{color:var(--skin-accent)}
html[data-appearance="light"] #generateSummary button{color:var(--skin-accent)!important}
html[data-appearance="light"] #studentGenderSelect{background:#f5f6f3;border-color:var(--skin-border)}
html[data-appearance="light"] #studentGenderSelect>label:has(input[value="boy"]){--pronoun-rgb:43,101,165}
html[data-appearance="light"] #studentGenderSelect>label:has(input[value="girl"]){--pronoun-rgb:162,60,111}
html[data-appearance="light"] #studentGenderSelect>label{border-color:color-mix(in srgb,rgb(var(--pronoun-rgb)) 55%,#6b7d70)}
html[data-appearance="light"] #studentGenderSelect>label:has(input:checked){border-color:rgb(var(--pronoun-rgb))}
html[data-appearance="light"] #studentGenderSelect>label>small{color:var(--skin-muted)}
html[data-appearance="light"] #studentGenderSelect>label:has(input:checked)>small{color:var(--skin-ink)}
html[data-appearance="light"] .generate-btn{background:linear-gradient(105deg,color-mix(in srgb,var(--toxin) 72%,#5c762f),var(--toxin-bright))!important;color:#152014!important;border-color:transparent!important;box-shadow:0 5px 18px -9px rgba(var(--toxin-rgb),.45)!important}
html[data-appearance="light"] .generate-btn::before,html[data-appearance="light"] .generate-btn::after{opacity:.15!important}
html[data-appearance="light"] :is(.rating-caption,.rating-caption .verdict,#ratingCaption,.verdict){color:var(--skin-muted)!important}
html[data-appearance="light"] .rating-btn.selected{outline-color:#38463e!important}
html[data-appearance="light"] :is(.account-metric,.account-owner-tools,.radar-van,.radar-van-item,.radar-van-token,.krisp-pending-card,.krisp-connection-status,.help-card,.first-guide-step,.help-workflow-intro,.license-modal-section,.krisp-guide-figure){background:var(--skin-inset)!important;border-color:var(--skin-border)!important;color:var(--skin-ink)!important;box-shadow:none!important}
html[data-appearance="light"] :is(.license-modal-section.primary,.license-modal-section.pro){background:#f6f8f1!important}
html[data-appearance="light"] :is(.license-modal-pill,.access-eyebrow,.krisp-setup-steps li::marker){color:var(--skin-accent)!important}
html[data-appearance="light"] :is(.help-modal a,.krisp-guide-full,#krispSetupGuide>summary,#krispConnectionDetails>summary){color:var(--skin-accent)!important}
html[data-appearance="light"] :is(#krispConnectionState,#krispInboxStatus,#krispInboxEmpty,#krispLastReceived,#krispSetupGuide h4){color:var(--skin-muted)!important}
html[data-appearance="light"] #krispInboxEmpty{border-color:var(--skin-border)!important}
html[data-appearance="light"] #krispWaitBtn[aria-pressed="true"]{background:#ecf5e7!important;border-color:#85a873!important;color:#315e20!important}
html[data-appearance="light"] #feedbackCard{background:#f6f7f4;border-color:var(--skin-border);box-shadow:none}
html[data-appearance="light"] :is(#feedbackTabs,#feedbackStars){background:#e9ede7!important;border-color:var(--skin-border)!important}
html[data-appearance="light"] .feedback-tab{color:var(--skin-muted)!important}
html[data-appearance="light"] .feedback-tab.active{background:#fff!important;color:var(--skin-ink)!important;border-color:#c4cec2!important}
html[data-appearance="light"] .feedback-star{color:#6b756f!important}
html[data-appearance="light"] :is(.feedback-star.filled,.feedback-star.selected,.feedback-star.active,.feedback-star[aria-pressed="true"]){color:#856019!important}
html[data-appearance="light"] #lintResults.lint-warn{background:#faf7ef;border-color:#e1d8c5;border-left-color:#b79963;color:var(--skin-muted)}
html[data-appearance="light"] #lintResults .lint-title{color:var(--skin-ink)}
html[data-appearance="light"] .output-box.error{background:#fff0f1!important;border-color:#dca9ae!important;color:#a52835!important}
html[data-appearance="light"] .lint-ok{background:#edf5e9!important;color:#356026!important;border-color:#b6c9ac!important}
html[data-appearance="light"] .mobile-generate-bar{background:#ffffffed!important;border-color:var(--skin-border)!important;box-shadow:0 -5px 25px #243b2814!important}
html[data-appearance="light"] .mobile-generate-summary{color:var(--skin-ink)!important}
html[data-appearance="light"] .mobile-generate-btn{background:var(--skin-accent)!important;color:#fff!important}
html[data-appearance="light"] .appearance-options{background:#edf0e9}
html[data-appearance="light"] .appearance-options button{border-color:var(--skin-control-border)}
html[data-appearance="light"] .appearance-options button[aria-pressed="true"]{background:#fff}
@media(prefers-reduced-motion:reduce){.appearance-options button{transition:none}}
/* Account is a compact settings panel, not a second workspace. Scope every
   adjustment here so the report editor and sign-in dialog retain their scale. */
html #accountPanel.account-panel{padding:20px}
html #accountPanel .account-panel-head{margin-bottom:10px;gap:12px}
html #accountPanel .account-title{font-size:20px;font-weight:600;line-height:1.3}
html #accountPanel .account-summary{font-size:13px;line-height:1.45}
html #accountPanel .account-grid{gap:8px;margin-bottom:10px}
html #accountPanel .account-metric{padding:12px 14px}
html #accountPanel .account-label{margin-bottom:4px}
html #accountPanel .account-value{font-size:15px;font-weight:600;line-height:1.4}
html #accountPanel .appearance-settings{margin:12px 0;padding:12px 0}
html #accountPanel .appearance-settings h3{font-size:13px;margin-bottom:8px}
html #accountPanel .appearance-hint{margin-top:7px}
html #accountPanel .account-support{margin:10px 0}
html #accountPanel .account-support>summary,html #accountPanel .owner-fold>summary{min-height:44px;padding:8px 0;box-sizing:border-box;font-size:13px}
html #accountPanel .account-owner-tools{padding:0 14px;margin-bottom:10px}
html #accountPanel .owner-fold[open]>summary{margin-bottom:12px}
html #accountPanel .account-owner-tools .help-divider{margin:16px 0}
html #accountPanel .account-actions{padding-top:12px;margin-top:14px;gap:8px}
html #accountPanel .btn-secondary,html #accountPanel a.btn-secondary{min-height:44px}
@media(max-width:560px){html #accountPanel.account-panel{padding:16px}}