:root{
  --bg:#f7f6f2;--card:#ffffff;--sheet:#ffffff;
  --line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.16);
  --tx:#1d1d1b;--tx2:#5f5e5a;--tx3:#9a998f;
  --acc:#2f6fd6;--acc-bg:#e6f1fb;--acc-tx:#185fa5;
  --plan:rgba(47,111,214,.055);--danger:#c0392b;
  --shadow:0 -8px 28px rgba(0,0,0,.14);
  --axw:40px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141413;--card:#1f1f1d;--sheet:#232321;
    --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.17);
    --tx:#f1efe8;--tx2:#b4b2a9;--tx3:#7c7b75;
    --acc:#5b93e6;--acc-bg:#0c2f55;--acc-tx:#b5d4f4;
    --plan:rgba(91,147,230,.07);--danger:#e57368;
    --shadow:0 -8px 28px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--tx);font-size:15px;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
button{font:inherit;color:inherit;cursor:pointer}
#app{height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);max-width:820px;margin:0 auto}

/* top */
.topbar{flex:none;padding:8px 12px 4px;display:flex;align-items:center;gap:6px;min-height:44px}
.topbar .title{font-size:20px;font-weight:600;flex:1}
.topbar.deep{flex-direction:column;align-items:stretch;gap:2px}
.crumbs{display:flex;align-items:center;gap:2px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;font-size:13px}
.crumbs::-webkit-scrollbar{display:none}
.crumbs button{border:none;background:none;padding:4px 2px;color:var(--acc)}
.crumbs .sep{color:var(--tx3);font-size:12px}
.crumbs .here{color:var(--tx2);padding:4px 2px}
.title2{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600}
.title2 i{font-size:22px}
.purpose-line{display:flex;gap:6px;align-items:flex-start;font-size:13px;color:var(--tx2);padding:2px 0 2px}
.purpose-line i{font-size:15px;margin-top:1px}
.icon-btn{border:none;background:none;width:40px;height:40px;border-radius:10px;font-size:22px;color:var(--tx2);display:flex;align-items:center;justify-content:center;flex:none}
.icon-btn:active{background:var(--line)}

/* banner */
.banner{margin:0 12px 6px;display:flex;gap:8px;align-items:flex-start;background:var(--acc-bg);color:var(--acc-tx);border-radius:12px;padding:8px 12px;font-size:13px;cursor:pointer}
.banner i{font-size:16px;margin-top:1px;flex:none}
.banner .txt{flex:1;min-width:0}
.banner.closed .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner b{font-weight:600}
.banner.empty{background:none;border:1px dashed var(--line2);color:var(--tx3)}

/* heads */
.heads{flex:none;display:flex;border-bottom:.5px solid var(--line2)}
.unit{width:var(--axw);flex:none;border:none;background:none;color:var(--acc);font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}
.unit i{font-size:15px}
.phead{display:flex;flex:none}
.phead.has{border-right:1.5px solid var(--line2)}
.hhead{flex:1;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.hhead::-webkit-scrollbar{display:none}
.hheadi{display:flex}
.head{flex:none;text-align:center;font-size:11px;color:var(--tx2);padding:4px 2px 0;overflow:hidden;position:relative}
.head>i{font-size:20px;display:block;line-height:24px}
.head .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:14px}
.head .pin{position:absolute;top:2px;right:3px;font-size:10px;color:var(--tx3)}
.head .fl{height:22px;display:flex;align-items:center;justify-content:center}
.head .fl i{font-size:14px}
.head.slot{color:var(--tx3)}
.head.slot .badge{position:absolute;top:2px;right:6px;font-size:10px;background:var(--acc);color:#fff;border-radius:8px;padding:0 5px;line-height:15px}
.head.lifted{opacity:.35}

/* body */
.body{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.row{display:flex;position:relative}
.axis{width:var(--axw);flex:none;position:relative}
.axis .lb{position:absolute;left:4px;font-size:11px;color:var(--tx3);transform:translateY(-7px)}
.axis .nowtag{position:absolute;left:2px;font-size:10px;background:var(--acc);color:#fff;border-radius:5px;padding:1px 4px;transform:translateY(-8px);font-weight:600}
.pcv{flex:none;position:relative}
.pcv.has{border-right:1.5px solid var(--line2)}
.hs{flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x pan-y}
.hs::-webkit-scrollbar{display:none}
.fcv{position:relative;min-width:100%}
.cv-plan{position:absolute;left:0;right:0;top:0;background:var(--plan);pointer-events:none}
.gl{position:absolute;left:0;right:0;border-top:.5px solid var(--line);pointer-events:none}
.gl.minor{border-top-style:dotted}
.col{position:absolute;top:0;bottom:0;border-left:.5px solid var(--line);pointer-events:none}
.nowline{position:absolute;left:0;right:0;border-top:2px solid var(--acc);pointer-events:none}
.bar{position:absolute;cursor:pointer}
.bar .seg{position:absolute;left:0;right:0;box-sizing:border-box}
.bar .lbl{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.bar .lbl span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:calc(100% - 10px)}
.bar .stack{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:12px;pointer-events:none}
.mhit{position:absolute;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ms{width:12px;height:12px;transform:rotate(45deg);border-radius:2px}
.empty-msg{position:absolute;left:var(--axw);right:0;top:30%;text-align:center;color:var(--tx2);padding:0 24px;font-size:14px}
.empty-msg .btn{margin-top:12px}

/* fab + menu */
.fab{position:fixed;right:max(16px,calc(50vw - 394px));bottom:calc(18px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;background:var(--acc);color:#fff;border:none;font-size:28px;z-index:20;box-shadow:0 4px 16px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;transition:transform .15s,bottom .28s cubic-bezier(.2,.8,.2,1)}
.fab.open{transform:rotate(45deg)}
.pmenu{position:fixed;right:max(16px,calc(50vw - 394px));bottom:calc(84px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;align-items:flex-end;z-index:21}
.prow{display:flex;align-items:center;gap:10px;border:none;background:none;padding:2px 0 2px 24px}
.prow .lab{background:var(--card);border:.5px solid var(--line2);border-radius:9px;padding:7px 12px;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.prow .ic{width:46px;height:46px;border-radius:50%;background:var(--card);border:.5px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--acc);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.prow:active .lab,.prow:active .ic{background:var(--bg)}
.scrim{position:fixed;inset:0;z-index:19}

/* sheet */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:29;opacity:0;pointer-events:none;transition:opacity .2s}
.backdrop.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:820px;margin:0 auto;background:var(--sheet);border-radius:18px 18px 0 0;box-shadow:var(--shadow);display:flex;flex-direction:column;z-index:30;transition:height .28s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}
.sheet.dragging{transition:none}
.sheet{touch-action:none}
.sheet.full{touch-action:auto}
.sheet:not(.full) .sheet-body{overflow:hidden}
.sheet input,.sheet textarea,.sheet select{touch-action:auto}
#ish,.sh-title{cursor:grab}
.grab-area{flex:none;padding:12px 0 10px;touch-action:none;cursor:grab}
.grab{width:38px;height:5px;border-radius:3px;background:var(--line2);margin:0 auto}
.sheet-body{flex:1;overflow-y:auto;padding:2px 16px 20px;-webkit-overflow-scrolling:touch}
.sheet-body input,.sheet-body textarea{-webkit-user-select:text;user-select:text}
.sh-title{font-size:18px;font-weight:600;margin:2px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx2)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.ttl{font-size:19px;font-weight:600;margin:3px 0 2px}
.sub{font-size:13px;color:var(--tx2)}
label,.lbl2{display:block;font-size:12px;color:var(--tx2);margin:14px 0 5px}
input[type=text],input[type=number],input:not([type]),textarea,select{
  width:100%;font:inherit;font-size:16px;color:var(--tx);background:var(--bg);border:.5px solid var(--line2);border-radius:10px;padding:9px 11px;outline:none;-webkit-appearance:none;appearance:none}
textarea{resize:vertical;min-height:44px}
input:focus,textarea:focus,select:focus{border-color:var(--acc)}
.two{display:flex;gap:10px}.two>div{flex:1;min-width:0}
.dt{display:flex;gap:6px}.dt input{flex:1.1}.dt select{flex:1}
.seg2{display:inline-flex;border:.5px solid var(--line2);border-radius:10px;overflow:hidden;margin-top:6px}
.seg2 button{border:none;background:none;padding:7px 14px;font-size:14px;color:var(--tx2)}
.seg2 button.on{background:var(--acc-bg);color:var(--acc-tx);font-weight:500}
.btn{border:.5px solid var(--line2);background:var(--card);border-radius:10px;padding:9px 14px;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.btn:active{background:var(--bg)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.dan{color:var(--danger)}
.btn.sm{padding:6px 10px;font-size:13px}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;align-items:center}
.btns .sp{flex:1}
.err{color:var(--danger);font-size:13px;margin-top:8px;min-height:0}
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.icons button{height:42px;border-radius:10px;border:.5px solid var(--line2);background:var(--card);font-size:20px;display:flex;align-items:center;justify-content:center}
.icons button.on{border:2px solid var(--acc);background:var(--acc-bg)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches button{width:30px;height:30px;border-radius:50%;border:3px solid transparent;padding:0}
.swatches button.on{border-color:var(--tx)}
.list-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:.5px solid var(--line)}
.list-row .nm{flex:1;font-size:15px}
.list-row i.li{font-size:20px}
.hint{font-size:12px;color:var(--tx3);margin-top:6px}
.sect{font-size:13px;font-weight:600;color:var(--tx2);margin:22px 0 4px;text-transform:none}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--tx);color:var(--bg);font-size:14px;padding:9px 14px;border-radius:10px;z-index:50;max-width:86vw;text-align:center;animation:tin .2s}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}

/* onboarding */
.onb{flex:1;overflow-y:auto;padding:28px 22px 40px}
.onb h1{font-size:28px;margin:12px 0 6px}
.onb p{color:var(--tx2);line-height:1.5;margin:0 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{border:.5px solid var(--line2);background:var(--card);border-radius:20px;padding:7px 12px;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc-tx)}
.linkbtn{border:none;background:none;color:var(--acc);padding:10px 0;font-size:15px}