:root{--bg:#F4F2EC;--card:#FBFAF6;--line:#E3E0D6;--text:#17181A;--muted:#6B6C6E;--soft:#3A3B3D;--accent:#2F6F5E;--accent-dark:#235448;--accent-soft:#E6EFEA;--warn:#B45309;--warn-soft:#FFF7ED;--warn-line:#FBD8B0;--bad:#991B1B;--bad-soft:#FFF1F1;--radius:14px}
@media (prefers-color-scheme: dark){:root{--bg:#161716;--card:#1F201E;--line:#2E2F2C;--text:#ECEAE2;--muted:#9A9B98;--soft:#C9C8C0;--accent:#6FB39D;--accent-dark:#8FD1BB;--accent-soft:#233A32;--warn:#F3A04D;--warn-soft:#3A2A16;--warn-line:#5C4321;--bad:#F08A8A;--bad-soft:#3A1F1F}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:15px;line-height:1.45}
a{color:var(--accent)}a:hover{color:var(--accent-dark)}
h1{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:30px;margin:0}
.shell{display:flex;min-height:100vh}
.side{width:220px;flex-shrink:0;padding:28px 20px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line);background:var(--card);position:sticky;top:0;height:100vh}
.side a{padding:10px 12px;border-radius:10px;color:var(--soft);text-decoration:none;font-weight:500}
.side a.active{background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.brand{font-family:Fraunces,Georgia,serif;font-size:22px;font-weight:600;margin-bottom:18px}
.main{flex-grow:1;padding:28px 32px;display:flex;flex-direction:column;gap:18px;max-width:1240px;min-width:0}
.tabbar{display:none}
.grow{flex-grow:1}.muted{color:var(--muted)}.small{font-size:13px}.right{margin-left:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden}
.row{display:flex;align-items:center}.col{display:flex;flex-direction:column}.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.gap{gap:12px}.gap-s{gap:8px}.gap-xs{gap:6px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid2.wide-left{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.link-card{text-decoration:none;color:inherit}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pill{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.ok{color:var(--accent-dark);background:var(--accent-soft)}.pill.warn{color:var(--warn);background:var(--warn-soft)}
.chip{padding:4px 8px;border-radius:8px;font-size:13px;background:var(--accent-soft);color:var(--soft)}.chip.bad{background:var(--bad-soft);color:var(--bad)}
.item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);flex-wrap:wrap}
.item-warn{background:var(--warn-soft);border-color:var(--warn-line)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0}.dot.ok{background:var(--accent)}.dot.warn{background:var(--warn)}
.btn{padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.primary:hover{background:var(--accent-dark)}
.btn.sm{padding:6px 10px;font-size:13px;min-height:32px}.btn.wide{width:100%}.btn.icon{width:40px;padding:0}.btn.danger{color:var(--bad)}.btn.link{background:none;border:none;color:var(--accent);padding:6px}
.input{padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;font-size:14px;min-height:40px}
.input.big{font-size:28px;letter-spacing:.3em;text-align:center}
.seg{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px}
.seg a{padding:6px 12px;border-radius:8px;color:var(--soft);text-decoration:none;font-size:13px;font-weight:600}.seg a.on{background:var(--accent);color:#fff}
.task-row{display:flex;align-items:center;gap:10px;padding:8px 4px;cursor:pointer}.task-row input{width:18px;height:18px}
.overdue{color:var(--bad)}
.task{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.task-focus{border-color:var(--accent)}.task-done .task-title{text-decoration:line-through;color:var(--muted)}
.task-check{width:18px;height:18px;margin-top:3px;flex-shrink:0}.task-title{font-weight:600}
.done-text{text-decoration:line-through;color:var(--muted)}
.feedback{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.step{padding:8px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
.newtask{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px}
.newtask .input{border:none;background:transparent}
.events{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px;color:var(--soft)}
.err{color:var(--bad)}.warn-text{color:var(--warn)}.ok-text{color:var(--accent)}.bad{color:var(--bad)}
.big{font-family:Fraunces,Georgia,serif;font-size:26px;font-weight:600}
.lines{display:flex;flex-direction:column;gap:2px;color:var(--soft)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}.tbl td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}.tbl .num{text-align:right;white-space:nowrap}
.inline{display:inline}
.flash{margin-top:6px;font-size:13px;padding:6px 10px;border-radius:8px;background:var(--accent-soft);color:var(--accent-dark)}.flash.err{background:var(--bad-soft);color:var(--bad)}
.flash-slot:empty{display:none}
details.task-more summary{cursor:pointer;list-style:none}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;z-index:50;padding:24px 12px}
.sheet[hidden]{display:none}
.sheet-card{width:100%;max-width:520px;max-height:calc(100vh - 48px);overflow:auto;background:var(--card);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.voice-ok{padding:10px 12px;border-radius:10px;background:var(--ok-bg,#e6f2ec);color:var(--ok,#2f6b4f)}
.sheet-title{font-weight:700}
.voice-text{min-height:60px;font-size:18px;padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.mic-fab{width:56px;height:56px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-28px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.mic-active{background:var(--warn)!important}
@media (max-width:900px){
  .side{display:none}
  .main{padding:16px 16px 100px}
  .grid2,.grid2.wide-left,.grid3{grid-template-columns:1fr}
  h1{font-size:24px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:8px 8px 22px;gap:4px;align-items:center;justify-content:space-around;z-index:40}
  .tabbar a,.tabbar #more-btn{flex:1;text-align:center;padding:10px 4px;border-radius:12px;font-size:12px;font-weight:600;color:var(--soft);text-decoration:none}
  .tabbar a.active,.tabbar #more-btn.active{background:var(--accent-soft);color:var(--accent-dark)}
  .events{grid-template-columns:70px 1fr}
}

.chat-card{min-height:60vh}
.chat-log{display:flex;flex-direction:column;gap:8px;flex-grow:1;overflow:auto;max-height:65vh;padding:4px}
.bubble{padding:10px 14px;border-radius:14px;max-width:80%;white-space:pre-wrap;font-size:14px;line-height:1.5}
.bubble.me{align-self:flex-end;background:var(--accent);color:#fff}
.bubble.ai{align-self:flex-start;background:var(--bg);border:1px solid var(--line)}
.htmx-indicator{display:none}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline}

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference){
  .card,.task,.item{animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
  .grid2>*:nth-child(2),.grid3>*:nth-child(2){animation-delay:.05s}.grid3>*:nth-child(3){animation-delay:.1s}
  .main>section:nth-of-type(2){animation-delay:.08s}.main>section:nth-of-type(3){animation-delay:.14s}
  #task-list>.task:nth-child(2){animation-delay:.04s}#task-list>.task:nth-child(3){animation-delay:.08s}#task-list>.task:nth-child(4){animation-delay:.12s}#task-list>.task:nth-child(5){animation-delay:.16s}
  ::view-transition-old(root){animation:fade-out .16s ease both}
  ::view-transition-new(root){animation:fade-in .22s ease both}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
.btn,.side a,.seg a,.tabbar a,.chip,.link-card,.task,.item{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.link-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.07);border-color:var(--accent)}
.side a:hover{background:var(--accent-soft)}
.task-check,.task-row input,input[type=checkbox]{accent-color:var(--accent);transition:transform .15s ease}
input[type=checkbox]:active{transform:scale(1.15)}
.task-done{animation:done-pop .35s ease both}
@keyframes done-pop{0%{transform:scale(1)}40%{transform:scale(.985);opacity:.7}100%{transform:scale(1);opacity:1}}
.flash{animation:rise .3s ease both}
.bubble{animation:rise .25s ease both}
.mic-active{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(180,83,9,.45)}50%{box-shadow:0 0 0 10px rgba(180,83,9,0)}}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:100;opacity:0;transition:width .4s ease,opacity .3s ease}
.htmx-request .progress,.progress.on{opacity:1;width:70%}
.sheet{animation:fade-in .2s ease both}.sheet-card{animation:sheet-up .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes sheet-up{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

.due-input{max-width:150px}
.due{font-weight:600;color:var(--soft)}
@media (max-width:900px){.newtask{flex-wrap:wrap}.newtask .input.grow{flex-basis:100%}}

.review-text{white-space:pre-wrap;font-size:14px;line-height:1.55}
details.task-more summary::-webkit-details-marker{display:none}

.typing{display:flex;gap:5px;align-items:center;min-height:38px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---- notes ---- */
.note-card{min-height:140px}.note-preview{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.note-title{font-family:Fraunces,Georgia,serif;font-size:22px;font-weight:600;min-height:46px}
.note-editor .ql-toolbar.ql-snow{border:1px solid var(--line);border-radius:10px 10px 0 0;background:var(--bg);position:sticky;top:0;z-index:5}
.note-editor .ql-container.ql-snow{border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;font-family:inherit;font-size:15px;min-height:50vh}
.ql-editor{min-height:50vh;line-height:1.6}
.ql-editor h1{font-family:Fraunces,Georgia,serif}.ql-editor h2{font-family:Fraunces,Georgia,serif}
.ql-snow .ql-stroke{stroke:var(--soft)}.ql-snow .ql-fill{fill:var(--soft)}.ql-snow .ql-picker{color:var(--soft)}
.file-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.file-row.fresh{animation:rise .3s ease both}
.thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.file-icon{width:64px;text-align:center;font-size:28px}
@media (prefers-color-scheme: dark){.ql-editor{color:var(--text)}.ql-snow .ql-picker-options{background:var(--card)}}
@media (max-width:900px){.ql-editor{min-height:40vh}.ql-toolbar.ql-snow{overflow-x:auto;white-space:nowrap}}

/* calendar */
.cal-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.task-dot{background:var(--soft);border:2px solid var(--line)}
.cal-week{display:grid;grid-template-columns:52px repeat(7,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.cal-head{padding:8px 6px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);min-height:56px;font-size:12px}
.cal-head.cal-gutter{border-left:none}
.cal-dow{color:var(--soft);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.cal-num{font-family:Fraunces,serif;font-size:20px;line-height:1.1}
.cal-today .cal-num{color:var(--accent)}
.cal-today{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cal-allday{display:block;margin-top:3px;padding:2px 6px;border-radius:6px;border-left:3px solid var(--accent);background:var(--bg);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit}
.cal-allday.task{border-left-style:dashed;border-left-color:var(--soft)}
.cal-gutter{position:relative;font-size:11px;color:var(--soft)}
.cal-gutter .cal-hour{height:48px;padding:2px 4px;box-sizing:border-box;text-align:right}
.cal-col{position:relative;border-left:1px solid var(--line);height:calc(15 * 48px)}
.cal-line{height:48px;box-sizing:border-box;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.cal-now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--warn);z-index:2}
.cal-now::before{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--warn)}
.cal-ev{position:absolute;left:2px;right:2px;background:color-mix(in srgb,var(--c) 14%,var(--card));border-left:3px solid var(--c);border-radius:6px;font-size:11px;line-height:1.2;overflow:visible;z-index:1;box-sizing:border-box}
.cal-ev summary{list-style:none;cursor:pointer;padding:3px 5px;height:100%;overflow:hidden;box-sizing:border-box}
.cal-ev summary::-webkit-details-marker{display:none}
.cal-ev-time{color:var(--c);font-weight:700}
.cal-ev[open]{z-index:5}
.cal-pop{position:absolute;top:0;left:100%;margin-left:6px;width:260px;max-width:80vw;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 12px 32px rgba(0,0,0,.18);font-size:13px;line-height:1.4;z-index:6}
.cal-col:nth-last-child(-n+2) .cal-pop{left:auto;right:100%;margin-left:0;margin-right:6px}
.cal-daylist{display:none}
.item.past{opacity:.55}
.schedule-form{margin-top:8px;padding:10px;border:1px dashed var(--line);border-radius:10px}
.more-menu{position:fixed;left:12px;right:12px;bottom:76px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.2);padding:6px;z-index:40;display:flex;flex-direction:column}
.more-menu[hidden]{display:none}
.more-menu a{padding:12px 14px;border-radius:10px;text-decoration:none;color:inherit;font-weight:600}
.more-menu a:active{background:var(--bg)}
.tabbar button#more-btn{background:none;border:none;font:inherit;cursor:pointer}
@media (max-width:900px){
  .cal-week{display:none}
  .cal-daylist{display:flex;flex-direction:column;gap:12px}
}

.event-form{gap:10px}
.event-form .event-title{font-size:16px;width:100%}
.event-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.event-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.event-row label .input{min-width:110px}
.event-row .event-check{flex-direction:row;align-items:center;gap:6px;padding-bottom:10px;font-size:14px;color:var(--text)}
.event-row .btn{margin-left:auto}
@media (max-width:900px){.event-row label{flex:1 1 45%}.event-row .btn{width:100%;margin:0}}