:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --text: #172033;
  --muted: #6b7485;
  --line: #dfe5ee;
  --primary: #2563eb;
  --primary-dark: #1746ad;
  --green: #138a63;
  --amber: #b45309;
  --red: #c2414d;
  --nav: #17213a;
  --site-font-size: 14px;
  --site-max-width: 1540px;
  --site-page-padding: 34px;
  --card-radius: 8px;
  --button-radius: 7px;
  --shadow: 0 10px 30px rgba(25, 39, 71, 0.08);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: var(--site-font-size); color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }
.site-header { position: sticky; z-index: 50; top: 0; min-height: 72px; padding: 0 28px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; color: #fff; background: var(--nav); box-shadow: 0 5px 18px rgba(15,23,42,.2); }
.brand { display: flex; gap: 10px; align-items: center; padding: 0; white-space: nowrap; }
.brand-mark { width: 40px; height: 40px; border-radius: 8px; display: block; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.brand strong, .brand span { display: block; }
.brand span { max-width: 150px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; color: #aab4c8; font-size: 11px; letter-spacing: 0; }
.nav { min-width: 0; height: 72px; display: flex; align-items: stretch; gap: 2px; }
.nav-item { height: 100%; border: 0; border-radius: 0; padding: 0 11px; text-align: center; white-space: nowrap; color: #cbd4e4; background: transparent; }
.nav-item:hover, .nav-item.active { color: #fff; background: #273450; }
.nav-item.active { box-shadow: inset 0 -3px #48d1a0; }
.nav-flyout { position: relative; height: 72px; }
.nav-flyout-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-arrow { width: 7px; height: 7px; margin-left: 8px; display: inline-block; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .16s ease; }
.nav-flyout.active > .nav-flyout-trigger { color: #fff; background: #273450; box-shadow: inset 0 -3px #48d1a0; }
.nav-flyout-menu { position: absolute; z-index: 30; left: 0; top: calc(100% + 8px); width: 240px; padding: 7px; display: grid; gap: 4px; visibility: hidden; opacity: 0; transform: translateY(-5px); border: 1px solid #d9e0ea; border-radius: 8px; background: #fff; box-shadow: 0 16px 36px rgba(23,32,51,.2); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.nav-flyout:hover .nav-flyout-menu, .nav-flyout.open .nav-flyout-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.nav-flyout:hover .nav-arrow, .nav-flyout.open .nav-arrow { transform: rotate(225deg); }
.nav-flyout-menu::before { content: ""; position: absolute; inset: -9px 0 auto; height: 9px; }
.nav-flyout-menu button { min-height: 44px; padding: 8px 11px; display: grid; gap: 3px; align-items: center; border: 0; border-radius: 6px; color: #334155; background: transparent; text-align: left; }
.nav-flyout-menu button:hover, .nav-flyout-menu button.active { color: var(--primary); background: #eef4ff; }
.nav-flyout-menu strong, .nav-flyout-menu small { display: block; }
.nav-flyout-menu small { color: var(--muted); }
.admin-nav-flyout { flex: 0 0 auto; }
.admin-flyout-menu {
  left: auto;
  right: 0;
  width: min(760px, calc(100vw - 32px));
  max-height: min(72vh, 620px);
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  align-items: start;
  gap: 10px;
  overflow: auto;
  padding: 12px;
}
.admin-flyout-group {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  background: #f8fbff;
}
.admin-flyout-group h3 {
  margin: 0 0 4px;
  padding: 4px 6px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}
.admin-flyout-menu button {
  min-height: 38px;
  padding: 8px 10px;
}
.admin-flyout-menu button.active {
  color: var(--primary);
  background: #eef4ff;
  box-shadow: inset 3px 0 var(--primary);
}
.header-account { justify-self: end; white-space: nowrap; }
.header-account .ghost-button { color: #dce5f3; border-color: #46536c; background: #26324b; }
.user-center-button { min-height: 44px; padding: 5px 10px; display: grid; grid-template-columns: minmax(0, auto) auto; gap: 2px 8px; align-items: center; border: 0; color: #fff; background: transparent; text-align: right; }
.user-center-button span { font-weight: 800; }.user-center-button small { color: #aebad0; font-size: 11px; }
.user-center-button #current-user-name, .user-center-button #current-user-ability { grid-column: 1; }
.user-center-button .nav-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.account-flyout { position: relative; height: 72px; display: flex; align-items: center; }
.account-flyout:hover .account-flyout-menu, .account-flyout.open .account-flyout-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.account-flyout:hover .nav-arrow, .account-flyout.open .nav-arrow { transform: rotate(225deg); }
.account-flyout-menu { left: auto; right: 0; top: calc(100% + 8px); width: 180px; }
.account-flyout-menu button { min-height: 40px; }

.main { width: min(var(--site-max-width), 100%); min-width: 0; margin: 0 auto; padding: 28px var(--site-page-padding) 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.topbar h1, h2 { margin: 0; }
.topbar h1 { font-size: 27px; }
.eyebrow { margin: 0 0 6px; color: var(--primary); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.top-actions, .editor-actions, .typing-actions { display: flex; gap: 10px; align-items: center; }
.user-menu { display: flex; align-items: center; gap: 9px; padding-left: 10px; }
.user-menu > span:first-child { font-weight: 800; }
.ability-badge { min-height: 24px; padding: 4px 8px; border-radius: 5px; color: #244f9e; background: #dce8ff; font-size: 11px; font-weight: 800; }
.primary-button, .ghost-button { min-height: 40px; border-radius: var(--button-radius); padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; font-weight: 700; vertical-align: middle; }
.primary-button { border: 1px solid var(--button-color, var(--primary)); color: #fff; background: var(--button-color, var(--primary)); }
.primary-button:hover { background: var(--primary-dark); }
.ghost-button { border: 1px solid var(--line); color: #334155; background: #fff; }

.view { display: none; }
.view.active { display: block; }
.site-home-hero { position: relative; min-height: 220px; margin-bottom: 18px; overflow: hidden; display: grid; align-items: end; border: 1px solid var(--line); border-radius: var(--card-radius); background: linear-gradient(135deg, #dbeafe, #f8fafc); box-shadow: var(--shadow); }
.site-home-hero.hidden { display: none; }
.site-home-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-home-hero-copy { position: relative; z-index: 1; max-width: 680px; padding: 26px; color: var(--text); background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.72), rgba(255,255,255,0)); }
.site-home-hero-copy p { margin: 0 0 6px; color: var(--primary); font-weight: 900; }
.site-home-hero-copy h2 { margin: 0 0 8px; font-size: 28px; }
.site-home-hero-copy div { color: #334155; line-height: 1.7; }
.site-home-hero-copy .primary-button { margin-top: 14px; }
.home-fullscreen-card { margin-bottom: 18px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #bfdbfe; border-radius: var(--card-radius); background: linear-gradient(90deg, #eff6ff, #ffffff); box-shadow: var(--shadow); }
.home-fullscreen-card h2 { margin: 0 0 6px; font-size: 20px; }
.home-fullscreen-card p:last-child { margin: 0; color: var(--muted); line-height: 1.6; }
.home-fullscreen-card .primary-button { min-width: 118px; }
.nav-fullscreen-toggle { color: #dbeafe; }
body.site-manual-fullscreen .nav-fullscreen-toggle { color: #fff; background: #1d4ed8; box-shadow: inset 0 -3px #93c5fd; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.metric, .panel { border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--shadow); }
.metric { padding: 18px; border-top: 3px solid #41b88d; }
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { display: block; margin: 8px 0 4px; font-size: 30px; }
.metric p { margin: 0; color: var(--muted); font-size: 12px; }
.panel { padding: 20px; }
.two-column, .exam-layout, .typing-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 18px; }
.home-learning-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 18px; align-items: start; }
.home-recommendation-main { min-width: 0; }
.home-ranking-side { min-width: 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.section-head h2 { font-size: 19px; }
.section-head.compact { margin-bottom: 12px; }

.timeline { display: grid; gap: 2px; }
.timeline-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; position: relative; padding: 10px 0; }
.timeline-item > span { width: 30px; height: 30px; border: 2px solid #cfd6e2; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: #fff; font-weight: 800; z-index: 1; }
.timeline-item:not(:last-child)::after { content: ""; position: absolute; top: 38px; bottom: -8px; left: 14px; width: 2px; background: #e3e7ee; }
.timeline-item.done > span { border-color: var(--green); color: #fff; background: var(--green); }
.timeline-item p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.activity-list { display: grid; gap: 10px; }
.activity { padding: 12px; border: 1px solid var(--line); border-radius: 7px; display: flex; justify-content: space-between; gap: 12px; }
.activity strong, .activity span { display: block; }
.activity span, .empty-state { color: var(--muted); font-size: 12px; }
.status { color: var(--green); font-weight: 800; }
.latest-question-list, .profile-list, .ranking-list { display: grid; gap: 9px; }
.latest-question { width: 100%; min-height: 66px; padding: 11px 13px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #fff; text-align: left; }
.latest-question:hover { border-color: var(--primary); background: #f8fbff; }
.latest-question strong, .latest-question small { display: block; }.latest-question small { margin-top: 4px; color: var(--muted); }
.rank-row { min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 38px minmax(0,1fr) minmax(62px, auto); align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }.rank-number { font-size: 16px; font-weight: 900; color: var(--muted); }.rank-row.top .rank-number { color: #b45309; }
.rank-row strong, .rank-row small { display: block; }.rank-name { min-width: 0; overflow: hidden; color: var(--text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.rank-data { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }.rank-data small { color: var(--muted); font-size: 12px; font-weight: 800; }.rank-data small:last-child { color: var(--primary); }
.profile-summary { margin-bottom: 18px; display: grid; grid-template-columns: minmax(320px,1.6fr) repeat(3,minmax(130px,.45fr)) auto; gap: 12px; align-items: stretch; }
.profile-summary > #open-learning-preferences { align-self: stretch; min-height: 112px; white-space: nowrap; }
#learning-preferences-modal > form > .form-grid { display: none; }
.preference-check-grid { display: grid; gap: 14px; }
.preference-check-grid fieldset { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbff; }
.preference-check-grid legend { padding: 0 6px; color: var(--text); font-weight: 900; }
.preference-check-list { display: flex; flex-wrap: wrap; gap: 8px; }
.preference-check-list.category-list { max-height: 150px; overflow: auto; }
.preference-check-list label { min-height: 34px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #bfdbfe; border-radius: 999px; color: #1e3a8a; background: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
.preference-check-list input { width: auto; min-height: 0; }
.preference-check-list label:has(input:checked) { border-color: #2563eb; color: #fff; background: #2563eb; }
.profile-identity, .profile-stat { min-height: 112px; padding: 18px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.profile-avatar { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 23px; font-weight: 900; }.profile-identity h2 { margin: 0; }.profile-identity p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.profile-stat { display: grid; place-content: center; text-align: center; }.profile-stat span { color: var(--muted); font-size: 12px; }.profile-stat strong { font-size: 28px; }
.profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.profile-wide { grid-column: 1 / -1; }
.profile-list-item { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 7px; }.profile-list-item strong, .profile-list-item small { display: block; }.profile-list-item small { margin-top: 4px; color: var(--muted); }
.answer-record-list { align-items: stretch; }
.answer-record-item { background: #fff; }
.answer-record-item small { line-height: 1.55; }
.answer-record-item .small-button { flex: 0 0 auto; }
.pet-create-panel, .pet-home-panel { display: grid; gap: 16px; }.pet-create-panel.hidden, .pet-home-panel.hidden { display: none; }
.pet-create-card { display: grid; gap: 18px; }.pet-create-grid { display: grid; grid-template-columns: 1.1fr .9fr .8fr; gap: 16px; align-items: start; }.pet-create-grid h3 { margin: 0 0 10px; font-size: 16px; }
.pet-choice-grid, .pet-color-grid { display: grid; gap: 10px; }.pet-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.pet-color-grid { grid-template-columns: repeat(1,minmax(0,1fr)); }
.pet-choice, .pet-color-choice { min-height: 58px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; }.pet-choice { display: flex; align-items: center; gap: 10px; }.pet-choice span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #eef4ff; font-size: 22px; }.pet-choice.active, .pet-color-choice.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pet-color-choice::before { content: ""; width: 18px; height: 18px; margin-right: 8px; display: inline-block; vertical-align: middle; border-radius: 50%; background: var(--pet-color); }
.pet-name-box { padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }.pet-name-box input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; }
.pet-home-panel { grid-template-columns: minmax(320px,.85fr) minmax(0,1.15fr); align-items: start; }.pet-status-panel, .pet-side-panel { min-width: 0; }
.pet-status-card { display: grid; gap: 16px; }
.pet-avatar-scene { min-height: 300px; padding: 24px; display: grid; place-items: center; gap: 10px; border-radius: 8px; background: radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--pet-main) 25%, #fff), #fff 58%, #eef6ff); border: 1px solid color-mix(in srgb, var(--pet-main) 35%, #dfe5ee); overflow: hidden; }
.pet-avatar-scene > span:not(.pet-avatar):not(.pet-effect):not(.pet-shadow):not(.pet-avatar-glow) { color: var(--muted); font-weight: 800; }
.pet-teacher-bubble { position: relative; width: min(100%, 360px); padding: 13px 15px; border: 1px solid #bfdbfe; border-radius: 16px; color: #1e3a8a; background: linear-gradient(145deg, #eff6ff, #fff7d6); box-shadow: 0 12px 28px rgba(37,99,235,.12); line-height: 1.55; }
.pet-teacher-bubble::after { content: ""; position: absolute; left: 54%; bottom: -9px; width: 18px; height: 18px; border-right: 1px solid #bfdbfe; border-bottom: 1px solid #bfdbfe; background: #fff7d6; transform: rotate(45deg); }
.pet-teacher-bubble small { display: block; margin-bottom: 3px; color: #64748b; font-weight: 800; }
.pet-teacher-bubble strong { display: block; margin-bottom: 4px; font-size: 15px; }
.pet-teacher-bubble p { margin: 0; color: #334155; }
.pet-teacher-bubble.active { animation: petBubblePop .24s ease-out; }
.pet-3d-shell { position: relative; width: min(100%, 560px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--pet-main) 35%, #dbeafe); border-radius: 14px; background: linear-gradient(145deg, #f8fbff, #eef6ff); box-shadow: 0 22px 48px rgba(15,23,42,.14); }
.pet-3d-canvas { width: 100%; aspect-ratio: 4 / 3; display: block; cursor: grab; touch-action: none; background: #eaf6ff; }
.pet-3d-canvas:active { cursor: grabbing; }
.pet-3d-overlay { position: absolute; left: 14px; top: 12px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.65); border-radius: 10px; background: rgba(255,255,255,.78); backdrop-filter: blur(8px); box-shadow: 0 10px 24px rgba(15,23,42,.1); pointer-events: none; }
.pet-3d-overlay strong { color: #0f172a; font-size: 14px; }
.pet-3d-overlay small { color: var(--muted); font-weight: 800; }
.pet-3d-hint { position: absolute; right: 14px; top: 14px; padding: 6px 9px; border-radius: 999px; color: #475569; background: rgba(255,255,255,.72); font-size: 12px; font-weight: 900; pointer-events: none; }
.pet-3d-actions { position: absolute; left: 14px; right: 14px; bottom: 48px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pet-3d-actions > span { padding: 6px 9px; border-radius: 999px; color: #475569; background: rgba(255,255,255,.78); font-size: 12px; font-weight: 900; }
.pet-3d-actions button { min-height: 30px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; color: #1e293b; background: rgba(255,255,255,.78); font-size: 12px; font-weight: 900; box-shadow: 0 8px 18px rgba(15,23,42,.09); }
.pet-3d-actions button:hover { border-color: var(--pet-main); color: #0f172a; background: #fff; }
.pet-3d-equipped { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; color: #334155; font-size: 12px; font-weight: 900; pointer-events: none; }
.pet-3d-equipped span { padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.72); }
.pet-model-active { padding: 10px 14px; display: grid; gap: 4px; border-top: 1px solid rgba(148,163,184,.24); background: rgba(255,255,255,.78); }
.pet-model-active strong, .pet-model-active small, .pet-model-active a { display: block; }
.pet-model-active small { color: var(--muted); }
.pet-model-active a { color: var(--primary); font-size: 12px; font-weight: 900; }
.pet-3d-card { position: relative; width: min(100%, 520px); min-height: 420px; padding: 26px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--pet-main) 35%, #dbeafe); border-radius: 18px; background: linear-gradient(145deg, #f8fbff, #eef6ff); box-shadow: 0 24px 52px rgba(15,23,42,.14); }
.pet-stage-bg { position: absolute; inset: 0; background: radial-gradient(circle at 34% 22%, rgba(255,255,255,.96), transparent 22%), radial-gradient(circle at 74% 34%, color-mix(in srgb, var(--pet-main) 18%, transparent), transparent 34%), linear-gradient(180deg, transparent 0 68%, color-mix(in srgb, var(--pet-main) 12%, #fff) 68% 100%); pointer-events: none; }
.pet-image-wrap { width: min(68%, 250px); height: auto; aspect-ratio: 1 / 1; background: transparent; box-shadow: none; }
.pet-avatar-image { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; }
.pet-image-meta { position: absolute; left: 18px; top: 16px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.74); border-radius: 12px; background: rgba(255,255,255,.8); backdrop-filter: blur(8px); box-shadow: 0 10px 24px rgba(15,23,42,.1); }
.pet-image-meta strong, .pet-image-meta small { display: block; }.pet-image-meta small { color: var(--muted); font-weight: 800; }
.pet-current-status { position: absolute; right: 18px; top: 16px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.74); border-radius: 999px; color: #334155; background: rgba(255,255,255,.84); box-shadow: 0 10px 24px rgba(15,23,42,.1); font-size: 13px; font-weight: 900; }
.pet-current-status strong { color: var(--pet-main); }
.pet-animation-test-actions { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pet-animation-test-actions > span, .pet-animation-test-actions button { min-height: 30px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; color: #1e293b; background: rgba(255,255,255,.78); font-size: 12px; font-weight: 900; box-shadow: 0 8px 18px rgba(15,23,42,.09); }
.pet-animation-test-actions button.active, .pet-animation-test-actions button:hover { border-color: var(--pet-main); background: #fff; }
.pet-profile-card { margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, #fff, #f8fbff); }
.pet-avatar-wrap { position: relative; width: 190px; height: 190px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 34px; cursor: pointer; background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--pet-main) 16%, #e8f2ff)); box-shadow: 0 22px 40px color-mix(in srgb, var(--pet-main) 22%, rgba(15,23,42,.2)), inset 0 3px 10px rgba(255,255,255,.86), inset 0 -10px 22px rgba(15,23,42,.06); transform-style: preserve-3d; perspective: 800px; transition: transform .2s ease, box-shadow .2s ease; }
.pet-avatar-wrap:hover { transform: translateY(-2px) rotateX(3deg) rotateY(-3deg); box-shadow: 0 28px 52px color-mix(in srgb, var(--pet-main) 28%, rgba(15,23,42,.24)), inset 0 3px 10px rgba(255,255,255,.9); }
.pet-avatar-wrap.pet-stage-egg { border-radius: 46px; }
.pet-avatar-glow { position: absolute; inset: 18px; border-radius: 30px; background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.95), transparent 28%), radial-gradient(circle at 70% 76%, color-mix(in srgb, var(--pet-main) 22%, transparent), transparent 48%); transform: translateZ(8px); pointer-events: none; }
.pet-avatar { position: relative; z-index: 2; display: grid; place-items: center; font-size: 92px; line-height: 1; filter: drop-shadow(0 14px 13px rgba(15,23,42,.2)); transform: translateZ(24px); }
.pet-shadow { position: absolute; z-index: 1; left: 50%; bottom: 24px; width: 96px; height: 22px; border-radius: 50%; background: rgba(15,23,42,.16); filter: blur(5px); transform: translateX(-50%) translateZ(2px); animation: petShadowIdle 2.4s ease-in-out infinite; }
.pet-effect { position: absolute; z-index: 3; top: 18px; right: 20px; min-width: 34px; min-height: 34px; display: grid; place-items: center; border-radius: 999px; color: #334155; font-size: 24px; font-weight: 900; background: rgba(255,255,255,.72); box-shadow: 0 10px 24px rgba(15,23,42,.13); animation: petEffectFloat 1.2s ease-in-out infinite; }
.pet-effect.sleep { right: 12px; top: 18px; padding: 5px 10px; color: #6366f1; font-size: 18px; }
.pet-effect.happy, .pet-effect.hatch { color: #f59e0b; }
.pet-avatar.idle { animation: petIdle 2.4s ease-in-out infinite; }
.pet-avatar.happy { animation: petHappy .8s ease-in-out 2; }
.pet-avatar.eat { animation: petEat .8s ease-in-out 2; }
.pet-avatar.jump { animation: petJump .55s ease-out; }
.pet-avatar.hatch { animation: petHatch 1.4s ease-in-out; }
.pet-avatar.sick { animation: petSick 1.2s ease-in-out infinite; filter: grayscale(.35) drop-shadow(0 8px 10px rgba(15,23,42,.18)); }
.pet-avatar.sleep { animation: petSleep 2.8s ease-in-out infinite; opacity: .88; }
@keyframes petIdle { 0%, 100% { transform: translateY(0) translateZ(24px) scale(1); } 50% { transform: translateY(-8px) translateZ(28px) scale(1.02); } }
@keyframes petHappy { 0%, 100% { transform: translateY(0) rotate(0deg) translateZ(24px) scale(1); } 25% { transform: translateY(-8px) rotate(-8deg) translateZ(28px) scale(1.08); } 50% { transform: translateY(-14px) rotate(8deg) translateZ(30px) scale(1.12); } 75% { transform: translateY(-6px) rotate(-5deg) translateZ(28px) scale(1.06); } }
@keyframes petJump { 0% { transform: translateY(0) translateZ(24px) scale(1); } 45% { transform: translateY(-42px) translateZ(32px) scale(1.08); } 100% { transform: translateY(0) translateZ(24px) scale(1); } }
@keyframes petEat { 0%, 100% { transform: translateZ(24px) scale(1) rotate(0deg); } 40% { transform: translateZ(28px) scale(1.08) rotate(-4deg); } 70% { transform: translateZ(22px) scale(.98) rotate(4deg); } }
@keyframes petSick { 0%, 100% { transform: translateX(0) translateZ(20px); } 25% { transform: translateX(-3px) translateZ(20px); } 50% { transform: translateX(3px) translateZ(20px); } 75% { transform: translateX(-2px) translateZ(20px); } }
@keyframes petSleep { 0%, 100% { transform: translateY(0) translateZ(20px) scale(.98); } 50% { transform: translateY(4px) translateZ(18px) scale(.95); } }
@keyframes petHatch { 0% { transform: rotate(0deg) translateZ(24px) scale(1); } 15% { transform: rotate(-10deg) translateZ(26px) scale(1.03); } 30% { transform: rotate(10deg) translateZ(28px) scale(1.06); } 45% { transform: rotate(-12deg) translateZ(30px) scale(1.08); } 60% { transform: rotate(12deg) translateZ(32px) scale(1.1); } 80% { transform: translateZ(34px) scale(1.18); } 100% { transform: translateZ(24px) scale(1); } }
@keyframes petEffectFloat { 0%, 100% { transform: translateY(0) translateZ(32px); opacity: .86; } 50% { transform: translateY(-8px) translateZ(34px); opacity: 1; } }
@keyframes petShadowIdle { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .18; } 50% { transform: translateX(-50%) scale(.84); opacity: .11; } }
@keyframes petBubblePop { 0% { opacity: 0; transform: translateY(6px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.pet-status-info h2 { margin: 0 0 8px; font-size: 28px; }.pet-badges, .pet-actions { display: flex; flex-wrap: wrap; gap: 8px; }.pet-badges span { padding: 6px 10px; border-radius: 999px; color: #155e75; background: #e0f7ff; font-size: 12px; font-weight: 900; }
.pet-growth-bar, .pet-stat-line { display: grid; gap: 6px; margin-top: 13px; }.pet-growth-bar span, .pet-stat-line span { color: var(--muted); font-size: 12px; font-weight: 800; }.pet-growth-bar div, .pet-stat-line div { height: 10px; overflow: hidden; border-radius: 999px; background: #e8edf5; }.pet-growth-bar i, .pet-stat-line i { height: 100%; display: block; border-radius: inherit; background: var(--pet-main); }.pet-stat-line { grid-template-columns: 70px 36px 1fr; align-items: center; }.pet-stat-line div { margin-top: 0; }.pet-stat-line.mood i { background: #f59e0b; }.pet-stat-line.health i { background: #22c55e; }
.pet-tabbar { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }.pet-tabbar button { padding: 9px 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-weight: 900; }.pet-tabbar button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.pet-section-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.pet-section-head strong { font-size: 18px; }.pet-section-head span { color: var(--muted); font-size: 12px; }
.pet-shop-category-tabs { margin: -2px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.pet-shop-category-tabs button { min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: #475569; background: #fff; font-weight: 900; }
.pet-shop-category-tabs button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.pet-shop-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.pet-item-card { min-height: 96px; padding: 12px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.pet-item-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 8px; background: #f1f5f9; font-size: 26px; }.pet-item-card strong, .pet-item-card small, .pet-item-card span { display: block; }.pet-item-card small { margin-top: 3px; color: var(--muted); }.pet-item-card span { margin-top: 4px; color: #138a63; font-size: 12px; font-weight: 900; }
.pet-log-list { display: grid; gap: 9px; }.pet-log-row { min-height: 58px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.pet-log-row > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #eef4ff; }.pet-log-row strong, .pet-log-row small { display: block; }.pet-log-row small { margin-top: 3px; color: var(--muted); }
.pet-reward-toast { position: fixed; z-index: 2000; right: 22px; top: 86px; max-width: 330px; padding: 12px 15px; border: 1px solid #bbf7d0; border-radius: 8px; color: #14532d; background: #f0fdf4; box-shadow: 0 14px 34px rgba(23,32,51,.18); font-weight: 900; }
.pet-model-card { display: grid; gap: 12px; }
.pet-model-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; }
.pet-model-preview-box { min-height: 82px; min-width: 128px; display: grid; place-items: center; gap: 2px; border-radius: 10px; color: #1e3a8a; background: linear-gradient(145deg, #dbeafe, #fff); }
.pet-model-preview-box span { font-size: 24px; font-weight: 900; }
.pet-model-preview-box strong, .pet-model-preview-box small { display: block; }
.pet-model-preview-box small { color: var(--muted); }
.pet-admin-layout { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); gap: 16px; align-items: start; }
.pet-admin-user-card { cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; }
.pet-admin-user-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.pet-admin-tabs { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.pet-admin-tabs button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; color: #334155; background: #fff; font-weight: 900; cursor: pointer; }
.pet-admin-tabs button:hover { color: var(--primary); border-color: #bfdbfe; background: #eff6ff; }
.pet-admin-tabs button.active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 8px 18px rgba(37,99,235,.16); }
.pet-admin-panel.hidden { display: none; }
.pet-admin-detail-form { display: grid; gap: 14px; }
.pet-admin-card { padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pet-admin-card h3 { margin: 0; color: #1e3a8a; font-size: 16px; }
.pet-admin-preview { margin-bottom: 14px; display: grid; gap: 10px; }
.pet-admin-image-preview { min-height: 170px; display: grid; place-items: center; gap: 5px; padding: 14px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; text-align: center; color: var(--muted); font-weight: 900; }
.pet-admin-image-preview img { max-width: 160px; max-height: 160px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(15,23,42,.16)); }
.pet-admin-image-preview strong, .pet-admin-image-preview small { display: block; }
.pet-log-list { display: grid; gap: 8px; }
.pet-log-row { padding: 10px 12px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fbff; }
.pet-log-row > span { color: #64748b; font-size: 12px; font-weight: 800; }
.pet-log-row strong, .pet-log-row small { display: block; }
.pet-log-row small { margin-top: 4px; color: var(--muted); }
.pet-config-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: center; }
.pet-config-avatar { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid #bfdbfe; border-radius: 14px; background: #eff6ff; }
.pet-config-avatar img { max-width: 62px; max-height: 62px; object-fit: contain; }

.pet-paradise-root { min-width: 0; }
.pet-paradise-page { display: grid; gap: 18px; }
.pet-paradise-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px solid #dce8f8; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.pet-paradise-title h2 { margin: 0; font-size: 26px; }
.pet-paradise-title span { display: block; margin-top: 6px; color: var(--muted); }
.pet-energy-pill { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; color: #155e75; background: #e0f7ff; font-weight: 900; }
.pet-energy-pill strong { color: #0f172a; font-size: 18px; }
.pet-paradise-layout { display: grid; grid-template-columns: minmax(340px, .86fr) minmax(0, 1.14fr); gap: 18px; align-items: start; }
.pet-paradise-display, .pet-paradise-info, .pet-adoption-card, .pet-paradise-card { border: 1px solid #dfe7f2; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.pet-paradise-display { position: sticky; top: 96px; padding: 18px; display: grid; gap: 14px; overflow: hidden; }
.pet-display-stage { position: relative; min-height: 390px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--pet-main) 32%, #dfe7f2); border-radius: 8px; background: linear-gradient(180deg, #eaf6ff 0 70%, #e9f8df 70% 100%); }
.pet-display-sky { position: absolute; inset: 0; background: radial-gradient(circle at 24% 22%, rgba(255,255,255,.96), transparent 18%), radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--pet-main) 22%, transparent), transparent 28%); pointer-events: none; }
.pet-display-floor { position: absolute; left: 12%; right: 12%; bottom: 48px; height: 28px; border-radius: 50%; background: rgba(15,23,42,.14); filter: blur(6px); pointer-events: none; }
.pet-avatar-button { position: relative; z-index: 2; width: min(68%, 250px); aspect-ratio: 1; border: 0; border-radius: 32px; display: grid; place-items: center; background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--pet-main) 20%, #eff6ff)); box-shadow: 0 28px 52px color-mix(in srgb, var(--pet-main) 25%, rgba(15,23,42,.2)), inset 0 5px 18px rgba(255,255,255,.92), inset 0 -16px 24px rgba(15,23,42,.06); transition: transform .18s ease, box-shadow .18s ease; }
.pet-avatar-button:hover { transform: translateY(-4px) rotateX(3deg) rotateY(-3deg); box-shadow: 0 34px 64px color-mix(in srgb, var(--pet-main) 30%, rgba(15,23,42,.24)), inset 0 5px 18px rgba(255,255,255,.94); }
.pet-avatar-core { font-size: 104px; line-height: 1; filter: drop-shadow(0 16px 14px rgba(15,23,42,.2)); animation: petParadiseIdle 2.8s ease-in-out infinite; }
.pet-avatar-shadow { position: absolute; left: 50%; bottom: 36px; width: 112px; height: 24px; border-radius: 50%; background: rgba(15,23,42,.16); filter: blur(5px); transform: translateX(-50%); }
.pet-avatar-status { position: absolute; right: 14px; top: 14px; padding: 7px 10px; border-radius: 999px; color: #334155; background: rgba(255,255,255,.86); font-size: 12px; font-weight: 900; box-shadow: 0 8px 18px rgba(15,23,42,.12); }
.pet-display-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pet-display-caption strong, .pet-display-caption span { display: block; }
.pet-display-caption span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.pet-display-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pet-display-actions .ghost-button { min-height: 34px; padding: 0 10px; font-size: 12px; }
.pet-partner-dialogue { position: relative; padding: 14px 16px; border: 1px solid #bfdbfe; border-radius: 8px; background: linear-gradient(145deg, #eff6ff, #fffbea); box-shadow: 0 10px 24px rgba(37,99,235,.08); }
.pet-partner-dialogue::before { content: ""; position: absolute; left: 58px; top: -8px; width: 16px; height: 16px; border-left: 1px solid #bfdbfe; border-top: 1px solid #bfdbfe; background: #eff6ff; transform: rotate(45deg); }
.pet-partner-dialogue small, .pet-partner-dialogue strong, .pet-partner-dialogue p { display: block; }
.pet-partner-dialogue small { color: #64748b; font-weight: 900; }
.pet-partner-dialogue strong { margin-top: 3px; color: #1d4ed8; font-size: 15px; }
.pet-partner-dialogue p { margin: 7px 0 0; color: #334155; line-height: 1.65; }
.pet-knowledge-card { padding: 14px; border: 1px solid #cde4ff; border-radius: 8px; background: linear-gradient(145deg, #f0f7ff, #fffaf0); }
.pet-knowledge-card small, .pet-knowledge-card strong, .pet-knowledge-card p { display: block; }
.pet-knowledge-card small { color: #64748b; font-weight: 900; }
.pet-knowledge-card strong { margin-top: 4px; color: #1e3a8a; font-size: 16px; }
.pet-knowledge-card p { margin: 8px 0 12px; color: #334155; line-height: 1.65; }
.pet-knowledge-card button { min-height: 34px; padding: 6px 11px; border: 1px solid #bfdbfe; border-radius: 7px; color: #1d4ed8; background: #fff; font-weight: 900; }
.pet-knowledge-card button:disabled { cursor: not-allowed; opacity: .62; }
.pet-knowledge-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pet-knowledge-actions span, .pet-learning-message { color: #64748b; font-size: 12px; font-style: normal; font-weight: 800; }
.pet-avatar-button.is-learning { cursor: wait; filter: saturate(.9); }
.pet-learning-toast.warning { border-color: #fde68a; color: #92400e; background: #fffbeb; }
.pet-learning-toast.error { border-color: #fecaca; color: #991b1b; background: #fef2f2; }
.pet-paradise-info { padding: 16px; display: grid; gap: 14px; }
.pet-paradise-card { padding: 16px; }
.pet-info-head, .pet-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.pet-info-head h3, .pet-panel-head strong { margin: 0; font-size: 18px; }
.pet-info-head > span { padding: 7px 11px; border-radius: 999px; color: #fff; background: var(--primary); font-weight: 900; }
.pet-panel-head span { color: var(--muted); font-size: 12px; font-weight: 800; }
.pet-exp-bar { display: grid; gap: 6px; margin-bottom: 14px; }
.pet-exp-bar span { color: var(--muted); font-size: 12px; font-weight: 900; }
.pet-exp-bar div { height: 12px; overflow: hidden; border-radius: 999px; background: #e8edf5; }
.pet-exp-bar i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #2563eb); }
.pet-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pet-stat-new { padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.pet-stat-new span, .pet-stat-new strong { display: block; }
.pet-stat-new span { color: var(--muted); font-size: 12px; font-weight: 800; }
.pet-stat-new strong { margin: 5px 0; font-size: 22px; }
.pet-stat-new div { height: 8px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.pet-stat-new i { height: 100%; display: block; border-radius: inherit; background: var(--stat-color); }
.pet-mini-profile { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.pet-mini-profile span { padding: 6px 9px; border-radius: 999px; color: #334155; background: #eef4ff; font-size: 12px; font-weight: 900; }
.pet-paradise-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pet-paradise-tabs button { min-height: 36px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: #475569; background: #fff; font-weight: 900; }
.pet-paradise-tabs button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.pet-paradise-workbench { display: grid; gap: 14px; }
.pet-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pet-action-grid button { min-height: 96px; padding: 12px; display: grid; place-items: center; gap: 4px; border: 1px solid #dbe4f0; border-radius: 8px; background: #fff; color: #172033; text-align: center; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pet-action-grid button:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 10px 22px rgba(37,99,235,.1); }
.pet-action-grid span { font-size: 26px; }
.pet-action-grid strong, .pet-action-grid small { display: block; }
.pet-action-grid small { color: var(--muted); font-size: 11px; }
.pet-shop-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pet-shop-tabs button { min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #475569; font-weight: 900; }
.pet-shop-tabs button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.pet-shop-grid-new { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pet-store-item { min-height: 104px; padding: 12px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.pet-store-item > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 8px; background: #f1f5f9; font-size: 26px; }
.pet-store-item strong, .pet-store-item small, .pet-store-item em { display: block; }
.pet-store-item small { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.pet-store-item em { margin-top: 4px; color: #138a63; font-style: normal; font-size: 12px; font-weight: 900; }
.pet-store-item button { min-height: 34px; padding: 6px 10px; border: 1px solid var(--primary); border-radius: 7px; color: #fff; background: var(--primary); font-weight: 900; }
.pet-store-item button:disabled { border-color: #cbd5e1; color: #94a3b8; background: #f1f5f9; cursor: not-allowed; }
.pet-timeline-new, .pet-study-list, .pet-task-list { display: grid; gap: 9px; }
.pet-timeline-row { min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.pet-timeline-row > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #eef4ff; }
.pet-timeline-row strong, .pet-timeline-row small { display: block; }
.pet-timeline-row small { margin-top: 3px; color: var(--muted); }
.pet-study-list div { min-height: 50px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.pet-study-list strong, .pet-study-list span { display: block; }
.pet-study-list span { color: var(--muted); font-size: 12px; }
.pet-study-list em { grid-row: 1 / span 2; align-self: center; color: #138a63; font-style: normal; font-weight: 900; }
.pet-task-list > div { min-height: 64px; padding: 10px 12px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.pet-task-list > div.done { background: #f0fdf4; border-color: #bbf7d0; }
.pet-task-list > div > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #138a63; background: #dcfce7; font-weight: 900; }
.pet-task-list strong, .pet-task-list small { display: block; }
.pet-task-list small { margin-top: 3px; color: var(--muted); }
.pet-task-list button { min-height: 34px; padding: 6px 11px; border: 1px solid var(--primary); border-radius: 7px; color: #fff; background: var(--primary); font-weight: 900; }
.pet-task-list button:disabled { border-color: #bbf7d0; color: #15803d; background: #dcfce7; }
.pet-logic-card { display: grid; gap: 12px; }
.pet-logic-card h3, .pet-logic-card p { margin: 0; }
.pet-logic-card p { color: #334155; font-size: 18px; font-weight: 900; }
.pet-logic-card div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pet-logic-card button { min-height: 48px; border: 1px solid #dbe4f0; border-radius: 8px; color: #172033; background: #fff; font-weight: 900; }
.pet-logic-card button:hover { border-color: var(--primary); color: var(--primary); background: #eef4ff; }
.pet-logic-card small { color: var(--muted); }
.pet-adoption-page { min-height: calc(100vh - 170px); display: grid; place-items: center; }
.pet-adoption-card { width: min(920px, 100%); padding: 24px; }
.pet-adoption-card h2 { margin: 0 0 8px; font-size: 28px; }
.pet-adoption-card > p { margin: 0 0 18px; color: var(--muted); }
.pet-adoption-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pet-adoption-grid button { min-height: 150px; padding: 14px; display: grid; align-content: center; justify-items: center; gap: 6px; border: 1px solid #dbe4f0; border-radius: 8px; background: #fff; text-align: center; }
.pet-adoption-grid button.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pet-adoption-grid span { font-size: 42px; }
.pet-adoption-grid strong, .pet-adoption-grid small { display: block; }
.pet-adoption-grid small { color: var(--muted); line-height: 1.45; }
.pet-adoption-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, auto) auto; gap: 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.pet-adoption-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.pet-adoption-colors button { min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 900; }
.pet-adoption-colors button::before { content: ""; width: 14px; height: 14px; margin-right: 6px; display: inline-block; vertical-align: middle; border-radius: 50%; background: var(--pet-color); }
.pet-adoption-colors button.active { border-color: var(--primary); color: var(--primary); background: #eef4ff; }
@keyframes petParadiseIdle { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.03); } }

@media (max-width: 1100px) {
  .pet-paradise-layout { grid-template-columns: 1fr; }
  .pet-paradise-display { position: static; }
}

@media (max-width: 760px) {
  .pet-paradise-title, .pet-display-caption { align-items: flex-start; flex-direction: column; }
  .pet-display-actions { justify-content: flex-start; }
  .pet-stats-grid, .pet-action-grid, .pet-shop-grid-new, .pet-logic-card div, .pet-adoption-grid { grid-template-columns: 1fr; }
  .pet-store-item, .pet-task-list > div { grid-template-columns: 42px minmax(0,1fr); }
  .pet-store-item button, .pet-task-list button { grid-column: 1 / -1; }
  .pet-adoption-form { grid-template-columns: 1fr; }
}

.toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 180px 160px; gap: 10px; margin-bottom: 16px; }
input, select { min-height: 42px; border: 1px solid var(--line); border-radius: 7px; padding: 0 12px; color: var(--text); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(37, 99, 235, .13); border-color: var(--primary); }
.bank-workbench { display: block; }
.bank-sidebar { display: none; }
.bank-sidebar h2 { font-size: 22px; }
.bank-language-list { display: flex; flex-direction: column; gap: 12px; }
.bank-language-list button { width: 100%; min-height: 88px; padding: 16px; display: grid; gap: 6px; border: 1px solid #d9e2f2; border-radius: 12px; text-align: left; color: var(--text); background: #fff; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; }
.bank-language-list button:hover { border-color: var(--primary); box-shadow: 0 8px 20px rgba(37, 99, 235, .09); transform: translateY(-1px); }
.bank-language-list button strong, .bank-language-list button small { display: block; }
.bank-language-list button strong { font-size: 16px; }
.bank-language-list button small { color: var(--muted); }
.bank-language-list button.active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 10px 24px rgba(37,99,235,.16); }
.bank-language-list button.active small { color: rgba(255,255,255,.82); }
.bank-sidebar-tips { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid #d9e6ff; border-radius: 12px; background: #f7fbff; }
.bank-sidebar-tips span { color: var(--muted); font-size: 13px; }
.bank-main { min-width: 0; display: grid; gap: 14px; }
.bank-header-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.bank-language-tabs { padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bank-language-tabs button { min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: #eef2f7; font-weight: 900; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.bank-language-tabs button:hover { color: var(--primary); background: #f8fbff; box-shadow: 0 6px 16px rgba(37,99,235,.08); transform: translateY(-1px); }
.bank-language-tabs button.active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 8px 18px rgba(37,99,235,.16); }
.bank-current-language { margin: 5px 0 0; color: var(--muted); font-weight: 800; }
.bank-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(76px, 1fr)); gap: 8px; }
.bank-stat { min-height: 58px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.bank-stat span, .bank-stat strong { display: block; }
.bank-stat span { color: var(--muted); font-size: 11px; }
.bank-stat strong { margin-top: 5px; font-size: 21px; }
.bank-toolbar { grid-template-columns: minmax(260px, 1fr) 170px; }
.bank-list-panel { padding: 14px; }
.bank-list-head { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; }
.bank-list-head span { color: var(--muted); font-size: 12px; font-weight: 800; }
.problem-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.problem-list { display: grid; gap: 10px; max-height: calc(100vh - 330px); overflow: auto; padding-right: 3px; }
.problem-card { width: 100%; padding: 15px; border: 1px solid var(--line); border-radius: 8px; text-align: left; color: var(--text); background: #fff; }
.problem-card:hover, .problem-card.active { border-color: var(--primary); box-shadow: 0 6px 18px rgba(37, 99, 235, .1); }
.problem-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 9px; }
.problem-card h3 { margin: 0 0 7px; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.problem-card p { margin: 0; color: var(--muted); font-size: 12px; }
.problem-card-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.problem-card-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.problem-card-foot b { color: var(--primary); white-space: nowrap; }
.tag, .language-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 5px; font-size: 11px; font-weight: 800; }
.language-badge.python { color: #0f6b50; background: #dcf8ee; }
.language-badge.scratch { color: #9a4b08; background: #ffedd5; }
.language-badge.cpp { color: #244f9e; background: #dce8ff; }
.language-badge.general { color: #5b3b8c; background: #eee6fb; }
.difficulty { color: var(--amber); font-size: 12px; }
#problem-detail.detail-panel { min-height: 520px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.detail-panel h2 { font-size: 24px; }
.detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.detail-copy { color: #465166; line-height: 1.8; }
.scenario { margin: 18px 0; padding: 14px; border-left: 3px solid #e3a52a; background: #fff8e7; color: #6f541a; }
.checkpoint-preview { display: grid; gap: 8px; margin: 12px 0 18px; }
.checkpoint-preview div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.answer-analysis { margin: 14px 0; padding: 12px 14px; border: 1px solid #d9e6ff; border-radius: 7px; background: #f7fbff; }
.answer-analysis summary { cursor: pointer; color: var(--primary); font-weight: 800; }
.fill-answer-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 12px 0 16px; }
.detail-footer { display: flex; justify-content: flex-end; }
.bank-empty-detail { min-height: 420px; display: grid; place-content: center; text-align: center; }
.bank-answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
.bank-answer-option { width: 100%; min-height: 58px; padding: 13px 14px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #fff; text-align: left; }
.bank-answer-option:hover { border-color: var(--primary); background: #f8fbff; }
.bank-answer-option.selected { border-color: var(--primary); background: #eef4ff; box-shadow: inset 3px 0 var(--primary); }
.bank-answer-option.is-correct { border-color: #23a06d; background: #ecfdf5; box-shadow: inset 4px 0 #23a06d; }
.bank-answer-option.is-wrong { border-color: #dc4c5a; background: #fff1f2; box-shadow: inset 4px 0 #dc4c5a; }
.bank-answer-option:disabled { cursor: not-allowed; opacity: .9; }
.bank-answer-option .option-code, .bank-answer-option img { grid-column: 2; }
.bank-answer-option img, .exam-option img { width: var(--question-image-width, 50%); max-width: 100%; height: auto; }
.bank-answer-option.selected .option-marker { color: #fff; border-color: var(--primary); background: var(--primary); }
.bank-answer-option.is-correct .option-marker { color: #fff; border-color: #23a06d; background: #23a06d; }
.bank-answer-option.is-wrong .option-marker { color: #fff; border-color: #dc4c5a; background: #dc4c5a; }
.bank-question-actions { margin: 12px 0; display: flex; justify-content: flex-end; }
.attempt-status { margin: 8px 0 10px; padding: 9px 12px; border: 1px solid #d8e5f8; border-radius: 7px; color: #235da0; background: #f2f7ff; font-weight: 800; }
.attempt-status.locked { border-color: #f0afb6; color: #a52d39; background: #fff3f4; }
.answer-feedback { margin: 12px 0; padding: 12px 14px; border-radius: 7px; line-height: 1.7; }
.answer-feedback.correct { border: 1px solid #93d9bf; color: #0f6b50; background: #effbf7; }
.answer-feedback.wrong { border: 1px solid #f0afb6; color: #a52d39; background: #fff3f4; }
.analysis-video,
.question-video,
.question-rich-content video,
.detail-copy video,
.exam-question-rich video,
.paper-preview-detail video,
.scratch-question-modal-body video { width: min(100%, 720px); max-height: 420px; display: block; margin: 12px 0; border-radius: 7px; background: #111827; }
.bank-question-nav { margin-top: 18px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.bank-question-nav span { color: var(--muted); font-weight: 800; }
.bank-question-container { display: grid; gap: 16px; }
.question-card, .options-card { background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(23,32,51,.06); }
.question-card { padding: 24px; }
.options-card { padding: 20px; }
.question-card h2 { margin: 8px 0 12px; font-size: 22px; font-weight: 900; line-height: 1.45; }
.question-card .detail-copy { margin-top: 16px; font-size: 18px; line-height: 1.8; }
.options-card .bank-answer-options { gap: 12px; }
.options-card .bank-answer-option { padding: 16px; align-items: start; border-color: #e5e7eb; border-radius: 10px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.options-card .bank-answer-option:hover { border-color: var(--primary); background: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.08); transform: translateY(-1px); }
.options-card .bank-answer-option.selected { border-color: var(--primary); background: #fff; box-shadow: inset 4px 0 var(--primary); }
.options-card .bank-answer-option.is-correct { border-color: #23a06d; background: #fff; box-shadow: inset 4px 0 #23a06d; }
.options-card .bank-answer-option.is-wrong { border-color: #dc4c5a; background: #fff; box-shadow: inset 4px 0 #dc4c5a; }
.bank-option-body { min-width: 0; display: grid; gap: 8px; line-height: 1.7; }
.bank-option-body > strong { display: inline-grid; width: 26px; height: 26px; place-items: center; border-radius: 999px; color: var(--primary); background: #eef4ff; }
.answer-analysis-content { margin-top: 8px; }

.exam-center-panel .table-wrap { margin-top: 16px; }
.view-exams .topbar,
.view-problems .topbar,
.view-typing .topbar { display: none; }
.exam-library-panel { display: grid; gap: 14px; }
.exam-library-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(220px, 1.2fr); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.exam-library-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
.front-exam-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.front-exam-choice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .48);
}
.front-exam-choice-modal {
  width: min(520px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .25);
}
.front-exam-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.front-exam-choice-head p {
  margin: 0 0 4px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.front-exam-choice-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
}
.front-exam-choice-body {
  padding: 22px;
  color: #475569;
  line-height: 1.75;
}
.front-exam-choice-body strong {
  display: block;
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 18px;
}
.front-exam-choice-body p { margin: 0; }
.front-exam-choice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 22px 22px;
}
.exam-center-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.exam-center-summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.exam-center-summary span { min-height: 42px; min-width: 76px; padding: 7px 10px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #f8fafc; font-size: 11px; }
.exam-center-summary b { color: var(--text); font-size: 18px; }
.my-exam-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.my-exam-card { min-height: 248px; padding: 16px; display: grid; align-content: start; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, #fff, #f8fbff); box-shadow: 0 8px 22px rgba(25,39,71,.06); }
.my-exam-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.my-exam-card-head strong { color: var(--green); font-size: 12px; }
.my-exam-card h3 { margin: 0; font-size: 18px; line-height: 1.45; }
.my-exam-card p { margin: 0; color: var(--muted); font-size: 13px; }
.my-exam-meta { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.my-exam-card .primary-button { justify-self: end; margin-top: 4px; }
.my-exam-empty { grid-column: 1 / -1; min-height: 120px; display: grid; place-content: center; border: 1px dashed var(--line); border-radius: 8px; background: #fff; }
.programming-nav { justify-content: flex-end; }

.practice-grid { --problem-pane-width: 340px; min-height: calc(100vh - 245px); display: grid; grid-template-columns: minmax(260px, var(--problem-pane-width)) 8px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px; align-items: start; }
.coding-primary-panel { display: contents; }
.coding-primary-panel > .section-head { grid-column: 1; grid-row: 1; margin: 0; padding: 18px 20px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fff; }
.coding-primary-panel > .problem-brief { grid-column: 1; grid-row: 2; min-height: 420px; align-self: stretch; overflow: auto; border-radius: 0 0 8px 8px; background: #fff; }
.practice-splitter { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; border-radius: 999px; background: linear-gradient(180deg, transparent, #c7d2e4 16%, #c7d2e4 84%, transparent); cursor: col-resize; }
.practice-splitter:hover, .practice-grid.resizing .practice-splitter { background: var(--primary); }
.coding-primary-panel > #text-code-workspace, .coding-primary-panel > #scratch-workspace { grid-column: 3; grid-row: 1 / span 2; min-width: 0; margin: 0; padding: 14px; align-self: stretch; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.coding-primary-panel > #text-code-workspace { --code-editor-height: clamp(520px, calc(100vh - 300px), 760px); --code-input-height: clamp(180px, calc(var(--code-editor-height) * .42), 300px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); grid-template-rows: auto var(--code-editor-height); gap: 0 16px; align-items: stretch; align-content: start; background: #eef2f7; }
.coding-primary-panel > #text-code-workspace > .code-file-actions { grid-column: 1 / span 2; grid-row: 1; display: none; }
.coding-primary-panel > #text-code-workspace > .idle-toolbar { grid-column: 1 / span 2; grid-row: 1; margin: 0 0 12px; }
.coding-primary-panel > #text-code-workspace > .code-editor-frame { grid-column: 1; grid-row: 2; min-height: 0; height: var(--code-editor-height); }
.coding-primary-panel > #text-code-workspace > .code-input-panel { grid-column: 2; grid-row: 2; min-height: 0; height: var(--code-input-height); align-self: start; }
.coding-primary-panel > #text-code-workspace > .python-runtime-panels,
.coding-primary-panel > #text-code-workspace > .cpp-runtime-panel { grid-column: 2; grid-row: 2; min-height: 0; height: calc(var(--code-editor-height) - var(--code-input-height) - 12px); align-self: end; margin-top: 0; }
#practice-view.code-question-mode #text-code-workspace { --code-editor-height: clamp(560px, calc(100vh - 245px), 820px); --code-input-height: clamp(190px, calc(var(--code-editor-height) * .42), 320px); }
.judge-report-panel { grid-column: 1; margin-top: 0; }
.practice-language-tabs { width: fit-content; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 5px; margin-bottom: 16px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: #e9eef5; }
.practice-language-tab { min-height: 42px; padding: 0 18px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-weight: 800; }
.practice-language-tab.active { color: #fff; background: var(--primary); box-shadow: 0 4px 12px rgba(37, 99, 235, .2); }
.creation-selectors { margin-bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.creation-selectors label { position: relative; min-width: 0; padding: 13px 14px 12px 54px; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.creation-selectors label:not(.active) { display: none; }
.creation-selectors label.active { border-color: var(--primary); box-shadow: inset 0 3px var(--primary); }
.creation-selectors label::before { position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #855cd6; font-size: 12px; font-weight: 900; }
.creation-selectors .scratch::before { content: "积木"; }.creation-selectors .python::before { content: "Py"; background: #2875ba; }.creation-selectors .cpp::before { content: "C++"; background: #17846e; }
.creation-selectors strong { font-size: 14px; }
.creation-selectors small { color: var(--muted); }
.creation-selectors select { width: 100%; }
.code-question-toolbar { margin-bottom: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(23, 32, 51, .06); }
.code-question-toolbar #code-question-status { margin-left: auto; min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.code-question-toolbar .submit-accent { background: #ff8c1a; }
.code-file-menu { position: relative; }
.code-file-menu-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 128px; padding: 6px; display: none; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 14px 34px rgba(23, 32, 51, .16); }
.code-file-menu:hover .code-file-menu-panel, .code-question-toolbar.file-menu-open .code-file-menu-panel { display: grid; gap: 4px; }
.code-file-menu-panel button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 5px; color: var(--text); background: #fff; text-align: left; font-weight: 700; }
.code-file-menu-panel button:hover { background: #eef4ff; color: var(--primary); }
#practice-view.code-question-mode > .creation-selectors { display: none; }
.problem-brief { padding: 18px 20px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; line-height: 1.65; font-size: 14px; }
.problem-brief h3 { margin: 10px 0 8px; font-size: 20px; }
.problem-brief p { color: #465166; }
.practice-kind { display: inline-flex; padding: 4px 8px; border-radius: 5px; color: #fff; background: var(--primary); font-size: 11px; font-weight: 800; }
.practice-scenario { margin: 14px 0; padding: 11px; border-left: 3px solid var(--amber); color: #6f541a; background: #fff8e7; }
.practice-requirements { margin-top: 16px; }
.practice-requirements pre { margin: 8px 0 0; padding: 12px; overflow: auto; white-space: pre-wrap; color: #dce8f5; background: #17213a; font: 12px/1.65 Consolas, monospace; }
.practice-expected { margin-top: 14px; display: grid; gap: 4px; }
.practice-expected span { color: var(--green); font-weight: 800; }
.code-file-actions { min-height: 44px; padding: 0 0 2px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.code-file-actions .ghost-button, .code-file-actions .primary-button { min-height: 36px; padding: 0 12px; font-size: 12px; }
.creation-fullscreen #text-code-workspace > .code-file-actions { display: flex; }
.creation-fullscreen #code-validate { display: none; }
.idle-toolbar { min-height: 50px; margin-top: 12px; padding: 7px 8px 7px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #26334b; border-bottom: 0; border-radius: 8px 8px 0 0; color: #dbe7f7; background: #1a2639; }
#code-language-select { width: 116px; min-height: 34px; border-color: #40506b; color: #e5edf8; background: #111827; }
.language-mode-stack { display: flex; align-items: center; gap: 8px; align-content: center; }
.language-mode-stack #python-drawing-toggle { min-height: 34px; padding: 0 11px; font-size: 12px; }
.idle-file-name { width: min(220px, 28vw); min-height: 34px; border-color: #40506b; color: #e5edf8; background: #111827; font: 700 13px Consolas, monospace; }
.idle-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.idle-toolbar .ghost-button, .idle-toolbar .primary-button { min-height: 34px; padding: 0 14px; font-size: 12px; }
#code-run { min-width: 76px; }
.code-editor-frame { min-height: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); overflow: hidden; border: 1px solid #26334b; border-radius: 0 0 8px 8px; background: #101827; }
.code-editor-frame.codemirror-ready { display: block; }
.code-editor-frame.codemirror-ready .line-numbers { display: none; }
.line-numbers { min-height: 0; height: 100%; margin: 0; padding: 18px 12px; overflow: hidden; border-right: 1px solid #2e3b50; color: #738199; background: #151f30; text-align: right; user-select: none; font: 14px/1.7 Consolas, "Courier New", monospace; }
#code-editor { width: 100%; min-height: 0; height: 100%; resize: none; margin: 0; padding: 18px; border: 0; border-radius: 0; outline: 0; color: #e5edf8; background: #101827; font: 14px/1.7 Consolas, "Courier New", monospace; tab-size: 4; }
#code-editor:focus { outline: 0; }
.code-editor-frame .CodeMirror { height: 430px; color: #e5edf8; background: #101827; font: 14px/1.7 Consolas, "Courier New", monospace; }
.code-editor-layout.readonly-view .CodeMirror,
.code-editor-layout.readonly-view #code-editor { cursor: default; }
.code-editor-layout.readonly-view .editor-toolbar::after { content: "只读查看"; align-self: center; padding: 4px 10px; border: 1px solid #93c5fd; border-radius: 999px; color: #2563eb; background: #eff6ff; font-size: 12px; font-weight: 700; }
.coding-primary-panel > #text-code-workspace > .code-editor-frame .CodeMirror { height: var(--code-editor-height); min-height: 0; }
.code-editor-frame .CodeMirror-gutters { border-right: 1px solid #2e3b50; background: #151f30; }
.code-editor-frame .CodeMirror-linenumber { color: #738199; }
.code-editor-frame .CodeMirror-selected { background: #31415c !important; }
.cm-s-material-darker .cm-keyword { color: #c792ea; font-weight: 700; }
.cm-s-material-darker .cm-builtin, .cm-s-material-darker .cm-def { color: #82aaff; }
.cm-s-material-darker .cm-string { color: #c3e88d; }
.cm-s-material-darker .cm-number { color: #f78c6c; }
.cm-s-material-darker .cm-comment { color: #7c8a9f; font-style: italic; }
.cm-s-material-darker .cm-operator { color: #89ddff; }
.editor-actions { justify-content: flex-end; }
#text-code-workspace > .editor-actions { display: none; }
.score-ring { width: 132px; aspect-ratio: 1; margin: 6px auto 22px; border: 10px solid #e6eaf0; border-radius: 50%; display: grid; place-content: center; text-align: center; }
.score-ring.pass { border-color: var(--green); }
.score-ring.fail { border-color: var(--red); }
.score-ring strong { font-size: 30px; }
.score-ring span { color: var(--muted); font-size: 12px; }
.checkpoint-list { display: grid; gap: 8px; }
.checkpoint { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.checkpoint .mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-weight: 900; }
.checkpoint.failed .mark { background: var(--red); }
.checkpoint small { color: var(--muted); }
.output-box { min-height: 90px; margin: 14px 0 0; padding: 13px; white-space: pre-wrap; border-radius: 7px; color: #c8d8ec; background: #101827; font: 12px/1.6 Consolas, monospace; }
.python-runtime-panels { display: block; margin-top: 14px; }
.runtime-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.coding-primary-panel > #text-code-workspace .runtime-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.coding-primary-panel > #text-code-workspace > .python-runtime-panels { margin-top: 0; overflow: hidden; }
.coding-primary-panel > #text-code-workspace > .python-runtime-panels .runtime-panel { height: 100%; }
#text-code-workspace:not(.python-drawing-mode) .turtle-panel { display: none !important; }
#text-code-workspace.python-drawing-mode .python-shell-panel { display: none !important; }
#python-drawing-toggle.active, #python-drawing-toggle[aria-pressed="true"] { color: #fff; border-color: #0f6b50; background: #138a63; }
.runtime-panel-head { min-height: 42px; padding: 7px 10px 7px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); background: #f8fafc; font-size: 12px; }
.runtime-panel-head span { color: var(--muted); }
#python-console { min-height: 0; max-height: none; height: 100%; margin: 0; padding: 14px; overflow: auto; white-space: pre-wrap; color: #dce8f5; background: #111827; font: 13px/1.65 Consolas, monospace; }
#code-stdin { width: 100%; min-height: 0; height: 100%; margin: 0; padding: 14px 14px 58px; resize: none; border: 0; outline: 0; color: #dce8f5; background: #202638; font: 13px/1.7 Consolas, monospace; }
#code-stdin:disabled { opacity: .72; cursor: not-allowed; }
.code-input-panel { position: relative; }
.code-input-panel .runtime-panel-head span { color: var(--muted); font-size: 12px; }
.code-input-panel .runtime-panel-head span.waiting { color: var(--primary); font-weight: 800; }
.code-send-input { position: absolute; right: 12px; bottom: 12px; min-height: 34px; padding: 0 14px; border-radius: 7px; }
.code-send-input:disabled { opacity: .55; cursor: not-allowed; }
#turtle-canvas { min-height: 0; height: 100%; position: relative; overflow: auto; background-color: #fff; background-image: linear-gradient(#eef1f5 1px, transparent 1px), linear-gradient(90deg, #eef1f5 1px, transparent 1px); background-size: 20px 20px; }
#turtle-canvas canvas { display: block; margin: 0 auto; }
.turtle-placeholder { height: 100%; display: grid; place-items: center; padding: 18px; color: var(--muted); text-align: center; font-size: 13px; }
.turtle-panel.fullscreen { position: fixed; z-index: 80; inset: 22px; display: grid; grid-template-rows: auto minmax(0, 1fr); box-shadow: 0 24px 70px rgba(15, 23, 42, .34); }
.turtle-panel.fullscreen #turtle-canvas { min-height: 0; height: 100%; }
body.turtle-fullscreen-open { overflow: hidden; }
#cpp-console { min-height: 0; max-height: none; height: 100%; margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap; color: #dce8f5; background: #101827; font: 13px/1.7 Consolas, monospace; }
.creation-fullscreen .main { width: 100%; max-width: none; padding: 0; }
.creation-fullscreen .topbar { display: none; }
.creation-fullscreen #practice-view { min-height: 100vh; }
.creation-fullscreen #practice-view > .creation-selectors,
.creation-fullscreen #practice-view .coding-primary-panel > .section-head,
.creation-fullscreen #practice-view .problem-brief,
.creation-fullscreen #practice-view .judge-report-panel { display: none; }
.creation-fullscreen #practice-view .practice-grid { min-height: 100vh; display: block; }
.creation-fullscreen #practice-view .coding-primary-panel { display: block; }
.creation-fullscreen #scratch-workspace { min-height: 100vh; padding: 0; border: 0; border-radius: 0; }
.creation-fullscreen #scratch-workspace .scratch-editor-scale-wrapper { height: 100vh; border: 0; border-radius: 0; }
.creation-fullscreen #text-code-workspace { --code-editor-height: calc(100vh - 150px); --code-input-height: clamp(190px, calc(var(--code-editor-height) * .42), 320px); min-height: 100vh; margin: 0; padding: 18px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(330px, 3fr); grid-template-rows: auto auto var(--code-editor-height); gap: 12px 16px; align-content: start; border: 0; border-radius: 0; background: #eef2f7; }
.creation-fullscreen #text-code-workspace > .code-file-actions { grid-column: 1 / span 2; grid-row: 1; }
.creation-fullscreen #text-code-workspace > .idle-toolbar { grid-column: 1 / span 2; grid-row: 2; margin: 0; }
.creation-fullscreen #text-code-workspace > .code-editor-frame { grid-column: 1; grid-row: 3; min-height: 0; }
.creation-fullscreen #text-code-workspace > .editor-actions { display: none; }
.creation-fullscreen #text-code-workspace > .code-input-panel { grid-column: 2; grid-row: 3; }
.creation-fullscreen #text-code-workspace > .python-runtime-panels,
.creation-fullscreen #text-code-workspace > .cpp-runtime-panel { grid-column: 2; grid-row: 3; min-height: 0; margin: 0; }
.creation-fullscreen #text-code-workspace .runtime-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.creation-fullscreen #python-console, .creation-fullscreen #turtle-canvas { min-height: 0; max-height: none; height: 100%; }
.creation-fullscreen .code-editor-frame, .creation-fullscreen .code-editor-frame .CodeMirror { height: var(--code-editor-height); min-height: 0; }
.scratch-workspace { margin-top: 12px; }
.scratch-workspace > .visual-editor-toolbar,
.scratch-workspace > .visual-editor-shell { display: none; }
.scratch-editor-scale-wrapper { width: 100%; height: 720px; overflow: hidden; position: relative; border: 1px solid #cdd8e8; border-radius: 6px; background: #fff; }
.scratch-editor-scale-wrapper > .scratch-official-frame { width: 100%; height: 100%; display: block; border: 0; border-radius: 0; background: #fff; transform-origin: top left; }
.scratch-official-frame { width: 100%; height: 720px; display: block; border: 1px solid #cdd8e8; border-radius: 6px; background: #fff; }
.exam-visual-editor-mount .scratch-editor-scale-wrapper { height: calc(100vh - 132px); min-height: 620px; border: 0; border-radius: 0; }
.visual-editor-toolbar { min-height: 54px; padding: 7px 9px 7px 14px; display: grid; grid-template-columns: auto minmax(150px, 260px) 1fr; align-items: center; gap: 12px; border: 1px solid #cdd8e8; border-radius: 8px 8px 0 0; color: #fff; background: #3478d4; }
.visual-editor-toolbar > strong { white-space: nowrap; }
.visual-editor-toolbar input { min-height: 36px; border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.16); }
.visual-editor-toolbar input::placeholder { color: rgba(255,255,255,.72); }
.visual-toolbar-actions { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.visual-toolbar-actions button { min-height: 34px; padding: 0 10px; }
.visual-toolbar-actions .danger-button { color: #fff; border-color: #d94b57; background: #d94b57; }
.visual-editor-shell { height: 570px; min-height: 520px; display: grid; grid-template-columns: minmax(420px, 1.45fr) minmax(280px, .55fr); overflow: hidden; border: 1px solid #cdd8e8; border-top: 0; border-radius: 0 0 8px 8px; background: #eef4fb; }
.blockly-editor { min-width: 0; height: 100%; }
.visual-editor-error { height: 100%; display: grid; place-items: center; color: var(--red); background: #fff; }
.visual-stage-panel { min-width: 0; padding: 10px; display: grid; grid-template-rows: auto auto auto auto auto; align-content: start; gap: 9px; border-left: 1px solid #cdd8e8; background: #f5f8fc; }
.visual-stage-head { display: flex; align-items: center; justify-content: space-between; }
.visual-stage-head span { color: var(--muted); font-size: 11px; }
.visual-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #bfcadd; border-radius: 6px; background-color: #fff; background-image: linear-gradient(#edf1f6 1px, transparent 1px), linear-gradient(90deg, #edf1f6 1px, transparent 1px); background-size: 20px 20px; }
.visual-stage::before, .visual-stage::after { content: ""; position: absolute; background: #d4dce7; }
.visual-stage::before { left: 50%; top: 0; bottom: 0; width: 1px; }.visual-stage::after { top: 50%; left: 0; right: 0; height: 1px; }
.visual-sprite { position: absolute; z-index: 2; left: 50%; top: 50%; width: 68px; height: 68px; transform: translate(-50%, -50%); transform-origin: center; transition: left .16s linear, top .16s linear, transform .14s linear; }
.visual-sprite svg { width: 100%; height: 100%; display: block; }
.visual-speech { position: absolute; z-index: 3; left: 54%; top: 22%; max-width: 42%; padding: 7px 10px; border: 1px solid #aeb9c8; border-radius: 12px; background: #fff; font-size: 12px; box-shadow: 0 5px 12px rgba(23,32,51,.12); }
.visual-sprite-info { padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-align: center; font-size: 11px; }
.visual-saved-select { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.visual-saved-select select { width: 100%; }
.blocklyToolboxDiv { background: #f5f7fa !important; }
.blocklyFlyoutBackground { fill: #fff !important; fill-opacity: .98 !important; }
.blocklyMainBackground { stroke: #d8e0eb !important; }
.scratch-toolbar { min-height: 50px; padding: 8px 10px 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #f8fafc; font-size: 13px; font-weight: 800; }
.scratch-toolbar .ghost-button { display: inline-flex; align-items: center; text-decoration: none; }
.scratch-toolbar .primary-button { display: inline-flex; align-items: center; text-decoration: none; }
.scratch-official-launcher { min-height: 480px; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(260px, .8fr); gap: 32px; align-items: center; padding: 42px; border: 1px solid var(--line); background: #eef3fb; }
.official-badge { width: fit-content; display: inline-flex; padding: 5px 9px; border-radius: 5px; color: #fff; background: #855cd6; font-size: 11px; font-weight: 900; }
.launcher-copy p { color: var(--muted); line-height: 1.7; }
.scratch-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.scratch-toolbar-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.question-highlight { outline: 3px solid #f3bd31; outline-offset: 3px; }
.saved-projects-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.saved-projects-list { margin-top: 10px; display: grid; gap: 8px; }
.saved-project { padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 6px; }
.saved-project strong, .saved-project span { display: block; }
.saved-project span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.saved-project > div:last-child { display: flex; gap: 6px; }
.saved-project a { display: inline-flex; align-items: center; text-decoration: none; }
.block-stack { display: grid; justify-items: start; gap: 7px; padding: 28px; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.scratch-block { min-height: 48px; padding: 13px 22px; border-radius: 7px; color: #fff; font-weight: 800; box-shadow: inset 0 -3px rgba(0, 0, 0, .14); }
.event-block { background: #e5a12d; }
.control-block { background: #e28b25; }
.motion-block { background: #4c97ff; }
.inset-block { margin-left: 28px; }
.launcher-copy { display: grid; justify-items: start; gap: 18px; }
.launcher-copy strong { font-size: 24px; }
.launcher-copy .primary-button { display: inline-flex; align-items: center; text-decoration: none; }
.scratch-submit { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #f8fafc; }
.scratch-submit #scratch-submit-name { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.exam-layout { grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr); }
.exam-controls { display: grid; gap: 13px; }
.exam-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.exam-count-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exam-bank-picker { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.exam-management-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.exam-management-tabs button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-weight: 800; }
.exam-management-tabs button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.exam-user-picker { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.exam-user-list { max-height: 280px; overflow: auto; display: grid; gap: 8px; }
.exam-user-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid #dce2ea; border-radius: 7px; background: #fff; }
.exam-user-row input { min-height: auto; }
.exam-user-row small { display: block; margin-top: 3px; color: var(--muted); }
.exam-user-row .status { font-size: 12px; color: var(--muted); }
.picker-heading { margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; }
.picker-heading span { color: var(--muted); font-size: 11px; }
#exam-question-picker { display: grid; gap: 12px; }
.exam-picker-group { padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.exam-picker-group > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.exam-picker-group > div:first-child span { color: var(--muted); font-size: 11px; }
.exam-picker-question { margin-top: 8px; padding: 9px; display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 8px; border: 1px solid #dce2ea; border-radius: 6px; background: #fff; cursor: pointer; }
.exam-picker-question input { min-height: auto; margin-top: 3px; }
.exam-picker-question strong, .exam-picker-question small { display: block; }
.exam-picker-question small { margin-top: 3px; color: var(--muted); }
.exam-preview { display: grid; gap: 10px; }
.exam-summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.exam-question { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
.exam-number { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--nav); font-weight: 800; }
.exam-start-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.exam-player { min-height: calc(100vh - 125px); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #e8f0df; box-shadow: var(--shadow); }
.exam-answer-fullscreen { overflow: hidden; background: #e8f0df; }
.exam-answer-fullscreen .site-header, .exam-answer-fullscreen .topbar { display: none; }
.exam-answer-fullscreen .main { width: 100vw; max-width: none; height: 100vh; margin: 0; padding: 0; }
.exam-answer-fullscreen .view:not(#exams-view), .exam-answer-fullscreen #exam-library-area, .exam-answer-fullscreen #my-exams-area, .exam-answer-fullscreen #exam-builder-area { display: none !important; }
.exam-answer-fullscreen #exams-view { display: block; height: 100vh; }
.exam-answer-fullscreen .exam-player { width: 100vw; height: 100vh; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
.exam-player-topbar { min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #c9d7e8; background: #eaf4ff; }
.exam-question-tabs { min-width: 0; max-height: 96px; padding: 6px; display: flex; flex-wrap: wrap; gap: 8px; overflow-y: auto; scrollbar-width: thin; }
.exam-question-tab { min-width: 76px; min-height: 40px; border: 1px solid #dcdfe6; border-radius: 8px; color: #425269; background: #fff; font-weight: 800; }
.exam-question-tab.active { color: var(--primary); background: #fff; box-shadow: inset 0 -3px var(--primary); }
.exam-question-tab.answered { color: #1d4ed8; border-color: #93c5fd; background: #dbeafe; }
.exam-question-tab.answered.active,
.exam-question-tab.answered.current { color: #1e3a8a; background: #bfdbfe; box-shadow: inset 0 0 0 2px #1d4ed8; }
.exam-question-tab.current:not(.answered) { color: #2f80ed; background: #fff; box-shadow: inset 0 0 0 2px #2f80ed; }
.exam-question-tab.answered::after { content: ""; width: 7px; height: 7px; display: inline-block; margin-left: 7px; border-radius: 50%; background: #2563eb; }
.exam-player-nav { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.exam-player-nav strong { min-width: 52px; text-align: center; }
.exam-question-stage { min-height: calc(100vh - 190px); display: grid; grid-template-columns: minmax(320px, .75fr) minmax(480px, 1.25fr); gap: 14px; padding: 14px; }
.exam-answer-fullscreen .exam-question-stage { height: calc(100vh - 64px); min-height: 0; overflow: hidden; }
.objective-exam-mode .exam-question-stage { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.objective-exam-mode .exam-question-stage.objective-ratio-3-7 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.objective-exam-mode .exam-question-stage.objective-ratio-4-6 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.objective-exam-mode .exam-question-stage.objective-ratio-5-5 { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); }
.objective-exam-mode .exam-question-stage.objective-ratio-6-4 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.objective-exam-mode .exam-question-prompt,
.objective-exam-mode .exam-answer-workspace { overflow-y: auto; }
.exam-objective-stage { --objective-layout-gap: 18px; --objective-prompt-padding: 18px; --objective-answer-padding: 18px; --objective-title-size: 21px; --objective-copy-size: 14px; --objective-option-size: 14px; --objective-option-padding-y: 8px; --objective-option-padding-x: 10px; --objective-option-gap: 10px; --objective-image-width: 52%; --objective-image-max-height: 220px; }
.exam-objective-stage.objective-scale-50 { --objective-layout-gap: 8px; --objective-prompt-padding: 12px; --objective-answer-padding: 12px; --objective-title-size: 17px; --objective-copy-size: 12px; --objective-option-size: 12px; --objective-option-padding-y: 6px; --objective-option-padding-x: 8px; --objective-option-gap: 6px; --objective-image-width: 42%; --objective-image-max-height: 160px; }
.exam-objective-stage.objective-scale-60 { --objective-layout-gap: 10px; --objective-prompt-padding: 14px; --objective-answer-padding: 14px; --objective-title-size: 18px; --objective-copy-size: 13px; --objective-option-size: 13px; --objective-option-padding-y: 7px; --objective-option-padding-x: 9px; --objective-option-gap: 8px; --objective-image-width: 46%; --objective-image-max-height: 190px; }
.exam-objective-stage.objective-scale-70 { --objective-layout-gap: 14px; --objective-prompt-padding: 16px; --objective-answer-padding: 16px; --objective-title-size: 20px; --objective-copy-size: 14px; --objective-option-size: 14px; --objective-option-padding-y: 8px; --objective-option-padding-x: 10px; --objective-option-gap: 10px; --objective-image-width: 52%; --objective-image-max-height: 220px; }
.exam-objective-stage.objective-scale-80 { --objective-layout-gap: 18px; --objective-prompt-padding: 20px; --objective-answer-padding: 20px; --objective-title-size: 23px; --objective-copy-size: 15px; --objective-option-size: 15px; --objective-option-padding-y: 9px; --objective-option-padding-x: 12px; --objective-option-gap: 12px; --objective-image-width: 58%; --objective-image-max-height: 260px; }
.exam-objective-stage.objective-scale-90 { --objective-layout-gap: 22px; --objective-prompt-padding: 24px; --objective-answer-padding: 22px; --objective-title-size: 26px; --objective-copy-size: 16px; --objective-option-size: 16px; --objective-option-padding-y: 10px; --objective-option-padding-x: 14px; --objective-option-gap: 14px; --objective-image-width: 64%; --objective-image-max-height: 300px; }
.exam-objective-stage.objective-scale-100 { --objective-layout-gap: 24px; --objective-prompt-padding: 28px; --objective-answer-padding: 24px; --objective-title-size: 29px; --objective-copy-size: 17px; --objective-option-size: 17px; --objective-option-padding-y: 12px; --objective-option-padding-x: 16px; --objective-option-gap: 16px; --objective-image-width: 70%; --objective-image-max-height: 340px; }
.exam-objective-layout { gap: var(--objective-layout-gap); }
.exam-objective-stage .exam-question-prompt { padding: var(--objective-prompt-padding); font-size: var(--objective-copy-size); }
.exam-objective-stage .exam-question-prompt h2 { font-size: var(--objective-title-size); }
.exam-objective-stage .exam-answer-workspace { padding: var(--objective-answer-padding); }
.exam-objective-stage .exam-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--objective-option-gap); }
.exam-objective-stage.exam-objective-judge .exam-options { grid-template-columns: 1fr; }
.exam-objective-stage .exam-option { min-height: calc(var(--objective-option-size) * 4); padding: var(--objective-option-padding-y) var(--objective-option-padding-x); font-size: var(--objective-option-size); }
.exam-objective-stage .exam-question-image,
.exam-objective-stage .question-stem-image,
.exam-objective-stage .exam-option img { width: var(--objective-image-width); max-height: var(--objective-image-max-height); }
.programming-exam-mode .exam-question-stage { grid-template-columns: minmax(0, 1fr); padding: 0; }
.programming-exam-mode .exam-question-prompt { display: none; }
.programming-exam-mode .exam-answer-workspace { height: calc(100vh - 64px); padding: 0; overflow: hidden; border: 0; border-radius: 0; }
.scratch-programming-mode .exam-question-stage { position: relative; grid-template-columns: minmax(0, 1fr); }
.scratch-programming-mode .exam-question-prompt { display: none; }
.scratch-programming-mode.show-scratch-prompt .exam-question-prompt { position: absolute; z-index: 8; inset: 28px auto 28px 28px; width: min(420px, calc(100% - 56px)); display: block; box-shadow: 0 16px 44px rgba(23,32,51,.28); }
.exam-question-prompt, .exam-answer-workspace { min-width: 0; overflow: auto; border: 1px solid #d7ded0; border-radius: 8px; background: #fff; }
.exam-question-prompt { padding: 28px; }
.exam-question-prompt h2 { margin: 8px 0 16px; font-size: 23px; line-height: 1.45; }
.exam-question-prompt p { color: #465166; line-height: 1.8; }
.exam-kind-label { display: inline-flex; min-height: 26px; align-items: center; padding: 0 9px; border-radius: 5px; color: #fff; background: var(--green); font-size: 12px; font-weight: 800; }
.exam-prompt-code { margin-top: 20px; padding: 16px; white-space: pre-wrap; border-left: 4px solid #e5a12d; color: #dbe7f7; background: #17213a; font: 13px/1.7 Consolas, monospace; }
.exam-answer-workspace { padding: 24px; }
.exam-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.exam-option { width: 100%; min-height: 62px; padding: 14px 16px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; border: 1px solid var(--line); border-radius: 7px; text-align: left; color: var(--text); background: #fff; }
.exam-option:hover { border-color: var(--primary); }
.exam-option.selected { border-color: var(--primary); background: #eef4ff; box-shadow: inset 3px 0 var(--primary); }
.option-marker { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #aab5c5; border-radius: 50%; color: transparent; font-size: 12px; }
.exam-option.selected .option-marker { border-color: var(--primary); color: #fff; background: var(--primary); }
.exam-answer-footer { position: sticky; bottom: -24px; margin: 24px -24px -24px; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); background: #fff; }
.exam-submit-status { color: var(--muted); font-size: 13px; }
.exam-submit-status.success { color: var(--green); font-weight: 800; }
.exam-objective-stage .exam-answer-footer { position: static; margin: var(--objective-answer-padding) calc(var(--objective-answer-padding) * -1) calc(var(--objective-answer-padding) * -1); padding: 12px var(--objective-answer-padding); }
.exam-programming-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.exam-programming-toolbar .primary-button { display: inline-flex; align-items: center; text-decoration: none; }
.exam-programming-editor { width: 100%; min-height: 420px; resize: vertical; padding: 18px; border: 1px solid #26334b; border-radius: 7px; color: #e5edf8; background: #101827; font: 14px/1.7 Consolas, monospace; }
.exam-code-programming-shell { position: relative; height: 100%; display: grid; grid-template-rows: 56px minmax(0, 1fr) auto; background: #101827; }
.exam-code-programming-shell .exam-programming-toolbar { margin: 0; padding: 8px 12px; color: #e5edf8; background: #293248; }
.exam-code-programming-shell .exam-programming-editor { height: 100%; min-height: 0; resize: none; border: 0; border-radius: 0; }
.exam-code-programming-shell .exam-answer-footer { position: static; margin: 0; border-color: #2f3b56; background: #182238; }
.scratch-exam-menu { min-height: 44px; margin: -24px -24px 0; padding: 0 14px; display: flex; align-items: center; gap: 24px; color: #fff; background: #74a738; }
.scratch-exam-menu span { margin-left: auto; font-weight: 800; }
.scratch-exam-menu a { padding: 7px 10px; border-radius: 5px; color: #fff; background: #4d7d22; text-decoration: none; font-size: 12px; font-weight: 800; }
.scratch-editor-shell { min-height: 560px; margin: 0 -24px; display: grid; grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr); background: #f7f1e3; }
.scratch-stage-panel { min-width: 0; padding: 10px; border-right: 1px solid #d6d0c2; }
.scratch-stage-canvas { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px solid #cfd5dc; border-radius: 7px; background: #fff; }
.scratch-cat { font-size: 74px; transform: scaleX(-1); }
.scratch-stage-actions { padding: 9px 0; display: flex; gap: 8px; }
.scratch-stage-actions button, .scratch-workspace-head button { min-height: 34px; padding: 0 11px; border: 1px solid #cad2dc; border-radius: 5px; color: #4a5568; background: #fff; font-weight: 800; }
.scratch-stage-actions .scratch-run { color: #448c36; border-color: #87bd71; }
.scratch-sprite-info { padding: 10px; display: grid; grid-template-columns: 1fr repeat(4, auto); gap: 9px; border: 1px solid #d7d2c7; border-radius: 6px; background: #fff; font-size: 11px; }
.scratch-sprite-list { margin-top: 9px; display: flex; gap: 8px; }
.scratch-sprite-list button { min-width: 78px; min-height: 72px; border: 1px solid #d3d9e1; border-radius: 6px; background: #fff; }
.scratch-sprite-list button.active { border: 3px solid #78aa3d; }
.sprite-thumb { display: block; font-size: 28px; }
.scratch-code-panel { min-width: 0; background: #fff; }
.scratch-mode-tabs { min-height: 48px; display: flex; align-items: end; border-bottom: 1px solid #d8ddd3; background: #f7f1e3; }
.scratch-mode-tabs button { min-width: 96px; min-height: 43px; border: 0; border-radius: 7px 7px 0 0; color: #fff; background: #9cc74c; font-weight: 800; }
.scratch-mode-tabs button.active { background: #70a438; }
.scratch-code-body { min-height: 512px; display: grid; grid-template-columns: 76px 180px minmax(260px, 1fr); }
.scratch-category-list { padding: 8px 0; display: grid; align-content: start; border-right: 1px solid #d9dee5; background: #f7f8fa; }
.scratch-category-list button { min-height: 52px; border: 0; color: #5e6878; background: transparent; font-size: 11px; }
.scratch-category-list button.active { background: #e8edf3; font-weight: 800; }
.scratch-category-list i { width: 22px; height: 22px; margin: 0 auto 3px; display: block; border-radius: 50%; background: #4c97ff; }
.scratch-category-list button:nth-child(2) i { background: #9966ff; }.scratch-category-list button:nth-child(3) i { background: #cf63cf; }.scratch-category-list button:nth-child(4) i { background: #ffbf00; }.scratch-category-list button:nth-child(5) i { background: #ffab19; }.scratch-category-list button:nth-child(6) i { background: #5cb1d6; }.scratch-category-list button:nth-child(7) i { background: #59c059; }.scratch-category-list button:nth-child(8) i { background: #ff8c1a; }
.scratch-palette { padding: 14px 9px; display: grid; align-content: start; justify-items: start; gap: 10px; overflow-y: auto; border-right: 1px solid #d9dee5; }
.scratch-palette-block, .scratch-script-block { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 5px 8px 8px 5px; color: #fff; background: #4c97ff; text-align: left; font-size: 12px; font-weight: 800; box-shadow: inset 0 -2px rgba(0,0,0,.14); }
.scratch-palette-block.looks, .scratch-script-block.looks { background: #9966ff; }.scratch-palette-block.sound, .scratch-script-block.sound { background: #cf63cf; }.scratch-palette-block.events, .scratch-script-block.events { background: #d89d00; }.scratch-palette-block.control, .scratch-script-block.control { background: #ffab19; }.scratch-palette-block.sensing, .scratch-script-block.sensing { background: #5cb1d6; }.scratch-palette-block.operators, .scratch-script-block.operators { background: #59c059; }.scratch-palette-block.variables, .scratch-script-block.variables { background: #ff8c1a; }
.scratch-workspace { position: relative; min-width: 0; background-color: #fbfcfd; background-image: radial-gradient(#dce2e8 1px, transparent 1px); background-size: 18px 18px; }
.scratch-workspace-head { min-height: 42px; padding: 5px 8px 5px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dde2e8; background: rgba(255,255,255,.92); }
.scratch-script-dropzone { min-height: 430px; padding: 28px; display: grid; align-content: start; justify-items: start; gap: 2px; }
.scratch-script-dropzone p { color: #8a94a3; font-size: 13px; }
.scratch-script-block { cursor: pointer; }
.scratch-question-peek { position: absolute; right: 16px; bottom: 16px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 6px; color: #614b00; background: #ffc93d; font-weight: 800; }
.exam-result-box { margin-top: 14px; padding: 14px; border: 1px solid #9ddcc4; border-radius: 7px; color: #0f6b50; background: #effbf7; line-height: 1.7; }
.exam-visual-editor-mount { min-width: 760px; }
.exam-visual-editor-mount .visual-editor-shell { height: 620px; }
.scratch-official-exam { min-height: 500px; margin: -24px -24px 0; padding: 44px; display: grid; grid-template-columns: minmax(240px, .75fr) minmax(320px, 1.25fr); align-items: center; gap: 42px; border-bottom: 1px solid var(--line); background: #f4f0fb; }
.scratch-official-mark { aspect-ratio: 4 / 3; display: grid; place-content: center; gap: 8px; border: 1px solid #d8ccec; border-radius: 8px; color: #fff; background: #855cd6; text-align: center; box-shadow: 0 16px 32px rgba(80,53,135,.18); }
.scratch-official-mark span { font-size: 32px; font-weight: 900; }
.scratch-official-mark strong { font-size: 18px; }
.scratch-official-copy h3 { margin: 12px 0 10px; font-size: 25px; }
.scratch-official-copy p, .scratch-official-copy ol { color: #586174; line-height: 1.8; }
.scratch-official-copy ol { padding-left: 22px; }
.scratch-official-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.scratch-official-actions a { display: inline-flex; align-items: center; text-decoration: none; }

.typing-layout { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); }
.typing-center { display: grid; gap: 22px; }
.typing-center-hero { min-height: 260px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: 22px; align-items: center; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, #fff7dd, #e7f5ff 58%, #f4efff); box-shadow: var(--shadow); }
.typing-center-hero h2 { margin: 8px 0 10px; font-size: clamp(30px, 4vw, 48px); color: #20304a; }
.typing-center-hero p { max-width: 640px; color: #526173; font-size: 17px; line-height: 1.8; }
.typing-hero-art { min-height: 220px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.62); }
.typing-hero-art img { width: 100%; height: 100%; max-height: 260px; object-fit: contain; }
.typing-hero-placeholder { width: min(100%, 320px); aspect-ratio: 4 / 3; display: grid; place-items: center; align-content: center; gap: 8px; border: 2px dashed #9dccff; border-radius: 8px; color: #245f9f; background: linear-gradient(135deg, #dff3ff, #fff); }
.typing-hero-placeholder span { font-size: 52px; }
.typing-hero-placeholder strong { font-size: 24px; }
.typing-hero-placeholder small { color: var(--muted); }
.typing-entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.typing-entry-card { min-height: 245px; display: grid; align-content: start; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.typing-entry-card.finger { border-top: 5px solid #42a5f5; }
.typing-entry-card.pinyin { border-top: 5px solid #ff9f1c; }
.typing-entry-card.code { border-top: 5px solid #36b37e; }
.typing-entry-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); font-size: 22px; font-weight: 900; }
.typing-entry-card.pinyin .typing-entry-icon { background: #ff9f1c; }
.typing-entry-card.code .typing-entry-icon { background: #36b37e; }
.typing-entry-card h3 { margin: 4px 0 0; font-size: 22px; }
.typing-entry-card p { min-height: 58px; color: var(--muted); line-height: 1.7; }
.typing-entry-card .primary-button { width: fit-content; text-decoration: none; }
.pinyin-practice { display: grid; gap: 18px; }
.pinyin-practice.hidden { display: none; }
.pinyin-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .55fr); gap: 18px; align-items: start; }
.pinyin-main-card { display: grid; gap: 18px; }
.pinyin-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pinyin-stats div { padding: 12px; text-align: center; background: #fbfcff; }
.pinyin-stats div + div { border-left: 1px solid var(--line); }
.pinyin-stats span, .pinyin-stats strong { display: block; }
.pinyin-stats span { color: var(--muted); font-size: 12px; }
.pinyin-stats strong { margin-top: 4px; font-size: 22px; }
.pinyin-target { min-height: 150px; display: grid; place-items: center; padding: 24px; border-radius: 8px; border: 1px solid #cfe4ff; color: #143765; background: #f0f7ff; font: 42px/1.5 Consolas, monospace; text-align: center; }
#pinyin-input { width: 100%; font-size: 20px; text-align: center; }
.pinyin-feedback { min-height: 34px; padding: 8px 12px; border-radius: 7px; color: var(--muted); background: #f8fafc; }
.pinyin-feedback.success { color: #0f6b50; background: #eafaf3; }
.pinyin-feedback.error { color: #a43030; background: #fff0f0; }
.pinyin-type-list { display: grid; gap: 10px; }
.pinyin-type-list button { min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 7px; text-align: left; background: #fff; color: var(--text); font-weight: 800; }
.pinyin-type-list button.active { border-color: var(--primary); color: var(--primary); background: #eef4ff; box-shadow: inset 4px 0 var(--primary); }
.typing-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; border: 1px solid var(--line); border-radius: 8px; }
.typing-stats div { padding: 13px; text-align: center; }
.typing-stats div + div { border-left: 1px solid var(--line); }
.typing-stats span, .typing-stats strong { display: block; }
.typing-stats span { color: var(--muted); font-size: 12px; }
.typing-stats strong { margin-top: 4px; font-size: 19px; }
.typing-target { min-height: 170px; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; font: 24px/1.8 Consolas, monospace; word-break: break-all; }
.typing-target .typed { color: var(--green); }
.typing-target .wrong { color: #fff; background: var(--red); }
.typing-target .current { border-bottom: 3px solid var(--primary); background: #dce8ff; }
#typing-input { width: 100%; margin: 14px 0; }
.typing-actions { justify-content: space-between; }

.admin-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.admin-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.admin-layout-full { width: 100%; }
.site-settings-panel { display: grid; gap: 14px; }
.site-settings-panel.hidden { display: none; }
.site-settings-help { padding: 12px 14px; border: 1px solid #bfdbfe; border-radius: var(--card-radius, 8px); color: #1e3a8a; background: #eff6ff; }
.site-settings-help strong { display: block; margin-bottom: 4px; }
.site-settings-help p { margin: 0; color: #334155; line-height: 1.7; }
.site-settings-json { min-height: 220px; font-family: Consolas, "Courier New", monospace; white-space: pre; }
.site-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.site-feature-grid label { min-height: 42px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--card-radius, 8px); background: #fff; font-weight: 800; }
.site-upload-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.site-image-preview { min-height: 96px; padding: 12px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px dashed #bfdbfe; border-radius: var(--card-radius, 8px); background: #f8fbff; }
.site-image-preview.banner { min-height: 140px; }
.site-image-preview span { color: var(--muted); font-weight: 800; }
.site-image-preview img { max-width: 100%; max-height: 180px; object-fit: contain; border-radius: 8px; background: #fff; }
.admin-content-area { min-width: 0; display: grid; gap: 18px; }
.main:has(#admin-view.active) {
  width: 100%;
  max-width: none;
  padding: 24px 32px 48px;
}
.admin-modules { display: grid; gap: 18px; }
.admin-form { display: grid; gap: 14px; }
.admin-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-form textarea { width: 100%; min-height: 92px; resize: vertical; border: 1px solid var(--line); border-radius: 7px; padding: 11px 12px; color: var(--text); background: #fff; line-height: 1.6; }
.admin-form .code-input { min-height: 150px; color: #e5edf8; background: #101827; font: 13px/1.65 Consolas, monospace; }
.question-editor-flow { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.flow-step { min-width: 0; padding: 12px; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; row-gap: 2px; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.flow-step span { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #94a3b8; font-weight: 900; }
.flow-step.active span { background: var(--primary); }
.flow-step strong { min-width: 0; color: var(--text); }
.flow-step small { min-width: 0; color: var(--muted); }
.question-meta-card { padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.rich-editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rich-editor-head span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.rich-editor-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.question-editor-toolbar {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}
.question-editor-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.question-editor-toolbar button,
.question-editor-toolbar select,
.question-editor-toolbar input[type="color"] {
  min-height: 32px;
  border: 1px solid #cbd7e8;
  border-radius: 6px;
  color: #1f2937;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}
.question-editor-toolbar button {
  padding: 0 10px;
  cursor: pointer;
}
.question-editor-toolbar select {
  width: auto;
  min-width: 78px;
  padding: 0 8px;
}
.question-editor-toolbar input[type="color"] {
  width: 38px;
  padding: 3px;
  cursor: pointer;
}
.question-editor-toolbar button:hover,
.question-editor-toolbar select:hover {
  border-color: var(--primary);
  background: #eff6ff;
}
.question-import-tip { margin: 0 0 8px; padding: 9px 11px; border: 1px dashed #f2c879; border-radius: 7px; color: #8a5a00; background: #fff8e6; font-size: 12px; line-height: 1.6; }
.question-import-tip.success { border-color: #a8d8bf; color: #126c3c; background: #eefbf3; }
.question-import-tip.error { border-color: #f1b5b5; color: #9c2222; background: #fff1f1; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.question-editor-form {
  gap: 0;
}
.question-editor-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.question-form-section {
  min-width: 0;
  padding: 16px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.question-form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.question-form-section-head span {
  min-height: 26px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  color: var(--primary);
  background: #eef4ff;
  font-size: 12px;
  font-weight: 900;
}
.question-form-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}
.question-editor-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.question-editor-side-card {
  border-radius: 10px;
  background: #fff;
}
.question-editor-side .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.question-editor-side .form-grid .wide {
  grid-column: 1 / -1;
}
.question-editor-side .form-grid label,
.question-side-tags {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.question-side-tags {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.question-side-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 220px));
  justify-content: end;
  gap: 10px;
}
.question-side-actions .submit-wide {
  width: 100%;
  grid-column: auto;
}
.question-editor-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}
.question-form-actions {
  position: sticky;
  z-index: 25;
  bottom: 0;
  margin-top: 18px;
  padding: 14px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border: 1px solid #dbe4ef;
  border-radius: 10px 10px 0 0;
  background: rgba(255,255,255,.96);
  box-shadow: 0 -10px 28px rgba(15, 23, 42, .1);
  backdrop-filter: blur(8px);
}
.question-form-actions button {
  min-width: 112px;
}
.programming-section-note small {
  color: var(--muted);
  line-height: 1.6;
}
.scratch-score-section {
  border-color: #bfdbfe;
  background: #f8fbff;
}
.conditional-fields { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.option-image-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.option-image-fields > strong { grid-column: 1 / -1; }
.option-image-fields label { padding: 9px; border: 1px dashed #b8c3d3; border-radius: 6px; background: #fff; }
.option-image-fields input { min-height: auto; padding: 6px 0; border: 0; }
.structured-options { width: 100%; display: grid; gap: 14px; }
#admin-option-rows { width: 100%; display: grid; gap: 22px; }
.admin-option-row { width: 100%; min-width: 0; padding: 16px; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .04); }
.admin-option-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.admin-option-card-head strong { min-width: 0; color: #1f2937; font-size: 15px; }
.admin-option-letter { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: var(--primary); font-weight: 900; }
.admin-option-row label { width: 100%; min-width: 0; display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.admin-option-editor-label { width: 100%; }
.admin-option-row textarea { width: 100%; min-height: 260px; }
.admin-option-row .tox-tinymce { width: 100% !important; min-height: 300px; }
.admin-option-row .tox .tox-toolbar,
.admin-option-row .tox .tox-toolbar__primary,
.admin-option-row .tox .tox-toolbar__overflow { flex-wrap: wrap; }
.admin-option-row .option-code-field textarea { min-height: 130px; }
.admin-option-row input[type="file"] { width: 100%; min-height: auto; padding: 7px; }
.smart-parse-panel { padding: 12px; display: grid; gap: 10px; border: 1px solid #dbe5f2; border-radius: 7px; background: #f8fbff; }
.smart-parse-panel textarea { min-height: 120px; }
.rich-question-editor, .rich-option-editor { width: 100%; min-height: 120px; padding: 11px 12px; overflow: auto; white-space: pre-wrap; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #fff; line-height: 1.6; outline: none; }
#admin-description.rich-question-editor {
  min-height: 260px;
  padding: 18px 20px;
  border-color: #d4ddea;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.rich-question-editor:focus, .rich-option-editor:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.rich-question-editor:empty::before, .rich-option-editor:empty::before { content: attr(data-placeholder); color: #9aa4b2; }
.rich-question-editor img, .rich-option-editor img { width: var(--question-image-width, 50%); height: var(--question-image-height, auto); max-width: 100%; max-height: 360px; display: block; margin: 10px auto; border: 1px solid var(--line); border-radius: 6px; object-fit: contain; background: #fff; cursor: pointer; }
.rich-question-editor .question-image.align-left img, .rich-option-editor .question-image.align-left img { margin-left: 0; margin-right: auto; }
.rich-question-editor .question-image.align-right img, .rich-option-editor .question-image.align-right img { margin-left: auto; margin-right: 0; }
.rich-question-editor img.admin-selected-image, .rich-option-editor img.admin-selected-image { outline: 3px solid rgba(37,99,235,.4); box-shadow: 0 0 0 6px rgba(37,99,235,.12); }
.rich-question-editor .question-image.admin-selected-image-holder, .rich-option-editor .question-image.admin-selected-image-holder { position: relative; outline: 1px dashed var(--primary); outline-offset: 5px; }
.rich-question-editor .question-image.admin-selected-image-holder::after, .rich-option-editor .question-image.admin-selected-image-holder::after { content: ""; position: absolute; right: calc(50% - 8px); bottom: -8px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 4px; background: var(--primary); box-shadow: 0 2px 8px rgba(37,99,235,.35); cursor: se-resize; }
.rich-option-editor { min-height: 260px; }
.admin-image-layout-panel { position: fixed; z-index: 10020; width: 280px; padding: 14px; display: grid; gap: 10px; border: 1px solid #cdd9ef; border-radius: 12px; background: #fff; box-shadow: 0 18px 50px rgba(23,32,51,.22); }
.admin-image-layout-panel.hidden { display: none; }
.admin-image-layout-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-image-layout-head button { width: 36px; height: 36px; border: 1.5px solid #3B82F6; border-radius: 8px; color: #2563EB; background: #fff; cursor: pointer; font-size: 24px; line-height: 1; transition: background .16s ease, border-color .16s ease, transform .12s ease; }
.admin-image-layout-head button:hover { border-color: #2563EB; background: #EFF6FF; }
.admin-image-layout-head button:active { transform: scale(.95); }
.admin-image-layout-panel label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
.admin-image-layout-panel input, .admin-image-layout-panel select { min-height: 34px; font-size: 13px; }
.admin-image-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-image-ratio { grid-template-columns: auto 1fr !important; align-items: center; justify-content: start; }
.admin-image-ratio input { min-height: auto; width: 16px; height: 16px; }
.admin-image-align-control { display: grid; grid-template-columns: auto repeat(3, 1fr); align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.admin-image-align-control button { min-height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.admin-image-align-control button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.admin-image-layout-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.replace-image-button { min-height: 32px; display: inline-grid !important; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text) !important; background: #fff; cursor: pointer; }
.answer-picker-card { padding: 12px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.answer-picker-card small { color: var(--muted); }
.answer-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.answer-choice { min-height: 42px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #fff; font-weight: 800; }
.answer-choice:hover { border-color: var(--green); }
.answer-choice.selected { border-color: var(--green); color: #fff; background: var(--green); }
.smart-parse-panel small { color: var(--muted); }
.smart-parse-panel small.parse-ok { color: var(--green); font-weight: 800; }
.smart-parse-panel small.parse-error { color: var(--red); font-weight: 800; }
.question-stem-image, .exam-question-image, .detail-copy img, .answer-feedback img, .bank-answer-option img, .exam-option img, .practice-scenario img {
  display: block;
  width: auto;
  max-width: min(50%, 560px);
  height: auto;
  max-height: 360px;
  margin: 16px auto;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.question-rich-content {
  display: contents;
}
.question-rich-content img,
.detail-copy .question-image img,
.exam-question-rich .question-image img,
.paper-preview-detail .question-image img,
.scratch-question-modal-body .question-image img {
  width: var(--question-image-width, 50%);
  max-width: 100%;
  height: var(--question-image-height, auto);
  max-height: none;
}
.question-rich-content img {
  display: inline-block;
  vertical-align: top;
  margin: 10px 8px 10px 0;
  object-fit: contain;
}
.question-rich-content .question-image img,
.question-rich-content .question-image-row img,
.question-rich-content .question-image-layout img {
  display: block;
  margin: 0 auto;
}
.bank-answer-option img, .exam-option img { width: var(--question-image-width, 50%); max-width: 100%; }
.exam-objective-stage .exam-question-image,
.exam-objective-stage .question-stem-image,
.exam-objective-stage .exam-option img {
  width: var(--objective-image-width);
  max-width: 100%;
}
.exam-objective-stage .question-rich-content .question-image img,
.exam-objective-stage .question-rich-content .question-stem-image,
.exam-objective-stage .exam-question-rich .question-image img,
.exam-objective-stage .exam-option .question-rich-content img {
  width: var(--question-image-width, 50%);
  max-width: 100%;
  height: auto;
  max-height: none;
}
.exam-objective-stage .question-rich-content .question-image-row img,
.exam-objective-stage .question-rich-content .question-image-layout .question-image img,
.exam-objective-stage .exam-question-rich .question-image-row img,
.exam-objective-stage .exam-question-rich .question-image-layout .question-image img {
  width: var(--question-image-width, 100%);
  max-width: 100%;
  height: auto;
  max-height: none;
}
.question-image {
  display: block;
  width: 100%;
  margin: 20px 0;
  text-align: center;
  clear: both;
}
.question-image.align-left { text-align: left; }
.question-image.align-center { text-align: center; }
.question-image.align-right { text-align: right; }
.question-image img {
  display: block;
  width: var(--question-image-width, 50%);
  height: var(--question-image-height, auto);
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  cursor: zoom-in;
}
.question-image.align-left img { margin-left: 0; margin-right: auto; }
.question-image.align-right img { margin-left: auto; margin-right: 0; }
.question-image[data-width="25%"] img,
.question-img[data-width="25%"],
.question-rich-content img[data-width="25%"] { --question-image-width: 25%; width: 25%; }
.question-image[data-width="50%"] img,
.question-img[data-width="50%"],
.question-rich-content img[data-width="50%"] { --question-image-width: 50%; width: 50%; }
.question-image[data-width="75%"] img,
.question-img[data-width="75%"],
.question-rich-content img[data-width="75%"] { --question-image-width: 75%; width: 75%; }
.question-image[data-width="100%"] img,
.question-img[data-width="100%"],
.question-rich-content img[data-width="100%"] { --question-image-width: 100%; width: 100%; }
.question-image-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 12px 0;
  width: 100%;
  clear: both;
}
.question-image-row .question-image-item {
  flex: 1 1 0;
  max-width: 48%;
  margin: 0;
}
.question-image-row img,
.question-image-row .question-stem-image,
.detail-copy .question-image-row img,
.exam-question-prompt .question-image-row img,
.scratch-question-modal-body .question-image-row img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
}
.question-image-layout { display: grid; gap: 16px; margin: 18px 0; align-items: start; }
.question-image-layout .question-image { margin: 0; }
.question-image-layout .question-image img { width: var(--question-image-width, 100%); }
.question-image-layout.layout-horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.question-image-layout.layout-large-left { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.question-image-layout.layout-custom { display: flex; flex-wrap: wrap; align-items: flex-start; }
.question-image-layout.layout-custom .question-image { flex: 1 1 240px; }
.question-image-row .question-image-item.align-left img,
.question-image-layout .question-image.align-left img { margin-left: 0; margin-right: auto; }
.question-image-row .question-image-item.align-center img,
.question-image-layout .question-image.align-center img { margin-left: auto; margin-right: auto; }
.question-image-row .question-image-item.align-right img,
.question-image-layout .question-image.align-right img { margin-left: auto; margin-right: 0; }
.question-image-row .question-image-item[data-width="25%"] img,
.question-image-row .question-image-item img[data-width="25%"],
.question-image-layout .question-image[data-width="25%"] img,
.question-image-layout .question-image img[data-width="25%"] { --question-image-width: 25%; width: 25%; }
.question-image-row .question-image-item[data-width="50%"] img,
.question-image-row .question-image-item img[data-width="50%"],
.question-image-layout .question-image[data-width="50%"] img,
.question-image-layout .question-image img[data-width="50%"] { --question-image-width: 50%; width: 50%; }
.question-image-row .question-image-item[data-width="75%"] img,
.question-image-row .question-image-item img[data-width="75%"],
.question-image-layout .question-image[data-width="75%"] img,
.question-image-layout .question-image img[data-width="75%"] { --question-image-width: 75%; width: 75%; }
.question-image-row .question-image-item[data-width="100%"] img,
.question-image-row .question-image-item img[data-width="100%"],
.question-image-layout .question-image[data-width="100%"] img,
.question-image-layout .question-image img[data-width="100%"] { --question-image-width: 100%; width: 100%; }
.exam-question-prompt .exam-question-image,
.exam-question-prompt .question-stem-image,
.scratch-question-modal-body .exam-question-image,
.scratch-question-modal-body .question-stem-image,
.answer-analysis img {
  display: block;
  width: auto;
  max-width: min(50%, 560px);
  height: auto;
  max-height: none;
  margin: 20px auto;
  object-fit: contain;
}
.question-card .question-image img,
.options-card .question-image img,
.answer-feedback .question-image img {
  width: var(--question-image-width, 50%);
  max-width: 100%;
}
.previewable-question-image { cursor: zoom-in; }
.image-preview-modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(10, 18, 32, .72);
}
.image-preview-modal.hidden { display: none; }
.image-preview-close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
}
.image-preview-modal img {
  display: block;
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  cursor: zoom-out;
}
.problem-option-preview { display: grid; gap: 8px; }
.option-code { width: 100%; margin: 7px 0 0; padding: 10px 12px; overflow: auto; white-space: pre-wrap; border-radius: 6px; color: #dce8f5; background: #101827; font: 12px/1.6 Consolas, monospace; }
.option-question-image {
  display: block;
  width: auto;
  max-width: min(50%, 380px);
  height: auto;
  max-height: 260px;
  margin: 16px auto;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}
.exam-option-content { min-width: 0; display: grid; gap: 9px; }
.exam-option-content .option-question-image { width: auto; max-width: min(50%, 380px); max-height: 260px; }
.hidden { display: none !important; }
.submit-wide { width: 100%; }
.file-field { padding: 12px; border: 1px dashed #b8c3d3; border-radius: 7px; background: #fff; }
.file-field input { min-height: auto; padding: 8px 0; border: 0; }
.file-field span { color: var(--primary); font-weight: 700; }
.import-panel { position: sticky; top: 20px; }
.import-actions { display: grid; gap: 10px; margin: 18px 0; }
.upload-button { min-height: 42px; border: 1px solid var(--primary); border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--primary); font-weight: 700; cursor: pointer; }
.upload-button input { display: none; }
.import-status { padding: 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #f8fafc; font-size: 13px; line-height: 1.6; }
.import-status.success { border-color: #93d9bf; color: #0f6b50; background: #effbf7; }
.import-status.error { border-color: #f0afb6; color: #a52d39; background: #fff3f4; }
.format-guide { margin-top: 16px; padding: 14px; border-left: 3px solid var(--primary); background: #eef4ff; }
.format-guide p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; word-break: break-word; }
.question-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.question-admin-tabs, .admin-bank-tabs { margin-bottom: 14px; padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.question-admin-tabs button, .admin-bank-tabs button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-weight: 800; }
.question-admin-tabs button.active, .admin-bank-tabs button.active { color: #fff; background: var(--primary); }
.paste-question-image-button { width: max-content; margin-top: 8px; }
.paper-import-panel { margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.paper-import-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.paper-import-grid textarea { min-height: 180px; }
.paper-import-side { display: grid; gap: 10px; }
.independent-paper-form { border: 1px solid #bfdbfe; background: linear-gradient(180deg, #eff6ff 0%, #ffffff 180px); }
.independent-paper-parser { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.86); }
.independent-paper-parser textarea { min-height: 220px; font-family: inherit; line-height: 1.7; }
.independent-paper-form .sticky-actions { position: sticky; bottom: 0; z-index: 3; justify-content: flex-end; padding: 12px; border-top: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(8px); }
.paper-bulk-tools { margin: 14px 0; display: grid; grid-template-columns: 1.2fr 160px 130px auto; gap: 10px; align-items: end; }
.paper-import-preview { display: grid; gap: 12px; }
.paper-preview-card { padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.paper-preview-card.needs-review { border-color: #f1c85b; background: #fffbeb; }
.paper-preview-head, .paper-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.paper-preview-head span { color: var(--muted); font-size: 12px; font-weight: 800; }
.paper-warning { padding: 8px 10px; border-radius: 6px; color: #8a5a00; background: #fff2be; font-size: 13px; }
.paper-preview-card textarea { min-height: 86px; }
.admin-table-panel { margin-top: 18px; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.admin-table th { color: var(--muted); background: #f8fafc; font-size: 12px; }
.admin-table td strong { display: block; }
.admin-table td small { color: var(--muted); }
.danger-button { min-height: 32px; padding: 0 10px; border: 1px solid #efb2b8; border-radius: 6px; color: var(--red); background: #fff5f6; font-weight: 700; }
.readonly-row { color: #7b8494; }
.account-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.account-admin-grid h3 { margin: 0 0 10px; font-size: 16px; }
.account-subhead { margin-top: 22px; }
.account-role-select { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.account-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.validity-editor { display: flex; align-items: center; gap: 6px; }
.validity-editor input { min-height: 32px; padding: 0 8px; }
.import-row-ok { color: var(--green); font-weight: 800; }
.import-row-error { color: var(--red); font-weight: 800; }
.import-inline-actions { margin: 10px 0; justify-content: flex-start; }
.account-modal {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  background: rgba(15, 23, 42, .48);
}
.account-modal-card {
  width: min(680px, 100%);
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}
.account-edit-modal-card {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 16px;
}
.account-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.account-edit-modal-card .account-modal-head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.account-modal-head h3 { margin: 0; }
.account-modal-head button { width: 36px; height: 36px; border: 1.5px solid #3B82F6; border-radius: 8px; color: #2563EB; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: none; transition: background .16s ease, border-color .16s ease, transform .12s ease; }
.account-modal-head button:hover { border-color: #2563EB; background: #EFF6FF; }
.account-modal-head button:active { transform: scale(.95); }
.account-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 20px 24px;
}
.account-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.account-edit-modal-card .account-modal-actions {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}
.account-edit-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rbac-permission-panel { margin-top: 18px; padding: 14px; border: 1px solid #bfdbfe; border-radius: 8px; background: #f8fbff; }
.rbac-permission-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rbac-permission-list { display: grid; gap: 12px; }
.rbac-permission-group { display: grid; gap: 8px; }
.rbac-permission-group strong { color: #1e3a8a; }
.rbac-permission-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rbac-permission-items label { min-height: 40px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #334155; font-weight: 800; }
@media (max-height: 760px) {
  .account-modal { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  .account-edit-modal-card { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .account-edit-modal-card .account-modal-head { padding-top: 16px; padding-bottom: 16px; }
  .account-modal-body { padding-top: 16px; padding-bottom: 16px; }
  .account-edit-modal-card .account-modal-actions { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 768px) {
  .account-edit-form-grid { grid-template-columns: 1fr; }
  .rbac-permission-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .account-modal { padding: 8px; }
  .account-edit-modal-card { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .account-edit-modal-card .account-modal-head, .account-modal-body, .account-edit-modal-card .account-modal-actions { padding-left: 16px; padding-right: 16px; }
  .account-edit-modal-card .account-modal-actions { flex-wrap: wrap; }
  .rbac-permission-head { align-items: flex-start; flex-direction: column; }
  .rbac-permission-items { grid-template-columns: 1fr; }
}
.login-content-panel { margin-bottom: 18px; }
.login-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.login-content-preview { padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.login-content-preview > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.login-content-preview strong { display: block; margin: 14px 0 6px; font-size: 20px; }
.login-content-preview p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.preview-image { width: 100%; aspect-ratio: 16 / 7; margin-top: 10px; border-radius: 7px; display: grid; place-items: center; overflow: hidden; color: #48d1a0; background-color: #17213a; background-size: cover; background-position: center; font-weight: 900; }

.auth-layout { min-height: calc(100vh - 150px); display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 50px; align-items: center; max-width: 1050px; margin: 0 auto; }
.auth-intro h2 { margin: 0 0 16px; font-size: 34px; }
.auth-intro > p:not(.eyebrow) { max-width: 590px; color: var(--muted); line-height: 1.9; }
.login-image-wrap { width: 100%; aspect-ratio: 16 / 8; margin-bottom: 24px; overflow: hidden; border-radius: 8px; background: #17213a; }
.login-image-wrap img { width: 100%; height: 100%; display: none; object-fit: cover; }
.login-image-wrap img.visible { display: block; }
.login-image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #48d1a0; background: linear-gradient(135deg, #17213a, #273450); font-size: 42px; font-weight: 900; }
.auth-panel { padding: 26px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 22px; padding: 4px; border-radius: 7px; background: #edf1f6; }
.auth-tab { min-height: 40px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-weight: 800; }
.auth-tab.active { color: var(--text); background: #fff; box-shadow: 0 2px 8px rgba(23, 32, 51, .08); }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.form-message { min-height: 20px; color: var(--muted); font-size: 13px; }
.form-message.error { color: var(--red); }
.form-message.success { color: var(--green); }
.account-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.small-button { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: #334155; background: #fff; font-size: 12px; font-weight: 700; }
.invite-create { display: flex; align-items: end; gap: 10px; }
.invite-create label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.invite-code { font: 700 14px Consolas, monospace; letter-spacing: 1px; }
.status-active { color: var(--green); font-weight: 800; }
.status-disabled { color: var(--red); font-weight: 800; }
.validity-editor { display: flex; align-items: center; gap: 6px; }
.validity-editor input { width: 142px; min-height: 32px; padding: 0 7px; font-size: 12px; }

@media (max-width: 1050px) {
  .site-header { padding: 0 16px; gap: 12px; }
  .brand span { display: none; }
  .nav-item { padding: 0 9px; }
  .admin-flyout-menu {
    right: auto;
    left: 50%;
    width: min(420px, calc(100vw - 24px));
    grid-template-columns: 1fr;
    transform: translate(-50%, -5px);
  }
  .nav-flyout:hover .admin-flyout-menu,
  .nav-flyout.open .admin-flyout-menu {
    transform: translate(-50%, 0);
  }
  .main:has(#admin-view.active) {
    padding: 20px 16px 42px;
  }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .home-fullscreen-card { align-items: stretch; flex-direction: column; }
  .home-fullscreen-card .primary-button { width: 100%; }
  .problem-layout, .practice-grid, .exam-layout, .typing-layout, .two-column, .home-learning-layout, .auth-layout, .login-content-grid { grid-template-columns: 1fr; }
  .typing-entry-grid { grid-template-columns: 1fr; }
  .bank-sidebar { position: static; }
  .bank-header-panel { grid-template-columns: 1fr; }
  .bank-stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bank-language-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .bank-language-tabs button { flex: 0 0 auto; }
  .exam-library-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-exam-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-summary { grid-template-columns: repeat(2, 1fr); }
  .admin-layout { grid-template-columns: 1fr; }
  .question-editor-workbench { grid-template-columns: 1fr; }
  .question-editor-side .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-panel { position: static; }
  .problem-list { max-height: 350px; }
  .exam-question-stage { grid-template-columns: 1fr; }
  .exam-player-topbar { grid-template-columns: 1fr; }
  .practice-grid { grid-template-rows: auto; }
  .coding-primary-panel > .section-head { grid-column: 1; grid-row: 1; }
  .coding-primary-panel > .problem-brief { grid-column: 1; grid-row: 2; min-height: auto; }
  .practice-splitter { display: none; }
  .coding-primary-panel > #text-code-workspace, .coding-primary-panel > #scratch-workspace { grid-column: 1; grid-row: 3; }
  .coding-primary-panel > #text-code-workspace { grid-template-columns: 1fr; grid-template-rows: auto var(--code-editor-height) var(--code-input-height) minmax(300px, auto); gap: 12px; }
  .coding-primary-panel > #text-code-workspace > .idle-toolbar { grid-column: 1; grid-row: 1; margin: 0; }
  .coding-primary-panel > #text-code-workspace > .code-editor-frame { grid-column: 1; grid-row: 2; }
  .coding-primary-panel > #text-code-workspace > .code-input-panel { grid-column: 1; grid-row: 3; height: var(--code-input-height); }
  .coding-primary-panel > #text-code-workspace > .python-runtime-panels,
  .coding-primary-panel > #text-code-workspace > .cpp-runtime-panel { grid-column: 1; grid-row: 4; height: min(420px, calc(var(--code-editor-height) - 40px)); }
  .judge-report-panel { grid-column: 1; grid-row: 4; }
  .creation-fullscreen #text-code-workspace { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(430px, 1fr) minmax(180px, auto) minmax(360px, auto); }
  .creation-fullscreen #text-code-workspace > .code-file-actions { grid-column: 1; grid-row: 1; }
  .creation-fullscreen #text-code-workspace > .idle-toolbar { grid-column: 1; grid-row: 2; }
  .creation-fullscreen #text-code-workspace > .code-editor-frame { grid-column: 1; grid-row: 3; }
  .creation-fullscreen #text-code-workspace > .code-input-panel { grid-column: 1; grid-row: 4; }
  .creation-fullscreen #text-code-workspace > .editor-actions { grid-column: 1; grid-row: 4; }
  .creation-fullscreen #text-code-workspace > .python-runtime-panels,
  .creation-fullscreen #text-code-workspace > .cpp-runtime-panel { grid-column: 1; grid-row: 5; }
}
@media (min-width: 901px) and (max-width: 1050px) {
  .objective-exam-mode .exam-question-stage.exam-objective-layout.objective-ratio-3-7 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
  .objective-exam-mode .exam-question-stage.exam-objective-layout.objective-ratio-4-6 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .objective-exam-mode .exam-question-stage.exam-objective-layout.objective-ratio-5-5 { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); }
  .objective-exam-mode .exam-question-stage.exam-objective-layout.objective-ratio-6-4 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
}
@media (max-width: 900px) {
  .question-editor-side .form-grid { grid-template-columns: 1fr; }
  .question-side-actions { grid-template-columns: 1fr; }
  .admin-option-card-head { align-items: flex-start; flex-wrap: wrap; }
  .admin-option-row { padding: 12px; }
  .objective-exam-mode .exam-question-stage.exam-objective-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; overflow: auto; }
  .objective-exam-mode .exam-objective-layout .exam-question-prompt,
  .objective-exam-mode .exam-objective-layout .exam-answer-workspace { max-height: none; overflow: visible; }
  .exam-objective-stage .exam-options, .exam-objective-stage.exam-objective-judge .exam-options { grid-template-columns: 1fr; }
  .preview-question-card { grid-template-columns: 1fr; }
  .graphical-question-actions { gap: 8px; padding-right: 8px; }
  .graphical-question-actions .graphical-question-action-btn { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 760px) {
  .site-header { position: relative; min-height: 124px; padding: 10px 14px 0; grid-template-columns: 1fr auto; grid-template-rows: 48px 56px; align-items: center; }
  .brand { grid-column: 1; grid-row: 1; }
  .header-account { grid-column: 2; grid-row: 1; }
  .header-account .user-menu { gap: 3px; }.header-account .ghost-button { min-height: 34px; padding: 0 9px; }
  .account-flyout { height: 48px; }
  .account-flyout-menu { top: calc(100% + 6px); }
  .user-center-button small { display: none; }
  .nav { grid-column: 1 / -1; grid-row: 2; width: calc(100vw - 28px); height: 56px; overflow-x: auto; }
  .nav-flyout { height: 56px; flex: 0 0 auto; }
  .nav-item { height: 56px; flex: 0 0 auto; padding: 0 13px; }
  .nav-flyout-menu { left: 0; top: calc(100% + 6px); }
  .main { padding: 20px 14px 36px; }
  .topbar { align-items: flex-start; }
  .top-actions .ghost-button { display: none; }
  .top-actions .user-menu .ghost-button { display: inline-flex; }
  .invite-create { align-items: stretch; flex-direction: column; }
  .toolbar { grid-template-columns: 1fr; }
  .exam-library-filters { grid-template-columns: 1fr; }
  .bank-stat-grid, .my-exam-card-grid { grid-template-columns: 1fr; }
  .bank-language-tabs { flex-wrap: wrap; }
  .bank-language-tabs button { flex: 1 1 150px; }
  .bank-toolbar { grid-template-columns: 1fr; }
  .exam-center-summary { justify-content: flex-start; }
  .practice-language-tabs { width: 100%; grid-template-columns: 1fr; }
  .creation-selectors, .exam-count-grid { grid-template-columns: 1fr; }
  .scratch-submit { grid-template-columns: 1fr; }
  .scratch-official-launcher, .scratch-official-exam { grid-template-columns: 1fr; padding: 22px; }
  .python-runtime-panels { grid-template-columns: 1fr; }
  .idle-toolbar { align-items: flex-start; flex-direction: column; }
  .idle-toolbar-actions { width: 100%; flex-wrap: wrap; }
  .scratch-editor-shell { grid-template-columns: 1fr; }
  .visual-editor-toolbar { grid-template-columns: 1fr; }
  .visual-toolbar-actions { justify-content: flex-start; }
  .visual-editor-shell { height: auto; grid-template-columns: 1fr; }
  .blockly-editor { height: 520px; }
  .visual-stage-panel { border-left: 0; border-top: 1px solid #cdd8e8; }
  .scratch-code-body { grid-template-columns: 72px 160px minmax(260px, 1fr); overflow-x: auto; }
  .exam-player-nav { flex-wrap: wrap; }
  .bank-answer-options, .exam-options { grid-template-columns: 1fr; }
  .profile-summary, .profile-grid { grid-template-columns: 1fr; }
  .profile-wide { grid-column: 1; }
  .pet-home-panel, .pet-create-grid, .pet-shop-grid, .pet-admin-layout { grid-template-columns: 1fr; }
  .pet-choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .metric-grid { grid-template-columns: 1fr; }
  .admin-summary, .form-grid, .option-image-fields, .admin-option-row { grid-template-columns: 1fr; }
  .topbar { display: block; }
  .top-actions { margin-top: 14px; }
  .typing-stats { grid-template-columns: 1fr; }
  .typing-stats div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.toolbar-actions, .management-filters, .management-row-actions, .material-order-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compact-management-form { margin: 14px 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.management-list { display: grid; gap: 10px; }
.management-row, .management-card { padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.management-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.management-row p, .management-card p, .material-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.management-row-actions input { width: 84px; }
.management-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.ranking-list { margin-top: 12px; display: grid; gap: 6px; }
.ranking-list span { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; background: #f8fafc; }
.ranking-list b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: var(--primary); }
.paper-question-picker { max-height: 320px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.paper-question-picker label { padding: 10px; grid-template-columns: 20px 1fr; align-items: start; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.paper-question-picker input { min-height: auto; }
.paper-question-picker small { display: block; margin-top: 3px; color: var(--muted); }
.paper-filter-bar { display: grid; grid-template-columns: 160px 140px minmax(180px, 1fr); gap: 10px; }
.paper-objective-scale-section { margin: 14px 0; padding: 14px; display: grid; gap: 12px; border: 1px solid #dbe4ef; border-radius: 8px; background: #fff; }
.paper-objective-scale-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.paper-objective-scale-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.paper-objective-scale-head span { min-width: 58px; padding: 6px 10px; border-radius: 6px; color: var(--primary); background: #eef4ff; text-align: center; font-weight: 800; }
.scale-option-group, .ratio-option-group { display: grid; gap: 8px; }
.scale-option-group { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ratio-option-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scale-option-group button, .ratio-option-group button { min-height: 38px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: #f8fafc; font-weight: 800; }
.scale-option-group button.active, .ratio-option-group button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.paper-objective-preview { --preview-title: 18px; --preview-copy: 13px; --preview-pad: 14px; --preview-gap: 12px; padding: 12px; border: 1px dashed #c7d3e2; border-radius: 8px; background: #f6f8fb; }
.paper-objective-preview.objective-scale-50 { --preview-title: 14px; --preview-copy: 11px; --preview-pad: 8px; --preview-gap: 6px; }
.paper-objective-preview.objective-scale-60 { --preview-title: 16px; --preview-copy: 12px; --preview-pad: 10px; --preview-gap: 8px; }
.paper-objective-preview.objective-scale-70 { --preview-title: 18px; --preview-copy: 13px; --preview-pad: 12px; --preview-gap: 10px; }
.paper-objective-preview.objective-scale-80 { --preview-title: 20px; --preview-copy: 14px; --preview-pad: 14px; --preview-gap: 12px; }
.paper-objective-preview.objective-scale-90 { --preview-title: 22px; --preview-copy: 15px; --preview-pad: 16px; --preview-gap: 14px; }
.paper-objective-preview.objective-scale-100 { --preview-title: 24px; --preview-copy: 16px; --preview-pad: 18px; --preview-gap: 16px; }
.preview-question-card { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--preview-gap); }
.paper-objective-preview.objective-ratio-3-7 .preview-question-card { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.paper-objective-preview.objective-ratio-4-6 .preview-question-card { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.paper-objective-preview.objective-ratio-5-5 .preview-question-card { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); }
.paper-objective-preview.objective-ratio-6-4 .preview-question-card { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.preview-question-left, .preview-options-right { padding: var(--preview-pad); border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
.preview-question-card h3 { margin: 10px 0; font-size: var(--preview-title); line-height: 1.45; }
.preview-question-card p { margin: 0; color: var(--muted); font-size: var(--preview-copy); line-height: 1.7; }
.preview-image-placeholder { width: 60%; min-height: 54px; margin: 10px auto; display: grid; place-items: center; border: 1px dashed #b8c4d4; border-radius: 6px; color: var(--muted); background: #f8fafc; font-size: var(--preview-copy); }
.preview-options-right { display: grid; align-content: start; gap: var(--preview-gap); }
.preview-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--preview-gap); font-size: var(--preview-copy); }
.preview-options-grid span { padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.paper-builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.paper-picker-question { padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.paper-picker-question label { padding: 0; border: 0; background: transparent; }
.paper-selected-panel { position: sticky; top: 72px; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.paper-selected-item { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid #dce2ea; border-radius: 6px; background: #fff; }
.paper-selected-item input { min-height: 34px; padding: 6px; }
.paper-preview-modal { position: fixed; z-index: 80; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(15, 23, 42, .48); }
.paper-preview-modal.hidden { display: none; }
.paper-preview-card-modal { width: min(720px, 96vw); max-height: 88vh; overflow: auto; padding: 0 18px 18px; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(15, 23, 42, .32); }
.paper-preview-card-modal.wide { width: min(980px, 96vw); }
.paper-preview-modal-head { position: sticky; z-index: 6; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; margin: 0 -18px 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.paper-preview-modal-head strong { padding-right: 16px; }
.paper-preview-modal-head button { width: 36px; height: 36px; border: 1.5px solid #3B82F6; border-radius: 8px; color: #2563EB; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: none; transition: background .16s ease, border-color .16s ease, transform .12s ease; }
.paper-preview-modal-head button:hover { border-color: #2563EB; background: #EFF6FF; }
.paper-preview-modal-head button:active { transform: scale(.95); }
.paper-preview-modal-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.paper-preview-question { padding: 12px 0; border-top: 1px solid var(--line); }
.exam-grading-workspace { display: grid; gap: 14px; }
.exam-grading-head { padding: 16px; display: flex; align-items: start; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.exam-grading-head h3 { margin: 4px 0; }
.exam-grading-score-summary { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 260px; }
.exam-grading-score-summary span, .exam-grading-score-summary strong, .exam-grading-score-summary em { padding: 7px 10px; border-radius: 999px; background: #f1f5f9; font-size: 12px; font-style: normal; }
.exam-grading-score-summary strong { color: #fff; background: var(--primary); }
.exam-grading-score-summary em { color: #7c2d12; background: #ffedd5; }
.exam-grading-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.exam-grading-sidebar { position: sticky; top: 72px; display: grid; gap: 8px; max-height: calc(100vh - 110px); overflow: auto; }
.exam-grading-sidebar button { padding: 11px; display: grid; gap: 3px; text-align: left; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: #fff; cursor: pointer; }
.exam-grading-sidebar button.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, .12); }
.exam-grading-sidebar button.pending { border-color: #fdba74; background: #fff7ed; }
.exam-grading-sidebar span, .exam-grading-sidebar small { color: var(--muted); font-size: 12px; }
.exam-grading-detail { min-width: 0; padding: 16px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.exam-grading-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.exam-grading-detail-head h3 { margin: 4px 0 0; }
.grade-pill { padding: 7px 10px; border-radius: 999px; color: #166534; background: #dcfce7; font-size: 12px; font-weight: 800; white-space: nowrap; }
.grade-pill.warning { color: #9a3412; background: #ffedd5; }
.exam-grading-question { padding: 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; }
.exam-grading-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.exam-grading-result-grid div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.exam-grading-result-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.success-text { color: #15803d; }
.danger-text { color: #b91c1c; }
.grading-code-view { min-height: 220px; max-height: 520px; overflow: auto; padding: 14px; border-radius: 8px; color: #e5e7eb; background: #111827; line-height: 1.7; white-space: pre-wrap; tab-size: 4; }
.scratch-submission-card { padding: 14px; display: grid; gap: 8px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; }
.scratch-submission-card p { margin: 0; color: #1e3a8a; }
.scratch-submission-card a { text-decoration: none; }
.grading-checkpoints { display: grid; gap: 8px; }
.grading-checkpoint { padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.grading-checkpoint.pass { border-color: #bbf7d0; background: #f0fdf4; }
.grading-checkpoint.fail { border-color: #fecaca; background: #fef2f2; }
.grading-checkpoint small { grid-column: 1 / -1; color: var(--muted); }
.exam-manual-grade-box { padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 180px)) minmax(240px, 1fr); gap: 10px; border: 1px solid #dbe4ef; border-radius: 8px; background: #fbfdff; }
.exam-manual-grade-box label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.exam-manual-grade-box input, .exam-manual-grade-box textarea { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: inherit; }
.exam-manual-grade-box textarea { resize: vertical; }
.exam-manual-grade-box .wide { grid-column: 3; }
.exam-grading-actions, .exam-grading-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.exam-grading-actions { grid-column: 1 / -1; }
.empty-state.compact { padding: 10px; border: 1px dashed var(--line); border-radius: 7px; background: #f8fafc; }
.question-filter-bar { margin-bottom: 14px; display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(6, minmax(120px, 1fr)); gap: 8px; }
.material-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.material-summary { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #475569; font-size: 13px; }
.material-summary span { padding: 6px 10px; border: 1px solid #dbeafe; border-radius: 999px; background: #eff6ff; }
.material-summary strong { color: #2563eb; }
.material-card { min-width: 0; padding: 12px; display: grid; grid-template-rows: 140px auto auto; gap: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.material-card img, .material-file-icon, .material-sprite3-preview { width: 100%; height: 140px; object-fit: contain; border-radius: 5px; background: #f2f5f8; }
.material-sprite3-preview { display: flex; align-items: center; justify-content: center; color: #2563eb; font-weight: 800; letter-spacing: 1px; border: 1px dashed #93c5fd; }
.material-file-icon { display: grid; place-items: center; color: var(--muted); font-weight: 800; }
.material-order-actions .ghost-button { width: 36px; padding: 0; }
.modal-close-button,
.paper-preview-modal-head .modal-close-button,
.scratch-question-modal-head .modal-close-button,
.account-modal-head .modal-close-button,
.scratch-result-close.modal-close-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid #3B82F6;
  border-radius: 8px;
  color: #2563EB;
  background: #ffffff;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.modal-close-button:hover,
.paper-preview-modal-head .modal-close-button:hover,
.scratch-question-modal-head .modal-close-button:hover,
.account-modal-head .modal-close-button:hover,
.scratch-result-close.modal-close-button:hover {
  border-color: #2563EB;
  background: #EFF6FF;
}
.modal-close-button:active,
.paper-preview-modal-head .modal-close-button:active,
.scratch-question-modal-head .modal-close-button:active,
.account-modal-head .modal-close-button:active,
.scratch-result-close.modal-close-button:active {
  transform: scale(.95);
}
@media (max-width: 900px) {
  .question-filter-bar, .paper-question-picker, .question-editor-flow, .paper-filter-bar, .paper-builder-grid { grid-template-columns: 1fr; }
  .scale-option-group, .ratio-option-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper-selected-panel { position: static; }
  .management-row { align-items: stretch; flex-direction: column; }
  .exam-grading-head, .exam-grading-layout, .exam-manual-grade-box, .exam-grading-result-grid { grid-template-columns: 1fr; }
  .exam-grading-head { display: grid; }
  .exam-grading-sidebar { position: static; max-height: none; }
  .exam-manual-grade-box .wide { grid-column: 1; }
}
.question-level-selector { margin-bottom: 14px; display: grid; gap: 8px; }
.question-level-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.question-level-row button { min-height: 48px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #fff; font-weight: 800; }
.question-level-row button:hover { border-color: var(--primary); }
.question-level-row button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.question-kind-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bank-category-row {
  grid-template-columns: minmax(160px, 220px);
  justify-content: start;
}
.bank-category-dropdown {
  min-height: 48px;
  padding: 0 36px 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  color: var(--text);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}
.bank-category-dropdown:hover {
  color: var(--primary);
  border-color: #bfdbfe;
  background-color: #eff6ff;
}
@media (max-width: 700px) {
  .question-level-row, .question-kind-row { grid-template-columns: 1fr 1fr; }
  .bank-category-row { grid-template-columns: 1fr; }
}
.scratch-question-mode .practice-grid { grid-template-columns: minmax(0, 1fr); }
.scratch-question-mode .practice-splitter { display: none; }
.scratch-question-frame { position: relative; min-width: 0; overflow: hidden; }
.scratch-question-frame > .scratch-editor-scale-wrapper,
.scratch-question-frame > .scratch-official-frame { display: block; }
.scratch-question-button, .scratch-check-button, .scratch-save-button, .scratch-reset-button, .scratch-exit-button, .scratch-submit-button { position: absolute; z-index: 18; top: 7px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 5px; color: #fff; font-weight: 800; box-shadow: 0 2px 8px rgba(25, 38, 69, .2); }
.graphical-question-actions { position: absolute; z-index: 18; top: 8px; right: 0; display: flex; align-items: center; gap: 12px; margin-left: auto; padding-right: 16px; }
.graphical-question-actions .graphical-question-action-btn { position: static; height: 40px; min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 20px rgba(15, 23, 42, .18); transition: transform .2s ease, filter .2s ease; }
.graphical-question-actions .graphical-question-action-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.graphical-question-actions .graphical-question-action-btn:active { transform: translateY(0); }
.graphical-question-actions .graphical-question-action-btn.return { background: #334155; }
.graphical-question-actions .graphical-question-action-btn.question { background: #7c3aed; }
.graphical-question-actions .graphical-question-action-btn.submit { background: #2563eb; }
.scratch-question-button { right: 150px; background: #7854d8; }
.scratch-check-button { right: 222px; background: #0f766e; }
.scratch-save-button { right: 340px; background: #2563eb; }
.scratch-reset-button { right: 450px; background: #53657d; }
.scratch-exit-button { right: 546px; background: #374151; }
.scratch-submit-button { right: 10px; background: #ff8c1a; }
.scratch-question-frame.free-creation > .graphical-question-actions, .scratch-question-frame.free-creation > .scratch-question-button, .scratch-question-frame.free-creation > .scratch-check-button, .scratch-question-frame.free-creation > .scratch-save-button, .scratch-question-frame.free-creation > .scratch-reset-button, .scratch-question-frame.free-creation > .scratch-exit-button, .scratch-question-frame.free-creation > .scratch-submit-button { display: none; }
.scratch-question-modal { position: absolute; z-index: 30; top: 72px; left: 50%; width: 64vw; max-width: 900px; max-height: calc(100% - 96px); transform: translateX(-50%); overflow: auto; border: 1px solid #cfd7e6; border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(23, 32, 51, .28); }
.scratch-question-modal-head { position: sticky; z-index: 2; top: 0; min-height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #fff; }
.scratch-question-modal-head button { width: 36px; height: 36px; border: 1.5px solid #3B82F6; border-radius: 8px; color: #2563EB; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: none; transition: background .16s ease, border-color .16s ease, transform .12s ease; }
.scratch-question-modal-head button:hover { border-color: #2563EB; background: #EFF6FF; }
.scratch-question-modal-head button:active { transform: scale(.95); }
.scratch-question-modal-body { max-width: 880px; margin: 0 auto; padding: 24px; line-height: 1.75; }
.scratch-question-modal-body h2 { margin: 10px 0; font-size: 24px; }
.scratch-question-modal-body img, .scratch-question-modal-body video { max-width: 100%; height: auto; }
.scratch-question-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.scratch-question-section h3 { margin: 0 0 8px; font-size: 15px; color: var(--text); }
.scratch-question-section ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.scratch-question-section li span, .scratch-question-section li em { display: block; color: var(--muted); font-style: normal; }
.scratch-question-section .exam-question-image { width: min(100%, 680px); display: block; margin: 10px auto; }
.scratch-question-modal-actions { position: sticky; bottom: 0; padding: 12px 18px; display: flex; justify-content: flex-end; border-top: 1px solid var(--line); background: #fff; }
.scratch-submit-feedback { position: absolute; z-index: 32; top: 52px; right: 10px; max-width: 340px; padding: 10px 14px; border-radius: 6px; color: #fff; background: #334155; box-shadow: 0 8px 24px rgba(23, 32, 51, .2); }
.scratch-submit-feedback.success { background: #16875f; }
.scratch-submit-feedback.error { background: #c43d4b; }
.scratch-result-modal { position: absolute; z-index: 45; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .52); }
.scratch-result-card { position: relative; width: min(720px, 100%); max-height: min(680px, calc(100vh - 80px)); overflow: auto; padding: 22px; border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .32); }
.scratch-result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 58px 14px 0; border-bottom: 1px solid var(--line); }
.scratch-result-head h3 { margin: 0; }
.scratch-result-head small { display: block; margin-top: 4px; color: var(--muted); }
.scratch-result-head strong { flex: 0 0 auto; color: var(--primary); font-size: 24px; white-space: nowrap; }
.scratch-result-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 1.5px solid #3B82F6; border-radius: 8px; background: #fff; color: #2563EB; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: none; transition: background .16s ease, border-color .16s ease, transform .12s ease; }
.scratch-result-close:hover { border-color: #2563EB; background: #EFF6FF; }
.scratch-result-close:active { transform: scale(.95); }
.scratch-result-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 10px; padding: 12px 14px; border-radius: 7px; background: #f8fafc; border: 1px solid var(--line); }
.scratch-result-score span { color: var(--muted); }
.scratch-result-score b { color: var(--primary); font-size: 20px; }
.scratch-result-section-title { margin: 12px 0 0; font-size: 15px; }
.scratch-result-list { display: grid; gap: 10px; margin: 16px 0; }
.scratch-result-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.scratch-result-row > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 900; background: var(--green); }
.scratch-result-row.failed > span { background: var(--red); }
.scratch-result-row small { display: block; margin-top: 4px; color: var(--muted); }
.scratch-result-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); text-align: center; background: #f8fafc; }
.scratch-result-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 640px) {
  .scratch-result-card { padding: 18px; }
  .scratch-result-head { align-items: flex-start; flex-direction: column; gap: 8px; padding-right: 48px; }
  .scratch-result-head strong { font-size: 22px; }
}
.checkpoint-enable-field { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.checkpoint-enable-field label { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; }
.checkpoint-enable-field .scratch-feedback-detail-toggle { display: flex; margin-top: 8px; color: #0f172a; font-weight: 800; }
.checkpoint-enable-field input { min-height: auto; }
.checkpoint-enable-field small, .checkpoint-disabled-tip { color: var(--muted); line-height: 1.65; }
.checkpoint-disabled-tip { padding: 12px; border: 1px dashed var(--line); border-radius: 7px; background: #f8fafc; }
.oj-testcase-field { display: grid; gap: 14px; padding: 14px; border: 1px solid #dbe7f3; border-radius: 8px; background: #f8fbff; }
.oj-testcase-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.oj-testcase-head small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.6; }
.oj-testcase-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.oj-count-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.oj-count-label input { width: 74px; min-height: 34px; }
.file-like-button { cursor: pointer; margin: 0; }
.oj-testcase-list { display: grid; gap: 12px; }
.oj-testcase-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.oj-testcase-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.oj-testcase-card textarea { min-height: 86px; resize: vertical; }
.oj-testcase-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: end; }
.inline-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }
.inline-check input { min-height: auto; }
.danger-text { color: #dc2626; }
.oj-testcase-summary { padding: 10px 12px; border-radius: 7px; color: #0f766e; background: #ecfdf5; font-weight: 800; }
.oj-testcase-summary.warning { color: #92400e; background: #fffbeb; }
.scratch-scoring-editor { display: grid; gap: 14px; padding: 14px; border: 1px solid #dbe7f3; border-radius: 8px; background: #f8fbff; }
.scratch-scoring-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.scratch-scoring-head small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.6; }
.scratch-scoring-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.scratch-checkpoint-list { display: grid; gap: 12px; }
.scratch-checkpoint-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.scratch-checkpoint-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scratch-checkpoint-card-title { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scratch-checkpoint-card-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.scratch-checkpoint-card-head strong { color: var(--primary); }
.scratch-checkpoint-card-head span { padding: 3px 8px; border-radius: 999px; color: #2563eb; background: #eff6ff; font-size: 12px; font-weight: 900; }
.scratch-checkpoint-remove { border-color: #fecaca; color: #dc2626; background: #fff; }
.scratch-checkpoint-remove:hover { background: #fef2f2; border-color: #f87171; color: #b91c1c; }
.scratch-checkpoint-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.scratch-checkpoint-grid label { margin: 0; }
.scratch-checkpoint-grid input[readonly] { color: #475569; background: #f8fafc; }
.scratch-checkpoint-grid select,
.scratch-checkpoint-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: #0f172a; background: #fff; }
.scratch-checkpoint-grid textarea { min-height: 72px; resize: vertical; line-height: 1.6; }
.scratch-checkpoint-grid .wide { grid-column: span 2; }
.scratch-checkpoint-grid details.wide { align-self: stretch; }
.scratch-checkpoint-grid details summary { cursor: pointer; color: #2563eb; font-weight: 800; padding: 8px 0; }
.scratch-checkpoint-json textarea { min-height: 160px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 12px; }
@media (max-width: 900px) {
  .scratch-checkpoint-grid { grid-template-columns: 1fr; }
  .scratch-checkpoint-grid .wide { grid-column: auto; }
}
.exam-visual-editor-mount.scratch-question-frame { position: relative; min-height: 620px; padding: 0; }
.exam-answer-fullscreen .exam-visual-editor-mount.scratch-question-frame { height: calc(100vh - 64px); min-height: 0; }
.exam-answer-fullscreen .exam-visual-editor-mount .scratch-editor-scale-wrapper { height: calc(100vh - 64px); min-height: 0; }
.exam-visual-editor-mount .scratch-exam-child-frame { width: 100%; height: 100%; min-height: 0; }
.exam-visual-editor-mount[data-loading-text]::after {
  content: attr(data-loading-text);
  position: absolute;
  z-index: 20;
  inset: 64px 0 0;
  display: grid;
  place-items: center;
  color: #27415e;
  background: rgba(245, 249, 255, .82);
  font-weight: 800;
}
.scratch-project-load-failure {
  position: absolute;
  z-index: 35;
  inset: 64px 0 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(245, 249, 255, .9);
}
.scratch-project-load-failure > div {
  width: min(440px, 92vw);
  padding: 22px;
  border: 1px solid #d8e2f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(20, 31, 48, .18);
}
.scratch-project-load-failure p { margin: 10px 0 16px; color: var(--muted); }
.scratch-project-load-failure button + button { margin-left: 10px; }
.scratch-leave-modal { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(21, 29, 43, .55); }
.scratch-leave-modal > div { width: min(440px, 100%); padding: 24px; border-radius: 8px; background: #fff; box-shadow: 0 20px 54px rgba(0, 0, 0, .3); }
.scratch-leave-modal h3 { margin: 0 0 8px; }
.scratch-leave-modal p { color: var(--muted); line-height: 1.6; }
.scratch-leave-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.scratch-answer-fullscreen .topbar { display: none; }
.scratch-answer-fullscreen .main { width: 100%; max-width: none; padding: 0; }
.scratch-answer-fullscreen #practice-view > .creation-selectors,
.scratch-answer-fullscreen #practice-view .coding-primary-panel > .section-head,
.scratch-answer-fullscreen #practice-view .problem-brief,
.scratch-answer-fullscreen #practice-view .judge-report-panel,
.scratch-answer-fullscreen #scratch-workspace > .visual-editor-toolbar,
.scratch-answer-fullscreen #scratch-workspace > .visual-editor-shell { display: none; }
.scratch-answer-fullscreen #practice-view .practice-grid,
.scratch-answer-fullscreen #practice-view .coding-primary-panel,
.scratch-answer-fullscreen #scratch-workspace { min-height: 100vh; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; }
.scratch-answer-fullscreen #scratch-home-frame-wrap,
.scratch-answer-fullscreen #scratch-home-frame-wrap .scratch-editor-scale-wrapper { height: 100vh; min-height: 100vh; border: 0; border-radius: 0; }
.creation-fullscreen .site-header,
.scratch-answer-fullscreen .site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 120; opacity: 0; pointer-events: none; transform: translateY(-100%); transition: transform .18s ease, opacity .18s ease; }
.creation-fullscreen.nav-peek .site-header,
.scratch-answer-fullscreen.nav-peek .site-header { opacity: 1; pointer-events: auto; transform: translateY(0); }
.exam-question-tab.locked {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.4);
}
.exam-answer-footer {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}
.exam-integrity-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .58);
}
.exam-integrity-overlay.show { display: grid; }
.exam-integrity-card {
  width: min(460px, 92vw);
  padding: 24px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  text-align: center;
}
.exam-integrity-card h3 { margin: 0 0 10px; color: #1e3a8a; }
.exam-integrity-card p { margin: 8px 0; color: #475569; line-height: 1.7; }
.exam-integrity-card .primary-button { margin-top: 14px; }
@media (max-width: 700px) {
  .pet-avatar-scene { min-height: 250px; padding: 18px; }
  .pet-avatar-wrap { width: 154px; height: 154px; border-radius: 28px; }
  .pet-avatar { font-size: 74px; }
  .pet-effect { top: 12px; right: 14px; font-size: 19px; }
  .scratch-question-button { right: 120px; padding: 0 8px; }
  .scratch-reset-button { right: 176px; padding: 0 8px; }
  .scratch-exit-button { left: 8px; right: auto; padding: 0 8px; }
  .scratch-submit-button { padding: 0 10px; }
  .scratch-question-modal { top: 60px; width: 90vw; max-height: calc(100% - 72px); }
  .question-image img,
  .question-card .question-image img,
  .options-card .question-image img,
  .answer-feedback .question-image img {
    width: auto;
    max-width: 50%;
  }
  .question-image-row {
    flex-direction: column;
    gap: 12px;
  }
  .question-image-row .question-image-item {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .site-upload-row,
  .site-image-preview { grid-template-columns: 1fr; }
  .site-feature-grid { grid-template-columns: 1fr; }
  .site-home-hero-copy { background: rgba(255,255,255,.9); }
}