/* Student Apps Design System v1
 * Shared semantic tokens and preset layer. App themes choose validated token names;
 * app code should not fork raw colors or component geometry.
 */
:root{
  --sd-canvas:#f8f9ff;
  --sd-surface:#ffffff;
  --sd-surface-muted:#f2f4f8;
  --sd-text-primary:#182033;
  --sd-text-secondary:#667085;
  --sd-border:#e2e6ef;
  --sd-accent:#5964d8;
  --sd-accent-contrast:#ffffff;
  --sd-accent-soft:#eef0ff;
  --sd-secondary:#d45a9f;
  --sd-secondary-soft:#fff0f7;
  --sd-success:#16794f;
  --sd-warning:#a65b00;
  --sd-danger:#b42318;
  --sd-focus:#3157d5;
  --sd-space-1:4px;
  --sd-space-2:8px;
  --sd-space-3:12px;
  --sd-space-4:16px;
  --sd-space-5:20px;
  --sd-space-6:24px;
  --sd-space-8:32px;
  --sd-space-10:40px;
  --sd-space-12:48px;
  --sd-space-16:64px;
  --sd-radius-sm:8px;
  --sd-radius-md:12px;
  --sd-radius-lg:16px;
  --sd-radius-xl:22px;
  --sd-radius-pill:999px;
  --sd-shadow-card:0 8px 26px rgba(28,37,72,.07);
  --sd-shadow-float:0 18px 48px rgba(28,37,72,.12);
  --sd-motion-feedback:130ms;
  --sd-motion-selection:190ms;
  --sd-motion-reveal:280ms;
}

body[data-accent-token="violet"]{--sd-accent:#6558d9;--sd-accent-soft:#f0efff;--sd-focus:#4f46c7}
body[data-accent-token="rose"]{--sd-accent:#c84d86;--sd-accent-soft:#fff0f6;--sd-focus:#a93d71}
body[data-accent-token="sky"]{--sd-accent:#2678b8;--sd-accent-soft:#edf8ff;--sd-focus:#14659f}
body[data-accent-token="mint"]{--sd-accent:#187c68;--sd-accent-soft:#eafaf5;--sd-focus:#0b6857}
body[data-accent-token="amber"]{--sd-accent:#9a6500;--sd-accent-soft:#fff7df;--sd-focus:#7c5100}
body[data-accent-token="coral"]{--sd-accent:#b85245;--sd-accent-soft:#fff1ee;--sd-focus:#963d32}
body[data-accent-token="indigo"]{--sd-accent:#4256b8;--sd-accent-soft:#eef1ff;--sd-focus:#30449f}

body[data-secondary-accent-token="rose"]{--sd-secondary:#c84d86;--sd-secondary-soft:#fff0f6}
body[data-secondary-accent-token="sky"]{--sd-secondary:#2678b8;--sd-secondary-soft:#edf8ff}
body[data-secondary-accent-token="mint"]{--sd-secondary:#187c68;--sd-secondary-soft:#eafaf5}
body[data-secondary-accent-token="amber"]{--sd-secondary:#bd7600;--sd-secondary-soft:#fff7df}
body[data-secondary-accent-token="coral"]{--sd-secondary:#c55b4d;--sd-secondary-soft:#fff1ee}
body[data-secondary-accent-token="violet"]{--sd-secondary:#6558d9;--sd-secondary-soft:#f0efff}
body[data-secondary-accent-token="indigo"]{--sd-secondary:#4256b8;--sd-secondary-soft:#eef1ff}

body[data-surface-token="paper"]{--sd-canvas:#f8f9ff;--sd-surface:#fff;--sd-surface-muted:#f3f5f9}
body[data-surface-token="warm"]{--sd-canvas:#fffaf5;--sd-surface:#fffdfa;--sd-surface-muted:#f8f1e8}
body[data-surface-token="cool"]{--sd-canvas:#f5f9fc;--sd-surface:#fff;--sd-surface-muted:#edf3f7}
body[data-surface-token="tint"]{--sd-canvas:var(--sd-accent-soft);--sd-surface:#fff;--sd-surface-muted:#f5f5fa}

html{background:var(--sd-canvas);color:var(--sd-text-primary)}
body{color:var(--sd-text-primary);background:
  radial-gradient(circle at 8% 2%,color-mix(in srgb,var(--sd-secondary) 16%,transparent) 0,transparent 28%),
  radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--sd-accent) 14%,transparent) 0,transparent 30%),
  linear-gradient(180deg,var(--sd-canvas),#fff 76%)}

.qd-main{width:min(760px,100%);padding-inline:16px}
.qd-header{border-color:color-mix(in srgb,var(--sd-border) 82%,transparent);color:var(--sd-text-primary)}
.qd-brand{color:var(--sd-text-primary)}
.qd-card,.qd-feature-grid article,.qd-visual-card,.qd-home-step-grid article,.qd-pain-grid span{border-color:var(--sd-border);background:var(--sd-surface);box-shadow:var(--sd-shadow-card)}
.qd-card{border-radius:var(--sd-radius-xl);padding:20px}
.qd-kicker,.qd-section-label{color:var(--sd-accent)}
.qd-hero .qd-kicker{background:linear-gradient(90deg,var(--sd-accent-soft),var(--sd-secondary-soft));border-color:color-mix(in srgb,var(--sd-accent) 18%,var(--sd-border))}
.qd-hero{border-radius:24px;background:linear-gradient(145deg,var(--sd-surface),color-mix(in srgb,var(--sd-accent-soft) 48%,#fff),color-mix(in srgb,var(--sd-secondary-soft) 44%,#fff));box-shadow:var(--sd-shadow-float)}
.qd-hero h1,.qd-result-hero h1{color:var(--sd-text-primary)}
.qd-hero>p,.qd-card p,.qd-result-hero p{color:var(--sd-text-secondary)}
.qd-hero-icon{background:linear-gradient(145deg,#fff,var(--sd-accent-soft));box-shadow:0 10px 26px color-mix(in srgb,var(--sd-accent) 18%,transparent)}

.qd-primary{min-height:52px;border-radius:16px;background:linear-gradient(105deg,var(--sd-accent),color-mix(in srgb,var(--sd-accent) 76%,var(--sd-secondary)));color:var(--sd-accent-contrast);box-shadow:0 10px 24px color-mix(in srgb,var(--sd-accent) 27%,transparent);transition:transform var(--sd-motion-feedback) ease,box-shadow var(--sd-motion-feedback) ease}
.qd-secondary{min-height:48px;background:var(--sd-accent-soft);color:var(--sd-accent);border-radius:14px}
.qd-link{min-height:48px;color:var(--sd-text-secondary)}
.qd-danger{min-height:48px;color:var(--sd-danger)}
.qd-primary,.qd-secondary,.qd-danger,.qd-link,.qd-options button,.qd-saved-card{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.qd-primary:focus-visible,.qd-secondary:focus-visible,.qd-danger:focus-visible,.qd-link:focus-visible,.qd-options button:focus-visible,.qd-saved-card:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid color-mix(in srgb,var(--sd-focus) 72%,#fff);outline-offset:3px}

.qd-question{max-width:640px;margin:18px auto 0}
.qd-progress-meta{color:var(--sd-text-secondary);font-size:12px}
.qd-progress{height:8px;background:var(--sd-surface-muted)}
.qd-progress i{background:linear-gradient(90deg,var(--sd-accent),var(--sd-secondary));transition:width var(--sd-motion-selection) ease}
.qd-options button{position:relative;min-height:52px;padding:14px 46px 14px 15px;border:1px solid var(--sd-border);border-radius:16px;background:var(--sd-surface);color:var(--sd-text-primary);transition:transform var(--sd-motion-feedback) ease,border-color var(--sd-motion-selection) ease,background var(--sd-motion-selection) ease,box-shadow var(--sd-motion-selection) ease}
.qd-options button:hover{border-color:color-mix(in srgb,var(--sd-accent) 55%,var(--sd-border));background:color-mix(in srgb,var(--sd-accent-soft) 46%,#fff)}
.qd-options button.is-selected,.qd-options button[aria-pressed="true"]{border-color:var(--sd-accent);background:var(--sd-accent-soft);box-shadow:inset 4px 0 0 var(--sd-accent),0 7px 18px color-mix(in srgb,var(--sd-accent) 13%,transparent)}
.qd-options button.is-selected:after,.qd-options button[aria-pressed="true"]:after{content:"✓";position:absolute;right:15px;top:50%;display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--sd-accent);color:var(--sd-accent-contrast);transform:translateY(-50%);font-size:13px;font-weight:950}
.qd-options button:disabled{cursor:default}

.qd-result-hero{padding:22px 18px}
.qd-result-hero-has-image{grid-template-columns:minmax(0,1.35fr) minmax(96px,.65fr);gap:10px;background:linear-gradient(135deg,var(--sd-accent-soft),#fff 52%,var(--sd-secondary-soft));border-color:color-mix(in srgb,var(--sd-accent) 18%,var(--sd-border))}
.qd-result-hero-has-image .qd-result-main-image{max-height:190px}
.qd-result-summary{color:var(--sd-accent)!important}
.qd-trait-grid{gap:8px}
.qd-warning{background:color-mix(in srgb,#fff7e8 80%,var(--sd-surface))}
.qd-gate,.qd-gate-visual{background:linear-gradient(145deg,var(--sd-accent-soft),var(--sd-secondary-soft) 58%,#fff);border-color:color-mix(in srgb,var(--sd-accent) 22%,var(--sd-border))}
.qd-lock-grid span{min-height:48px}
.qd-gate-visual .qd-lock-grid-preview-v2 .qd-lock-preview-card-v2{min-height:76px}
.qd-lock-blur-lines-v2{filter:blur(3px);opacity:.5}
.qd-lock-blur-lines-v2 i{background:color-mix(in srgb,var(--sd-text-secondary) 48%,var(--sd-surface-muted))}
.qd-today{background:linear-gradient(135deg,var(--sd-accent),color-mix(in srgb,var(--sd-accent) 68%,var(--sd-secondary)));color:var(--sd-accent-contrast)}
.qd-modal{background:var(--sd-surface);color:var(--sd-text-primary)}
.qd-notice{background:var(--sd-surface-muted);color:var(--sd-text-secondary)}

body[data-style-preset="quick-diagnosis"] .qd-main{max-width:760px}
body[data-style-preset="quick-diagnosis"] .qd-hero{isolation:isolate}
body[data-style-preset="flagship"]{--sd-radius-xl:24px;--sd-shadow-card:0 10px 32px rgba(28,37,72,.085)}
body[data-style-preset="flagship"] .qd-main{max-width:860px}
body[data-style-preset="flagship"] .qd-hero{box-shadow:0 22px 64px color-mix(in srgb,var(--sd-accent) 16%,transparent)}
body[data-style-preset="utility"]{--sd-radius-xl:18px;--sd-shadow-card:0 5px 18px rgba(28,37,72,.055)}
body[data-style-preset="utility"] .qd-main{max-width:720px}
body[data-style-preset="utility"] .qd-hero{box-shadow:var(--sd-shadow-card)}

body[data-illustration-style="minimal"] .qd-hero-icon{transform:none;box-shadow:none}
body[data-illustration-style="editorial"] .qd-visual-card,body[data-illustration-style="editorial"] .qd-result-hero{border-radius:16px}
body[data-illustration-style="character"] .qd-result-main-image{filter:drop-shadow(0 12px 16px color-mix(in srgb,var(--sd-accent) 14%,transparent))}

@media(max-width:390px){
  .qd-main{padding-inline:12px}
  .qd-card{padding:16px}
  .qd-question h2{font-size:20px;line-height:1.45}
  .qd-options{gap:8px}
  .qd-options button{min-height:50px;padding:12px 42px 12px 13px}
  .qd-result-hero-has-image{grid-template-columns:minmax(0,1.42fr) minmax(82px,.58fr);padding:18px 14px}
  .qd-result-hero-has-image .qd-result-main-image{max-height:155px}
  .qd-trait-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:340px){
  .qd-main{padding-inline:12px}
  .qd-result-hero-has-image{grid-template-columns:1fr}
  .qd-result-hero-art{place-items:center}
  .qd-result-hero-has-image .qd-result-main-image{max-height:128px}
  .qd-lock-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .qd-primary:hover,.qd-options button:hover,.qd-hero:hover .qd-hero-icon{transform:none}
}