:root{
  --bg:#f1ece2;--paper:#fbf9f4;--ink:#1d1c19;--mute:#7a766c;--line:#ddd7ca;--soft:#e9e4d8;
  --me:#2d4a6e;--you:#b5522b;--us:#2f6b4f;--accent:var(--us);--ok:#2f6b4f;--bad:#b3392f;--warn:#b98524;
  --serif:ui-serif,"New York","Iowan Old Style",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141412;--paper:#1b1b18;--ink:#f0ece3;--mute:#8d887c;--line:#2e2d29;--soft:#242320;
  --me:#8fb0d9;--you:#e0865c;--us:#6fc49a;--ok:#6fc49a;--bad:#e5766c;--warn:#d8a441;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{color-scheme:light dark}
body.locked{overflow:hidden}
.boot{display:grid;place-items:center;min-height:100vh;color:var(--mute);font-family:var(--serif);font-size:20px}
html,body{margin:0;background:var(--bg);color:var(--ink);overscroll-behavior-y:none}
button:active:not(.cd):not(.x){transform:scale(.97)}
.in,select.in{font-size:16px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
body{font:15px/1.5 var(--sans);min-height:100vh;-webkit-font-smoothing:antialiased;background-image:radial-gradient(900px 380px at 50% -160px,color-mix(in srgb,var(--accent) 10%,transparent),transparent);background-repeat:no-repeat}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.hide{display:none!important}
.num{font-variant-numeric:tabular-nums lining-nums}
.serif{font-family:var(--serif);letter-spacing:-.01em}

/* Auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:380px}
.mark{width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:600 24px var(--serif);margin-bottom:26px}
.auth h1{font:500 38px/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 8px}
.auth p.sub{color:var(--mute);margin:0 0 30px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12px;color:var(--mute);margin:0 0 6px;letter-spacing:.02em}
.in{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:12px 13px;outline:none;transition:border-color .15s}
.in:focus{border-color:var(--ink)}
.btn{border:1px solid var(--ink);border-radius:10px;padding:12px 18px;font-weight:550;background:var(--ink);color:var(--bg);transition:opacity .15s}
.btn:hover{opacity:.88}.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);opacity:1}
.btn.small{padding:8px 13px;font-size:13.5px;border-radius:9px}
.link{background:none;border:0;color:var(--mute);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.err{color:var(--bad);font-size:13px;min-height:20px;margin:4px 0 8px}

/* Layout */
.shell{max-width:1040px;margin:0 auto;padding:0 22px 120px}
.top{display:flex;align-items:center;gap:14px;margin:0 -22px 18px;padding:calc(env(safe-area-inset-top) + 12px) 22px 12px;position:sticky;top:0;z-index:15;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid transparent;transition:border-color .2s}
body.scrolled .top{border-color:var(--line)}
.ttl{font:500 17px var(--serif);opacity:0;transform:translateY(6px);transition:.2s}
body.scrolled .ttl{opacity:1;transform:none}
.brand{display:flex;align-items:center;gap:10px;font:600 20px var(--serif)}
.brand .mark{width:30px;height:30px;border-radius:8px;font-size:17px;margin:0}
.spacer{flex:1}
.icon-btn{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:none;display:grid;place-items:center}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--you)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--bg);font-weight:650;border:0}
.title-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.title-row h1{font:500 clamp(30px,5vw,44px)/1.05 var(--serif);letter-spacing:-.025em;margin:0}
.mnav{display:flex;gap:4px}
.mnav button{width:34px;height:34px;border:1px solid var(--line);background:none;border-radius:50%;font-size:16px;color:var(--mute)}
.mnav button:hover{color:var(--ink);border-color:var(--ink)}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin:18px 0 28px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0;color:var(--mute);font-weight:550}
.tabs button.on{color:var(--ink);border-color:var(--ink)}
@media(max-width:720px){
  .shell{padding:calc(env(safe-area-inset-top) + 16px) 16px 110px}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;gap:0;justify-content:space-around;background:var(--bg);border-top:1px solid var(--line);border-bottom:0;padding:6px 8px calc(env(safe-area-inset-bottom) + 6px)}
  .tabs{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px)}
  .tabs button{flex:1;border:0;margin:0;padding:6px 0 4px;font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:3px;letter-spacing:.01em}
  .tabs button .ti{display:block}
  .tabs button.on{border:0}
  .brand span{display:none}
}

/* Abschnitte */
.kicker{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 10px}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:1.25fr 1fr}
@media(max-width:860px){.g2{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 1px 0 #fff8 inset,0 18px 36px -24px #3a2a0f30}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.hero{padding:30px 28px 28px;border-radius:26px;background:color-mix(in srgb,var(--accent) 11%,var(--paper));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);box-shadow:0 0 0 28px color-mix(in srgb,var(--accent) 6%,transparent),0 0 0 56px color-mix(in srgb,var(--accent) 3%,transparent);pointer-events:none}
.hero .big{font:500 clamp(54px,11vw,92px)/1 var(--serif);letter-spacing:-.04em}
.hero .lead{color:var(--mute);margin:10px 0 0;max-width:520px}
.hero .row{display:flex;gap:34px;flex-wrap:wrap;margin-top:22px}
.hero .row small{display:block;font-size:12px;color:var(--mute)}
.hero .row b{font:500 22px var(--serif)}
.meter{height:5px;background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:4px;margin-top:22px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* Ich · Du · Wir */
.trio{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:22px;background:var(--paper);overflow:hidden;box-shadow:0 18px 36px -24px #3a2a0f30}
.trio>div{padding:22px;border-right:1px solid var(--line)}
.trio>div:last-child{border:0}
@media(max-width:860px){.trio{grid-template-columns:1fr}.trio>div{border-right:0;border-bottom:1px solid var(--line)}.trio>div:last-child{border:0}}
.who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--c)}
.who i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.amt{font:500 34px var(--serif);letter-spacing:-.025em;margin:8px 0 2px}
.meta{color:var(--mute);font-size:13px}
.lines{margin-top:16px}
.line{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.line .sw{width:8px;height:8px;border-radius:2px;flex:none}
.line .t{flex:1}.line .v{font-variant-numeric:tabular-nums}
.pos{color:var(--ok)}.neg{color:var(--bad)}

/* Verlauf */
.chart{display:flex;align-items:flex-end;gap:12px;height:150px;margin-top:14px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px}
.chart .bar{width:100%;max-width:46px;background:color-mix(in srgb,var(--accent) 24%,var(--soft));border-radius:12px 12px 5px 5px;position:relative;min-height:3px;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
.chart .col.now .bar{background:var(--accent)}
@keyframes grow{from{transform:scaleY(.02)}}
.chart small{font-size:11.5px;color:var(--mute)}
.chart .val{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}

/* Verteilung */
.split{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin:14px 0}
.split i{display:block;height:100%}
.legend{display:flex;flex-direction:column}
.legend .line:first-child{border-top:0}

/* Budgets, Ziele */
.ring{width:46px;height:46px;flex:none}
.ring circle{fill:none;stroke-width:4}
.item{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.item:first-of-type{border-top:0}
.item .n{flex:1;min-width:0}.item .n b{display:block;font-weight:600}
.pbar{height:4px;background:var(--soft);border-radius:4px;overflow:hidden;margin-top:8px}
.pbar i{display:block;height:100%;background:var(--accent)}
.pbar.warn i{background:var(--warn)}.pbar.bad i{background:var(--bad)}

/* Buchungen */
.day{font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;padding:20px 0 6px;font-weight:600}
.tx{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.tx .sw{width:9px;height:9px;border-radius:3px;flex:none}
.tx .n{flex:1;min-width:0}.tx .n b{display:block;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .n small{color:var(--mute);font-size:12.5px}
.tx .v{font-variant-numeric:tabular-nums;font-weight:550}
.x{border:0;background:none;color:var(--mute);padding:6px;font-size:15px;opacity:.55}
.x:hover{opacity:1;color:var(--bad)}
.tag{font-size:11.5px;color:var(--c,var(--mute));margin-left:8px}
.empty{color:var(--mute);padding:30px 0;text-align:center}
.formrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.formrow>*{flex:1;min-width:120px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;margin-bottom:14px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:7px;color:var(--mute);font-weight:550;font-size:13.5px}
.seg button.on{background:var(--ink);color:var(--bg)}

/* FAB + Sheet */
.fab{position:fixed;right:22px;bottom:calc(env(safe-area-inset-bottom) + 24px);height:54px;padding:0 22px;border-radius:27px;border:0;background:var(--ink);color:var(--bg);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 10px 30px #0003;z-index:30}
.fab b{font:400 24px/1 var(--sans)}
@media(max-width:720px){.fab{bottom:calc(env(safe-area-inset-bottom) + 76px);width:54px;padding:0;justify-content:center}.fab span{display:none}}
.sheet-bg{position:fixed;inset:0;background:#0006;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:500px;background:var(--bg);border-radius:20px 20px 0 0;padding:26px 22px calc(env(safe-area-inset-bottom) + 24px);max-height:92vh;overflow:auto;animation:up .22s ease}
@media(min-width:721px){.sheet-bg{align-items:center}.sheet{border-radius:20px}}
@keyframes up{from{transform:translateY(24px);opacity:0}}
.sheet h2{font:500 26px var(--serif);margin:0 0 16px;letter-spacing:-.02em}
.chat{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;min-height:220px}
.msg{padding:12px 15px;border-radius:14px;max-width:86%;white-space:pre-wrap}
.msg.u{align-self:flex-end;background:var(--ink);color:var(--bg)}
.msg.a{align-self:flex-start;background:var(--soft)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid var(--line);background:none;border-radius:99px;padding:6px 13px;font-size:13px;color:var(--mute)}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;z-index:60;font-weight:550;animation:up .2s}
.note{padding:12px 0;border-top:1px solid var(--line)}
.note.new{font-weight:600}
.insight{padding:12px 0;border-top:1px solid var(--line)}
.insight:first-of-type{border-top:0}

/* Kalender */
.cal-head,.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-head span{text-align:center;font-size:12px;color:var(--mute);padding:4px 0 8px;letter-spacing:.05em}
.cd{aspect-ratio:1/1;border:1px solid transparent;border-radius:12px;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;position:relative}
.cd.out{pointer-events:none}
.cd:hover{background:var(--soft)}
.cd .dn{font-variant-numeric:tabular-nums;font-size:15px}
.cd.today .dn{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.cd.sel{background:var(--ink);color:var(--bg)}
.cd .dots{display:flex;gap:3px;height:6px}
.cd .dots i{width:5px;height:5px;border-radius:50%}
.cd.sel .dots i{box-shadow:0 0 0 1px var(--bg)}
.legend-row{display:flex;gap:18px;margin-top:14px;font-size:12.5px;color:var(--mute)}
.legend-row i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}

.ti{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:721px){.tabs button .ti{display:none}}
.grab{width:38px;height:5px;border-radius:3px;background:var(--line);margin:-10px auto 16px}
.sheet{transition:transform .2s ease}.sheet-bg{transition:opacity .2s}
.swipe{position:relative;overflow:hidden}
.swipe-del{position:absolute;inset:0;background:var(--bad);color:#fff;display:flex;align-items:center;justify-content:flex-end;padding-right:22px;font-weight:600}
.swipe .tx{background:var(--bg);position:relative}
.undo{margin-left:14px;background:none;border:0;color:inherit;text-decoration:underline;font-weight:600}
.panel .seg{margin-bottom:16px}

/* Kategorie-Icons */
.ci{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent)}
.ci svg{width:19px;height:19px;fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.line .ci{width:28px;height:28px;border-radius:9px}.line .ci svg{width:15px;height:15px}
.line{padding:9px 0}
/* Leerer Zustand */
.empty-ill{width:68px;height:68px;fill:none;stroke:var(--mute);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;margin-bottom:10px}
.empty{display:flex;flex-direction:column;align-items:center;max-width:300px;margin:0 auto}
/* Einblenden beim Tabwechsel */
.enter>*{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.enter>*:nth-child(2){animation-delay:.06s}.enter>*:nth-child(3){animation-delay:.12s}.enter>*:nth-child(4){animation-delay:.18s}.enter>*:nth-child(5){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.auth-card{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.tx:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.btn{box-shadow:0 8px 18px -10px #0006}

/* Themes */
:root[data-theme="rose"]{--bg:#f8ece8;--paper:#fffaf7;--ink:#2c1f23;--mute:#8d7479;--line:#efdad5;--soft:#f5e3de;--me:#5a6f9e;--you:#c45f7c;--us:#6a9079;--accent:#c9617f}
:root[data-theme="sage"]{--bg:#eef0e8;--paper:#fafbf6;--ink:#1f2620;--mute:#78807a;--line:#dde2d6;--soft:#e6eadf;--me:#4f6a84;--you:#b8634a;--us:#5d8466;--accent:#5d8466}
@media (prefers-color-scheme:dark){
:root[data-theme="rose"]{--bg:#1b1416;--paper:#251b1e;--ink:#f7eae7;--mute:#a38b90;--line:#3a2a2f;--soft:#2f2328;--me:#9db3e0;--you:#ee94ac;--us:#8fc2a2;--accent:#ee94ac}
:root[data-theme="sage"]{--bg:#121613;--paper:#1a201b;--ink:#eef1ea;--mute:#8a9489;--line:#29322b;--soft:#202820;--me:#8fb0d1;--you:#e0865c;--us:#8fc9a0;--accent:#8fc9a0}
}
:root[data-theme="rose"] .panel,:root[data-theme="rose"] .trio{box-shadow:0 20px 40px -26px #b0486a40}
:root[data-theme="rose"] .hero .big{font-style:italic}
.greet{font:italic 400 clamp(20px,3.4vw,26px) var(--serif);color:var(--mute);margin:0 0 14px}
.swatches{display:flex;gap:12px;margin:6px 0 22px}
.swatch{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);padding:3px;background:none}
.swatch i{display:block;width:100%;height:100%;border-radius:50%}
.swatch.on{border-color:var(--ink)}
.sw-label{font-size:12px;color:var(--mute);margin-top:2px}

/* Himmel (Copilot-inspiriert) */
:root[data-theme="sky"]{--bg:#f2f5fb;--paper:#fff;--ink:#14233f;--mute:#6b7c99;--line:#e2e8f4;--soft:#e9eff9;--me:#3b6fe8;--you:#e0568a;--us:#19a36f;--accent:#3b6fe8;--serif:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","SF Pro Display",Inter,system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root[data-theme="sky"]{--bg:#0c1322;--paper:#141d32;--ink:#e9efff;--mute:#8a9bbb;--line:#22304d;--soft:#1b2740;--me:#7ea4ff;--you:#ff8fb5;--us:#4fd29b;--accent:#6b97ff}}
:root[data-theme="sky"] body{background-image:radial-gradient(1000px 460px at 50% -180px,rgba(80,130,255,.22),transparent)}
:root[data-theme="sky"] .title-row h1,:root[data-theme="sky"] .hero .big,:root[data-theme="sky"] .amt,:root[data-theme="sky"] .brand,:root[data-theme="sky"] .sheet h2{font-weight:700;letter-spacing:-.03em}
:root[data-theme="sky"] .greet{font-style:normal;font-weight:500}
:root[data-theme="sky"] .hero{background:linear-gradient(160deg,#2c62e0 0%,#5a8bff 100%);border:0;color:#fff;box-shadow:0 24px 44px -24px rgba(44,98,224,.7)}
:root[data-theme="sky"] .hero .kicker,:root[data-theme="sky"] .hero .lead{color:rgba(255,255,255,.82)}
:root[data-theme="sky"] .hero .big.neg{color:#ffd3d3}
:root[data-theme="sky"] .hero .meter{background:rgba(255,255,255,.28)}
:root[data-theme="sky"] .hero .meter i{background:#fff}
:root[data-theme="sky"] .hero::after{border-color:rgba(255,255,255,.3);box-shadow:0 0 0 28px rgba(255,255,255,.07),0 0 0 56px rgba(255,255,255,.04)}
:root[data-theme="sky"] .panel,:root[data-theme="sky"] .trio{border-radius:26px;border-color:transparent;box-shadow:0 14px 34px -22px rgba(40,80,180,.38)}
:root[data-theme="sky"] .btn{border-radius:999px;background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 20px -10px rgba(59,111,232,.8)}
:root[data-theme="sky"] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
:root[data-theme="sky"] .fab{background:var(--accent);color:#fff}
:root[data-theme="sky"] .seg button.on{background:var(--accent);color:#fff}
:root[data-theme="sky"] .tabs button.on{color:var(--accent);border-color:var(--accent)}
:root[data-theme="sky"] .mark{background:var(--accent);color:#fff;font-family:var(--sans)}
:root[data-theme="sky"] .cd.sel{background:var(--accent)}
:root[data-theme="sky"] .cd.today .dn{color:var(--accent)}
:root[data-theme="sky"] .msg.u{background:var(--accent)}
:root[data-theme="sky"] .chart .col.now .bar{background:var(--accent)}
/* Budget-Ringe */
.rings{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;margin:0 -4px;scroll-snap-type:x proximity}
.rtile{flex:none;width:104px;background:var(--soft);border-radius:20px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:1px;scroll-snap-align:start;text-align:center}
.rtile small{font-size:11.5px;color:var(--mute);line-height:1.3}
.rtile b{font-size:16px;margin-top:8px}
.rwrap{position:relative;width:64px;height:64px}
.rwrap .ring{width:64px;height:64px}
.rwrap .ci{position:absolute;inset:11px;width:auto;height:auto;border-radius:50%;background:none}
.rwrap .ci svg{width:22px;height:22px}
/* Vorschlags-Karten */
.hints{display:flex;flex-direction:column;gap:10px}
.hints:empty{display:none}
.suggest{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:0 14px 30px -22px rgba(40,80,180,.4);animation:rise .5s both}
.si{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);display:grid;place-items:center;font-weight:700;flex:none}
.st{flex:1;min-width:0}.st b{display:block}
.brief{margin:0;font-size:15.5px;line-height:1.65}
.msgwrap{display:flex;flex-direction:column;gap:8px}.msgwrap.u{align-items:flex-end}
.kcards{display:flex;gap:8px;flex-wrap:wrap}
.kcard{background:var(--soft);border-radius:14px;padding:10px 14px;min-width:110px}
.kcard small{display:block;color:var(--mute);font-size:11.5px}.kcard b{font-size:17px}

.cmts{display:flex;flex-direction:column;gap:8px;margin:10px 0 12px}
.cm{background:var(--soft);border-radius:14px;padding:8px 12px;max-width:88%;align-self:flex-start}
.cm.mine{align-self:flex-end;background:color-mix(in srgb,var(--accent) 16%,var(--paper))}
.cm small{display:block;color:var(--mute);font-size:11.5px}
.check{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);background:none;display:grid;place-items:center;color:var(--bg);font-size:14px;flex:none;padding:0}
.check.on{background:var(--accent);border-color:var(--accent)}
input[type=search]{-webkit-appearance:none}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.in:focus-visible{outline:none}

.withmic{display:flex;gap:8px;align-items:center}
.withmic .in{flex:1}
.mic{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:18px;flex:none}
.mic.on{background:var(--bad);border-color:var(--bad);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--bad) 22%,transparent)}}
.talk{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.talk div{background:var(--soft);border-radius:14px;padding:9px 13px;font-size:14px;color:var(--mute)}

/* Emoji */
.emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;line-height:1}
.ci.emo{font-size:20px;display:grid;place-items:center;stroke:none}
.line .ci.emo{font-size:15px}
.rwrap .ci.emo{font-size:25px}
.tabs .ti.emo{font-size:21px;width:auto;height:auto;display:block;filter:grayscale(1);opacity:.55;transition:.15s}
.tabs button.on .ti.emo{filter:none;opacity:1}
.si{font-size:19px}
.emopick{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.emopick button{width:38px;height:38px;border-radius:12px;border:1.5px solid transparent;background:var(--soft);font-size:20px;padding:0;font-family:"Apple Color Emoji","Noto Color Emoji",sans-serif}
.emopick button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--paper))}

.offline-bar{background:color-mix(in srgb,var(--warn) 20%,var(--paper));color:var(--ink);border-radius:14px;padding:9px 14px;font-size:13px;margin:10px 0 0;text-align:center}
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 8px);transform:translate(-50%,0);width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 20px -8px #0005;display:grid;place-items:center;z-index:50;opacity:0;transition:transform .15s,opacity .15s;font-size:20px;color:var(--accent)}
.ptr.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:translate(-50%,54px) rotate(360deg)}}

/* ===== Liquid Glass (optional, data-glass=1) ===== */
:root{--g-fill:color-mix(in srgb,var(--paper) 58%,transparent);--g-fill2:color-mix(in srgb,var(--paper) 76%,transparent);--g-edge:rgba(255,255,255,.65);--g-hi:rgba(255,255,255,.85);--g-shadow:rgba(30,50,110,.28)}
@media (prefers-color-scheme:dark){:root{--g-fill:color-mix(in srgb,var(--paper) 52%,transparent);--g-fill2:color-mix(in srgb,var(--paper) 72%,transparent);--g-edge:rgba(255,255,255,.14);--g-hi:rgba(255,255,255,.22);--g-shadow:rgba(0,0,0,.55)}}
:root[data-glass="1"]{background:var(--bg)}
:root[data-glass="1"] body{background:transparent!important;position:relative}
:root[data-glass="1"] body::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 32% at 12% 8%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 70%),
             radial-gradient(34% 30% at 88% 18%,color-mix(in srgb,var(--you) 30%,transparent),transparent 70%),
             radial-gradient(40% 34% at 72% 92%,color-mix(in srgb,var(--us) 30%,transparent),transparent 70%),
             radial-gradient(30% 26% at 6% 78%,color-mix(in srgb,var(--me) 24%,transparent),transparent 70%)}
:root[data-glass="1"] .panel,:root[data-glass="1"] .trio,:root[data-glass="1"] .suggest,:root[data-glass="1"] .rtile,:root[data-glass="1"] .kcard,:root[data-glass="1"] .msg.a,:root[data-glass="1"] .cm,:root[data-glass="1"] .settle{
  background:var(--g-fill)!important;border:1px solid var(--g-edge)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:inset 0 1px 0 var(--g-hi),0 22px 44px -26px var(--g-shadow)!important}
:root[data-glass="1"] .panel,:root[data-glass="1"] .trio,:root[data-glass="1"] .suggest{position:relative}
:root[data-glass="1"] .panel::before,:root[data-glass="1"] .trio::before,:root[data-glass="1"] .suggest::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 34%)}
@media (prefers-color-scheme:dark){:root[data-glass="1"] .panel::before,:root[data-glass="1"] .trio::before,:root[data-glass="1"] .suggest::before{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 34%)}}
:root[data-glass="1"] .trio>div{border-color:var(--g-edge)}
:root[data-glass="1"] .line,:root[data-glass="1"] .tx,:root[data-glass="1"] .item,:root[data-glass="1"] .note,:root[data-glass="1"] .insight{border-color:color-mix(in srgb,var(--ink) 9%,transparent)}
:root[data-glass="1"][data-theme="sky"] .hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),0 28px 50px -26px rgba(44,98,224,.8)}
:root[data-glass="1"] .hero{position:relative}
:root[data-glass="1"][data-theme="sky"] .hero::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 42%)}
:root[data-glass="1"] .top{-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);background:color-mix(in srgb,var(--bg) 55%,transparent)}
@media(min-width:721px){:root[data-glass="1"] .tabs{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--g-edge);border-radius:999px;background:var(--g-fill);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);box-shadow:inset 0 1px 0 var(--g-hi),0 14px 30px -22px var(--g-shadow)}
:root[data-glass="1"] .tabs button{border:0;border-radius:999px;margin:0;padding:8px 18px}
:root[data-glass="1"] .tabs button.on{background:var(--g-fill2);color:var(--ink);box-shadow:inset 0 1px 0 var(--g-hi),0 4px 12px -6px var(--g-shadow)}
:root[data-glass="1"][data-theme="sky"] .tabs button.on{color:var(--accent)}}
@media(max-width:720px){:root[data-glass="1"] .tabs{left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 12px);border:1px solid var(--g-edge);border-radius:30px;padding:6px 6px;background:var(--g-fill);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:inset 0 1px 0 var(--g-hi),0 20px 40px -18px var(--g-shadow)}
:root[data-glass="1"] .tabs button.on{background:var(--g-fill2);border-radius:22px;box-shadow:inset 0 1px 0 var(--g-hi)}
:root[data-glass="1"] .fab{bottom:calc(env(safe-area-inset-bottom) + 92px)}
:root[data-glass="1"] .shell{padding-bottom:130px}}
:root[data-glass="1"] .fab{background:color-mix(in srgb,var(--accent) 82%,transparent)!important;-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 16px 34px -12px color-mix(in srgb,var(--accent) 80%,black)!important}
:root[data-glass="1"] .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -12px rgba(0,0,0,.5)}
:root[data-glass="1"] .btn.ghost{background:var(--g-fill);border-color:var(--g-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--g-hi)}
:root[data-glass="1"] .in,:root[data-glass="1"] select.in{background:color-mix(in srgb,var(--paper) 55%,transparent);border-color:var(--g-edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
:root[data-glass="1"] .seg{background:var(--g-fill);border-color:var(--g-edge);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root[data-glass="1"] .seg button.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px -6px rgba(0,0,0,.4)}
:root[data-glass="1"] .sheet-bg{background:rgba(10,20,50,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-glass="1"] .sheet{background:var(--g-fill2)!important;border:1px solid var(--g-edge);border-bottom:0;-webkit-backdrop-filter:blur(40px) saturate(1.8);backdrop-filter:blur(40px) saturate(1.8);box-shadow:inset 0 1px 0 var(--g-hi),0 -20px 60px -20px var(--g-shadow)}
@media(min-width:721px){:root[data-glass="1"] .sheet{border-bottom:1px solid var(--g-edge)}}
:root[data-glass="1"] .toast{background:color-mix(in srgb,var(--ink) 82%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root[data-glass="1"] .cd.sel{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,black)}
:root[data-glass="1"] .icon-btn,:root[data-glass="1"] .mnav button,:root[data-glass="1"] .mic,:root[data-glass="1"] .emopick button{background:var(--g-fill);border-color:var(--g-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--g-hi)}
:root[data-glass="1"] .emopick button.on{background:color-mix(in srgb,var(--accent) 22%,var(--g-fill))}
:root[data-glass="1"] .offline-bar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-glass="1"] .panel,:root[data-glass="1"] .trio,:root[data-glass="1"] .suggest,:root[data-glass="1"] .rtile,:root[data-glass="1"] .kcard,:root[data-glass="1"] .sheet{background:var(--paper)!important}}
@media (prefers-reduced-transparency:reduce){:root[data-glass="1"] .panel,:root[data-glass="1"] .trio,:root[data-glass="1"] .suggest,:root[data-glass="1"] .rtile,:root[data-glass="1"] .kcard,:root[data-glass="1"] .sheet,:root[data-glass="1"] .tabs,:root[data-glass="1"] .top{background:var(--paper)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

.glass-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-8px 0 20px;cursor:pointer}
.glass-switch small{display:block;color:var(--mute);font-size:12.5px;font-weight:400}
.glass-switch input{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:15px;background:var(--soft);border:1px solid var(--line);position:relative;flex:none;transition:.2s;cursor:pointer}
.glass-switch input::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:.2s}
.glass-switch input:checked{background:var(--accent);border-color:var(--accent)}
.glass-switch input:checked::after{transform:translateX(20px)}