:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --blue: #0a7cff;
  --text: #1d1d1f;
  --muted: #74777d;
  --line: #e6e7e9;
  --sidebar: #f7f8fa;
  --hour-height: 72px;
  --time-width: 62px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: radial-gradient(circle at 50% -20%, #fff 0, #f5f6f8 44%, #eceef1 100%);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 304px;
  height: calc(100vh - 32px);
  min-height: 600px;
  min-width: 1100px;
  margin: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(30, 35, 45, .1);
  border-radius: 17px;
  box-shadow: 0 20px 60px rgba(30,38,50,.14), 0 2px 8px rgba(30,38,50,.05);
  transition:grid-template-columns .24s ease;
}
.app-shell[data-detail-collapsed="true"] { grid-template-columns:224px minmax(0,1fr) 44px; }

.sidebar, .detail-panel { min-height: 0; }
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(247,248,250,.94);
  border-right: 1px solid var(--line);
}
.brand-row {
  height: 73px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.brand-row strong { font-size: 16px; letter-spacing: .12em; }

.main-nav { padding: 14px 12px 10px; display: grid; gap: 4px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item:hover { background: #eef0f3; }
.nav-item:active { transform: scale(.985); }
.nav-item.active { color: var(--blue); background: rgba(10,124,255,.1); font-weight: 600; }
.nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.sidebar-section { padding: 16px 12px; }
.section-label { display:flex; align-items:center; justify-content:space-between; padding: 0 8px 10px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.section-label button { padding: 0; border:0; background:transparent; color:var(--blue); font-size:11px; cursor:pointer; }
.student-list { display: grid; gap: 2px; padding-top: 10px; }
.student-row {
  display: grid;
  grid-template-columns: 11px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.student-row:hover, .student-row.active { background:#eceef1; }
.student-row:active { transform:scale(.985); }
.student-row .dot { width:9px; height:9px; border-radius:50%; }
.student-row .name { font-size:13px; }
.student-row .remaining { color:var(--muted); font-size:12px; }

.week-summary {
  margin: auto 13px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.65);
}
.week-summary div { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:7px; padding:7px 0; font-size:12px; }
.week-summary strong { font-size:12px; font-weight:600; }
.summary-icon { position:relative; width:15px; height:15px; color:#7a7d83; }
.calendar-mini { border:1.5px solid currentColor; border-radius:3px; }
.calendar-mini:before { content:""; position:absolute; left:2px; right:2px; top:4px; border-top:1px solid currentColor; }
.clock-mini { border:1.5px solid currentColor; border-radius:50%; }
.clock-mini:before { content:""; position:absolute; width:1px; height:4px; background:currentColor; left:6px; top:3px; transform-origin:bottom; }
.clock-mini:after { content:""; position:absolute; width:4px; height:1px; background:currentColor; left:6px; top:7px; transform:rotate(25deg); transform-origin:left; }

.workspace { min-width:0; display:flex; flex-direction:column; background:#fff; }
.toolbar {
  z-index: 3;
  height: 73px;
  flex: 0 0 73px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
}
.date-controls, .toolbar-actions { display:flex; align-items:center; gap:8px; }
.date-controls h1 { min-width:142px; margin:0 6px; font-size:17px; text-align:center; font-weight:650; letter-spacing:-.02em; }
.icon-button, .close-button {
  display:grid; place-items:center; border:0; background:transparent; cursor:pointer; border-radius:50%; transition:background .18s ease, transform .18s ease;
}
.icon-button { width:30px; height:30px; font-size:28px; line-height:1; font-weight:300; }
.icon-button:hover, .close-button:hover { background:#f0f1f3; }
.icon-button:active, .close-button:active { transform:scale(.9); }
.quiet-button {
  height:32px; padding:0 13px; border:1px solid #dfe1e5; border-radius:8px; background:#fff; font-size:12px; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.02); transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.quiet-button:hover { background:#f7f8fa; border-color:#ccd0d6; }
.quiet-button:active { transform:scale(.97); }
.primary-button {
  height:36px; padding:0 15px; border:0; border-radius:9px; color:#fff; background:var(--blue); box-shadow:0 4px 12px rgba(10,124,255,.18); cursor:pointer;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.primary-button:hover { background:#0072ec; box-shadow:0 6px 16px rgba(10,124,255,.24); }
.primary-button:active { transform:scale(.97); }
.primary-button:disabled { opacity:.5; cursor:not-allowed; }
.view-switch { display:flex; padding:2px; border:1px solid #e0e2e6; background:#f7f8fa; border-radius:9px; }
.view-switch button { width:40px; height:27px; border:0; border-radius:7px; background:transparent; font-size:12px; cursor:pointer; color:#5e6167; }
.view-switch button.active { color:var(--blue); background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.09); }
.toolbar-select {
  height:32px;
  max-width:112px;
  padding:0 24px 0 10px;
  border:1px solid #dfe1e5;
  border-radius:8px;
  background:#fff;
  color:#4f5258;
  font-size:12px;
  outline:0;
}

.filter-banner {
  position:absolute; z-index:5; top:84px; left:50%; transform:translateX(-50%);
  align-items:center; gap:7px; padding:7px 10px 7px 12px; border-radius:99px; color:#1767bb; background:#e8f3ff; font-size:12px;
  box-shadow:0 5px 16px rgba(30,80,130,.12); animation:floatIn .25s ease both;
}
.filter-banner:not([hidden]) { display:flex; }
.filter-banner button { border:0; background:rgba(10,124,255,.1); color:inherit; width:18px; height:18px; padding:0; line-height:16px; border-radius:50%; cursor:pointer; }

.calendar-wrap { --scrollbar-width:0px; min-height:0; flex:1; display:flex; flex-direction:column; }
.day-header {
  display:grid;
  grid-template-columns:var(--time-width) repeat(var(--day-count, 7),minmax(88px,1fr));
  flex:0 0 58px;
  padding-right:var(--scrollbar-width);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.day-header .time-spacer { border-right:1px solid var(--line); }
.day-cell { display:flex; align-items:center; justify-content:center; gap:7px; border-right:1px solid var(--line); font-size:12px; color:#4f5258; }
.day-cell:last-child { border-right:0; }
.day-cell .date-number { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; font-weight:600; color:#22252a; }
.day-cell.today .date-number { color:#fff; background:var(--blue); box-shadow:0 3px 9px rgba(10,124,255,.23); }
.calendar-scroll { min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#d8dade transparent; }
.calendar-body { position:relative; height:calc(var(--hour-height) * var(--hour-count, 12)); min-height:calc(var(--hour-height) * var(--hour-count, 12)); }
.base-grid, .course-layer {
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:var(--time-width) repeat(var(--day-count, 7),minmax(88px,1fr));
  grid-template-rows:repeat(var(--slot-count, 24), calc(var(--hour-height) / 2));
}
.base-grid { z-index:0; }
.base-grid:before { content:""; position:absolute; top:0; bottom:0; left:var(--time-width); border-left:1px solid #eceef0; pointer-events:none; }
.course-layer { z-index:1; pointer-events:none; }
.time-label { padding:0 9px 0 0; transform:translateY(-7px); color:#8a8d93; font-size:11px; text-align:right; }
.slot-cell { border-right:1px solid #eceef0; border-bottom:1px solid #f0f1f2; transition:background .15s ease; }
.slot-cell.full-hour { border-bottom-color:#e2e4e7; }
.slot-cell.drop-hover { background:rgba(10,124,255,.09); box-shadow:inset 0 0 0 1px rgba(10,124,255,.2); }
.course-card {
  pointer-events:auto;
  position:relative;
  overflow:hidden;
  margin:3px 4px;
  padding:8px 8px 7px 11px;
  border:1px solid transparent;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
  box-shadow:0 2px 5px rgba(30,40,50,.04);
  animation:cardEnter .28s cubic-bezier(.2,.8,.2,1) both;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.course-card:before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--card-accent); }
.course-card:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(30,40,50,.1); z-index:2; }
.course-card:active { transform:scale(.985); }
.course-card.selected { border-color:var(--blue); box-shadow:0 0 0 1px rgba(10,124,255,.18), 0 7px 18px rgba(10,124,255,.12); }
.course-card.dragging { opacity:.38; transform:scale(.97); }
.course-card.completed, .course-card.makeup-done { opacity:.7; }
.course-card.completed .course-name:after, .course-card.makeup-done .course-name:after { content:"  ✓"; color:var(--card-accent); }
.course-card.student-leave, .course-card.teacher-leave, .course-card.makeup-pending { border-style:dashed; }
.course-time { display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:5px; color:var(--card-dark); font-size:11px; line-height:1; font-variant-numeric:tabular-nums; }
.course-time em { flex:0 0 auto; font-style:normal; font-size:9px; opacity:.8; }
.course-name { display:block; overflow:hidden; color:#24262b; font-size:11.5px; line-height:1.25; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }
.course-card.compact { padding-top:5px; }
.course-card.compact .course-time { margin-bottom:3px; }
.course-card.filtered-out { opacity:.08; pointer-events:none; }
.course-card.blue { --card-accent:#3a8ff4; --card-dark:#2869a8; background:#eaf3ff; }
.course-card.green { --card-accent:#55bd61; --card-dark:#327b3a; background:#eaf7e9; }
.course-card.orange { --card-accent:#ff9d2e; --card-dark:#9b621e; background:#fff2e4; }
.course-card.purple { --card-accent:#9563dd; --card-dark:#6942a2; background:#f3ecfb; }

.month-view .day-header {
  grid-template-columns:repeat(7,minmax(88px,1fr));
  padding-right:var(--scrollbar-width);
}
.month-view .calendar-body {
  height:auto;
  min-height:0;
}
.month-grid {
  min-height:calc(100vh - 148px);
  display:grid;
  grid-template-columns:repeat(7,minmax(88px,1fr));
  grid-auto-rows:minmax(106px,1fr);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.month-cell {
  min-width:0;
  padding:9px 8px;
  border-right:1px solid #eceef0;
  border-bottom:1px solid #eceef0;
  background:#fff;
}
.month-cell:nth-child(7n) { border-right:0; }
.month-cell.outside { background:#fafbfc; color:#a0a3a9; }
.month-cell.today .month-date { color:#fff; background:var(--blue); }
.month-date { display:grid; place-items:center; width:24px; height:24px; margin-bottom:6px; border-radius:50%; font-size:11px; font-weight:650; }
.month-lessons { display:grid; gap:4px; }
.month-lesson {
  width:100%;
  min-width:0;
  height:22px;
  overflow:hidden;
  padding:0 6px;
  border:1px solid transparent;
  border-radius:6px;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  cursor:pointer;
}
.month-lesson.selected { border-color:var(--blue); box-shadow:0 0 0 1px rgba(10,124,255,.15); }
.month-lesson.blue { color:#2869a8; background:#eaf3ff; }
.month-lesson.green { color:#327b3a; background:#eaf7e9; }
.month-lesson.orange { color:#9b621e; background:#fff2e4; }
.month-lesson.purple { color:#6942a2; background:#f3ecfb; }
.month-lesson.student-leave, .month-lesson.teacher-leave, .month-lesson.makeup-pending { border-style:dashed; }
.month-more { color:#8a8d93; font-size:9px; }

.calendar-empty {
  position:absolute;
  z-index:2;
  left:var(--time-width);
  right:0;
  top:102px;
  display:grid;
  place-items:center;
  pointer-events:none;
  text-align:center;
  animation:detailIn .25s ease both;
}
.calendar-empty-icon {
  position:relative;
  width:48px;
  height:48px;
  margin:0 auto 14px;
  border:1px solid #dfe3e8;
  border-radius:14px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(30,40,55,.06);
}
.calendar-empty-icon:before { content:""; position:absolute; left:11px; right:11px; top:16px; height:17px; border:1.5px solid #aeb5bf; border-radius:4px; }
.calendar-empty-icon:after { content:"＋"; position:absolute; right:6px; top:4px; display:grid; place-items:center; width:17px; height:17px; color:#fff; background:var(--blue); border-radius:50%; font-size:12px; }
.calendar-empty h3 { margin:0 0 6px; font-size:14px; }
.calendar-empty p { margin:0; color:var(--muted); font-size:12px; }

.module-page { display:none; min-height:0; height:100%; flex-direction:column; background:#f7f8fa; }
.app-shell[data-section="students"] .workspace,
.app-shell[data-section="records"] .workspace { grid-column:2 / 4; }
.app-shell[data-section="students"] .schedule-only,
.app-shell[data-section="records"] .schedule-only,
.app-shell[data-section="students"] .detail-panel,
.app-shell[data-section="records"] .detail-panel { display:none; }
.app-shell[data-section="students"] #studentsView,
.app-shell[data-section="records"] #recordsView { display:flex; animation:moduleIn .24s ease both; }

.module-toolbar {
  min-height:104px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 28px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
}
.module-kicker { display:block; margin-bottom:3px; color:var(--blue); font-size:9px; font-weight:700; letter-spacing:.16em; }
.module-toolbar h1 { margin:0; font-size:21px; letter-spacing:-.035em; }
.module-toolbar p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.export-button { height:36px; }
.module-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.subtle-danger-button { color:#8f939a; background:#fff; }
.subtle-danger-button:hover { color:#d44545; border-color:#efcaca; background:#fff8f8; }
.module-content { min-height:0; overflow:auto; padding:22px 28px 30px; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:14px; margin-bottom:16px; }
.metric-card { min-height:94px; padding:17px 18px; border:1px solid #e6e8eb; border-radius:13px; background:#fff; box-shadow:0 4px 16px rgba(30,40,55,.035); }
.metric-card.attention { border-color:#f2d39f; background:#fffaf2; }
.metric-card span { display:block; color:var(--muted); font-size:11px; }
.metric-card strong { display:block; margin-top:9px; font-size:25px; letter-spacing:-.04em; }
.metric-card small { margin-left:4px; color:#8b8e94; font-size:10px; font-weight:500; }
.data-panel { overflow:hidden; border:1px solid #e4e6e9; border-radius:14px; background:#fff; box-shadow:0 5px 20px rgba(30,40,55,.04); }
.data-panel-header { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px 13px 18px; border-bottom:1px solid #eceef0; }
.data-panel-header h2 { margin:0 0 3px; font-size:14px; }
.data-panel-header > div > span { color:var(--muted); font-size:10px; }
.data-panel-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.search-field { width:210px; height:34px; display:flex; align-items:center; gap:7px; padding:0 10px; border:1px solid #e1e3e6; border-radius:8px; background:#f8f9fa; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.search-field:focus-within { border-color:rgba(10,124,255,.55); background:#fff; box-shadow:0 0 0 3px rgba(10,124,255,.08); }
.search-field svg { width:15px; height:15px; flex:0 0 15px; fill:none; stroke:#888c93; stroke-width:1.8; stroke-linecap:round; }
.search-field input { width:100%; border:0; outline:0; background:transparent; font-size:11px; }
.table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.data-table th { height:38px; padding:0 14px; color:#85888e; background:#fafbfc; border-bottom:1px solid #eceef0; font-size:10px; font-weight:600; text-align:left; }
.data-table td { height:58px; padding:9px 14px; border-bottom:1px solid #f0f1f2; color:#3c3f45; font-size:11px; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:0; }
.data-table tbody tr { transition:background .16s ease; }
.data-table tbody tr:hover { background:#fafcff; }
.data-table tbody tr.archived-row { color:#8c9097; background:#fafafa; }
.data-table tbody tr.archived-row .avatar { filter:grayscale(.6); opacity:.7; }
.archived-badge { display:inline-flex; align-items:center; height:20px; margin-left:7px; padding:0 7px; border-radius:99px; color:#777b82; background:#eef0f2; font-size:10px; font-weight:600; vertical-align:middle; }
.person-cell { display:flex; align-items:center; gap:10px; min-width:0; }
.avatar { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:9px; color:var(--avatar-dark); background:var(--avatar-light); font-size:12px; font-weight:700; }
.person-copy { min-width:0; }
.person-copy strong, .person-copy span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.person-copy strong { color:#24262b; font-size:11px; }
.person-copy span { margin-top:3px; color:var(--muted); font-size:9px; }
.balance-cell strong { margin-right:3px; color:#24262b; font-size:13px; }
.balance-cell span { color:#8a8d93; font-size:9px; }
.row-actions { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.mini-button { height:27px; padding:0 9px; border:1px solid #e1e3e6; border-radius:7px; background:#fff; font-size:10px; white-space:nowrap; cursor:pointer; transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.mini-button:hover { border-color:#cbd0d6; background:#f7f8fa; }
.mini-button:active { transform:scale(.96); }
.mini-button.danger:hover { color:#df4040; border-color:#f0caca; background:#fff7f7; }
.status-pill { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:99px; font-size:9px; font-weight:600; }
.status-pill:before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-pill.scheduled { color:#1e72c8; background:#eaf4ff; }
.status-pill.completed, .status-pill.makeup-done { color:#398346; background:#ecf7ee; }
.status-pill.canceled { color:#8a8d93; background:#f0f1f3; }
.status-pill.student-leave { color:#a55f16; background:#fff3df; }
.status-pill.teacher-leave { color:#8753c7; background:#f4edff; }
.status-pill.makeup-pending { color:#b95353; background:#fff0f0; }
.filter-tabs { display:flex; gap:4px; padding:3px; border-radius:9px; background:#f2f3f5; }
.filter-tabs button { height:27px; padding:0 11px; border:0; border-radius:7px; color:#686b71; background:transparent; font-size:10px; cursor:pointer; }
.filter-tabs button.active { color:#1e66ae; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.08); }
.record-tools { min-height:61px; }
.empty-state { min-height:290px; display:grid; place-items:center; padding:40px; text-align:center; }
.empty-state .empty-orbit { margin-bottom:15px; }
.empty-state h3 { margin:0 0 6px; font-size:14px; }
.empty-state p { max-width:300px; margin:0 auto 17px; color:var(--muted); font-size:11px; line-height:1.6; }
.empty-state .primary-button { height:34px; font-size:11px; }
.student-list-empty { padding:15px 8px; color:#999ca2; font-size:11px; line-height:1.55; }
.renew-dot { display:inline-grid; place-items:center; width:16px; height:16px; margin-left:4px; border-radius:50%; color:#ad6200; background:#fff3df; font-size:9px; font-weight:700; }
.balance-cell.low strong { color:#c96a00; }
.balance-cell em { display:inline-flex; margin-left:6px; padding:2px 5px; border-radius:99px; color:#ad6200; background:#fff3df; font-size:9px; font-style:normal; }
.student-profile { margin-bottom:16px; }
.student-profile-header { display:flex; justify-content:space-between; gap:18px; padding:18px 18px 14px; border-bottom:1px solid #eceef0; }
.student-profile-header h2 { margin:0; font-size:18px; }
.student-profile-header p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.student-profile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:#eceef0; }
.student-profile-grid div { padding:14px 16px; background:#fff; }
.student-profile-grid span { display:block; color:var(--muted); font-size:10px; }
.student-profile-grid strong { display:block; margin-top:7px; font-size:15px; }
.student-history-grid { display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:14px; padding:16px 18px 18px; }
.student-history-grid h3 { margin:0 0 9px; font-size:12px; }
.mini-lesson-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.mini-lesson-list li { display:flex; justify-content:space-between; gap:10px; padding:8px 9px; border-radius:8px; background:#f7f8fa; font-size:10px; }
.mini-lesson-list strong { color:#2c5d99; font-weight:600; }
.muted-line, .contact-log { margin:0; color:var(--muted); font-size:11px; line-height:1.6; white-space:pre-wrap; }
.student-modal-card #studentForm { padding:20px 23px 22px; }
.inline-colors { margin:0; min-height:39px; }
.inline-colors > span { display:none; }

@keyframes moduleIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.detail-panel { position:relative; display:flex; flex-direction:column; padding:0 21px 20px; border-left:1px solid var(--line); background:#fff; overflow:auto; transition:padding .24s ease; }
#detailContent { min-width:0; }
.detail-rail-button {
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  gap:7px;
  width:100%;
  border:0;
  color:#4f5258;
  background:linear-gradient(180deg,#fff,#f7f8fa);
  cursor:pointer;
  writing-mode:vertical-rl;
  letter-spacing:.08em;
  font-size:12px;
  transition:background .18s ease, color .18s ease;
}
.detail-rail-button:hover { color:var(--blue); background:#f7fbff; }
.detail-rail-button span { writing-mode:horizontal-tb; font-size:18px; line-height:1; }
.detail-rail-button strong { font-weight:650; }
.app-shell[data-detail-collapsed="true"] .detail-panel { padding:0; overflow:hidden; }
.app-shell[data-detail-collapsed="true"] #detailContent { opacity:0; pointer-events:none; }
.app-shell[data-detail-collapsed="true"] .detail-rail-button { display:grid; }
.detail-heading { height:73px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -2px; border-bottom:1px solid var(--line); color:#34363b; font-size:14px; font-weight:600; }
.detail-heading > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-collapse-button {
  display:grid;
  place-items:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border:1px solid #e1e3e6;
  border-radius:50%;
  background:#fff;
  color:#74777d;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.detail-collapse-button:hover { color:var(--blue); background:#f4f9ff; }
.detail-collapse-button:active { transform:scale(.94); }
.detail-collapse-button span { font-size:18px; line-height:1; transform:translateX(1px); }
.detail-empty { display:grid; place-items:center; height:calc(100vh - 110px); text-align:center; color:var(--muted); }
.empty-orbit { width:44px; height:44px; margin:0 auto 14px; border:1px solid #dfe2e6; border-radius:13px; position:relative; }
.empty-orbit:before, .empty-orbit:after { content:""; position:absolute; border-radius:50%; background:#cfd4da; }
.empty-orbit:before { width:7px; height:7px; left:10px; top:10px; }
.empty-orbit:after { width:5px; height:5px; right:9px; bottom:9px; }
.detail-empty p { margin:0; font-size:13px; }
.detail-body { animation:detailIn .25s ease both; }
.detail-title { margin:19px 0 18px; font-size:22px; line-height:1.2; overflow-wrap:anywhere; }
.intro-panel .detail-title { font-size:20px; line-height:1.28; }
.detail-body > .status-pill { margin-top:18px; }
.intro-panel { padding-top:21px; }
.intro-kicker { display:block; color:var(--blue); font-size:10px; font-weight:700; letter-spacing:.12em; }
.intro-copy { margin:0 0 18px; color:#4d5056; font-size:13px; line-height:1.75; }
.intro-list { display:grid; gap:10px; margin:0 0 20px; }
.intro-list div { padding:12px 13px; border:1px solid #e7e9ed; border-radius:10px; background:#fafbfc; }
.intro-list strong { display:block; margin-bottom:5px; color:#25282d; font-size:13px; }
.intro-list span { display:block; color:var(--muted); font-size:12px; line-height:1.55; }
.intro-hint { margin:0; padding-top:15px; border-top:1px solid var(--line); color:#777a80; font-size:12px; line-height:1.6; }
.detail-row { display:flex; align-items:center; gap:11px; min-height:42px; font-size:13px; }
.detail-icon { display:grid; place-items:center; flex:0 0 20px; width:20px; height:20px; color:#85888e; }
.detail-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.student-color { width:11px; height:11px; margin:0 4px; border-radius:50%; background:var(--student-color); }
.progress-area { margin:16px 0 22px; display:flex; align-items:center; gap:10px; color:#676a70; font-size:11px; }
.progress-track { flex:1; height:5px; overflow:hidden; border-radius:99px; background:#e4e6e9; }
.progress-fill { height:100%; width:50%; border-radius:inherit; background:var(--blue); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.note-card { min-height:126px; padding:15px; border-radius:10px; background:#f5f6f7; font-size:13px; line-height:1.55; }
.feedback-card { min-height:88px; white-space:pre-wrap; }
.detail-section-title { margin:16px 0 8px; color:#676a70; font-size:11px; font-weight:650; }
.warning-line { display:block; margin:-9px 0 13px; padding:8px 10px; border-radius:8px; color:#9d5b00; background:#fff4df; font-size:11px; line-height:1.45; }
.detail-spacer { min-height:32px; height:calc(100vh - 630px); }
.text-action { display:block; margin:0 0 16px; padding:0; border:0; color:var(--blue); background:transparent; font-size:12px; cursor:pointer; text-align:left; }
.detail-actions { display:grid; grid-template-columns:1fr 1.1fr; gap:10px; }
.detail-actions-grid { grid-template-columns:1fr 1fr; }
.detail-actions button { height:42px; }
.danger-button { border:1px solid #e1e3e6; border-radius:9px; background:#fff; cursor:pointer; transition:background .18s ease, color .18s ease, transform .18s ease; }
.danger-button:hover { color:#e43d3d; background:#fff5f5; }
.danger-button:active { transform:scale(.97); }

.modal-backdrop {
  position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:24px;
  background:rgba(24,28,35,.25); backdrop-filter:blur(6px); animation:backdropIn .18s ease both;
}
.modal-backdrop[hidden] { display:none; }
.modal-card { width:min(680px, calc(100vw - 48px)); max-height:calc(100vh - 48px); overflow:auto; border:1px solid rgba(255,255,255,.75); border-radius:18px; background:#fff; box-shadow:0 30px 90px rgba(20,25,35,.25); animation:modalIn .28s cubic-bezier(.2,.85,.2,1) both; }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 23px 16px; border-bottom:1px solid var(--line); }
.eyebrow { display:block; margin-bottom:5px; color:var(--blue); font-size:10px; font-weight:650; letter-spacing:.12em; }
.modal-header h2 { margin:0; font-size:20px; letter-spacing:-.02em; }
.close-button { width:30px; height:30px; font-size:23px; font-weight:300; }
#courseForm { padding:20px 23px 22px; }
.clear-modal-card #clearDataForm { padding:20px 23px 22px; }
.danger-note { margin:0 0 16px; padding:12px 13px; border:1px solid #f0caca; border-radius:10px; color:#a33b3b; background:#fff7f7; font-size:12px; line-height:1.6; }
.form-error { margin:10px 0 0; color:#d44545; font-size:11px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.field { display:grid; gap:7px; }
.field > span, .color-picker > span { color:#686b71; font-size:11px; font-weight:600; }
.field input, .field select, .field textarea {
  width:100%; border:1px solid #dfe2e6; border-radius:8px; outline:0; background:#fafbfc; color:var(--text); transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field input, .field select { height:39px; padding:0 11px; }
.field textarea { padding:10px 11px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:rgba(10,124,255,.7); background:#fff; box-shadow:0 0 0 3px rgba(10,124,255,.1); }
.field-wide { grid-column:1 / -1; }
.color-picker { display:flex; align-items:center; gap:10px; margin-top:17px; }
.color-picker > span { margin-right:2px; }
.color-picker label { display:grid; place-items:center; cursor:pointer; }
.color-picker input { position:absolute; opacity:0; pointer-events:none; }
.color-picker i { display:block; width:21px; height:21px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #d9dce0; transition:transform .18s ease, box-shadow .18s ease; }
.color-picker input:checked + i { transform:scale(1.12); box-shadow:0 0 0 2px var(--blue); }
.color-picker i.blue { background:#5d9ff1; } .color-picker i.green { background:#6bc574; } .color-picker i.orange { background:#ffa43e; } .color-picker i.purple { background:#9b70df; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }

.toast {
  position:fixed; z-index:30; left:50%; bottom:32px; display:flex; align-items:center; gap:14px; min-height:42px; padding:0 15px; border-radius:11px;
  color:#fff; background:rgba(31,34,39,.92); box-shadow:0 10px 30px rgba(0,0,0,.2); font-size:12px; opacity:0; pointer-events:none; transform:translate(-50%, 16px);
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1); backdrop-filter:blur(15px);
}
.toast.show { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.toast button { border:0; padding:0; color:#78b8ff; background:transparent; font-size:12px; font-weight:600; cursor:pointer; }

@keyframes cardEnter { from { opacity:0; transform:translateY(5px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes detailIn { from { opacity:0; transform:translateX(7px); } to { opacity:1; transform:none; } }
@keyframes modalIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes backdropIn { from { opacity:0; } to { opacity:1; } }
@keyframes floatIn { from { opacity:0; transform:translate(-50%,-5px); } to { opacity:1; transform:translate(-50%,0); } }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (max-width: 1320px) {
  .app-shell { grid-template-columns:200px minmax(0,1fr) 244px; }
  .app-shell[data-detail-collapsed="true"] { grid-template-columns:200px minmax(0,1fr) 44px; }
  .detail-panel { padding-left:14px; padding-right:14px; }
  .toolbar { padding-left:14px; padding-right:14px; }
  .toolbar-actions { gap:6px; }
  .toolbar-select { max-width:96px; }
  .student-profile-grid, .student-history-grid { grid-template-columns:1fr 1fr; }
}

@media print {
  body { overflow:visible; background:#fff; }
  .app-shell { display:block; height:auto; min-height:0; min-width:0; margin:0; border:0; box-shadow:none; border-radius:0; }
  .sidebar, .detail-panel, .toolbar-actions, .filter-banner { display:none !important; }
  .workspace { display:block; }
  .toolbar { height:auto; min-height:54px; padding:0 0 10px; border-bottom:1px solid #bbb; }
  .calendar-scroll { overflow:visible; }
  .calendar-body { min-height:0; height:calc(var(--hour-height) * var(--hour-count, 12)); }
  .course-card { break-inside:avoid; box-shadow:none; }
}