:root{
  --bg:#EEF1F4; --paper:#F8FAFB; --ink:#1F2A36; --muted:#667280; --line:#D2D9E1;
  --dawn:#B97A1F; --dusk:#3E4C8A; --accent:var(--dawn);
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131820; --paper:#1A202A; --ink:#E4E9EF; --muted:#8B96A5; --line:#2B3442;
    --dawn:#E3AA52; --dusk:#95A3E6;
  }
}
:root[data-theme="dark"]{
  --bg:#131820; --paper:#1A202A; --ink:#E4E9EF; --muted:#8B96A5; --line:#2B3442;
  --dawn:#E3AA52; --dusk:#95A3E6;
}
body[data-part="evening"]{ --accent:var(--dusk); }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;}
.wrap{max-width:620px;margin:0 auto;padding:28px 20px 64px;}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.datenav{display:flex;align-items:center;gap:6px;}
.datenav button{background:none;border:1px solid var(--line);color:var(--ink);width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1}
.datenav button:disabled{opacity:.35;cursor:default}
.date{font-family:var(--serif);font-size:22px;font-weight:600;min-width:9.5em;text-align:center}
.status{font-size:13px;color:var(--muted);min-height:1.4em}
.switch{display:flex;margin:28px 0 8px;border-bottom:1px solid var(--line);}
.switch button{flex:1;background:none;border:none;padding:10px 0 12px;font:inherit;font-size:17px;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;}
.switch button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.part[hidden]{display:none}
section.q{margin-top:30px;}
.qhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
h2{font-family:var(--serif);font-weight:600;font-size:19px;margin:0;}
.hint-btn{background:none;border:none;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;padding:4px 0;white-space:nowrap}
.hintwrap{position:relative;flex:none}
.plist{display:none;position:absolute;right:0;top:100%;z-index:5;padding-top:6px;width:min(340px,80vw)}
.plist ul{list-style:none;margin:0;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(20,30,45,.14)}
@media (max-width:600px){ .plist ul{max-height:55vh;overflow:auto} }
.plist li button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font:inherit;font-size:14px;line-height:1.5;padding:6px 8px;border-radius:5px;cursor:pointer}
.plist li button:hover,.plist li button:focus-visible{background:var(--bg);color:var(--accent)}
@media (hover:hover){ .hintwrap:hover .plist{display:block} }
.hintwrap:focus-within .plist{display:block}
.copybar{margin-top:40px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.copybtn{background:var(--accent);color:var(--paper);border:none;border-radius:8px;padding:10px 18px;font:inherit;font-size:15px;cursor:pointer}
.copynote{font-size:13px;color:var(--muted)}
.copybox{width:100%;margin-top:12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;padding:10px;min-height:180px}
.copybox[hidden]{display:none}
.addline{background:none;border:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;padding:8px 0 0 16px}
.addline:hover{color:var(--accent)}
.hint{font-size:14px;color:var(--muted);margin:6px 0 0;padding-left:10px;border-left:2px solid var(--accent);min-height:0}
.hint:empty{display:none}
.lines{margin-top:6px}
.line{display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid var(--line);}
.line::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55;flex:none;margin-top:19px}
textarea{flex:1;border:none;background:transparent;color:var(--ink);font:inherit;resize:none;padding:10px 0;min-height:44px;overflow:hidden;line-height:1.6}
textarea::placeholder{color:var(--muted);opacity:.7}
textarea:focus{outline:none}
.line:focus-within{border-bottom-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.line:focus-within::before{opacity:1}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea:focus,textarea:focus-visible{outline:none;box-shadow:none}
.history{margin-top:56px;}
.history h2{font-size:16px;color:var(--muted);font-weight:400;font-family:var(--sans)}
.days{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.days button{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:4px 10px;font:inherit;font-size:13px;cursor:pointer}
.days button.full{border-color:var(--accent)}
.days .none{font-size:14px;color:var(--muted)}
@media (prefers-reduced-motion: no-preference){ .part{animation:fade .25s ease} @keyframes fade{from{opacity:0}to{opacity:1}} }


/* 登录页 */
.login{max-width:320px;margin:18vh auto 0;padding:0 20px}
.login h1{font-family:var(--serif);font-size:24px;margin:0 0 24px}
.login label{display:block;font-size:14px;color:var(--muted);margin:0 0 6px}
.login input{width:100%;font:inherit;font-size:16px;padding:10px 12px;margin:0 0 16px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.login input:focus{outline:2px solid var(--accent);outline-offset:1px}
.login button{width:100%;background:var(--accent);color:var(--paper);border:none;
  border-radius:8px;padding:11px 0;font:inherit;font-size:16px;cursor:pointer}
.login .err{font-size:14px;color:#C0392B;min-height:1.4em;margin:0 0 12px}

/* 未登录时先藏起来，避免闪一下再跳走 */
body[data-ready="no"] .wrap{visibility:hidden}

/* 备案页脚 */
.beian{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);line-height:2;text-align:center}
.beian a{color:inherit;text-decoration:none}
.beian img{vertical-align:-2px;margin-right:4px}