html,body.app{height:100%;margin:0}
body.app{display:flex;flex-direction:column;height:var(--vh,100dvh);overflow:hidden;padding-top:env(safe-area-inset-top);background:var(--bg)}
.bar{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1rem;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.bar .brand{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.views{flex:1;min-height:0;display:flex;flex-direction:column}
.view{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.25rem 1.1rem 1rem;scroll-behavior:smooth}
.view[hidden],.page[hidden]{display:none}
.messages{max-width:40rem;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.msg{max-width:88%;overflow-wrap:anywhere;white-space:pre-wrap;animation:rise .45s var(--spring)}
.msg.padi{align-self:flex-start;padding:.1rem .15rem}
.msg.me{animation:pop .42s var(--spring);transform-origin:100% 100%;align-self:flex-end;background:var(--user);padding:.65rem 1rem;border-radius:1.4rem 1.4rem .4rem 1.4rem}
.hero-msg{padding:2.5rem .15rem .75rem}
.hero-msg h2{font-size:2.5rem;line-height:1.04;margin:0;letter-spacing:-.035em;font-weight:800;color:var(--label);animation:rise .6s var(--spring) both}
.hero-msg p{margin:.4rem 0 0;font-size:1.35rem;color:var(--label2);letter-spacing:-.015em;animation:rise .6s .1s var(--spring) both}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;align-self:flex-start}
.chip{animation:rise .5s var(--spring) both;min-height:2.75rem;padding:0 1.1rem;border:.5px solid var(--sep);border-radius:999px;background:var(--grouped);color:var(--label);font:500 1rem var(--font);transition:transform .18s var(--spring),background .18s}
.chip:active{transform:scale(.95);background:var(--fill)}
.msg.secret{display:grid;gap:.7rem;width:min(100%,21rem);padding:1rem;background:var(--grouped);border-radius:1.4rem;white-space:normal}
.msg.secret label{font-weight:600}
.msg.secret input{font:inherit;font-size:1.0625rem;padding:.8rem 1rem;border:0;border-radius:.9rem;background:var(--card);color:var(--label);width:100%;outline:none}
.msg.secret .btn{width:100%}
.thinking{display:grid;gap:.55rem;width:min(78%,18rem)}
.thinking .sk{height:.8rem}.w1{width:100%}.w2{width:82%}.w3{width:54%}
.boot{display:grid;gap:.7rem;padding-top:2.5rem}.boot .h{height:2.4rem;width:62%;border-radius:.8rem}.boot .l{height:1rem;width:90%}.boot .m{height:1rem;width:70%}
.composer{margin:.25rem .75rem .6rem;display:flex;align-items:flex-end;gap:.4rem;padding:.35rem .35rem .35rem 1.1rem;background:var(--card);border:.5px solid var(--sep);border-radius:1.8rem;box-shadow:0 8px 28px rgba(0,0,0,.09);transition:border-color .2s}
.composer:focus-within{border-color:color-mix(in srgb,var(--tint) 55%,transparent)}
.composer[hidden]{display:none}
.composer textarea{flex:1;border:0;outline:0;background:transparent;color:var(--label);font:inherit;line-height:1.35;resize:none;max-height:8rem;padding:.55rem 0}
.composer textarea::placeholder{color:var(--label2)}
.composer textarea:disabled{opacity:.5}
.send{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;border:0;display:grid;place-items:center;background:var(--fill);color:var(--label2);transition:background .2s,color .2s,transform .18s var(--spring)}
.composer.has-text .send{background:var(--tint);color:var(--on-tint)}
.send:active{transform:scale(.9)}.send:disabled{opacity:.5}
.page{flex:1;overflow-y:auto;padding:.5rem 1.1rem 1.5rem;max-width:40rem;width:100%;margin:0 auto;background:var(--grouped)}
.page h1{font-size:2.1rem;margin:.6rem .25rem 1rem;letter-spacing:-.035em}
.empty-state{display:grid;justify-items:center;gap:.6rem;text-align:center;padding:3rem 1rem;color:var(--label2)}
.empty-state svg{width:3rem;height:3rem;opacity:.5}
.group{list-style:none;margin:0 0 1.2rem;padding:0;background:var(--card);border-radius:1.1rem;overflow:hidden}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:2.9rem;padding:.55rem 1rem;width:100%;border:0;background:none;color:var(--label);font:inherit;text-align:left}
.group>*+*{border-top:.5px solid var(--sep)}
.row .k{color:var(--label2)}.row .v{overflow-wrap:anywhere;text-align:right}
.row.danger{color:var(--danger);justify-content:center;font-weight:500}.row.danger:active{background:var(--fill)}
.row .sk{height:1rem}
.foot{color:var(--label2);font-size:.95rem;padding:0 .5rem}
.tabs{display:flex;background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top:.5px solid var(--sep);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem 0 .4rem;color:var(--label2);font-size:.6875rem;font-weight:500;min-height:3.1rem;transition:transform .18s var(--spring)}
.tabs a:active{transform:scale(.92)}
.tabs svg{width:1.6rem;height:1.6rem}
.tabs a[aria-current]{color:var(--tint)}
body.kb .tabs{display:none}
.offline{position:absolute;z-index:9;top:calc(env(safe-area-inset-top) + 3rem);left:50%;transform:translateX(-50%);background:var(--label);color:var(--bg);padding:.45rem 1rem;border-radius:999px;font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.offline[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:48rem){.tabs{justify-content:center}.tabs a{flex:0 0 7rem}}
.chip:nth-child(2){animation-delay:.07s}.chip:nth-child(3){animation-delay:.14s}
.wd{display:inline-block;white-space:pre-wrap;opacity:0;animation:word .5s var(--spring) forwards}
.thinking .sk:nth-child(2)::after{animation-delay:.15s}.thinking .sk:nth-child(3)::after{animation-delay:.3s}
.msg.secret{animation:sheet .5s var(--spring)}
.offline{animation:drop .45s var(--spring)}
.view:not([hidden]),.page:not([hidden]){animation:view .38s var(--spring)}
.composer{transition:border-color .2s,box-shadow .3s,transform .3s var(--spring)}
.composer:focus-within{box-shadow:0 12px 34px rgba(0,0,0,.13);transform:translateY(-1px)}
.send svg{transition:transform .35s var(--spring)}
.composer.has-text .send svg{transform:rotate(0) scale(1.1)}.composer:not(.has-text) .send svg{transform:scale(.9)}
.tabs svg{box-sizing:content-box;padding:.25rem 1rem;border-radius:999px;transition:background .3s,color .3s}
.tabs a[aria-current] svg{background:color-mix(in srgb,var(--tint) 15%,transparent);animation:pop .45s var(--spring)}
.row.danger,.row{transition:background .2s}
.group{animation:rise .5s var(--spring) both}.group:nth-of-type(2){animation-delay:.08s}
.w30{width:30%}.w40{width:40%}
@keyframes pop{0%{opacity:0;transform:scale(.9) translateY(8px)}60%{transform:scale(1.03)}100%{opacity:1;transform:none}}
@keyframes word{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes sheet{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes view{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.msg.card{width:min(100%,23rem);background:var(--grouped);border-radius:1.4rem;padding:1.05rem;display:grid;gap:.75rem;white-space:normal;animation:sheet .5s var(--spring)}
.card h3{margin:0;font-size:1.2rem;letter-spacing:-.02em}
.rows{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;margin:0}
.rows dt{color:var(--label2)}.rows dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.actions{display:grid;grid-template-columns:1fr 1.6fr;gap:.6rem}
.plan{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;min-height:3.2rem;padding:.6rem 1rem;border:0;border-radius:1rem;background:var(--card);color:var(--label);font:inherit;text-align:left;transition:transform .18s var(--spring)}
.plan:active{transform:scale(.97)}
.plan .pn{display:grid}.plan small{color:var(--label2);text-transform:capitalize}.plan .pp{font-weight:700}
.card.done{opacity:.55}.card.done button{pointer-events:none}

.msg.card.flat{background:transparent;padding:0;width:min(100%,23rem)}
.group.inner{margin:0}
.tx{list-style:none}.tx+.tx{border-top:.5px solid var(--sep)}
.tx-row{width:100%;align-items:center}
.tx-l,.tx-r{display:grid;gap:.1rem}.tx-r{text-align:right}
.tx-l small,.tx-r small{color:var(--label2);font-size:.85rem}
.tx-detail{padding:0 .8rem .9rem}
.receipt{background:var(--card);border:.5px solid var(--sep);border-radius:1.4rem;padding:1.15rem;display:grid;gap:.5rem;white-space:normal;box-shadow:0 6px 22px rgba(0,0,0,.06)}
.rc-brand{letter-spacing:.12em;color:var(--label2);font-weight:600}
.rc-status{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.1rem}
.rc-check{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--tint);color:var(--on-tint);font-size:.9rem;animation:pop .5s var(--spring)}
.rc-title{color:var(--label2)}.rc-amount{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.receipt .rows{padding-top:.6rem;border-top:1.5px dashed var(--sep)}
.rc-test{margin:0;color:var(--label2);font-size:.9rem}
.rc-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.3rem}
.btn.small{min-height:2.4rem;padding:0 .6rem;font-size:.95rem}
