/* 版面：電腦＝標題列／左絵巻時間線＋右任務欄；手機＝標題列／分頁（任務・時間線）＋右下新增鈕。
   色：白晝＝和紙＋墨；夜行＝墨底＋月光字。強調色＝墨（反轉）。朱只給印章與逾期。字：標題毛筆楷、內文黑體、數字等寬。 */
.app{
  --paper:#EEE9DC; --surface:#F6F2E8; --raise:#FBF8F1; --ink:#1E1D1B; --ink2:#4A4640; --ink3:#857E72; --rule:#D8CFBB; --hi:#E5DCC7;
  --ai:#2A2622; --on-ai:#F6F2E8; --shu:#C23B22; --kin:#9A7424; --hdr-bg:#F2EDE1;
  --silk:#B9A77A; --ichi:#C9A24A;
  --t0:#1F3A5F; --t1:#3E6B5A; --t2:#94721F; --t3:#6B5B3A; --t4:#6A4C7A; --t5:#5E5A55; --t6:#8E3B46; --t7:#4E7A49;
  --sg:var(--sg-day); --hp:var(--hp-day); --tex:var(--washi);
  --scrim:rgba(30,29,27,.38); --shadow:0 18px 50px rgba(30,29,27,.22);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ .app:not(.force-day){
  --paper:#13161C; --surface:#1A1E26; --raise:#20252E; --ink:#ECE5CF; --ink2:#C0B9A4; --ink3:#837F74; --rule:#2B313C; --hi:#262C37;
  --ai:#D8D0BA; --on-ai:#13161C; --shu:#E5583F; --kin:#D6B24E; --hdr-bg:#171B23;
  --silk:#28324A; --ichi:#B89A4E;
  --t0:#7C9DD0; --t1:#74AC93; --t2:#D6B24E; --t3:#C4AA78; --t4:#A98BB8; --t5:#9C968C; --t6:#C77B86; --t7:#8FBF8A;
  --sg:var(--sg-night); --hp:var(--hp-night); --tex:none;
  --scrim:rgba(0,0,0,.55); --shadow:0 18px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}}
:root[data-theme="light"] .app:not(.force-night){
  --paper:#EEE9DC; --surface:#F6F2E8; --raise:#FBF8F1; --ink:#1E1D1B; --ink2:#4A4640; --ink3:#857E72; --rule:#D8CFBB; --hi:#E5DCC7;
  --ai:#2A2622; --on-ai:#F6F2E8; --shu:#C23B22; --kin:#9A7424; --hdr-bg:#F2EDE1;
  --silk:#B9A77A; --ichi:#C9A24A;
  --t0:#1F3A5F; --t1:#3E6B5A; --t2:#94721F; --t3:#6B5B3A; --t4:#6A4C7A; --t5:#5E5A55; --t6:#8E3B46; --t7:#4E7A49;
  --sg:var(--sg-day); --hp:var(--hp-day); --tex:var(--washi);
  --scrim:rgba(30,29,27,.38); --shadow:0 18px 50px rgba(30,29,27,.22);
  color-scheme:light;
}
:root[data-theme="dark"] .app:not(.force-day), .app.force-night{
  --paper:#13161C; --surface:#1A1E26; --raise:#20252E; --ink:#ECE5CF; --ink2:#C0B9A4; --ink3:#837F74; --rule:#2B313C; --hi:#262C37;
  --ai:#D8D0BA; --on-ai:#13161C; --shu:#E5583F; --kin:#D6B24E; --hdr-bg:#171B23;
  --silk:#28324A; --ichi:#B89A4E;
  --t0:#7C9DD0; --t1:#74AC93; --t2:#D6B24E; --t3:#C4AA78; --t4:#A98BB8; --t5:#9C968C; --t6:#C77B86; --t7:#8FBF8A;
  --sg:var(--sg-night); --hp:var(--hp-night); --tex:none;
  --scrim:rgba(0,0,0,.55); --shadow:0 18px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}
.app.force-day{
  --paper:#EEE9DC; --surface:#F6F2E8; --raise:#FBF8F1; --ink:#1E1D1B; --ink2:#4A4640; --ink3:#857E72; --rule:#D8CFBB; --hi:#E5DCC7;
  --ai:#2A2622; --on-ai:#F6F2E8; --shu:#C23B22; --kin:#9A7424; --hdr-bg:#F2EDE1;
  --silk:#B9A77A; --ichi:#C9A24A;
  --t0:#1F3A5F; --t1:#3E6B5A; --t2:#94721F; --t3:#6B5B3A; --t4:#6A4C7A; --t5:#5E5A55; --t6:#8E3B46; --t7:#4E7A49;
  --sg:var(--sg-day); --hp:var(--hp-day); --tex:var(--washi);
  --scrim:rgba(30,29,27,.38); --shadow:0 18px 50px rgba(30,29,27,.22);
  color-scheme:light;
}
:root{
  --f-body:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Microsoft JhengHei",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-brush:"LXGW WenKai TC","Kaiti TC","BiauKai","DFKai-SB","Noto Serif TC",serif;
  --f-seal:"Yuji Syuku","LXGW WenKai TC","Noto Serif TC",serif;
}
html,body{height:100%}
body{background:#EEE9DC;font-family:var(--f-body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
.app :focus-visible{outline:2px solid var(--ink2);outline-offset:2px;border-radius:3px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.brush{font-family:var(--f-brush);font-weight:700;filter:url(#ink)}

.app{position:fixed;inset:0;display:flex;flex-direction:column;background-color:var(--paper);background-image:var(--sg);background-size:40px 20px;color:var(--ink);
  padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){body{background:#13161C}}
:root[data-theme="dark"] body{background:#13161C}
:root[data-theme="light"] body{background:#EEE9DC}

/* header */
.hdr{position:relative;flex:0 0 auto;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;isolation:isolate;border-bottom:1px solid var(--rule);
  padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));padding-block:20px 12px}
.hdr::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hdr-bg)}
.hdr::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--hp);background-size:80px 40px;background-position:right top;
  -webkit-mask-image:linear-gradient(90deg,transparent 16%,#000 62%);mask-image:linear-gradient(90deg,transparent 16%,#000 62%)}
.rakkan{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:32px;height:32px;margin-bottom:4px;transform:rotate(-3deg);
  background:var(--shu);color:#F7F1E3;border-radius:2px;box-shadow:inset 0 0 0 2px var(--shu),inset 0 0 0 3px rgba(247,241,227,.55);filter:url(#stamp)}
.rakkan b{font-family:var(--f-seal);font-weight:400;font-size:21px;line-height:1}
.wsbtn{display:inline-flex;align-items:baseline;gap:6px;border-radius:6px}
.wsbtn .brush{font-size:30px;line-height:1;letter-spacing:.12em}
.wsbtn small{font-size:11px;color:var(--ink3)}
.hsp{flex:1}
.hdate{font-family:var(--f-num);font-size:12px;color:var(--ink2);margin-bottom:6px;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:7px;overflow:hidden;background:color-mix(in srgb,var(--surface) 88%,transparent)}
.seg button{padding:4px 11px;font-size:12px;color:var(--ink3);line-height:1.6}
.seg button[aria-pressed="true"]{background:var(--ai);color:var(--on-ai);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:7px;font-size:12.5px;background:var(--hi);color:var(--ink);white-space:nowrap}
.btn.pri{background:var(--ai);color:var(--on-ai);font-weight:500}
.btn.ghost{background:transparent;color:var(--ink2)}
.btn.danger{background:transparent;color:var(--shu)}
.btn:disabled{opacity:.45;cursor:default}
.hdr .btn,.hdr .seg{margin-bottom:3px}
.banner{flex:0 0 auto;font-size:12.5px;padding:7px max(18px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--shu) 14%,var(--surface));color:var(--shu)}

/* main */
.main{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 352px}
.tlpane{min-width:0;min-height:0;display:flex;flex-direction:column}
.taskpane{min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 90%,transparent)}
.bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 20px 0}
.bar .lbl{font-size:11px;letter-spacing:.2em;color:var(--ink3);font-weight:700;margin-right:4px}
.bar .sp{flex:1}
.linkbtn{font-size:12px;color:var(--ink3);border-bottom:1px dashed transparent}
.linkbtn:hover{color:var(--ink);border-bottom-color:var(--ink3)}
.linkbtn[aria-pressed="true"]{color:var(--ink)}

.emaki{flex:1 1 auto;min-height:0;margin:14px 20px 20px;display:flex;flex-direction:column;min-width:0}
.ten,.chi{flex:0 0 auto;background:var(--silk)}
.ten{height:16px}.chi{height:8px}
.ichi{flex:0 0 auto;height:1px;background:var(--ichi)}
.paper{flex:1 1 auto;min-height:0;overflow:auto;background-color:var(--paper);background-image:var(--tex);background-size:220px 220px}
.tl{position:relative}
.tlhd{position:sticky;top:0;z-index:6;display:flex;border-bottom:1px solid var(--rule);background:var(--paper)}
.tlcorner{position:sticky;left:0;z-index:7;flex:0 0 var(--lw);width:var(--lw);background:var(--paper);border-right:1px solid var(--rule);
  font-size:11px;letter-spacing:.2em;color:var(--ink3);display:flex;align-items:center;padding:0 14px}
.tlmonths{position:relative;height:36px;flex:0 0 auto}
.mc{position:absolute;top:0;bottom:0;border-left:1px solid var(--rule);display:flex;align-items:center;padding-left:8px;white-space:nowrap;overflow:hidden;
  font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:.12em}
.mc .yr{font-family:var(--f-num);font-size:10px;font-weight:400;letter-spacing:0;color:var(--ink3);margin-right:6px}
.tlrow{display:flex;border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.tlws{position:sticky;left:0;z-index:5;padding:10px 14px 4px;font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--ink3);background:var(--paper)}
.tllab{position:sticky;left:0;z-index:5;flex:0 0 var(--lw);width:var(--lw);background:var(--paper);border-right:1px solid var(--rule);
  padding:10px 12px 10px 14px;display:flex;flex-direction:column;gap:5px;justify-content:center;text-align:left}
.tllab:hover .tlname{text-decoration:underline;text-decoration-color:var(--ink3)}
.tlname{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;font-weight:500;line-height:1.35}
.dia{flex:0 0 auto;width:7px;height:7px;margin-top:5px;background:var(--c,var(--t5));transform:rotate(45deg)}
.tlmeta{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--ink3);padding-left:14px;flex-wrap:wrap}
.pbar{width:50px;height:4px;border-radius:2px;background:var(--rule);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--c,var(--t5))}
.tltrack{position:relative;flex:0 0 auto}
.ms{position:absolute;height:5px;border-radius:3px;background:var(--c);cursor:pointer}
.ms.done{opacity:.4}
.ms.pt{width:9px!important;height:9px;border-radius:1px;transform:rotate(45deg);box-shadow:0 0 0 2px var(--paper)}
.msl{position:absolute;display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.2;white-space:nowrap;color:var(--ink2);cursor:pointer;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.msl:hover{color:var(--ink)}
.msl.done{color:var(--ink3)}
.msl.late{color:var(--shu)}
.msl.late::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--shu)}
.mseal{flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:var(--shu);color:#fff;font-family:var(--f-seal);font-size:9px;display:flex;align-items:center;justify-content:center;line-height:1}
.today{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--shu);z-index:4;pointer-events:none}
.today b{position:absolute;top:40px;left:4px;font-family:var(--f-num);font-size:10px;font-weight:500;color:var(--shu);white-space:nowrap}
.tlrow.silent .tlname,.tlrow.silent .pbar,.tlrow.silent .tlmeta .num,.tlrow.silent .tltrack{filter:grayscale(1);opacity:.45}
.tlrow.closed{opacity:.5}
.slip{font-family:var(--f-brush);font-weight:700;font-size:11.5px;letter-spacing:.14em;padding:1px 7px;border:1px solid var(--shu);color:var(--shu);background:var(--paper);transform:rotate(-3deg);white-space:nowrap}
.donetag{font-size:10.5px;letter-spacing:.1em;color:var(--ink3);border:1px solid var(--ink3);padding:0 6px;border-radius:3px}

/* task pane */
.qa{flex:0 0 auto;padding:14px 16px 6px}
.qa input{width:100%;padding:9px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--raise);font-size:13px}
.qa input::placeholder{color:var(--ink3)}
.qa p{margin:5px 2px 0;font-size:10.5px;color:var(--ink3)}
.tags{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:6px 16px 8px;scrollbar-width:none}
.tags::-webkit-scrollbar{display:none}
.tchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11.5px;color:var(--ink2);background:var(--hi);white-space:nowrap}
.tchip i{width:6px;height:6px;transform:rotate(45deg);background:var(--c)}
.tchip[aria-pressed="true"]{background:var(--ai);color:var(--on-ai)}
.list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 0 90px}
.grp{display:flex;align-items:center;gap:7px;padding:14px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink3)}
.grp.hot{color:var(--shu)}
.grp.today-g{color:var(--ink)}
.grp .n{font-family:var(--f-num);font-weight:500;letter-spacing:0}
.it{display:flex;gap:10px;padding:8px 12px 8px 16px;align-items:flex-start;cursor:pointer}
.it:hover{background:color-mix(in srgb,var(--hi) 55%,transparent)}
.ck{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink3);margin-top:1px;display:flex;align-items:center;justify-content:center}
.ck:hover{border-color:var(--ink)}
.itb{flex:1;min-width:0}
.itt{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.it.done .itt{color:var(--ink3);text-decoration:line-through;text-decoration-color:var(--ink3)}
.itm{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:3px;font-size:11px;color:var(--ink3)}
.pc{display:inline-flex;align-items:center;gap:5px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc i{width:6px;height:6px;background:var(--c,var(--t5));transform:rotate(45deg);flex:0 0 auto}
.dt{font-family:var(--f-num)}
.dt.late{color:var(--shu);font-weight:600}
.dt.late::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--shu);margin-right:5px;vertical-align:1px}
.wait{color:var(--ink2)}
.wait.stale{color:var(--kin);font-weight:500}
.contact{font-size:10.5px;color:var(--ink3);border-bottom:1px dashed var(--ink3)}
.contact:hover{color:var(--ink)}
.pin{flex:0 0 auto;width:26px;height:26px;border-radius:6px;font-family:var(--f-brush);font-weight:700;font-size:13px;color:var(--ink3);display:flex;align-items:center;justify-content:center;opacity:.55}
.it:hover .pin,.pin[aria-pressed="true"]{opacity:1}
.pin[aria-pressed="true"]{background:var(--ai);color:var(--on-ai)}
.day-n{font-size:10.5px;color:var(--kin)}
.more{padding:4px 16px 0 44px;font-size:11px;color:var(--ink3)}
.empty{padding:40px 22px;text-align:center;color:var(--ink3);font-size:12.5px;line-height:1.8}
.empty b{display:block;color:var(--ink2);font-size:13.5px;margin-bottom:4px}

/* seals */
.seal{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border:2.5px solid var(--shu);border-radius:7px;color:var(--shu);
  transform:rotate(-9deg);font-family:var(--f-seal);line-height:1;filter:url(#stamp);flex:0 0 auto}
.seal b{font-weight:400}
.seal i{font-style:normal;font-family:var(--f-num);letter-spacing:.02em}
.seal-sm{width:24px;height:24px;border-width:1.8px;border-radius:5px;margin-top:-2px}
.seal-sm b{font-size:11px}.seal-sm i{font-size:5.5px;margin-top:1px}
.seal-lg{width:60px;height:60px}.seal-lg b{font-size:28px}.seal-lg i{font-size:9px;margin-top:3px}
.seal-xs{width:18px;height:18px;border-width:1.5px;border-radius:4px;transform:rotate(-6deg)}.seal-xs b{font-size:11px}
.stamping{animation:stamp .42s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stamp{0%{transform:scale(2.2) rotate(-2deg);opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(-9deg);opacity:1}}

/* mobile parts */
.mtabs{display:none;flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--rule)}
.mtabs button{flex:1;padding:9px 0;font-size:13px;letter-spacing:.14em;color:var(--ink3);border-bottom:2px solid transparent}
.mtabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--shu)}
.strip{display:none;flex:0 0 auto;gap:8px;overflow-x:auto;padding:12px 16px;scroll-padding-inline:16px;scroll-snap-type:x mandatory;scrollbar-width:none;border-bottom:1px solid var(--rule)}
.strip::-webkit-scrollbar{display:none}
.pcard{flex:0 0 156px;scroll-snap-align:start;border-radius:9px;padding:10px;background:var(--surface);display:flex;flex-direction:column;gap:5px;text-align:left}
.pcard h5{margin:0;font-size:12px;font-weight:500;line-height:1.3;display:flex;gap:6px}
.pcard .pct{font-family:var(--f-num);font-size:18px;font-weight:600;line-height:1;color:var(--c)}
.pcard p{margin:0;font-size:10.5px;color:var(--ink3);line-height:1.4}
.pcard.silent{opacity:.6}
.fab{display:none;position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;
  width:52px;height:52px;border-radius:50%;background:var(--ai);color:var(--on-ai);font-size:26px;line-height:1;box-shadow:var(--shadow)}
.mmode{display:none}

/* sheets */
.scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sheet{width:min(440px,100%);max-height:100%;overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);font-family:var(--f-body)}
.shd{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--surface);z-index:2}
.shd h3{margin:0;flex:1;font-size:14.5px;font-weight:700;letter-spacing:.06em}
.shd .brush{flex:1;font-size:22px;letter-spacing:.2em}
.sbd{padding:14px 16px}
.sft{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--rule);position:sticky;bottom:0;background:var(--surface)}
.sft .sp{flex:1}
.fld{margin-bottom:14px}
.fld>label,.fl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--ink3);margin-bottom:6px}
.fld input[type=text],.fld input[type=date],.fld select,.fld textarea,.inp{width:100%;padding:8px 10px;border:1px solid var(--rule);border-radius:7px;background:var(--raise);font-size:13px}
.fld textarea{min-height:64px;resize:vertical;line-height:1.6}
.r2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.r2>*{min-width:0}
.app input,.app select,.app textarea{min-width:0;max-width:100%}
.sheet{overflow-x:hidden}
.hint{font-size:11.5px;color:var(--ink3);line-height:1.6;margin:-4px 0 12px}
.q{font-size:11px;letter-spacing:.08em;color:var(--ink3);margin:0 0 7px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.chip{padding:6px 10px;border-radius:7px;font-size:12.5px;color:var(--ink2);background:transparent}
.chip[aria-pressed="true"]{background:var(--hi);color:var(--ink);font-weight:500}
.chip .num{font-size:11px;color:var(--ink3);margin-left:4px}
.chip input[type=date]{border:none;background:transparent;font-size:12px;color:var(--ink2);padding:0;margin-left:4px;width:auto}
.nextcard{border-left:3px solid var(--c,var(--t5));padding:4px 12px;margin-bottom:12px}
.nextcard b{display:block;font-size:13.5px;font-weight:500}
.nextcard span{font-family:var(--f-num);font-size:11px;color:var(--ink3)}
.nextcard .r2{margin-top:8px}
.nextcard input{padding:5px 8px;border:1px solid var(--rule);border-radius:6px;background:var(--raise);font-size:12px;width:100%}
.acts{display:flex;flex-direction:column;gap:6px}
.act{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:7px;font-size:13px;background:var(--hi);text-align:left;width:100%}
.act.pri{background:var(--ai);color:var(--on-ai);font-weight:500}
.act small{margin-left:auto;font-size:10.5px;opacity:.7;font-weight:400}
.noroad{padding:6px 0 10px}
.noroad .brush{display:block;font-size:30px;letter-spacing:.24em;line-height:1.1}
.noroad svg{display:block;width:100%;height:30px;margin-top:6px}
.noroad p{margin:10px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.6}
.subs{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.sub{display:flex;align-items:center;gap:8px}
.sub{align-items:flex-start}
.sub .sck{margin-top:8px}
.subt{flex:1;min-width:0;padding:6px 8px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:13px;line-height:1.5;resize:none;overflow:hidden}
.subt:focus{border-color:var(--rule);background:var(--raise)}
.sub.done .subt{color:var(--ink3);text-decoration:line-through}
.fld textarea.ta1,.fld textarea.subt{min-height:0;resize:none;overflow:hidden;line-height:1.5}
.sub .x{color:var(--ink3);font-size:14px;width:24px;height:24px}
.sck{flex:0 0 auto;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--ink3);display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.sck[aria-pressed="true"]{background:var(--ink2);border-color:var(--ink2);color:var(--surface)}
.tagbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px;border:1px solid var(--rule);border-radius:7px;background:var(--raise)}
.tagbox input{flex:1;min-width:90px;border:none;background:transparent;padding:4px;font-size:13px}
.tg{display:inline-flex;align-items:center;gap:5px;padding:3px 6px 3px 9px;border-radius:20px;background:var(--hi);font-size:12px}
.tg i{width:6px;height:6px;transform:rotate(45deg);background:var(--c)}
.tg button{font-size:12px;color:var(--ink3);padding:0 3px}
.tg.main{box-shadow:inset 0 0 0 1px var(--ink3)}
.sugg{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.sugg button{font-size:11.5px;color:var(--ink3);padding:2px 8px;border-radius:20px;background:transparent;border:1px dashed var(--rule)}
.sugg button:hover{color:var(--ink);border-color:var(--ink3)}
.row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0}
.row .cnt{font-family:var(--f-num);font-size:11px;color:var(--ink3)}
.seg-in{display:inline-flex;border:1px solid var(--rule);border-radius:7px;overflow:hidden}
.seg-in button{padding:5px 12px;font-size:12px;color:var(--ink3)}
.seg-in button[aria-pressed="true"]{background:var(--ai);color:var(--on-ai)}
.info{font-size:11.5px;color:var(--ink3)}

@media (max-width:899px){
  .main{grid-template-columns:1fr}
  .taskpane{border-left:none}
  .tlpane[hidden],.taskpane[hidden]{display:none}
  .mtabs{display:flex}
  .strip{display:flex}
  .fab{display:block}
  .qa{display:none}
  .hdr{padding-block:16px 10px;gap:10px}
  .hdr .wsbtn .brush{font-size:24px}
  .rakkan{width:27px;height:27px;margin-bottom:2px}.rakkan b{font-size:18px}
  .hdr .hdate,.hdr .dmode,.hdr .addbtn{display:none}
  .mmode{display:inline-flex}
  .emaki{margin:12px 12px 14px}
  .bar{padding:10px 12px 0}
}
@media (max-width:899px),(pointer:coarse){
  .app input,.app select,.app textarea{font-size:16px!important}
  .chip input[type=date]{font-size:16px!important}
}
@media (max-width:359px){ .r2{grid-template-columns:minmax(0,1fr)} }

@media (prefers-reduced-motion:reduce){.stamping{animation:none}}

/* ---------- 頁面基底（獨立網站用） ---------- */
html,body{margin:0;height:100%;background:#EEE9DC}
:root[data-theme="dark"] body{background:#13161C}
[hidden]{display:none!important}

/* ---------- 通行碼 ---------- */
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
  background:#1A1917;font-family:"Noto Sans TC",system-ui,sans-serif}
.gate-card{width:min(340px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:#ECE5CF}
.gate-seal{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:3px;background:#C23B22;color:#F7F1E3;
  font-family:"Yuji Syuku","LXGW WenKai TC",serif;font-size:36px;line-height:1;transform:rotate(-3deg);box-shadow:inset 0 0 0 3px #C23B22,inset 0 0 0 5px rgba(247,241,227,.55)}
.gate-title{margin:4px 0 0;font-family:"LXGW WenKai TC",serif;font-weight:700;font-size:26px;letter-spacing:.12em}
.gate-msg{margin:0;font-size:14px;line-height:1.7;color:#C0B9A4}
.gate-in{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:8px;border:1px solid #3A3F4A;background:#20252E;color:#ECE5CF;font-size:16px;text-align:center;letter-spacing:.2em}
.gate-in:focus{outline:2px solid #C0B9A4;outline-offset:2px}
.gate-btn{width:100%;padding:12px;border:0;border-radius:8px;background:#D8D0BA;color:#13161C;font-size:16px;font-weight:700;letter-spacing:.3em;cursor:pointer}