[hidden] { display: none !important; }

.practice-button {
  min-height: 44px;
  border: 1px solid #4d7cff;
  border-radius: 10px;
  background: #3868e8;
  color: #fff;
  padding: 10px 18px;
  font-weight: 800;
  cursor: pointer;
}

.practice-button.secondary { border-color: #526a8c; background: transparent; color: inherit; }
.practice-button.danger { border-color: #784356; background: #321827; }
.practice-button.compact { min-height: 38px; padding: 7px 12px; font-size: 12px; }
.practice-button:disabled { cursor: not-allowed; opacity: .48; }
.practice-button:focus-visible,
.practice-admin-page :is(a, button, input, textarea, select):focus-visible,
.practice-student-page :is(a, button, input, textarea, select):focus-visible { outline: 3px solid #70a7ff; outline-offset: 3px; }

.practice-admin-page {
  min-width: 1024px;
  margin: 0;
  background: #041a2d;
  color: #eef6ff;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.practice-admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #173956;
  background: #08253e;
  padding: 16px 10px;
}

.practice-admin-page .practice-admin-sidebar { display: none; }

.practice-admin-logo {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid #3a6488;
  border-radius: 13px;
  background: #102f4b;
  color: #d8eaff;
  text-decoration: none;
  font-size: 22px;
}

.practice-admin-sidebar nav { width: 100%; display: grid; gap: 8px; margin-top: 22px; }
.practice-admin-sidebar nav a,
.practice-sidebar-collapse {
  display: grid;
  justify-items: center;
  gap: 7px;
  border-radius: 11px;
  color: #abc0d5;
  padding: 11px 4px;
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
}
.practice-admin-sidebar nav a i { font-size: 20px; }
.practice-admin-sidebar nav a.is-active { background: #244f9d; box-shadow: 0 8px 24px #00172c; color: #fff; }
.practice-sidebar-collapse { margin-top: auto; }

.practice-admin-main { width: min(1640px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; padding: 18px 0 28px; }
.practice-admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.practice-admin-header p { margin: 0 0 4px; color: #7592af; font-size: 11px; font-weight: 800; }
.practice-admin-header h1 { margin: 0; color: #fff; font-size: 27px; letter-spacing: -.04em; }
.practice-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.practice-admin-actions small { border-radius: 20px; background: #dceaff; color: #235abc; padding: 2px 6px; }
.practice-admin-context { min-height: 30px; margin-top: 8px; }
.practice-admin-context > div,
.practice-admin-context form { display: flex; align-items: flex-end; gap: 10px; }
.practice-admin-context label { display: grid; gap: 4px; color: #9db4cc; font-size: 11px; }
.practice-admin-context select,
.practice-admin-context input { min-height: 38px; border: 1px solid #385975; border-radius: 8px; background: #0a2137; color: #fff; padding: 7px 10px; }
#practiceAdminMessage { margin: 6px 0; color: #7f9ab6; font-size: 11px; }

.practice-mode-tabs { display: inline-flex; border: 1px solid #284a66; border-radius: 11px; background: #082138; padding: 4px; }
.practice-mode-tabs button { min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: #8fa8c1; padding: 8px 18px; font-weight: 900; cursor: pointer; }
.practice-mode-tabs button[aria-pressed="true"] { background: #2456b8; color: #fff; }

.practice-builder-title-row { display: flex; justify-content: space-between; align-items: center; }
.practice-builder-title-row h2 { margin: 18px 0 10px; font-size: 25px; }
.practice-builder-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 16px; padding: 0; list-style: none; }
.practice-builder-steps li { position: relative; }
.practice-builder-steps li:not(:last-child) { border-bottom: 2px solid #2b4964; transform: translateY(-18px); }
.practice-builder-steps button { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; border: 0; background: #041a2d; color: #7188a0; padding: 8px 10px 8px 0; font-size: 15px; cursor: pointer; }
.practice-builder-steps b { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #354e66; border-radius: 50%; background: #1a3147; color: #d8e3ef; }
.practice-builder-steps .is-current button { color: #6f97ff; font-weight: 900; }
.practice-builder-steps .is-current b { border-color: #7196ff; background: #72a0ff; box-shadow: 0 0 0 4px #112d57; color: #06172a; }
.practice-builder-help { color: #9ab0c7; font-size: 12px; }

.practice-question-layout { display: grid; grid-template-columns: minmax(620px, 1fr) 310px; gap: 22px; }
.practice-question-canvas { display: grid; gap: 10px; }
.practice-question-section { display: grid; grid-template-columns: 190px 1fr; gap: 18px; border: 1px solid #244864; border-radius: 11px; background: #08243b; padding: 20px; }
.practice-question-section-head { display: grid; align-content: start; grid-template-columns: 46px 1fr; gap: 12px; }
.practice-question-section-head > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 11px; background: #3c6de1; color: #fff; font-size: 19px; }
.practice-question-section[data-section="practice"] .practice-question-section-head > i { background: #58a163; }
.practice-question-section[data-section="reflection"] .practice-question-section-head > i { background: #e0a73b; }
.practice-question-section-head h3 { margin: 4px 0 7px; font-size: 18px; }
.practice-question-section-head p { margin: 0; color: #8ea6bf; font-size: 11px; line-height: 1.5; }
.practice-question-list { display: grid; gap: 7px; }
.practice-question-row { display: grid; grid-template-columns: 24px minmax(200px, 1fr) 190px; align-items: start; gap: 8px; border: 1px solid #244761; border-radius: 8px; background: #061b2e; padding: 10px 8px; }
.practice-question-row > i { color: #728ca5; text-align: center; }
.practice-question-row-main { display: grid; gap: 7px; }.practice-question-row-main > input { width: 100%; border: 1px solid #31536d; border-radius: 7px; background: #081a2c; }
.practice-question-row input,
.practice-question-row select { min-height: 36px; color: #eef6ff; padding: 5px 8px; font-weight: 700; }
.practice-question-row select { width: 100%; border: 1px solid #31536d; border-radius: 7px; background: #192f44; font-size: 10px; }
.practice-question-row-tools { display: grid; gap: 7px; }.practice-question-row-tools > label { display: flex; align-items: center; gap: 7px; color: #c4d2df; font-size: 11px; }.practice-question-row-tools > div { display: flex; justify-content: flex-end; gap: 4px; }
.practice-question-row button { width: 34px; height: 34px; border: 1px solid #31536d; border-radius: 7px; background: #0d2941; color: #b4c7da; cursor: pointer; }
.practice-question-choices { display: grid; gap: 5px; }.practice-question-choices label { display: grid; grid-template-columns: 1fr 34px; gap: 5px; }.practice-question-choices input { width: 100%; border: 1px solid #31536d; border-radius: 7px; background: #081a2c; }.practice-question-choices .practice-choice-add { width: auto; min-height: 34px; color: #82a9ff; }
.practice-question-add { min-height: 34px; border: 0; background: transparent; color: #73a0ff; font-weight: 800; cursor: pointer; }

.practice-publish-summary { display: grid; align-content: start; gap: 12px; }
.practice-publish-summary > section,
.practice-publish-summary > aside { border: 1px solid #274a64; border-radius: 11px; background: #071e33; padding: 17px; }
.practice-publish-summary h3 { margin: 0 0 13px; font-size: 15px; }
.practice-publish-summary dl { margin: 0; }
.practice-publish-summary dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #1d3d57; padding: 12px 0; font-size: 11px; }
.practice-publish-summary dt { color: #9eb5cc; }
.practice-publish-summary dd { margin: 0; text-align: right; }
.practice-publish-summary section p { color: #829bb4; font-size: 10px; }
.practice-publish-summary ol { display: grid; gap: 6px; padding: 0; list-style: none; }
.practice-publish-summary li { display: flex; justify-content: space-between; border-bottom: 1px solid #1e4059; padding: 8px 0; font-size: 11px; }
.practice-publish-summary > aside { display: flex; gap: 9px; color: #9db4ca; font-size: 10px; line-height: 1.5; }
.practice-publish-summary > aside i { color: #f2bd3e; }

.practice-question-palette { margin-top: 14px; border: 1px solid #244864; border-radius: 10px; background: #071e32; padding: 14px 18px; }
.practice-question-palette h3 { margin: 0 0 10px; font-size: 13px; }
.practice-question-palette > div { display: flex; flex-wrap: wrap; gap: 8px; }
.practice-question-palette button { min-width: 106px; min-height: 64px; border: 1px solid #2e5571; border-radius: 8px; background: #09243b; color: #dbe8f6; padding: 8px; font-weight: 800; cursor: pointer; }
.practice-question-palette button i { display: block; margin-bottom: 8px; color: #93b6ff; font-size: 17px; }

.practice-builder-footer { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; border-top: 1px solid #23435d; background: #041a2d; padding: 12px 0; }
.practice-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.practice-template-card { display: grid; gap: 8px; min-height: 150px; border: 1px solid #2a506d; border-radius: 13px; background: #08243b; color: #dcecff; padding: 20px; text-align: left; cursor: pointer; }
.practice-template-card.is-selected { border-color: #70a0ff; box-shadow: 0 0 0 3px #163d72; }
.practice-template-card i { color: #f3bb36; font-size: 25px; }
.practice-template-card span { color: #8ea7bf; font-size: 11px; }
.practice-preview-step > div { border-radius: 16px; background: #f7faff; color: #142d48; padding: 24px; }
.practice-publish-step form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; border: 1px solid #274b66; border-radius: 12px; background: #08243b; padding: 22px; }
.practice-publish-step label { display: grid; gap: 7px; color: #b5c8da; font-size: 11px; }
.practice-publish-step .wide { grid-column: 1 / -1; }
.practice-publish-step input,
.practice-publish-step textarea,
.practice-publish-step select { border: 1px solid #355b77; border-radius: 8px; background: #061a2c; color: #fff; padding: 10px; }
.practice-publish-step fieldset { border: 1px solid #355b77; border-radius: 9px; }
.practice-settings-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; margin-top: 12px; }
.practice-settings-list { align-self: start; min-height: 244px; border: 1px solid #294b67; border-radius: 10px; background: #0b2135; padding: 18px; }
.practice-settings-list > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.practice-settings-list h2 { margin: 0; font-size: 18px; }.practice-settings-list > label { display: flex; align-items: center; gap: 7px; margin: 14px 0; color: #91a7bd; font-size: 11px; }
.practice-settings-list article { display: grid; gap: 10px; border-top: 1px solid #29485f; padding: 14px 0; }.practice-settings-list article:first-child { border-top: 0; }
.practice-settings-list article p { margin: 5px 0 0; color: #9aafc3; font-size: 12px; line-height: 1.55; }
.practice-settings-list article footer { display: flex; flex-wrap: wrap; gap: 6px; }
.practice-settings-list .practice-state { justify-self: start; }
.practice-builder { min-width: 0; border: 1px solid #294b67; border-radius: 10px; background: #0a2034; padding: 20px 24px; }
.practice-state { border-radius: 20px; background: #183954; padding: 5px 9px; color: #b8d0e8; font-size: 10px; font-weight: 900; text-align: center; }

.practice-review-workspace { margin-top: 10px; }
.practice-review-toolbar { display: grid; grid-template-columns: 360px 180px auto 1fr; align-items: end; gap: 12px; border: 1px solid #294b67; border-radius: 9px; background: #0c2236; padding: 12px 14px; }
.practice-review-toolbar label { display: grid; gap: 6px; color: #9eb1c4; font-size: 11px; font-weight: 800; }.practice-review-toolbar select,.practice-review-toolbar input { min-height: 42px; border: 1px solid #3a5973; border-radius: 8px; background: #081a2c; color: #fff; padding: 8px 12px; }.practice-review-toolbar > div { display: grid; gap: 5px; border-left: 1px solid #294b67; padding: 2px 0 2px 14px; }.practice-review-toolbar > div span { color: #8fa5bb; font-size: 11px; }
.practice-review-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 6px; border: 1px solid #294b67; border-radius: 9px; background: #0c2236; padding: 8px 12px; }.practice-review-summary > div { display: flex; flex-wrap: wrap; gap: 8px; }.practice-review-summary > div span { border: 1px solid #3a5871; border-radius: 6px; background: #112a41; padding: 5px 8px; color: #bed0e1; font-size: 10px; font-weight: 800; }.practice-review-summary dl { display: grid; grid-template-columns: repeat(4, 126px); gap: 10px; margin: 0; }.practice-review-summary dl div { border: 1px solid #294b67; border-radius: 8px; padding: 7px 10px; }.practice-review-summary dt { color: #9db0c3; font-size: 10px; }.practice-review-summary dd { margin: 2px 0 0; font-size: 19px; font-weight: 900; }
.practice-review-content { display: grid; grid-template-columns: minmax(0, 1fr) 370px; min-height: 535px; margin-top: 6px; border: 1px solid #294b67; border-radius: 9px 9px 0 0; background: #0b2135; overflow: hidden; }
.practice-review-table-panel { min-width: 0; border-right: 1px solid #294b67; }.practice-review-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #294b67; padding: 8px 12px; }.practice-review-filterbar > div { display: flex; gap: 4px; }.practice-review-filterbar button { min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: #9fb1c4; padding: 7px 12px; font-weight: 800; cursor: pointer; }.practice-review-filterbar button.is-active { background: #586ee7; color: #fff; }.practice-review-filterbar button span { border: 1px solid #46607a; border-radius: 10px; margin-left: 5px; padding: 1px 6px; font-size: 10px; }.practice-review-filterbar input { width: 260px; min-height: 38px; border: 1px solid #3a5973; border-radius: 7px; background: #081a2c; color: #fff; padding: 8px 12px; }
.practice-review-table-wrap { max-height: 474px; overflow: auto; }.practice-review-table { width: 100%; border-collapse: collapse; font-size: 11px; }.practice-review-table th { position: sticky; top: 0; z-index: 1; background: #081a2c; color: #a8bbcc; padding: 10px; text-align: left; }.practice-review-table td { border-top: 1px solid #294b67; padding: 11px 10px; vertical-align: middle; }.practice-review-table tr { cursor: pointer; }.practice-review-table tr.is-active { background: #263f70; }.practice-review-table input { width: 18px; height: 18px; accent-color: #70a7ff; }.practice-review-student,.practice-review-summary-cell { display: grid; gap: 3px; }.practice-review-student span,.practice-review-summary-cell span { color: #91a7bc; font-size: 10px; }
.practice-review-detail { min-width: 0; padding: 12px; overflow: auto; }.practice-review-detail > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }.practice-review-detail h2 { margin: 3px 0; font-size: 18px; }.practice-review-detail header p { margin: 0; color: #91a7bc; font-size: 11px; }.practice-review-status { border-radius: 15px; background: #324a68; padding: 4px 8px; color: #d8e6f4; font-size: 10px; font-weight: 800; }.practice-review-status[data-tone="pending"] { background: #31447d; color: #cbd5ff; }.practice-review-detail section { border-bottom: 1px solid #294b67; padding: 13px 0; }.practice-review-detail h3 { margin: 0 0 8px; font-size: 13px; }.practice-review-detail dl { margin: 0; }.practice-review-detail dl div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 5px 0; }.practice-review-detail dt { color: #91a7bc; }.practice-review-detail dd { margin: 0; white-space: pre-wrap; }
.practice-review-actions textarea { width: 100%; min-height: 88px; border: 1px solid #3a5973; border-radius: 8px; background: #081a2c; color: #fff; padding: 10px; resize: vertical; }.practice-review-actions > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }.practice-review-actions button { min-height: 34px; padding: 6px 8px; font-size: 10px; }.practice-review-actions button.is-staged { border-color: #78a3ff; background: #355ce0; color: #fff; }
.practice-review-settlement { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 160px minmax(360px, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: 12px; border: 1px solid #294b67; border-radius: 0 0 9px 9px; background: #0c2236; padding: 8px 12px; }.practice-review-settlement > div { display: grid; }.practice-review-settlement > div span { color: #91a7bc; font-size: 10px; }.practice-review-settlement dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }.practice-review-settlement dl div { border-left: 1px solid #294b67; padding-left: 12px; }.practice-review-settlement dt { color: #91a7bc; font-size: 9px; }.practice-review-settlement dd { margin: 2px 0 0; font-weight: 900; }.practice-review-settlement p { margin: 0; color: #9db0c3; font-size: 10px; }

.practice-empty { color: #809ab2; padding: 24px; text-align: center; }
.practice-tutorial { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #02101dcc; padding: 20px; }
.practice-tutorial > div { width: min(520px, 100%); border: 1px solid #5277a1; border-radius: 16px; background: #0b2137; color: #edf6ff; box-shadow: 0 26px 80px #0009; padding: 26px; }
.practice-tutorial h2 { margin: 7px 0 12px; }.practice-tutorial p { color: #9fb4c8; line-height: 1.7; }.practice-tutorial footer { display: flex; justify-content: flex-end; gap: 8px; }
.practice-student-tutorial-layer { position: fixed; inset: 0; z-index: 100; }
.practice-student-tutorial-layer[hidden] { display: none; }
.practice-tutorial-spotlight { position: fixed; border: 3px solid #4b91e8; border-radius: 18px; box-shadow: 0 0 0 9999px #02101dcc, 0 0 0 6px #4b91e82e, 0 16px 44px #17324d40; pointer-events: none; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease; }
.practice-tutorial-panel { position: fixed; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box; border: 1px solid #8bb8ed; border-radius: 18px; background: #fff; color: #17324d; box-shadow: 0 26px 80px #001a3a52; padding: 22px; }
.practice-tutorial-panel > span { color: #2f76c7; font-size: 12px; font-weight: 900; }.practice-tutorial-panel h2 { margin: 7px 0 12px; }.practice-tutorial-panel p { color: #526c87; line-height: 1.7; }.practice-tutorial-panel footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.practice-student-page {
  margin: 0;
  background: #f5f8fc !important;
  color: #173653;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: light;
}
.practice-student-page * { box-sizing: border-box; }
.practice-student-shell { width: min(794px, calc(100% - 36px)); margin: 0 auto; padding: 14px 0 112px; }
.practice-student-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.practice-student-brand { display: flex; align-items: center; gap: 12px; }.practice-student-brand > a { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #275b91; text-decoration: none; }.practice-student-brand > span { display: grid; gap: 3px; }.practice-student-brand strong { color: #4e7198; font-size: 12px; }.practice-student-brand b { color: #193b5e; font-size: 18px; }
.practice-student-topbar a { color: inherit; text-decoration: none; }
.practice-student-topbar > div { display: flex; gap: 7px; }
.practice-student-tutorial { min-height: 44px; border: 1px solid #87b5ff; border-radius: 22px; background: #fff; color: #2168c7; padding: 8px 14px; font-weight: 900; }
.practice-student-tutorial small { border-radius: 20px; background: #eaf3ff; padding: 2px 6px; }
.practice-student-message { min-height: 22px; margin: 8px 0 12px; color: #71839a; font-size: 12px; }
.practice-student-message[data-tone="good"] { color: #187a54; }.practice-student-message[data-tone="bad"] { color: #b33e46; }
.practice-student-page .practice-button { border-color: #347ce8; border-radius: 12px; background: #347ce8; box-shadow: 0 7px 16px #347ce82c; }
.practice-student-page .practice-button.secondary { border-color: #ccd8e5; background: #fff; color: #35516e; box-shadow: none; }

.practice-student-task-summary { display: grid; grid-template-columns: 1fr 176px; align-items: center; gap: 16px; border: 1px solid #d8e3ee; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px #24415f12; padding: 17px 20px; }
.practice-student-task-copy { display: flex; align-items: center; min-width: 0; gap: 14px; }
.practice-student-task-icon { display: grid; flex: 0 0 auto; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #eaf8f0; color: #23a268; font-size: 21px; }
.practice-student-task-copy > div { min-width: 0; }.practice-student-task-copy small { color: #71869b; font-size: 10px; font-weight: 900; }.practice-student-task-copy h1 { margin: 2px 0 3px; font-size: 19px; letter-spacing: -.03em; }.practice-student-task-copy p { margin: 0 0 4px; color: #657b91; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.practice-student-task-copy div > span { color: #7b8da0; font-size: 10px; }
.practice-student-task-progress { display: grid; justify-items: end; gap: 8px; }.practice-student-task-progress strong { color: #2e6fc4; font-size: 13px; }.practice-student-task-progress > span { width: 100%; height: 8px; border-radius: 10px; background: #e5ebf2; overflow: hidden; }.practice-student-task-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #2eb87a; transition: width .2s ease; }
.practice-student-task-picker { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; border-top: 1px solid #e7edf3; padding-top: 12px; color: #60768d; font-size: 11px; font-weight: 900; }.practice-student-task-picker select { min-height: 44px; border: 1px solid #cbd8e5; border-radius: 10px; background: #fff; color: #284560; padding: 8px 12px; }

.practice-student-today { padding-top: 34px; }
.practice-student-today-heading { text-align: center; }.practice-student-today-heading small { color: #7c8fa2; font-size: 11px; font-weight: 800; }.practice-student-today-heading h2 { margin: 7px 0 5px; color: #173a5d; font-size: 28px; letter-spacing: -.045em; }.practice-student-today-heading p { margin: 0; color: #718399; font-size: 12px; }
.practice-student-current-action { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 18px; min-height: 166px; margin: 22px 0 18px; border: 2px solid #82b7f5; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px #2d6fb51b; padding: 24px 26px; }
.practice-student-current-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 17px; background: #fff5cc; color: #eba91e; font-size: 27px; }
.practice-student-current-action small { color: #307bd5; font-size: 11px; font-weight: 900; }.practice-student-current-action h3 { margin: 5px 0; font-size: 23px; }.practice-student-current-action p { margin: 0 0 9px; color: #61778e; font-size: 13px; }.practice-student-current-action div > span { color: #a36a08; font-size: 11px; font-weight: 800; }.practice-student-current-action div > span i { margin-right: 4px; }
.practice-student-current-action .practice-button { min-width: 104px; }
.practice-student-offday { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; border: 1px solid #d7e4f1; border-radius: 16px; background: #f8fbff; padding: 14px 16px; }
.practice-student-offday > div { display: flex; align-items: center; gap: 12px; }.practice-student-offday > div > span { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: #eaf3ff; color: #347ce8; }.practice-student-offday h3 { margin: 0 0 4px; font-size: 13px; }.practice-student-offday p { margin: 0; color: #6b8095; font-size: 11px; line-height: 1.45; }.practice-student-offday .practice-button { flex: 0 0 auto; }

.practice-student-journey { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.practice-student-journey li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 112px; border: 1px solid #dce5ee; border-radius: 17px; background: #fff; box-shadow: 0 8px 22px #29435b0d; padding: 17px 20px; }
.practice-student-journey li.is-current { border: 2px solid #5598ec; }.practice-student-journey li:not(:last-child)::after { position: absolute; left: 43px; bottom: -18px; z-index: 0; width: 2px; height: 20px; background: #d4e0ec; content: ""; }
.practice-journey-marker { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #d9e2ec; border-radius: 50%; background: #f6f8fb; color: #90a0b0; font-size: 16px; }
.practice-student-journey li.is-complete .practice-journey-marker { border-color: #bfe7d2; background: #e9f9f0; color: #1aa56b; }.practice-student-journey li.is-current .practice-journey-marker { border: 2px solid #4d90e8; background: #eef6ff; color: #2f79d7; box-shadow: 0 0 0 5px #eef6ff; }.practice-student-journey li.is-locked { opacity: .62; }
.practice-student-journey small { color: #8798aa; font-size: 10px; font-weight: 900; }.practice-student-journey strong { display: block; margin: 3px 0 5px; color: #244460; font-size: 17px; }.practice-student-journey p { max-width: 480px; margin: 0; color: #708397; font-size: 12px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.practice-journey-action { min-width: 88px; min-height: 44px; border: 1px solid #9dc2ee; border-radius: 11px; background: #fff; color: #2d72c8; padding: 8px 13px; font-weight: 900; cursor: pointer; }.practice-journey-status { min-width: 82px; color: #73879a; font-size: 10px; font-weight: 900; text-align: center; }

.practice-student-reward { margin-top: 14px; border: 1px solid #e0e7ef; border-radius: 17px; background: #fff; padding: 14px 18px; }.practice-student-reward > div { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 0 12px; }.practice-student-reward > div > span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #fff5d8; color: #d99b1f; }.practice-student-reward h3 { margin: 0; font-size: 12px; }.practice-student-reward p { margin: 4px 0 0; color: #718399; font-size: 10px; }.practice-student-reward strong { color: #2d72c8; }
.practice-student-sticky-actions { position: sticky; bottom: 10px; z-index: 5; display: grid; grid-template-columns: 160px 1fr; gap: 10px; margin-top: 16px; border: 1px solid #d9e3ec; border-radius: 17px; background: #fffffff2; box-shadow: 0 14px 36px #19375024; padding: 10px; }.practice-student-sticky-actions .practice-button { display: flex; align-items: center; justify-content: center; min-height: 52px; text-decoration: none; }

.practice-student-stage { margin-top: 18px; border: 1px solid #dce5ee; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px #29435b14; overflow: hidden; }
.practice-stage-header { border-bottom: 1px solid #e4eaf1; background: #f9fbfe; padding: 20px 24px; }.practice-stage-back { min-height: 44px; border: 0; background: transparent; color: #2e70bd; padding: 4px 0; font-weight: 900; cursor: pointer; }.practice-stage-back i { margin-right: 6px; }.practice-stage-header > small { display: block; margin-top: 12px; color: #347ce8; font-size: 10px; font-weight: 900; }.practice-stage-header h2 { margin: 5px 0; font-size: 25px; letter-spacing: -.04em; }.practice-stage-header p { margin: 0; color: #6e8195; font-size: 12px; }
.practice-student-stage-form { padding: 4px 24px 24px; }.practice-student-stage-form > footer,.practice-student-stage-form > section > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; border-top: 1px solid #e5ebf1; padding-top: 16px; }
.practice-record-date-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px; border-bottom: 1px solid #e4eaf1; padding-bottom: 16px; }
.practice-record-date-row label:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; font-weight: 900; }.practice-record-date-row input[type="date"] { min-height: 44px; border: 1px solid #ccd8e6; border-radius: 9px; background: #fff; color: #29435d; padding: 9px 12px; }
.practice-today-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 11px; }.practice-today-check input { width: 20px; height: 20px; accent-color: #367de3; }
.practice-question-field { margin-top: 20px; }.practice-question-field > label,.practice-question-field > legend { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: #27435e; font-weight: 900; }.practice-question-field small { color: #74869a; font-weight: 600; }
.practice-question-field input[type="text"],.practice-question-field textarea { width: 100%; min-height: 48px; border: 1px solid #ccd8e6; border-radius: 9px; background: #fff; color: #203a54; padding: 12px; }.practice-question-field textarea { min-height: 92px; resize: vertical; }
.practice-choice-list { display: grid; gap: 8px; }.practice-choice-list label { min-height: 44px; display: flex; align-items: center; gap: 10px; border: 1px solid #d8e1eb; border-radius: 9px; background: #fff; padding: 9px 12px; }.practice-choice-list input { width: 20px; height: 20px; accent-color: #347be1; }
.practice-rating-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.practice-rating-list label { min-height: 92px; display: grid; place-items: center; gap: 5px; border: 1px solid #d9e2ed; border-radius: 10px; background: #fff; padding: 10px 4px; color: #536b84; font-size: 10px; text-align: center; }.practice-rating-list label i { color: #f5bd31; font-size: 25px; }.practice-rating-list input { width: 19px; height: 19px; accent-color: #347be1; }
.practice-file-field { display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 14px; }.practice-file-field input { min-height: 58px; border: 1px dashed #82b4fb; border-radius: 10px; padding: 14px; color: #3a6eb2; }
.practice-week-progress { margin-top: 22px; border: 1px solid #d6e3f0; border-radius: 11px; background: #f9fcff; padding: 14px; }.practice-week-progress header { display: flex; justify-content: space-between; }.practice-week-progress > div { height: 7px; margin-top: 14px; border-radius: 7px; background: #dbe3ec; overflow: hidden; }.practice-week-progress > div span { display: block; width: 0; height: 100%; background: #17b875; }.practice-week-progress p { margin-bottom: 0; color: #647a91; font-size: 11px; }
.practice-confirm-card { margin-top: 20px; border: 1px solid #dce5ef; border-radius: 16px; background: #f8fbff; padding: 24px; text-align: center; }.practice-confirm-card > span { display: grid; width: 58px; height: 58px; margin: 0 auto 10px; place-items: center; border-radius: 18px; background: #eaf3ff; color: #347ce8; font-size: 24px; }.practice-confirm-card h3 { margin: 0 0 6px; font-size: 20px; }.practice-confirm-card > p { margin: 0; color: #6d8195; font-size: 12px; }.practice-confirm-card dl { margin: 20px 0 0; border-top: 1px solid #e0e7ef; }.practice-confirm-card dl div { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #e7edf3; padding: 11px 0; text-align: left; }.practice-confirm-card dt { color: #73879b; font-size: 11px; }.practice-confirm-card dd { margin: 0; font-size: 11px; font-weight: 900; text-align: right; }

@media (max-width: 720px) {
  .practice-student-shell { width: min(100% - 20px, 520px); padding-top: 10px; }
  .practice-student-topbar .practice-button { width: 44px; padding: 8px; font-size: 0; }.practice-student-topbar .practice-button i { font-size: 15px; }
  .practice-student-tutorial { width: 44px; padding: 8px; font-size: 0; }.practice-student-tutorial small { display: none; }.practice-student-tutorial i { font-size: 17px; }
  .practice-student-brand b { font-size: 16px; }.practice-student-task-summary { grid-template-columns: 1fr; gap: 12px; padding: 14px; }.practice-student-task-progress { justify-items: start; }.practice-student-task-progress > span { width: 100%; }.practice-student-task-copy p { white-space: normal; }
  .practice-student-today { padding-top: 24px; }.practice-student-today-heading h2 { font-size: 24px; }
  .practice-student-current-action { grid-template-columns: 48px 1fr; gap: 12px; min-height: 0; padding: 17px; }.practice-student-current-icon { width: 48px; height: 48px; }.practice-student-current-action h3 { font-size: 20px; }.practice-student-current-action .practice-button { grid-column: 1 / -1; width: 100%; }
  .practice-student-offday { align-items: stretch; flex-direction: column; }.practice-student-offday .practice-button { width: 100%; }
  .practice-student-journey li { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; min-height: 120px; padding: 15px; }.practice-journey-marker { width: 42px; height: 42px; }.practice-student-journey li:not(:last-child)::after { left: 35px; }.practice-student-journey p { white-space: normal; }.practice-journey-action,.practice-journey-status { grid-column: 2; justify-self: start; min-width: 92px; }.practice-journey-status { text-align: left; }
  .practice-student-sticky-actions { grid-template-columns: 1fr 1.45fr; bottom: 6px; }.practice-student-sticky-actions .practice-button { padding: 8px 10px; font-size: 11px; }
  .practice-stage-header { padding: 16px; }.practice-student-stage-form { padding: 4px 16px 18px; }.practice-stage-header h2 { font-size: 22px; }
  .practice-record-date-row { grid-template-columns: 1fr; gap: 7px; }.practice-today-check { min-height: 32px; }
  .practice-rating-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }.practice-rating-list label { min-height: 84px; padding: 7px 2px; }.practice-rating-list label i { font-size: 20px; }
  .practice-file-field { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }