/* 所有页面共用这一份样式，方便以后统一调整颜色和排版。 */
:root {
  --ink: #182b35;
  --muted: #667983;
  --line: #e3ebeb;
  --paper: #fff;
  --canvas: #f5f8f7;
  --green: #177c6d;
  --green-dark: #0e5e56;
  --green-pale: #e8f5f0;
  --navy: #142d38;
  --shadow: 0 16px 46px rgba(25, 53, 62, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }

/* 登录页：单栏卡片在桌面和手机上保持居中。 */
.login-page { min-height: 100vh; background: #f5f8f7; }
.login-shell { display: grid; place-items: center; min-height: 100vh; padding: 32px 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; font-size: 16px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--green); font-family: Georgia, serif; font-size: 23px; font-weight: 600; line-height: 1; }
.eyebrow { display: inline-block; margin-bottom: 18px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.login-panel { display: grid; place-items: center; width: 100%; }
.login-card { width: min(100%, 420px); padding: 32px; border: 1px solid #e3ebeb; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.login-card h1 { margin: 25px 0 5px; font-size: 32px; letter-spacing: -.04em; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.8; }
.login-instruction { margin-top: 22px; padding: 12px 14px; border: 1px solid #e8efec; border-radius: 10px; color: #61736d; background: #f6f9f7; font-size: 11px; line-height: 1.65; }
.login-instruction p { margin: 0; }
.login-instruction p + p { margin-top: 4px; }
.login-instruction strong { color: #48635a; font-size: 11px; }
.login-fields { display: flex; flex-direction: column; margin-top: 22px; }
.login-fields label { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.login-fields input { width: 100%; height: 49px; margin-bottom: 20px; padding: 0 15px; border: 1px solid #d8e3e1; border-radius: 11px; outline: none; color: var(--ink); background: #fff; }
.login-fields input:focus { border-color: #54a795; box-shadow: 0 0 0 3px rgba(23,124,109,.1); }
.login-fields input::placeholder { color: #9aabaa; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 10px 19px; border: 0; border-radius: 11px; font-size: 14px; font-weight: 750; }
.button-disabled { width: 100%; margin-top: 5px; color: #fff; background: #94b5aa; cursor: not-allowed; }
.login-submit { width: 100%; margin-top: 4px; color: #fff; background: var(--green); }
.login-submit:hover, .login-submit:focus-visible { background: var(--green-dark); }
.login-page .login-submit:disabled { background: #94b5aa; cursor: wait; }
.auth-error { margin: 0 0 13px; color: #a44232; font-size: 12px; font-weight: 700; }
.auth-form-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: #e8f0ec; }
.auth-form-card { width: min(100%, 460px); padding: 34px; border: 1px solid #e0e9e5; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.auth-overline { margin: 28px 0 5px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.auth-form-card h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.035em; }
.auth-password-form { display: flex; flex-direction: column; margin-top: 24px; }
.auth-password-form label { margin: 0 0 7px; font-size: 13px; font-weight: 700; }
.auth-password-form input { width: 100%; height: 46px; margin-bottom: 17px; padding: 0 13px; border: 1px solid #d8e3e1; border-radius: 10px; outline: none; color: var(--ink); background: #fff; }
.auth-password-form select { width: 100%; height: 46px; margin-bottom: 17px; padding: 0 13px; border: 1px solid #d8e3e1; border-radius: 10px; outline: none; color: var(--ink); background: #fff; }
.auth-password-form input:focus, .auth-password-form select:focus { border-color: #54a795; box-shadow: 0 0 0 3px rgba(23,124,109,.1); }
.auth-password-form select:disabled { color: #87968d; background: #f5f8f6; cursor: not-allowed; }
.auth-logout-form { margin-top: 14px; text-align: center; }
.auth-logout-link { padding: 5px 10px; border: 0; color: #667983; background: transparent; font-size: 12px; font-weight: 700; }
.auth-logout-link:hover, .auth-logout-link:focus-visible { color: #a44232; text-decoration: underline; }
.preview-divider { position: relative; margin: 29px 0 17px; text-align: center; }
.preview-divider::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #dce6e3; }
.preview-divider span { position: relative; padding: 0 13px; color: #879997; background: #f7faf8; font-size: 12px; }
.role-links { display: grid; gap: 9px; }
.role-links a { display: flex; align-items: center; gap: 12px; min-height: 65px; padding: 10px 13px; border: 1px solid #e0e9e5; border-radius: 13px; background: #fff; transition: border-color .15s, transform .15s, box-shadow .15s; }
.role-links a:hover, .role-links a:focus-visible { transform: translateY(-2px); border-color: #91c5b5; box-shadow: var(--shadow); }
.role-links strong, .role-links small { display: block; }
.role-links strong { font-size: 13px; }
.role-links small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.role-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; font-size: 13px; font-weight: 750; }
.role-student { color: #0e7963; background: #e2f4eb; }
.role-teacher { color: #386f98; background: #e7f1f9; }
.role-admin { color: #925d38; background: #f8ede4; }
.link-arrow { margin-left: auto; color: #789a91; font-size: 17px; }
.preview-note { margin: 18px 0 0; color: #8c9d9a; font-size: 11px; text-align: center; }

/* 三个主页使用同一套页面结构，内容由各自的 HTML 文件提供。 */
.dashboard-page { min-height: 100vh; background: var(--canvas); }
.preview-banner { padding: 7px 16px; color: #e2eee8; background: #18363d; font-size: 11px; letter-spacing: .04em; text-align: center; }
.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; max-width: 1200px; min-height: 74px; margin: 0 auto; padding: 0 28px; }
.top-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.top-nav a { padding: 9px 13px; border-radius: 8px; color: #66777b; font-size: 13px; font-weight: 650; white-space: nowrap; }
.top-nav a:hover, .top-nav a:focus-visible { color: var(--green); background: #eff6f3; }
.top-nav a.active { color: var(--green-dark); background: var(--green-pale); }
.header-home { padding-left: 19px; border-left: 1px solid var(--line); color: var(--green-dark); font-size: 13px; font-weight: 700; white-space: nowrap; }
.page-content { max-width: 1200px; margin: 0 auto; padding: 34px 28px 20px; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 35px; min-height: 250px; padding: 35px 48px; border-radius: 23px; color: #fff; background: linear-gradient(115deg, #134a4a, #1d7869); box-shadow: 0 22px 45px rgba(18, 84, 74, .14); }
.hero-student { background: radial-gradient(circle at 85% 5%, rgba(176,226,177,.22), transparent 30%), linear-gradient(115deg, #153d42, #247d6b); }
.hero-teacher { background: radial-gradient(circle at 85% 5%, rgba(154,214,238,.21), transparent 30%), linear-gradient(115deg, #183e52, #3a7986); }
.hero-admin { background: radial-gradient(circle at 85% 5%, rgba(246,211,160,.16), transparent 30%), linear-gradient(115deg, #2a3d4d, #456a70); }
.hero .eyebrow { margin-bottom: 11px; color: #bde8cf; }
.hero h1 { margin-bottom: 8px; font-size: clamp(26px, 3vw, 38px); font-weight: 750; letter-spacing: -.03em; }
.hero p { margin-bottom: 20px; color: #d2e9e1; font-size: 14px; }
.button-light { min-height: 42px; padding: 9px 17px; color: #155c55; background: #fff; font-size: 12px; }
.button-light:hover, .button-light:focus-visible { background: #e8f7ed; }
.hero-summary { flex: 0 0 262px; padding: 19px 22px; border: 1px solid rgba(255,255,255,.22); border-radius: 17px; background: rgba(255,255,255,.11); }
.hero-summary > span:first-child { color: #d4e9e6; font-size: 12px; }
.hero-summary strong { display: block; margin: 6px 0 0; font-size: 28px; line-height: 1.3; }
.hero-summary p { margin: 3px 0 13px; font-size: 12px; }
.hero-summary-line { display: block; height: 1px; margin-bottom: 11px; background: rgba(255,255,255,.24); }
.hero-summary small { color: #d4e6e4; font-size: 11px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .85fr); gap: 22px; margin-top: 24px; align-items: start; }
.card { min-width: 0; padding: 26px 28px; border: 1px solid #e6eeee; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.section-kicker { color: #52a087; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.card-heading h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.025em; }
.card-heading p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.soft-badge, .count-badge { flex: 0 0 auto; padding: 5px 10px; border-radius: 20px; color: var(--green-dark); background: var(--green-pale); font-size: 11px; font-weight: 700; }
.teacher-row { display: flex; align-items: start; gap: 15px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.teacher-row:last-child { padding-bottom: 4px; border-bottom: 0; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; font-weight: 750; }
.avatar-mint { color: #177565; background: #e2f3ed; }
.avatar-blue { color: #477699; background: #e8f2f9; }
.avatar-peach { color: #a8734e; background: #f9eee5; }
.teacher-info { min-width: 0; }
.teacher-info strong, .teacher-info > span { display: block; }
.teacher-info strong { font-size: 14px; }
.teacher-info > span { color: var(--muted); font-size: 12px; }
.time-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.time-tags span { padding: 4px 8px; border-radius: 6px; color: #40695d; background: #f1f7f3; font-size: 11px; }
.available-label { margin-left: auto; padding-top: 4px; color: var(--green); font-size: 11px; font-weight: 700; white-space: nowrap; }
.side-stack { display: grid; gap: 20px; }
.compact-card { padding: 24px; }
.compact-card .card-heading { margin-bottom: 19px; }
.booking-card { padding: 14px; border: 1px solid #deece5; border-radius: 13px; background: #f5faf6; }
.booking-date { display: block; margin-bottom: 8px; color: #3f806e; font-size: 11px; }
.booking-date strong { margin-left: 5px; font-size: 17px; }
.booking-card div strong { display: block; font-size: 13px; }
.booking-card p { margin: 2px 0 10px; color: var(--muted); font-size: 11px; }
.confirmed-tag { display: inline-block; padding: 4px 8px; border-radius: 6px; color: #177766; background: #e2f4eb; font-size: 10px; font-weight: 750; white-space: nowrap; }
.note-card { padding: 22px 24px; border: 1px solid #e7e9df; border-radius: 17px; background: #faf9f2; }
.note-symbol { color: #c39853; font-size: 23px; }
.note-card h3 { margin: 5px 0 4px; font-size: 14px; }
.note-card p { margin: 0; color: #77817a; font-size: 12px; line-height: 1.8; }
.page-footer { padding: 30px 0 12px; color: #9baaaa; font-size: 11px; text-align: center; }

/* 教师主页的时间列表和学生预约示例。 */
.schedule-row { display: flex; align-items: center; gap: 20px; min-height: 76px; border-bottom: 1px solid var(--line); }
.schedule-row:last-child { border-bottom: 0; }
.schedule-day { flex: 0 0 80px; }
.schedule-day strong, .schedule-day span, .schedule-time strong, .schedule-time span { display: block; }
.schedule-day strong, .schedule-time strong { font-size: 13px; }
.schedule-day span, .schedule-time span { color: var(--muted); font-size: 11px; }
.schedule-state { margin-left: auto; padding: 4px 9px; border-radius: 6px; color: var(--green-dark); background: var(--green-pale); font-size: 11px; font-weight: 700; white-space: nowrap; }
.state-booked { color: #617985; background: #edf2f4; }
.student-booking { display: flex; gap: 12px; align-items: start; padding: 14px; border-radius: 13px; background: #f6faf8; }
.student-booking .avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
.student-booking strong { font-size: 13px; }
.student-booking p { margin: 0; color: var(--muted); font-size: 11px; }
.student-booking small { color: #7b9990; font-size: 11px; }

/* 管理员主页的概况卡片和表格。 */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.stat-card { padding: 20px 24px; border: 1px solid #e6eeee; border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.stat-card span, .stat-card strong, .stat-card small { display: block; }
.stat-card span { color: var(--muted); font-size: 12px; }
.stat-card strong { margin: 1px 0; font-size: 31px; letter-spacing: -.04em; }
.stat-card small { color: #92a39f; font-size: 10px; }
.admin-grid { margin-top: 20px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.data-table th { padding: 14px 10px; border-bottom: 1px solid var(--line); color: #84948f; font-size: 11px; font-weight: 650; }
.data-table td { padding: 18px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.data-table tr:last-child td { border-bottom: 0; }
.role-summary { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.role-summary:last-child { padding-bottom: 0; border-bottom: 0; }
.role-summary strong, .role-summary small { display: block; }
.role-summary strong { font-size: 12px; }
.role-summary small { color: var(--muted); font-size: 11px; }

/* Admin Dashboard：实时汇总、老师总览和只读详情。 */
.dashboard-page [hidden] { display: none !important; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.admin-summary-grid .stat-card { min-width: 0; padding: 18px 20px; }
.admin-summary-grid .stat-card > span { min-height: 36px; color: #526873; font-weight: 700; }
.admin-summary-grid .stat-card > strong { color: #1c4f4c; font-size: 30px; }
.admin-summary-grid .stat-card > small { min-height: 16px; line-height: 1.5; }
.admin-load-error { margin: 10px 0 0; color: #a44232; font-size: 12px; font-weight: 700; }
.admin-summary-grid > .admin-load-error { grid-column: 1 / -1; }
.admin-section { margin-top: 22px; }
.admin-teacher-table { min-width: 680px; }
.admin-teacher-table th, .admin-teacher-table td { padding-right: 15px; padding-left: 15px; }
.admin-table-message { color: #83928d; text-align: center; }
.admin-teacher-link { padding: 0; border: 0; color: #176d60; background: transparent; font-size: 12px; font-weight: 750; text-align: left; }
.admin-teacher-link:hover, .admin-teacher-link:focus-visible { text-decoration: underline; }
.admin-select-label { display: block; margin: 5px 0 6px; color: #526873; font-size: 12px; font-weight: 750; }
.admin-teacher-select { width: min(100%, 420px); min-height: 42px; padding: 8px 11px; border: 1px solid #d8e3dc; border-radius: 9px; outline: none; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.admin-teacher-select:focus { border-color: #54a795; box-shadow: 0 0 0 3px rgba(23,124,109,.1); }
.admin-teacher-detail { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.admin-detail-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; }
.admin-detail-heading h3 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.admin-detail-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.admin-detail-stats span { padding: 7px 10px; border-radius: 8px; color: #536a61; background: #f1f7f3; font-size: 11px; }
.admin-detail-stats strong { margin-right: 4px; color: #176b59; font-size: 14px; }
.admin-detail-columns { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; }
.admin-detail-list { min-width: 0; }
.admin-detail-list h4 { margin: 0 0 10px; font-size: 14px; }
.admin-student-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.admin-student-list li { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 8px; background: #f7faf8; }
.admin-student-list strong { font-size: 12px; }
.admin-student-list span { color: #73857d; font-size: 11px; overflow-wrap: anywhere; }
.admin-empty-message { margin: 0; padding: 11px 0; color: #87968f; font-size: 12px; }
.admin-appointments-list { display: grid; gap: 8px; }
.admin-appointment-row { padding: 11px 13px; border: 1px solid #e5eee8; border-radius: 9px; background: #fbfdfb; }

/* 管理员每周重复 availability；预览完成后再提交规则。 */
.weekly-teacher-select { display: block; width: min(100%, 520px); min-height: 118px; padding: 8px 10px; border: 1px solid #d8e3dc; border-radius: 9px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.weekly-teacher-select:focus, .weekly-rule-card input:focus { border-color: #54a795; outline: none; box-shadow: 0 0 0 3px rgba(23,124,109,.1); }
.weekly-rule-help, .weekly-rule-card label, .weekly-weekdays legend { color: #667a70; font-size: 11px; }
.weekly-rule-help { margin: 6px 0 13px; }
.weekly-rule-editor { display: grid; gap: 12px; }
.weekly-rule-card { min-width: 0; margin: 0; padding: 15px; border: 1px solid #e2ebe5; border-radius: 12px; background: #fbfdfb; }
.weekly-rule-card > legend, .weekly-weekdays > legend { padding: 0 6px; color: #25483b; font-size: 12px; font-weight: 750; }
.weekly-rule-fields { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(120px, .7fr)) minmax(150px, 1fr) repeat(2, minmax(150px, .9fr)); align-items: end; gap: 12px; }
.weekly-rule-fields > label { display: grid; gap: 5px; }
.weekly-rule-card input:not([type="checkbox"]) { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid #d8e3dc; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.weekly-weekdays { min-width: 0; margin: 0; padding: 5px 7px 8px; border: 1px solid #e1eae4; border-radius: 8px; }
.weekly-weekday-options { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.weekly-weekday-options label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.weekly-optional { color: #899a91; font-size: 10px; font-weight: 500; }
.weekly-remove-rule { margin-top: 9px; padding: 5px 0; border: 0; color: #a24838; background: transparent; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.weekly-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.weekly-form-actions button { margin-top: 0; }
.weekly-rule-preview { margin-top: 16px; padding: 15px; border: 1px solid #dfeae3; border-radius: 11px; background: #f7fbf8; }
.weekly-rule-preview h3, .weekly-rules-list h3 { margin: 0 0 8px; color: #25483b; font-size: 14px; }
.weekly-preview-summary { margin: 0 0 10px; color: #536d60; font-size: 12px; line-height: 1.6; }
.weekly-preview-conflicts { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: #9b3f31; font-size: 11px; }
.weekly-rules-list { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.weekly-rules-table { min-width: 900px; }
.weekly-rule-state { display: inline-block; padding: 4px 8px; border-radius: 7px; color: #176b50; background: #e8f5eb; font-size: 10px; font-weight: 750; }
.weekly-rule-state.inactive { color: #6f7e75; background: #eef1ee; }
.weekly-rule-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.weekly-rule-actions button { padding: 5px 8px; border: 1px solid #d8e5db; border-radius: 7px; color: #176d60; background: #fff; font: inherit; font-size: 10px; font-weight: 700; }
.weekly-rule-actions button[data-rule-action="deactivate"] { color: #a24838; }
.weekly-form-error { margin: 10px 0 0; color: #a44232; font-size: 12px; font-weight: 700; }
.weekly-form-success { margin: 10px 0 0; color: #176b50; font-size: 12px; font-weight: 700; line-height: 1.6; }
.admin-appointment-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.admin-appointment-heading strong { color: #286b5a; font-size: 12px; }
.admin-appointment-heading span { font-size: 12px; font-weight: 750; }
.admin-appointment-row p { margin: 4px 0 0; color: #72847b; font-size: 11px; overflow-wrap: anywhere; }
.admin-appointment-row p strong { color: #465e52; }
.admin-user-filters { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, .7fr)); gap: 12px; margin: 4px 0 15px; }
.admin-user-filters label { display: grid; gap: 5px; color: #526873; font-size: 11px; font-weight: 750; }
.admin-user-filters input, .admin-user-filters select { width: 100%; min-height: 41px; padding: 8px 11px; border: 1px solid #d8e3dc; border-radius: 9px; outline: none; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.admin-user-filters input:focus, .admin-user-filters select:focus { border-color: #54a795; box-shadow: 0 0 0 3px rgba(23,124,109,.1); }
.admin-user-table { min-width: 1040px; }
.admin-user-table th, .admin-user-table td { padding: 10px 12px; vertical-align: middle; }
.admin-user-status { display: inline-block; padding: 4px 8px; border-radius: 7px; font-size: 10px; font-weight: 750; }
.admin-user-status.active { color: #176b50; background: #e8f5eb; }
.admin-user-status.inactive { color: #795b23; background: #fff4d9; }
.admin-user-actions { display: flex; min-width: 230px; flex-wrap: wrap; gap: 6px; }
.admin-user-action, .admin-danger-link { min-height: 32px; padding: 6px 9px; border: 1px solid #d8e5db; border-radius: 7px; color: #315c49; background: #fff; font: inherit; font-size: 10px; font-weight: 750; white-space: nowrap; }
.admin-user-action:hover, .admin-user-action:focus-visible { background: #f0f7f1; }
.admin-danger-link, .admin-danger-button { border-color: #b83e32; color: #fff; background: #b83e32; }
.admin-danger-link:hover, .admin-danger-link:focus-visible, .admin-danger-button:hover, .admin-danger-button:focus-visible { border-color: #982e25; background: #982e25; }
.admin-danger-button:disabled { opacity: .5; cursor: not-allowed; }
.admin-user-delete-note { margin: 13px 0 0; color: #77877e; font-size: 11px; }
.admin-delete-dialog { position: fixed; width: min(450px, calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border: 0; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 28px 75px rgba(8, 36, 29, .24); }
.admin-delete-dialog::backdrop { background: rgba(14, 37, 31, .58); }
.admin-delete-dialog h2 { margin: 4px 0 12px; font-size: 23px; }
.admin-delete-dialog > p:not(.section-kicker):not(.admin-delete-error) { color: #66796f; font-size: 12px; line-height: 1.55; }
.admin-delete-target { display: block; margin: 12px 0 18px; overflow-wrap: anywhere; color: #8f2d24; font-size: 13px; }
.admin-delete-dialog label { display: grid; gap: 6px; color: #526873; font-size: 11px; font-weight: 750; }
.admin-delete-dialog input { width: 100%; min-height: 41px; padding: 8px 11px; border: 1px solid #d8e3dc; border-radius: 9px; color: var(--ink); font: inherit; font-size: 12px; }
.admin-delete-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.admin-delete-actions button { min-height: 38px; margin-top: 0; padding: 8px 13px; border-radius: 8px; font: inherit; font-size: 11px; font-weight: 750; }
.admin-delete-error { margin: 10px 0 0; color: #a44232; font-size: 11px; font-weight: 700; }
.admin-dialog-close { position: absolute; top: 12px; right: 13px; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 7px; color: #71857b; background: #f2f6f2; font-size: 21px; line-height: 1; }
.admin-notification-section { margin-top: 20px; }
.admin-notification-form { display: grid; gap: 11px; }
.admin-notification-form > label { display: grid; gap: 6px; color: #526873; font-size: 12px; font-weight: 750; }
.admin-notification-form input,
.admin-notification-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #d8e3dc; border-radius: 9px; outline: none; color: var(--ink); background: #fff; font: inherit; font-size: 13px; line-height: 1.6; }
.admin-notification-form input { min-height: 42px; }
.admin-notification-form textarea { min-height: 135px; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-notification-form input:focus,
.admin-notification-form textarea:focus { border-color: #54a795; box-shadow: 0 0 0 3px rgba(23,124,109,.12); }
.notification-length-help { margin: 0; color: #77877e; font-size: 11px; line-height: 1.5; }
.admin-notification-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-notification-actions button { margin-top: 0; }
.admin-notification-preview { margin-top: 12px; padding: 16px; border: 1px solid #dce9df; border-radius: 12px; background: #f8fbf8; }
.admin-notification-preview h3,
.admin-notification-history h3 { margin: 0 0 12px; font-size: 16px; }
.admin-notification-preview-card { padding: 14px; border: 1px solid #e2ebe3; border-radius: 9px; background: #fff; }
.admin-notification-preview-card h4 { margin: 0 0 8px; color: #25483b; font-size: 14px; overflow-wrap: anywhere; }
.admin-notification-preview-card p,
.admin-notification-history-body { margin: 0; color: #52675c; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-notification-recipient-count { margin: 12px 0 5px; color: #176b50; font-size: 13px; font-weight: 750; }
.admin-notification-history { margin-top: 25px; padding-top: 19px; border-top: 1px solid var(--line); }
.admin-notification-history-list { display: grid; gap: 10px; }
.admin-notification-history-card { min-width: 0; padding: 14px 15px; border: 1px solid #e3ece6; border-radius: 10px; background: #fbfdfb; }
.admin-notification-history-card h4 { margin: 0 0 7px; color: #25483b; font-size: 14px; overflow-wrap: anywhere; }
.admin-notification-history-meta { margin: 9px 0 0; color: #77877e; font-size: 11px; line-height: 1.5; }
.admin-notification-success { margin: 3px 0 0; padding: 11px 13px; border-radius: 9px; color: #176b50; background: #e8f5eb; font-size: 12px; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.admin-notification-section button:focus-visible { outline: 3px solid rgba(35, 131, 98, .3); outline-offset: 2px; }
.in-app-notification-dialog { position: fixed; width: min(560px, calc(100vw - 30px)); max-height: min(78vh, 720px); overflow: auto; padding: 30px; border: 1px solid #e3ece6; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 28px 75px rgba(8, 36, 29, .26); }
.in-app-notification-dialog::backdrop { background: rgba(14, 37, 31, .62); }
.in-app-notification-kicker { margin-bottom: 8px; color: #207b5f; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.in-app-notification-dialog h2 { margin: 0 0 15px; color: #25483b; font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; }
.in-app-notification-body { max-height: 50vh; overflow: auto; padding: 14px 15px; border: 1px solid #e4eee7; border-radius: 10px; color: #435a4e; background: #f8fbf8; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.in-app-notification-error { margin: 12px 0 0; color: #a44232; font-size: 12px; font-weight: 700; line-height: 1.55; }
.in-app-notification-actions { display: flex; justify-content: flex-end; margin-top: 19px; }
.in-app-notification-confirm { min-height: 43px; padding: 10px 19px; border: 1px solid #207b5f; border-radius: 9px; color: #fff; background: #207b5f; font: inherit; font-size: 13px; font-weight: 750; }
.in-app-notification-confirm:hover { background: #15674d; }
.in-app-notification-confirm:focus-visible { outline: 3px solid rgba(35, 131, 98, .3); outline-offset: 3px; }
.in-app-notification-confirm:disabled { opacity: .65; cursor: wait; }
.in-app-notification-status { position: fixed; z-index: 1000; right: 16px; bottom: 16px; width: min(460px, calc(100vw - 32px)); margin: 0; padding: 12px 15px; border: 1px solid #f0d3be; border-radius: 10px; color: #7f3c2d; background: #fff7f1; box-shadow: 0 10px 28px rgba(8, 36, 29, .12); font-size: 12px; line-height: 1.5; }

/* 管理员批量创建账号：预览阶段只显示检查结果，确认按钮单独触发写入。 */
.bulk-users-section { margin-top: 24px; }
.bulk-users-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bulk-user-form { min-width: 0; padding: 19px; border: 1px solid #e3ece6; border-radius: 14px; background: #fbfdfb; }
.bulk-user-form > label { display: block; margin-bottom: 3px; color: #25483b; font-size: 15px; font-weight: 750; }
.bulk-user-help { margin: 0 0 10px; color: var(--muted); font-size: 11px; }
.bulk-user-form textarea { display: block; width: 100%; min-height: 140px; resize: vertical; padding: 11px 12px; border: 1px solid #d8e3dc; border-radius: 9px; outline: none; color: var(--ink); background: #fff; font: inherit; font-size: 12px; line-height: 1.65; }
.bulk-user-form textarea:focus { border-color: #54a795; box-shadow: 0 0 0 3px rgba(23,124,109,.1); }
.bulk-preview-button, .bulk-confirm-button, .bulk-cancel-button { min-height: 39px; margin-top: 11px; padding: 8px 14px; border: 1px solid #207b5f; border-radius: 9px; font-size: 12px; font-weight: 750; }
.bulk-preview-button, .bulk-confirm-button { color: #fff; background: #207b5f; }
.bulk-cancel-button { border-color: #d8e5db; color: #476452; background: #fff; }
.bulk-cancel-button:hover, .bulk-cancel-button:focus-visible { background: #f0f7f1; }
.bulk-preview-button:hover, .bulk-preview-button:focus-visible, .bulk-confirm-button:hover, .bulk-confirm-button:focus-visible { background: #15674d; }
.bulk-preview-button:disabled, .bulk-confirm-button:disabled, .bulk-cancel-button:disabled { opacity: .65; cursor: wait; }
.bulk-preview { margin-top: 17px; padding-top: 14px; border-top: 1px solid #e3ece6; }
.bulk-preview-summary { margin: 0 0 9px; color: #536d60; font-size: 11px; font-weight: 700; }
.bulk-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-preview-results { display: grid; gap: 6px; max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.bulk-preview-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: #fff; font-size: 11px; }
.bulk-preview-person { min-width: 0; overflow-wrap: anywhere; }
.bulk-preview-person strong, .bulk-preview-person span { display: block; }
.bulk-preview-person span { color: #77877e; }
.bulk-preview-status { flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; color: #176b50; background: #e8f5eb; font-size: 10px; font-weight: 750; }
.bulk-preview-status.exists, .bulk-preview-status.inactive_exists, .bulk-preview-status.duplicate { color: #795b23; background: #fff4d9; }
.bulk-preview-status.invalid { color: #a44232; background: #fff0ec; }
.bulk-preview-status.added { color: #fff; background: #207b5f; }
.bulk-preview-message { margin: 3px 0 0; color: #798981; font-size: 10px; }
.bulk-form-error { margin: 10px 0 0; color: #a44232; font-size: 11px; font-weight: 700; }

@media (max-width: 700px) {
  .admin-detail-columns { grid-template-columns: 1fr; gap: 20px; }
  .admin-user-filters { grid-template-columns: 1fr; }
  .bulk-users-grid { grid-template-columns: 1fr; }
  .bulk-user-form { padding: 15px; }
  .admin-delete-dialog { padding: 25px 21px; }
  .weekly-rule-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-weekdays { grid-column: 1 / -1; }
}

/* 小屏幕时，导航可横向滑动，内容卡片改为单列。 */
@media (max-width: 900px) {
  .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-inner { flex-wrap: wrap; gap: 8px 18px; padding-top: 15px; padding-bottom: 13px; }
  .top-nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; }
  .header-home { margin-left: auto; }
  .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .login-shell { padding: 22px 16px; }
  .login-card { padding: 25px 22px; }
  .login-card h1 { font-size: 29px; }
  .page-content { padding: 20px 15px; }
  .header-inner { padding-right: 15px; padding-left: 15px; }
  .brand { font-size: 14px; }
  .top-nav a { padding: 8px 10px; font-size: 12px; }
  .hero { display: block; padding: 28px 24px; }
  .hero-summary { margin-top: 22px; }
  .card { padding: 21px 19px; }
  .teacher-row { gap: 10px; }
  .teacher-row .avatar { width: 36px; height: 36px; }
  .available-label { display: none; }
  .stats-grid { gap: 8px; }
  .stat-card { padding: 15px 13px; }
  .stat-card strong { font-size: 25px; }
  .admin-summary-grid { gap: 9px; }
  .admin-summary-grid .stat-card { padding: 14px 13px; }
  .admin-summary-grid .stat-card > span { min-height: 34px; font-size: 11px; }
  .admin-summary-grid .stat-card > strong { font-size: 25px; }
  .admin-detail-stats { gap: 6px; }
  .admin-detail-stats span { padding: 6px 8px; font-size: 10px; }
}

/* 学生主页：默认老师的周视图是首屏重点；这些样式只影响 student.html。 */
.student-page { min-height: 100vh; background: #f3f7f5; }
.student-page [hidden] { display: none !important; }
.student-topbar { display: flex; align-items: center; gap: 20px; min-height: 68px; padding: 0 max(24px, calc((100vw - 1080px) / 2)); border-bottom: 1px solid #e4ece8; background: #fff; }
.student-topbar .brand { font-size: 14px; }
.student-demo-note { margin-left: auto; color: #82958e; font-size: 11px; white-space: nowrap; }
.student-back { color: #176d60; font-size: 12px; font-weight: 700; white-space: nowrap; }
.student-back:hover, .student-back:focus-visible { text-decoration: underline; }
.header-logout { margin: 0; }
.header-logout button { min-height: 34px; padding: 6px 11px; border: 1px solid #d8e5db; border-radius: 8px; color: #476452; background: #fff; font-size: 11px; font-weight: 750; }
.header-logout button:hover, .header-logout button:focus-visible { border-color: #dfc4bd; color: #a24838; background: #fff6f3; }
.student-main { max-width: 1080px; margin: 0 auto; padding: 28px 24px 48px; }
.student-primary { overflow: hidden; border: 1px solid #dbe9e1; border-radius: 22px; background: #fff; box-shadow: 0 18px 45px rgba(28, 70, 56, .07); }
.student-primary-top { display: flex; align-items: center; justify-content: space-between; min-height: 136px; padding: 28px 36px; background: radial-gradient(circle at 82% 10%, rgba(143, 218, 174, .2), transparent 32%), linear-gradient(110deg, #e5f4eb, #f6fbf7); }
.student-overline { margin: 0 0 6px; color: #27816c; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.student-primary h1 { margin: 0; color: #173d36; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.04em; line-height: 1.2; }
.student-teacher-mark { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #aed9bf; border-radius: 20px; color: #176b58; background: rgba(255,255,255,.8); font-family: Georgia, serif; font-size: 34px; }
.student-week-panel { padding: 27px 36px 34px; }
.student-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.student-section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.student-section-heading p { margin: 1px 0 0; color: #7c8d86; font-size: 12px; }
.student-period-nav { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.student-period-nav button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #dce8e1; border-radius: 9px; color: #2a675a; background: #fff; font-size: 23px; line-height: 1; }
.student-period-nav button:hover, .student-period-nav button:focus-visible { border-color: #80ba9d; background: #edf7ef; }
.student-period-nav span { min-width: 100px; font-size: 13px; font-weight: 750; text-align: center; white-space: nowrap; }
.student-week-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.student-week-day { min-width: 0; min-height: 188px; padding: 13px 12px; border: 1px solid #e7eee9; border-radius: 14px; background: #fbfdfb; }
.student-week-day-heading { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-bottom: 11px; border-bottom: 1px solid #e6eee8; }
.student-weekday-name { color: #748a7d; font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.student-weekday-date { color: #26473b; font-size: 20px; line-height: 1.25; }
.student-no-slot { display: block; margin-top: 18px; color: #b6c3bb; font-size: 18px; text-align: center; }
.student-slot-button { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 9px; padding: 7px 3px; border: 1px solid #badfc8; border-radius: 10px; color: #176b52; background: #eaf7ed; line-height: 1.2; }
.student-slot-button strong { font-size: 14px; }
.student-slot-button span { margin-top: 1px; font-size: 11px; }
.student-slot-button:hover, .student-slot-button:focus-visible { border-color: #2e9471; color: #fff; background: #238362; }
.student-slot-button.booked, .student-slot-button.booked:hover { border-color: #d8dfda; color: #78857c; background: #eef1ee; cursor: not-allowed; }
.student-slot-button .student-slot-status { color: #747f77; font-size: 9px; font-weight: 750; }
.student-availability-location { display: block; overflow-wrap: anywhere; margin-top: 8px; color: #75877d; font-size: 10px; text-align: center; }

/* 学生只看自己的 confirmed 预约，并在取消前看到一条确认提示。 */
.student-bookings { margin-top: 36px; }
.student-bookings-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 12px; }
.student-booking-card { padding: 17px 19px; border: 1px solid #e0eae3; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.student-booking-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.student-booking-header h3 { margin: 0; color: #25483b; font-size: 16px; }
.student-booking-type { padding: 4px 8px; border-radius: 7px; color: #533d8d; background: #eee9fa; font-size: 10px; font-weight: 800; }
.student-booking-details { margin: 11px 0 14px; }
.student-booking-details div { display: grid; grid-template-columns: 95px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid #edf1ed; }
.student-booking-details dt { color: #7b8b80; font-size: 11px; }
.student-booking-details dd { margin: 0; color: #324b3e; font-size: 12px; font-weight: 700; }
.student-cancel-button, .student-confirm-cancel-button { min-height: 35px; padding: 7px 11px; border: 1px solid #dfc4bd; border-radius: 8px; color: #a24838; background: #fff; font-size: 11px; font-weight: 750; }
.student-cancel-button:hover, .student-cancel-button:focus-visible, .student-confirm-cancel-button:hover, .student-confirm-cancel-button:focus-visible { background: #fff1ed; }
.student-cancel-confirmation { margin-top: 13px; padding: 12px; border: 1px solid #f0d6c9; border-radius: 10px; background: #fff9f6; }
.student-cancel-question { margin: 0 0 6px; color: #5b3b33; font-size: 12px; font-weight: 800; }
.student-cancel-summary { margin: 0 0 10px; color: #80655d; font-size: 11px; }
.student-cancel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.student-keep-button { min-height: 35px; padding: 7px 11px; border: 1px solid #d8e5db; border-radius: 8px; color: #476452; background: #fff; font-size: 11px; font-weight: 750; }
.student-keep-button:hover, .student-keep-button:focus-visible { background: #f0f7f1; }
.student-cancel-error { margin: 0 0 9px; color: #a44232; font-size: 11px; font-weight: 700; }
.student-keep-button:disabled, .student-confirm-cancel-button:disabled { opacity: .65; cursor: default; }

/* “其他老师”月历刻意保持紧凑，点日期后在下方显示结果。 */
.student-other { margin-top: 38px; }
.student-other-heading { margin-bottom: 16px; }
.student-other-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
.student-other-card { padding: 28px 32px; border: 1px solid #e0eae3; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.student-calendar { max-width: 660px; }
.student-calendar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.student-calendar-caption { color: #71847b; font-size: 12px; font-weight: 650; }
.student-calendar-weekdays, .student-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.student-calendar-weekdays span { padding-bottom: 8px; color: #84958c; font-size: 10px; font-weight: 750; text-align: center; }
.student-calendar-day { position: relative; min-height: 42px; padding: 5px 0 9px; border: 1px solid transparent; border-radius: 9px; color: #35483e; background: #f8faf8; font-size: 13px; font-weight: 650; }
.student-calendar-day:hover, .student-calendar-day:focus-visible { border-color: #a8d7b8; background: #edf7ef; }
.student-calendar-day.has-slots::after { content: ""; position: absolute; bottom: 5px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #2b9b6c; }
.student-calendar-day.today { border: 2px solid #dfaa5a; color: #8a581c; background: #fff1dc; }
.student-calendar-day.today:hover, .student-calendar-day.today:focus-visible { background: #ffe8bf; }
.student-calendar-day.selected { border-color: #207b5f; color: #fff; background: #207b5f; }
.student-calendar-day.today.selected { border-color: #dfaa5a; box-shadow: inset 0 0 0 2px #fff1dc; }
.student-calendar-day.selected::after { background: #fff; }
.student-day-results { max-width: 660px; min-height: 70px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #e4ece6; }
.student-empty-message { margin: 5px 0; color: #87968d; font-size: 13px; }
.student-results-date { margin: 0 0 2px; font-size: 19px; }
.student-results-label { margin: 0 0 13px; color: #688273; font-size: 12px; font-weight: 700; }
.student-teacher-result { margin-top: 10px; padding: 17px 19px; border: 1px solid #e1ebe4; border-radius: 13px; background: #fbfdfb; }
.student-result-name { margin: 0 0 7px; color: #25483b; font-size: 15px; }
.student-result-slot { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 9px 0; border-top: 1px solid #e8eee9; }
.student-result-details { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 15px; }
.student-result-details strong { font-size: 13px; }
.student-result-details span { color: #75877d; font-size: 12px; }
.student-book-button { min-width: 64px; padding: 6px 13px; border: 1px solid #b7d9c2; border-radius: 8px; color: #176c52; background: #e8f6eb; font-size: 12px; font-weight: 750; }
.student-book-button:hover, .student-book-button:focus-visible { color: #fff; border-color: #207b5f; background: #207b5f; }
.student-book-button:disabled, .student-book-button:disabled:hover { border-color: #d8dfda; color: #78857c; background: #eef1ee; cursor: not-allowed; }
.student-page-footnote { margin: 23px 0 0; color: #91a097; font-size: 11px; text-align: center; }

/* 原生 dialog 是同一份预约确认区域，关闭后可继续选择其他时段。 */
.student-booking-dialog { width: min(410px, calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto; padding: 29px 30px 25px; border: 0; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 28px 75px rgba(8, 36, 29, .24); }
.student-booking-dialog::backdrop { background: rgba(14, 37, 31, .55); }
.student-booking-dialog h2 { margin: 0 0 22px; font-size: 26px; letter-spacing: -.035em; }
.student-dialog-close { position: absolute; top: 15px; right: 17px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; color: #71857b; background: #f2f6f2; font-size: 22px; line-height: 1; }
.student-dialog-close:hover, .student-dialog-close:focus-visible { color: #1d5b47; background: #e2f1e6; }
.student-confirm-details { margin: 0 0 24px; }
.student-confirm-details div { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e7eee8; }
.student-confirm-details dt { color: #7b8b80; font-size: 12px; }
.student-confirm-details dd { margin: 0; font-size: 14px; font-weight: 750; }
.student-meeting-type { display: flex; gap: 11px; margin: 0 0 20px; padding: 0; border: 0; }
.student-meeting-type legend { width: 100%; margin-bottom: 9px; color: #4d6358; font-size: 12px; font-weight: 750; }
.student-meeting-type legend span { color: #b16140; }
.student-meeting-type label { display: inline-flex; align-items: center; gap: 8px; min-width: 90px; padding: 9px 13px; border: 1px solid #dce8df; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.student-meeting-type label:has(input:checked) { border-color: #80b796; color: #176b52; background: #edf7ef; }
.student-meeting-type input { margin: 0; accent-color: #207b5f; }
.student-confirm-button { width: 100%; min-height: 46px; border: 0; border-radius: 10px; color: #fff; background: #207b5f; font-size: 14px; font-weight: 750; }
.student-confirm-button:hover, .student-confirm-button:focus-visible { background: #15674d; }
.student-confirm-button:disabled { background: #8faf9c; cursor: default; }
.student-confirm-feedback { margin: 13px 0 0; color: #176d52; font-size: 12px; font-weight: 700; }
.student-dialog-note { margin: 10px 0 0; color: #91a097; font-size: 11px; text-align: center; }

@media (max-width: 600px) {
  .student-topbar { gap: 10px; min-height: 58px; padding: 0 14px; }
  .student-topbar .brand { font-size: 12px; }
  .student-topbar .brand-mark { width: 29px; height: 29px; font-size: 19px; }
  .student-demo-note { display: none; }
  .student-back { margin-left: auto; font-size: 10px; }
  .student-main { padding: 17px 12px 38px; }
  .student-primary-top { min-height: 112px; padding: 22px 19px; }
  .student-teacher-mark { width: 50px; height: 50px; border-radius: 15px; font-size: 28px; }
  .student-week-panel { padding: 19px 13px 24px; }
  .student-section-heading { flex-wrap: wrap; margin-bottom: 15px; }
  .student-section-heading h2 { font-size: 20px; }
  .student-period-nav { gap: 7px; }
  .student-period-nav button { width: 29px; height: 29px; }
  .student-period-nav span { min-width: 90px; font-size: 12px; }
  .student-week-grid { gap: 4px; }
  .student-week-day { min-height: 160px; padding: 8px 4px; border-radius: 9px; }
  .student-weekday-name { font-size: 9px; }
  .student-weekday-date { font-size: 17px; }
  .student-slot-button { margin-top: 7px; padding: 7px 1px; border-radius: 7px; }
  .student-slot-button strong { font-size: 11px; }
  .student-slot-button span { font-size: 9px; }
  .student-other { margin-top: 27px; }
  .student-other-heading h2 { font-size: 22px; }
  .student-other-card { padding: 20px 15px; }
  .student-calendar-top { flex-wrap: wrap; }
  .student-calendar-day { min-height: 37px; }
  .student-teacher-result { padding: 13px 14px; }
  .student-booking-dialog { padding: 25px 22px 20px; }
}

/* Teacher dashboard: today's appointments, a compact two-week view, and inline day details. */
.teacher-page { min-height: 100vh; background: #f3f7f5; }
.teacher-page [hidden] { display: none !important; }
.teacher-topbar { display: flex; align-items: center; gap: 20px; min-height: 68px; padding: 0 clamp(18px, 3vw, 48px); border-bottom: 1px solid #e4ece8; background: #fff; }
.teacher-topbar .brand { font-size: 14px; }
.teacher-topbar .header-logout button { min-height: 38px; font-size: 12px; }
.teacher-demo-note { margin-left: auto; color: #82958e; font-size: 11px; white-space: nowrap; }
.teacher-main { width: 100%; max-width: 1500px; margin: 0 auto; padding: 19px clamp(18px, 2.5vw, 38px) 38px; }
.teacher-overline { margin: 0 0 4px; color: #27816c; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.teacher-today-panel, .teacher-calendar-panel, .teacher-selected-panel { width: 100%; min-width: 0; border: 1px solid #dfeae3; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.teacher-page button:focus-visible { outline: 3px solid rgba(35, 131, 98, .28); outline-offset: 2px; }
.teacher-page button:disabled { cursor: not-allowed; }
.teacher-today-panel { margin-bottom: 14px; padding: 15px 18px 16px; }
.teacher-today-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.teacher-today-heading h2 { margin: 0; color: #173d36; font-size: 20px; letter-spacing: -.025em; }
.teacher-today-date { color: #6f8278; font-size: 12px; font-weight: 650; }
.teacher-today-appointments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.teacher-today-card { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 60px; padding: 10px 12px; border: 1px solid #e4ece5; border-radius: 10px; background: #fbfdfb; }
.teacher-today-time { flex: 0 0 auto; color: #173d36; font-size: 14px; white-space: nowrap; }
.teacher-today-details { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; min-width: 0; overflow-wrap: anywhere; }
.teacher-today-student { color: #533d8d; font-size: 13px; font-weight: 700; }
.teacher-today-meeting-type { padding: 2px 6px; border-radius: 5px; color: #533d8d; background: #eee9fa; font-size: 10px; font-weight: 800; }
.teacher-today-location { overflow-wrap: anywhere; color: #687c71; font-size: 12px; }
.teacher-list-empty { margin: 0; padding: 8px 0 2px; color: #788b80; font-size: 13px; }
.teacher-workspace-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 16px; }
.teacher-calendar-panel { padding: 16px 17px 13px; }
.teacher-calendar-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 11px; }
.teacher-calendar-head h2 { margin: 0; color: #173d36; font-size: 18px; letter-spacing: -.025em; }
.teacher-calendar-head p { margin: 3px 0 0; color: #74877c; font-size: 12px; }
.teacher-period-nav { display: grid; grid-template-areas: "prev today label next"; grid-template-columns: auto auto minmax(120px, 1fr) auto; align-items: center; gap: 6px; margin-left: auto; }
.teacher-period-nav button { min-height: 38px; padding: 7px 9px; border: 1px solid #dce8e1; border-radius: 8px; color: #2a675a; background: #fff; font-size: 12px; font-weight: 750; white-space: nowrap; }
#teacher-period-prev { grid-area: prev; }
#teacher-period-today { grid-area: today; }
.teacher-period-nav span { grid-area: label; color: #304c3e; font-size: 12px; font-weight: 750; text-align: center; white-space: nowrap; }
#teacher-period-next { grid-area: next; }
.teacher-period-nav button:hover, .teacher-period-nav button:focus-visible { border-color: #80ba9d; background: #edf7ef; }
.teacher-calendar-scroll { min-width: 0; padding-bottom: 2px; }
.teacher-weekdays, .teacher-two-week-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.teacher-weekdays { margin-bottom: 5px; }
.teacher-weekdays span { padding: 4px 6px; color: #72857a; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-align: left; }
.teacher-two-week-grid { grid-auto-rows: minmax(88px, auto); }
.teacher-calendar-day { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 88px; overflow: visible; padding: 7px 7px; border: 1px solid #e6eee8; border-radius: 10px; color: #2b4438; background: #fbfdfb; text-align: left; }
.teacher-calendar-day:hover, .teacher-calendar-day:focus-visible { border-color: #89bea0; background: #f0f8f2; }
.teacher-calendar-day.selected { padding: 6px 7px; border: 2px solid #218361; background: #f1f9f3; }
.teacher-calendar-day.today { border-color: #dfaa5a; background: #fff8ed; }
.teacher-calendar-day.today.selected { border: 2px solid #218361; }
.teacher-calendar-number { flex: 0 0 auto; font-size: 16px; line-height: 1.15; }
.teacher-calendar-day.today .teacher-calendar-number::after { content: "TODAY"; margin-left: 5px; color: #a7722d; font-size: 8px; font-weight: 800; letter-spacing: .05em; vertical-align: 2px; }
.teacher-calendar-counts { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.teacher-calendar-count { overflow-wrap: anywhere; font-size: 11px; line-height: 1.25; }
.teacher-calendar-count.available { color: #24724f; }
.teacher-calendar-count.booked { color: #654ba3; }
.teacher-calendar-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 13px; padding: 8px 2px 0; color: #586e61; font-size: 11px; font-weight: 700; }
.teacher-calendar-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.teacher-calendar-legend i { width: 9px; height: 9px; border-radius: 3px; }
.legend-available { background: #2e9a69; }
.legend-booked { background: #8163c8; }
.teacher-selected-panel { margin-top: 0; padding: 16px 18px; }
.teacher-selected-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.teacher-selected-heading h2 { margin: 0; color: #173d36; font-size: 18px; letter-spacing: -.025em; }
.teacher-selected-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.teacher-add-button { min-height: 38px; padding: 7px 10px; border: 1px solid #207b5f; border-radius: 8px; color: #fff; background: #207b5f; font-size: 12px; font-weight: 750; white-space: nowrap; }
.teacher-add-button:hover, .teacher-add-button:focus-visible { background: #15674d; }
.teacher-add-button.secondary { color: #207b5f; background: #fff; }
.teacher-add-button.secondary:hover, .teacher-add-button.secondary:focus-visible { background: #edf7ef; }
.teacher-add-button:disabled { opacity: .5; cursor: not-allowed; }
.teacher-day-message { margin: 0 0 12px; padding: 9px 11px; border-radius: 8px; color: #176b50; background: #eaf6ed; font-size: 12px; font-weight: 700; }
.teacher-day-message.error { color: #a44232; background: #fff0ec; }
.teacher-form-panel { margin: 0 0 14px; padding: 14px; border: 1px solid #dfeae3; border-radius: 13px; background: #f9fcf9; }
.teacher-form-panel h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: -.02em; }
.teacher-form-date { margin: -4px 0 10px; color: #6f8278; font-size: 12px; }
.teacher-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.teacher-appointment-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.teacher-form-grid label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: #4d6559; font-size: 12px; font-weight: 750; }
.teacher-form-grid input, .teacher-form-grid select, .teacher-form-grid output { width: 100%; min-width: 0; min-height: 40px; padding: 7px 8px; border: 1px solid #d9e5dc; border-radius: 7px; outline: none; color: #233f31; background: #fff; font-size: 12px; font-weight: 500; }
.teacher-form-grid output { display: flex; align-items: center; color: #536b5e; background: #f0f4f0; }
.teacher-form-grid input:focus, .teacher-form-grid select:focus { border-color: #64ab83; box-shadow: 0 0 0 3px rgba(35,131,98,.12); }
.teacher-form-grid input:disabled, .teacher-form-grid select:disabled { color: #64776c; background: #f0f4f0; }
.teacher-form-message { margin: 9px 0 0; color: #176b50; font-size: 12px; font-weight: 700; }
.teacher-form-message.error { color: #b14f3c; }
.teacher-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.teacher-save-button, .teacher-cancel-button { min-height: 38px; padding: 7px 13px; border-radius: 8px; font-size: 12px; font-weight: 750; }
.teacher-save-button { border: 1px solid #207b5f; color: #fff; background: #207b5f; }
.teacher-save-button:hover, .teacher-save-button:focus-visible { background: #15674d; }
.teacher-save-button:disabled { opacity: .55; cursor: wait; }
.teacher-cancel-button { border: 1px solid #d8e5da; color: #476452; background: #fff; }
.teacher-cancel-button:hover, .teacher-cancel-button:focus-visible { background: #f0f7f1; }
.teacher-selected-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.teacher-selected-list { min-width: 0; }
.teacher-selected-list h3 { margin: 0 0 7px; color: #344d40; font-size: 16px; }
.teacher-schedule-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; min-height: 57px; padding: 9px 2px; border-top: 1px solid #e9efe9; }
.teacher-schedule-color { align-self: stretch; flex: 0 0 4px; border-radius: 4px; background: #27885d; }
.teacher-schedule-row.booked .teacher-schedule-color { background: #7255b7; }
.teacher-schedule-details { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.teacher-schedule-time { color: #263f32; font-size: 13px; white-space: nowrap; }
.teacher-schedule-location, .teacher-schedule-student { color: #687c71; font-size: 12px; }
.teacher-schedule-row.booked .teacher-schedule-student { color: #533d8d; font-weight: 700; }
.teacher-schedule-meeting-type { padding: 2px 6px; border-radius: 5px; color: #533d8d; background: #eee9fa; font-size: 10px; font-weight: 750; }
.teacher-schedule-badge { margin-left: auto; padding: 4px 7px; border-radius: 6px; color: #176b50; background: #e8f5eb; font-size: 10px; font-weight: 750; }
.teacher-schedule-row.booked .teacher-schedule-badge { color: #533d8d; background: #eee9fa; }
.teacher-schedule-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.teacher-schedule-item { min-width: 0; }
.teacher-edit-button, .teacher-delete-button { min-height: 32px; padding: 6px 9px; border: 1px solid #d8e5db; border-radius: 7px; background: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.teacher-edit-button { color: #2b7054; }
.teacher-delete-button { color: #a85745; }
.teacher-edit-button:hover, .teacher-edit-button:focus-visible { background: #edf7ef; }
.teacher-delete-button:hover, .teacher-delete-button:focus-visible { background: #fff0ec; }
.teacher-cancel-confirmation { margin: 0 0 9px 14px; padding: 10px 11px; border: 1px solid #f0d6c9; border-radius: 8px; background: #fff9f6; }
.teacher-cancel-question { margin: 0 0 5px; color: #5b3b33; font-size: 12px; font-weight: 800; }
.teacher-cancel-summary { margin: 0 0 8px; color: #80655d; font-size: 11px; }
.teacher-cancel-actions { display: flex; gap: 6px; }
.teacher-cancel-actions button:disabled { opacity: .65; cursor: default; }
.teacher-page-footnote { margin: 17px 0 0; color: #a44232; font-size: 12px; text-align: center; }

@media (max-width: 1080px) {
  .teacher-workspace-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .teacher-main { padding-right: 20px; padding-left: 20px; }
  .teacher-calendar-panel { padding: 16px; }
  .teacher-calendar-head { align-items: start; flex-direction: column; }
  .teacher-period-nav { width: 100%; margin-left: 0; }
  .teacher-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-appointment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .teacher-selected-columns { grid-template-columns: 1fr; gap: 17px; }
}
@media (max-width: 600px) {
  .teacher-topbar { gap: 10px; min-height: 58px; padding: 0 14px; }
  .teacher-topbar .brand { font-size: 12px; }
  .teacher-topbar .brand-mark { width: 29px; height: 29px; font-size: 19px; }
  .teacher-demo-note { display: none; }
  .teacher-main { padding: 17px 12px 34px; }
  .teacher-today-panel { padding: 14px 13px; border-radius: 14px; }
  .teacher-today-heading h2 { font-size: 19px; }
  .teacher-today-heading { align-items: start; flex-direction: column; gap: 4px; }
  .teacher-today-appointments { grid-template-columns: 1fr; gap: 6px; }
  .teacher-today-card { gap: 9px; padding: 8px 9px; }
  .teacher-today-details { gap: 3px 7px; }
  .teacher-calendar-panel { padding: 14px 11px 12px; border-radius: 14px; }
  .teacher-calendar-head { gap: 10px; margin-bottom: 10px; }
  .teacher-calendar-head h2 { font-size: 18px; }
  .teacher-period-nav { grid-template-areas: "label label label" "prev today next"; grid-template-columns: 1fr auto 1fr; gap: 6px; }
  .teacher-period-nav span { padding: 2px 0; }
  #teacher-period-prev { justify-self: start; }
  #teacher-period-next { justify-self: end; }
  .teacher-period-nav button { min-height: 40px; padding: 6px 5px; font-size: 12px; line-height: 1.2; white-space: normal; }
  .teacher-weekdays, .teacher-two-week-grid { gap: 4px; }
  .teacher-weekdays span { padding: 4px 2px; font-size: 11px; text-align: center; }
  .teacher-two-week-grid { grid-auto-rows: minmax(84px, auto); }
  .teacher-calendar-day { min-height: 84px; padding: 6px 4px; border-radius: 8px; }
  .teacher-calendar-day.selected { padding: 5px 4px; }
  .teacher-calendar-number { font-size: 15px; }
  .teacher-calendar-day.today .teacher-calendar-number::after { content: none; }
  .teacher-calendar-counts { gap: 3px; margin-top: 5px; }
  .teacher-calendar-count { font-size: 11px; }
  .teacher-calendar-legend { gap: 7px 11px; font-size: 11px; }
  .teacher-selected-panel { padding: 14px 13px; border-radius: 14px; }
  .teacher-selected-heading { align-items: start; flex-direction: column; }
  .teacher-selected-actions { justify-content: flex-start; gap: 5px; }
  .teacher-add-button { min-height: 38px; padding: 7px 9px; font-size: 12px; }
  .teacher-form-panel { padding: 13px 11px; }
  .teacher-form-grid { grid-template-columns: 1fr; gap: 9px; }
  .teacher-appointment-grid { grid-template-columns: 1fr; }
  .teacher-schedule-row { flex-wrap: wrap; gap: 6px 8px; }
  .teacher-schedule-details { flex: 1 1 calc(100% - 15px); }
  .teacher-schedule-badge { margin-left: 14px; }
  .teacher-schedule-actions { margin-left: auto; }
}

/* Admin readability: keep dashboard adjustments isolated from every other page. */
.dashboard-page .hero { min-height: 220px; padding: 32px 40px; }
.dashboard-page .hero h1 { font-size: clamp(28px, 2.8vw, 32px); }
.dashboard-page .hero p { margin-bottom: 0; font-size: 15px; }
.dashboard-page .page-content { padding-top: 28px; }
.dashboard-page .card { padding: 23px 24px; }
.dashboard-page .card-heading { margin-bottom: 12px; }
.dashboard-page .card-heading h2 { font-size: 20px; }
.dashboard-page .card-heading p { font-size: 13px; line-height: 1.55; }
.dashboard-page .section-kicker { font-size: 11px; }
.dashboard-page .admin-summary-grid { gap: 12px; margin-top: 20px; }
.dashboard-page .admin-summary-grid .stat-card { padding: 16px 17px; }
.dashboard-page .admin-summary-grid .stat-card > span { min-height: 0; font-size: 13px; line-height: 1.4; }
.dashboard-page .admin-summary-grid .stat-card > strong { font-size: 30px; }
.dashboard-page .admin-summary-grid .stat-card > small { min-height: 0; font-size: 12px; line-height: 1.45; }
.dashboard-page .admin-section { margin-top: 20px; }
.dashboard-page .data-table th { padding-top: 12px; padding-bottom: 12px; font-size: 12px; }
.dashboard-page .data-table td { padding-top: 14px; padding-bottom: 14px; font-size: 13px; }
.dashboard-page .admin-teacher-table { min-width: 700px; }
.dashboard-page .admin-user-table { min-width: 0; table-layout: fixed; white-space: normal; }
.dashboard-page .admin-user-table th,
.dashboard-page .admin-user-table td { overflow-wrap: anywhere; }
.dashboard-page .admin-user-table th:nth-child(1) { width: 15%; }
.dashboard-page .admin-user-table th:nth-child(2) { width: 23%; }
.dashboard-page .admin-user-table th:nth-child(3) { width: 7%; }
.dashboard-page .admin-user-table th:nth-child(4) { width: 6%; }
.dashboard-page .admin-user-table th:nth-child(5) { width: 23%; }
.dashboard-page .admin-user-table th:nth-child(6) { width: 11%; }
.dashboard-page .admin-user-table th:nth-child(7) { width: 15%; }
.dashboard-page .admin-teacher-link { font-size: 13px; }
.dashboard-page .admin-select-label,
.dashboard-page .admin-user-filters label { font-size: 12px; }
.dashboard-page .admin-teacher-select,
.dashboard-page .admin-user-filters input,
.dashboard-page .admin-user-filters select { font-size: 13px; }
.dashboard-page .admin-detail-heading { gap: 12px; margin-bottom: 16px; }
.dashboard-page .admin-detail-heading h3 { font-size: 20px; }
.dashboard-page .admin-detail-stats { gap: 8px; }
.dashboard-page .admin-detail-stats span { padding: 6px 9px; font-size: 12px; }
.dashboard-page .admin-detail-list h4 { font-size: 15px; }
.dashboard-page .admin-student-list strong { font-size: 13px; }
.dashboard-page .admin-student-list span,
.dashboard-page .admin-appointment-row p { font-size: 12px; line-height: 1.5; }
.dashboard-page .admin-appointment-heading strong,
.dashboard-page .admin-appointment-heading span { font-size: 13px; }
.dashboard-page .admin-user-status { font-size: 11px; }
.dashboard-page .admin-user-actions { min-width: 0; gap: 7px; }
.dashboard-page .admin-user-action,
.dashboard-page .admin-danger-link { min-height: 36px; padding: 7px 9px; font-size: 12px; }
.dashboard-page .admin-user-delete-note,
.dashboard-page .admin-delete-dialog label,
.dashboard-page .admin-delete-dialog > p:not(.section-kicker):not(.admin-delete-error),
.dashboard-page .admin-delete-error { font-size: 12px; }
.dashboard-page .admin-delete-dialog input { font-size: 13px; }
.dashboard-page .admin-delete-actions button { min-height: 40px; font-size: 12px; }
.dashboard-page .bulk-user-form > label { font-size: 16px; }
.dashboard-page .bulk-user-help,
.dashboard-page .bulk-preview-summary,
.dashboard-page .bulk-preview-row,
.dashboard-page .bulk-form-error { font-size: 12px; }
.dashboard-page .bulk-user-form textarea { font-size: 13px; }
.dashboard-page .bulk-preview-status { font-size: 11px; }
.dashboard-page .bulk-preview-message { font-size: 11px; line-height: 1.45; }

@media (max-width: 900px) {
  .dashboard-page .admin-summary-grid { gap: 10px; }
  .dashboard-page .admin-detail-columns { gap: 18px; }
  .dashboard-page .admin-user-table { min-width: 1100px; table-layout: auto; white-space: nowrap; }
}

@media (max-width: 600px) {
  .dashboard-page .page-content { padding: 18px 12px 20px; }
  .dashboard-page .hero { min-height: 0; padding: 24px 20px; }
  .dashboard-page .hero h1 { font-size: 29px; }
  .dashboard-page .hero p { font-size: 14px; }
  .dashboard-page .card { padding: 18px 14px; }
  .dashboard-page .admin-summary-grid { gap: 9px; margin-top: 16px; }
  .dashboard-page .admin-summary-grid .stat-card { padding: 13px 11px; }
  .dashboard-page .admin-summary-grid .stat-card > span { font-size: 12px; }
  .dashboard-page .admin-summary-grid .stat-card > strong { font-size: 25px; }
  .dashboard-page .admin-summary-grid .stat-card > small { font-size: 11px; }
  .dashboard-page .admin-detail-stats { gap: 6px; }
  .dashboard-page .admin-detail-stats span { padding: 6px 8px; font-size: 11px; }
  .dashboard-page .admin-user-filters { gap: 9px; }
  .dashboard-page .admin-delete-dialog { padding: 24px 19px; }
}

/* Student readability: preserve the existing week-first and calendar layouts. */
.student-page .student-topbar .brand { font-size: 15px; }
.student-page .student-demo-note { font-size: 12px; }
.student-page .header-logout button { min-height: 38px; font-size: 12px; }
.student-page .student-main { padding-top: 24px; }
.student-page .student-primary-top { min-height: 124px; padding: 25px 32px; }
.student-page .student-primary-top > div { min-width: 0; }
.student-page .student-primary h1 { overflow-wrap: anywhere; font-size: clamp(28px, 3vw, 32px); }
.student-page .student-week-panel { padding: 24px 30px 30px; }
.student-page .student-section-heading { margin-bottom: 16px; }
.student-page .student-section-heading h2 { font-size: 20px; }
.student-page .student-section-heading p { font-size: 13px; }
.student-page .student-period-nav { gap: 9px; }
.student-page .student-period-nav button { width: 36px; height: 36px; }
.student-page .student-period-nav span { font-size: 14px; }
.student-page .student-week-grid { gap: 9px; }
.student-page .student-weekday-name { font-size: 11px; letter-spacing: .06em; }
.student-page .student-weekday-date { font-size: 19px; }
.student-page .student-slot-button { min-height: 42px; }
.student-page .student-slot-button strong { font-size: 14px; }
.student-page .student-slot-button span { font-size: 12px; }
.student-page .student-slot-button .student-slot-status { font-size: 11px; }
.student-page .student-availability-location { font-size: 11px; line-height: 1.4; }
.student-page .student-bookings { margin-top: 30px; }
.student-page .student-other-heading h2 { font-size: 20px; }
.student-page .student-booking-card { padding: 15px 17px; }
.student-page .student-booking-header h3 { min-width: 0; overflow-wrap: anywhere; }
.student-page .student-booking-type { font-size: 11px; }
.student-page .student-booking-details div { grid-template-columns: minmax(78px, 95px) minmax(0, 1fr); gap: 8px; padding: 5px 0; }
.student-page .student-booking-details dt { font-size: 12px; }
.student-page .student-booking-details dd { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.student-page .student-cancel-button,
.student-page .student-confirm-cancel-button,
.student-page .student-keep-button { min-height: 38px; font-size: 12px; }
.student-page .student-cancel-summary,
.student-page .student-cancel-error { font-size: 12px; line-height: 1.5; }
.student-page .student-other { margin-top: 32px; }
.student-page .student-other-card { padding: 24px 28px; }
.student-page .student-calendar-caption { font-size: 13px; }
.student-page .student-calendar-weekdays span { font-size: 11px; }
.student-page .student-calendar-day { min-height: 44px; font-size: 14px; }
.student-page .student-results-label { font-size: 13px; }
.student-page .student-result-name { font-size: 16px; }
.student-page .student-result-details { min-width: 0; }
.student-page .student-result-details strong { font-size: 14px; }
.student-page .student-page-footnote { font-size: 12px; }
.student-page .student-confirm-details div { grid-template-columns: minmax(72px, 82px) minmax(0, 1fr); gap: 8px; padding: 10px 0; }
.student-page .student-confirm-details dt { font-size: 13px; }
.student-page .student-confirm-details dd { min-width: 0; overflow-wrap: anywhere; }
.student-page .student-meeting-type legend { font-size: 13px; }
.student-page .student-dialog-note { font-size: 12px; }

@media (max-width: 600px) {
  .student-page .student-topbar { gap: 8px; padding: 0 12px; }
  .student-page .student-topbar .brand { font-size: 13px; }
  .student-page .student-main { padding: 16px 10px 34px; }
  .student-page .student-primary-top { min-height: 104px; padding: 19px 15px; }
  .student-page .student-primary h1 { font-size: 28px; }
  .student-page .student-week-panel { padding: 17px 10px 20px; }
  .student-page .student-section-heading { gap: 10px; margin-bottom: 13px; }
  .student-page .student-section-heading h2 { font-size: 19px; }
  .student-page .student-period-nav { gap: 5px; }
  .student-page .student-period-nav button { width: 34px; height: 34px; }
  .student-page .student-period-nav span { min-width: 88px; font-size: 13px; }
  .student-page .student-week-grid { gap: 4px; }
  .student-page .student-week-day { min-height: 154px; padding: 8px 3px; }
  .student-page .student-weekday-name { font-size: 11px; letter-spacing: 0; }
  .student-page .student-weekday-date { font-size: 17px; }
  .student-page .student-slot-button { min-height: 42px; margin-top: 6px; padding: 6px 1px; }
  .student-page .student-slot-button strong { font-size: 12px; }
  .student-page .student-slot-button span { font-size: 11px; }
  .student-page .student-slot-button .student-slot-status { font-size: 11px; }
  .student-page .student-availability-location { margin-top: 6px; font-size: 11px; }
  .student-page .student-bookings { margin-top: 25px; }
  .student-page .student-other { margin-top: 26px; }
  .student-page .student-other-heading { margin-bottom: 12px; }
  .student-page .student-other-heading h2 { font-size: 20px; }
  .student-page .student-other-card { padding: 18px 12px; }
  .student-page .student-calendar-top { gap: 8px; }
  .student-page .student-calendar-weekdays,
  .student-page .student-month-grid { gap: 4px; }
  .student-page .student-calendar-weekdays span { padding-bottom: 6px; font-size: 11px; }
  .student-page .student-calendar-day { min-height: 40px; font-size: 13px; }
  .student-page .student-day-results { margin-top: 20px; padding-top: 18px; }
  .student-page .student-result-slot { align-items: flex-start; gap: 8px; }
  .student-page .student-result-details { gap: 4px 8px; }
  .student-page .student-booking-dialog { padding: 23px 18px 19px; }
}