/* WorkBuddy 10 天学习计划 — 公共样式（浅色主题） */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --blue:#0052d9; --blue-light:#e8f0fe; --blue-dark:#003cab;
  --orange:#ff7d00; --orange-light:#fff3e8;
  --green:#00a870; --green-light:#e8f8f2;
  --red:#d54941; --red-light:#fdecec;
  --text:#1f2329; --text2:#646a73; --text3:#8f959e;
  --bg:#f5f6f8; --card:#fff; --line:#e5e6eb;
}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.7;
  -webkit-font-smoothing:antialiased; padding-bottom:80px;
}
.wrap{ max-width:920px; margin:0 auto; padding:0 20px; }

/* header */
header{ background:linear-gradient(135deg,#0052d9 0%,#0d74ff 100%); color:#fff; padding:30px 0 24px; margin-bottom:26px; }
header .wrap{ display:flex; flex-direction:column; gap:12px; }
.topbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.back{ color:#fff; text-decoration:none; font-size:14px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); padding:6px 13px; border-radius:8px; display:inline-flex; align-items:center; gap:5px; transition:background .2s; }
.back:hover{ background:rgba(255,255,255,.3); }
.badge-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.badge{ background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3); padding:3px 11px; border-radius:20px; font-size:13px; }
.badge.hot{ background:#ff7d00; border-color:#ff7d00; font-weight:600; }
.badge.gray{ background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.2); }
h1{ font-size:27px; font-weight:700; letter-spacing:-.4px; }
.sub{ font-size:14.5px; opacity:.92; }
.prog-wrap{ background:rgba(255,255,255,.22); height:6px; border-radius:3px; overflow:hidden; }
.prog{ height:100%; width:0%; background:#fff; border-radius:3px; transition:width .4s ease; }
.prog-txt{ font-size:13px; opacity:.85; }

/* section */
section{ margin-bottom:32px; }
h2{ font-size:20px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:9px; }
h2::before{ content:''; width:4px; height:19px; background:var(--blue); border-radius:2px; flex-shrink:0; }
h3{ font-size:16px; font-weight:650; margin-bottom:8px; }
h4{ font-size:14.5px; font-weight:650; margin:10px 0 6px; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:14px; }
.card.tip{ background:#fffbe6; border-color:#ffe58f; }
.card.warn{ background:var(--red-light); border-color:#f8c4c0; }
.card.key{ background:var(--blue-light); border-color:#c6dbfb; }
.card.ok{ background:var(--green-light); border-color:#b7e4d5; }

.three{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.three .card{ margin:0; border-top:3px solid var(--blue); }
.num{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; background:var(--blue); color:#fff; border-radius:50%; font-size:13px; font-weight:700; margin-bottom:8px; }
.three p{ font-size:14px; color:var(--text2); }

/* 四要素卡 */
.four{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:14px 0; }
.four .item{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:8px; padding:12px 14px; }
.four .item .t{ font-weight:650; font-size:14.5px; color:var(--orange); margin-bottom:4px; }
.four .item .d{ font-size:13px; color:var(--text2); }
.four .item .eg{ font-size:12.5px; color:var(--text3); margin-top:6px; font-style:italic; }

ul.clean{ list-style:none; }
ul.clean li{ padding:6px 0 6px 20px; position:relative; font-size:14.5px; }
ul.clean li::before{ content:''; position:absolute; left:4px; top:15px; width:5px; height:5px; background:var(--blue); border-radius:50%; }
ul.clean.skip li{ color:var(--text3); }
ul.clean.skip li::before{ background:var(--text3); }

table{ width:100%; border-collapse:collapse; font-size:14px; margin:10px 0; }
th{ background:#f2f3f5; text-align:left; padding:8px 11px; font-weight:600; border:1px solid var(--line); font-size:13.5px; }
td{ padding:8px 11px; border:1px solid var(--line); vertical-align:top; }
tr:nth-child(even) td{ background:#fafbfc; }

.links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
a.btn{ display:inline-flex; align-items:center; gap:6px; background:var(--blue); color:#fff; text-decoration:none; padding:8px 15px; border-radius:7px; font-size:14px; font-weight:500; transition:background .2s; }
a.btn:hover{ background:var(--blue-dark); }
a.btn.ghost{ background:#fff; color:var(--blue); border:1px solid #c6dbfb; }
a.btn.ghost:hover{ background:var(--blue-light); }
a.btn.gray{ background:#fff; color:var(--text2); border:1px solid var(--line); }
a.btn.gray:hover{ background:#f2f3f5; }
a.btn.green{ background:var(--green); }
a.btn.green:hover{ background:#00875a; }

/* video */
.vtag{ display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:5px; margin-bottom:8px; }
.vtag.main{ background:var(--green-light); color:var(--green); }
.vtag.alt{ background:#f2f3f5; color:var(--text2); }
.vtitle{ font-size:16px; font-weight:650; margin-bottom:4px; }
.vstat{ font-size:13px; color:var(--text2); display:flex; flex-wrap:wrap; gap:12px; margin:6px 0; }
.age-new{ color:var(--green); font-weight:600; }
.age-old{ color:var(--red); font-weight:600; }

/* task */
.task{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:14px; transition:all .25s; }
.task.done{ background:var(--green-light); border-color:#b7e4d5; }
.task-head{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.chk{ flex-shrink:0; width:22px; height:22px; border:2px solid #c9cdd4; border-radius:6px; margin-top:2px; display:flex; align-items:center; justify-content:center; transition:all .2s; background:#fff; }
.task.done .chk{ background:var(--green); border-color:var(--green); }
.chk::after{ content:''; width:10px; height:6px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) scale(0); transition:transform .2s; margin-top:-2px; }
.task.done .chk::after{ transform:rotate(-45deg) scale(1); }
.task-title{ font-size:16px; font-weight:650; }
.task.done .task-title{ text-decoration:line-through; color:var(--text3); }
.task-body{ margin:12px 0 0 34px; font-size:14px; color:var(--text2); }
.task-body .row{ margin-bottom:6px; }
.task-body b{ color:var(--text); font-weight:600; }
.inp{ width:100%; margin-top:10px; padding:9px 12px; border:1px solid var(--line); border-radius:7px; font-size:14px; font-family:inherit; resize:vertical; min-height:60px; }
.inp:focus{ outline:none; border-color:var(--blue); }
.inp.num{ min-height:auto; width:200px; }

footer{ text-align:center; padding:26px 20px 10px; color:var(--text3); font-size:13px; }
.fin{ display:none; background:var(--green); color:#fff; padding:14px; border-radius:10px; text-align:center; font-weight:650; margin-top:18px; }
.fin.show{ display:block; }

@media (max-width:600px){
  h1{ font-size:22px; }
  .wrap{ padding:0 14px; }
  .card{ padding:15px; }
  table{ font-size:13px; }
  th,td{ padding:7px 8px; }
}

/* 导出条 */
.exp-bar{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:18px; padding:14px 16px;
  background:#fff; border:1px solid var(--line); border-radius:12px; }
.exp-t{ font-size:14px; font-weight:650; }
.exp-btn{ padding:8px 15px; border:1px solid #c6dbfb; background:var(--blue-light); color:var(--blue);
  border-radius:7px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:.2s; }
.exp-btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.exp-h{ font-size:12.5px; color:var(--text3); margin-left:auto; }
@media(max-width:600px){ .exp-h{ margin-left:0; width:100%; } .exp-btn{ flex:1; min-height:40px; } }