/* 基本樣式：顏色變數、版面、表單、表格、卡片、對話框 */
/* ★ 字體設定：想換字體改下面這一行就好（記得在 index.html 的 Google Fonts 連結也加上新字體）
   --f-title：分頁標題、索引標籤、便利貼標題、卡片標題
   --f-num：大數字、金額
   --f-logo：左上角網站大標題、登入畫面標題、登出按鈕
   Huninn（粉圓體）和 Yusei Magic 都只有一種粗細，所以用到它的地方都設成正常粗細，避免瀏覽器硬加粗變糊 */
:root{--f-title:"Huninn","Noto Sans TC",sans-serif;--f-num:"Huninn","Noto Sans TC",sans-serif;--f-logo:"Yusei Magic","Huninn","Noto Sans TC",sans-serif}
:root{--bg:#ecd777;--pp:#fffbe3;--ink:#3a3316;--mut:#857b49;--cov:#f1dc73;--ln:#e6d99a;--r:#b3342f;--g:#2f7d4f;--btn:#6f5d14;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1c190b;--pp:#262210;--ink:#f3ebc2;--mut:#b5aa72;--cov:#4d4212;--ln:#4a4220;--r:#e8736d;--g:#6cc08a;--btn:#a8901f}}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(#0000001f 1px,transparent 1.6px) 0 0/22px 22px,var(--bg);color:var(--ink);font:15px/1.6 "Noto Sans TC",sans-serif}
header{position:relative;padding:22px 70px 0 24px}
header h1{display:inline-block;position:relative;margin:0;font:400 24px var(--f-logo);letter-spacing:.1em;background:var(--pp);padding:6px 20px;transform:rotate(-2deg);box-shadow:3px 4px 0 #0002;cursor:pointer}
header h1::before{content:"";position:absolute;left:50%;top:-11px;width:76px;height:18px;margin-left:-38px;background:#f4a7b2aa;transform:rotate(4deg)}
header small{margin-left:16px;opacity:.7;font-size:12px}
.cv{position:absolute;right:70px;top:26px;display:flex;gap:6px;align-items:center;font-size:12px}
.cv input{width:26px;height:22px;border:0;padding:0;background:none}
#nav{position:fixed;right:0;top:78px;display:flex;flex-direction:column;gap:6px;z-index:5}
#nav button{writing-mode:vertical-rl;font:400 13px var(--f-title);letter-spacing:.2em;padding:12px 8px;border:1px solid #0003;border-right:0;border-radius:10px 0 0 10px;color:#3a3316;cursor:pointer;box-shadow:-2px 2px 0 #0002;transition:transform .15s}
#nav button.on{transform:translateX(-8px);padding-right:15px}
main{max-width:920px;margin:30px 66px 40px 14px}
@media(min-width:1040px){main{margin:30px auto 40px}}
main.sheet{position:relative;background:var(--pp);min-height:70vh;padding:26px 24px 30px;border-radius:3px;box-shadow:4px 6px 0 #0002}
main.sheet::before{content:"";position:absolute;top:-12px;left:34px;width:110px;height:22px;background:#f4a7b2aa;transform:rotate(-3deg)}
main.sheet input,main.sheet select,main.sheet textarea{background:var(--pp)}
.table{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:30px 22px;padding:20px 0 70px}
.note{position:relative;width:236px;min-height:150px;padding:18px 16px 14px;background:var(--c);color:#3a3316;box-shadow:3px 5px 0 #0002;transform:translate(var(--tx),var(--ty)) rotate(var(--rot));cursor:pointer;transition:transform .15s}
.note:hover{transform:translate(var(--tx),calc(var(--ty) - 6px)) scale(1.04);z-index:2}
.note::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:20px;margin-left:-37px;background:#fff8c0b3;border:1px solid #0001;transform:rotate(calc(var(--rot)*-2))}
.note h3{margin:0 0 6px;font:400 18px var(--f-title)}
.note big{display:block;font:400 24px var(--f-num);margin:4px 0}
.note .r{color:#b3342f}.note .g{color:#2f7d4f}
.note:nth-child(2n){border-radius:2px 20px 2px 20px}
.note:nth-child(3n){width:262px}
.note:nth-child(4n)::after{content:"📎";position:absolute;right:10px;top:-16px;font-size:26px;transform:rotate(15deg)}
.due{cursor:default}.due li{font-size:13px;gap:8px}
input,select,textarea,label{min-width:0;max-width:100%}input[type=date],input[type=datetime-local]{-webkit-appearance:none;appearance:none;min-height:34px}
@media(max-width:600px){html,body{overflow-x:hidden}input,select,textarea{font-size:16px}header{padding:20px 60px 0 16px}main{margin:26px 62px 30px 10px}main.sheet{padding:22px 14px 26px}#nav{top:66px}#nav button{font-size:12px;padding:9px 6px;letter-spacing:.05em}.note{width:100%!important}.pg{grid-template-columns:1fr 1fr;gap:12px}.frm{grid-template-columns:1fr}}
.pl{width:62px;height:62px;object-fit:cover;border:5px solid #fff;border-bottom-width:16px;box-shadow:1px 2px 0 #0003;margin:4px 6px 0 0;transform:rotate(-4deg)}
.wash{position:absolute;right:6%;bottom:18px;width:160px;height:26px;background:repeating-linear-gradient(45deg,#f4a7b2cc 0 8px,#fff9 8px 16px);transform:rotate(-6deg)}
.stk{position:absolute;left:5%;bottom:10px;padding:14px 12px;border-radius:50%;background:#fff;box-shadow:2px 3px 0 #0002;font-size:12px;line-height:1.4;text-align:center;color:#3a3316;transform:rotate(-8deg)}
h2{margin:0 0 14px;font-size:19px}
.frm{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;align-items:end;margin-bottom:12px}
label{display:flex;flex-direction:column;font-size:12px;color:var(--mut);gap:2px}
input,select,textarea{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--ln);border-radius:4px;background:var(--bg);color:var(--ink);width:100%}
button.a,.frm button,.tb button{font:inherit;font-size:13px;padding:7px 12px;border:1px solid var(--btn);background:var(--btn);color:#fff8d6;border-radius:4px;cursor:pointer}
.tb{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.tb button.o{background:none;color:var(--ink);border-color:var(--ln)}
.tb button.x{background:var(--r);border-color:var(--r)}
.w{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;color:var(--mut);font-weight:500;border-bottom:2px solid var(--ink);padding:6px}
td{padding:7px 6px;border-bottom:1px solid var(--ln);vertical-align:top}
.n{text-align:right;font-family:var(--f-num);white-space:nowrap}
th.n{text-align:right}
.r{color:var(--r)}.g{color:var(--g)}
.bar{display:inline-block;width:90px;height:8px;background:var(--ln);border-radius:4px;vertical-align:middle;overflow:hidden}
.bar u{display:block;height:100%;background:var(--g)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:18px}
.cd{border:1px solid var(--ln);padding:12px 14px;border-radius:4px}
.cd span{font-size:12px;color:var(--mut)}
.cd b{display:block;font:400 22px var(--f-num)}
ul{padding:0;list-style:none;margin:0}
li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--ln);padding:6px 0}
.hint{font-size:12px;color:var(--mut)}
.th{width:56px;height:56px;object-fit:cover;border-radius:4px;border:1px solid var(--ln)}
textarea{height:110px;font-family:"IBM Plex Mono",monospace;font-size:12px}
#nav{max-height:calc(100dvh - 90px);overflow-y:auto;scrollbar-width:none;padding-right:env(safe-area-inset-right,0px)}
#nav button{flex:none;white-space:nowrap}
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin:16px 0}
.pc{background:#fffdf3;color:#3a3316;padding:8px 8px 12px;box-shadow:2px 4px 0 #0002;font-size:12px;line-height:1.5;transform:rotate(var(--r,0deg))}
.pc:nth-child(3n+1){--r:-1.2deg}.pc:nth-child(3n+2){--r:1deg}
.ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ch input{width:auto}
.ph{aspect-ratio:1;background:#f1ecd0;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.ph img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.ph i{font-size:12px;color:#8a8160;font-style:normal}
.pc h4{margin:0 0 4px;font:400 15px var(--f-title)}
.pc span{color:#8a8160}.pc a{color:#6f5d14}.pc .r{color:#b3342f}.pc .g{color:#2f7d4f}
.pl{cursor:zoom-in}
#dlg,#lb{position:fixed;inset:0;z-index:30;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px}
#dlg[hidden],#lb[hidden]{display:none}
#dbox{background:var(--pp);color:var(--ink);width:min(520px,100%);max-height:90dvh;overflow:auto;padding:20px;border-radius:6px;box-shadow:4px 6px 0 #0004}
#dbox h3{margin:0 0 12px}#dbox input,#dbox select{background:var(--pp)}
#lb img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-out}
.chk{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--ink)}.chk input{width:auto}