:root{--bg:#191919;--lav:#D5B7F8;--lav2:#C9A6F5;--sec:#303030;--surf:#242424;--text:#fff;--muted:#9A9AAE;--ink:#141018;--r:22px;
--spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1);
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);min-height:100%;overscroll-behavior:none}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.muted{color:var(--muted)}
h1{font-size:34px;font-weight:700;letter-spacing:-.5px;margin:8px 0 18px}
/* login */
.login-wrap{max-width:420px;margin:0 auto;padding:90px 24px}
.card-dark{background:var(--sec);border-radius:var(--r);padding:22px}
.login-card{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.login-card label{font-size:14px;color:var(--muted)}
input[type=password],input[type=text],input[type=datetime-local],input[type=color],textarea,select{width:100%;background:#202020;border:1px solid #3a3a3a;border-radius:16px;padding:14px 16px;font-size:17px;outline:none;transition:border-color .2s}
input:focus,textarea:focus,select:focus{border-color:var(--lav)}
.err{color:#ff9b9b;margin:0;font-size:14px}
.btn-primary{background:var(--lav);color:var(--ink);font-weight:600;font-size:17px;border-radius:18px;padding:15px;transition:transform .35s var(--spring)}
.btn-primary:active{transform:scale(.96)}
.btn-primary:disabled{opacity:.5}
/* shell */
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 0;gap:10px}
.seg{display:flex;background:var(--sec);border-radius:999px;padding:4px;position:relative;width:132px}
.seg button{flex:1;height:38px;border-radius:999px;position:relative;z-index:1;display:grid;place-items:center;color:#ddd;transition:color .3s}
.seg button.on{color:var(--ink)}
.seg .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--lav);border-radius:999px;transition:transform .45s var(--spring)}
.seg.m .pill{transform:translateX(100%)}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--sec);color:#fff;flex:none}
.iconbtn:disabled{opacity:.4}
svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pager{overflow:hidden;width:100%}
.track{display:flex;width:200%;transition:transform .5s var(--spring);will-change:transform;background-image:linear-gradient(rgba(66,168,121,var(--swipe-tint)),rgba(66,168,121,var(--swipe-tint)))}
.swipe-wrap.swipe-left .card{background-image:linear-gradient(rgba(128,101,213,var(--swipe-tint)),rgba(128,101,213,var(--swipe-tint)))}
.track.m{transform:translateX(-50%)}
.track.drag{transition:none}
.view{width:50%;padding:6px 20px 120px;min-height:calc(100vh - 70px);min-height:calc(100dvh - 70px)}
/* Landscape / wide split: two panes side by side, independently scrollable */
.edge-handle{position:fixed;top:38%;width:25px;height:100px;border-radius:18px;z-index:6;background:var(--lav);box-shadow:0 4px 18px rgba(0,0,0,.35);display:grid;place-items:center;touch-action:none;padding:0;transition:opacity .2s}
.edge-handle.right{right:-13px}.edge-handle.left{left:-13px;background:var(--msg-accent)}
.edge-handle span{width:5px;height:38px;border-radius:5px;background:rgba(20,16,24,.45)}
body.split .edge-handle,.track.m~.edge-handle.right,.track:not(.m)~.edge-handle.left{display:none}
.liquid{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;opacity:0}
.liquid.on{opacity:1}.liquid path{opacity:.7}
.track.liquid-drag{transition:none}
body.split .seg.hidden-split{visibility:hidden;pointer-events:none}
body.split .pager{overflow:visible;height:calc(100vh - 70px);height:calc(100dvh - 70px)}
body.split .track{width:100%;transform:none!important;height:100%;gap:0}
body.split .track.m{transform:none!important}
body.split .view{width:50%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:100px;overscroll-behavior:contain}
body.split #vt{border-right:1px solid #2a2a2a}
body.split .fab{right:22px}
body.split .fab.hide{transform:none;opacity:1;pointer-events:auto}
/* week */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:22px;text-align:center}
.week .dn{font-size:13px;color:var(--muted);margin-bottom:8px}
.week button{display:flex;flex-direction:column;align-items:center;padding:6px 0 8px;border-radius:16px;transition:background .3s,color .3s,transform .35s var(--spring);position:relative}
.week button .d{font-size:17px;font-weight:600}
.week button.today .d{color:var(--lav)}
.week button.sel{background:#fff;color:var(--ink)}
.week button.sel .dn,.week button.sel .d{color:var(--ink)}
.week button.has::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--lav);position:absolute;bottom:3px}
.week button.sel.has::after{background:var(--ink)}
.week button:active{transform:scale(.9)}
.weeknav{display:flex;justify-content:space-between;align-items:center;margin:-8px 0 10px;color:var(--muted);font-size:14px}
.weeknav button{color:var(--muted);padding:6px 8px}
.sect{font-size:14px;color:var(--muted);margin:22px 4px 10px;text-transform:uppercase;letter-spacing:.6px}
/* swipeable cards */
.swipe-wrap{position:relative;margin-bottom:12px;border-radius:var(--r);isolation:isolate;overflow:visible;transition:height .22s var(--ease),margin .22s var(--ease),opacity .18s}
.swipe-wrap .card{margin-bottom:0;transform-origin:50% 110%;overflow:hidden;z-index:1;touch-action:pan-y;user-select:none;--swipe-tint:0;-webkit-user-select:none;cursor:grab;will-change:transform;background-image:linear-gradient(rgba(66,168,121,var(--swipe-tint)),rgba(66,168,121,var(--swipe-tint)))}
.swipe-wrap.swipe-left .card{background-image:linear-gradient(rgba(128,101,213,var(--swipe-tint)),rgba(128,101,213,var(--swipe-tint)))}
.swipe-wrap .card.dragging{cursor:grabbing;transition:none;animation:none}
.swipe-wrap .card.returning{transition:transform .45s cubic-bezier(.2,1.65,.4,1);animation:none}
.swipe-wrap .card.exiting{transition:transform .38s cubic-bezier(.25,.65,.45,1);animation:none;pointer-events:none}
.swipe-wrap.collapsing{height:0!important;margin-bottom:0;opacity:0}
.undo-toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,30px);background:#fff;color:var(--ink);padding:12px 18px;border-radius:16px;font-size:14px;opacity:0;transition:all .4s var(--spring);z-index:30;pointer-events:none;max-width:90vw;text-align:center;display:flex;gap:16px;align-items:center;white-space:nowrap}
.undo-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.undo-toast button{color:#6947c7;font-weight:700;padding:3px}
/* cards */
.card{border-radius:var(--r);padding:18px 18px 16px;margin-bottom:12px;background:var(--sec);position:relative;transition:transform .45s var(--spring),opacity .3s;animation:pop .5s var(--spring) both}
.card.lav{background:var(--lav);color:var(--ink)}
.card:active{transform:scale(.97)}
.card.done{opacity:.5}
.card.done .ttl{text-decoration:line-through}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);margin-bottom:10px}
.card.lav .tag{background:rgba(20,16,24,.12)}
.tag.high{background:#fff;color:var(--ink)}
.card.lav .tag.high{background:var(--ink);color:var(--lav)}
.ttl{font-size:21px;font-weight:650;line-height:1.2;margin:0 44px 12px 0}
.meta{display:flex;gap:14px;font-size:14px;align-items:center;flex-wrap:wrap;opacity:.85}
.meta span{display:inline-flex;gap:6px;align-items:center}
.meta svg{width:16px;height:16px}
.chk{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);transition:transform .35s var(--spring),background .2s}
.card.lav .chk{background:rgba(20,16,24,.12)}
.chk.on{background:var(--ink);color:var(--lav)}
.card:not(.lav) .chk.on{background:var(--lav);color:var(--ink)}
.chk:active{transform:scale(.8)}
.empty{color:var(--muted);text-align:center;padding:40px 10px;font-size:15px}
.fab{position:fixed;right:22px;bottom:calc(26px + env(safe-area-inset-bottom));width:62px;height:62px;border-radius:50%;background:var(--lav);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .4s var(--spring),opacity .3s;z-index:5}
.fab svg{width:28px;height:28px}
.fab:active{transform:scale(.88)}
.fab.hide{transform:scale(0);opacity:0;pointer-events:none}
/* messages */
.msg{background:color-mix(in srgb,var(--msg-accent) 24%,var(--sec));border:1px solid color-mix(in srgb,var(--msg-accent) 35%,transparent);border-radius:var(--r);padding:18px;margin-bottom:12px;font-size:16px;line-height:1.45;animation:pop .5s var(--spring) both;white-space:pre-wrap;word-wrap:break-word}
.msg time{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.chip{display:inline-flex;gap:8px;align-items:center;margin-top:12px;background:#3d3d3d;border-radius:14px;padding:10px 14px;color:#fff;text-decoration:none;font-size:14px;white-space:normal}
.chip svg{width:16px;height:16px}
/* sheet */
.sheet{position:fixed;inset:0;background:var(--bg);z-index:10;transform:translateY(100%);transition:transform .55s var(--spring);overflow-y:auto;padding-bottom:40px}
.sheet.open{transform:none}
.sheet.closing{transition:transform .35s var(--ease)}
.sheet-profile{z-index:12}
.dhead{background:var(--lav);color:var(--ink);padding:calc(14px + env(safe-area-inset-top)) 20px 30px;border-radius:0 0 28px 28px}
.dhead .row{display:flex;justify-content:space-between;margin-bottom:18px}
.dhead .iconbtn{background:rgba(20,16,24,.1);color:var(--ink)}
.dhead h2{font-size:30px;line-height:1.15;margin:0 0 14px;letter-spacing:-.4px}
.panel{background:var(--sec);margin:-14px 14px 0;border-radius:var(--r);padding:20px;position:relative}
.panel p{margin:0 0 18px;line-height:1.5;white-space:pre-wrap}
.lbl{font-size:14px;color:var(--muted);margin:6px 0 10px;display:flex;align-items:center;gap:8px}
.lbl svg{width:16px;height:16px}
.sub{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid #474747;margin-bottom:10px;transition:background .3s,color .3s,transform .35s var(--spring)}
.sub .bx{width:24px;height:24px;border-radius:8px;border:2px solid #777;display:grid;place-items:center;flex:none;transition:all .3s var(--spring)}
.sub .bx svg{width:15px;height:15px;opacity:0}
.sub.on{background:var(--lav);color:var(--ink);border-color:var(--lav)}
.sub.on .bx{background:var(--ink);border-color:var(--ink);color:var(--lav)}
.sub.on .bx svg{opacity:1}
.sub:active{transform:scale(.97)}
.kv{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.kv span{background:#3a3a3a;border-radius:999px;padding:6px 12px;font-size:13px}
.panel .btn-primary{width:100%;margin-top:14px}
.btn-ghost{width:100%;margin-top:10px;padding:14px;border-radius:18px;color:#ff9b9b;font-size:15px}
.form{padding:calc(14px + env(safe-area-inset-top)) 20px 30px}
.form .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.form label{display:block;font-size:14px;color:var(--muted);margin:16px 0 8px}
.form textarea{min-height:110px;resize:vertical}
.form .btn-primary{width:100%;margin-top:16px}
.prio{display:flex;gap:8px}
.prio button{flex:1;padding:12px;border-radius:14px;background:var(--sec);transition:all .3s var(--spring)}
.prio button.on{background:var(--lav);color:var(--ink);font-weight:600}
.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,30px);background:#fff;color:var(--ink);padding:12px 18px;border-radius:999px;font-size:14px;opacity:0;transition:all .4s var(--spring);z-index:20;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.logout{color:var(--muted);font-size:13px;text-decoration:none;display:block;text-align:center;margin-top:30px}
.top a.iconbtn{color:#fff}
/* profile */
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 18px}
.swatch{width:42px;height:42px;border-radius:50%;border:2px solid transparent;padding:0;position:relative}
.swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--ink)}
.swatch.custom{overflow:hidden;background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red);display:grid;place-items:center}
.swatch.custom input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
.hint{font-size:13px;color:var(--muted);line-height:1.4;margin:10px 0 0}
.menu-row{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--sec);border-radius:16px;color:#fff;text-decoration:none;margin-top:8px}
.menu-row svg{width:20px;height:20px}
.ver{text-align:center;color:var(--muted);font-size:12px;margin-top:28px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}