#topbar { position:relative; overflow:visible; }
.class-selector { background:var(--primary-bg);border-color:color-mix(in srgb,var(--primary) 32%,var(--border));color:var(--primary-dark); }
.class-selector svg,.class-selector .class-name { color:var(--primary-dark); }
.class-dropdown-panel { left:0!important;right:0!important;top:calc(100% - 1px)!important;width:100%!important;min-width:0!important;margin:0!important;padding:16px 20px 20px;border-radius:0 0 var(--radius-md) var(--radius-md)!important;overflow:visible!important; }
.class-dropdown-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.class-option-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px; }
.class-option { display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-primary);cursor:pointer;text-align:left; }
.class-option:hover { border-color:var(--primary);background:var(--primary-bg); }.class-option.active{border-color:var(--primary);background:var(--primary-bg);color:var(--primary-dark);box-shadow:0 0 0 2px var(--focus-ring)}.class-option span{flex:1;font-weight:600}.class-option svg{color:var(--primary)}
.class-manager-modal { max-width:min(980px,calc(100vw - 40px)); }.class-teacher-modal{max-width:min(920px,calc(100vw - 40px))}.class-manager-modal .modal-body,.class-teacher-modal .modal-body{padding:22px 24px}.class-create-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px;margin-bottom:18px}.class-create-row .form-group{margin-bottom:0}.class-teacher-cell{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:240px}.table-link{border:0;background:transparent;color:var(--primary);font:inherit;font-weight:650;cursor:pointer;padding:4px}.table-link:hover{text-decoration:underline}.teacher-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.form-hint{margin-top:6px;color:var(--text-tertiary);font-size:12px}.management-help{position:relative;display:inline-grid;place-items:center;width:17px;height:17px;margin-left:4px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--primary);font-size:11px;font-weight:800;cursor:help;vertical-align:1px}.management-help:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.management-help::after{content:attr(data-tooltip);position:absolute;left:-8px;bottom:calc(100% + 8px);z-index:1000;width:max-content;max-width:min(260px,70vw);padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);color:var(--text-primary);box-shadow:var(--shadow-lg);font-size:12px;font-weight:500;line-height:1.45;text-align:left;white-space:normal;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility .15s}.management-help:hover::after,.management-help:focus::after{opacity:1;visibility:visible;transform:translateY(0)}.grade-analysis-filter{padding:16px 18px}.grade-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.grade-filter-head strong{display:flex;align-items:center;gap:7px}.grade-filter-head svg{width:18px;height:18px}.grade-filter-options{display:flex;flex-wrap:wrap;gap:8px}.grade-filter-options .management-check{min-width:0}.grade-filter-options .management-check span{white-space:nowrap}.grade-analysis-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grade-analysis-layout>.grade-analysis-filter{grid-column:1/-1;order:2;margin-bottom:0}.grade-analysis-stats{grid-column:1/-1;order:3}.grade-analysis-charts{display:contents}.grade-analysis-trend{grid-column:1/-1;order:1}.grade-analysis-distribution{order:4}.grade-analysis-student{order:5}
.sidebar-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.class-manage-button { flex:none; }
.account-menu { right:0 !important; left:auto !important; top:44px !important; min-width:190px; }
.account-menu-separator { border-top:1px solid var(--border-light); margin:4px 0; }
.semester-selector{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;max-width:280px;height:48px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-raised);color:var(--text-primary);font:inherit}
.semester-selector-main{display:flex;align-items:center;gap:7px;min-width:0}.semester-selector select{min-width:0;max-width:210px;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:650;appearance:none;cursor:pointer;text-overflow:ellipsis}.semester-selector-main>svg{flex:none;color:var(--primary)}
.semester-selector{position:relative;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.semester-selector:hover,.semester-selector:focus-within{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));box-shadow:0 0 0 3px var(--focus-ring)}.semester-selector-label{min-width:0;overflow:hidden;color:var(--text-primary);font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.semester-mini-row{display:flex;align-items:center;gap:7px;color:var(--text-tertiary);font-size:9px;font-weight:650;white-space:nowrap}.semester-mini-track{display:block;flex:1;height:3px;overflow:hidden;border-radius:99px;background:var(--border-light)}.semester-mini-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-light))}
.semester-selector.needs-career{border-color:color-mix(in srgb,var(--warning) 48%,var(--border));color:var(--warning);cursor:pointer}
.career-subtitle{display:block;max-width:155px;padding:0;border:0;background:transparent;font-family:inherit;text-align:left;white-space:normal;line-height:1.35;cursor:pointer}
.status-pill.planned{color:var(--primary-dark);background:var(--primary-bg)}
@media(max-width:1100px){#topbar .topbar-datetime{display:none}}
.management-section { margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--border-light); }
.management-section:last-child { border-bottom:0; }
.management-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; color:var(--text-primary); font-size:14px; font-weight:700; }
.management-check-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:8px; }
.management-check { cursor:pointer; }
.management-check input { position:absolute; opacity:0; pointer-events:none; }
.management-check span { display:block; padding:8px 6px; border:1px solid var(--border); border-radius:16px; color:var(--text-secondary); text-align:center; font-size:12px; transition:.15s; }
.management-check input:checked + span { border-color:#6ee7b7; background:#ecfdf5; color:#047857; font-weight:600; }
.career-table tbody tr { cursor:pointer; }
.career-table tbody tr:hover td { background:#f0fdf4; }
.empty-class-guide { text-align:center; }
.empty-class-guide .btn { margin-bottom:20px; }
.dropdown-item.muted { cursor:default; color:var(--text-tertiary); }
.dropdown-item.muted:hover { background:#fff; }

@media(max-width:760px){
  .class-manage-button { padding:7px 9px; }
  .class-manage-button svg { display:none; }
  .management-check-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:520px){
  .topbar-datetime { display:none; }
  .class-manage-button { font-size:0; }
  .class-manage-button::after { content:'管理'; font-size:12px; }
  .management-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px){.grade-analysis-layout{grid-template-columns:1fr}.class-dropdown-panel{padding:12px!important}.class-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-create-row{grid-template-columns:1fr 1fr}.class-create-row .btn{grid-column:1/-1}.class-manager-modal,.class-teacher-modal{max-width:calc(100vw - 20px)}.class-teacher-cell{min-width:190px}}


/* ===== Structural header drawer ===== */
#main-wrapper { min-width:0; min-height:0; }
#topbar-drawer { display:block;height:0;min-width:0;opacity:0;visibility:hidden;overflow:hidden;background:var(--surface-raised);color:var(--text-primary);border-bottom:0 solid var(--border);transition:height .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,border-width .32s ease,visibility 0s linear .32s; }
#topbar-drawer>div { min-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .28s ease; }
#topbar-drawer.is-open>div { opacity:1;transform:translateY(0); }
#topbar-drawer.is-transitioning.is-open>div { animation:drawer-content-in .24s ease both; }
@keyframes drawer-content-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
#topbar-drawer.is-open,#topbar-drawer.is-transitioning { visibility:visible; }
#topbar-drawer.is-open { opacity:1;border-bottom-width:1px;transition:height .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,border-width .32s ease,visibility 0s; }
#main-wrapper[data-drawer-mode="manager"],#main-wrapper[data-drawer-mode="teacher"] { min-height:0; }
#main-wrapper[data-drawer-mode="manager"] #topbar-drawer,#main-wrapper[data-drawer-mode="teacher"] #topbar-drawer { flex:none; min-height:0; overflow:hidden; }
#main-wrapper[data-drawer-mode="manager"] #content,#main-wrapper[data-drawer-mode="teacher"] #content { display:none; }
#main-wrapper[data-drawer-mode="manager"] #topbar,#main-wrapper[data-drawer-mode="teacher"] #topbar { border-top:1px solid var(--border); border-bottom:0; }
.drawer-compact { padding:16px 20px 18px; }
.drawer-full { display:flex; height:100%; flex:1; min-width:0; min-height:0; flex-direction:column; overflow-y:auto; padding:22px 28px; }
.drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.drawer-head h2 { margin:0; font-size:22px; }
.drawer-head p { margin:5px 0 0; color:var(--text-secondary); }
.drawer-actions,.drawer-footer { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.drawer-footer { margin-top:auto; padding-top:18px; }
.drawer-empty { grid-column:1/-1; padding:24px; color:var(--text-tertiary); text-align:center; }
.class-option-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.class-option { min-width:0; box-shadow:none; }
.class-option .icon { flex:none; }
.class-create-row { flex:none; }
.class-manage-columns,.class-manage-row { display:grid; grid-template-columns:minmax(140px,.8fr) minmax(120px,.65fr) minmax(300px,1.6fr) auto; align-items:center; gap:16px; }
.class-manage-columns { padding:9px 14px; color:var(--text-tertiary); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); }
.class-manage-list { min-height:0; }
.class-manage-row { padding:13px 14px; border-bottom:1px solid var(--border-light); }
.class-manage-row:hover { background:var(--surface-muted); }
.class-manage-name strong { font-size:14px; }
.mobile-field-label { display:none; }
.drawer-confirm { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--primary-bg); color:var(--text-primary); }
.drawer-confirm>span { flex:1; }
.drawer-confirm.danger { background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger) 35%,var(--border)); }
.teacher-manage-list { display:flex; flex-direction:column; margin-bottom:18px; border-top:1px solid var(--border); }
.teacher-manage-row { display:grid; grid-template-columns:minmax(160px,1fr) minmax(200px,1.2fr) auto; align-items:center; gap:14px; padding:11px 4px; border-bottom:1px solid var(--border-light); }
.inline-teacher-editor { display:grid; grid-template-columns:1fr 1fr auto auto; align-items:end; gap:10px; margin-bottom:18px; padding:14px; border:1px solid var(--primary); border-radius:var(--radius); background:var(--primary-bg); }
.inline-teacher-editor .form-group { margin:0; }
.teacher-homeroom { max-width:620px; }
.career-semester-preview{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-2px 0 16px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius);background:var(--primary-bg)}.career-semester-preview span{color:var(--text-secondary);font-size:12px}.career-semester-preview strong{color:var(--primary);font-size:13px;text-align:right}
.back-icon { display:inline-flex; transform:rotate(180deg); }
.back-icon svg { display:block; }

/* Schedule tabs own only horizontal movement and never expose browser scrollbars. */
.tabs { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain; }
.tabs::-webkit-scrollbar { display:none; width:0; height:0; }
.schedule-panel,.schedule-table-scroll,.slot-timeline-scroll { min-width:0; }
.schedule-table-scroll { overflow-x:auto; overflow-y:visible; overscroll-behavior-x:contain; }
.slot-timeline-scroll { overflow-x:auto; overflow-y:hidden!important; }

@media (max-width:768px) {
  html,body,#app { width:100%; max-width:100%; min-height:100%; overflow:hidden; }
  #app { height:100dvh; }
  #main-wrapper { width:100%; }
  #topbar { gap:8px; padding:0 10px; }
  #topbar .hamburger,#topbar .appearance-trigger,#topbar .topbar-user { display:flex; flex:none; width:36px; height:36px; }
  #topbar .class-selector { flex:1; min-width:0; max-width:none; justify-content:flex-start; }
  #topbar .semester-selector{flex:0 1 42%;max-width:42%;padding:0 8px}
  #topbar .semester-selector select{width:100%;font-size:11px}
  #topbar .class-selector .class-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #topbar .topbar-spacer { display:none; }
  #content { min-width:0; max-width:100%; padding:12px; overflow-x:hidden; }
  .drawer-compact { padding:12px; }
  .drawer-full { padding:16px 12px; }
  .class-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .class-option { padding:9px; }
  .class-manage-columns { display:none; }
  .class-manage-list { display:grid; grid-template-columns:1fr; gap:10px; }
  .class-manage-row { display:grid; grid-template-columns:1fr auto; gap:12px; padding:14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
  .class-manage-row>div { min-width:0; }
  .class-manage-row .class-teacher-cell { grid-column:1/-1; min-width:0; }
  .mobile-field-label { display:block; margin-bottom:3px; color:var(--text-tertiary); font-size:10px; font-weight:700; text-transform:uppercase; }
  .class-create-row { display:grid; grid-template-columns:1fr 1fr; }
  .class-create-row .btn { grid-column:1/-1; width:100%; }
  .drawer-confirm { align-items:stretch; flex-wrap:wrap; }
  .drawer-confirm>span { flex-basis:calc(100% - 34px); }
  .teacher-manage-row { grid-template-columns:1fr auto; }
  .teacher-manage-row>span { grid-column:1/2; overflow-wrap:anywhere; }
  .teacher-manage-row>.btn { grid-column:2; grid-row:1/3; }
  .inline-teacher-editor { grid-template-columns:1fr 1fr; }
  .inline-teacher-editor .form-group { grid-column:1/-1; }
  .teacher-mapping-grid { grid-template-columns:1fr; }
  .module-header,.schedule-toolbar { align-items:stretch; }
  .semester-progress-head { align-items:flex-start; }
  .semester-progress-head>div { align-items:flex-start; flex-direction:column; gap:2px; }
  .module-header>* { min-width:0; }
  .schedule-toolbar>.flex,.schedule-filter,.schedule-week-nav { max-width:100%; }
  .schedule-filter .form-select { flex:1; min-width:0; }
  .tabs { margin-left:-12px; margin-right:-12px; padding:0 12px; scroll-snap-type:x proximity; }
  .tab { flex:0 0 auto; scroll-snap-align:start; }
  .table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
  .formal-schedule-table { min-width:680px; }
  #modal-overlay { padding:0; }
  .modal { width:100%; max-width:100%; max-height:92dvh; margin-top:auto; border-radius:18px 18px 0 0; }
  .quick-actions { gap:8px; }
}
@media (max-width:420px) {
  .drawer-head h2 { font-size:18px; }
  .drawer-head p { font-size:12px; }
  .inline-teacher-editor { grid-template-columns:1fr; }
  #topbar .semester-selector{max-width:38%;gap:4px}
  #topbar .semester-selector-main>svg:first-child{display:none}
  .inline-teacher-editor>* { grid-column:1!important; width:100%; }
}
@media (max-width:360px) {
  .class-option-grid { grid-template-columns:1fr; }
  #topbar { gap:6px; padding:0 8px; }
  #topbar .appearance-trigger,#topbar .topbar-user,#topbar .hamburger { width:32px; height:32px; }
}

#main-wrapper[data-drawer-mode="manager"] .account-menu,#main-wrapper[data-drawer-mode="teacher"] .account-menu{top:auto!important;bottom:44px!important}

#topbar .topbar-user{padding:0;border:0;cursor:pointer;font-family:inherit}

#main-wrapper[data-drawer-mode="manager"] #topbar-drawer>div,#main-wrapper[data-drawer-mode="teacher"] #topbar-drawer>div{overflow-y:auto}

:root[data-mode="dark"] .semester-dropdown{background:#222632}
.semester-selector-wrap{position:relative;flex:0 1 280px;min-width:0;max-width:280px}.semester-selector-wrap>.semester-selector{width:100%;max-width:none}.semester-dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:300;display:grid;width:min(350px,calc(100vw - 24px));gap:7px;padding:10px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .16s ease,transform .18s ease,visibility .18s}.semester-dropdown.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.semester-option{display:grid;width:100%;grid-template-columns:minmax(0,1fr) minmax(92px,.75fr);align-items:center;gap:14px;padding:11px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}.semester-option:hover{border-color:var(--border);background:var(--surface-muted)}.semester-option.active{border-color:color-mix(in srgb,var(--primary) 42%,var(--border));background:var(--primary-bg)}.semester-option-main{display:flex;min-width:0;flex-direction:column;gap:3px}.semester-option-main strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.semester-option-main small{color:var(--text-secondary);font-size:11px}.semester-option-progress{display:flex;min-width:0;flex-direction:column;gap:5px;color:var(--text-tertiary);font-size:9px;text-align:right}.semester-option-progress .semester-mini-track{width:100%}
@media(max-width:768px){#topbar .semester-selector-wrap{flex:0 1 42%;max-width:42%}#topbar .semester-selector-wrap>.semester-selector{width:100%;max-width:none}.semester-dropdown{left:-42px}.semester-option{grid-template-columns:minmax(0,1fr) 92px}}
@media(max-width:420px){#topbar .semester-selector-wrap{max-width:38%}.semester-dropdown{left:-44px}.semester-option{grid-template-columns:1fr}.semester-option-progress{text-align:left}}