/* Phase 1: presentation only. Existing hidden flags, permissions and workflows remain authoritative. */
:root {
  --rpg-purple: #6b46c1;
  --rpg-deep: #32214f;
  --rpg-canvas: #f5f3fa;
  --rpg-tint: #eee8fa;
  --rpg-line: #e3deed;
  --rpg-ink: #29243b;
  --rpg-ink-soft: #555066;
  --rpg-muted: #716b80;
  --rpg-white: #fff;
  --rpg-success: #247854;
  --rpg-shadow: 0 5px 18px rgba(50, 33, 79, .045);
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--rpg-canvas);
  color: var(--rpg-ink);
  line-height: 1.55;
}
* { box-sizing: border-box; }
body { background: var(--rpg-canvas); }
main { width: min(1440px, calc(100% - 48px)); padding: 20px 0 32px; }
h1, h2, h3 { color: inherit; letter-spacing: -.02em; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
button { min-height: 44px; border-radius: 9px; background: var(--rpg-purple); font-weight: 600; transition: background .15s, box-shadow .15s; }
button:hover:not(:disabled) { box-shadow: 0 3px 9px rgba(50, 33, 79, .12); }
button.secondary { background: var(--rpg-tint); color: #553391; }
button.danger { background: #b63e50; color: #fff; }
button.link { color: var(--rpg-purple); }
button:disabled { opacity: .55; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible { outline: 3px solid #9f7aea; outline-offset: 3px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: 44px; border-radius: 9px; border-color: var(--rpg-line); color: var(--rpg-ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--rpg-purple); }
input:disabled, select:disabled, textarea:disabled { color: var(--rpg-ink-soft); background: #f2f0f6; opacity: 1; }
label { color: var(--rpg-ink-soft); }
.muted { color: var(--rpg-muted); line-height: 1.6; }
.status { color: #63419d; overflow-wrap: anywhere; }
.bar { min-height: 64px; padding: 10px 18px; border: 0; border-radius: 14px; background: var(--rpg-deep); box-shadow: 0 5px 16px rgba(50, 33, 79, .12); }
.brand { gap: 12px; align-items: center; }
.brand-mark { flex: 0 0 32px; width: 32px; height: 32px; color: #dbc6ff; }
.brand h1 { font-size: 19px; letter-spacing: -.04em; }
.bar .muted, .bar .status { color: #ded3ed; }
.bar .link { min-height: 36px; border-radius: 8px; border-color: #79638f; background: #493360; color: #fff; }
.bar-actions { gap: 8px; }
.global-context { margin: 14px 0; min-height: 44px; padding: 0; border: 0; background: transparent; }
.global-context label { font-size: 13px; }
.global-context select { min-width: 160px; background: #fff; }
.context-notice { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px; margin: 12px 0; border: 1px solid var(--rpg-line); border-radius: 12px; background: #fff; color: #63419d; }
.context-notice button { margin: 0; }
.context-loading .view-stack, .context-failed .view-stack { visibility: hidden; pointer-events: none; }
.app-layout { grid-template-columns: 188px minmax(0, 1fr); gap: 24px; margin-top: 22px; }
.app-nav { top: 20px; gap: 6px; padding: 12px; border: 1px solid var(--rpg-line); border-radius: 14px; box-shadow: var(--rpg-shadow); }
.nav-caption { padding: 4px 10px 14px; color: #8c819f; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.app-nav button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 9px; color: var(--rpg-ink-soft); font-size: 14px; }
.nav-icon { flex: 0 0 21px; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-nav button:hover { background: #f4f0fc; color: #5d3ba0; }
.app-nav button.active { border: 0; background: var(--rpg-tint); color: #593896; }
.nav-note { margin: 28px 10px 6px; padding-top: 16px; border-top: 1px solid var(--rpg-line); color: #93889f; font-size: 11px; line-height: 1.8; }
.points-badge { background: #b63e50; }
.view-stack, .view, .grid > *, .panel > *, .item-top > div { min-width: 0; }
.page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.page-kicker { display: block; margin-bottom: 5px; color: #907bb1; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.page-intro h2 { font-size: 27px; line-height: 1.3; }
.page-intro p { margin: 7px 0 0; font-size: 13px; color: var(--rpg-muted); }
.page-context { flex: 0 0 auto; display: grid; justify-items: end; gap: 4px; padding-top: 5px; font-size: 12px; color: var(--rpg-muted); }
.page-context b { color: #5c4479; font-weight: 600; }
.panel { margin-top: 18px; padding: 22px; border-color: var(--rpg-line); border-radius: 14px; box-shadow: var(--rpg-shadow); }
.panel-heading { gap: 10px; margin-bottom: 16px; }
.panel-heading button { min-height: 38px; height: auto; padding: 6px 14px; border-radius: 8px; }
.grid { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.stat { padding: 15px; border-color: var(--rpg-line); border-radius: 10px; background: #faf8fd; color: var(--rpg-muted); font-size: 12px; }
.stat b { color: var(--rpg-ink); font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.points-value { color: var(--rpg-purple); }
.item, .recurrence-item, .recurrence-task-item, .homework-preview-item,
.ai-usage-card, .wrong-question-analysis-item { padding: 15px; border-color: var(--rpg-line); border-radius: 10px; background: #fcfbfe; }
.item-top { flex-wrap: wrap; align-items: flex-start; }
.item-top > div:first-child { flex: 1 1 160px; }
.item b { font-weight: 650; }
.list { gap: 10px; }
.item[data-record-id]:hover, .item[data-knowledge-record]:hover, .item[data-math-record]:hover { border-color: #b49ad8; background: #f6f1ff; }
.sub-tabs { background: var(--rpg-canvas); }
.sub-tabs.tabs-primary { padding: 5px; border-color: var(--rpg-line); border-radius: 11px; background: #ebe5f5; }
.sub-tabs.tabs-primary button { color: #726084; }
.sub-tabs.tabs-primary button:hover { background: #e0d6ef; }
.sub-tabs.tabs-primary button.active { background: var(--rpg-purple); color: #fff; box-shadow: 0 2px 5px #6b46c126; }
.sub-tabs.tabs-secondary { border-color: var(--rpg-line); background: transparent; }
.sub-tabs.tabs-secondary button { color: var(--rpg-muted); }
.sub-tabs.tabs-secondary button:hover { background: #ebe5f5; color: #593896; }
.sub-tabs.tabs-secondary button.active { border-bottom-color: var(--rpg-purple); background: #f0eafa; color: #593896; }
.sub-tabs.tabs-tertiary { border-color: var(--rpg-line); background: #eeebf3; }
.sub-tabs.tabs-tertiary button.active { background: #5d4a77; color: #fff; }
.tabs-primary button:focus-visible, .tabs-secondary button:focus-visible, .tabs-tertiary button:focus-visible { outline-color: #9f7aea; }
.category-tabs { gap: 0; padding: 4px; margin: 16px 0 12px; border: 0; border-radius: 9px; background: #f1edf7; }
.category-tabs button { min-height: 38px; border-radius: 7px; color: var(--rpg-muted); }
.category-tabs button.active { background: #fff; color: #644198; box-shadow: 0 2px 5px #32214f0c; }
.task-item { padding: 14px; border-left: 3px solid #c6b2e7; }
.task-item.done { border-left-color: #73b495; background: #f1f8f4; color: #517263; }
.task-item.done .task-title { color: #517263; }
.task-item .item-top { flex-wrap: nowrap; gap: 16px; }
.task-item .item-actions, .recurrence-item .item-actions, .template-manage-item .item-actions { flex-basis: 76px; gap: 6px; }
.task-item .item-actions button, .recurrence-item .item-actions button,
.template-manage-item .item-actions button { width: 76px; min-height: 38px; height: auto; padding: 7px 4px; font-size: 12px; }
.task-item .item-actions button[data-graded-homework] { width: 76px; height: auto; min-height: 44px; }
.task-filter-toolbar { row-gap: 12px; }
.task-deadline-toolbar { margin-top: 18px; gap: 12px; }
.task-deadline-toolbar > label.inline-date { flex: 1 1 280px; flex-wrap: wrap; white-space: normal; }
.task-deadline-toolbar button { margin: 0; }
.template-options { flex: 1 1 auto; grid-auto-rows: max-content; align-content: start; }
.template-manage-item .item-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.template-manage-item .item-actions { flex-wrap: nowrap; align-self: start; }
.template-manage-item .item-actions button { min-height: 44px; }
.task-note { font-size: 13px; color: #6d657a; }
.task-progress { height: 9px; background: #eae3f2; }
.task-progress > span { background: #9170cc; }
#dashboardTaskProgressText { color: #69517f; font-size: 13px; font-weight: 600; }
.view[data-view="dashboard"] { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; }
.view[data-view="dashboard"] > .panel { margin: 0; }
.rpg-welcome { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 158px; padding: 24px 30px; overflow: hidden; border: 1px solid #ddd0ed; border-radius: 14px; background: #eae0f6; }
.rpg-welcome-copy { position: relative; z-index: 1; }
.rpg-welcome .page-kicker { color: #8767a8; }
.rpg-welcome h3 { margin: 0; color: #48315f; font-size: 24px; }
.rpg-welcome p { margin: 10px 0 0; color: #7a628c; font-size: 13px; }
.rpg-welcome img { flex: 0 0 auto; width: 190px; height: 145px; object-fit: contain; image-rendering: pixelated; }
#dashboardTaskSummary { grid-column: 1; grid-row: 2; }
#dashboardPointsSummary { grid-column: 2; grid-row: 2; }
#dashboardPointsSummary .panel-heading { align-items: flex-start; }
#dashboardPointsSummary .panel-heading button { min-width: 0; font-size: 12px; }
#dashboardPointsSummary .points-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#dashboardPointsSummary .stat:first-child { grid-column: 1 / -1; border: 0; background: #f0eafa; }
#dashboardPointsSummary .stat:first-child b { color: var(--rpg-purple); font-size: 34px; }
#dashboardPointsSummary .stat { padding: 12px; }
#dashboardPointsSummary .stat b { font-size: 23px; }
#dashboardPointsSummary .stat[data-parent] { grid-column: 1 / -1; }
.rpg-subjects { grid-column: 1 / -1; }
.subject-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.subject-shortcut { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 92px; margin: 0; padding: 18px; text-align: left; border: 1px solid var(--rpg-line); border-radius: 11px; background: #fcfbfe; color: var(--rpg-ink); }
.subject-shortcut > span { display: grid; gap: 3px; }
.subject-shortcut b { font-size: 15px; }
.subject-shortcut small { color: var(--rpg-muted); font-size: 12px; font-weight: 400; }
.subject-emblem { flex: 0 0 40px; width: 40px; height: 40px; }
.subject-shortcut:hover:not(:disabled) { background: #f1ebfa; border-color: #cbb7e9; }
#aiUsagePanel { grid-column: 1 / -1; }
.question { padding: 22px; border: 1px solid #e4def0; border-radius: 12px; background: #faf8fd; color: var(--rpg-ink); font-size: 20px; line-height: 1.7; font-weight: 600; }
.knowledge-option { padding: 14px 16px; border-color: var(--rpg-line); color: var(--rpg-ink); font-size: 16px; font-weight: 400; line-height: 1.7; }
.knowledge-option.selected { border-color: #9370cf; background: #f4effc; color: #4d3374; }
.knowledge-chip { border-color: #d6cae7; color: #4d3374; font-size: 16px; }
.knowledge-chip[aria-pressed="true"], .knowledge-order-picked .knowledge-chip { border-color: #9370cf; background: #eee7fb; color: #4d3374; }
.knowledge-order-picked { border-color: #bfa9dd; }
.knowledge-passage { font-size: 16px; font-weight: 400; line-height: 1.8; }
#mathAnswers input:not([type="radio"]) { width: 100%; font-size: 16px; }
#mathRun .actions, #knowledgeRun .row:last-of-type { gap: 8px; }
.wrong-question-card { padding: 16px; border-color: var(--rpg-line); border-radius: 11px; }
.wrong-question-card:hover { border-color: #bda6dd; background: #f6f1fc; }
.wrong-question-card-title { line-height: 1.6; }
.wrong-question-badge, .homework-submission-status { padding: 3px 9px; font-size: 12px; }
.wrong-question-badge.completed, .wrong-question-badge.correct,
.homework-submission-status.completed, .ai-usage-card-status, .template-badge { background: #e5f3eb; color: #247854; }
.wrong-question-badge.failed, .wrong-question-badge.incorrect,
.homework-submission-status.failed, .homework-submission-status.partial { background: #fcebee; color: #b2374b; }
.wrong-question-badge.queued, .wrong-question-badge.analyzing, .wrong-question-badge.uncertain { background: #fff3da; color: #8c6200; }
.wrong-question-metric, .ai-usage-card-metric, .weekly-review-state { background: #f4f0fa; border-radius: 9px; }
.points-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr)); }
.points-positive { color: var(--rpg-success); }
.points-negative, .wrong-number { color: #b2374b; }
.points-product { border-top: 3px solid #c9b4e4; padding: 20px; }
.points-product .points-actions { margin-top: 10px; }
#pointsActionModal .points-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; margin-top: 8px; }
#pointsActionModal .points-stepper input { margin: 0; appearance: textfield; }
#pointsActionModal input::-webkit-inner-spin-button, #pointsActionModal input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#pointsActionModal .points-actions { justify-content: flex-end; gap: 10px; }
#pointsActionModal .points-actions button { min-height: 44px; margin: 0; flex: 1 1 120px; }
#pointsActionModal .callout { overflow-wrap: anywhere; }
.points-rule-summary section { border-color: var(--rpg-line); background: #fcfbfe; border-radius: 11px; padding: 18px; }
.detail-dialog, .progress-dialog, .vocabulary-review-dialog { border: 1px solid var(--rpg-line); border-radius: 14px; box-shadow: 0 20px 60px #22132b30; }
.modal-backdrop { background: rgba(29, 19, 43, .72); }
.task-editor-header { padding: 20px; border-color: var(--rpg-line); }
.task-editor-body, .recurrence-editor-body { padding: 8px 20px 20px; }
.task-editor-footer { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-color: var(--rpg-line); }
.template-option { border-color: var(--rpg-line); border-radius: 10px; }
.template-option:hover, .template-option.selected { border-color: #bca5dc; background: #f4effc; }
.spinner { border-color: #e3daef; border-top-color: var(--rpg-purple); }
.account-row { padding: 12px 0; border-color: var(--rpg-line); flex-wrap: wrap; }
.account-row .actions { flex-wrap: wrap; }
.account-row .actions button { min-height: 36px; height: auto; }
#loginView { width: min(460px, 100%); margin: 64px auto; padding: 32px; }
#loginView h2 { font-size: 24px; }
#loginView > button { width: 100%; margin-top: 22px; }
.login-intro { margin: 8px 0 22px; color: var(--rpg-muted); font-size: 14px; }
.site-footer { margin-top: 28px; }

@media (max-width: 1100px) and (pointer: fine) {
  main { width: calc(100% - 32px); }
  .app-layout { grid-template-columns: 164px minmax(0, 1fr); gap: 18px; }
  .view[data-view="dashboard"] { grid-template-columns: minmax(0, 1fr); }
  #dashboardTaskSummary, #dashboardPointsSummary { grid-column: 1; grid-row: auto; }
  #dashboardPointsSummary .points-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #dashboardPointsSummary .stat:first-child, #dashboardPointsSummary .stat[data-parent] { grid-column: auto; }
  .subject-shortcuts { grid-template-columns: 1fr; }
}
@media (max-width: 760px), (pointer: coarse) and (max-width: 1600px) {
  main { width: min(1080px, calc(100% - 24px)); padding-top: 10px; padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .bar { min-height: 56px; padding: 10px 12px; border-radius: 11px; top: 6px; }
  .brand { gap: 7px; }
  .brand-mark { flex-basis: 25px; width: 25px; height: 25px; }
  .brand h1 { font-size: 16px; }
  .brand .muted { font-size: 11px; }
  .bar .link { min-height: 34px; font-size: 12px; padding: 0 8px; }
  .bar-actions { gap: 5px; }
  .global-context { margin: 12px 0 0; }
  .global-context select { max-width: 220px; min-width: 110px; }
  .app-layout { display: block; margin-top: 22px; }
  .app-nav { position: fixed; top: auto; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--rpg-line); border-radius: 0; background: #fff; box-shadow: 0 -4px 18px #32214f0a; }
  .app-nav button { flex: 1 1 0; justify-content: center; flex-direction: column; gap: 3px; min-width: 0; min-height: 54px; padding: 5px 2px; border: 0; font-size: 11px; }
  .app-nav button.active { border: 0; }
  .nav-icon { flex-basis: 20px; width: 20px; height: 20px; }
  .nav-caption, .nav-note { display: none; }
  .app-nav #pointsNav { position: relative; }
  .app-nav .points-badge { position: absolute; top: 1px; right: 9px; height: 17px; font-size: 10px; }
  .page-intro { gap: 12px; margin-bottom: 18px; }
  .page-intro h2 { font-size: 24px; }
  .page-intro p { font-size: 12px; }
  .page-context { max-width: 105px; font-size: 11px; overflow-wrap: anywhere; }
  .page-kicker { font-size: 10px; }
  .view[data-view="dashboard"] { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #dashboardTaskSummary, #dashboardPointsSummary { grid-column: 1; grid-row: auto; }
  .rpg-welcome { min-height: 132px; padding: 20px; }
  .rpg-welcome h3 { font-size: 21px; }
  .rpg-welcome p { font-size: 12px; max-width: 180px; }
  .rpg-welcome img { width: 120px; height: 114px; margin-right: -8px; }
  .panel { padding: 18px; }
  .panel-heading h2 { font-size: 17px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 12px; }
  #dashboardPointsSummary .points-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboardPointsSummary .stat:first-child { grid-column: 1 / -1; }
  .subject-shortcuts { grid-template-columns: 1fr; gap: 8px; }
  .subject-shortcut { min-height: 74px; padding: 14px; }
  .task-item { padding: 12px; }
  .task-item .item-top { gap: 8px; }
  .task-item .item-actions { flex-basis: 70px; }
  .task-item .item-actions button, .task-item .item-actions button[data-graded-homework] { width: 70px; min-height: 44px; }
  .recurrence-item .item-actions button, .template-manage-item .item-actions button { min-height: 44px; }
  .template-manage-item .item-top { grid-template-columns: minmax(0, 1fr); }
  .template-manage-item .item-actions { flex-direction: row; justify-content: flex-end; }
  .task-filter-toolbar h2 { flex-basis: 100%; line-height: 1.4; }
  .task-filter-toolbar > label.inline-date { flex: 1 1 100%; flex-wrap: wrap; white-space: normal; }
  .task-filter-toolbar button.inline-link { flex: 1 1 130px; height: auto; min-height: 44px; }
  #pointsTabs { gap: 2px; padding: 4px; }
  #pointsTabs button { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 2px; font-size: 11px; }
  .sub-tabs.tabs-primary, .sub-tabs.tabs-secondary, .sub-tabs.tabs-tertiary { top: 72px; }
  .sub-tabs.tabs-secondary button { flex: 1 1 0; padding: 0 8px; font-size: 13px; }
  .panel-heading-actions { justify-content: flex-start; }
  .points-form-dialog { width: 100%; max-height: calc(100dvh - 32px); }
  .question { padding: 18px; font-size: 18px; }
  .knowledge-option { padding: 12px; }
  .task-editor-header { padding: 18px; }
  .task-editor-body, .recurrence-editor-body { padding: 6px 18px 18px; }
  .task-editor-footer { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .template-picker-dialog, .task-editor-dialog, .recurrence-editor-dialog, .ai-usage-detail-dialog { border-radius: 16px 16px 0 0; }
  #loginView { margin: 40px auto; padding: 24px; }
}
@media (max-width: 380px) {
  .brand #roleLabel { max-width: 64px; }
  .rpg-welcome { padding: 16px; }
  .rpg-welcome h3 { font-size: 19px; }
  .rpg-welcome img { width: 100px; }
  .page-intro h2 { font-size: 22px; }
  .panel { padding: 15px; }
  .points-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
}
@media (prefers-reduced-motion: reduce) {
  button, .task-progress > span { transition: none; }
}

/* Phase 2: XP is separate from real points and does not obstruct exercises. */
.growth-profile { margin-top: 18px; max-width: 460px; }
.growth-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.growth-heading strong { color: var(--rpg-purple); font-size: 21px; }
.growth-heading button { margin: 0 0 0 auto; min-height: 44px; font-size: 12px; }
.growth-profile progress { display: block; width: 100%; height: 10px; margin: 10px 0; border: 0; border-radius: 8px; overflow: hidden; background: #d5c7e9; accent-color: var(--rpg-purple); }
.growth-profile progress::-webkit-progress-bar { background: #d5c7e9; border-radius: 8px; }
.growth-profile progress::-webkit-progress-value { background: var(--rpg-purple); border-radius: 8px; }
.growth-profile small { color: #6e5b87; font-size: 11px; }
.growth-status { margin-top: 12px; }
.growth-status button { margin-left: 8px; }
.growth-dialog { width: min(650px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); overflow: auto; box-sizing: border-box; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px #32214f40; }
.growth-entry { display: flex; gap: 16px; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--rpg-line); }
.growth-entry div { min-width: 0; overflow-wrap: anywhere; }
.growth-entry small { display: block; color: var(--rpg-muted); font-size: 11px; margin-top: 7px; }
.growth-entry strong { flex-shrink: 0; white-space: nowrap; }
.growth-gain { color: #337950; }
.growth-reversal { color: #9b5265; }
.growth-feedback { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 40px); box-sizing: border-box; padding: 12px 18px; border-radius: 12px; background: #32214f; color: #fff; box-shadow: 0 4px 20px #32214f30; z-index: 90; pointer-events: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1600px) {
  .rpg-welcome:has(.growth-profile:not([hidden])) { align-items: flex-start; }
  .rpg-welcome:has(.growth-profile:not([hidden])) .rpg-welcome-copy { flex: 1; min-width: 0; }
  .rpg-welcome:has(.growth-profile:not([hidden])) img { width: 75px; height: 88px; margin-left: 5px; }
  .growth-heading { gap: 7px; }
  .growth-heading strong { font-size: 19px; }
  .growth-heading button { flex-basis: 100%; margin-left: 0; }
  .growth-dialog { padding: 20px; }
}