:root{
  /* Bright, like the original phone app (2026-10-13): mint page, white cards, its green #16A34A */
  --bg:#F8FFF9; --card:#ffffff; --card2:#f0fdf4; --line:#dbe9e0;
  --text:#10231a; --mute:#5f7168; --green:#16A34A; --green-d:#15803d;
  --gold:#D97706; --red:#DC2626; --radius:18px;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--text)}
body{font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;min-height:100dvh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,textarea{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;margin-top:6px}
input:focus,textarea:focus{outline:2px solid var(--green);border-color:transparent}
label{display:block;color:var(--mute);font-size:14px;margin-top:16px}

.screen{max-width:480px;margin:0 auto;padding:20px 16px calc(170px + env(safe-area-inset-bottom));animation:in .25s ease}
.screen.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:48px}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1{font-size:26px;line-height:1.15;letter-spacing:-.02em;margin:6px 0 6px}
h1.hero{font-size:34px}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:26px 0 10px}
.sub{color:var(--mute);margin-bottom:16px}
.gold{color:var(--gold)}
.step{color:var(--green);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.back{color:var(--mute);padding:6px 0;margin-bottom:6px}

.logo svg{width:84px;height:84px}
.mini svg{width:30px;height:30px;display:block}
.top{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:18px}

.why{list-style:none;padding:0;text-align:left;display:grid;gap:10px;margin:8px 0 10px;width:100%}
.why li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:#33463c}
.why li span{font-size:20px}

.btn{display:block;width:100%;border-radius:16px;padding:15px 18px;font-weight:650;text-align:center}
.btn.big{background:var(--green);color:#fff;font-size:18px;box-shadow:0 6px 24px #16a34a33}
.btn.big:active{transform:scale(.98)}
.btn.big[disabled]{background:var(--card2);color:var(--mute);box-shadow:none}
.btn.ghost{color:var(--mute);border:1px solid var(--line)}
.btn+.btn{margin-top:10px}
.start{margin:16px 0 4px;padding:20px}

.dock{position:fixed;left:0;right:0;bottom:0;padding:14px 16px calc(62px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 26%);z-index:5}
.dock>*{max-width:448px;margin-left:auto;margin-right:auto}
.dock .btn+.btn,.dock .btn+.hint{margin-top:10px}
.hint{color:var(--mute);font-size:13px;text-align:center;margin-top:8px}

.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px;font-size:14px;line-height:1.25;min-height:84px}
.chip span{font-size:22px}
.chip.on{border-color:var(--green);background:#dcfce7}

.rewards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rcard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px;text-align:left}
.rcard .ri{font-size:26px;margin-bottom:4px}
.rcard small{color:var(--mute)}
.rcard.on{border-color:var(--gold);background:#fef3c7}
.per{margin-top:18px;color:#33463c}.per b{color:var(--gold)}.per.bad{color:var(--red)}

.jar{display:block;width:100%;text-align:left;background:linear-gradient(160deg,#fef3c7,#fffbeb);border:1.5px solid #fcd34d;border-radius:var(--radius);padding:16px}
.jar-top{display:flex;align-items:center;gap:12px}
.jar-top .ri{font-size:30px}
.jar-top div{flex:1;min-width:0}
.jar-top small{display:block;color:#92400e;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.jar-top b{font-size:18px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amt{font-weight:800;color:var(--gold);font-size:20px;text-align:right;white-space:nowrap}
.amt small{display:block;color:#92400e;font-weight:500;font-size:12px}
.bar{height:12px;background:#fde68a;border-radius:99px;margin:14px 0 8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,var(--gold));border-radius:99px}
.bar i.grow{animation:grow 1.1s ease}
@keyframes grow{from{width:2%}}
.jar-foot{display:flex;justify-content:space-between;font-size:13px;color:#92400e}
.jar.empty{border-style:dashed;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card)}
.jar.empty .ri,.jar.won .ri{font-size:30px}
.jar.empty small,.jar.won small{color:var(--mute)}
.jar.won{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-color:var(--gold)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.stats span{font-size:18px}.stats b{display:block;font-size:22px}.stats small{color:var(--mute);font-size:12px}
.recent{list-style:none;padding:0;display:grid;gap:8px}
.recent li{display:grid;grid-template-columns:1fr auto;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.recent small{color:var(--mute);grid-column:1}
.recent b{grid-row:1/3;grid-column:2;align-self:center;color:var(--green)}
.empty-note{color:var(--mute)}
.earned{display:flex;flex-wrap:wrap;gap:8px}.earned span{background:#fef3c7;border:1px solid #fcd34d;border-radius:99px;padding:6px 12px;font-size:14px}
.foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.foot button{color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:14px}
.demo{background:#dbeafe;border:1px solid #93c5fd;color:#1e3a8a;border-radius:14px;padding:10px 14px;font-size:14px;margin-bottom:12px}
.demo button{color:#1e3a8a;text-decoration:underline;font-weight:600}

.rooms{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.room{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px 14px;text-align:left;font-weight:600}
.room span{font-size:22px}
.room.on{border-color:var(--green);background:#dcfce7}
.room.add{color:var(--mute);border-style:dashed;font-weight:500}
.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.size{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px}
.size b{display:block;font-size:20px}.size small{color:var(--mute)}
.size.on{border-color:var(--green);background:#dcfce7}

.sess-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sess-top div{flex:1}.sess-top small{color:var(--mute);display:block;font-size:13px}
.x{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--mute)}
.dots{display:flex;gap:4px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots i.ok{background:var(--green)}.dots i.sk{background:var(--gold)}.dots i.now{background:var(--text)}
.task{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.ticon{font-size:40px}
.how{font-size:18px;margin:4px 0 14px}
.look{display:flex;flex-direction:column;gap:2px;background:var(--card2);border-radius:12px;padding:12px;color:#33463c;font-size:15px}
.look span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--green)}
.result{display:flex;gap:12px;align-items:stretch;margin-top:14px;border-radius:var(--radius);padding:10px;border:1.5px solid var(--line);background:var(--card)}
.result img{width:96px;height:96px;object-fit:cover;border-radius:12px;flex:0 0 auto}
.result .verdict{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.verdict b{font-size:22px}.verdict small{color:#33463c;font-size:15px}
.result.pass{background:#dcfce7;border-color:var(--green-d)}.result.pass b{color:var(--green)}
.result.fail{background:#fee2e2;border-color:#fca5a5}.result.fail b{color:var(--red)}
.result.error{background:#fef9c3;border-color:#fde047}
.result.checking .verdict{flex-direction:row;align-items:center;gap:12px;color:var(--mute)}
.result.checking img{opacity:.6}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--green);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.err{color:var(--red);margin-top:10px}

.burst{font-size:64px;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.big-pts{font-size:44px;font-weight:800;color:var(--green)}.big-pts small{font-size:18px;color:var(--mute);font-weight:500}
.screen.center .jar,.screen.center .btn{width:100%}

/* ---------- the LIFE door (2026-10-06) ---------- */
.btn.big.life{background:#2563EB;color:#fff;box-shadow:0 6px 24px #2563eb33}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.door{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--green);color:#fff;border-radius:16px;padding:16px 14px;box-shadow:0 6px 24px #16a34a33}
.door span{font-size:26px;margin-bottom:4px}.door b{font-size:17px}.door small{opacity:.8;font-size:13px}
.door:active{transform:scale(.98)}
.door.life{background:#2563EB;color:#fff;box-shadow:0 6px 24px #2563eb33}
.screen.nodock{padding-bottom:40px}
.talk{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:grid;gap:10px}
.talk textarea{margin-top:0;min-height:92px}
.talk .btn{margin-top:0}
.mic{display:flex;align-items:center;gap:12px;background:#dbeafe;border:1.5px solid #93c5fd;color:#1e3a8a;border-radius:14px;padding:14px 16px;text-align:left;font-size:17px}
.mic span{font-size:28px}.mic b{flex:1}.mic small{color:#1d4ed8;font-size:13px}
.mic.on{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.mic.on small{color:#b91c1c;font-variant-numeric:tabular-nums}
.mic[disabled]{opacity:.7}
.mic .dot{width:14px;height:14px;border-radius:50%;background:var(--red);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.added{color:var(--green);font-weight:600;margin:-6px 0 10px}
.pile{list-style:none;padding:0;display:grid;gap:8px}
.pile li{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.pile li>span{font-size:20px}
.pile li div{flex:1;min-width:0}
.pile li b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pile li small{color:var(--mute);font-size:13px}
.pile li.soon{border-color:#93c5fd}
.pile li.parked{opacity:.6}
.pile.done li{opacity:.7}.pile.done li>span{color:var(--green)}
.rm{width:32px;height:32px;border-radius:50%;color:var(--mute);border:1px solid var(--line);flex:0 0 auto}
.dock input{margin:0 0 10px}

/* ---------- the parent angle (2026-10-06) ---------- */
.link{color:var(--mute);text-decoration:underline;font-size:14px}
.chips.four{grid-template-columns:repeat(3,1fr)}
.chips.four .chip{min-height:0;align-items:center;flex-direction:row;justify-content:center;padding:12px 8px;font-weight:600}
.chips.icons{grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.chips.icons .chip{min-height:0;align-items:center;padding:8px 0;font-size:22px}
.chips.icons .chip span{font-size:22px}
.sizes.five{grid-template-columns:repeat(5,1fr);gap:6px}
.sizes.five .size{padding:10px 0;text-align:center}
.hint.left{text-align:left;margin-top:12px}
.codebox{display:flex;gap:8px;justify-content:center;margin:6px 0 10px}
.codebox b{display:flex;align-items:center;justify-content:center;width:46px;height:60px;border-radius:12px;background:var(--card);border:1.5px solid var(--gold);color:var(--gold);font-size:30px;font-family:ui-monospace,Menlo,Consolas,monospace}
.codein{text-align:center;font-size:30px;letter-spacing:.35em;font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase;padding:14px;max-width:300px}
.back.self{align-self:flex-start}
.btn.big.gold{background:var(--gold);color:#fff;box-shadow:0 6px 24px #d9770633;margin-top:12px}
.jar.won .btn{width:100%}
.spin.small{width:14px;height:14px;border-width:2px;display:inline-block;vertical-align:middle;margin-right:6px}
.top .x{margin-left:auto}
.recent.log li{display:block;padding:0}
.recent.log .row{display:grid;grid-template-columns:1fr auto;width:100%;text-align:left;padding:12px 14px}
.recent.log .row small{color:var(--mute);grid-column:1}
.recent.log .row b{grid-row:1/3;grid-column:2;align-self:center;color:var(--green)}
.verdicts{list-style:none;padding:0 14px 12px;display:grid;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.verdicts li{display:flex;gap:10px;align-items:flex-start}
.verdicts li>span{color:var(--green);width:18px;flex:0 0 auto}
.verdicts li b{display:block;font-size:14px}.verdicts li small{color:var(--mute);font-size:13px}
.result.limit{background:#fef9c3;border-color:#fde047}.result.limit b{color:var(--gold)}
.warn{color:var(--gold);font-style:normal}

/* ---------- the old app's feel (2026-10-13) ---------- */
.task,.jar,.stats div,.recent li,.room,.chip,.rcard,.size,.plan li,.talk,.pile li{box-shadow:0 1px 3px #10231a0f}
.ttop{display:flex;align-items:center;justify-content:space-between}
.tpts{font-size:13px;font-weight:700;color:var(--green-d);background:var(--card2);border:1px solid #bbf7d0;border-radius:99px;padding:4px 10px}
.tip{background:#fffbeb;border:1px solid #fde68a;color:#78350f;border-radius:12px;padding:10px 12px;font-size:14px;margin:0 0 12px}
.plan{list-style:none;padding:0;display:grid;gap:10px;counter-reset:p}
.plan li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.prow{display:flex;gap:12px;align-items:flex-start}
.prow .pi{font-size:24px;line-height:1.2}
.prow div{flex:1;min-width:0}
.prow b{display:block;font-size:15px}
.prow p{color:var(--mute);font-size:14px;margin-top:2px}
.pp{font-weight:800;color:var(--green);white-space:nowrap}
.pctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.pctl button{border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--text);background:var(--card)}
.pctl button:active{transform:scale(.96)}
.pctl button[disabled]{opacity:.35}
.pctl .swap{margin-left:auto;color:var(--green-d);border-color:#bbf7d0;background:var(--card2)}
.lvl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:99px;padding:5px 10px}
.lvl.l0{background:#dcfce7;color:#166534}.lvl.l1{background:#fef3c7;color:#92400e}.lvl.l2{background:#fee2e2;color:#991b1b}
.plan li.fin{background:var(--card2);border-style:dashed}
.photos-h{align-self:flex-start;margin-bottom:0}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.shots figure{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.shots img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.shots figcaption{font-size:11px;color:var(--mute);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}