/* Progressive, account-scoped learner profile setup. All styles stay in its dialog. */
#learnerProfileRoot {
  --lp-ink: #22281f;
  --lp-muted: #7f8976;
  --lp-green: #25bf49;
  --lp-line: #e6e9e0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--lp-ink);
  background: #fdfdfb;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
#learnerProfileRoot[open] { display: flex; flex-direction: column; }
#learnerProfileRoot::backdrop { background: #f5f4f0; }
#learnerProfileRoot *, #learnerProfileRoot *::before, #learnerProfileRoot *::after { box-sizing: border-box; }
#learnerProfileRoot button, #learnerProfileRoot input { font: inherit; }
#learnerProfileRoot button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#learnerProfileRoot button:focus-visible, #learnerProfileRoot a:focus-visible { outline: 3px solid #8cba6f; outline-offset: 4px; }
#learnerProfileRoot input:focus-visible { outline: 3px solid #d1e7bf; outline-offset: 2px; }
#learnerProfileRoot [hidden] { display: none !important; }
.lp-topbar { width: min(1020px, calc(100% - 72px)); min-height: 91px; display: flex; align-items: center; gap: 20px; margin: 0 auto; flex: 0 0 auto; }
.lp-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-ink); text-decoration: none; }
.lp-brand img { width: 36px; height: 32px; }
.lp-brand span { font-size: 25px; font-weight: 750; letter-spacing: -1.4px; }
.lp-progress-caption { margin: 0 auto; color: #969f8b; font-size: 12px; }
.lp-close { width: 36px; height: 36px; display: grid; place-items: center; padding: 0 0 3px; border: 1px solid #e9ece3; border-radius: 50%; color: #7c8770; background: transparent; font-size: 25px !important; font-weight: 300; line-height: 1; }
.lp-close:hover { background: #f1f4ec; }
.lp-progress-track { width: min(620px, calc(100% - 72px)); height: 5px; margin: 0 auto; border-radius: 99px; background: #e9ece4; overflow: hidden; flex: 0 0 auto; }
.lp-progress-track > span { display: block; height: 100%; border-radius: inherit; background: #8fb670; transition: width .2s ease; }
.lp-main { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 39px 28px 38px; }
.lp-content { width: min(620px, 100%); margin: 0 auto; }
.lp-question { margin-bottom: 29px; text-align: center; }
.lp-kicker { margin: 0 0 12px; color: #8c9a7c; font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.lp-question h1 { margin: 0; color: var(--lp-ink); font: 650 clamp(26px, 2.5vw, 33px)/1.45 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: -.04em; outline: none; }
.lp-description { margin: 15px 0 0; color: var(--lp-muted); font-size: 13px; font-weight: 400; line-height: 1.9; }
.lp-welcome { padding-top: 5px; text-align: center; }
.lp-welcome-art { width: 226px; max-width: 65%; height: auto; display: block; margin: 0 auto 22px; }
.lp-welcome .lp-question { margin-bottom: 21px; }
.lp-welcome .lp-question h1 { font-size: 36px; }
.lp-welcome-tags { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; color: #879973; font-size: 12px; }
.lp-welcome-tags > span { padding: 7px 11px; border-radius: 999px; background: #eff4e8; }
.lp-honesty { margin: 26px 0 0; color: #939b88; font-size: 12px; font-weight: 400; line-height: 1.9; text-align: center; }
.lp-subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.lp-option { position: relative; display: flex; align-items: center; min-width: 0; gap: 13px; padding: 17px; border: 1.5px solid var(--lp-line); border-radius: 13px; color: var(--lp-ink); background: #fff; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.lp-option:hover { border-color: #b8c6a6; background: #f9fbf5; }
.lp-option.is-selected { border-color: #8fba71; background: #f1f7eb; box-shadow: 0 0 0 1px #8fba71; }
.lp-option-copy { display: grid; min-width: 0; gap: 6px; }
.lp-option-copy strong { color: #39412f; font-size: 14px; font-weight: 600; line-height: 1.4; }
.lp-option-copy small { color: #929b85; font-size: 12px; font-weight: 400; line-height: 1.6; }
.lp-subject-icon { width: 38px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; font-size: 23px; font-weight: 600; }
.lp-family-math { color: #9b80cb; background: #f0eaf8; }
.lp-family-english { color: #829866; background: #edf3e4; }
.lp-family-politics { color: #c99861; background: #fbf1e4; }
.lp-family-computer { color: #7f90c2; background: #edf0fb; }
.lp-family-mba { color: #b488ab; background: #f6edf3; }
.lp-family-custom { color: #6b9c91; background: #eaf5f0; }
.lp-check { width: 19px; height: 19px; margin-left: auto; border: 1px solid #dce2d4; border-radius: 50%; color: transparent; background: #fff; text-align: center; font: 500 12px/17px sans-serif; flex: 0 0 auto; }
.lp-option.is-selected .lp-check { border-color: #84ad65; color: #fff; background: #84ad65; }
.lp-helper { margin: 18px 0 0; color: #98a18d; font-size: 12px; line-height: 1.8; text-align: center; }
.lp-selection-feedback { min-height: 19px; margin: 5px 0 0; color: #748b5d; font-size: 12px; line-height: 1.6; text-align: center; }
.lp-level-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lp-level-option { display: grid; grid-template-columns: 1fr 21px; gap: 15px 9px; align-content: start; padding: 22px; }
.lp-level-option .lp-option-copy { grid-column: 1 / -1; }
.lp-level-option .lp-check { grid-column: 2; grid-row: 1; align-self: center; }
.lp-level-icon { height: 31px; display: flex; align-items: flex-end; gap: 4px; }
.lp-level-icon > i { width: 10px; height: calc(8px + var(--bar) * 5px); border-radius: 3px 3px 1px 1px; background: #eef0e9; }
.lp-level-icon > i.is-filled { background: #b9a1d8; }
.lp-option.is-selected .lp-level-icon > i.is-filled { background: #98b77b; }
.lp-optional-score { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 25px; padding: 20px; border: 1px solid #e9ece3; border-radius: 12px; background: #f7f8f3; }
.lp-optional-score label { display: grid; gap: 6px; }
.lp-optional-score label strong { color: #646f57; font-size: 13px; font-weight: 500; }
.lp-optional-score label small { margin-left: 7px; color: #9ba48e; font-size: 12px; font-weight: 400; }
.lp-optional-score label > span { color: #9ba38e; font-size: 12px; line-height: 1.5; }
.lp-score-field { width: 155px; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid #dde4d3; border-radius: 9px; background: #fff; }
.lp-score-field input { width: 60px; height: 26px; min-width: 0; padding: 0 3px; border: 0; outline: none; color: #4a5a3a; background: transparent; text-align: center; }
.lp-score-field input::placeholder { font-size: 12px; color: #a8af9d; }
.lp-score-field span { color: #9ca88e; white-space: nowrap; font-size: 12px; }
.lp-target-panel { position: relative; display: flex; flex-direction: column; align-items: center; width: min(400px, 100%); margin: 4px auto 0; padding: 27px 24px 24px; border: 1px solid #e5e9dc; border-radius: 21px; background: #f4f7ee; }
.lp-target-symbol { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 10px; font-size: 25px; }
.lp-target-panel label { color: #849473; font-size: 12px; }
.lp-target-input { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin-top: 12px; }
.lp-target-input input { width: 165px; padding: 0; border: 0; border-bottom: 2px solid #c6d5b7; border-radius: 0; color: #536d40; background: transparent; font-size: 68px !important; font-weight: 600; text-align: center; line-height: 1.3; }
.lp-target-input input::placeholder { color: #c1cdb6; }
.lp-target-input span { color: #95a287; font-size: 14px; }
.lp-target-input input::-webkit-inner-spin-button, .lp-score-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.lp-target-panel > p { margin: 15px 0 0; color: #9aa68f; font-size: 12px; }
.lp-score-presets { display: flex; justify-content: center; flex-wrap: wrap; gap: 11px; margin-top: 18px; }
.lp-score-presets button { min-width: 84px; min-height: 40px; padding: 8px 15px; border: 1px solid #e0e6d7; border-radius: 999px; color: #80936c; background: #fff; font-size: 13px !important; }
.lp-score-presets button.is-selected { border-color: #96b47b; background: #eef5e6; }
.lp-schedule-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.lp-schedule-group + .lp-schedule-group { margin-top: 33px; padding-top: 29px; border-top: 1px solid #e9ece3; }
.lp-schedule-group legend { width: 100%; float: left; color: #546447; font-size: 14px; font-weight: 550; }
.lp-schedule-group > p { clear: both; margin: 7px 0 16px; padding-top: 1px; color: #99a38e; font-size: 12px; }
.lp-year-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.lp-choice { min-height: 53px; padding: 13px 10px; border: 1px solid #e0e6d7; border-radius: 10px; color: #758567; background: #fff; font-size: 13px !important; }
.lp-choice strong { font-weight: 500; }
.lp-choice.is-selected { border-color: #91b673; background: #eff6e8; box-shadow: 0 0 0 1px #91b673; color: #607f48; }
.lp-time-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid #e2e7da; border-radius: 12px; background: #f2f5ed; }
.lp-time-mode button { min-height: 43px; padding: 9px 13px; border: 0; border-radius: 9px; color: #859279; background: transparent; font-size: 12px !important; transition: color .15s, background .15s, box-shadow .15s; }
.lp-time-mode button:hover { color: #627752; }
.lp-time-mode button.is-selected { color: #5e7b49; background: #fff; box-shadow: 0 1px 5px rgba(69, 87, 53, .1); font-weight: 550; }
.lp-time-panel { margin-top: 14px; }
.lp-time-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lp-time-card { min-width: 0; padding: 16px; border: 1px solid #e2e7da; border-radius: 12px; background: #fff; }
.lp-time-card-head { display: grid; gap: 4px; }
.lp-time-card-head strong { color: #5b6c4e; font-size: 13px; font-weight: 600; }
.lp-time-card-head small { color: #9aa48f; font-size: 11px; line-height: 1.5; }
.lp-time-value { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; color: #99a38e; font-size: 11px; }
.lp-time-input { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #dfe5d7; border-radius: 8px; background: #fbfcf9; }
.lp-time-input:focus-within { border-color: #a8c391; box-shadow: 0 0 0 2px #edf5e7; background: #fff; }
.lp-time-input input { width: 55px; min-width: 0; padding: 0; border: 0; outline: none; appearance: textfield; -moz-appearance: textfield; color: #60764e; background: transparent; font-size: 13px !important; text-align: center; }
.lp-time-input input::-webkit-inner-spin-button, .lp-time-input input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.lp-time-input input:focus-visible { outline: 0 !important; }
.lp-time-input em { color: #98a48d; font-size: 10px; font-style: normal; white-space: nowrap; }
.lp-time-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.lp-time-preset { min-height: 38px; padding: 7px 5px; border: 1px solid #e2e7da; border-radius: 8px; color: #7d8e70; background: #fff; font-size: 11px !important; }
.lp-time-preset:hover { border-color: #b8caa8; background: #f8faf5; }
.lp-time-preset.is-selected { border-color: #91b673; color: #607f48; background: #eff6e8; box-shadow: 0 0 0 1px #91b673; }
.lp-weekly-time-card { width: min(470px, 100%); margin: 0 auto; }
.lp-weekly-time-card .lp-time-value { justify-content: center; }
.lp-weekly-time-card .lp-time-input input { width: 82px; }
.lp-weekly-time-card .lp-time-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lp-time-estimate { margin: 13px 0 0; color: #87977a; font-size: 11px; line-height: 1.7; text-align: center; }
.lp-summary-context { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 28px; padding: 20px; border-radius: 13px; background: #f1f5ea; }
.lp-summary-context > span { display: grid; gap: 7px; text-align: center; }
.lp-summary-context small { color: #8c9c7c; font-size: 12px; }
.lp-summary-context strong { color: #647e4e; font-size: 18px; font-weight: 550; }
.lp-summary-context .lp-summary-time strong { font-size: 14px; line-height: 1.7; }
.lp-summary-subjects { display: grid; gap: 13px; margin-top: 19px; }
.lp-summary-subjects article { padding: 18px 20px; border: 1px solid #e7eadf; border-radius: 13px; background: #fff; }
.lp-summary-subjects article > div { display: flex; align-items: center; gap: 10px; }
.lp-summary-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; font-size: 19px; }
.lp-summary-subjects article > div > strong { color: #546447; font-size: 14px; font-weight: 550; }
.lp-summary-subjects dl { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr; gap: 10px; margin: 15px 0 0; }
.lp-summary-subjects dl > div { display: grid; gap: 7px; }
.lp-summary-subjects dt { color: #a0a994; font-size: 12px; }
.lp-summary-subjects dd { margin: 0; color: #7d8a6e; font-size: 12px; line-height: 1.5; }
.lp-summary-subjects dd.lp-summary-target { color: #647f4b; font-weight: 600; }
.lp-summary-note { margin-top: 21px; }
.lp-error { margin: 17px 0 0; padding: 10px 13px; border: 1px solid #eed9d1; border-radius: 9px; color: #a7634d; background: #fcf4ef; font-size: 12px; line-height: 1.8; text-align: center; }
.lp-footer { flex: 0 0 auto; padding: 17px 28px calc(17px + env(safe-area-inset-bottom)); border-top: 1px solid #e8ece1; background: #fff; }
.lp-footer > div { width: min(620px, 100%); min-height: 48px; display: flex; align-items: center; gap: 18px; margin: 0 auto; }
.lp-back { min-height: 42px; padding: 9px 0; border: 0; color: #89987a; background: transparent; font-size: 13px !important; }
.lp-back:disabled { visibility: hidden; }
.lp-draft-note { margin: 0 auto 0 0; color: #adb5a3; font-size: 12px; }
.lp-next { display: inline-flex; justify-content: center; align-items: center; gap: 19px; min-width: 176px; min-height: 48px; padding: 12px 26px; border: 0; border-radius: 999px; color: #fff; background: var(--lp-green); font-size: 14px !important; font-weight: 550; box-shadow: none; }
.lp-next:hover { background: #1cad3e; }
.lp-next > span { color: #fff; font-size: 20px; line-height: 1; }

@media (max-width: 680px) {
  .lp-topbar { width: calc(100% - 36px); min-height: 75px; gap: 12px; }
  .lp-brand img { width: 29px; height: 26px; }
  .lp-brand span { font-size: 21px; letter-spacing: -1px; }
  .lp-progress-caption { margin-left: auto; margin-right: 4px; font-size: 12px; }
  .lp-close { width: 30px; height: 30px; font-size: 23px !important; }
  .lp-progress-track { width: calc(100% - 44px); height: 4px; }
  .lp-main { padding: 30px 22px 30px; }
  .lp-question { margin-bottom: 24px; }
  .lp-question h1 { font-size: 26px; }
  .lp-description { margin-top: 13px; font-size: 12px; }
  .lp-kicker { margin-bottom: 11px; }
  .lp-welcome { padding-top: 12px; }
  .lp-welcome-art { width: 196px; margin-bottom: 24px; }
  .lp-welcome .lp-question h1 { font-size: 31px; }
  .lp-subject-grid { grid-template-columns: 1fr; gap: 9px; }
  .lp-subject-option { min-height: 80px; padding: 13px 16px; }
  .lp-subject-icon { width: 35px; height: 38px; }
  .lp-subject-option .lp-option-copy { gap: 4px; }
  .lp-level-grid { gap: 10px; }
  .lp-level-option { padding: 17px 14px; gap: 13px 7px; }
  .lp-level-option .lp-option-copy strong { font-size: 13px; }
  .lp-level-option .lp-option-copy small { font-size: 12px; line-height: 1.7; }
  .lp-optional-score { flex-wrap: wrap; gap: 13px; padding: 17px; margin-top: 19px; }
  .lp-score-field { margin-left: auto; }
  .lp-target-panel { padding-top: 24px; padding-bottom: 23px; }
  .lp-target-input input { font-size: 62px !important; }
  .lp-target-symbol { margin-bottom: 14px; }
  .lp-year-options { gap: 9px; }
  .lp-year-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-choice { min-height: 47px; }
  .lp-schedule-group + .lp-schedule-group { margin-top: 27px; padding-top: 23px; }
  .lp-time-split { grid-template-columns: 1fr; }
  .lp-time-mode button { min-height: 45px; padding-inline: 8px; }
  .lp-weekly-time-card .lp-time-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-summary-context { gap: 22px; padding: 18px; }
  .lp-summary-subjects article { padding: 16px; }
  .lp-summary-subjects dl { grid-template-columns: 1fr 1fr; gap: 13px; }
  .lp-summary-subjects dl > div:last-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
  .lp-summary-note br { display: none; }
  .lp-footer { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); }
  .lp-footer > div { gap: 14px; }
  .lp-draft-note { display: none; }
  .lp-next { min-width: 155px; margin-left: auto; padding: 12px 20px; gap: 11px; font-size: 13px !important; }
}
@media (max-width: 380px) {
  .lp-topbar { width: calc(100% - 28px); gap: 8px; }
  .lp-brand { gap: 5px; }
  .lp-brand span { font-size: 19px; }
  .lp-brand img { width: 27px; }
  .lp-progress-caption { letter-spacing: -.05em; }
  .lp-main { padding-left: 17px; padding-right: 17px; }
  .lp-question h1 { font-size: 24px; }
  .lp-level-grid { grid-template-columns: 1fr; }
  .lp-level-option { grid-template-columns: 38px 1fr 19px; align-items: center; gap: 11px; padding: 15px; }
  .lp-level-option .lp-option-copy { grid-column: 2; grid-row: 1; }
  .lp-level-option .lp-check { grid-column: 3; }
  .lp-level-icon { gap: 3px; }
  .lp-level-icon > i { width: 7px; }
  .lp-summary-context { grid-template-columns: 1fr; gap: 16px; }
  .lp-footer { padding-left: 17px; padding-right: 17px; }
  .lp-next { min-width: 145px; }
}
@media (prefers-reduced-motion: reduce) { #learnerProfileRoot *, #learnerProfileRoot *::before, #learnerProfileRoot *::after { transition: none !important; } }