/* 正式版：全屏布局（手机全屏；电脑上居中一列） */
:root{
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --mono:"SF Mono","JetBrains Mono",Consolas,"Microsoft YaHei",monospace;
}
html,body{height:100%;overscroll-behavior:none}
body{background:var(--stage)}
.screen{position:fixed;inset:0;margin:0 auto;max-width:640px;overflow:hidden;background:var(--scr);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
@media (min-width:700px){
  body{background:radial-gradient(120% 80% at 50% 0%,#FFE8A8,var(--stage) 60%)}
  .screen{box-shadow:0 0 0 1px var(--line),0 30px 80px -30px rgba(90,60,10,.35)}
}
.top{padding:14px 20px 10px}
.topbtns{display:flex;gap:8px;align-items:center}
.gear{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);background:rgba(255,255,255,.55);border:1px solid var(--line)}
.gear svg{width:20px;height:20px}
.moon svg{width:20px;height:20px}
.screen.dark .gear{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:#C3C8EA}
.moon.dot::after{display:block}
.moon:not(.dot)::after{display:none}
.tabs{height:calc(64px + env(safe-area-inset-bottom));padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.fab{bottom:calc(80px + env(safe-area-inset-bottom));box-shadow:0 12px 24px -8px rgba(160,100,10,.55)}
main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.toast{bottom:calc(150px + env(safe-area-inset-bottom));max-width:86%;white-space:normal;text-align:center}
.bs{max-height:90%}
.bs .in{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.more-wrap{text-align:center;margin-top:14px}
.muted{color:var(--ink3)}
.item .card{cursor:pointer}
.item .card:active{transform:scale(.995)}
.item.err .card{border-color:#F2B8B2}
.errline{margin-top:8px;font-size:12px;color:var(--red);display:flex;gap:8px;align-items:center;justify-content:space-between}
.warn .acts2{display:flex;gap:6px;margin-top:8px}
.warn .acts2 button{font-size:12px;padding:4px 10px;border-radius:8px;background:#fff;border:1px solid #F2B8B2;color:var(--red)}
.okline{margin-top:8px;font-size:12px;color:var(--teal)}
.thumbrow{margin-top:8px;border-radius:12px;overflow:hidden;max-height:160px;background:var(--mist)}
.thumbrow img{width:100%;display:block;object-fit:cover;max-height:160px}
.tile img{width:100%;display:block}
.tile{cursor:pointer}
.empty2{text-align:center;padding:36px 16px;color:var(--ink3);font-size:13px;line-height:1.8}
.empty2 b{display:block;font-family:var(--serif);font-size:17px;color:var(--ink);margin-bottom:6px}
.kindpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kindpick button{font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--paper)}
.kindpick button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.bodytext{margin-top:12px;font-size:13px;white-space:pre-wrap;background:var(--mist);border-radius:12px;padding:10px 12px;max-height:260px;overflow:auto;color:var(--ink2)}
.danger{color:var(--red)!important}
.field{display:block;margin-top:10px}
.field span{display:block;font-size:12px;color:var(--ink3);margin-bottom:4px}
.field input{width:100%;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--paper);outline:0}
/* capture */
.cap label{background:var(--mist);border-radius:16px;padding:14px;text-align:left;cursor:pointer;display:block}
.cap label svg{width:24px;height:24px;color:var(--ink)}
.cap label b{display:block;margin-top:8px;font-size:14px}
.cap label span{font-size:12px;color:var(--ink3)}
.picked{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.picked span{font-size:12px;background:var(--acc-s);color:var(--ink);padding:3px 9px;border-radius:8px}
.drop{position:absolute;inset:0;z-index:60;background:rgba(255,236,180,.92);display:none;align-items:center;justify-content:center;border:3px dashed var(--acc);border-radius:24px;margin:10px}
.drop.on{display:flex}
.drop div{text-align:center;color:var(--ink)}
.drop svg{width:44px;height:44px;color:var(--acc)}
.drop b{display:block;font-family:var(--serif);font-size:22px;margin-top:8px}
.drop span{font-size:13px;color:var(--ink2)}
/* night */
.daysel{display:flex;gap:6px;overflow-x:auto;margin:0 -16px 6px;padding:0 16px 6px;scrollbar-width:none}
.daysel::-webkit-scrollbar{display:none}
.daysel button{flex:none;font-size:12px;padding:4px 10px;border-radius:999px;color:#AEB5DA;border:1px solid rgba(255,255,255,.14)}
.daysel button.on{background:rgba(243,201,105,.18);color:var(--star);border-color:rgba(243,201,105,.4)}
.btn.star{background:var(--star);color:var(--night);font-weight:700}
.chart text{font-family:var(--sans)}
/* settings */
.set{margin-top:12px}
.set h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.set p{font-size:12.5px;color:var(--ink2);margin-top:4px}
.set .row2{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.set code{font-family:var(--mono);font-size:12px;background:var(--mist);padding:6px 8px;border-radius:8px;display:block;word-break:break-all;margin-top:8px;user-select:all}
.stt{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.stt.on{background:var(--teal-s);color:var(--teal)}.stt.off{background:var(--red-s);color:var(--red)}
.qr{margin-top:10px;text-align:center}
.qr img{width:180px;height:180px;border-radius:12px;background:#fff;padding:8px}
.usage{width:100%;font-size:12px;margin-top:8px;border-collapse:collapse}
.usage td{padding:4px 0;border-bottom:1px dashed var(--line)}
.usage td:last-child{text-align:right;font-family:var(--mono)}
/* login */
.login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#FFE7A3 0%,#FFF5D6 45%,#FFF8E7 100%);padding:24px}
.login form{width:100%;max-width:340px;text-align:center}
.lmark{width:84px;height:84px;margin:0 auto;border-radius:26px;background:url(/icon-192.png) center/cover;box-shadow:0 18px 40px -16px rgba(200,120,0,.6)}
.login h1{font-family:var(--serif);font-weight:900;font-size:30px;margin-top:18px;letter-spacing:.04em}
.login p{font-size:13px;color:var(--ink2);margin-top:6px}
.login input{width:100%;margin-top:26px;height:50px;border-radius:16px;border:1px solid var(--line);background:#fff;padding:0 16px;font-size:16px;outline:0;text-align:center}
.login input:focus{border-color:var(--acc)}
.login button{width:100%;margin-top:12px;height:50px;border-radius:16px;background:var(--acc);color:#fff;font-size:16px;font-weight:700}
.lerr{min-height:20px;margin-top:10px;color:var(--red);font-size:13px}
.lpriv{margin-top:18px;font-size:12px;color:var(--ink2);display:flex;gap:6px;justify-content:center;align-items:flex-start;text-align:left}
.lpriv svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--hl)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .8s linear infinite;vertical-align:-2px}
@keyframes rot{to{transform:rotate(360deg)}}
[hidden]{display:none!important}

.screen.set .fab{display:none}