:root {
  --ink:#1f2733; --muted:#66748c; --paper:#eef2f8; --panel:#fff; --line:#dbe3ef; --line-soft:#eaeff6;
  --brand:#1c5fd0; --brand-dark:#164fae; --brand-soft:#e9f1fd; --brand-ink:#123a86;
  --green:#1a8a4f; --green-soft:#e5f5ec; --amber:#b7791f; --amber-soft:#fdf3df; --red:#d23b30; --red-soft:#fdecea;
  --radius:10px; --radius-sm:6px; --shadow:0 6px 20px rgba(23,45,86,.07);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font:14px/1.5 "Segoe UI",Inter,"Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.5; }
h1,h2,h3,p,dl,dd,ol { margin:0; } h1 { font-size:22px; line-height:1.2; } h2 { font-size:16px; line-height:1.3; } h3 { font-size:14px; }
small { display:block; color:var(--muted); }

/* ---------- unlock ---------- */
.unlock { display:grid; min-height:100vh; place-items:center; padding:20px; background:linear-gradient(160deg,#dce8fa,#eef2f8 60%); }
.unlock-form { width:min(380px,100%); display:grid; gap:16px; padding:32px 30px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 18px 46px rgba(20,45,90,.14); }
.unlock-form .eyebrow { color:var(--brand); }

/* ---------- shell ---------- */
.app-shell { min-height:100vh; display:grid; grid-template-columns:220px minmax(0,1fr); }
.sidebar { display:flex; flex-direction:column; min-height:100vh; padding:20px 14px 16px; background:#0f2f66; color:#cfe0fb; }
.brand { display:flex; align-items:center; gap:10px; padding:2px 8px 22px; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border-radius:8px; background:#fff; color:var(--brand); font-weight:800; font-size:18px; }
.brand strong,.brand small { display:block; } .brand strong { font-size:15px; color:#fff; } .brand small { font-size:12px; color:#9fc0f2; }
.nav { display:grid; gap:3px; }
.nav-item { min-height:40px; padding:9px 12px; border:0; border-radius:7px; background:transparent; color:#c2d6f5; text-align:left; font-weight:600; }
.nav-item:hover { background:rgba(255,255,255,.09); color:#fff; }
.nav-item.active { background:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(10,40,100,.4); }
.sidebar-foot { margin-top:auto; padding:12px 6px 0; }
.text-button { padding:4px; border:0; background:transparent; color:var(--brand); font-weight:700; }
.sidebar .text-button { color:#a9c6f2; }

.workspace { width:min(1440px,100%); margin:0 auto; padding:22px 30px 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:16px; }
.topbar h1 { font-size:22px; }
.eyebrow { margin:0 0 3px; color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.9px; }
.topbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* student / batch info strip */
.student-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; padding:11px 16px; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.student-bar .who { font-weight:800; color:var(--brand-ink); }
.student-bar .meta { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.student-bar .meta b { color:var(--ink); font-weight:700; }

/* ---------- buttons / chips ---------- */
.button { min-height:38px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink); font-weight:700; transition:.12s; }
.button:hover { border-color:#b9c8de; }
.button.primary { border-color:transparent; background:var(--brand); color:#fff; }
.button.primary:hover { background:var(--brand-dark); }
.button.quiet { background:#f5f8fc; }
.button.danger { border-color:#f2cbc7; background:#fff7f6; color:var(--red); }
.button.danger:hover { background:#fdecea; }
.align-end { margin-left:auto; }
.session-chip,.tag { display:inline-flex; align-items:center; min-height:24px; padding:2px 9px; border-radius:999px; background:#eef2f8; color:#5a6981; font-size:12px; font-weight:800; }
.session-chip.good,.tag.good,.tag.success { background:var(--green-soft); color:#136b3c; }
.session-chip.bad,.tag.bad,.tag.danger { background:var(--red-soft); color:#b02c22; }
.session-chip.warn,.tag.warn { background:var(--amber-soft); color:#8a5a00; }
.tag.muted { background:#eef2f8; color:#5a6981; }
.tag.brand { background:var(--brand-soft); color:var(--brand-ink); }
.danger-text { color:var(--red); }

/* ---------- views / toolbar ---------- */
.view { display:none; }
.view.active { display:block; }
.session-alert { margin:0 0 16px; padding:11px 14px; border-left:4px solid var(--red); border-radius:var(--radius-sm); background:var(--red-soft); color:#8d251c; font-weight:600; }
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.toolbar-between { justify-content:space-between; }
.control-label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:700; }
.control-label.grow { flex:1 1 260px; }
.section-meta { color:var(--muted); font-size:13px; }
.hint { padding:9px 11px; border-left:3px solid var(--brand); background:var(--brand-soft); color:var(--brand-ink); border-radius:var(--radius-sm); }
.course-list,.plan-list,.account-list,.events { display:grid; gap:12px; }

/* ---------- category tabs ---------- */
.course-type-tabs { display:flex; gap:4px; margin:0 0 14px; padding:4px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.course-type-tab { flex:none; min-height:38px; padding:8px 16px; border:0; border-radius:7px; background:transparent; color:#54627a; font-weight:700; white-space:nowrap; }
.course-type-tab:hover { background:#f1f5fb; color:var(--brand); }
.course-type-tab.active { background:var(--brand); color:#fff; }
.course-type-control { display:none; }

/* ---------- course group (official style) ---------- */
.course-group { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.course-group.has-selected { border-color:#a9caf5; box-shadow:0 6px 20px rgba(28,95,208,.12); }
.course-group-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; background:linear-gradient(90deg,#f2f7fe,#f7fafe); border-bottom:1px solid var(--line-soft); }
.course-group-title { min-width:0; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.course-group-title h2 { font-size:15px; color:var(--brand-ink); }
.course-group-meta { color:#5a6981; font-size:12px; }
.course-group-head>strong { flex:none; color:var(--muted); font-size:12px; font-weight:700; }
.class-table-head,.class-row { display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(250px,2.1fr) minmax(120px,.8fr) minmax(96px,.7fr) minmax(128px,.8fr); align-items:center; }
.class-table-head { min-height:36px; color:var(--muted); font-size:12px; font-weight:700; background:#f7f9fc; border-bottom:1px solid var(--line); }
.class-table-head span,.class-row>div { min-width:0; padding:9px 14px; }
.class-row { min-height:56px; border-bottom:1px solid var(--line-soft); }
.class-row:last-child { border-bottom:0; }
.class-row:hover { background:#f8fbff; }
.class-row.selected { background:var(--brand-soft); }
.class-row small { margin-top:2px; }
.class-teacher strong { font-weight:700; }
.class-teacher .tag { margin-left:6px; }
.class-time span { display:block; overflow-wrap:anywhere; color:#3a475a; }
.class-time em { display:block; margin-top:2px; color:var(--red); font-size:11px; font-style:normal; font-weight:600; }
.class-capacity strong { color:var(--brand); font-size:14px; }
.class-capacity small { color:var(--muted); }
.class-textbook-cell .checkbox { display:inline-flex; align-items:center; gap:5px; font-size:13px; }
.class-textbook { color:var(--muted); font-size:12px; }
.class-operation { display:flex; align-items:center; gap:7px; justify-content:flex-end; }
.class-operation .button { min-height:32px; padding:6px 14px; }

/* ---------- generic rows (my courses / plan / account) ---------- */
.course-row,.plan-group,.account-row { display:grid; gap:16px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.course-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.selected-course-row { border-left:4px solid var(--green); }
.course-heading,.plan-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.course-heading h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-tags { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.course-code,.subtle { margin-top:5px; color:var(--muted); font-size:12px; }
.course-details { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:14px; }
.course-details div { min-width:0; }
.course-details dt { color:var(--muted); font-size:11px; }
.course-details dd { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; margin-top:2px; }
.course-actions { display:flex; min-width:136px; flex-direction:column; align-items:stretch; justify-content:center; gap:9px; }
.textbook-choice { justify-content:center; color:var(--muted); font-weight:700; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin:26px 0 12px; padding-bottom:10px; border-bottom:2px solid var(--brand-soft); }
.plan-heading { align-items:flex-start; }
.plan-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.alternatives { display:grid; gap:8px; padding:0; margin:0; list-style:none; }
.alternatives li { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line-soft); }
.priority { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); font-size:12px; font-weight:800; }
.priority-actions { display:flex; gap:9px; }
.conflict { margin-top:9px; padding:7px 10px; border-radius:var(--radius-sm); background:var(--red-soft); color:#a62f25; font-weight:600; }
.account-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.account-copy p { margin-top:5px; color:var(--muted); }
.account-controls { display:grid; gap:10px; justify-items:end; }
.account-run { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; justify-content:flex-end; padding-bottom:8px; border-bottom:1px solid var(--line-soft); }
.account-time { display:grid; gap:4px; color:var(--muted); font-size:12px; font-weight:700; text-align:left; }
.account-time input { min-height:34px; }
.account-time small { color:var(--muted); font-weight:600; }
.account-run .button { min-height:40px; }
.account-actions { display:grid; grid-template-columns:repeat(3,minmax(94px,1fr)); gap:8px; width:360px; max-width:100%; }
.account-actions .button { min-height:34px; padding:7px 10px; }

/* ---------- events / results ---------- */
.event { display:grid; grid-template-columns:150px 62px minmax(0,1fr); gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); color:#42505f; }
.event time { color:var(--muted); font-size:12px; }
.event b { color:var(--brand); font-size:12px; }
.event.error b { color:var(--red); } .event.success b { color:var(--green); } .event.retry b,.event.warn b { color:var(--amber); }
.empty { padding:46px 12px; color:var(--muted); text-align:center; background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius); }

/* ---------- timetable ---------- */
.timetable-wrap { width:100%; overflow-x:auto; padding-bottom:8px; }
.timetable-grid { display:grid; grid-template-columns:58px repeat(7,minmax(120px,1fr)); grid-template-rows:44px repeat(var(--period-count),56px); min-width:940px; border-top:1px solid var(--line); border-left:1px solid var(--line); background:var(--panel); border-radius:var(--radius); overflow:hidden; }
.timetable-corner,.timetable-head,.timetable-period,.timetable-cell { border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.timetable-corner { grid-column:1; grid-row:1; display:grid; place-items:center; color:var(--muted); font-size:12px; font-weight:700; background:#f7f9fc; }
.timetable-head { display:grid; place-items:center; color:var(--brand-ink); font-size:13px; font-weight:800; background:#eef4fd; }
.timetable-period { display:grid; place-items:center; align-content:center; color:var(--muted); background:#f7f9fc; }
.timetable-period strong { color:#2a3a52; font-size:14px; } .timetable-period small { font-size:10px; }
.timetable-slot { z-index:1; min-width:0; margin:3px; display:grid; gap:3px; }
.timetable-course { min-height:100%; padding:6px 7px; border-left:3px solid var(--brand); border-radius:5px; background:var(--brand-soft); color:var(--brand-ink); overflow:hidden; }
.timetable-course strong,.timetable-course span,.timetable-course small { display:block; overflow:hidden; text-overflow:ellipsis; }
.timetable-course strong { font-size:12px; white-space:normal; }
.timetable-course span { font-size:11px; white-space:nowrap; color:#2f57a6; }
.timetable-course small { margin-top:2px; font-size:9px; white-space:nowrap; }
.unscheduled-list { display:flex; flex-wrap:wrap; gap:7px; }

/* ---------- dialogs ---------- */
.dialog { width:min(460px,calc(100% - 28px)); padding:0; border:0; border-radius:12px; color:var(--ink); box-shadow:0 24px 70px rgba(15,30,60,.28); }
.dialog.narrow { width:min(430px,calc(100% - 28px)); }
.dialog::backdrop { background:rgba(15,30,55,.5); }
.dialog { max-height:calc(100dvh - 24px); overflow:auto; }
.form-grid { display:grid; gap:14px; padding:22px; }
.dialog-heading { position:sticky; top:-22px; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:6px 0; background:#fff; }
.dialog-heading h2 { color:var(--brand-ink); }
.icon-button { display:grid; width:32px; height:32px; place-items:center; border:0; border-radius:6px; background:#f2f5f9; color:var(--muted); font-size:22px; line-height:1; }
.icon-button:hover { background:#e7edf5; color:var(--ink); }
label { display:grid; gap:6px; color:#3a4757; font-weight:700; }
input,select { width:100%; min-height:38px; padding:8px 11px; border:1px solid #cbd6e5; border-radius:var(--radius-sm); background:#fff; color:var(--ink); outline:none; }
input:focus,select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(28,95,208,.14); }
.checkbox { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.checkbox input { width:auto; min-height:auto; }
.dialog-actions { display:flex; align-items:center; gap:8px; justify-content:flex-end; padding-top:4px; }
.captcha-fields { display:grid; gap:14px; }
.captcha-row { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.captcha-row img { width:158px; height:52px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#f7f7f7; object-fit:contain; }
.captcha-image-button { padding:0; border:0; border-radius:var(--radius-sm); background:transparent; }
.captcha-image-button img { display:block; }
.form-divider { display:grid; gap:3px; margin-top:6px; padding-top:16px; border-top:1px solid var(--line); }
.form-divider strong { color:var(--brand-ink); }

/* ---------- notices / help ---------- */
.notice { padding:13px 15px; border-left:4px solid var(--amber); border-radius:var(--radius-sm); background:var(--amber-soft); color:#6f4a00; }
.danger-notice { border-left-color:var(--red); background:var(--red-soft); color:#85261f; }
.help-view { max-width:900px; }
.help-view.active { display:grid; gap:18px; }
.help-section { padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.help-section h2 { margin-bottom:9px; color:var(--brand-ink); }
.help-section p { color:#465264; }
.help-section ol { display:grid; gap:8px; padding-left:22px; color:#465264; }

/* ---------- toast ---------- */
.toast { position:fixed; right:22px; bottom:22px; z-index:20; max-width:min(420px,calc(100vw - 40px)); padding:12px 16px; border-radius:8px; background:#16233a; color:#fff; opacity:0; pointer-events:none; transform:translateY(10px); transition:.18s; box-shadow:0 10px 30px rgba(10,25,50,.3); }
.toast.show { opacity:1; transform:translateY(0); }

/* ---------- responsive ---------- */
@media (max-width:900px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:sticky; top:0; z-index:5; min-height:0; flex-direction:row; align-items:center; gap:8px; padding:8px 10px; overflow-x:auto; }
  .brand { display:none; }
  .nav { display:flex; min-width:max-content; gap:4px; }
  .nav-item { min-width:82px; padding:8px 10px; text-align:center; font-size:12px; }
  .sidebar-foot { display:none; }
  .workspace { padding:16px 12px 32px; }
  .course-details { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .course-row,.account-row { grid-template-columns:1fr; }
  .account-actions { justify-content:flex-start; max-width:none; }
  .event { grid-template-columns:1fr; gap:3px; }
}
@media (max-width:700px) {
  .course-group-head { align-items:flex-start; flex-direction:column; gap:6px; }
  .class-table-head { display:none; }
  .class-row { grid-template-columns:1fr 1fr; gap:0; padding:8px 10px; }
  .class-row>div { padding:5px 4px; }
  .class-row>div::before { content:attr(data-label); display:block; margin-bottom:2px; color:var(--muted); font-size:10px; font-weight:700; }
  .class-time { grid-column:1/-1; }
  .class-operation { justify-content:flex-start; }
}
@media (max-width:540px) {
  h1 { font-size:20px; }
  .topbar { flex-wrap:wrap; }
  .topbar-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .topbar-actions .session-chip { grid-column:1/-1; justify-content:center; }
  .topbar-actions .button { width:100%; padding-inline:8px; }
  .toolbar { display:grid; grid-template-columns:1fr; }
  .toolbar .button,.align-end { width:100%; margin-left:0; }
  .course-details { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course-details dd { white-space:normal; overflow-wrap:anywhere; }
  .course-actions { width:100%; }
  .plan-heading { display:grid; }
  .alternatives li { grid-template-columns:26px minmax(0,1fr); }
  .priority-actions { grid-column:2; flex-wrap:wrap; }
  .account-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .account-actions .button { width:100%; padding-inline:6px; }
  .dialog { width:calc(100% - 16px); }
  .form-grid { gap:12px; padding:16px; }
  .captcha-row { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .captcha-row img { width:100%; max-width:190px; }
  .dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
  .dialog-actions .button { width:100%; }
  .toast { right:10px; bottom:10px; }
}