/* 大屏首页、显示设置及操作按钮；警告/异常、全屏考试仍保留各自语义色。 */
body, #screen, .home-swatch {
  --home-bg: #fff; --home-card: #f7f9fc; --home-text: #26313d; --home-muted: #606e7d;
  --home-border: #e1e7ef; --home-accent: #356ab5; --home-soft: #eaf2ff; --home-track: #e6edf5;
  --home-shadow: 0 4px 20px #26313d08; --home-radius: 12px; --home-gap: clamp(12px,1.2vw,32px);
  --home-label: calc(clamp(13px,1.05vw,36px) * var(--fs));
  --home-title: calc(clamp(17px,1.65vw,56px) * var(--fs));
}
[data-home-palette="white-mint"] { --home-accent:#28766a; --home-soft:#e6f5ef; --home-card:#f7faf8; --home-border:#dce8e2; --home-track:#e5efea; }
[data-home-palette="white-apricot"] { --home-bg:#fffefb; --home-card:#fbf9f5; --home-accent:#a86120; --home-soft:#fff0dc; --home-border:#ebe3d6; --home-track:#efe9df; }
[data-home-palette="sage"] { --home-bg:#edf0e7; --home-card:#fafbf6; --home-text:#26382f; --home-muted:#596b5b; --home-accent:#44644b; --home-soft:#e0e9d8; --home-border:#d7dfd0; --home-track:#d7dfd0; }
[data-home-palette="celadon"] { --home-bg:#eaf2ef; --home-card:#f9fdfa; --home-text:#213d3c; --home-muted:#55706b; --home-accent:#25756e; --home-soft:#d9ebe4; --home-border:#d0dfd7; --home-track:#d0e0d9; }
[data-home-palette="rose"] { --home-bg:#f4ecec; --home-card:#fffbfa; --home-text:#493238; --home-muted:#7b6269; --home-accent:#945367; --home-soft:#efdee1; --home-border:#e4d6d9; --home-track:#e3d2d7; }
#screen { background:var(--home-bg); }
/* 复用原按钮样式，只替换它们使用的颜色令牌，尺寸和操作流程保持一致。 */
#screen button:not(.b-morning-status), #btn-notice-seen {
  --b-amber:var(--home-accent); --b-amber-soft:var(--home-soft); --b-ink:var(--home-text);
  --b-muted:var(--home-muted); --b-line:var(--home-border); --b-bg:var(--home-card);
}
#screen .b-tools[data-b-theme="light"] { --t-ink:var(--home-text); --t-muted:var(--home-muted); --t-line:var(--home-border); --t-card:var(--home-card); }
#screen .b-tools.is-open[data-b-theme="light"] { background:var(--home-bg); border-top-color:var(--home-border); }
#screen .b-cd-p { color:var(--home-text); background:var(--home-card); border-color:var(--home-border); }
#screen .b-cd-p.on, #screen .b-cd-mini.on, #screen .b-cd-mini.b-chip-strong { color:var(--home-accent); background:var(--home-soft); border-color:var(--home-accent); }
#screen .b-cd-add { color:var(--home-accent); background:var(--home-soft); border-color:var(--home-accent); }
#screen .b-cd-right { background:var(--home-card); }
#screen .b-band { background:radial-gradient(ellipse at center,var(--home-soft),transparent 70%); }
#screen .b-band::before, #screen .b-band::after { background:linear-gradient(90deg,transparent,var(--home-border),transparent); }
#screen:has(#hw-attendance:not(.b-hidden)) #hw-save { visibility:hidden; }
#screen .b-top { background:var(--home-bg); color:var(--home-text); padding:clamp(12px,1.2vw,32px) clamp(16px,1.8vw,48px); }
#screen .b-when, #screen .b-role { color:var(--home-muted); }
#screen .b-sound-hint { color:var(--home-muted); background:var(--home-bg); }
#screen #cr-main { background:var(--b-bg); }
#screen #cr-idle { color:var(--home-text); padding:4px clamp(16px,1.8vw,48px) clamp(12px,1.2vw,32px); }
#screen #cr-idle-canvas { gap:var(--home-gap); }
#screen #cr-idle .b-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; gap:clamp(20px,3vw,80px); flex:1 0 auto; }
#screen #cr-idle .b-left { animation:none; gap:0; min-width:0; }
#screen #cr-idle .b-phase { font-size:var(--home-label); line-height:1.5; font-weight:500; letter-spacing:0; border:0; background:var(--home-soft); color:var(--home-accent); animation:none; padding:4px 12px; }
#screen #cr-idle .b-num { color:var(--home-text); font-family:var(--vibe-font-sans); font-size:clamp(80px,min(11.2vw,24vh),420px); line-height:1.2; letter-spacing:-.055em; margin:8px 0 16px; animation:none; white-space:nowrap; }
#screen #cr-idle .b-num.is-cd { color:var(--b-amber); }
#screen #cr-idle .b-num.is-word { font-size:clamp(28px,4vw,88px); white-space:normal; }
#screen #cr-idle .b-num .b-sec { font-size:.2em; color:var(--home-muted); font-weight:400; letter-spacing:0; animation:none; }
#screen .home-clock-digits { display:inline-flex; font-variant-numeric:tabular-nums; letter-spacing:0; }
#screen .home-clock-digit { display:inline-block; width:.59em; text-align:center; }
#screen .home-clock-colon { display:inline-block; width:.28em; text-align:center; }
#screen .home-palette:focus-visible, #screen .home-settings button:focus-visible, #screen .home-settings input:focus-visible { outline:2px solid var(--home-accent); outline-offset:3px; }
#screen #cr-idle .b-sub, #screen #cr-idle .b-sub.is-big { font-size:calc(clamp(26px,3.1vw,104px) * var(--fs)); color:var(--home-text); line-height:1.35; margin:0; overflow-wrap:anywhere; }
#screen .home-detail, #screen #cr-idle .b-line { font-size:var(--home-label); line-height:1.5; color:var(--home-muted); margin:4px 0 0; }
#screen .home-detail:empty { display:none; }
#screen #cr-idle .b-tip { font-size:var(--home-label); color:var(--home-muted); line-height:1.5; margin:12px 0 0; }
#screen #cr-idle .b-tip:empty { display:none; }
#screen #cr-idle .b-notes { font-size:var(--home-label); color:var(--home-text); margin-top:12px; }
#screen .home-progress-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:var(--home-muted); font-size:var(--home-label); line-height:1.5; margin-top:20px; width:min(100%,40rem); }
#screen #cr-idle .b-prog { height:clamp(4px,.35vw,10px); background:var(--home-track); margin-top:8px; }
#screen #cr-idle .b-prog > i { background:var(--home-accent); transition:width .35s ease; }
#screen .home-next { font-size:var(--home-label); color:var(--home-muted); line-height:1.5; margin-top:16px; }
#screen .home-schedule { min-width:0; padding:clamp(16px,1.5vw,40px); border-radius:var(--home-radius); background:var(--home-card); box-shadow:var(--home-shadow); }
#screen .home-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:var(--home-label); margin-bottom:12px; }
#screen .home-heading strong { font-weight:600; }
#screen .home-heading>span { color:var(--home-muted); }
#screen .home-schedule-rows { display:flex; flex-direction:column; gap:4px; }
#screen .home-event { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:clamp(8px,1vw,24px); padding:clamp(10px,1vw,24px); border-radius:8px; border-left:3px solid transparent; line-height:1.5; }
#screen .home-event.is-current { background:var(--home-soft); border-left-color:var(--home-accent); }
#screen .home-event.is-past .home-event-title { color:var(--home-muted); font-weight:400; }
#screen .home-event-time { font-size:var(--home-label); color:var(--home-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
#screen .home-event-title { display:block; font-size:var(--home-title); font-weight:600; color:var(--home-text); overflow-wrap:anywhere; }
#screen .home-event-meta { color:var(--home-muted); font-size:var(--home-label); margin-top:4px; overflow-wrap:anywhere; }
#screen .home-event-status { color:var(--home-muted); font-size:var(--home-label); white-space:nowrap; }
#screen .home-event.is-current .home-event-status { color:var(--home-accent); }
#screen .home-empty { font-size:var(--home-label); color:var(--home-muted); line-height:1.6; }
#screen #cr-idle .b-bands { margin:0; gap:12px; }
#screen #cr-idle .b-band-h { font-size:var(--home-label); color:var(--home-muted); margin-bottom:8px; }
#screen #cr-idle .b-band-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; }
#screen #cr-idle .b-band-i { animation:none; transform:none; padding:12px; min-width:0; border-radius:var(--home-radius); background:var(--home-card); box-shadow:none; gap:12px; }
#screen #cr-idle .b-band-i:hover { transform:none; box-shadow:none; }
#screen #cr-idle .b-band-p { color:var(--home-muted); font-size:var(--home-label); font-weight:400; line-height:1.5; letter-spacing:0; overflow-wrap:anywhere; }
#screen #cr-idle .b-band-n { color:var(--home-text); font-size:var(--home-title); line-height:1.5; }
#screen .home-motto { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; padding:12px 16px; border-radius:var(--home-radius); background:var(--home-soft); color:var(--home-text); font-size:var(--home-label); line-height:1.5; }
#screen .home-motto-label { color:var(--home-muted); white-space:nowrap; }
#screen .home-extras { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
#screen .home-extras .b-card { background:var(--home-card); box-shadow:none; padding:8px 12px; animation:none; flex:1 1 160px; }
#screen .home-extras .b-card-t, #screen .home-extras .b-card-v, #screen .home-extras .b-card-v span { font-size:var(--home-label); color:var(--home-muted); line-height:1.5; margin:0; }
#screen .home-extras .b-card-v { color:var(--home-text); font-weight:500; }
#screen .home-extras .b-card-v b { font-size:1em; color:var(--home-accent); animation:none; }
#screen .home-settings { position:fixed; right:16px; bottom:56px; z-index:75; width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 88px); overflow-y:auto; background:var(--home-bg); color:var(--home-text); border:1px solid var(--home-border); box-shadow:var(--home-shadow); border-radius:var(--home-radius); padding:20px; }
#screen .home-settings-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:18px; }
#screen .home-settings-heading .b-btn { display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; padding:0; background:var(--home-card); color:var(--home-text); border-color:var(--home-border); }
#screen .home-settings-group { margin-top:16px; }
#screen .home-settings-group>span { display:block; font-size:13px; color:var(--home-muted); margin-bottom:8px; }
#screen .home-palette-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#screen .home-palette { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px; min-height:64px; color:var(--home-text); background:var(--home-card); border:1px solid var(--home-border); border-radius:8px; font:inherit; font-size:14px; }
#screen .home-palette:hover { border-color:var(--home-accent); }
#screen .home-palette:active { transform:translateY(1px); }
#screen .home-palette[aria-pressed="true"] { border-color:var(--home-accent); background:var(--home-soft); }
#screen .home-swatch { height:12px; width:40px; border-radius:6px; background:var(--home-accent); }
#screen .home-motion-label { display:flex; align-items:center; gap:12px; min-height:44px; margin-top:16px; font-size:14px; }
#screen .home-motion-label input { width:18px; height:18px; accent-color:var(--home-accent); }
#screen .home-settings-status, #screen .home-settings-hint { color:var(--home-muted); font-size:13px; line-height:1.5; margin-top:8px; }
#screen[data-home-motion="off"] #cr-idle .b-prog>i { transition:none; }
@media(max-width:1100px) {
  #screen #cr-idle .b-band-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #screen .home-event { grid-template-columns:auto minmax(0,1fr); }
  #screen .home-event-status { grid-column:2; }
}
@media(max-width:700px) {
  #screen #cr-idle .b-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  #screen #cr-idle .b-num { font-size:clamp(60px,18vw,110px); }
  #screen #cr-idle .b-left { align-items:stretch; }
  #screen #cr-idle .b-phase { align-self:start; }
  #screen .home-schedule { padding:12px; }
  #screen .home-event { padding:8px; }
  #screen .home-progress-meta { margin-top:12px; }
  #screen #cr-idle .b-band-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #screen #cr-idle .b-band-i { padding:8px; }
  #screen .home-motto { padding:8px 12px; }
}
@media(prefers-reduced-motion:reduce) { #screen #cr-idle .b-prog>i { transition:none; } }
/* 收作业的数字保留大字号，给标题和时长按钮留足高度，避免纵向居中时顶出视口。 */
@media(min-width:768px) and (min-height:800px) {
  #screen .b-hw-board-timer { min-height:calc(clamp(84px,20vh,320px) + 73px); }
}
@media(min-width:768px) and (min-height:721px) and (max-height:799px) {
  #screen .b-hw-board-timer { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; min-height:118px; }
  #screen .b-hw-board-label { justify-self:end; }
  #screen .b-hw-board-timer-controls { justify-self:start; max-width:230px; }
}