/* ===========================================================================
   夏三七 · 课程网站样式（2026-10-02 改亮色）
   ---------------------------------------------------------------------------
   ⚠ 2026-10-02 用户拍板：全站改亮色。原话「界面是暗色 我要亮色 要鲜明」。

      这一版之前是深色（跟 backend/admin 统一）。现在 portal.css 那套门户
      改成了亮色，老页面必须跟着翻，否则从门户点进「学生中心」风格会断。

      ⚠ 后台界面（backend/admin/styles.css）**仍是深色**，没跟着改 ——
        那是运营自己看的，跟面向用户的网站不是一回事。

   原则（没变）：
     · 移动端优先 —— 学生多半在手机上看课表，先写窄屏，宽屏再加
     · 信息密度高但不挤 —— 用留白和细线分隔，不靠边框和底色堆叠
     · 颜色只表状态 —— 正常态全灰阶，有颜色就是要看的
     · 触控目标 ≥44px —— 手机上点得准
   =========================================================================== */

:root {
  color-scheme: light;

  /* 灰阶 —— 亮色版。⚠ 编号方向跟深色版相反：
     000 = 最亮（白），900 = 最暗（黑）。改的时候别照着旧值抄。 */
  --ink-000: #ffffff;
  --ink-050: #fafafa;
  --ink-100: #f5f5f7;
  --ink-150: #ececf0;
  --ink-200: #e4e4e9;
  --ink-300: #d2d2d8;
  --ink-400: #a8a8b0;
  --ink-500: #86868b;
  --ink-600: #6e6e73;
  --ink-700: #424245;
  --ink-800: #1d1d1f;
  --ink-900: #000000;

  /* 状态色 —— 亮底上要足够深才读得清 */
  --ok: #00703c;
  --ok-dim: #e3f5ea;
  --warn: #8a5000;
  --warn-dim: #fdf1e0;
  --danger: #c1121f;
  --danger-dim: #fdeaec;
  --info: #0071e3;
  --info-dim: #e8f2fd;
  --accent: #0071e3;

  /* 四门的识别色 —— 苹果系统色那一路，跟 portal.css 对齐 */
  --student: #0071e3;
  --model: #ff2d55;
  --course: #a44fd4;
  --busy: #00a862;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap: 14px;
  --gap-lg: 22px;
  --gap-xl: 34px;

  --speed: 240ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
          "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", serif;

  --max: 880px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }

body {
  background: var(--ink-000);
  color: var(--ink-800);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--gap-lg) var(--gap) 72px;
}

/* ---------------------------------------------------------------- 站头 */

.site-head {
  text-align: center;
  padding: clamp(34px, 9vh, 76px) 0 var(--gap-lg);
}
.site-head h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 8vw, 58px);
  font-weight: 400;
  letter-spacing: clamp(6px, 2.4vw, 18px);
  text-indent: clamp(6px, 2.4vw, 18px);
  margin: 0;
  color: var(--ink-900);
}
.site-head .sub {
  margin-top: var(--gap);
  color: var(--ink-600);
  font-size: 12.5px;
  letter-spacing: 5px;
  text-indent: 5px;
}
.site-head .sub::before,
.site-head .sub::after {
  content: "—";
  color: var(--ink-400);
  margin: 0 10px;
}

.page-head {
  display: flex;
  align-items: baseline;
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
  flex-wrap: wrap;
}
.page-head h1 {
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.page-head .back {
  color: var(--ink-600);
  text-decoration: none;
  font-size: 13.5px;
  padding: 6px 0;
  transition: color var(--speed) var(--ease);
}
.page-head .back:hover { color: var(--ink-900); }

/* ---------------------------------------------------------------- 四门 */

.portals {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  margin-top: var(--gap-xl);
}
@media (min-width: 620px) {
  .portals { grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
}

.portal {
  display: block;
  position: relative;
  padding: var(--gap-lg) var(--gap-lg) var(--gap-lg) 60px;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
  min-height: 44px;
}
.portal::before {
  /* 左侧一条细色带 —— 四门各自的识别色，比整个卡片刷色克制得多 */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tint, var(--accent));
  opacity: .75;
}
.portal:hover {
  background: var(--ink-150);
  border-color: var(--ink-300);
  transform: translateY(-1px);
}
.portal .icon {
  position: absolute;
  left: 20px; top: var(--gap-lg);
  font-size: 20px;
  color: var(--tint, var(--accent));
  opacity: .85;
  line-height: 1;
}
.portal h2 {
  font-size: 16.5px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink-900);
}
.portal p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.7;
}
.portal .tagline {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-500);
}

.p-student { --tint: var(--student); }
.p-model   { --tint: var(--model); }
.p-course  { --tint: var(--course); }
.p-busy    { --tint: var(--busy); }

/* ---------------------------------------------------------------- 分区 */

.section { margin-bottom: var(--gap-xl); }
.section > h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-500);
  margin: 0 0 var(--gap);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink-200);
}

.placeholder, .subtle { color: var(--ink-600); font-size: 13.5px; line-height: 1.75; }
.dim { color: var(--ink-500); }

/* ---------------------------------------------------------------- 控件 */

input, select, textarea {
  width: 100%;
  background: var(--ink-050);
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;   /* ⚠ iOS 上 <16px 会触发自动放大页面 */
  min-height: 44px;  /* 触控目标 */
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-400); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--ink-000);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.6; }

label.field { display: block; margin-bottom: var(--gap); }
label.field > span {
  display: block;
  font-size: 13px;
  color: var(--ink-600);
  margin-bottom: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ink-200);
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.btn:hover { background: var(--ink-300); border-color: var(--ink-400); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 600; }
.btn.primary:hover { background: #0066cc; border-color: #0066cc; }
.btn.ghost { background: transparent; border-color: var(--ink-300); color: var(--ink-700); }
.btn.ghost:hover { background: var(--ink-150); color: var(--ink-900); }
.btn.danger { color: var(--danger); border-color: #f3c2c6; }
.btn.danger:hover { background: var(--danger-dim); }
.btn.small { padding: 7px 12px; min-height: 38px; font-size: 13px; }
.btn.block { width: 100%; }

/* ---------------------------------------------------------------- 卡片 */

.card {
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap-sm);
}
.card > h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
}
.card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap);
  font-size: 12.5px;
  color: var(--ink-600);
  margin-bottom: 6px;
}
.card .actions { display: flex; gap: var(--gap-sm); flex-wrap: wrap; margin-top: var(--gap); }

.day-card {
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap-sm);
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  color: #ffffff;
}

.notice-item {
  padding: var(--gap-sm) 0;
  border-bottom: 1px solid var(--ink-150);
  font-size: 13.5px;
  line-height: 1.7;
}
.notice-item:last-child { border-bottom: none; }

/* ---------------------------------------------------------------- 消息 */

.msg { font-size: 13px; margin-top: var(--gap-sm); min-height: 20px; }
.msg.ok { color: var(--ok); }
.msg.bad { color: var(--danger); }

/* ---------------------------------------------------------------- 日历 */

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-bottom: var(--gap);
}
.cal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-cell {
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  transition: background var(--speed) var(--ease);
  border: 1px solid transparent;
}
.cal-cell:hover { background: var(--ink-200); }
.cal-cell.blank { background: transparent; cursor: default; }
.cal-cell.today { border-color: var(--accent); color: var(--ink-900); }
.cal-cell.picked { background: var(--ink-300); color: var(--ink-900); }
.cal-cell .dots { display: flex; gap: 3px; height: 5px; }
.cal-cell .dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
.cal-week span {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-500);
}

.cal-day-detail { margin-top: var(--gap); }
.sched-item {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 9px 0;
  border-bottom: 1px solid var(--ink-150);
  flex-wrap: wrap;
}
.sched-item .hours {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-800);
  min-width: 96px;
}
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 12px;
  background: var(--ink-200);
  color: var(--ink-700);
}

/* ---------------------------------------------------------------- 标签页 */

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  margin-bottom: var(--gap-lg);
  padding-bottom: 1px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  padding: 10px 15px;
  font-size: 14px;
  color: var(--ink-600);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.tab:hover { color: var(--ink-900); }
.tab.active { color: var(--ink-900); border-bottom-color: var(--accent); font-weight: 500; }
.tab .dot {
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 20px;
  background: var(--danger-dim);
  color: var(--danger);
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  vertical-align: 1px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------------------------------------------------------------- 表单区 */

.form-box {
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
}
.form-box > h3 {
  margin: 0 0 var(--gap);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
}

.row2 {
  display: grid;
  gap: var(--gap-sm);
  grid-template-columns: 1fr 1fr;
}

/* ---------------------------------------------------------------- 空态 */

.empty {
  padding: 34px 18px;
  text-align: center;
  color: var(--ink-500);
  font-size: 13.5px;
  border: 1px dashed var(--ink-300);
  border-radius: var(--radius);
  line-height: 1.8;
}
.empty b { display: block; color: var(--ink-700); margin-bottom: 5px; font-weight: 500; }

.loading { padding: 26px; text-align: center; color: var(--ink-500); font-size: 13.5px; }

/* ---------------------------------------------------------------- 作品集 */

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--gap-sm);
}
.album-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-200);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.album-grid img:hover { border-color: var(--ink-400); transform: scale(1.02); }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: grid;
  place-items: center;
  padding: var(--gap);
  z-index: 100;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------- 页脚 */

.site-foot {
  margin-top: var(--gap-xl);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--ink-200);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 2;
}
.site-foot .verse { margin: 0; color: var(--ink-600); }
.site-foot .verse-wink { color: var(--ink-500); font-size: 12px; }
.site-foot a { color: var(--ink-600); }

/* ---------------------------------------------------------------- 工具类 */

.sp { margin-top: var(--gap); }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.center { text-align: center; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ⚠ 移动端最后收一下：小屏上日历格子会太小，压缩字号和内边距 */
@media (max-width: 420px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .cal-cell { font-size: 12px; min-height: 40px; }
  .portal { padding: 18px 18px 18px 52px; }
  .portal .icon { left: 16px; top: 18px; font-size: 18px; }
  .tabs .tab { padding: 10px 12px; font-size: 13.5px; }
}