/* ============================================================
   eslworkout.com — main.css
   主题：暗色"健身房"风（训练=workout），移动优先，纯 SVG 图标
   ============================================================ */

:root{
  --bg:#0a0f16;            /* 页底 */
  --bg2:#0e1520;           /* 顶部渐变 */
  --surface:#111b28;       /* 卡片 */
  --surface2:#16232f;      /* 卡片浮起/输入 */
  --line:#233548;          /* 边框 */
  --text:#e9f0f8;
  --muted:#8ea3ba;
  --accent:#a3e635;        /* 训练绿 */
  --accent-ink:#131a08;
  --flame:#fb923c;         /* streak 橙 */
  --ok:#4ade80;  --bad:#f87171;  --warn:#fbbf24;
  --info:#38bdf8;
  --r:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.6;
  background-image:radial-gradient(1000px 400px at 80% -10%,#16283a 0%,transparent 60%),
                   radial-gradient(800px 300px at -10% 10%,#122031 0%,transparent 55%);
  min-height:100vh;
}
img,svg{vertical-align:middle}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25; margin:.4em 0}
h1{font-size:clamp(1.7rem,4vw,2.5rem)}
h2{font-size:1.35rem}
h3{font-size:1.05rem}
p{margin:.5em 0}
small{color:var(--muted)}
.wrap{max-width:960px; margin:0 auto; padding:0 16px}
.wrap.narrow{max-width:720px}

/* ---------- header ---------- */
.sitehead{position:sticky; top:0; z-index:50; background:rgba(10,15,22,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.sitehead .wrap{display:flex; align-items:center; gap:12px; min-height:56px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.2px; color:var(--text); font-size:1.12rem}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.mainnav{display:flex; align-items:center; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{color:var(--muted); padding:7px 11px; border-radius:9px; font-weight:600; font-size:.94rem; white-space:nowrap}
.mainnav a:hover{color:var(--text); text-decoration:none; background:var(--surface2)}
.mainnav a.active{color:var(--accent); background:rgba(163,230,53,.12)}
.headmeta{display:flex; align-items:center; gap:8px; margin-left:6px; flex:0 0 auto}
.chip{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--surface2);
  color:var(--text); border-radius:99px; padding:3px 10px; font-size:.8rem; font-weight:700; white-space:nowrap}
.chip.level{cursor:pointer}
.chip.level:hover{border-color:var(--accent)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.chip.hot{color:var(--flame); border-color:rgba(251,146,60,.4)}
select.chip{font:inherit; appearance:auto; color:var(--text)}
select.chip option{background:var(--surface); color:var(--text)}

/* ---------- hero / intro ---------- */
.hero{padding:26px 0 10px}
.eyebrow{color:var(--accent); font-weight:800; letter-spacing:1.5px; text-transform:uppercase; font-size:.78rem}
.lede{color:var(--muted); max-width:60ch}
.kicker{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 2px}

/* ---------- cards / layout ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow)}
.grid2{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:680px){ .grid2{grid-template-columns:1fr 1fr} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} }
.stack{display:grid; gap:14px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.muted{color:var(--muted)}
.center{text-align:center}
.mt{margin-top:14px}.mb{margin-bottom:14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font:inherit;
  font-weight:800; border-radius:12px; padding:11px 20px; border:1px solid transparent;
  background:var(--accent); color:var(--accent-ink); transition:transform .05s ease, filter .15s ease; user-select:none}
.btn:hover{filter:brightness(1.08); text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--muted); filter:none}
.btn.dim{background:var(--surface2); color:var(--text)}
.btn.flame{background:var(--flame); color:#1a0f02}
.btn.block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed; filter:none}
.btn.sm{padding:7px 13px; font-size:.86rem; border-radius:10px}
.linkbtn{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;font-weight:700;padding:0}

/* ---------- workout ---------- */
.wk-stage{text-align:center; padding:6px 0 2px}
.setpill{display:inline-flex; gap:6px; align-items:center; border:1px solid var(--line); background:var(--surface);
  border-radius:99px; padding:6px 14px; font-weight:800; font-size:.9rem}
.setpill .n{color:var(--accent)}
.bar{height:8px; border-radius:99px; background:var(--surface2); overflow:hidden; margin:10px 0 4px}
.bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; border-radius:99px}
.qcard{animation:in .2s ease}
@keyframes in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.prompt{font-size:1.22rem; font-weight:700; margin:6px 0 14px; line-height:1.5}
.prompt .blank{color:var(--accent); border-bottom:2px solid var(--accent); padding:0 6px}
.opts{display:grid; gap:9px; margin:12px 0}
.opt{display:block; width:100%; text-align:left; cursor:pointer; font:inherit; font-weight:600;
  background:var(--surface2); color:var(--text); border:2px solid var(--line); border-radius:12px; padding:13px 15px; transition:border-color .12s}
.opt:hover{border-color:var(--muted)}
.opt:disabled{cursor:default; opacity:.92}
.opt.right{border-color:var(--ok); background:rgba(74,222,128,.12)}
.opt.wrong{border-color:var(--bad); background:rgba(248,113,113,.12)}
.opt .tag{float:right; font-size:.78rem; font-weight:800; opacity:.9; text-transform:uppercase; letter-spacing:.5px}
.feedback{border-left:4px solid var(--info); background:var(--surface2); border-radius:10px; padding:10px 14px; margin-top:10px; font-size:.95rem}
.feedback.ok{border-color:var(--ok)}
.feedback.no{border-color:var(--bad)}
.navbtns{display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:14px}
.readingbox{background:var(--surface2); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  white-space:pre-line; font-size:1.02rem; margin:10px 0}

/* spelling */
.spl{text-align:center; padding:8px 0}
.spl-word{font-size:1.9rem; font-weight:900; letter-spacing:.04em; font-family:var(--mono); min-height:2.4em}
.spl-word.hidden{filter:blur(6px); user-select:none}
.spl input{width:100%; max-width:420px; font:inherit; font-size:1.25rem; text-align:center; letter-spacing:.05em;
  background:var(--surface2); color:var(--text); border:2px solid var(--line); border-radius:12px; padding:12px; font-family:var(--mono)}
.spl input:focus{outline:none; border-color:var(--accent)}
.spl input.ok{border-color:var(--ok)}
.spl input.no{border-color:var(--bad)}

/* score screen */
.score-ring{width:120px;height:120px;margin:0 auto;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:conic-gradient(var(--accent) var(--pct,0%), var(--surface2) 0)}
.score-ring b{font-size:2rem; line-height:1}
.badge{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(163,230,53,.5); background:rgba(163,230,53,.1);
  color:var(--accent); border-radius:14px; padding:10px 18px; font-weight:900; font-size:1.05rem}
.mini-legend{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; color:var(--muted); font-size:.85rem}

/* ---------- heatmap (GitHub-like) ---------- */
.hm{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,11px); gap:3px; justify-content:start; overflow-x:auto; padding:6px 0 2px}
.hm i{width:11px;height:11px;border-radius:3px;background:#1c2a3a}
.hm i.l1{background:#254e36}.hm i.l2{background:#1d7a45}.hm i.l3{background:#3fae5a}
.hm i.today{outline:2px solid var(--flame); outline-offset:1px}
.hm-days{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:.8rem}
.hm-days span b{color:var(--text)}

/* ---------- misc components ---------- */
.cal-day{display:inline-flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; min-width:38px; padding:8px 6px;
  border-radius:10px; background:var(--surface2); border:1px solid var(--line); cursor:pointer}
.cal-day .w{font-size:.66rem; color:var(--muted); text-transform:uppercase}
.cal-day .d{font-weight:900; font-size:.95rem}
.cal-day.done{border-color:rgba(74,222,128,.5)}
.cal-day.done .d{color:var(--ok)}
.cal-day.today{border-color:var(--flame)}
.cal-day:hover{border-color:var(--accent)}
.tbl{width:100%; border-collapse:collapse; font-size:.95rem}
.tbl th,.tbl td{border-bottom:1px solid var(--line); padding:9px 8px; text-align:left}
.tbl th{color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.6px}
.pill{display:inline-block; padding:2px 10px; border-radius:99px; font-size:.76rem; font-weight:800}
.pill.ok{background:rgba(74,222,128,.15); color:var(--ok)}
.pill.no{background:rgba(248,113,113,.15); color:var(--bad)}
.pill.warn{background:rgba(251,191,36,.15); color:var(--warn)}
.pill.info{background:rgba(56,189,248,.15); color:var(--info)}
.weakbar{height:7px; border-radius:99px; background:var(--surface2); overflow:hidden}
.weakbar i{display:block; height:100%; background:var(--accent); border-radius:99px}
.level-box{border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--surface2)}
.taglist{display:flex; gap:6px; flex-wrap:wrap}
.tag{background:var(--surface2); border:1px solid var(--line); border-radius:99px; padding:3px 11px; font-size:.8rem; color:var(--muted)}
.oklist li{margin:6px 0}
.oklist li::marker{color:var(--accent)}

/* plan rows */
.plan-day{display:flex; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); align-items:flex-start}
.plan-day:last-child{border-bottom:none}
.plan-day .num{flex:0 0 46px; height:46px; border-radius:12px; background:var(--surface2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--accent)}
.plan-day.done .num{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.plan-day.done h3{color:var(--muted); text-decoration:line-through}
.plan-day .tasks{margin:2px 0 0; color:var(--muted); font-size:.92rem}
.checkbox{width:20px;height:20px;margin-top:4px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.weekband{font-weight:900; color:var(--accent); font-size:.8rem; letter-spacing:1.2px; text-transform:uppercase; margin:16px 0 2px}

/* article/blog */
.article{max-width:760px}
.article h2{margin-top:1.6em; font-size:1.35rem}
.article p,.article li{color:#c7d5e4}
.article blockquote{border-left:4px solid var(--accent); margin:14px 0; padding:2px 16px; color:var(--muted); background:var(--surface2); border-radius:0 10px 10px 0}
.postrow{display:flex; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line)}
.postrow time{color:var(--muted); font-size:.82rem; white-space:nowrap}
.breadcrumb{color:var(--muted); font-size:.85rem; margin:14px 0 4px}

/* forms / footer */
label.f{display:block; font-weight:700; font-size:.88rem; margin:12px 0 4px}
input.t,textarea.t{width:100%; font:inherit; background:var(--surface2); border:1.5px solid var(--line); color:var(--text);
  border-radius:10px; padding:10px 12px}
input.t:focus,textarea.t:focus{outline:none; border-color:var(--accent)}
.sitefoot{border-top:1px solid var(--line); margin-top:48px; padding:26px 0 40px; color:var(--muted); font-size:.88rem}
.sitefoot .cols{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sitefoot h4{color:var(--text); margin:0 0 8px; font-size:.9rem; letter-spacing:.6px; text-transform:uppercase}
.sitefoot a{color:var(--muted); display:block; padding:2px 0}
.sitefoot a:hover{color:var(--accent)}
.note{background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.35); border-radius:12px; padding:10px 14px; color:#fde9b8; font-size:.9rem}
.loading-box{text-align:center; padding:40px 16px}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);
  animation:sp .8s linear infinite; margin:0 auto 14px}
@keyframes sp{to{transform:rotate(360deg)}}
code,.path{font-family:var(--mono); font-size:.86em; background:var(--surface2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--info)}
.404giant{font-size:6rem; font-weight:900; color:var(--accent); line-height:1}

/* ---------- print: workout 一页 ---------- */
.print-only{display:none !important}
@media print{
  body{background:#fff; color:#111}
  .sitehead,.sitefoot,.noprint,.btn,.navbtns,.kicker,.hm-days,#break-notice{display:none !important}
  .wrap{max-width:100%; padding:0}
  .card{border:none; box-shadow:none; padding:4px 0}
  .print-only{display:block !important}
  a{color:#111}
  .prompt{font-size:1.05rem}
  .print-block{break-inside:avoid; margin-bottom:10px}
}