.title-row,.section-title{display:flex;align-items:center;justify-content:space-between}.title-row h1{flex:1}.circle{width:42px;height:42px;border:0;border-radius:50%;background:var(--green);color:#fff;font-size:24px}.task{background:#f1eee6;border-radius:15px;padding:14px;margin:14px 0}.task small,.task strong{display:block}.task small{color:var(--muted);margin-bottom:6px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.chips span{background:#eeebe3;border-radius:99px;padding:7px 10px;font-size:13px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.stats div{background:var(--card);border-radius:18px;padding:16px 8px;text-align:center}.stats strong,.stats span{display:block}.stats strong{font-size:25px}.stats span{font-size:11px;color:var(--muted)}.text-btn{border:0;background:none;color:var(--green);font-weight:700}.handle{width:42px;height:5px;background:var(--line);border-radius:9px;margin:-12px auto 20px}.habit-loop{display:flex;gap:8px;align-items:stretch;margin:15px 0}.habit-loop>div{flex:1;background:#f1eee6;border-radius:13px;padding:12px}.habit-loop small,.habit-loop b{display:block}.habit-loop small{color:var(--muted)}.habit-loop i{align-self:center}.plan-row{background:#f1eee6;border-radius:12px;padding:12px;margin:7px 0}.clock{font-size:58px;text-align:center;margin:28px 0;font-weight:300}.workbench{text-align:center}.workbench .field{text-align:left}.result{grid-template-columns:repeat(3,1fr)}.result button.active{background:var(--green);color:#fff}.history em{display:inline-block;background:#ece9e0;border-radius:8px;padding:5px 8px;font-size:12px;font-style:normal}.intro{color:var(--muted)}

.sheet{backdrop-filter:blur(4px);animation:fade-in .18s ease}
.panel{animation:sheet-up .24s cubic-bezier(.22,.8,.3,1);box-shadow:0 -18px 50px rgba(35,33,27,.14)}
.sheet-bar{position:sticky;z-index:2;top:-24px;display:grid;grid-template-columns:76px 1fr 76px;align-items:center;margin:-24px -20px 18px;padding:calc(14px + env(safe-area-inset-top)*.05) 14px 12px;background:rgba(255,253,248,.96);border-bottom:1px solid rgba(222,217,206,.75);backdrop-filter:blur(14px)}
.sheet-bar strong{text-align:center;font-size:16px}.sheet-cancel{border:0;background:transparent;color:var(--green);padding:10px 4px;text-align:left;font-weight:650}.sheet-spacer{display:block}
.detail-heading{display:flex;align-items:center;justify-content:space-between}.field-help{color:var(--muted);font-size:13px;margin:-7px 0 16px}.add-plan{width:100%;margin-bottom:18px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(39,91,77,.1)}
.primary,.secondary,.circle,.seg button{transition:transform .12s ease,filter .12s ease}.primary:active,.secondary:active,.circle:active,.seg button:active{transform:scale(.98)}
.export-options{display:grid;gap:8px;margin:14px 0}.export-options label{display:flex;align-items:center;gap:10px;background:#f1eee6;border-radius:13px;padding:12px}.export-options input{accent-color:var(--green)}
@keyframes fade-in{from{background:rgba(25,25,22,0)}}@keyframes sheet-up{from{transform:translateY(24px);opacity:.7}}
@media (prefers-reduced-motion:reduce){.sheet,.panel{animation:none}}

/* v8 · iOS-like motion and visual polish */
:root{--ease-out:cubic-bezier(.22,.82,.3,1);--ease-spring:cubic-bezier(.2,.9,.25,1.12);--soft-shadow:0 8px 24px rgba(46,42,33,.055),0 1px 2px rgba(46,42,33,.035)}
html{background:var(--bg);scroll-behavior:smooth}body{min-height:100svh;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}main{min-height:100svh}
#app{transform-origin:50% 12px}.page-enter{animation:page-in .32s var(--ease-out) both}
.card{box-shadow:var(--soft-shadow);border-color:rgba(222,217,206,.64);transition:transform .22s var(--ease-out),box-shadow .22s ease}.card:active{transform:scale(.992)}
.primary,.secondary,.circle{touch-action:manipulation;will-change:transform}.primary{box-shadow:0 7px 17px rgba(39,91,77,.16);letter-spacing:.01em}.primary:active{filter:brightness(.96);transform:scale(.975)}.secondary:active{background:#e2ddd2}.circle{box-shadow:0 6px 16px rgba(39,91,77,.2)}.circle:active{transform:scale(.91) rotate(3deg)}
.tabs{height:calc(76px + env(safe-area-inset-bottom));padding:7px 18px env(safe-area-inset-bottom);gap:12px;background:rgba(250,248,242,.82);box-shadow:0 -8px 30px rgba(46,42,33,.045)}
.tabs button{position:relative;flex:1;max-width:88px;min-height:58px;border-radius:17px;transition:color .2s ease,background .25s ease,transform .16s ease}.tabs button span{line-height:1;transition:transform .26s var(--ease-spring)}.tabs button.active{background:rgba(39,91,77,.085)}.tabs button.active span{transform:translateY(-1px) scale(1.08)}.tabs button:active{transform:scale(.94)}
.sheet{opacity:0;background:rgba(25,25,22,0);animation:none;transition:opacity .2s ease,background .2s ease}.sheet.visible{opacity:1;background:rgba(25,25,22,.32)}.sheet.closing{opacity:0;background:rgba(25,25,22,0)}
.panel{transform:translateY(28px) scale(.992);opacity:.75;animation:none;transition:transform .3s var(--ease-out),opacity .2s ease;border-radius:30px 30px 0 0;overscroll-behavior:contain}.sheet.visible .panel{transform:translateY(0) scale(1);opacity:1}.sheet.closing .panel{transform:translateY(20px) scale(.995);opacity:.8;transition-duration:.18s}
.sheet-grabber{position:sticky;z-index:4;top:-24px;width:38px;height:5px;margin:-14px auto 9px;border-radius:99px;background:#d3cec3}.sheet-bar{top:-10px;margin:-10px -20px 18px;padding:10px 14px 12px}
.field input,.field textarea,.field select{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.field input:focus,.field textarea:focus,.field select:focus{background:#fff;box-shadow:0 0 0 4px rgba(39,91,77,.09)}
.seg{box-shadow:inset 0 0 0 1px rgba(222,217,206,.4)}.seg button{transition:background .2s ease,box-shadow .2s ease,transform .14s ease}.seg button.active{box-shadow:0 3px 10px rgba(46,42,33,.09)}
.task,.plan-row,.habit-loop>div{border:1px solid rgba(222,217,206,.5)}.history{transition:background .2s ease;border-radius:0 14px 14px 0;padding-top:5px;padding-bottom:5px}
@keyframes page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(46,42,33,.075)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page-enter{animation:none}.sheet,.panel,.tabs button,.tabs button span,.card{transition:none}}

/* v10 · quick capture */
.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 18px}.template-grid button{border:1px solid rgba(222,217,206,.75);background:#fff;border-radius:15px;min-height:72px;padding:9px 4px;color:var(--ink);font-size:12px;transition:transform .14s ease,border-color .18s ease,background .18s ease}.template-grid button span{display:block;font-size:24px;margin-bottom:4px}.template-grid button:active{transform:scale(.95);border-color:var(--green);background:#edf3ef}
.advanced{margin:12px 0 18px;border:1px solid var(--line);border-radius:14px;background:#faf8f2;overflow:hidden}.advanced summary{padding:14px;color:var(--muted);font-size:13px;font-weight:650;cursor:pointer}.advanced[open]{padding:0 13px 8px}.advanced[open] summary{margin:0 -13px;padding:14px 13px;border-bottom:1px solid var(--line)}
.quick-actions{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:8px}.quick-actions .secondary{width:100%}
.week-track{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}.week-day{display:flex;min-width:0;flex-direction:column;align-items:center;gap:5px;padding:10px 2px;border-radius:13px;background:#f2efe7;color:var(--muted)}.week-day small{font-size:10px}.week-day b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:14px}.week-day span{font-size:10px;white-space:nowrap}.week-day.done{background:#eaf1ed;color:var(--green)}.week-day.done b{background:var(--green);color:white}.week-day.today{box-shadow:inset 0 0 0 1.5px var(--green)}
@media(max-width:390px){.template-grid{grid-template-columns:repeat(3,1fr)}.week-track{gap:4px}.week-day{padding-left:1px;padding-right:1px}}

.week-day.future{opacity:.42;background:#f5f2eb}.week-day.future span{min-height:12px}

/* v11 · four essential templates */
.template-grid{grid-template-columns:repeat(2,1fr)}.template-grid button{min-height:82px;font-size:13px}
@media(max-width:390px){.template-grid{grid-template-columns:repeat(2,1fr)}}

/* v12 · twilight violet */
:root{--bg:#f6f2fb;--card:#fffefe;--ink:#2c2733;--muted:#7d7489;--line:#e4dceb;--green:#6f4bb8;--orange:#ad66b7;--shadow:0 14px 34px rgba(75,48,111,.075)}
body{background:
radial-gradient(circle at 90% 2%,rgba(171,132,225,.13),transparent 28rem),
radial-gradient(circle at 2% 38%,rgba(221,194,237,.14),transparent 24rem),
var(--bg)}
.eyebrow{color:#8b6bb4}.top h1{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif;font-weight:760;letter-spacing:-.035em}
.card{background:rgba(255,254,255,.92);border-color:rgba(220,207,233,.72);box-shadow:0 10px 30px rgba(75,48,111,.065),0 1px 2px rgba(75,48,111,.035)}
.primary{background:linear-gradient(135deg,#7652bd,#6541aa);box-shadow:0 8px 20px rgba(104,69,174,.23)}.circle{background:linear-gradient(145deg,#8060c4,#6541aa);box-shadow:0 7px 18px rgba(104,69,174,.24)}
.secondary,.task,.plan-row,.habit-loop>div{background:#f1ecf7}.mode{background:#eee7f7;color:#6945aa}.mode.habit{background:#f4e8f3;color:#94549e}.chips span{background:#f0ebf6;color:#5d526b}
.tabs{background:rgba(249,247,252,.86);border-color:rgba(218,207,229,.85);box-shadow:0 -9px 30px rgba(75,48,111,.06)}.tabs button.active{background:rgba(111,75,184,.1);color:#6845ae}
.panel{background:rgba(255,254,255,.98);box-shadow:0 -22px 60px rgba(58,35,88,.18)}.sheet-bar{background:rgba(255,254,255,.94)}.sheet-grabber{background:#d5c8e2}
.notice{background:#eee8f7;color:#6443a5}.seg,.template-grid button,.advanced,.field input,.field textarea,.field select{border-color:#e2d7ec}.seg,.advanced{background:#f2edf7}.seg button.active{color:#6240a1}.field input:focus,.field textarea:focus,.field select:focus{border-color:#7652bd;box-shadow:0 0 0 4px rgba(118,82,189,.1)}
.week-day{background:#f1edf6}.week-day.done{background:#ebe4f5;color:#6745aa}.week-day.done b{background:linear-gradient(145deg,#7b58bd,#6541aa)}.week-day.today{box-shadow:inset 0 0 0 1.5px #7652bd}.week-day.future{background:#f4f0f7}
.stats div{background:rgba(255,254,255,.9);box-shadow:0 7px 20px rgba(75,48,111,.05)}
.template-grid button{background:linear-gradient(145deg,#fff,#f8f3fc)}.template-grid button:active{border-color:#7652bd;background:#f0e9f8}