/* Shared interface system. Learning typography belongs to design-learning.css. */
:root.atelier-theme {
  --design-ink: #242935;
  --design-muted: #697384;
  --design-line: #e4e7ed;
  --design-accent: #384c86;
  --design-accent-hover: #2e3f70;
  --design-surface: #fff;
  --design-soft: #f1f4fa;
  --design-danger: #b74255;
  --design-success: #30735d;
  --design-warm: #b08653;
  --design-radius: 14px;
  --design-shadow: 0 8px 28px rgb(31 45 75 / 5%);
  --accent: var(--design-accent);
  --accent-dark: var(--design-accent-hover);
  --ink: var(--design-ink);
  --dark: var(--design-ink);
  --muted: var(--design-muted);
  --line: var(--design-line);
  --paper: #fbfaf8;
  --soft: var(--design-soft);
  --blue: var(--design-accent);
  --red: var(--design-danger);
  --shadow: var(--design-shadow);
  --field-border: #d9dfe8;
  --field-text: var(--design-ink);
  --field-muted: var(--design-muted);
  --field-accent: var(--design-accent);
  --field-active: var(--design-soft);
  --field-error: var(--design-danger);
  font-synthesis: none;
}
html.atelier-theme body { -webkit-font-smoothing: antialiased; }
html.atelier-theme body .shell .topbar {
  background: rgb(251 250 248 / 94%);
  border-bottom-color: var(--design-line);
  box-shadow: 0 1px 0 rgb(255 255 255 / 80%);
}
html.atelier-theme body .topbar .brand-name strong { font-weight: 700; }
html.atelier-theme body .topbar .brand-name small { color: var(--design-muted); }
html.atelier-theme body .topbar :is(.language-switch,.personal-entry) { border-radius: 11px; }
html.atelier-theme body .topbar .language-switch { background: var(--design-surface); }
html.atelier-theme body .topbar .language-switch :is(.icon,select) { color: var(--design-muted); }
html.atelier-theme body .topbar .personal-entry { color: var(--design-muted); }
html.atelier-theme body .topbar .personal-entry:is(:hover,.active) { color: var(--accent); background: var(--soft); }
html.atelier-theme body .personal-entry .avatar { color: var(--accent); background: #eaf0fa; border-radius: 10px; }

/* Primary, outlined, tonal and destructive actions share one shape and rhythm. */
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace,.topbar) :is(.btn,.login-button,.generation-send) {
  min-height: 42px;
  padding: 10px 17px;
  gap: 8px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  color: #fff;
  background: var(--accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 2px 3px rgb(31 45 75 / 7%), inset 0 1px 0 rgb(255 255 255 / 10%);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace,.topbar) :is(.btn,.login-button,.generation-send):hover {
  background: var(--accent-dark); border-color: var(--accent-dark);
  box-shadow: 0 4px 12px rgb(31 45 75 / 12%);
}
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace) .btn.secondary {
  color: #46556e; background: #fff; border-color: #d9dfe8; box-shadow: 0 1px 2px rgb(31 45 75 / 3%);
}
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace) .btn.secondary:hover {
  color: var(--accent); background: #f7f9fd; border-color: #aebdd8;
}
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace) .btn.soft {
  color: var(--accent); background: #eef2fa; border-color: #e3e9f4; box-shadow: none;
}
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace) .btn.soft:hover {
  color: var(--accent-dark); background: #e5ebf6; border-color: #c9d5eb;
}
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace) .btn.small { min-height: 36px; padding: 7px 12px; font-size: 12px; }
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace) :is(.btn.danger,.btn[data-danger="true"]) {
  color: var(--design-danger); background: #fff5f6; border-color: #edcbd2; box-shadow: none;
}
html.atelier-theme body :is(.shell .main[class],.modal,.task-workspace,.topbar) :is(.btn,.login-button,.generation-send):is(:disabled,[aria-disabled="true"]) {
  color: #748095; background: #edf0f5; border-color: #e1e6ee; box-shadow: none; transform: none; cursor: not-allowed; opacity: 1;
}
html.atelier-theme body :is(button,a,summary):focus-visible { outline-color: #526caf !important; outline-width: 2px; outline-offset: 3px; }
html.atelier-theme body :is(input,textarea,select):focus {
  border-color: #8197c4 !important; box-shadow: 0 0 0 3px rgb(56 76 134 / 8%) !important;
}
html.atelier-theme body :is(input,textarea,select)[aria-invalid="true"] { border-color: var(--design-danger) !important; }
html.atelier-theme body :is(input,textarea)::placeholder { color: #798394; }
html.atelier-theme body .hb-select-trigger { border-radius: 11px; background: #fff; }
html.atelier-theme body .hb-select-trigger:is(:focus-visible,[aria-expanded="true"]) { border-color: #8197c4; box-shadow: 0 0 0 3px rgb(56 76 134 / 8%) !important; }
html.atelier-theme body .hb-select-menu { border-radius: 13px; box-shadow: 0 12px 32px rgb(31 45 75 / 12%); }
html.atelier-theme body .hb-select-option { border-radius: 8px; }
html.atelier-theme body .hb-select-option:is([aria-selected="true"],:hover) { color: var(--accent); background: var(--soft); }
html.atelier-theme body .shell .main[class] :is(.link-btn,.reference-preview) { color: var(--accent); font-weight: 500; }
html.atelier-theme body .shell .main[class] :is(.link-btn,.reference-preview):hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
html.atelier-theme body .shell .main[class] .pill { border-radius: 7px; color: #647087; background: #fff; border-color: var(--line); }
html.atelier-theme body .shell .main[class] :is(.pill.accent,.pill.blue) { color: var(--accent); background: #eff3fb; border-color: #dce5f4; }

/* A restrained introduction hierarchy; these selectors contain UI copy only. */
html.atelier-theme body .shell .main[class] :is(.page-head > div > p,.page-heading > div > p,.section-heading > div > p,.auth-flow-intro > p,.auth-flow-brand,.empty > p,.account-person > p,.account-tile-copy > small,.footer,.workspace-footnote p),
html.atelier-theme body .shell.workspace-shell .main[class] :is(.page-head > div > p,.page-heading > div > p,.section-heading > div > p,.auth-flow-intro > p,.auth-flow-brand,.empty > p,.account-person > p,.account-tile-copy > small,.footer,.workspace-footnote p) {
  color: var(--design-muted); font-size: 12px; line-height: 1.65;
}
html.atelier-theme body .shell .main[class] :is(.page-heading,.page-head) h1 { font-weight: 650; letter-spacing: -.025em; }
html.atelier-theme body .shell .main[class] :is(.section-heading h2,.account-section h2) { font-weight: 650; color: var(--ink); }
html.atelier-theme body .shell .main[class] .empty { border: 1px dashed #d8dfe9; border-radius: 18px; background: #fff; }
html.atelier-theme body .shell .main[class] .empty-mark { color: var(--accent); background: var(--soft); }
html.atelier-theme body :is(.form-error,.modal-error,.composer-error):not(:empty) { color: #974255; background: #fff6f8; border: 1px solid #efd7de; border-radius: 9px; padding: 9px 11px; font-size: 12px; line-height: 1.65; }
html.atelier-theme body .flow-workspace .modal-head h2 { color: var(--ink); font-weight: 650; }
html.atelier-theme body .flow-navigation > span { color: var(--design-muted); font-size: 12px; }
html.atelier-theme body .flow-surface { border-color: var(--line); background: #fff; box-shadow: var(--design-shadow); }
html.atelier-theme body .modal-actions { border-top-color: var(--line); }
html.atelier-theme body .level-option { color: #536179; border-color: var(--line); border-radius: 11px; background: #fff; }
html.atelier-theme body .level-option:is(:hover,.active) { color: var(--accent); border-color: #bbcbe4; background: var(--soft); }
html.atelier-theme body .shell .main[class] .notice:not(.lesson-review-notice) { border-color: #dce4f0; background: #f4f7fb; color: #506078; font-size: 12px; line-height: 1.75; }
html.atelier-theme body .shell .main[class] .notice:not(.lesson-review-notice) p { font-size: 12px; }
html.atelier-theme body .shell .main[class] .footer { border-top-color: var(--line); }

/* The home composer is the focus; navigation and topic cards stay quiet. */
html.atelier-theme body.home-mode .generation-welcome h1 { font-weight: 650; letter-spacing: -.025em; }
html.atelier-theme body.home-mode .generation-composer,
html.atelier-theme body.home-mode .generation-composer:focus-within { border-radius: 21px; border-color: #dce1e8; }
html.atelier-theme body.home-mode .generation-composer::before,
html.atelier-theme body.home-mode .generation-composer:focus-within::before {
  border-color: #dce1e8; border-radius: 21px; background: #fff; box-shadow: 0 12px 36px rgb(31 45 75 / 5%);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
html.atelier-theme body.home-mode .generation-composer:focus-within::before { border-color: #99aace; box-shadow: 0 12px 36px rgb(31 45 75 / 6%), 0 0 0 3px rgb(56 76 134 / 4%); }
html.atelier-theme body.home-mode #generation-prompt:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
html.atelier-theme body.home-mode .composer-level { color: var(--design-muted); background: #f2f4f8; border-color: #e7ebf1; border-radius: 10px; }
html.atelier-theme body.home-mode .composer-level :is(select,.hb-select-trigger) { color: var(--accent); background: transparent; }
html.atelier-theme body.home-mode .composer-cost { color: var(--design-muted); font-size: 11px; }
html.atelier-theme body.home-mode .generation-home .topic-suggestion:nth-child(n) {
  border-color: #e4e7ed; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgb(31 45 75 / 2%);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
html.atelier-theme body.home-mode .generation-home .topic-suggestion:nth-child(n):hover { border-color: #aebdd8; background: #fafbfe; box-shadow: var(--design-shadow); transform: translateY(-2px); }
html.atelier-theme body.home-mode .generation-home .topic-suggestion strong { color: #4c5769; font-weight: 550; }
html.atelier-theme body.home-mode .workspace-actions button { color: var(--design-muted); background: #fff; border-color: var(--line); }
html.atelier-theme body.home-mode .workspace-actions button:is(:hover,[aria-expanded="true"]) { color: var(--accent); background: var(--soft); border-color: #c7d3e8; }

/* Keep the compact progress geometry intact at every generation state. */
html.atelier-theme body .main[class] .generation-home.has-generation .generation-project { background: #fff; border-color: #e0e5ee; box-shadow: var(--design-shadow); }
html.atelier-theme body .main[class] :is(.project-level,.progress-badge) { color: var(--accent); background: #edf2fb; border-color: #dce5f4; border-radius: 8px; }
html.atelier-theme body .main[class] :is(.progress-context,.project-eyebrow,.progress-eyebrow,.progress-footer p,.progress-current-label,.result-usage,.result-copy > span,.result-copy p,.generation-background-note) { color: var(--design-muted); font-size: 12px; }
html.atelier-theme body .main[class] .progress-track { background: #edf0f6; }
html.atelier-theme body .main[class] .generation-home.has-generation .progress-step { border-color: #e6eaf1; border-radius: 11px; background: #fafbfc; }
html.atelier-theme body .main[class] .progress-step.is-active { border-color: #b9c8e5; background: #f1f5fc; box-shadow: inset 3px 0 0 var(--accent); }
html.atelier-theme body .main[class] .progress-step-index { color: #7e8ba1; background: #fff; border-color: #e1e7f0; }
html.atelier-theme body .main[class] .progress-step.is-active .progress-step-index::after { border-color: #a2b6da; }
html.atelier-theme body .main[class] .progress-step-copy p { color: var(--design-muted); }
html.atelier-theme body .main[class] .progress-step.is-done .progress-step-index { color: var(--design-success); background: #eef6f2; border-color: #d7e9df; }
html.atelier-theme body .main[class] .progress-step.is-done .progress-step-copy strong { color: #507368; }
html.atelier-theme body .main[class] .progress-step.is-failed .progress-step-index { color: var(--design-danger); background: #fff3f5; border-color: #eed1d9; }
html.atelier-theme body .main[class] :is(.generation-failure,.generation-error) { color: #974255; background: #fff7f8; border-color: #efd7de; }
html.atelier-theme body .main[class] .progress-orbit::before { border-color: #d9e2f3; }
html.atelier-theme body .main[class] .progress-orbit::after { background: #f4f7fc; border-color: #e1e8f4; }
html.atelier-theme body .main[class] .generation-history { border-radius: 17px; border-color: var(--line); box-shadow: var(--design-shadow); }
html.atelier-theme body .main[class] .history-item { border-color: #e6eaf1; background: #fafbfc; }
html.atelier-theme body .main[class] .history-item:is(:hover,[aria-pressed="true"]) { color: var(--accent); background: #f4f7fd; border-color: #bbcbe4; }
html.atelier-theme body .main[class] :is(.close-history,.retry-history,.retry-generation) { color: var(--accent); background: #eef2fa; border-color: #dce5f4; border-radius: 9px; }
html.atelier-theme body .main[class] .history-item > span { color: var(--design-muted); }
html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] { margin-top: 12px; padding-top: 12px; }
html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .course-progress-head { display: flex; align-items: center; gap: 10px; }
html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .progress-artwork { display: none; }
html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .progress-heading { flex: 1; min-width: 0; }
html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .progress-heading h2 { font-size: 19px; line-height: 1.45; }
html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .progress-badge { flex-shrink: 0; margin-left: auto; }
html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .progress-step { padding-top: 6px; padding-bottom: 6px; }
html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .reload-course { color: var(--accent); border: 1px solid #dce5f4; border-radius: 8px; background: var(--soft); padding: 7px 10px; font-size: 12px; min-height: 34px; }

/* Account, balance and authentication use the same material and action scale. */
html.atelier-theme body .shell.workspace-shell .main[class] :is(.account-tile,.package,.auth-flow-surface) { border-color: var(--line); border-radius: 18px; background: #fff; box-shadow: 0 2px 7px rgb(31 45 75 / 2%); }
html.atelier-theme body .shell.workspace-shell .main[class] .account-section .section-heading h2 { color: var(--ink); font-size: 16px; font-weight: 600; }
html.atelier-theme body .shell.workspace-shell .main[class] .account-tile-copy strong { color: #43516a; font-size: 14px; font-weight: 550; }
html.atelier-theme body .shell.workspace-shell .main[class] .account-learning-actions > :is(a,button) { font-weight: 500; }
html.atelier-theme body .shell.workspace-shell .main[class] .account-tile:hover { border-color: #bdcbe2; background: #fafbfe; box-shadow: var(--design-shadow); }
html.atelier-theme body .shell.workspace-shell .main[class] :is(.account-avatar,.account-tile-art) { background: #eff3fa; color: var(--accent); }
html.atelier-theme body .shell.workspace-shell .main[class] .account-summary-item { border-color: var(--line); background: #fff; }
html.atelier-theme body .shell.workspace-shell .main[class] .account-summary-item strong { color: var(--ink); font-variant-numeric: tabular-nums; }
html.atelier-theme body .shell.workspace-shell .main[class] .account-summary-item > span { color: var(--design-muted); font-size: 12px; }
html.atelier-theme body .shell.workspace-shell .main[class] :is(.account-learning-actions > a,.account-learning-actions > button,.account-utility-list > a,.account-utility-list > button) { color: #536179; border-color: var(--line); border-radius: 10px; }
html.atelier-theme body .shell.workspace-shell .main[class] .account-learning-actions > :is(a,button):is(:hover,[aria-current="page"]) { color: var(--accent); border-color: #bfcee5; background: var(--soft); }
html.atelier-theme body .shell.workspace-shell .main[class] .account-history-actions > :is(a,button) { color: #61718e; border-color: var(--line); border-radius: 10px; }
html.atelier-theme body .shell.workspace-shell .main[class] .account-history-actions > :is(a,button):hover { color: var(--accent); background: var(--soft); border-color: #bfcee5; }
html.atelier-theme body .shell.workspace-shell .main[class] .account-signout { color: var(--design-danger); }
html.atelier-theme body .shell.workspace-shell .main[class] .balance-card { color: var(--ink); background: #f0f3f9; border-color: #dfe6f2; border-radius: 18px; }
html.atelier-theme body .shell.workspace-shell .main[class] .package .price { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
html.atelier-theme body .shell.workspace-shell .main[class] .package .token-count { color: var(--design-muted); font-size: 12px; }
html.atelier-theme body .shell.workspace-shell .main[class] :is(.auth-flow-note,.auth-flow-helper,.auth-flow-switch,.auth-flow-terms) { color: var(--design-muted); font-size: 12px; line-height: 1.65; }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-submit { background: var(--accent); border-color: var(--accent); border-radius: 11px; font-weight: 600; box-shadow: 0 2px 4px rgb(31 45 75 / 8%); }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-submit:not(:disabled):hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 4px 14px rgb(31 45 75 / 12%); }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-submit:disabled { background: #e3e8f1; border-color: #e3e8f1; color: #667690; }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-flow .auth-password-field:focus-within { border-color: #8197c4; box-shadow: 0 0 0 3px rgb(56 76 134 / 8%) !important; }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-password-toggle:hover { color: var(--accent); background: var(--soft); }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-flow-error { color: #974255; background: #fff6f8; border-color: #efd7de; }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-steps li { color: #748095; }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-steps li > span { color: #748095; border-color: var(--line); background: #f8f9fc; }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-steps li.active > span { color: var(--accent); border-color: #bfcee5; background: var(--soft); }
html.atelier-theme body .shell.workspace-shell .main[class] .auth-flow-back { color: var(--design-muted); }
html.atelier-theme body :is(.skeleton,.skeleton-card) { background: linear-gradient(100deg,#eef1f5 20%,#fafbfd 45%,#eef1f5 70%); background-size: 200% 100%; }
html.atelier-theme body .toast { border-radius: 11px; background: #2f3b53; box-shadow: 0 8px 28px rgb(31 45 75 / 16%); }
html.atelier-theme body .toast.error { background: #8b3c4e; }

@media (max-width: 600px) {
  html.atelier-theme body .topbar .login-button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
  html.atelier-theme body .shell .main[class] .btn { max-width: 100%; white-space: normal; }
  html.atelier-theme body.home-mode .generation-home .topic-suggestion:nth-child(n) { border-radius: 13px; }
  html.atelier-theme body .main[class] .generation-home.has-generation .btn { min-height: 36px; padding: 7px 11px; font-size: 12px; }
  html.atelier-theme body .main[class] :is(.progress-context,.project-eyebrow,.progress-eyebrow,.progress-footer p,.progress-current-label,.result-usage,.result-copy > span,.result-copy p,.generation-background-note) { font-size: 11px; }
  html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .progress-heading h2 { font-size: 17px; }
  html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .progress-step { padding: 5px 3px; gap: 4px; }
  html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .course-progress[data-state="done"] .progress-step-index { width: 22px; height: 22px; }
  html.atelier-theme body.home-mode .main.page-home .generation-home.has-generation .generation-project[data-state="done"] .generation-project-head h1 { font-size: 18px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  html.atelier-theme body *, html.atelier-theme body *::before, html.atelier-theme body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html.atelier-theme body.reduce-motion *, html.atelier-theme body.reduce-motion *::before, html.atelier-theme body.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }