/* ============================================================
 * SleepIn课程表 · 网页版样式表 styles.css
 * 第一部分：与原 Android App 内嵌 <style> 逐字一致（Material 3 设计系统）
 * 第二部分：网页化适配（允许页面滚动 / 宽屏居中 / hover / 弹窗居中）
 * ============================================================ */

/* ===== Material You (Material 3) Design System ===== */
:root{
  --primary:#1565C0;
  --on-primary:#FFFFFF;
  --primary-container:#D9E5FB;
  --on-primary-container:#0B3060;
  --secondary:#5A6478;
  --secondary-container:#DEE4F1;
  --on-secondary-container:#1A2338;
  --error:#C62828;
  --error-container:#FBDCDF;
  --on-error-container:#5F1015;
  --surface:#FFFFFF;
  --surface-dim:#F2F5FA;
  --surface-2:#EEF2F8;
  --on-surface:#17233B;
  --on-surface-2:#4A5875;
  --on-surface-3:#8A97B3;
  --outline:#C9D2E0;
  --outline-strong:#94A3BC;
  --line:#E7EDF6;
  --today-amber:#F0A93B;
  --sh-1:0 1px 2px rgba(23,35,59,.04), 0 2px 10px rgba(23,35,59,.05);
  --sh-2:0 3px 8px rgba(23,35,59,.06), 0 12px 28px rgba(23,35,59,.09);
  --sh-3:0 16px 44px rgba(23,35,59,.16);
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-pill:999px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:var(--surface-dim); color:var(--on-surface); overflow:hidden;
}
#app { display:flex; flex-direction:column; height:100%; }

/* ===== Header : tonal surface card ===== */
.header {
  background:linear-gradient(170deg,#EAF1FD 0%,#DCE8FB 70%,#D2E1F9 100%);
  color:var(--on-primary-container);
  padding:16px 18px 14px;
  border-radius:0 0 26px 26px;
  box-shadow:var(--sh-1);
  flex-shrink:0;
}
.header .title-row { display:flex; align-items:center; justify-content:space-between; }
.header h1 { font-size:20px; font-weight:800; letter-spacing:.5px; color:#0E3E7A; }
.header .sub { font-size:12px; color:#46618C; margin-top:3px; font-weight:500; }

/* ===== Week nav ===== */
.week-nav {
  display:flex; align-items:center; gap:8px; margin-top:14px;
  background:rgba(255,255,255,.72);
  border-radius:18px; padding:6px 6px;
  box-shadow:var(--sh-1);
}
.week-nav .btn {
  background:var(--surface); border:none; color:var(--primary); font-size:19px;
  width:36px; height:36px; border-radius:50%; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  box-shadow:var(--sh-1); transition:transform .08s ease;
}
.week-nav .btn:active { transform:scale(.9); }
.week-info { flex:1; text-align:center; }
.week-info .w { font-size:16px; font-weight:800; color:#0E3E7A; }
.week-info .d { font-size:11px; color:#5A6B8C; margin-top:2px; font-weight:500; }
.week-nav .today-btn {
  background:var(--primary); border:none; color:#fff; font-size:12px; font-weight:700;
  padding:9px 14px; border-radius:var(--r-pill); cursor:pointer; flex-shrink:0;
  box-shadow:0 2px 8px rgba(21,101,192,.30);
}

/* ===== Filter chips (M3 FilterChip) ===== */
.chips {
  display:flex; gap:8px; padding:14px 18px 8px; flex-shrink:0; overflow-x:auto;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar { display:none; }
.chip {
  background:var(--surface); border:1.5px solid var(--outline); color:var(--on-surface-2);
  font-size:13px; font-weight:600; padding:7px 15px; border-radius:var(--r-pill);
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip:active { transform:scale(.95); }
.chip.active {
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 3px 10px rgba(21,101,192,.30);
}

/* ===== Search (M3 search bar) ===== */
.search-box { padding:8px 18px 10px; flex-shrink:0; }
.search-box input {
  width:100%; border:1.5px solid var(--outline); border-radius:var(--r-pill);
  padding:11px 18px; font-size:14px; background:var(--surface); outline:none;
  color:var(--on-surface); box-shadow:var(--sh-1); transition:border-color .15s, box-shadow .15s;
}
.search-box input::placeholder { color:#98A4BA; }
.search-box input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(21,101,192,.12); }

/* ===== Grid area : floating card ===== */
.grid-wrap { flex:1; overflow:auto; padding:6px 12px 12px; -webkit-overflow-scrolling:touch; }
.grid-wrap::-webkit-scrollbar { width:4px; height:4px; }
.grid-wrap::-webkit-scrollbar-thumb { background:#C5D3EA; border-radius:4px; }
.table-card {
  background:var(--surface); border-radius:var(--r-md); box-shadow:var(--sh-1);
  padding:8px 6px 6px; min-width:0;
}
.grid-head {
  display:grid; grid-template-columns:56px repeat(5,1fr);
  border-bottom:1.5px solid var(--line); padding-bottom:6px;
}
.grid-head .cell { text-align:center; font-size:13px; font-weight:700; color:#33415F; padding:4px 2px; }
.grid-head .cell .date { font-size:11px; font-weight:500; color:#98A4BA; }
.grid-head .cell.today { color:var(--primary); }
.grid-head .cell.today .date { color:var(--primary); font-weight:700; }
.grid-body { position:relative; }
.time-col {
  position:absolute; left:0; top:0; bottom:0; width:56px;
  border-right:1px solid #F1F4F9;
}
.time-cell {
  position:absolute; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#98A4BA; font-size:10px;
  border-bottom:1px solid #F5F7FB;
}
.time-cell .n { font-size:12px; font-weight:800; color:#5A6B8C; line-height:1.2; }
.time-cell .t1 { font-size:10px; color:#98A4BA; line-height:1.25; }
.time-cell .t2 { font-size:10px; color:#B7C1D4; line-height:1.25; }
.period-grid { position:absolute; left:56px; right:0; top:0; bottom:0; }
.col-line { position:absolute; top:0; bottom:0; width:1px; background:#F3F6FB; }
.row-line { position:absolute; left:56px; right:0; height:1px; background:#F3F6FB; }
.day-col.today-bg { background:rgba(21,101,192,.055); }

/* ===== Course cards : tonal containers ===== */
.course {
  position:absolute; border-radius:var(--r-xs); padding:4px 5px; overflow:hidden;
  cursor:pointer; box-shadow:0 1px 3px rgba(23,35,59,.10);
  border-left:3px solid rgba(23,35,59,.08);
  transition:transform .1s ease, box-shadow .1s ease;
}
.course:active { transform:scale(.96); }
.course .sub { font-size:12px; font-weight:800; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.course .con { font-size:10.5px; opacity:.85; line-height:1.3; margin-top:1px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.course .meta { font-size:9.5px; opacity:.8; margin-top:2px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.course .grp {
  display:inline-block; font-size:9px; padding:1px 5px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.72); color:var(--on-surface); margin-right:3px;
  font-weight:700;
}
/* legacy type classes (kept as fallback; JS injects container colors inline) */
.type-理论课 { background:#D9E5FB; color:#1B2B44; }
.type-见习课 { background:#D2EAE4; color:#1B2B44; }
.type-PBL课 { background:#FBE3C7; color:#1B2B44; }
.type-考试 { background:#FBDCDF; color:#1B2B44; }
.type-假期 { background:#E6EAF1; color:#1B2B44; }
.course.hol-block { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-left-color:#B9C4D4; }
.course.exam-block { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-left-color:#EFA8AE; }
.course.hol-block .sub, .course.exam-block .sub { font-size:14px; white-space:normal; }
.course.hol-block .con, .course.exam-block .con { font-size:12px; -webkit-line-clamp:3; }
.course.hol-block .meta, .course.exam-block .meta { display:none; }

/* ===== Bottom week bar : floating sheet ===== */
.bottom-bar {
  flex-shrink:0; background:var(--surface);
  border-radius:22px 22px 0 0;
  padding:10px 12px 14px;
  box-shadow:0 -6px 22px rgba(23,35,59,.07);
}
.bottom-bar .label { font-size:11px; color:var(--on-surface-3); text-align:center; margin-bottom:7px; }
.week-bar { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.week-bar::-webkit-scrollbar { display:none; }
.wchip {
  min-width:34px; height:31px; border-radius:10px; background:var(--surface-2); color:#5A6B8C;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  cursor:pointer; flex-shrink:0; border:1.5px solid transparent;
  transition:transform .1s ease;
}
.wchip:active { transform:scale(.92); }
.wchip.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(21,101,192,.35); }
.wchip.has-class { border-color:rgba(21,101,192,.42); }
.wchip.exam { border-color:rgba(198,40,40,.45); border-width:2px; }
.wchip.hol { border-color:rgba(122,138,160,.55); border-width:2px; }

/* ===== Modal : M3 bottom sheet ===== */
.modal-mask {
  position:fixed; inset:0; background:rgba(15,23,42,.40); z-index:100;
  display:none; align-items:flex-end; justify-content:center;
}
.modal-mask.show { display:flex; }
.modal {
  background:var(--surface); width:100%; border-radius:28px 28px 0 0; max-height:84%;
  overflow-y:auto; padding:4px 20px 26px; animation:slideUp .24s ease;
}
.modal::before {
  content:''; display:block; width:42px; height:5px; border-radius:3px;
  background:#D9DFEA; margin:8px auto 10px;
}
@keyframes slideUp { from { transform:translateY(48px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal .m-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.modal .m-subject { font-size:20px; font-weight:800; color:var(--primary); }
.modal .m-content { font-size:14px; color:#33415F; margin-top:4px; line-height:1.5; }
.modal .m-badge {
  display:inline-block; padding:4px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:700;
  color:var(--on-surface); flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(23,35,59,.05);
}
.modal .m-close {
  width:34px; height:34px; border-radius:50%; background:var(--surface-2); border:none; font-size:17px;
  color:var(--on-surface-2); cursor:pointer; flex-shrink:0;
}
.modal .m-row {
  display:flex; margin-top:12px; padding:11px 0; border-bottom:1px solid #F1F4F9;
  align-items:flex-start;
}
.modal .m-row .k { width:64px; font-size:12px; color:var(--on-surface-3); flex-shrink:0; padding-top:2px; }
.modal .m-row .v { flex:1; font-size:14px; color:var(--on-surface); line-height:1.5; }
.modal .tag {
  display:inline-block; background:var(--secondary-container); color:var(--on-secondary-container);
  border-radius:8px; padding:3px 9px; margin:2px 4px 2px 0; font-size:12.5px; font-weight:600;
}
.modal .copy-btn {
  margin-left:8px; font-size:11px; font-weight:600; color:var(--secondary);
  background:var(--secondary-container); border:none; padding:4px 9px; border-radius:8px; cursor:pointer;
}
.modal .btn-close {
  width:100%; margin-top:18px; padding:13px; border:none; border-radius:14px;
  background:var(--primary); color:#fff; font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 12px rgba(21,101,192,.28);
}
.modal .btn-close:active { transform:scale(.98); }

/* ===== Search result list ===== */
.result-list { padding:8px 0 20px; }
.result-item {
  background:var(--surface-2); border-radius:14px; padding:12px 14px; margin-bottom:8px;
  cursor:pointer; border:none;
}
.result-item:active { background:#E7ECF4; }
.result-item .r-sub { font-size:15px; font-weight:700; color:var(--on-surface); }
.result-item .r-con { font-size:12.5px; color:var(--on-surface-2); margin-top:3px; line-height:1.4; }
.result-item .r-meta { font-size:11.5px; color:var(--on-surface-3); margin-top:5px; }
.result-item .r-meta .t { color:var(--primary); font-weight:700; }

.empty { text-align:center; color:var(--on-surface-3); font-size:14px; padding:44px 0; }

/* ===== Swipe week-switch tip : M3 snackbar ===== */
.swipe-tip {
  position:fixed; left:50%; top:36%; transform:translateX(-50%) scale(.85);
  background:#202A3C; color:#fff; font-size:16px; font-weight:700;
  padding:13px 26px; border-radius:var(--r-pill); z-index:300; pointer-events:none;
  opacity:0; transition:opacity .16s ease, transform .16s ease;
  box-shadow:var(--sh-3); white-space:nowrap;
}
.swipe-tip.show { opacity:1; transform:translateX(-50%) scale(1); }

/* ===== Login overlay : soft M3 gradient + big card ===== */
#loginOverlay{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(130% 130% at 12% 0%, #EDF3FF 0%, #DFEAFC 45%, #C9DBF5 100%);
  padding:24px;
}
#loginOverlay.hidden{display:none}
.login-card{
  width:100%;max-width:344px;background:rgba(255,255,255,.96);border-radius:30px;
  padding:32px 26px 24px;text-align:center;
  box-shadow:var(--sh-3);
}
.login-card .logo{
  font-size:46px; width:96px; height:96px; line-height:96px; margin:0 auto;
  border-radius:50%; background:linear-gradient(150deg,#E4EDFC,#D3E2FA);
  box-shadow:inset 0 0 0 1px rgba(21,101,192,.06);
}
.login-card h2{margin:18px 0 4px;font-size:22px;color:#0E3E7A;letter-spacing:.5px;font-weight:800}
.login-card .tip{font-size:12.5px;color:#66748F;line-height:1.75;margin:8px 0 20px}
.login-card .tip b{color:#0E3E7A}
.login-card .inp{
  width:100%;box-sizing:border-box;padding:14px 16px;border:2px solid var(--outline);
  border-radius:16px;font-size:16px;outline:none;color:var(--on-surface);
  background:#F7F9FD;text-align:center;transition:border-color .15s, box-shadow .15s;
}
.login-card .inp:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(21,101,192,.12)}
.login-card .go{
  width:100%;margin-top:16px;padding:14px;border:none;border-radius:16px;
  background:var(--primary);color:#fff;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 5px 14px rgba(21,101,192,.28);
}
.login-card .go:active{transform:scale(.97)}
.login-card .err{min-height:18px;margin:12px 0 0;color:var(--error);font-size:13px;line-height:1.5;font-weight:600}
.login-card .ok-dup{margin-top:12px;font-size:13px;color:var(--on-surface);font-weight:700}
.login-card .dup-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px;padding:0}
.login-card .dup-chips .chip{
  background:var(--primary-container);border:none;color:var(--on-primary-container);
  padding:9px 17px;font-size:13px;font-weight:700;border-radius:var(--r-pill);
}
.login-card .note{margin-top:16px;font-size:11px;color:#A6B0C2;line-height:1.6}

/* ===== User chip & menu ===== */
.user-wrap{position:relative;flex-shrink:0}
.user-btn{
  display:flex;align-items:center;gap:4px;background:var(--surface);border:none;
  color:var(--primary);font-size:12.5px;font-weight:700;padding:7px 12px;
  border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;max-width:150px;
  box-shadow:var(--sh-1);
}
.user-btn .uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}
.user-menu{
  position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);
  border-radius:16px;box-shadow:var(--sh-2);min-width:168px;overflow:hidden;
  z-index:600;display:none;
}
.user-menu.show{display:block}
.user-menu .um-item{padding:14px 17px;font-size:14px;color:var(--on-surface);cursor:pointer;display:flex;gap:9px;align-items:center}
.user-menu .um-item + .um-item{border-top:1px solid #F1F4F9}
.user-menu .um-item:active{background:var(--surface-2)}



/* ============================================================
   第二部分 · 网页化适配（浏览器版专用）
   —— 不改动第一部分任何规则，仅追加覆盖以适应普通浏览器
   1) 允许整页滚动（原版为 App 全屏 100% + overflow:hidden）
   2) 桌面宽屏居中限宽、留白卡片化
   3) 桌面 hover 反馈（触屏设备自动忽略）
   4) 弹窗桌面居中（手机保持底部弹层手感）
   ============================================================ */

/* 1) 页面可滚动 */
html, body { height:auto !important; min-height:100%; }
body { overflow:visible !important; }
#app { height:auto !important; min-height:100vh; }

/* 2) 网格容器：纵向随内容自然展开（整页滚动），横向超宽时保留内部滚动 */
.grid-wrap { overscroll-behavior:contain; scrollbar-width:thin; }

/* 3) 登录遮罩内容超高时可滚动（避免键盘弹出/屏高不足被裁） */
#loginOverlay { overflow:auto; }

/* 4) 桌面 hover */
@media (hover:hover) and (pointer:fine){
  .course:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(23,35,59,.16); filter:brightness(1.03); z-index:6; }
  .wchip:hover:not(.active) { background:#E2ECFB; transform:translateY(-1px); }
  .chip:hover:not(.active) { background:#E6EEF9; }
  .week-nav .btn:hover, .week-nav .today-btn:hover { background:rgba(21,101,192,.10); }
  .go:hover { filter:brightness(1.06); box-shadow:0 6px 16px rgba(21,101,192,.32); }
  .result-item:hover { background:var(--surface-2); }
  .copy-btn:hover { background:rgba(21,101,192,.14); }
}

/* 5) 宽屏 >=1100px：留白 + 居中限宽 */
@media (min-width:1100px){
  body { padding:26px 22px; }
  #app { max-width:1280px; margin:0 auto; min-height:calc(100vh - 52px); }
  .header { border-radius:24px; }
  .bottom-bar { margin:0 10px 10px; border-radius:22px; }
}

/* 6) 弹窗：平板/桌面居中卡片 */
@media (min-width:900px){
  .modal-mask { align-items:center; }
  .modal { width:auto; max-width:560px; min-width:380px; border-radius:28px; }
}

/* 7) 尊重系统“减少动态效果”偏好 */
@media (prefers-reduced-motion: reduce){
  * { animation:none !important; transition:none !important; }
}