:root { color-scheme:light; --ink:#27372e; --muted:#758279; --line:#e2e8e3; --green:#37664a; font:14px/1.65 "Segoe UI","Microsoft YaHei",sans-serif; color:var(--ink); background:#f6f8f6; }
* { box-sizing:border-box; } body { margin:0; } button,input,textarea { font:inherit; color:inherit; }
button { border:1px solid var(--line); background:white; border-radius:5px; padding:8px 14px; cursor:pointer; } button:hover { background:#f0f5f0; } button:disabled { opacity:.5; cursor:default; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid #81b391; outline-offset:3px; }
.primary { background:var(--green); color:white; border-color:var(--green); } .primary:hover { background:#2a523a; }
.top { padding:25px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fff; border-bottom:1px solid var(--line); }
h1 { font-size:23px; font-weight:500; margin:0 0 3px; } .top p { margin:0; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.top-actions { display:flex; align-items:center; gap:22px; } #sync { font-size:12px; color:var(--muted); white-space:nowrap; } #sync.online:before { content:""; width:6px; height:6px; display:inline-block; margin-right:7px; background:#70a580; border-radius:50%; }
main { max-width:1440px; margin:auto; padding:28px 40px; } .board { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.column h2 { font-size:16px; font-weight:500; margin:0 0 15px; } .column h2 span { margin-left:7px; color:var(--muted); font-size:12px; } .task-list { display:flex; flex-direction:column; gap:12px; }
.task { text-align:left; padding:19px 22px; background:#fff; border:1px solid var(--line); border-radius:8px; width:100%; } .task:hover { background:#fff; border-color:#a9c8b1; } .task.selected { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.task h3 { margin:0 0 8px; font-size:16px; font-weight:500; overflow-wrap:anywhere; } .task .progress { color:var(--muted); font-size:13px; margin:0 0 12px; overflow-wrap:anywhere; } .task .next { font-size:13px; margin:0; overflow-wrap:anywhere; } .task .next span { color:var(--muted); margin-right:7px; }
.task .meta { font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:12px; margin-top:13px; } .task .follow { font-size:12px; margin:7px 0 0; color:#887246; overflow-wrap:anywhere; } .task .overdue { color:#b65d46; }
.empty { color:var(--muted); font-size:13px; padding:28px 20px; border:1px dashed #d5dfd7; border-radius:8px; line-height:1.9; }
#new-form { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 23px; } #new-title { min-width:180px; flex:1; max-width:500px; padding:9px 12px; background:white; border:1px solid var(--line); border-radius:5px; }
#notice { margin-bottom:22px; padding:12px 16px; background:#edf4ee; border-radius:5px; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; } #notice.error { background:#fff0e9; color:#9b513d; }
#details { margin-top:30px; background:white; border:1px solid var(--line); border-radius:9px; padding:22px; } .detail-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; margin-bottom:20px; } .detail-heading h2 { font-size:19px; font-weight:500; margin:0; } .detail-heading p { font-size:12px; color:var(--muted); margin:4px 0 0; overflow-wrap:anywhere; } .detail-heading button { margin-left:6px; }
.wide { overflow-x:auto; } table { width:100%; min-width:1030px; border-collapse:collapse; font-size:12px; text-align:left; } th { font-weight:500; color:var(--muted); background:#f7f9f7; } th,td { padding:12px; border-bottom:1px solid var(--line); vertical-align:top; min-width:100px; max-width:210px; overflow-wrap:anywhere; } td.files { min-width:175px; } td.files button { font-size:11px; padding:4px 8px; display:block; margin-top:6px; }
.record-sections { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:22px; } .record-sections h3,.history h3 { font-size:14px; font-weight:500; margin:0 0 9px; } .record-sections ul { margin:0; padding:0; list-style:none; font-size:13px; } .record-sections li { padding:5px 0; display:flex; align-items:start; gap:8px; overflow-wrap:anywhere; } .record-sections input { margin-top:5px; accent-color:var(--green); cursor:pointer; } .empty-text { color:var(--muted); }
.history { margin-top:25px; border-top:1px solid var(--line); padding-top:20px; } .history-entry { font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; border-left:2px solid #d2e1d6; padding-left:13px; margin:13px 0; } .task-id { margin-top:18px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
#edit-form label { display:block; font-size:13px; margin-bottom:8px; } #markdown { display:block; width:100%; min-height:450px; resize:vertical; background:#fbfcfa; border:1px solid var(--line); border-radius:5px; font:13px/1.9 Consolas,"Microsoft YaHei",monospace; padding:18px; }
.edit-bottom { margin-top:15px; display:flex; justify-content:space-between; align-items:center; gap:15px; flex-wrap:wrap; } .edit-bottom span { font-size:12px; color:var(--muted); } .edit-bottom button { margin-left:5px; margin-bottom:5px; }
footer { margin-top:32px; font-size:12px; color:var(--muted); } [hidden] { display:none !important; }
@media(max-width:750px) { .top{padding:20px;align-items:start;flex-wrap:wrap}.top-actions{gap:15px}main{padding:22px 20px}.board{grid-template-columns:1fr;gap:25px}.record-sections{grid-template-columns:1fr;gap:18px}#details{padding:16px}.detail-heading button{margin-left:0}.edit-bottom button{margin-left:0} }

/* Compact single-page layout. */
.top { padding:12px 28px; gap:14px; }
.top-title { display:flex; align-items:center; gap:15px; min-width:0; }
h1 { font-size:19px; margin:0; white-space:nowrap; }
.top-divider { color:#c1cdc4; }
.top p { max-width:270px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-actions { flex-shrink:0; gap:16px; }
.top-actions button { padding:6px 12px; font-size:12px; }
main { padding:22px 28px; }
.schedule { background:#fff; border:1px solid var(--line); border-radius:9px; margin-bottom:25px; padding:18px 22px 12px; }
.schedule-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px 15px; margin-bottom:15px; }
.schedule-heading h2 { font-size:15px; font-weight:500; margin:0; }
.schedule-heading p { font-size:11px; color:var(--muted); margin:0; }
.timeline-track { display:flex; overflow-x:auto; padding:0 0 10px; }
.time-point { flex:1 0 175px; position:relative; padding:0 18px 5px; }
.time-point:after { content:""; position:absolute; top:38px; left:0; right:0; height:2px; background:#e3eae5; }
.time-date { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; }
.time-date span { color:var(--muted); font-size:11px; font-weight:400; }
.time-dot { width:10px; height:10px; background:#c1d1c5; border-radius:50%; margin:8px 0 12px; position:relative; z-index:1; outline:4px solid white; }
.today .time-dot { background:var(--green); }
.today .time-date span { color:var(--green); }
.past-due .time-dot { background:#b65d46; }
.time-count { display:flex; gap:13px; flex-wrap:wrap; font-size:11px; }
.time-count b { font-size:16px; margin-left:3px; font-weight:500; font-variant-numeric:tabular-nums; }
.count-open { color:#567960; }
.count-done { color:#73859b; }
.time-tasks { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; min-height:27px; }
.timeline-task { font-size:11px; padding:2px 7px; background:#f5f8f5; color:#617b68; border-color:#e6ede7; font-variant-numeric:tabular-nums; }
.undated { border-top:1px solid #edf1ed; padding-top:9px; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font-size:11px; color:var(--muted); }
.undated div { display:flex; gap:5px; flex-wrap:wrap; }
.undated b { color:var(--ink); font-weight:500; }
.board { gap:22px; }
.column h2 { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.column h2 span { background:#e8eee9; color:#5b7863; border-radius:5px; padding:1px 7px; margin:0; }
.column:nth-child(2) h2 span { background:#edf0f4; color:#73859b; }
.task { padding:16px 19px; }
.task-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.task-number { font-size:11px; letter-spacing:.5px; color:#688574; font-variant-numeric:tabular-nums; }
.deadline { font-size:11px; background:#f3f6f3; padding:2px 7px; border-radius:4px; color:#68816f; white-space:nowrap; }
.task .overdue { background:#fcf0eb; }
.task h3 { font-size:15px; margin-bottom:7px; }
.task .progress { line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:10px; }
.task .next { background:#f7f9f7; border-radius:4px; padding:8px 10px; }
.task .meta { padding-top:10px; margin-top:10px; border-top:1px solid #f0f3f0; font-size:11px; justify-content:space-between; }
.view-record { color:#72927c; }
footer { margin-top:24px; font-size:11px; }
@media(min-width:1200px) {
  .board { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
  .column { min-width:0; }
  #open-tasks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .task { height:100%; }
  .task .meta { gap:5px; font-size:10px; }
}
@media(max-width:750px) {
  .top { padding:11px 18px; gap:10px; }
  .top-title { gap:9px; }
  .top p { max-width:185px; font-size:11px; }
  .top-actions { width:100%; justify-content:space-between; }
  main { padding:18px; }
  .schedule { padding:15px 14px 11px; margin-bottom:20px; }
  .time-point { flex-basis:155px; padding-left:10px; padding-right:10px; }
  .schedule-heading p { width:100%; }
}

/* P5-inspired graphic skin: the controls and data flow stay unchanged. */
:root {
  --ink:#141414; --muted:#585858; --line:#202020; --green:#c8102e;
  color:#141414; background:#cf1030;
  font-family:"Microsoft YaHei","Segoe UI",sans-serif;
}
body {
  min-height:100vh;
  background:linear-gradient(117deg,transparent 0 69%,rgba(0,0,0,.13) 69% 82%,transparent 82%),
    repeating-linear-gradient(135deg,transparent 0 46px,rgba(0,0,0,.045) 46px 48px),#cf1030;
}
::selection { background:#cf1030; color:#fff; }
button,input,textarea { border-radius:0; }
button { border:2px solid #141414; font-weight:700; box-shadow:3px 3px 0 #141414; }
button:hover { background:#141414; color:#fff; }
button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #cf1030; outline-offset:4px;
}
.top {
  background:#101010; color:#fff; border-bottom:5px solid #fff;
  padding:12px 28px; box-shadow:0 4px 0 #101010;
}
.top-title { gap:12px; }
h1 { font-size:23px; font-weight:900; font-style:italic; letter-spacing:-1px; }
.top-divider { color:#f32649; font-size:24px; font-weight:900; }
.top p { color:#c9c9c9; font-size:11px; }
#sync { color:#d5d5d5; font-size:11px; }
#sync.online:before { background:#f32b4b; border-radius:0; transform:rotate(-12deg); }
.top-actions button { background:#fff; color:#111; border-color:#fff; box-shadow:3px 3px 0 #cf1030; }
.top-actions button:hover { background:#cf1030; color:#fff; }
.top button:focus-visible { outline-color:#fff; }
main { max-width:1440px; padding-top:27px; }
.schedule {
  position:relative; background:#111; color:#fff;
  border:3px solid #111; border-radius:0; box-shadow:6px 6px 0 #fff;
  padding:20px 22px 14px; margin-bottom:32px;
}
.schedule-heading { margin-bottom:20px; }
.schedule-heading h2 {
  font-size:19px; font-weight:900; color:#111; background:#fff;
  padding:3px 16px; transform:rotate(-2deg); box-shadow:4px 4px 0 #cf1030;
}
.schedule-heading p { color:#d0d0d0; font-size:11px; }
.timeline-track { scrollbar-color:#cf1030 #282828; scrollbar-width:thin; }
.time-point:after { background:#666; height:3px; }
.time-date { font-size:21px; font-weight:900; font-style:italic; }
.time-date span { color:#c9c9c9; font-style:normal; }
.time-dot { border-radius:0; background:#fff; outline:4px solid #111; transform:rotate(45deg); }
.today .time-dot,.past-due .time-dot { background:#ff3659; }
.today .time-date span { color:#ff7c94; font-weight:700; }
.time-count { gap:14px; }
.time-count b { font-size:21px; font-weight:900; }
.count-open { color:#ff7c94; }
.count-done { color:#fff; }
.timeline-task {
  background:#fff; color:#111; border:1px solid #fff; box-shadow:2px 2px 0 #cf1030;
  font-weight:900; padding:2px 8px;
}
.timeline-task:hover { background:#cf1030; color:#fff; border-color:#cf1030; }
.timeline-task:focus-visible { outline-color:#fff; }
.undated { color:#d0d0d0; border-color:#444; padding-top:12px; }
.undated b { color:#fff; font-weight:900; }
.column h2 {
  color:#fff; font-size:23px; font-weight:900; font-style:italic;
  letter-spacing:-.5px; margin-bottom:17px;
}
.column h2:before { content:""; width:8px; height:25px; background:#111; transform:skew(-15deg); margin-right:2px; }
.column h2 span,.column:nth-child(2) h2 span {
  background:#111; color:#fff; border-radius:0; padding:0 10px; font-size:16px;
  transform:rotate(-5deg); box-shadow:2px 2px 0 #fff;
}
.task-list { gap:19px; }
.task {
  position:relative; background:#fff; color:#141414; border:3px solid #111;
  border-radius:0; box-shadow:5px 5px 0 #111; padding:16px 19px;
  transition:box-shadow .12s ease,transform .12s ease;
}
.task:hover { color:#141414; background:#fff; border-color:#111; box-shadow:7px 7px 0 #111; transform:translate(-2px,-2px); }
.task.selected { border-color:#111; box-shadow:5px 5px 0 #fff,8px 8px 0 #111; }
.task-number {
  display:inline-block; background:#111; color:#fff; font-size:13px;
  font-weight:900; padding:1px 10px; transform:rotate(-4deg);
}
.deadline { background:#111; color:#fff; border-radius:0; font-weight:700; padding:3px 8px; font-size:10px; }
.task .overdue { color:#fff; background:#bb0b29; }
.task h3 { font-size:16px; font-weight:900; line-height:1.55; margin-top:11px; margin-bottom:9px; }
.task .progress { font-weight:400; color:#575757; font-size:12px; line-height:1.8; }
.task .next { background:#f1f1f1; color:#171717; border-radius:0; border-left:4px solid #c8102e; font-size:12px; font-weight:500; }
.task .next span { color:#b60825; font-size:11px; font-weight:900; }
.task .follow { color:#9e0a23; font-weight:500; }
.task .meta { color:#666; border-top:1px solid #ccc; font-weight:400; }
.view-record { color:#a50821; font-weight:800; }
.empty { background:#111; color:#ddd; border:2px solid #fff; border-radius:0; box-shadow:5px 5px 0 #111; }
#details { background:#fff; border:3px solid #111; border-radius:0; box-shadow:6px 6px 0 #111; padding:24px; }
.detail-heading { border-bottom:3px solid #111; padding-bottom:18px; }
.detail-heading h2 { font-weight:900; font-size:22px; }
.detail-heading p { color:#666; }
th { color:#fff; background:#111; font-weight:700; }
td { border-color:#ccc; }
.record-sections h3,.history h3 { display:inline-block; background:#111; color:#fff; padding:3px 12px; font-weight:900; transform:skew(-5deg); }
.history { border-color:#111; }
.history-entry { border-left:4px solid #c8102e; background:#f5f5f5; padding:10px 14px; }
.record-sections input { width:16px; height:16px; accent-color:#c8102e; flex-shrink:0; }
#new-title,#markdown { background:#fff; color:#111; border:2px solid #111; border-radius:0; }
#new-form { background:#111; padding:14px; border:2px solid #fff; box-shadow:4px 4px 0 #111; }
.primary { background:#c8102e; color:#fff; border-color:#111; }
.primary:hover { background:#111; }
#notice { background:#fff; border:2px solid #111; border-left:8px solid #111; border-radius:0; box-shadow:4px 4px 0 #111; }
#notice.error { background:#fff; color:#ad0b26; border-left-color:#ad0b26; }
footer { color:#fff; font-weight:500; border-top:2px solid rgba(255,255,255,.55); padding-top:13px; }
@media(max-width:750px) {
  .top { padding:11px 18px; }
  h1 { font-size:21px; }
  .top-title { gap:9px; }
  .top p { max-width:175px; }
  .schedule { padding:16px 14px 12px; }
  .schedule-heading { gap:12px; }
  .schedule-heading h2 { font-size:17px; }
  .time-date { font-size:19px; }
  .task { padding:16px; }
  #details { padding:17px; }
  .detail-heading h2 { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) { .task { transition:none; } .task:hover { transform:none; } }

/* A natural week always has seven calendar days, including rest days. */
.calendar-scroll { overflow-x:auto; scrollbar-color:#cf1030 #282828; scrollbar-width:thin; padding-bottom:9px; }
.calendar-weeks { min-width:840px; }
.calendar-week + .calendar-week { margin-top:17px; }
.week-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:2px solid #fff; padding:0 7px 8px; font-size:11px; }
.week-heading strong { font-size:14px; }
.week-heading strong span { margin-left:9px; font-weight:400; font-size:12px; color:#ddd; }
.week-heading b { font-size:15px; }
.week-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-day { padding:12px 9px 10px; min-height:137px; border-right:1px solid #444; background:#171717; }
.calendar-day:last-child { border-right:0; }
.day-weekday { display:flex; align-items:center; gap:7px; color:#c9c9c9; font-size:11px; }
.day-weekday span { color:#fff; background:#c8102e; padding:0 4px; font-size:10px; }
.day-date { font-size:20px; font-weight:900; font-style:italic; line-height:1.7; }
.day-kind { min-height:24px; font-size:10px; color:#ddd; }
.calendar-day .time-count { gap:3px 10px; font-size:10px; }
.calendar-day .time-count b { font-size:16px; }
.calendar-day .time-tasks { min-height:24px; margin-top:8px; }
.calendar-day.weekend { background:#303030; }
.calendar-day.holiday { background:repeating-linear-gradient(135deg,#4b1522 0 8px,#45131e 8px 10px); }
.calendar-day.holiday .day-kind { color:#ff9aab; font-weight:700; }
.calendar-day.workday { background:#eee; color:#111; }
.calendar-day.workday .day-weekday,.calendar-day.workday .day-kind,.calendar-day.workday .count-done { color:#333; }
.calendar-day.workday .count-open { color:#b40a27; }
.calendar-day.today { box-shadow:inset 0 4px 0 #ff3659; }
.calendar-day.past-due .day-date { color:#ff9aab; }
.calendar-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:9px 0 13px; color:#ccc; font-size:10px; }
.calendar-legend>span:before { content:""; display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:middle; border:1px solid #888; }
.calendar-legend .legend-holiday:before { background:#752039; }
.calendar-legend .legend-weekend:before { background:#303030; }
.calendar-legend .legend-workday:before { background:#eee; }
.calendar-legend a { color:#ddd; text-underline-offset:3px; }
.calendar-legend a:hover { color:#ff9aab; }

/* Compact task cards with a small, independent title edit control. */
.task { padding:11px 13px; border-width:2px; box-shadow:3px 3px 0 #111; cursor:pointer; }
.task-list { gap:13px; }
.task-top { margin-bottom:6px; }
.task-number { font-size:11px; padding:0 7px; }
.deadline { padding:2px 6px; }
.task-title-row { display:flex; align-items:flex-start; gap:8px; margin:6px 0; }
.task h3 { flex:1; min-width:0; margin:0; font-size:14px; line-height:1.5; }
.task-title { display:block; width:100%; text-align:left; font:inherit; font-weight:900; border:0; padding:0; background:transparent; color:#111; box-shadow:none; overflow-wrap:anywhere; }
.task-title:hover { color:#b60825; background:transparent; box-shadow:none; }
.rename-title { flex-shrink:0; padding:2px 5px; font-size:10px; line-height:1.7; border-width:1px; box-shadow:1px 1px 0 #111; }
.rename-form { width:100%; cursor:default; }
.rename-form input { width:100%; min-width:0; padding:4px 7px; font-size:13px; border:2px solid #111; }
.rename-form div { display:flex; gap:7px; margin-top:6px; }
.rename-form button { padding:2px 8px; font-size:11px; box-shadow:1px 1px 0 #111; }
.task .progress { font-size:11px; line-height:1.65; -webkit-line-clamp:1; margin:0 0 7px; }
.task .next { font-size:11px; padding:5px 7px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.task .follow { font-size:10px; margin-top:5px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.task .meta { padding-top:6px; margin-top:7px; font-size:10px; }
@media(min-width:1440px) { #open-tasks { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Overview first; completed work stays in a quiet, collapsible corner. */
.overview { margin:0 0 26px; }
.overview-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px 18px; margin-bottom:13px; color:#fff; }
.overview-heading h2 { font-size:23px; font-weight:900; font-style:italic; margin:0; }
.overview-heading p { margin:0; font-size:11px; }
.overview-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.overview-metric { background:#111; color:#fff; border:2px solid #111; box-shadow:4px 4px 0 #fff; padding:12px 17px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.overview-metric>span { font-size:13px; font-weight:800; }
.overview-metric strong { font-size:37px; font-style:italic; line-height:1.2; font-variant-numeric:tabular-nums; }
.overview-metric small { font-size:10px; font-style:normal; font-weight:400; margin-left:7px; }
.metric-open { background:#fff; color:#111; box-shadow:4px 4px 0 #111; }
.metric-overdue strong { color:#ff7c94; }
.board { display:block; }
#open-tasks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.completed-corner { margin:22px 0 0 auto; width:340px; max-width:100%; color:#fff; background:#111; border:2px solid #fff; box-shadow:3px 3px 0 #111; }
.completed-corner summary { cursor:pointer; padding:10px 13px; font-size:13px; font-weight:800; }
.completed-corner summary:focus-visible { outline:3px solid #ff7c94; outline-offset:4px; }
.completed-corner #done-count { margin-left:7px; background:#fff; color:#111; padding:0 6px; }
.completed-hint { float:right; font-size:10px; color:#bcbcbc; font-weight:400; }
.completed-corner[open] .completed-hint { font-size:0; }
.completed-corner[open] .completed-hint:after { content:"收起"; font-size:10px; }
.completed-corner #done-tasks { padding:0 12px 12px; max-height:380px; overflow-y:auto; }
.completed-corner .empty { border:0; box-shadow:none; padding:10px 0; font-size:11px; }
.completed-corner .task { height:auto; }
@media(max-width:1099px) { #open-tasks { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .overview-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .overview-metric { padding:10px 12px; }
  .overview-metric strong { font-size:30px; }
  .overview-heading h2 { font-size:20px; }
  #open-tasks { grid-template-columns:1fr; }
  .completed-corner { width:270px; }
}

/* Two small week strips keep the calendar secondary to the task board. */
.schedule { padding:9px 14px 7px; margin-bottom:19px; box-shadow:4px 4px 0 #fff; }
.schedule-heading { margin-bottom:7px; gap:4px 12px; }
.schedule-heading h2 { font-size:13px; padding:1px 9px; box-shadow:2px 2px 0 #cf1030; }
.schedule-heading p { font-size:9px; }
.calendar-scroll { padding-bottom:0; }
.calendar-weeks { min-width:800px; }
.calendar-week + .calendar-week { margin-top:6px; }
.week-heading { padding:0 5px 2px; border-bottom-width:1px; font-size:9px; }
.week-heading strong { font-size:10px; }
.week-heading strong span { font-size:9px; margin-left:6px; }
.week-heading b { font-size:10px; }
.calendar-day { padding:2px 6px; min-height:36px; }
.day-head { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.day-weekday { font-size:9px; gap:3px; }
.day-weekday span { font-size:8px; padding:0 2px; }
.day-date { font-size:12px; line-height:1.5; }
.day-kind { min-height:0; font-size:8px; margin-left:auto; }
.day-work { display:flex; align-items:center; justify-content:space-between; gap:3px; min-height:16px; }
.calendar-day .time-count { flex-wrap:nowrap; gap:7px; font-size:9px; white-space:nowrap; }
.calendar-day .time-count b { font-size:11px; margin-left:1px; }
.calendar-day .time-tasks { margin:0; min-height:0; flex-wrap:nowrap; max-width:60%; overflow-x:auto; scrollbar-width:thin; padding:1px 1px 2px; }
.calendar-day .timeline-task { font-size:9px; padding:0 4px; line-height:1.5; flex-shrink:0; box-shadow:1px 1px 0 #cf1030; }
.calendar-legend { display:inline-flex; gap:5px 10px; margin:5px 13px 0 0; font-size:8px; }
.calendar-legend>span:before { width:7px; height:7px; margin-right:3px; }
.schedule-note { display:inline-block; font-size:9px; color:#bcbcbc; margin-top:4px; }
.task-actions { display:flex; align-items:center; gap:9px; }
.complete-task { background:#111; color:#fff; padding:3px 7px; font-size:10px; border-width:1px; box-shadow:1px 1px 0 #c8102e; white-space:nowrap; }
.complete-task:hover { background:#c8102e; color:#fff; border-color:#c8102e; }
.task-stamp {
  position:absolute; top:8px; right:10px; width:55px; height:55px;
  border:2px solid currentColor; border-radius:50%; color:#b90d2d;
  background:rgba(255,255,255,.94); transform:rotate(13deg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  line-height:1; pointer-events:none; z-index:1;
}
.task-stamp:before { content:""; position:absolute; inset:3px; border:1px dashed currentColor; border-radius:50%; opacity:.65; }
.task-stamp span { font-size:9px; font-weight:800; letter-spacing:2px; margin-left:2px; }
.task-stamp strong { font-size:21px; font-weight:900; line-height:1.12; font-variant-numeric:tabular-nums; }
.task-stamp small { font-size:8px; font-weight:800; }
.stamp-undated { color:#666; transform:rotate(-10deg); }
.stamp-undated strong,.stamp-today strong { font-size:14px; line-height:1.5; }
.stamp-overdue,.stamp-today { color:#cf1030; border-width:3px; }
.stamp-done { transform:rotate(-14deg); color:#b90d2d; }
.stamp-done strong { font-size:23px; }
.task .task-top,.task .task-title-row { padding-right:63px; }
.task .task-top { min-height:21px; gap:5px; }
.task .deadline { font-size:9px; }
.task .task-title-row { min-height:23px; }
.task .rename-form { margin-right:-63px; width:calc(100% + 63px); margin-top:33px; }
.importance-row { margin-top:6px; }
.importance { display:inline-flex; align-items:center; gap:6px; color:#666; font-size:10px; cursor:default; }
.importance select { font:700 10px/1.5 "Microsoft YaHei",sans-serif; min-width:65px; padding:2px 4px; color:#333; background:#eee; border:1px solid #999; border-radius:0; cursor:pointer; }
.importance select:focus-visible { outline:2px solid #c8102e; outline-offset:2px; }
.importance-high select { color:#fff; background:#bf1030; border-color:#bf1030; }
.importance-medium select { color:#111; background:#f3d264; border-color:#a78b28; }
.importance-low select { color:#333; background:#e7e7e7; border-color:#777; }
.importance select option { color:#111; background:#fff; }
@media(max-width:750px) {
  .schedule { padding:8px 10px 6px; }
  .schedule-heading p { width:auto; }
  .schedule-heading h2 { font-size:12px; }
  .calendar-scroll { padding-bottom:4px; }
}

/* A compact header, one continuous fortnight and five compact task cards. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.top { gap:20px; padding:10px 28px; }
.top-title { flex-shrink:0; gap:9px; }
.top h1 { font-size:21px; }
.top #directory { max-width:145px; font-size:10px; }
.top .overview { flex:1; max-width:550px; margin:0; min-width:0; }
.top .overview-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.top .overview-metric { padding:4px 9px; gap:7px; border:1px solid #555; box-shadow:none; min-width:0; }
.top .overview-metric>span { font-size:10px; white-space:nowrap; }
.top .overview-metric strong { font-size:23px; }
.top .overview-metric small { display:none; }
.top .metric-open { border-color:#fff; }
.top .top-actions { gap:11px; }
.top #sync { font-size:10px; }
main { padding-top:19px; }
.calendar-weeks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:1050px; }
.calendar-week + .calendar-week { margin-top:0; border-left:3px solid #cf1030; }
.week-heading { padding:2px 8px 5px; min-height:24px; }
.week-heading strong { font-size:11px; }
.week-heading strong span { font-size:10px; }
.week-heading>span { font-size:9px; }
.calendar-day { min-height:96px; padding:6px 5px 4px; }
.day-head { flex-wrap:wrap; gap:0; }
.day-weekday { width:100%; font-size:10px; min-height:18px; }
.day-date { font-size:15px; line-height:1.5; }
.day-kind { margin:0; width:100%; font-size:9px; min-height:17px; }
.day-work { flex-direction:column; align-items:flex-start; gap:3px; }
.calendar-day .time-count { gap:9px; font-size:9px; }
.calendar-day .time-count b { font-size:12px; }
.calendar-day .time-count { flex-wrap:wrap; gap:2px 7px; }
.count-active { color:#fff; }
.calendar-day.workday .count-active { color:#333; }
.calendar-day .time-tasks { max-width:100%; min-height:17px; }
.calendar-legend { font-size:9px; }
.schedule { padding:10px 14px 8px; }
.schedule-heading h2 { font-size:14px; }
#open-tasks { grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
#open-tasks>.task { display:flex; flex-direction:column; min-height:270px; height:auto; padding:11px; }
#open-tasks .task-title { font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
#open-tasks .task-title-row { flex-shrink:0; }
#open-tasks .progress { -webkit-line-clamp:2; flex-shrink:0; }
#open-tasks .follow { flex-shrink:0; }
#open-tasks .next { flex-shrink:0; }
#open-tasks .importance-row { margin-top:auto; padding-top:7px; }
#open-tasks .meta { flex-shrink:0; gap:5px; margin-top:7px; font-size:9px; }
#open-tasks .task-actions { gap:6px; margin-left:auto; }
#open-tasks .complete-task { font-size:9px; padding:3px 5px; }
#open-tasks .view-record { font-size:9px; }
@media(max-width:1199px) {
  #open-tasks { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:1099px) {
  .top { flex-wrap:wrap; gap:10px 18px; }
  .top .overview { order:3; flex-basis:100%; max-width:none; }
  .top .top-actions { margin-left:auto; }
  #open-tasks { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:800px) {
  #open-tasks { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .top { padding:10px 18px; }
  .top .top-actions { width:auto; }
  .calendar-scroll { padding-bottom:5px; }
}
@media(max-width:520px) {
  #open-tasks { grid-template-columns:1fr; }
  #open-tasks>.task { aspect-ratio:1.15 / 1; min-height:260px; }
  .top .top-title { width:100%; }
  .top .top-actions { width:100%; margin-left:0; }
  .top .overview-metric { padding:4px 6px; gap:4px; }
  .top .overview-metric>span { font-size:9px; }
  .top .overview-metric strong { font-size:20px; }
}

/* Keep save feedback next to the left-aligned header metrics. */
.board-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.board-heading h2 { margin-bottom:0; }
.task-sort { display:flex; align-items:center; gap:8px; color:#fff; font-size:11px; font-weight:800; }
.task-sort select { font:700 11px/1.5 "Microsoft YaHei",sans-serif; background:#111; color:#fff; border:2px solid #fff; padding:5px 8px; cursor:pointer; }
.task-sort select:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.task-sort option { color:#111; background:#fff; }
.top { justify-content:flex-start; gap:16px; }
.header-work { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.top .header-work .overview { flex:0 0 350px; max-width:350px; order:0; }
.top .top-actions { margin-left:auto; }
.top #notice { flex:1; min-width:0; margin:0; padding:6px 9px; color:#111; font-size:11px; line-height:1.5; border:1px solid #fff; border-left:3px solid #cf1030; box-shadow:none; white-space:pre-wrap; }
.top #notice.error { color:#ad0b26; }
.calendar-day { min-height:86px; }
.calendar-week { display:flex; flex-direction:column; }
.calendar-week .week-days { flex:1; }
.date-line { width:100%; }
.ddl-stamps { display:flex; flex-wrap:wrap; align-content:flex-start; align-items:flex-start; justify-content:flex-start; gap:4px; min-height:26px; max-width:100%; margin:5px 0 4px; transform:rotate(-7deg); }
.calendar-day .ddl-stamps .timeline-task { border:2px solid #cf1030; background:#fff; color:#b60825; font-size:9px; font-weight:900; padding:0 3px; line-height:1.4; box-shadow:1px 1px 0 #111; }
.calendar-day .ddl-stamps .timeline-task:hover { background:#cf1030; color:#fff; }
@media(max-width:1199px) {
  .top { flex-wrap:wrap; }
  .header-work { order:3; flex-basis:100%; }
}
@media(max-width:600px) {
  .header-work { flex-wrap:wrap; gap:8px; }
  .top .header-work .overview { flex:1 0 100%; max-width:none; }
  .top #notice { flex-basis:100%; }
}

/* ---------- 云端版新增：登录页 / 账号胶囊 / 资料区 ---------- */
.user-chip {
  font-size:11px; font-weight:900; color:#fff; background:#cf1030;
  border:2px solid #fff; padding:2px 10px; box-shadow:2px 2px 0 #fff; white-space:nowrap;
}
.login-page { display:flex; align-items:center; justify-content:center; padding:24px; }
.login-wrap { max-width:420px; width:100%; margin:0; padding:0; }
.login-card {
  background:#fff; border:3px solid #111; box-shadow:8px 8px 0 #111; padding:30px 28px 22px;
}
.login-brand { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:16px; border-bottom:3px solid #111; }
.login-brand h1 { font-size:26px; font-weight:900; font-style:italic; letter-spacing:-1px; margin:0; color:#111; }
.login-brand p { margin:0; font-size:11px; color:#666; }
.login-card label { display:block; font-size:11px; font-weight:900; color:#111; margin:0 0 6px; letter-spacing:1px; }
.login-card input {
  width:100%; padding:11px 12px; margin-bottom:18px; background:#fff; color:#111;
  border:2px solid #111; border-radius:0; font-size:14px;
}
.login-card button { width:100%; padding:12px; font-size:15px; margin-top:4px; }
#login-status { min-height:20px; margin:14px 0 0; font-size:12px; font-weight:700; color:#ad0b26; }
.login-foot { margin-top:18px; padding-top:12px; border-top:2px solid #111; color:#666; font-size:11px; font-weight:500; }
#materials-panel {
  margin-top:22px; background:#f7f7f7; border:3px solid #111; box-shadow:5px 5px 0 #111; padding:18px 20px;
}
.materials-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.materials-head h3 { font-size:15px; font-weight:900; margin:0; }
.materials-dir { font-size:11px; color:#666; margin:8px 0 14px; overflow-wrap:anywhere; }
.materials-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.materials-cols h4 { font-size:12px; font-weight:900; margin:0 0 8px; color:#b60825; }
.materials-cols ul { margin:0; padding:0; list-style:none; font-size:12px; }
.materials-cols li { padding:4px 0; overflow-wrap:anywhere; }
.materials-note { font-size:11px; color:#666; margin:14px 0 0; }
@media(max-width:600px) { .materials-cols { grid-template-columns:1fr; } }