/* «Дела» — one stylesheet for the whole app: Сегодня · Завтра · Неделя · Цели, the card of a to-do, a goal, settings.
   Light by default; html.dark is the dark theme (each member picks theirs in Настройки). */
@font-face{font-family:"Golos Text";font-weight:400;font-display:swap;src:url(/fonts/golos-text-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-weight:500;font-display:swap;src:url(/fonts/golos-text-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-weight:600 800;font-display:swap;src:url(/fonts/golos-text-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-weight:400;font-display:swap;src:url(/fonts/golos-text-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Golos Text";font-weight:500;font-display:swap;src:url(/fonts/golos-text-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Golos Text";font-weight:600 800;font-display:swap;src:url(/fonts/golos-text-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

:root{--card:#E8E1D0;--card2:#EFE9DC;--ink:#121212;--num:#5C636E;--muted:#6B717A;--chip:#F1F1F3;--okf:#CBDDBE;--okb:#E3EEDC;--ok:#2F6B3A;--delf:#F3D9D2;--del:#A63A28;--work:#B8641E;--workf:#F8E3CC;--g:#5FAE6E;--o:#EE9A4B;
  --bg:#fff;--col:#F8F6F1;--line:#EFECE4;--line2:#F0EEE9;--soft:#F7F5F0;--pill:#fff;--inkb:#3B3F45;--seg-off:#5C626B;--bar:#EEEDEA;--onink:#fff;--glass:rgb(255 255 255 / .85);
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);color-scheme:light}
html.dark{--card:#2B2722;--card2:#25221E;--ink:#F2EFEA;--num:#A9A39A;--muted:#9A958D;--chip:#2A2826;--okf:#24432B;--okb:#1C3221;--ok:#7CCB8A;--delf:#4A2620;--del:#F08A76;--work:#E8A35E;--workf:#42301C;
  --bg:#100F0E;--col:#1A1917;--line:#2D2B28;--line2:#2D2B28;--soft:#1C1B19;--pill:#3B3834;--inkb:#DCD7CF;--seg-off:#A39E96;--bar:#1D1C1A;--onink:#100F0E;--glass:rgb(40 38 36 / .9);color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);overscroll-behavior:none}
body{position:fixed;inset:0;overflow:hidden}
body{color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Golos Text",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font-family:inherit;color:inherit}
a{color:inherit}
input,textarea{font-family:inherit;color:var(--ink)}
.scroll>*,.sbody>*,.glist>*,.wk>*,.list>*,.steps>*,.hist>*,.sscroll>*{flex-shrink:0}

.app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);overflow:hidden;overflow:clip;max-width:560px;margin:0 auto}
.boot{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px}

/* — header — */
.hd{padding:calc(var(--st) + 10px) 14px 6px 20px;display:flex;align-items:center;gap:10px}
.hd .t{flex:1;position:relative;height:48px;min-width:0}
.ttl{position:absolute;left:0;right:0;top:0;will-change:transform,opacity;white-space:nowrap}
.hd small{display:block;font-size:13px;color:var(--muted);font-weight:500}
.hd h1{margin:1px 0 0;font-size:26px;line-height:30px;font-weight:600;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis}
.rings circle.v{transition:stroke-dashoffset 800ms cubic-bezier(.34,1.3,.64,1)}
.menu{position:relative;width:42px;height:42px;border-radius:50%;background:var(--chip);color:var(--inkb);display:flex;align-items:center;justify-content:center;border:0;flex:none;cursor:pointer;transition:transform 160ms}
.menu:active{transform:scale(.92)}
.menu .dot{position:absolute;right:9px;top:9px;width:8px;height:8px;border-radius:50%;background:#E2483C;border:2px solid var(--chip)}

/* — tabs — */
.seg{display:flex;margin:4px 12px 8px;background:var(--chip);border-radius:12px;padding:3px;position:relative}
.seg .pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);border-radius:9px;background:var(--pill);box-shadow:0 1px 3px rgb(0 0 0 / .08);will-change:transform}
.seg .tb{position:relative;z-index:1;flex:1;border:0;background:transparent;font-size:14px;font-weight:500;color:var(--seg-off);height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:color 300ms;padding:0}
.seg .tb.on{color:var(--ink)}
.seg .bd{min-width:18px;height:18px;border-radius:9px;background:#E2E2E6;color:#121212;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
html.dark .seg .bd{background:#3B3834;color:#E6E1DA}
.seg .bd.bump{animation:bump 500ms cubic-bezier(.34,1.56,.64,1);background:var(--ink);color:var(--onink)}
@keyframes bump{40%{transform:scale(1.5)}}

/* — pages — */
.pages{flex:1;min-height:0;position:relative;touch-action:pan-y;overflow:hidden;overflow:clip;-webkit-user-select:none;user-select:none}
.page{position:absolute;inset:0;display:flex;flex-direction:column;will-change:transform,opacity;transform-origin:50% 40%}
.cols{flex:1;min-height:0;display:flex;gap:8px;padding:0 10px}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;background:var(--col);border-radius:20px;overflow:hidden}
.ch{display:flex;align-items:center;gap:6px;padding:11px 10px 7px 11px}
.av{width:22px;height:22px;border-radius:50%;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;background:#8E96A3}
.av.s{width:16px;height:16px;font-size:8px}
.ch h2{margin:0;font-size:15px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .cnt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mini circle.v{transition:stroke-dashoffset 700ms cubic-bezier(.34,1.3,.64,1)}
.mini circle.bg{stroke:#E7E3DA}
html.dark .mini circle.bg{stroke:#34312D}
.list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 6px 14px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.list::-webkit-scrollbar{display:none}

/* — a to-do card and its swipe — */
.row{position:relative;border-radius:14px;max-height:240px}
.under{position:absolute;inset:0;border-radius:14px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:12px;font-weight:600}
.under .gg{color:var(--ok);display:flex;align-items:center;gap:4px}
.under .dd{color:var(--del);display:flex;align-items:center;gap:4px}
.card{position:relative;display:flex;align-items:flex-start;gap:7px;background:var(--card);border-radius:14px;padding:11px 9px 10px 10px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;overflow:hidden}
.card.his{background:var(--card2)}
.card.still{cursor:pointer}
.fill{position:absolute;inset:0;background:var(--okf);clip-path:inset(0 100% 0 0)}
.num{position:relative;width:17px;flex:none;perspective:300px;font-size:12px;font-weight:600;color:var(--num);font-variant-numeric:tabular-nums;margin-top:2px}
.flip{display:grid;transform-style:preserve-3d}
.flip>span{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;height:16px}
.flip .b{transform:rotateX(180deg);color:var(--ok)}
.tx{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.txt{position:relative;font-size:15px;line-height:19px;font-weight:500;letter-spacing:-.01em;max-width:100%;overflow-wrap:anywhere}
.wd{display:inline-block;margin-right:.26em;white-space:nowrap}
.wd:last-child{margin-right:0}
.chr{display:inline-block;text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:2px}
.meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ic{display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:14px;color:#4C525A;background:rgb(255 255 255 / .6);border-radius:6px;padding:2px 5px;font-weight:500}
html.dark .ic{color:#CFCAC2;background:rgb(255 255 255 / .07)}
.ic.from{color:#B8346F}
html.dark .ic.from{color:#F0A0C2}
.ic.late{color:var(--del)}
.ic.work{color:var(--work);background:var(--workf)}
.ic.work i{width:6px;height:6px;border-radius:50%;background:var(--work);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.row.done .fill{clip-path:inset(0 0 0 0);transition:clip-path 520ms cubic-bezier(.65,0,.35,1)}
.row.done .flip{transform:rotateX(180deg);transition:transform 560ms cubic-bezier(.34,1.56,.64,1) 160ms}
.row.done .chr{color:#46604A;text-decoration-color:var(--ok);animation:hop 460ms cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 24ms + 180ms) both;transition:color 200ms calc(var(--i) * 24ms + 180ms),text-decoration-color 180ms calc(var(--i) * 24ms + 300ms)}
html.dark .row.done .chr{color:#A6D3AD}
@keyframes hop{0%{transform:none}40%{transform:translateY(-6px) scale(1.12)}100%{transform:none}}
.row.gone{animation:fold 360ms cubic-bezier(.4,0,.2,1) forwards}
.row.enter{animation:drop 640ms cubic-bezier(.34,1.56,.64,1)}
@keyframes fold{to{max-height:0;opacity:0;margin-bottom:-6px;transform:scale(.96)}}
@keyframes drop{0%{opacity:0;transform:translateY(-24px) scale(.9)}60%{opacity:1}100%{transform:none}}
.donehd{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ok);letter-spacing:.05em;padding:8px 4px 0}
.donehd::after{content:"";flex:1;height:1px;background:#D7E5CF}
html.dark .donehd::after{background:#2B4230}
.dn{display:flex;align-items:flex-start;gap:7px;background:var(--okb);border-radius:12px;padding:8px 9px;cursor:pointer;border:0;font:inherit;text-align:left;color:inherit;width:100%}
.dn.landed{animation:land 700ms cubic-bezier(.34,1.56,.64,1)}
@keyframes land{0%{transform:translateY(-40px) scale(.9);opacity:0;background:var(--okf)}100%{transform:none;opacity:1}}
.dn .ck{width:17px;height:17px;border-radius:50%;background:var(--ok);color:var(--onink);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.dn .w{flex:1;min-width:0}
.dn .w s{display:block;font-size:13px;line-height:17px;color:#46604A;text-decoration-thickness:1.5px;overflow-wrap:anywhere}
html.dark .dn .w s{color:#A6D3AD}
.dn .w small{font-size:11px;color:var(--ok);font-weight:600}
.clear{margin:6px 2px 2px;padding:14px 8px;border-radius:14px;border:1.5px dashed #CFE0C6;text-align:center;font-size:13px;font-weight:600;color:var(--ok);animation:land 600ms cubic-bezier(.34,1.56,.64,1)}
html.dark .clear{border-color:#2B4230}
.soft{color:var(--muted)!important;border-color:#E2DED4!important}
html.dark .soft{border-color:#3A3733!important}

/* — week — */
.wk{flex:1;min-height:0;overflow-y:auto;padding:0 12px 14px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none}
.wk::-webkit-scrollbar{display:none}
.wdh{display:flex;align-items:baseline;gap:8px;padding:10px 6px 2px;font-size:15px;font-weight:600}
.wdh span{font-size:12px;color:var(--muted);font-weight:500}
.wi{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:10px 12px;border:0;font:inherit;text-align:left;width:100%;cursor:pointer}
.wi.her{background:var(--card2)}
.wi b{flex:1;font-size:15px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.wi span.m2{font-size:12px;color:var(--muted);white-space:nowrap}
.wi.done b{text-decoration:line-through;color:var(--muted)}
.free{padding:9px 12px;border-radius:14px;border:1.5px dashed #E2DED4;font-size:13px;color:var(--muted)}
html.dark .free{border-color:#3A3733}

/* — confetti, banner, toast, ghost — */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.confetti i{position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;animation:fall 2700ms cubic-bezier(.25,.6,.4,1) both}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),110vh) rotate(var(--r))}}
.banner{position:absolute;left:16px;right:16px;top:42%;z-index:41;text-align:center;font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ok);text-shadow:0 2px 0 var(--bg),0 0 24px var(--bg);pointer-events:none}
.banner.white{color:#fff;text-shadow:0 2px 12px rgb(0 0 0 / .2);font-size:30px}
.banner span{display:inline-block;white-space:pre;animation:bRise 640ms cubic-bezier(.34,1.56,.64,1) both,bOut 420ms ease-in 2500ms forwards}
@keyframes bRise{from{opacity:0;transform:translateY(26px) scale(.6) rotate(-10deg)}}
@keyframes bOut{to{opacity:0;transform:translateY(-24px)}}
.toast{position:absolute;left:12px;right:12px;top:calc(var(--st) + 8px);z-index:60;background:rgb(250 250 250 / .97);border-radius:20px;padding:11px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 34px rgb(0 0 0 / .16);animation:bn 520ms cubic-bezier(.34,1.56,.64,1)}
html.dark .toast{background:rgb(38 36 34 / .97);box-shadow:0 12px 34px rgb(0 0 0 / .5)}
@keyframes bn{from{transform:translateY(-140%)}}
.toast .ti{width:34px;height:34px;border-radius:10px;background:var(--okf);display:flex;align-items:center;justify-content:center;color:var(--ok);flex:none}
.toast .ti.warn{background:var(--delf);color:var(--del)}
.toast .tw{flex:1;min-width:0}
.toast b{display:block;font-size:14px}
.toast span{font-size:13px;color:var(--inkb);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast .undo{border:0;background:var(--chip);border-radius:999px;height:34px;padding:0 14px;font-size:14px;font-weight:600;cursor:pointer;flex:none}
.flyghost{position:absolute;z-index:30;left:60px;bottom:calc(var(--sb) + 40px);background:var(--ink);color:var(--onink);font-size:13px;font-weight:600;border-radius:999px;padding:8px 12px;white-space:nowrap;pointer-events:none;animation:fly 760ms cubic-bezier(.5,0,.3,1) forwards;max-width:70%;overflow:hidden;text-overflow:ellipsis}
@keyframes fly{0%{transform:translate(0,0) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(90px,-72vh) scale(.3);opacity:0}}

/* — the quick line — */
.foot{padding:8px 10px calc(var(--sb) + 12px);transition:transform 420ms cubic-bezier(.32,.72,0,1),opacity 300ms}
.foot.away{transform:translateY(110%);opacity:0;pointer-events:none;position:absolute;left:0;right:0;bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 4px 7px}
.pc{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;border-radius:999px;padding:5px 9px;background:#F1EEE6;color:#3B3F45;animation:chip 380ms cubic-bezier(.34,1.56,.64,1) both}
.pc.date{background:#E3EEF9;color:#1B4F86}
.pc.place{background:#FCEBDB;color:#8C541F}
.pc.who{background:#F9E1EA;color:#9A2B5C}
.pc.time{background:#E6F1E2;color:#2F6B3A}
html.dark .pc{background:#2A2826;color:#DCD7CF}
html.dark .pc.date{background:#1B2D41;color:#9EC6EF}
html.dark .pc.place{background:#3C2B1A;color:#EAB27C}
html.dark .pc.who{background:#3D1E2C;color:#F0A0C2}
html.dark .pc.time{background:#1D3221;color:#9ED5A8}
@keyframes chip{from{opacity:0;transform:translateY(8px) scale(.8)}}
.bar{background:var(--bar);border-radius:22px;display:flex;align-items:center;gap:6px;padding:6px;min-height:58px}
.to{position:relative;display:flex;background:var(--pill);border-radius:15px;padding:3px;flex:none}
html.dark .to{background:#2A2826}
.to .knob{position:absolute;top:3px;bottom:3px;left:3px;width:36px;border-radius:12px;transition:transform 360ms cubic-bezier(.34,1.56,.64,1),background 300ms}
.to button{position:relative;width:36px;height:38px;border:0;background:transparent;border-radius:12px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:color 200ms}
.to button.on{color:#fff}
.bar input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink);padding-left:4px}
.bar input::placeholder{color:#8E939A}
html.dark .bar input::placeholder{color:#7D7A75}
.mic{width:42px;height:42px;border-radius:50%;border:0;background:var(--pill);color:var(--inkb);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
html.dark .mic{background:#2A2826}
.mic.on{background:#E2483C;color:#fff;animation:pulse 1.2s ease-in-out infinite}
.plus{width:46px;height:46px;border-radius:50%;border:0;background:#8E96A3;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background 200ms,transform 160ms}
html.dark .plus{background:#55606E}
.plus.ready{background:var(--ink);color:var(--onink)}
.plus:active{transform:scale(.9)}

/* — the card of a to-do (sheet) — */
.scrim{position:absolute;inset:0;z-index:20;background:rgb(20 18 14 / .32);border:0;animation:fade 300ms ease backwards;cursor:pointer;padding:0}
html.dark .scrim{background:rgb(0 0 0 / .55)}
@keyframes fade{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;top:calc(var(--st) + 14px);z-index:21;background:var(--bg);border-radius:26px 26px 0 0;display:flex;flex-direction:column;box-shadow:0 -10px 40px rgb(0 0 0 / .18);animation:up 560ms cubic-bezier(.32,.72,0,1) backwards;will-change:transform}
html.dark .sheet{background:#1A1917;box-shadow:0 -10px 40px rgb(0 0 0 / .6)}
@keyframes up{from{transform:translateY(100%)}}
.sgrab{width:38px;height:5px;border-radius:3px;background:#DDD9D0;margin:8px auto 0;flex:none}
html.dark .sgrab{background:#3A3733}
.shead{touch-action:none;cursor:grab;padding-bottom:2px}
.stop{display:flex;align-items:center;gap:8px;padding:8px 14px 4px}
.x{width:38px;height:38px;border-radius:50%;border:0;background:var(--chip);display:flex;align-items:center;justify-content:center;color:var(--inkb);cursor:pointer;flex:none}
.status{margin-left:auto;border:0;font-size:13px;font-weight:600;border-radius:999px;padding:0 14px;height:36px;display:flex;align-items:center;gap:6px;cursor:pointer;background:var(--chip);color:var(--inkb);transition:background 250ms,color 250ms}
.status.work{background:var(--workf);color:var(--work)}
.status.work i{width:7px;height:7px;border-radius:50%;background:var(--work);animation:pulse 1.4s ease-in-out infinite}
.sbody{flex:1;min-height:0;overflow-y:auto;padding:6px 20px 18px;display:flex;flex-direction:column;gap:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sbody::-webkit-scrollbar{display:none}
.sbody h2{margin:0;font-size:26px;line-height:31px;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
.sbody textarea.h2{font-size:26px;line-height:31px;font-weight:600;letter-spacing:-.02em;border:0;outline:0;background:transparent;resize:none;padding:0;width:100%;min-height:31px}
.who2{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.info{background:var(--col);border-radius:18px;overflow:hidden}
html.dark .info{background:#22201E}
.ir{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);font-size:15px}
.ir:first-child{border-top:0}
.ir svg{flex:none;color:var(--muted)}
.ir .k{flex:1;min-width:0;overflow-wrap:anywhere}
.ir .v{font-size:14px;color:var(--muted);white-space:nowrap}
.ir button.v{border:0;background:var(--chip);border-radius:999px;padding:6px 10px;font-size:13px;cursor:pointer}
.map{position:relative;height:110px;background:#EDE7D8;overflow:hidden}
html.dark .map{background:#2B2722}
.map svg.roads{position:absolute;inset:0}
html.dark .map svg.roads{opacity:.25}
.pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);animation:pinDrop 700ms cubic-bezier(.34,1.56,.64,1) 200ms both}
@keyframes pinDrop{from{transform:translate(-50%,-260%);opacity:0}}
.pin i{position:absolute;left:50%;bottom:-4px;width:14px;height:5px;margin-left:-7px;border-radius:50%;background:rgb(0 0 0 / .18)}
.ya{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:12px 14px;background:var(--bg);border-top:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
html.dark .ya{background:#1A1917}
.ya .yb{width:22px;height:22px;border-radius:6px;background:#FC3F1D;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.note{background:#FBF6E9;border-radius:16px;padding:12px 14px;font-size:14px;line-height:20px;color:#3B3F45}
html.dark .note{background:#2A2519;color:#DCD7CF}
.note b{display:block;font-size:11px;letter-spacing:.06em;color:#8A6A3B;margin-bottom:3px}
html.dark .note b{color:#CFA86C}
.note textarea{display:block;width:100%;border:0;outline:0;background:transparent;resize:none;font-size:14px;line-height:20px;color:inherit;padding:0;min-height:40px}
.cmh{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.thread{display:flex;flex-direction:column;gap:8px}
.msg{display:flex;align-items:flex-end;gap:6px;max-width:86%}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.bub{background:#F1EEE6;border-radius:16px 16px 16px 4px;padding:8px 12px;font-size:14px;line-height:19px;overflow-wrap:anywhere}
html.dark .bub{background:#2A2826}
.msg.mine .bub{background:#E3EEF9;border-radius:16px 16px 4px 16px}
html.dark .msg.mine .bub{background:#1B2D41}
.bub small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.msg.new{animation:msgIn 420ms cubic-bezier(.34,1.56,.64,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.9)}}
.sys{align-self:center;font-size:12px;color:var(--muted);background:#F6F4EF;border-radius:999px;padding:4px 10px}
html.dark .sys{background:#22201E}
.cin{display:flex;align-items:center;gap:8px;background:var(--chip);border-radius:18px;padding:5px 5px 5px 14px}
.cin input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px}
.cin button{width:36px;height:36px;border-radius:50%;border:0;background:#1B63A6;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.sact{display:flex;gap:8px;padding:10px 14px calc(var(--sb) + 14px);border-top:1px solid var(--line2);background:var(--bg)}
html.dark .sact{background:#1A1917}
.sact button{flex:1;border:0;border-radius:16px;height:52px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.sact .later{background:var(--chip);color:var(--inkb);flex:.8}
.sact .doneb{background:var(--ok);color:#fff}
html.dark .sact .doneb{color:#0F1A11}
.linkbtn{align-self:center;border:0;background:transparent;color:var(--del);font-size:14px;font-weight:600;padding:10px;cursor:pointer}

/* — goals — */
.gscroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:calc(var(--sb) + 20px)}
.gscroll::-webkit-scrollbar{display:none}
.gtop{display:flex;align-items:center;gap:16px;padding:6px 20px 8px}
.gtop svg circle.v{transition:stroke-dashoffset 1000ms cubic-bezier(.34,1.3,.64,1)}
.leg{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.leg div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--inkb)}
.leg i{width:10px;height:10px;border-radius:50%;flex:none}
.leg span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg b{font-variant-numeric:tabular-nums;font-weight:600}
.ghint{padding:0 20px 6px;font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px}
.ghint button{border:0;background:var(--chip);border-radius:999px;height:36px;padding:0 14px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--inkb)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:4px 14px 20px}
.g{background:var(--soft);border-radius:22px;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.g.won{background:#FBF4E2}
html.dark .g.won{background:#2A2519}
.tank{width:96px;height:96px;border-radius:50%;background:#fff;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #ECE7DC;cursor:pointer;border:0;padding:0;transition:transform 200ms cubic-bezier(.34,1.56,.64,1)}
html.dark .tank{background:#0E0D0C;box-shadow:inset 0 0 0 2px #2D2B28}
.tank:active{transform:scale(.94)}
.tank.hide .liquid{opacity:0}
.liquid{position:absolute;left:0;right:0;bottom:0;transition:height 1100ms cubic-bezier(.34,1.3,.64,1)}
.liquid svg{position:absolute;left:0;top:-9px;width:192px;height:11px;animation:wave 2.6s linear infinite}
.liquid svg.w2{opacity:.45;animation-duration:3.8s;top:-11px}
@keyframes wave{to{transform:translateX(-96px)}}
.liquid .bb{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:rgb(255 255 255 / .55);animation:bub 2.4s ease-in infinite}
@keyframes bub{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-60px);opacity:0}}
.pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#1B1B1B;text-shadow:0 1px 0 rgb(255 255 255 / .6)}
html.dark .pct{color:#F2EFEA;text-shadow:0 1px 2px rgb(0 0 0 / .5)}
.pct small{font-size:10px;font-weight:600;letter-spacing:.04em;color:#3B3F45}
html.dark .pct small{color:#CFCAC2}
.gbadge{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;background:#D9A441;color:#fff;display:flex;align-items:center;justify-content:center;animation:pop 520ms cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.g .name{font-size:15px;font-weight:600;text-align:center;line-height:19px;overflow-wrap:anywhere}
.g .next{font-size:12px;color:var(--inkb);text-align:center;line-height:16px}
.g .gm{font-size:12px;color:var(--muted);text-align:center}
.newg{border:2px dashed #DDD8CC;border-radius:22px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500;color:var(--muted);background:transparent;cursor:pointer}
html.dark .newg{border-color:#3A3733}
.newg span{width:48px;height:48px;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center}
.gempty{padding:30px 24px 10px;text-align:center;color:var(--muted);font-size:15px;line-height:21px}
.flood{position:absolute;inset:0;z-index:30;transition:clip-path 640ms cubic-bezier(.7,0,.25,1);pointer-events:none;overflow:hidden}
.flood .fb{position:absolute;width:10px;height:10px;border-radius:50%;background:rgb(255 255 255 / .35);animation:fb 900ms ease-out both}
@keyframes fb{from{transform:translateY(60px) scale(.4);opacity:0}50%{opacity:1}to{transform:translateY(-160px) scale(1);opacity:0}}
.gd{position:absolute;inset:0;z-index:31;display:flex;flex-direction:column;overflow:hidden}
.gd .sea{position:absolute;left:0;right:0;bottom:0;transition:height 1000ms cubic-bezier(.34,1.25,.64,1)}
.gd .sea svg{position:absolute;left:0;top:-18px;width:1200px;height:20px;animation:sea 3.4s linear infinite}
.gd .sea svg.w2{opacity:.4;top:-22px;animation-duration:5s}
@keyframes sea{to{transform:translateX(-600px)}}
.gd .sea i{position:absolute;bottom:0;width:8px;height:8px;border-radius:50%;background:rgb(255 255 255 / .45);animation:rise 4s ease-in infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-70vh);opacity:0}}
.gd .content{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;animation:cin 520ms cubic-bezier(.22,.8,.24,1) 120ms both;color:#121212}
.gd.leaving .content{animation:cout 260ms ease-in forwards}
@keyframes cin{from{opacity:0;transform:translateY(20px)}}
@keyframes cout{to{opacity:0;transform:translateY(10px)}}
.gnav{display:flex;align-items:center;gap:10px;padding:calc(var(--st) + 10px) 14px 0}
.round{width:42px;height:42px;border-radius:50%;border:0;background:rgb(255 255 255 / .85);color:#121212;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgb(0 0 0 / .08);flex:none}
.gnav .sp{flex:1}
.ghead{padding:14px 22px 10px}
.ghead .big{font-size:64px;line-height:64px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ghead .big small{font-size:22px;letter-spacing:0;font-weight:600}
.ghead h2{margin:6px 0 8px;font-size:26px;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
.gchips{display:flex;flex-wrap:wrap;gap:6px}
.gchips span{font-size:13px;font-weight:500;background:rgb(255 255 255 / .8);border-radius:999px;padding:5px 10px;color:#2A2D31}
.glist{flex:1;min-height:0;overflow-y:auto;padding:8px 14px calc(var(--sb) + 30px);display:flex;flex-direction:column;gap:6px;scrollbar-width:none}
.glist::-webkit-scrollbar{display:none}
.st{display:flex;align-items:center;gap:8px;background:rgb(255 255 255 / .9);border-radius:16px;padding:4px 6px 4px 4px;box-shadow:0 2px 12px rgb(0 0 0 / .06);animation:float 520ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes float{from{opacity:0;transform:translateY(24px)}}
.st.d{background:rgb(255 255 255 / .62)}
.st .ck{width:42px;height:42px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.st .ck span{width:24px;height:24px;border-radius:8px;border:2px solid #C9C2B2;display:flex;align-items:center;justify-content:center;color:#fff;transition:all 220ms}
.st.d .ck span{animation:pop 460ms cubic-bezier(.34,1.56,.64,1)}
.st .t{flex:1;font-size:15px;line-height:20px;padding:8px 0;overflow-wrap:anywhere}
.st.d .t{color:#4F555C;text-decoration:line-through;text-decoration-thickness:1.5px}
.st .w{width:20px;height:20px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.st .del{width:30px;height:30px;border:0;background:transparent;color:#9A9EA5;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.addst2{display:flex;gap:6px;margin-top:4px}
.addst2 input{flex:1;min-width:0;border:0;border-radius:14px;padding:0 14px;min-height:46px;font-size:16px;outline:0;background:rgb(255 255 255 / .8);color:#121212}
.addst2 button{border:0;background:#121212;color:#fff;border-radius:14px;padding:0 16px;font-size:20px;font-weight:600;cursor:pointer}
.cnt2{display:flex;gap:8px;margin:10px 0}
.bigplus{flex:1;border:0;border-radius:22px;height:72px;background:rgb(255 255 255 / .9);font-size:22px;font-weight:700;cursor:pointer;box-shadow:0 4px 18px rgb(0 0 0 / .08);transition:transform 140ms}
.bigplus.sm{flex:none;width:72px;font-size:22px;color:#6B717A}
.bigplus:active{transform:scale(.96)}
.timeinfo{margin:10px 0;background:rgb(255 255 255 / .88);border-radius:18px;padding:16px;font-size:15px;line-height:22px}
.gdel{align-self:center;margin-top:10px;border:0;background:rgb(255 255 255 / .7);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;color:#A63A28;cursor:pointer}

/* — full screens: new goal, settings, the phone set-up — */
.screen{position:absolute;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;animation:slideIn 460ms cubic-bezier(.32,.72,0,1) both}
.screen.out{animation:slideOut 360ms cubic-bezier(.4,0,1,1) both}
@keyframes slideIn{from{transform:translateX(100%)}}
@keyframes slideOut{to{transform:translateX(100%)}}
.snav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--st) + 6px) 8px 0;min-height:52px}
.snav button{border:0;background:transparent;font-size:16px;color:var(--inkb);min-height:44px;display:flex;align-items:center;gap:2px;padding:0 10px;cursor:pointer}
.snav b{font-size:17px}
.snav span{width:80px}
.sscroll{flex:1;min-height:0;overflow-y:auto;padding:4px 16px calc(var(--sb) + 24px);display:flex;flex-direction:column;gap:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sscroll::-webkit-scrollbar{display:none}
.pv{display:flex;align-items:center;gap:16px;background:var(--col);border-radius:22px;padding:14px}
.pv .tank{width:84px;height:84px;flex:none;cursor:default}
.pv .tank .liquid svg{width:168px;top:-8px;height:10px;animation:wave2 2.4s linear infinite}
@keyframes wave2{to{transform:translateX(-84px)}}
.pv .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pv .t b{font-size:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv .t span{font-size:13px;color:var(--muted)}
.f{display:flex;flex-direction:column;gap:8px}
.lb{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);padding-left:4px}
.inp{border:1.5px solid #E6E2D8;border-radius:16px;padding:0 14px;min-height:52px;font-size:17px;outline:0;color:var(--ink);background:var(--bg)}
html.dark .inp{border-color:#3A3733}
.inp:focus{border-color:var(--ink)}
.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ty{border:1.5px solid #E6E2D8;background:var(--bg);border-radius:16px;padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--inkb);cursor:pointer;transition:border-color 200ms,background 200ms,transform 200ms}
html.dark .ty{border-color:#3A3733}
.ty small{font-weight:400;font-size:11px;color:var(--muted);text-align:center;line-height:14px}
.ty.on{border-color:var(--ink);background:var(--col);transform:translateY(-2px)}
.steps{display:flex;flex-direction:column;gap:6px}
.sr{display:flex;align-items:center;gap:8px;background:var(--col);border-radius:14px;padding:0 6px 0 12px;min-height:46px;font-size:15px;animation:in 360ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.sr i{width:18px;height:18px;border-radius:6px;border:2px solid #C9C2B2;flex:none}
.sr span{flex:1;overflow-wrap:anywhere}
.sr button{width:34px;height:34px;border:0;background:transparent;color:#9A9EA5;cursor:pointer;display:flex;align-items:center;justify-content:center}
.addst{display:flex;gap:6px}
.addst input{flex:1;min-width:0;border:1.5px dashed #DDD8CC;border-radius:14px;padding:0 12px;min-height:46px;font-size:16px;outline:0;background:transparent}
html.dark .addst input{border-color:#3A3733}
.addst button{border:0;background:var(--ink);color:var(--onink);border-radius:14px;padding:0 16px;font-size:18px;font-weight:600;cursor:pointer}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:44px;height:44px;border-radius:14px;border:0;background:var(--chip);font-size:20px;cursor:pointer}
.stepper b{font-size:26px;min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.stepper input{width:90px;text-align:center;font-size:24px;font-weight:700;border:0;border-bottom:2px solid var(--line);background:transparent;outline:0}
.stepper span{font-size:14px;color:var(--muted)}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.chiprow button{border:0;background:var(--chip);border-radius:999px;min-height:38px;padding:0 14px;font-size:14px;color:var(--inkb);cursor:pointer;transition:background 200ms,color 200ms}
.chiprow button.on{background:var(--ink);color:var(--onink)}
.chiprow input[type=date]{border:0;background:var(--chip);border-radius:999px;min-height:38px;padding:0 12px;font-size:14px}
.whoseg{display:flex;gap:4px;background:var(--chip);border-radius:12px;padding:3px}
.whoseg button{flex:1;border:0;background:transparent;font-size:14px;font-weight:500;color:var(--seg-off);height:38px;border-radius:9px;cursor:pointer}
.whoseg button.on{background:var(--pill);color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0 / .08)}
.swr{display:flex;gap:10px;flex-wrap:wrap}
.swr button{width:40px;height:40px;border-radius:50%;border:3px solid var(--bg);cursor:pointer;box-shadow:0 0 0 1.5px #E6E2D8;transition:transform 250ms cubic-bezier(.34,1.56,.64,1)}
.swr button.on{box-shadow:0 0 0 2.5px var(--ink);transform:scale(1.12)}
.cta{padding:10px 16px calc(var(--sb) + 16px);border-top:1px solid var(--line2)}
.cta button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:18px;height:56px;font-size:17px;font-weight:600;color:#fff;cursor:pointer;transition:background 300ms,opacity 200ms}
.cta button[disabled]{opacity:.5}
.err{font-size:13px;color:var(--del);padding:0 4px}

/* settings */
.set{background:#F4F3EF}
html.dark .set{background:#000}
.set .sscroll{gap:6px;padding-top:0}
.set h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.02em;padding:4px 6px 4px}
.slb{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);padding:14px 6px 4px}
.box{background:#fff;border-radius:18px;overflow:hidden}
html.dark .box{background:#1C1C1E}
.srow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid #F0EEE9;min-height:54px}
html.dark .srow{border-color:#2C2C2E}
.srow:first-child{border-top:0}
.srow .sic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.srow .t{flex:1;min-width:0;font-size:15px;line-height:20px}
.srow .t small{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.sw{position:relative;width:51px;height:31px;border-radius:16px;border:0;background:#E3E2DE;cursor:pointer;flex:none;transition:background 260ms;padding:0}
html.dark .sw{background:#39393D}
.sw i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgb(0 0 0 / .2);transition:transform 380ms cubic-bezier(.34,1.56,.64,1)}
.sw.on,html.dark .sw.on{background:#5FAE6E}
.sw.on i{transform:translateX(20px)}
.sseg{display:flex;gap:3px;background:#F1F1F3;border-radius:11px;padding:3px;margin:12px 14px}
html.dark .sseg{background:#2C2C2E}
.sseg button{flex:1;border:0;background:transparent;font-size:13px;font-weight:500;color:#5C626B;height:34px;border-radius:8px;cursor:pointer;transition:background 200ms,color 200ms;padding:0 4px}
html.dark .sseg button{color:#A1A1A6}
.sseg button.on{background:#fff;color:#121212;box-shadow:0 1px 3px rgb(0 0 0 / .08)}
html.dark .sseg button.on{background:#48484A;color:#fff;box-shadow:none}
.schips{display:flex;gap:6px;padding:0 14px 12px 56px;flex-wrap:wrap;margin-top:-4px}
.schips button{border:0;background:#F1F1F3;border-radius:999px;height:32px;padding:0 12px;font-size:13px;color:#3B3F45;cursor:pointer;transition:background 200ms,color 200ms}
html.dark .schips button{background:#2C2C2E;color:#E5E5EA}
.schips button.on{background:#121212;color:#fff}
html.dark .schips button.on{background:#F2F2F2;color:#000}
.tm{font-size:15px;font-weight:600;background:#F1F1F3;border-radius:9px;padding:5px 10px;font-variant-numeric:tabular-nums}
html.dark .tm{background:#2C2C2E}
.snote{font-size:12px;line-height:17px;color:var(--muted);padding:6px 8px 0}
.sbtn{margin-top:16px;border:0;border-radius:16px;height:52px;background:#121212;color:#fff;font-size:16px;font-weight:600;cursor:pointer}
html.dark .sbtn{background:#F2F2F2;color:#000}
.sbtn.ghost{background:transparent;color:var(--del);margin-top:4px}
.icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 6px;padding:4px 12px 14px}
.ico{border:0;background:none;padding:0;font-size:12px;color:#5C626B;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
html.dark .ico{color:#A1A1A6}
.ico .iw{position:relative;width:60px;height:60px;border-radius:15px;box-shadow:0 0 0 2px transparent;transition:box-shadow 220ms,transform 160ms}
.ico .iw img{width:100%;height:100%;border-radius:15px;display:block}
.ico:active .iw{transform:scale(.92)}
.ico.on{color:var(--ink);font-weight:600}
.ico.on .iw{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #5FAE6E}
html.dark .ico.on .iw{box-shadow:0 0 0 2.5px #1C1C1E,0 0 0 4.5px #5FAE6E}
.ico .iw i{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;background:#5FAE6E;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;transform:scale(0);transition:transform 380ms cubic-bezier(.34,1.56,.64,1)}
html.dark .ico .iw i{border-color:#1C1C1E}
.ico.on .iw i{transform:scale(1)}
.how{margin:0 12px 12px;font-size:12px;line-height:17px;color:#5C626B;background:#F7F6F2;border-radius:14px;padding:10px 12px;animation:fadein 360ms ease}
html.dark .how{background:#2C2C2E;color:#A1A1A6}
.how b{color:var(--ink)}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}}
.phonecard{display:flex;align-items:center;gap:12px;background:#FBF3E4;border-radius:18px;padding:12px 14px;border:0;width:100%;text-align:left;cursor:pointer;color:#121212}
html.dark .phonecard{background:#2A2519;color:#F2EFEA}
.phonecard b{display:block;font-size:15px}
.phonecard small{font-size:12px;color:var(--muted)}
.phonecard span.bi{width:38px;height:38px;border-radius:12px;background:#F3DDB8;color:#B8641E;display:flex;align-items:center;justify-content:center;flex:none}

/* the phone set-up */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:calc(var(--st) + 60px) 28px 0;text-align:center;animation:in 520ms cubic-bezier(.22,1,.36,1) both;overflow-y:auto}
.stage .appicon{width:96px;height:96px;border-radius:24px;position:relative;box-shadow:0 12px 30px rgb(60 45 20 / .15)}
.stage .appicon img{width:100%;height:100%;border-radius:24px;display:block}
.stage .appicon .badge{position:absolute;right:-8px;top:-8px;min-width:30px;height:30px;border-radius:15px;background:#E2483C;color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;border:3px solid var(--bg);animation:pop 520ms cubic-bezier(.34,1.56,.64,1) 400ms both}
.stage h1{margin:26px 0 8px;font-size:27px;line-height:32px;font-weight:600;letter-spacing:-.02em}
.stage p{margin:0;font-size:15px;line-height:21px;color:var(--muted)}
.ost{margin-top:24px;width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.ost>div{display:flex;align-items:center;gap:14px;background:var(--col);border-radius:16px;padding:12px 14px;font-size:15px;line-height:20px;animation:in 520ms cubic-bezier(.22,1,.36,1) both}
.ost b{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--onink);font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.bell{width:120px;height:120px;border-radius:50%;background:#FBF3E4;display:flex;align-items:center;justify-content:center;color:#B8641E;position:relative;flex:none}
html.dark .bell{background:#2A2519}
.bell svg{animation:ring 2.4s ease-in-out infinite;transform-origin:50% 12%}
@keyframes ring{0%,60%,100%{transform:rotate(0)}64%{transform:rotate(14deg)}68%{transform:rotate(-12deg)}72%{transform:rotate(9deg)}76%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
.okring{width:110px;height:110px;flex:none}
.okring circle{stroke-dasharray:302;stroke-dashoffset:302;animation:draw 800ms cubic-bezier(.65,0,.35,1) 150ms forwards}
.okring path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw 400ms ease-out 800ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ofoot{padding:16px 20px calc(var(--sb) + 20px);display:flex;flex-direction:column;gap:8px}
.obtn{border:0;border-radius:18px;height:56px;font-size:17px;font-weight:600;cursor:pointer;background:var(--ink);color:var(--onink);transition:transform 140ms}
.obtn:active{transform:scale(.97)}
.obtn.ghost{background:transparent;color:var(--muted);height:44px;font-size:15px;font-weight:500}
.obtn[disabled]{opacity:.6}
.toast{z-index:80}

@media (prefers-reduced-motion:reduce){.row.done .flip,.row.done .fill,.row.done .chr{transition:none;animation:none}.row.enter,.row.gone,.toast,.sheet,.dn.landed,.flyghost,.screen{animation:none}.flood{transition:none}}

/* typing: the quick line rides on the keyboard; the app shrinks to the space above it (app.js keeps the height) */
.app{transition:height 280ms cubic-bezier(.32,.72,0,1)}
.inw{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.inw textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;line-height:21px;color:var(--ink);padding:9px 4px;resize:none;height:39px;max-height:96px;overflow-y:auto;font-family:inherit;scrollbar-width:none}
.inw textarea::placeholder{color:#8E939A}
html.dark .inw textarea::placeholder{color:#7D7A75}
.tapin{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:text}
.app.typing .tapin,.app.typing .mic{display:none}
.app.typing .foot{padding-bottom:8px}
.app.typing .bar{align-items:flex-end}

/* the address: Claude's variants on the card */
.ir small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ir.addp{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--muted)}
.ir .pin-in{border:0;outline:0;background:transparent;font-size:16px;min-width:0}
.ir.finding{color:var(--inkb)}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);border-top-color:#5FAE6E;animation:spin 800ms linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.hints{display:flex;flex-direction:column;gap:6px;padding:10px 10px 8px;border-top:1px solid var(--line)}
.hints:first-child{border-top:0}
.hl{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);padding:0 4px 2px}
.hint{display:flex;align-items:center;gap:10px;border:0;background:var(--bg);border-radius:14px;padding:10px 12px;text-align:left;cursor:pointer;animation:in 360ms cubic-bezier(.34,1.56,.64,1) both;color:var(--ink)}
html.dark .hint{background:#1A1917}
.hint svg{flex:none;color:#E2604C}
.hint .hw{flex:1;min-width:0}
.hint b{display:block;font-size:15px;font-weight:600}
.hint small{display:block;font-size:13px;color:var(--muted);line-height:17px;margin-top:1px}
.hint i{font-style:normal;font-size:13px;font-weight:600;color:var(--ok);flex:none}
.hno{align-self:flex-start;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;padding:6px 4px;cursor:pointer}