/* stu10-9 作业中心：只消费公共设计 token，不依赖上课中心业务 DOM。 */
html, body { height: 100%; }
body.hw-app { overflow: hidden; background: var(--bg); }
button, input, select, textarea { font: inherit; }

.hw-shell { display: flex; width: 100vw; height: 100vh; }
.hw-sidebar {
  width: 248px; flex: 0 0 248px; display: flex; flex-direction: column;
  background: rgba(255,255,255,.98); border-right: 1px solid #E6E9EF;
  box-shadow: 2px 0 18px rgba(20,34,52,.035); overflow: hidden;
}
.hw-brand { height: 70px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid #EEF0F4; }
.hw-brand img { width: 36px; height: 36px; object-fit: contain; }
.hw-brand strong { display: block; color: var(--primary); font-size: 16px; line-height: 1.2; letter-spacing: .04em; }
.hw-brand span { display: block; margin-top: 3px; color: var(--text-weak); font-size: 11px; }
.hw-back { display: flex; align-items: center; gap: 8px; margin: 14px; padding: 10px 12px; color: #526173; text-decoration: none; font-size: 12px; border: 1px solid #E2E6EC; border-radius: 10px; background: #FBFCFE; }
.hw-back:hover { color: var(--primary); border-color: rgba(91,103,211,.34); background: #F5F6FC; }
.hw-nav { flex: 1; overflow-y: auto; padding: 2px 10px 16px; }
.hw-nav-title { padding: 12px 10px 7px; color: var(--text-weak); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.hw-nav button, .hw-nav a {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px; padding: 6px 10px; border: 0; border-radius: 10px;
  color: #526173; background: transparent; text-decoration: none; font-size: 13px; text-align: left; cursor: pointer;
}
.hw-nav button:hover, .hw-nav a:hover { color: var(--primary); background: #F5F6FC; }
.hw-nav button.active { color: var(--primary); background: #EEF0FB; box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.hw-nav .nav-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; color: #6F7C8C; background: #F3F5F8; font-size: 15px; }
.hw-nav .active .nav-icon { color: var(--primary); background: rgba(91,103,211,.1); }
.hw-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hw-nav .nav-count { margin-left: auto; min-width: 20px; padding: 1px 6px; color: #fff; background: var(--primary); border-radius: 10px; font-size: 10px; text-align: center; }
.hw-user { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid #EEF0F4; background: #FBFCFE; }
.hw-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; color: #fff; background: var(--ui-brand-gradient); font-size: 12px; font-weight: 700; }
.hw-user strong { display: block; font-size: 12px; }
.hw-user span { display: block; color: var(--text-weak); font-size: 10px; }

.hw-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.hw-topbar { height: 70px; flex: 0 0 70px; display: flex; align-items: center; gap: 12px; padding: 0 26px; border-bottom: 1px solid rgba(225,228,234,.76); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); }
.hw-topbar h1 { color: var(--text); font-size: 18px; font-weight: 700; }
.hw-context { color: var(--text-2); font-size: 12px; padding-left: 14px; border-left: 1px solid var(--border); }
.hw-spacer { flex: 1; }
.hw-content { flex: 1; overflow-y: auto; padding: 28px 32px 56px; }
.hw-container { width: min(1380px, 100%); margin: 0 auto; }
.hw-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.hw-heading h2 { color: var(--text); font-size: 26px; line-height: 1.25; }
.hw-heading p { margin-top: 7px; color: var(--text-2); font-size: 13px; }
.hw-actions { display: flex; gap: 10px; }

.hw-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.hw-stat { min-height: 118px; padding: 18px; position: relative; overflow: hidden; border: 1px solid rgba(222,227,234,.88); border-radius: 14px; background: #fff; box-shadow: var(--ui-shadow-soft); }
.hw-stat::after { content: ""; position: absolute; right: -24px; bottom: -32px; width: 84px; height: 84px; border-radius: 50%; background: rgba(91,103,211,.055); }
.hw-stat .label { color: #6E7A89; font-size: 12px; }
.hw-stat .value { margin-top: 10px; color: var(--text); font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.hw-stat .hint { margin-top: 9px; color: var(--text-weak); font-size: 11px; }
.hw-stat .hint.good { color: var(--success); }

.hw-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.85fr); gap: 16px; margin-bottom: 18px; }
.hw-card { border: 1px solid rgba(222,227,234,.88); border-radius: 16px; background: #fff; box-shadow: var(--ui-shadow-soft); overflow: hidden; }
.hw-card-head { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #EEF0F4; }
.hw-card-head h3 { font-size: 15px; }
.hw-card-head p { margin-top: 2px; color: var(--text-weak); font-size: 11px; }
.hw-card-body { padding: 18px; }
.hw-ai-card { position: relative; min-height: 190px; padding: 24px; color: #fff; background: var(--ui-brand-gradient); }
.hw-ai-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -100px; top: -160px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.hw-ai-card .eyebrow { position: relative; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: .86; }
.hw-ai-card h3 { position: relative; max-width: 600px; margin-top: 12px; font-size: 22px; line-height: 1.42; }
.hw-ai-card p { position: relative; max-width: 650px; margin-top: 9px; font-size: 12px; line-height: 1.75; opacity: .82; }
.hw-ai-card .btn { position: relative; margin-top: 18px; color: var(--primary); background: #fff; box-shadow: 0 8px 20px rgba(20,34,52,.16); }

.hw-flow { display: grid; gap: 10px; }
.hw-flow-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #F7F8FB; }
.hw-flow-no { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: #E9ECFC; font-size: 11px; font-weight: 700; }
.hw-flow-row strong { display: block; font-size: 12px; }
.hw-flow-row span { color: var(--text-weak); font-size: 10px; }
.hw-flow-row b { color: var(--primary); font-size: 11px; font-weight: 600; }

.hw-list { display: grid; }
.hw-list-row { display: grid; grid-template-columns: minmax(220px,1.6fr) minmax(140px,.8fr) 96px 110px 80px; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid #EEF0F4; }
.hw-list-row:last-child { border-bottom: 0; }
.hw-list-row:hover { background: #FAFAFE; }
.hw-list-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hw-list-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 11px; color: var(--primary); background: #EEF0FB; }
.hw-list-title strong { display: block; overflow: hidden; color: var(--text); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.hw-list-title span, .hw-list-cell small { display: block; margin-top: 3px; color: var(--text-weak); font-size: 10px; }
.hw-list-cell { color: var(--text-2); font-size: 12px; }
.hw-progress { width: 100%; height: 5px; margin-top: 6px; overflow: hidden; border-radius: 5px; background: #E9ECF1; }
.hw-progress > i { height: 100%; display: block; border-radius: 5px; background: var(--primary); }
.hw-row-action { color: var(--primary); text-decoration: none; font-size: 11px; font-weight: 600; }

/* 独立作业编排弹层 */
.hw-dialog-backdrop { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20,34,52,.35); backdrop-filter: blur(8px); }
.hw-dialog-backdrop.on { display: flex; }
.hw-dialog { width: min(920px,100%); max-height: min(860px,92vh); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.72); border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(20,34,52,.22); overflow: hidden; }
.hw-review-dialog { width: min(1080px, 100%); }
.hw-dialog-head { min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #E7EAF0; background: linear-gradient(180deg,#fff,#FBFCFE); }
.hw-dialog-head h3 { font-size: 17px; }
.hw-dialog-head p { color: var(--text-weak); font-size: 11px; }
.hw-dialog-close { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--text-2); background: transparent; cursor: pointer; font-size: 20px; }
.hw-dialog-close:hover { color: var(--primary); background: var(--primary-soft); }
.hw-dialog-body { flex: 1; overflow-y: auto; padding: 20px; background: #FBFCFE; }
.hw-dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #E7EAF0; background: #fff; }
.hw-review-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.hw-review-metric { padding: 13px; border: 1px solid #E3E7EE; border-radius: 11px; background: #fff; }
.hw-review-metric span { display: block; color: var(--text-weak); font-size: 10px; }
.hw-review-metric strong { display: block; margin-top: 5px; color: var(--text); font-size: 18px; }
.hw-review-list { display: grid; gap: 9px; }
.hw-review-row { display: grid; grid-template-columns: minmax(180px,1fr) 110px 100px 130px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #E5E9EF; border-radius: 11px; background: #fff; }
.hw-review-row strong, .hw-review-row span { display: block; }
.hw-review-row span { margin-top: 2px; color: var(--text-weak); font-size: 10px; }
.hw-review-answer { margin-bottom: 12px; padding: 15px; border: 1px solid #E2E6ED; border-radius: 12px; background: #fff; }
.hw-review-answer .student-answer { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: #F4F6F9; color: var(--text-2); white-space: pre-wrap; }
.hw-review-answer .ai-result { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--primary); border-radius: 4px 9px 9px 4px; background: #F0F2FC; color: #48536A; font-size: 12px; }
.hw-review-controls { display: grid; grid-template-columns: 120px minmax(220px,1fr) auto; gap: 9px; margin-top: 12px; }
.hw-photo-preview { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 10px; margin-bottom: 14px; }
.hw-photo-preview img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid #E0E5EB; border-radius: 10px; background: #F3F5F8; }
.hw-photo-grader { margin-bottom: 16px; border: 1px solid #DCE2EA; border-radius: 14px; overflow: hidden; background: #F5F7FA; }
.hw-photo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #DDE3EB; background: #fff; }
.hw-photo-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.hw-photo-tools .btn { border: 1px solid #DDE3EB; background: #fff; color: var(--text-2); }
.hw-photo-tools .btn.active { border-color: #D92D20; background: #FFF0EE; color: #B42318; box-shadow: inset 0 0 0 1px rgba(217,45,32,.12); }
.hw-photo-control { display: inline-flex; align-items: center; gap: 5px; color: var(--text-weak); font-size: 11px; }
.hw-photo-control input[type="color"] { width: 28px; height: 28px; padding: 2px; border: 1px solid #DDE3EB; border-radius: 7px; background: #fff; }
.hw-photo-control input[type="range"] { width: 78px; accent-color: #D92D20; }
.hw-photo-control input[type="checkbox"] { accent-color: var(--primary); }
.hw-photo-save-state { color: var(--text-weak); font-size: 11px; }
.hw-photo-page-tabs { display: flex; gap: 6px; padding: 9px 12px; overflow-x: auto; border-bottom: 1px solid #DDE3EB; background: #F8FAFC; }
.hw-photo-page-tabs button { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #DDE3EB; border-radius: 8px; background: #fff; color: var(--text-2); font-size: 11px; cursor: pointer; }
.hw-photo-page-tabs button.active { border-color: var(--primary); background: #EEF1FF; color: var(--primary); font-weight: 700; }
.hw-photo-stage-wrap { max-height: 66vh; padding: 14px; overflow: auto; background: linear-gradient(45deg,#EEF1F5 25%,transparent 25%),linear-gradient(-45deg,#EEF1F5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#EEF1F5 75%),linear-gradient(-45deg,transparent 75%,#EEF1F5 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.hw-photo-canvas { position: relative; width: min(100%,820px); margin: 0 auto; background: #fff; box-shadow: 0 8px 30px rgba(30,42,58,.16); }
.hw-photo-canvas img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.hw-photo-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.hw-layer-chip { position: absolute; left: 8px; z-index: 2; padding: 3px 7px; border-radius: 999px; color: #fff; font-size: 9px; pointer-events: none; }
.hw-layer-chip.original { bottom: 8px; background: rgba(31,41,55,.72); }
.hw-layer-chip.annotation { bottom: 30px; background: rgba(217,45,32,.82); }
.hw-photo-layer-note { margin: 0; padding: 9px 12px; border-top: 1px solid #DDE3EB; background: #fff; color: var(--text-weak); font-size: 11px; }
.hw-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hw-form-field.full { grid-column: 1/-1; }
.hw-form-field label { display: block; margin-bottom: 5px; color: var(--text-2); font-size: 12px; font-weight: 600; }
.hw-form-field textarea { min-height: 92px; resize: vertical; }
.hw-inline-filter { display: flex; gap: 10px; align-items: center; }
.hw-inline-filter .input { flex: 1; }
.hw-bank-summary { margin: 14px 0 8px; color: var(--text-2); font-size: 13px; }
.hw-bank-question { display: block; cursor: pointer; }
.hw-bank-question input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand); flex: 0 0 auto; }
.hw-type-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-type-list label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px; border: 1px solid #DDE2EA; border-radius: 9px; background: #fff; color: var(--text-2); cursor: pointer; font-size: 12px; }
.hw-type-list label:has(input:checked) { color: var(--primary); border-color: rgba(91,103,211,.5); background: #EEF0FB; }
.hw-ai-notice { margin-bottom: 16px; padding: 12px 14px; border-left: 3px solid var(--primary); border-radius: 0 9px 9px 0; color: #526173; background: #F2F4FD; font-size: 12px; line-height: 1.7; }
.hw-ai-results { display: grid; gap: 12px; }
.hw-ai-question { padding: 16px; border: 1px solid #E0E5EC; border-radius: 13px; background: #fff; }
.hw-ai-question.approved { border-color: rgba(55,147,115,.45); background: #FBFEFD; }
.hw-ai-question-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hw-ai-question-head strong { font-size: 12px; }
.hw-ai-question .stem { color: var(--text); font-size: 14px; line-height: 1.75; }
.hw-ai-question .meta { margin-top: 10px; color: var(--text-weak); font-size: 11px; }
.hw-ai-question .answer { margin-top: 10px; padding: 10px 12px; border-radius: 9px; color: #526173; background: #F7F8FB; font-size: 12px; line-height: 1.65; }
.hw-ai-question-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.hw-empty { padding: 36px 20px; color: var(--text-weak); text-align: center; font-size: 13px; }
.hw-loading { display: inline-flex; align-items: center; gap: 8px; }
.hw-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid rgba(91,103,211,.2); border-top-color: var(--primary); border-radius: 50%; animation: hwSpin .8s linear infinite; }
@keyframes hwSpin { to { transform: rotate(360deg); } }

/* 学生端：沿用 ui-student 上下文，保留独立作业业务结构。 */
body.hw-student { min-height: 100vh; overflow: auto; background: radial-gradient(circle at 50% -15%,rgba(91,103,211,.09),transparent 34%),var(--bg); }
.hw-student-topbar { min-height: 68px; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #EDEDEE; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.hw-student-topbar-inner { width: min(1120px,100%); min-height: 68px; display: flex; align-items: center; gap: 10px; margin: 0 auto; padding: 0 24px; }
.hw-student-topbar img { height: 30px; }
.hw-student-brand { color: var(--primary); font-size: 16px; font-weight: 700; }
.hw-student-sub { color: var(--text-weak); font-size: 11px; }
.hw-student-who { display: flex; align-items: center; gap: 9px; margin-left: auto; color: var(--text-2); font-size: 12px; }
.hw-student-container { width: min(940px,100%); margin: 0 auto; padding: 36px 24px 64px; }
.hw-student-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.hw-student-hero .eyebrow { margin-bottom: 6px; color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.hw-student-hero h1 { font-size: 28px; line-height: 1.3; }
.hw-student-hero p { margin-top: 7px; color: var(--text-2); font-size: 13px; }
.hw-task-tabs { display: flex; gap: 6px; width: max-content; max-width: 100%; margin-bottom: 18px; padding: 5px; border: 1px solid #E0E5EC; border-radius: 12px; background: #F5F7FA; }
.hw-task-tabs button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 8px; color: #5E6976; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }
.hw-task-tabs button.active { color: var(--primary); background: #fff; box-shadow: 0 3px 10px rgba(20,34,52,.09); }
.hw-task-list { display: grid; gap: 12px; }
.hw-task-card { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid #E0E5EC; border-radius: 15px; background: #fff; box-shadow: var(--ui-shadow-soft); }
.hw-task-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: #EEF0FB; font-size: 21px; }
.hw-task-card h3 { font-size: 15px; }
.hw-task-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; color: var(--text-weak); font-size: 11px; }
.hw-task-score { margin-top: 6px; color: var(--success); font-size: 13px; font-weight: 700; }
.hw-login-card { width: min(520px,100%); margin: 80px auto; padding: 32px; border: 1px solid #E1E5EB; border-radius: 18px; background: #fff; box-shadow: 0 18px 48px rgba(20,34,52,.1); text-align: center; }
.hw-login-card img { width: 58px; height: 58px; }
.hw-login-card h1 { margin-top: 16px; font-size: 24px; }
.hw-login-card p { margin: 10px 0 20px; color: var(--text-2); font-size: 13px; line-height: 1.8; }
.hw-paper { display: none; }
.hw-paper.on { display: block; }
.hw-question-card { margin-bottom: 12px; padding: 18px; border: 1px solid #E0E5EC; border-radius: 14px; background: #fff; box-shadow: var(--ui-shadow-soft); }
.hw-question-no { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--primary); font-size: 11px; font-weight: 700; }
.hw-question-stem { color: var(--text); font-size: 14px; line-height: 1.85; white-space: pre-wrap; }
.hw-options { display: grid; gap: 8px; margin-top: 14px; }
.hw-option { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #E3E7ED; border-radius: 10px; color: var(--text-2); cursor: pointer; font-size: 13px; }
.hw-option:has(input:checked) { color: var(--primary); border-color: rgba(91,103,211,.5); background: #F1F2FC; }
.hw-answer-area { width: 100%; min-height: 108px; margin-top: 14px; padding: 12px; border: 1px solid #DDE2EA; border-radius: 10px; color: var(--text); background: #fff; resize: vertical; }
.hw-paper-actions { position: sticky; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding: 12px 14px; border: 1px solid #E0E5EC; border-radius: 13px; background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(20,34,52,.12); backdrop-filter: blur(8px); }
.hw-photo-drop { margin-top: 16px; padding: 24px; border: 1px dashed rgba(91,103,211,.45); border-radius: 13px; background: #F7F8FD; text-align: center; }
.hw-photo-drop input { max-width: 100%; }

/* 家长端与 Android App 扫描收件箱：视觉复用上课中心 token，业务独立。 */
.hw-family-strip { display: flex; gap: 10px; margin-bottom: 18px; overflow-x: auto; padding: 2px 1px 8px; }
.hw-child-chip { min-width: 168px; padding: 12px 14px; border: 1px solid #DDE3EB; border-radius: 12px; background: #fff; color: var(--text-2); text-align: left; cursor: pointer; box-shadow: var(--ui-shadow-soft); }
.hw-child-chip span { display: block; color: var(--text); font-size: 14px; font-weight: 700; }
.hw-child-chip small { display: block; margin-top: 4px; color: var(--text-weak); font-size: 10px; }
.hw-child-chip.active { border-color: rgba(91,103,211,.58); background: #F0F2FC; box-shadow: inset 0 0 0 1px rgba(91,103,211,.1); }
.hw-capture-card { margin-top: 14px; }
.hw-upload-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.hw-bridge-panel { margin-top: 14px; padding: 14px; border: 1px solid #DDE3EB; border-radius: 12px; background: #F7F9FC; }
.hw-bridge-panel p { margin-top: 10px; color: var(--text-weak); font-size: 11px; line-height: 1.7; }
.hw-upload-queue { display: grid; gap: 8px; margin-top: 14px; }
.hw-upload-row { display: grid; grid-template-columns: 58px minmax(120px,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #E2E7EE; border-radius: 10px; background: #fff; }
.hw-upload-row span { color: var(--primary); font-size: 11px; font-weight: 700; }
.hw-upload-row strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.hw-upload-row small { color: var(--text-weak); font-size: 10px; }
.hw-scan-queue { display: grid; gap: 8px; margin-top: 12px; }
.hw-scan-row { display: grid; grid-template-columns: 34px minmax(160px,1fr) minmax(180px,.8fr) 100px; align-items: center; gap: 10px; padding: 10px; border: 1px solid #E0E5EC; border-radius: 10px; background: #fff; }
.hw-scan-row .input { min-height: 34px; padding: 6px 9px; font-size: 11px; }
.hw-scan-state { color: var(--text-weak); font-size: 10px; }
.hw-scanner-connector { margin-top: 14px; padding: 14px; border: 1px solid #DDE3EB; border-radius: 14px; background: linear-gradient(180deg,#FAFBFE 0%,#F5F7FB 100%); }
.hw-scanner-steps { display: flex; align-items: center; gap: 8px; overflow-x: auto; color: var(--text-weak); font-size: 10px; font-weight: 650; white-space: nowrap; }
.hw-scanner-steps span { display: inline-flex; align-items: center; gap: 6px; }
.hw-scanner-steps span b { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #E8EBF1; color: #667085; font-size: 10px; }
.hw-scanner-steps span.active { color: var(--primary); }
.hw-scanner-steps span.active b { color: #fff; background: var(--primary); box-shadow: 0 4px 12px rgba(91,103,211,.22); }
.hw-scanner-steps i { color: #B6BEC9; font-style: normal; font-size: 18px; }
.hw-scanner-policy { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px 12px; border: 1px solid #DCE5F3; border-radius: 10px; color: #526173; background: #F3F7FD; font-size: 11px; line-height: 1.6; }
.hw-scanner-policy strong { flex: 0 0 auto; color: #355A8A; }
.hw-scanner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hw-scanner-section { display: grid; gap: 8px; margin-top: 14px; }
.hw-scanner-section h4 { margin: 0; color: var(--text); font-size: 12px; }
.hw-scanner-device { display: grid; grid-template-columns: 38px minmax(180px,1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid #DFE4EC; border-radius: 11px; background: #fff; }
.hw-scanner-device.connected { border-color: rgba(55,147,115,.35); background: #FBFEFD; }
.hw-scanner-device-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--primary); background: #EFF1FC; font-size: 16px; font-weight: 800; }
.hw-scanner-device.connected .hw-scanner-device-icon { color: #2D7D63; background: #E8F6F0; }
.hw-scanner-device strong { display: block; color: var(--text); font-size: 12px; }
.hw-scanner-device p { margin: 3px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.4; }
.hw-scanner-device small { color: var(--text-weak); font-size: 9px; }
.hw-scanner-guide { grid-column: 2/-1; padding: 9px 10px; border-radius: 9px; background: #F4F7FA; }
.hw-scanner-guide b { display: block; color: var(--text-2); font-size: 10px; }
.hw-scanner-guide code { display: block; overflow: hidden; margin-top: 4px; color: var(--primary); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hw-scanner-guide ol { margin: 7px 0 0 17px; padding: 0; color: var(--text-weak); font-size: 10px; line-height: 1.65; }
.hw-scanner-empty { margin-top: 12px; padding: 13px; border: 1px dashed #CFD6E0; border-radius: 10px; color: var(--text-weak); background: rgba(255,255,255,.65); font-size: 11px; text-align: center; }
.hw-app-scanner-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hw-app-scanner-head strong { color:var(--text); font-size:12px; }
.hw-app-scanner-head p { margin:4px 0 0; color:var(--text-weak); font-size:10px; }
.hw-app-scanner-endpoint, .hw-pad-inbox-endpoint { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:12px; padding:12px; border:1px solid #C8D7F0; border-radius:11px; background:#F3F7FD; color:#526173; font-size:10px; }
.hw-app-scanner-endpoint code, .hw-pad-inbox-endpoint code { padding:5px 8px; border-radius:6px; background:#fff; color:var(--primary); font-weight:700; }
.hw-app-scanner-endpoint small { flex-basis:100%; color:var(--text-weak); }
.hw-scanner-manual, .hw-scanner-catalog { margin-top: 12px; border-top: 1px solid #E1E5EC; color: var(--text-2); font-size: 11px; }
.hw-scanner-manual summary, .hw-scanner-catalog summary { padding: 11px 2px 5px; color: var(--primary); cursor: pointer; font-weight: 650; }
.hw-scanner-manual .hw-form-grid { margin-top: 8px; }
.hw-scanner-catalog > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.hw-scanner-catalog span { padding: 9px; border: 1px solid #E1E5EC; border-radius: 9px; background: #fff; }
.hw-scanner-catalog strong, .hw-scanner-catalog small { display: block; }
.hw-scanner-catalog strong { color: var(--text); font-size: 10px; }
.hw-scanner-catalog small { margin-top: 3px; color: var(--text-weak); font-size: 9px; }

/* 学校扫描工作站：安卓横屏公共 PAD，业务与教师工作台解耦。 */
body.hw-scanner-pad { min-width: 900px; min-height: 600px; overflow: hidden; color: var(--text); background: #F3F5F9; }
.hw-pad-shell { width: 100vw; height: 100vh; display: flex; flex-direction: column; }
.hw-pad-loading, .hw-pad-fatal { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 18px; background: radial-gradient(circle at 50% 10%,rgba(91,103,211,.12),transparent 38%),#F7F8FC; }
.hw-pad-loading img, .hw-pad-fatal img { width: 68px; height: 68px; object-fit: contain; }
.hw-pad-fatal h1 { margin: 0; font-size: 26px; }
.hw-pad-fatal p { max-width: 560px; margin: 0; color: var(--text-2); text-align: center; }
.hw-pad-header { min-height: 76px; display: flex; align-items: center; gap: 20px; padding: 0 28px; border-bottom: 1px solid #E2E6ED; background: rgba(255,255,255,.96); box-shadow: 0 2px 16px rgba(25,38,58,.04); }
.hw-pad-brand { display: flex; align-items: center; gap: 11px; }
.hw-pad-brand img { width: 40px; height: 40px; object-fit: contain; }
.hw-pad-brand strong, .hw-pad-brand span, .hw-pad-station b, .hw-pad-station span { display: block; }
.hw-pad-brand strong { color: var(--primary); font-size: 17px; letter-spacing: .02em; }
.hw-pad-brand span { margin-top: 2px; color: var(--text-weak); font-size: 10px; }
.hw-pad-station { min-width: 180px; margin-left: auto; padding-left: 20px; border-left: 1px solid #E4E7EC; text-align: right; }
.hw-pad-station b { font-size: 13px; }
.hw-pad-station span { margin-top: 3px; color: var(--text-weak); font-size: 10px; }
.hw-pad-security { padding: 7px 11px; border-radius: 999px; color: #2D7D63; background: #E9F7F1; font-size: 10px; font-weight: 700; }
.hw-pad-auth-stage { flex: 1; display: grid; grid-template-columns: minmax(420px,1.25fr) minmax(320px,.75fr); align-items: center; gap: 64px; width: min(1100px,calc(100% - 80px)); margin: 0 auto; padding: 38px 0; }
.hw-pad-eyebrow, .hw-pad-page-title > div > span { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.hw-pad-auth-copy h1 { max-width: 620px; margin: 14px 0 12px; font-size: clamp(30px,4vw,48px); line-height: 1.2; letter-spacing: -.03em; }
.hw-pad-auth-copy > p { max-width: 650px; margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.9; }
.hw-pad-auth-points { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.hw-pad-auth-points span { display: inline-flex; align-items: center; gap: 7px; color: #526173; font-size: 12px; font-weight: 650; }
.hw-pad-auth-points span b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 10px; }
.hw-pad-auth-points i { color: #AAB2BD; font-style: normal; font-size: 22px; }
.hw-pad-device-code { width: max-content; margin-top: 26px; padding: 10px 14px; border: 1px solid #DDE2EA; border-radius: 10px; color: var(--text-weak); background: #fff; font-size: 11px; }
.hw-pad-device-code strong { margin-left: 8px; color: var(--text); font-size: 16px; letter-spacing: .14em; }
.hw-pad-auth-copy > .btn { margin-top: 14px; }
.hw-pad-qr-card { justify-self: center; width: 330px; padding: 24px; border: 1px solid rgba(223,227,235,.9); border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(28,40,58,.13); text-align: center; }
.hw-pad-qr { width: 264px; height: 264px; display: grid; place-items: center; margin: 0 auto 16px; padding: 8px; border-radius: 14px; background: #fff; }
.hw-pad-qr svg { width: 100%; height: 100%; }
.hw-pad-qr-card > strong, .hw-pad-qr-card > span { display: block; }
.hw-pad-qr-card > strong { font-size: 16px; }
.hw-pad-qr-card > span { margin: 5px 0 13px; color: var(--text-weak); font-size: 10px; }
.hw-pad-workspace { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 20px 26px 18px; overflow: hidden; }
.hw-pad-page-title { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 16px; }
.hw-pad-page-title h1 { margin: 5px 0 0; font-size: 23px; }
.hw-pad-page-title p { margin: 4px 0 0; color: var(--text-weak); font-size: 11px; }
.hw-pad-session-badge, .hw-pad-bound-scanner { margin-left: auto; padding: 10px 14px; border: 1px solid #DDE3EB; border-radius: 11px; background: #fff; color: var(--primary); font-size: 11px; font-weight: 700; }
.hw-pad-bound-scanner span, .hw-pad-bound-scanner strong { display: block; }
.hw-pad-bound-scanner span { color: var(--text-weak); font-size: 9px; }
.hw-pad-bound-scanner strong { margin-top: 3px; color: var(--text); }
.hw-pad-setup { overflow-y: auto; }
.hw-pad-setup-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding-bottom: 78px; }
.hw-pad-panel, .hw-pad-assignment-panel, .hw-pad-pages-panel { border: 1px solid #E0E4EB; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(24,37,55,.04); }
.hw-pad-panel { display: grid; align-content: start; gap: 12px; padding: 17px; }
.hw-pad-panel.full { grid-column: 1/-1; }
.hw-pad-panel-head { min-height: 38px; display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #EDF0F4; }
.hw-pad-panel-head b { font-size: 13px; }
.hw-pad-panel-head > span { margin-left: auto; color: var(--text-weak); font-size: 9px; }
.hw-pad-panel > label { display: grid; gap: 5px; color: var(--text-2); font-size: 10px; font-weight: 650; }
.hw-pad-device-note { padding: 9px 10px; border-radius: 8px; color: var(--text-weak); background: #F5F7FA; font-size: 9px; }
.hw-pad-panel > p { margin: 0; color: var(--text-weak); font-size: 10px; line-height: 1.65; }
.hw-pad-inline-actions { display: flex; align-items: center; gap: 8px; }
.hw-pad-manual-row { display: grid; grid-template-columns: minmax(140px,1fr) minmax(140px,1fr) auto; gap: 8px; }
.hw-pad-scanner-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.hw-pad-scanner-card { min-height: 66px; display: grid; grid-template-columns: auto 40px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #DDE3EB; border-radius: 11px; background: #fff; cursor: pointer; }
.hw-pad-scanner-card:has(input:checked), .hw-pad-scanner-card.selected { border-color: rgba(91,103,211,.5); background: #F4F5FD; }
.hw-pad-scanner-card.muted { grid-template-columns: 40px minmax(0,1fr) auto; cursor: default; }
.hw-pad-scanner-card input { accent-color: var(--primary); }
.hw-pad-scanner-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: #EEF0FB; font-size: 15px; font-weight: 800; }
.hw-pad-scanner-card strong, .hw-pad-scanner-card small { display: block; }
.hw-pad-scanner-card strong { font-size: 11px; }
.hw-pad-scanner-card small { margin-top: 3px; color: var(--text-weak); font-size: 9px; }
.hw-pad-scanner-card em { color: var(--text-weak); font-size: 9px; font-style: normal; }
.hw-pad-actionbar { position: absolute; right: 26px; bottom: 18px; left: 26px; z-index: 4; min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border: 1px solid #DCE1E9; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 14px 40px rgba(24,37,55,.13); backdrop-filter: blur(10px); }
.hw-pad-actionbar span { color: var(--text-2); font-size: 11px; }
.hw-pad-actionbar .btn { margin-left: auto; }
.hw-pad-operator { display: flex; align-items: center; gap: 10px; padding-left: 18px; border-left: 1px solid #E3E7ED; }
.hw-pad-operator span, .hw-pad-operator em { color: var(--text-weak); font-size: 9px; font-style: normal; }
.hw-pad-operator b { font-size: 12px; }
.hw-pad-operation-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 14px; padding-bottom: 74px; }
.hw-pad-assignment-panel, .hw-pad-pages-panel { min-height: 0; display: flex; flex-direction: column; padding: 14px; overflow: hidden; }
.hw-pad-assignment-list, .hw-pad-page-list { min-height: 0; display: grid; align-content: start; gap: 8px; overflow-y: auto; padding: 10px 2px 2px; }
.hw-pad-assignment { width: 100%; display: grid; gap: 4px; padding: 12px; border: 1px solid #E0E5EC; border-radius: 10px; color: var(--text); background: #fff; text-align: left; cursor: pointer; }
.hw-pad-assignment:hover, .hw-pad-assignment.active { border-color: rgba(91,103,211,.5); background: #F1F3FC; }
.hw-pad-assignment span { width: max-content; padding: 2px 6px; border-radius: 999px; color: var(--primary); background: #E8EBFA; font-size: 8px; font-weight: 700; }
.hw-pad-assignment strong { font-size: 11px; line-height: 1.45; }
.hw-pad-assignment small { color: var(--text-weak); font-size: 9px; }
.hw-pad-scan-options { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.hw-pad-scan-options .input { width: auto; min-height: 34px; padding: 6px 8px; font-size: 9px; }
.hw-pad-page-row { display: grid; grid-template-columns: 70px minmax(130px,1fr) minmax(180px,.8fr) auto; align-items: center; gap: 11px; padding: 9px; border: 1px solid #E1E5EB; border-radius: 11px; background: #fff; }
.hw-pad-page-row.mapped { border-color: rgba(55,147,115,.38); background: #FBFEFC; }
.hw-pad-page-row img { width: 66px; height: 52px; object-fit: cover; border: 1px solid #E2E6EC; border-radius: 7px; background: #F1F3F6; }
.hw-pad-page-row > div span, .hw-pad-page-row > div strong, .hw-pad-page-row > div small { display: block; }
.hw-pad-page-row > div span { color: var(--primary); font-size: 8px; font-weight: 700; }
.hw-pad-page-row > div strong { margin-top: 2px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hw-pad-page-row > div small { margin-top: 2px; color: var(--text-weak); font-size: 8px; }
.hw-pad-page-row > label { color: var(--text-weak); font-size: 8px; }
.hw-pad-page-row .input { min-height: 34px; margin-top: 3px; padding: 6px 8px; font-size: 10px; }
.hw-pad-empty { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 170px; padding: 24px; color: var(--text-weak); text-align: center; font-size: 11px; }
.hw-pad-empty.compact { min-height: 70px; }
.hw-pad-empty > span { font-size: 30px; color: #A8B0BC; }
.hw-pad-empty > strong { color: var(--text-2); font-size: 12px; }
.hw-pad-empty > p { margin: 0; }
.hw-pad-complete { flex: 1; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.hw-pad-complete-icon { width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #379373; box-shadow: 0 16px 35px rgba(55,147,115,.24); font-size: 38px; }
.hw-pad-complete h1 { margin: 8px 0 0; font-size: 30px; }
.hw-pad-complete p { max-width: 620px; margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.hw-pad-complete-actions { display: flex; gap: 9px; margin-top: 8px; }
.hw-pad-complete > span { color: var(--text-weak); font-size: 10px; }
.hw-pad-toast { position: fixed; top: 92px; left: 50%; z-index: 999; max-width: 600px; padding: 11px 16px; transform: translate(-50%,-15px); border-radius: 10px; color: #fff; background: #344054; box-shadow: 0 10px 30px rgba(20,34,52,.18); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 11px; }
.hw-pad-toast.on { transform: translate(-50%,0); opacity: 1; }
.hw-pad-toast.success { background: #28765D; }
.hw-pad-toast.error { background: #B42318; }
.hw-pad-toast.warning { background: #A15C07; }

/* 手机扫码确认页 */
body.hw-scanner-auth-page { min-height: 100vh; overflow: auto; background: radial-gradient(circle at 50% 0,rgba(91,103,211,.13),transparent 34%),#F5F7FA; }
.hw-scanner-auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.hw-scanner-auth-card { width: min(440px,100%); display: grid; place-items: center; gap: 12px; padding: 30px 24px; border: 1px solid #E0E4EB; border-radius: 20px; background: #fff; box-shadow: 0 20px 60px rgba(20,34,52,.12); text-align: center; }
.hw-scanner-auth-card > img { width: 54px; height: 54px; object-fit: contain; }
.hw-scanner-auth-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-top: 4px; border-radius: 50%; color: var(--primary); background: #EEF0FB; font-size: 26px; font-weight: 800; }
.hw-scanner-auth-icon.success { color: #fff; background: #379373; }
.hw-scanner-auth-icon.danger { color: #fff; background: #D92D20; }
.hw-scanner-auth-kicker { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.hw-scanner-auth-card h1 { margin: 0; font-size: 22px; }
.hw-scanner-auth-card > p { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.75; }
.hw-scanner-auth-meta { width: 100%; display: grid; gap: 7px; margin: 4px 0; padding: 12px; border-radius: 11px; background: #F5F7FA; text-align: left; }
.hw-scanner-auth-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hw-scanner-auth-meta span { color: var(--text-weak); font-size: 10px; }
.hw-scanner-auth-meta strong { font-size: 11px; text-align: right; }
.hw-scanner-auth-confirm { width: 100%; min-height: 44px; justify-content: center; margin-top: 5px; }
.hw-scanner-auth-safe { width: 100%; padding: 10px; border-radius: 9px; color: #2D7D63; background: #EAF7F2; font-size: 10px; }
.hw-scanner-auth-error { width: 100%; padding: 9px; border-radius: 8px; color: #B42318; background: #FFF1EF; font-size: 10px; }

@media (max-width: 1120px) {
  .hw-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hw-grid { grid-template-columns: 1fr; }
  .hw-list-row { grid-template-columns: minmax(240px,1fr) 120px 90px; }
  .hw-list-row > :nth-child(2), .hw-list-row > :nth-child(4) { display: none; }
}
@media (max-width: 760px) {
  body.hw-app { overflow: auto; }
  .hw-shell { height: auto; min-height: 100vh; }
  .hw-sidebar { display: none; }
  .hw-topbar { height: 60px; padding: 0 16px; }
  .hw-topbar .hw-context { display: none; }
  .hw-content { overflow: visible; padding: 22px 16px 40px; }
  .hw-heading { align-items: flex-start; flex-direction: column; }
  .hw-heading h2 { font-size: 22px; }
  .hw-actions { width: 100%; }
  .hw-actions .btn { flex: 1; justify-content: center; }
  .hw-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hw-stat { min-height: 104px; padding: 15px; }
  .hw-stat .value { font-size: 26px; }
  .hw-list-row { grid-template-columns: 1fr auto; gap: 10px; }
  .hw-list-row > :not(:first-child):not(:last-child) { display: none; }
  .hw-dialog-backdrop { align-items: flex-end; padding: 0; }
  .hw-dialog { max-height: 94vh; border-radius: 16px 16px 0 0; }
  .hw-form-grid { grid-template-columns: 1fr; }
  .hw-form-field.full { grid-column: auto; }
  .hw-student-topbar-inner { min-height: 60px; padding: 0 16px; }
  .hw-student-sub { display: none; }
  .hw-student-container { padding: 26px 16px 48px; }
  .hw-student-hero { align-items: flex-start; flex-direction: column; }
  .hw-student-hero h1 { font-size: 24px; }
  .hw-task-card { grid-template-columns: 46px 1fr; padding: 15px; }
  .hw-task-icon { width: 44px; height: 44px; }
  .hw-task-card > .btn { grid-column: 1/-1; justify-content: center; }
  .hw-review-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hw-review-row, .hw-review-controls { grid-template-columns: 1fr; }
  .hw-photo-toolbar .hw-spacer { display: none; }
  .hw-photo-toolbar > .btn { flex: 1 1 145px; }
  .hw-upload-row, .hw-scan-row, .hw-scanner-device { grid-template-columns: 1fr; }
  .hw-scanner-device-icon { display: none; }
  .hw-scanner-guide { grid-column: auto; }
  .hw-scanner-catalog > div { grid-template-columns: 1fr; }
}