:root{
  --blue:#008cff; --blue-d:#0a6fd6; --navy:#0b2545; --ink:#16233a; --mute:#66758c; --faint:#93a0b4;
  --line:#e4eaf2; --bg:#f2f5fa; --card:#fff;
  --ai:#5457e6; --ai-bg:#efeffe;
  --ok:#0f9d58; --ok-bg:#e7f6ee; --warn:#a15c00; --warn-bg:#fff4dd; --bad:#cf3336; --bad-bg:#fdecec;
  --mum:#c93a72; --papa:#b56a00; --aarav:#0c8a62; --all:#0a6fd6; --neha:#7448c9;
  --r:16px;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#e9edf4;color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
svg.ic{flex:none;vertical-align:-3px}
.myra{font-family:'Caveat',cursive;font-weight:700;letter-spacing:.2px}

/* ---------- stage: phone frame + reviewer panels ---------- */
.stage{height:100%;display:flex;align-items:center;justify-content:center;gap:40px;padding:20px}
.side{width:290px;max-height:100%;overflow:auto;font-size:13.500px;line-height:1.500;color:#3d4a5f}
.side h2{font-size:20px;line-height:1.200;color:var(--navy);margin-bottom:6px}
.side h3{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--faint);margin:20px 0 8px;font-weight:600}
.side p{margin-bottom:8px}
.side ul{padding-left:16px;display:grid;gap:6px}
.side .concept{font-size:12px;color:var(--mute);border-top:1px solid #d5dce8;margin-top:20px;padding-top:12px}
.side .note-t{font-weight:700;color:var(--navy);font-size:15px;margin-bottom:6px}
.pbtn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 12px;border-radius:10px;font-size:13.500px;font-weight:500;color:#2b3950}
.pbtn:hover{background:#dde4ee}
.pbtn.on{background:#fff;color:var(--blue-d);box-shadow:0 1px 2px rgba(11,37,69,.08)}
.pbtn i{width:18px;height:18px;border-radius:50%;background:#d5dce8;font-style:normal;font-size:10px;display:grid;place-items:center;color:#52607a;font-weight:700}
.pbtn.on i{background:var(--blue);color:#fff}
.pbtn.st i{background:var(--warn-bg);color:var(--warn)}
.device-wrap{flex:none}
.device{width:390px;height:844px;background:#fff;border-radius:52px;position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 0 0 10px #10141c,0 0 0 11.500px #3a414f,0 30px 60px -10px rgba(11,37,69,.35);transform-origin:top left}
.statusbar{height:50px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 32px 0;font-weight:600;font-size:15.500px;position:relative;z-index:5;background:#fff}
.island{position:absolute;left:50%;top:11px;width:118px;height:33px;margin-left:-59px;background:#10141c;border-radius:20px}
.sb-r{font-size:13px;display:flex;gap:6px;align-items:center}
.sb-r b{width:24px;height:12px;border-radius:4px;background:var(--ink);display:block}
.device[data-screen=home] .statusbar{background:#fde2c8}
.phone{flex:1;position:relative;overflow:hidden;min-height:0}
@media (max-width:1180px){.side-l{display:none}}
@media (max-width:820px){.side-r{display:none}}
@media (max-width:600px){
  .stage{padding:0;display:block}
  .device-wrap{width:100%!important;height:100%!important}
  .device{width:100%;height:100dvh;border-radius:0;box-shadow:none;transform:none!important}
  .statusbar{display:none}
}

/* ---------- shared ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.screen.enter{animation:enter .32s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(10px)}}
.scroll{flex:1;overflow-y:auto;min-height:0;scrollbar-width:none;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:16px}
.m-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#fff;min-height:56px}
.m-head .myra{font-size:28px;color:var(--navy)}
.m-head .myra i,.spark{color:var(--blue);font-style:normal;font-size:.55em;vertical-align:.7em;margin-left:1px}
.m-title{text-align:center;line-height:1.200}
.m-title b{display:block;font-size:16px}
.m-title span{font-size:12px;color:var(--mute)}
.ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 1px 5px rgba(11,37,69,.14);flex:none}
.ib:active{transform:scale(.94)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:14px;background:var(--blue);color:#fff;font-weight:600;font-size:15px;transition:transform .12s,background .15s;text-align:center}
.btn:active{transform:scale(.98)}
.btn.block{width:100%}
.btn.sm{min-height:38px;border-radius:10px;font-size:13.500px;padding:0 14px}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.500px var(--line)}
.btn.soft{background:#e5f3ff;color:var(--blue-d)}
.btn[disabled]{background:#cfd8e4;color:#fff;pointer-events:none}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card{background:var(--card);border-radius:var(--r);box-shadow:0 1px 3px rgba(11,37,69,.07);overflow:hidden}
.lbl{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);font-weight:600;display:flex;align-items:center;gap:6px}
.ai{display:inline-flex;align-items:center;gap:4px;font-size:11.500px;font-weight:600;color:var(--ai);background:var(--ai-bg);padding:3px 8px;border-radius:20px;white-space:nowrap}
.yours{display:inline-flex;font-size:11.500px;font-weight:600;color:var(--mute);background:#edf1f6;padding:3px 8px;border-radius:20px;white-space:nowrap}
.whys{display:flex;flex-wrap:wrap;gap:6px}
.why{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1.250;padding:4px 9px 4px 4px;border-radius:20px;background:#f1f4f9;color:#33415a}
.why b{font-size:10.500px;font-weight:700;color:#fff;padding:2px 7px;border-radius:20px;background:var(--all);white-space:nowrap}
.w-mum b,.av.w-mum{background:var(--mum)} .w-papa b,.av.w-papa{background:var(--papa)} .w-aarav b,.av.w-aarav{background:var(--aarav)} .w-neha b,.av.w-neha{background:var(--neha)}
.av.w-riya{background:var(--navy)} .av.w-karan{background:#3b78c4}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;flex:none;background:var(--all)}
.scene{display:block;width:100%;height:100%}
.dock{flex:none;background:#fff;padding:10px 14px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--line);display:grid;gap:10px}
.fineprint{font-size:12px;color:var(--mute);text-align:center}
.toast{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);background:#16233a;color:#fff;font-size:13px;font-weight:500;padding:10px 14px;border-radius:12px;z-index:40;max-width:86%;text-align:center;animation:toast .25s ease-out;box-shadow:0 8px 24px rgba(11,37,69,.3)}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}}
.flash{animation:flash 1.800s ease-out}
@keyframes flash{0%,35%{box-shadow:0 0 0 2.500px var(--ai),0 1px 3px rgba(11,37,69,.07);background:#f7f7ff}}

/* ---------- home (MMT look) ---------- */
.home{background:#f2f4f8}
.h-banner{background:linear-gradient(180deg,#fde2c8 0%,#fbeadb 62%,#f2f4f8 100%);padding:6px 18px 26px;text-align:center}
.h-top{display:flex;justify-content:space-between;align-items:center;height:44px}
.h-top .burger{display:grid;gap:5px}.h-top .burger i{display:block;height:3px;border-radius:2px;background:var(--ink);width:24px}.h-top .burger i:last-child{width:14px}
.h-top .wal{font-weight:700;font-size:13px;display:flex;gap:10px;align-items:center}
.h-top .wal span{background:#fff;padding:5px 10px;border-radius:20px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sale{margin:14px auto 0;display:inline-block;transform:rotate(-3deg)}
.sale b{display:block;font-size:30px;font-weight:700;letter-spacing:1px;line-height:1;color:#fff;padding:8px 16px;border-radius:10px;background:linear-gradient(180deg,#e0453a,#b3202d);box-shadow:0 4px 0 #7d1220,0 10px 20px rgba(179,32,45,.25)}
.sale b+b{margin-top:6px;background:linear-gradient(180deg,#23b07a,#0d7f5a);box-shadow:0 4px 0 #075a40,0 10px 20px rgba(13,127,90,.25);transform:rotate(2deg)}
.live{margin-top:22px;font-size:13px;font-weight:700;letter-spacing:2px;color:#8a1f3a}
.deals{margin-top:10px;display:inline-flex;gap:8px;align-items:center;padding:9px 24px;border-radius:30px;background:#fff;font-weight:700;letter-spacing:.5px;font-size:14px;box-shadow:0 0 0 2px #e9c98f,0 4px 10px rgba(0,0,0,.08)}
.tiles4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px;margin-top:-6px}
.tile{background:#fff;border-radius:16px;padding:12px 4px 10px;text-align:center;font-weight:700;font-size:13px;line-height:1.200;box-shadow:0 1px 3px rgba(11,37,69,.06)}
.tile span,.g8 span{display:block;font-size:30px;line-height:1.150;margin-bottom:4px}
.plan-card{margin:12px 14px 0;width:calc(100% - 28px);display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border-radius:18px;color:#fff;
  background:radial-gradient(120% 160% at 100% 0%,#2b6fe0 0%,#0b2545 55%,#071a33 100%);box-shadow:0 8px 20px -6px rgba(11,37,69,.5);position:relative;overflow:hidden}
.plan-card:active{transform:scale(.99)}
.plan-card .new{font-size:10px;font-weight:700;letter-spacing:1px;background:#fff;color:var(--ai);padding:2px 7px;border-radius:20px;margin-right:6px}
.plan-card b{font-size:15.500px;display:block;margin:5px 0 2px}
.plan-card small{font-size:12.500px;opacity:.82;line-height:1.350;display:block}
.plan-card .go{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.plan-card .myra{font-size:19px}
.grid8{margin:12px 14px 0;background:#fff;border-radius:18px;padding:14px 6px 8px;display:grid;grid-template-columns:repeat(4,1fr);row-gap:12px;box-shadow:0 1px 3px rgba(11,37,69,.06)}
.g8{text-align:center;font-size:12px;line-height:1.200;font-weight:500;padding:0 2px}
.g8 span{font-size:25px}
.h-trend{padding:16px 14px 120px}
.h-trend .lbl{margin-bottom:10px}
.h-trend .tr{display:flex;gap:10px;overflow:auto;scrollbar-width:none}
.h-trend .t{flex:none;width:136px;height:92px;border-radius:14px;overflow:hidden;position:relative}
.h-trend .t em{position:absolute;left:10px;bottom:8px;color:#fff;font-style:normal;font-weight:700;font-size:13.500px;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.h-nav{position:absolute;left:14px;bottom:16px;right:100px;height:62px;border-radius:32px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(11,37,69,.18);display:grid;grid-template-columns:repeat(4,1fr);align-items:center;font-size:10.500px;font-weight:500;text-align:center;color:#2b3950}
.h-nav div span{display:block;font-size:19px;line-height:1.200;filter:grayscale(1) brightness(.4)}
.h-nav .on{color:var(--blue);font-weight:700}.h-nav .on span{filter:none}
.orb{position:absolute;right:14px;bottom:14px;width:74px;height:74px;border-radius:50%;color:#fff;font-size:11.500px;line-height:1;
  background:radial-gradient(circle at 30% 25%,#2f7df0,#0b2545 62%);box-shadow:0 8px 22px rgba(11,37,69,.45),inset 0 0 0 2px rgba(120,180,255,.35);animation:orb 3.200s ease-in-out infinite}
.orb .myra{display:block;font-size:22px;margin-top:-1px}
@keyframes orb{50%{box-shadow:0 8px 26px rgba(11,37,69,.5),inset 0 0 0 2px rgba(120,180,255,.6),0 0 0 7px rgba(0,140,255,.12)}}

/* ---------- myra start ---------- */
.start{background:#fff}
.start h1{font-size:38px;line-height:1.100;color:var(--navy);letter-spacing:-.5px;margin-top:6px}
.start h1 em{font-style:normal;background:linear-gradient(90deg,#1552c9,#53b2fe);-webkit-background-clip:text;background-clip:text;color:transparent}
.start .sub{font-size:16px;line-height:1.450;color:#2b3950;margin:10px 0 22px}
.start .lbl{margin-bottom:10px}
.starter{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px;border-radius:16px;box-shadow:inset 0 0 0 1.500px var(--line);margin-bottom:10px;font-weight:600;font-size:14.500px;line-height:1.300}
.starter:active{background:#f6f9fc}
.starter .th{width:60px;height:46px;border-radius:10px;overflow:hidden;flex:none}
.starter small{display:block;font-weight:400;color:var(--mute);font-size:12.500px;margin-top:2px}
.starter.hero{box-shadow:inset 0 0 0 1.500px #b9d9ff;background:#f4f9ff}
.composer{flex:none;padding:10px 14px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,255,255,0),#eef3fb 40%)}
.composer .box{display:flex;align-items:center;gap:8px;background:#fff;border-radius:18px;padding:8px 8px 8px 16px;box-shadow:0 2px 12px rgba(11,37,69,.1),inset 0 0 0 1px var(--line)}
.composer input{flex:1;min-width:0;border:0;outline:0;font-size:16px;height:40px;background:none}
.composer input::placeholder{color:var(--faint)}
.speak{display:inline-flex;gap:6px;align-items:center;height:36px;padding:0 12px;border-radius:20px;box-shadow:inset 0 0 0 1.500px var(--navy);font-weight:600;font-size:13.500px;color:var(--navy);flex:none}
.sendb{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}

/* ---------- understanding ---------- */
.bub{max-width:84%;margin-left:auto;background:var(--blue);color:#fff;padding:11px 14px;border-radius:18px 18px 4px 18px;font-size:15px;line-height:1.400}
.say{display:flex;gap:8px;align-items:flex-start;margin:16px 0 12px;font-size:15px;line-height:1.450}
.say .dot{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#2f7df0,#0b2545 70%);color:#fff;display:grid;place-items:center;font-size:11px;flex:none;margin-top:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.500px var(--line);font-size:13.500px;font-weight:600}
.chip.edit{box-shadow:inset 0 0 0 1.500px #b9d9ff;color:var(--blue-d)}
.chip small{font-weight:400;color:var(--mute)}
.sec{margin:20px 0 10px;display:flex;justify-content:space-between;align-items:baseline}
.sec small{font-size:12px;color:var(--mute)}
.trav{display:flex;gap:10px;padding:11px 12px;align-items:flex-start}
.trav+.trav{border-top:1px solid var(--line)}
.trav .who{font-weight:600;font-size:14.500px}
.trav .who small{font-weight:400;color:var(--mute);font-size:12.500px;margin-left:4px}
.needs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.need{font-size:12px;font-weight:500;height:28px;padding:0 10px;border-radius:20px;display:inline-flex;gap:5px;align-items:center;background:#eef2f7;color:#33415a}
.need.guess{background:var(--ai-bg);color:var(--ai);box-shadow:inset 0 0 0 1px #cfd0fb}
.need.off{background:none;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line);text-decoration:line-through}
.need.add{background:none;color:var(--mute);box-shadow:none;border:1px dashed #c3cddb}
.ask{margin-top:18px;padding:14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.500px #b9d9ff}
.ask p{font-size:14.500px;font-weight:600;margin-bottom:10px}
.opt{height:40px;padding:0 14px;border-radius:12px;box-shadow:inset 0 0 0 1.500px var(--line);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.opt.on{background:var(--blue);color:#fff;box-shadow:none}
.opt small{font-weight:400;opacity:.75}

/* ---------- planning ---------- */
.planning{background:#fff}
.plan-wrap{padding:26px 22px}
.pulse{width:64px;height:64px;border-radius:50%;margin-bottom:18px;background:radial-gradient(circle at 30% 25%,#2f7df0,#0b2545 68%);display:grid;place-items:center;color:#fff;font-size:24px;animation:pulse 1.600s ease-in-out infinite}
.pulse.stop{animation:none;background:var(--bad-bg);color:var(--bad)}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(0,140,255,.1),0 0 0 24px rgba(0,140,255,.05)}}
.plan-wrap h2{font-size:24px;line-height:1.200;color:var(--navy);margin-bottom:4px}
.plan-wrap>p{color:var(--mute);font-size:14.500px;margin-bottom:22px}
.step{display:flex;gap:12px;padding:0 0 18px;position:relative;opacity:.35;transition:opacity .3s}
.step.on,.step.done{opacity:1}
.step:not(:last-child)::before{content:'';position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:var(--line)}
.step .b{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--line);background:#fff;color:#fff;margin-top:1px}
.step.on .b{box-shadow:none;border:2.500px solid #cfe6ff;border-top-color:var(--blue);animation:spin .8s linear infinite}
.step.done .b{background:var(--ok);box-shadow:none}
@keyframes spin{to{transform:rotate(360deg)}}
.step b{font-size:15px;font-weight:600;display:block}
.step .res{margin-top:5px;animation:enter .3s}
.step .res>span{font-size:12.5px;color:var(--mute);display:block;margin-top:4px}
.errbox{background:var(--bad-bg);border-radius:16px;padding:16px;margin-top:6px}
.errbox b{color:var(--bad);display:flex;gap:8px;align-items:center;margin-bottom:6px}
.errbox p{font-size:14px;line-height:1.450;margin-bottom:12px;color:#5a2a2b}

/* ---------- trip board ---------- */
.budget{flex:none;background:#fff;padding:4px 16px 12px;box-shadow:0 1px 0 var(--line);z-index:2}
.budget .top{display:flex;justify-content:space-between;align-items:baseline}
.budget .top b{font-size:22px;letter-spacing:-.3px}
.budget .top b small{font-size:12px;font-weight:500;color:var(--mute);margin-left:6px;letter-spacing:0}
.budget .top button{font-size:13px;font-weight:600;color:var(--blue-d)}
.bar{height:8px;border-radius:8px;background:#e9eef5;margin:8px 0 6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#27b36a,#0f9d58);transition:width .6s cubic-bezier(.2,.8,.2,1),background .3s}
.budget.over .bar i{background:linear-gradient(90deg,#e8594f,#cf3336)}
.budget .sub{font-size:12px;color:var(--mute);display:flex;justify-content:space-between}
.budget .sub b{color:var(--ok);font-weight:600}
.budget.over .sub b{color:var(--bad)}
.board .scroll,.review .scroll{padding:12px 14px 18px;display:flex;flex-direction:column;gap:12px}
.board .scroll>*,.review .scroll>*{flex:none}
.part-h{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 0}
.swap{display:inline-flex;gap:5px;align-items:center;height:32px;padding:0 11px;border-radius:20px;font-size:12.500px;font-weight:600;color:var(--blue-d);background:#e9f4ff}
.swap:active{background:#d5eaff}
.part-b{padding:10px 14px 12px;display:grid;gap:10px}
.fl-row{display:flex;align-items:center;gap:10px}
.fl-row b{font-size:20px;letter-spacing:-.3px}
.fl-line{flex:1;height:1px;border-top:1.500px dashed #c6d0de;position:relative;text-align:center}
.fl-line i{position:relative;top:-9px;background:#fff;padding:0 8px;font-style:normal;font-size:11.500px;color:var(--mute)}
.fl-meta{font-size:12.500px;color:var(--mute);margin-top:2px}
.fl-leg+.fl-leg{padding-top:10px;border-top:1px solid var(--line)}
.part-f{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid var(--line);font-size:12.500px;color:var(--mute)}
.part-f b{font-size:16px;color:var(--ink)}
.catch{margin:0 10px 10px;padding:12px;border-radius:12px;background:var(--warn-bg)}
.catch-h{display:flex;gap:6px;align-items:center;font-weight:700;font-size:13px;color:var(--warn);margin-bottom:4px}
.catch p{font-size:13.500px;line-height:1.450;color:#4d3a12;margin-bottom:10px}
.catch .btn{background:var(--warn);}.catch .btn.ghost{background:#fff;color:var(--ink)}
.h-img{height:118px;position:relative}
.h-img .ai,.h-img .yours{position:absolute;left:10px;top:10px;background:#fff}
.h-name{font-size:17px;font-weight:700;line-height:1.200}
.h-name small{color:#e6a100;font-size:12px;margin-left:4px;letter-spacing:1px}
.h-area{font-size:12.500px;color:var(--mute);margin-top:2px}
.over-card{padding:14px;background:var(--bad-bg);box-shadow:inset 0 0 0 1.500px #f3c1c1}
.over-card h4{color:var(--bad);font-size:15px;display:flex;gap:6px;align-items:center;margin-bottom:4px}
.over-card p{font-size:13.500px;line-height:1.400;margin-bottom:10px;color:#5a2a2b}
.trade{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:13.500px;font-weight:600;line-height:1.300}
.trade small{display:block;font-weight:400;color:var(--mute);font-size:12px;margin-top:1px}
.trade em{font-style:normal;color:var(--ok);font-weight:700;white-space:nowrap}
.linkb{font-size:13px;font-weight:600;color:var(--blue-d);padding:4px 0}
.fam{padding:12px 14px}
.fam .lbl{margin-bottom:10px;color:#128c4a}
.msg{display:flex;gap:10px;font-size:14px;line-height:1.400}
.msg+.msg{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.msg .av{width:30px;height:30px;font-size:12px}
.re{margin-top:8px;padding:9px 11px;border-radius:12px;background:var(--ai-bg);font-size:13px;color:#2e2f7a}
.re .row{margin-top:8px}
.days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 14px;margin:0 -14px}
.day{flex:none;width:58px;padding:8px 0;border-radius:14px;background:#fff;text-align:center;font-size:11.500px;color:var(--mute);box-shadow:0 1px 3px rgba(11,37,69,.07);font-weight:500}
.day b{display:block;font-size:17px;color:var(--ink);margin-top:1px}
.day.on{background:var(--blue);color:#d9eeff}.day.on b{color:#fff}
.tl{display:grid;gap:0}
.it{display:grid;grid-template-columns:44px 30px 1fr;position:relative;padding-bottom:10px}
.it .tm{font-size:11.500px;color:var(--mute);padding-top:13px;font-variant-numeric:tabular-nums}
.it .nd{display:flex;flex-direction:column;align-items:center}
.it .nd i{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--blue-d);margin-top:8px;box-shadow:0 1px 3px rgba(11,37,69,.1);flex:none;z-index:1}
.it .nd::after{content:'';flex:1;width:2px;background:#d7dfea;margin-top:2px;margin-bottom:-18px}
.it:last-child .nd::after{display:none}
.it .bx{background:#fff;border-radius:14px;padding:10px 12px;margin-left:8px;box-shadow:0 1px 3px rgba(11,37,69,.07);display:grid;gap:7px}
.it .hd{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.it .hd b{font-size:14.500px;line-height:1.250}
.it .hd em{font-style:normal;font-size:13px;font-weight:700;white-space:nowrap}
.it .hd em.free{color:var(--ok);font-weight:600}.it .hd em.inc{color:var(--faint);font-weight:500}
.it .sb{font-size:12.500px;color:var(--mute);line-height:1.350;margin-top:-4px}
.idea{font-size:11.500px;font-weight:600;color:var(--mute);background:#edf1f6;padding:3px 8px;border-radius:20px;justify-self:start}
.it.rest .bx{background:none;box-shadow:none;border:1.5px dashed #cdd6e3}
.sugg{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.sg{flex:none;height:34px;padding:0 12px;border-radius:20px;background:var(--ai-bg);color:var(--ai);font-size:13px;font-weight:600;display:inline-flex;gap:5px;align-items:center}
.dock .box{display:flex;gap:8px;align-items:center;background:#f2f5fa;border-radius:14px;padding:4px 4px 4px 14px}
.dock .box input{flex:1;min-width:0;border:0;outline:0;background:none;height:38px;font-size:16px}
.dock .box .sendb{width:36px;height:36px}

/* ---------- sheets ---------- */
.scrim{position:absolute;inset:0;background:rgba(11,25,45,.45);z-index:20;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;background:#fff;border-radius:24px 24px 0 0;max-height:86%;display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(11,37,69,.25)}
.sheet.in{animation:up .32s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}}
.sheet::before{content:'';width:38px;height:4px;border-radius:4px;background:#d5dce8;margin:8px auto 0;flex:none}
.sh-h{padding:10px 18px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sh-h b{font-size:18px;line-height:1.250}
.sh-h small{display:block;color:var(--mute);font-size:13px;margin-top:2px;font-weight:400}
.sh-b{overflow-y:auto;padding:0 14px calc(18px + env(safe-area-inset-bottom));scrollbar-width:none;display:grid;gap:10px}
.alt{border-radius:16px;box-shadow:inset 0 0 0 1.500px var(--line);padding:10px;display:grid;gap:9px}
.alt.cur{box-shadow:inset 0 0 0 1.500px #cfd0fb;background:#fafaff}
.alt.gone{opacity:.5}
.alt .tp{display:flex;gap:10px}
.alt .th{width:64px;height:52px;border-radius:10px;overflow:hidden;flex:none}
.alt .nm{font-weight:700;font-size:14.500px;line-height:1.250}
.alt .mt{font-size:12.500px;color:var(--mute);margin-top:2px}
.fits{display:flex;flex-wrap:wrap;gap:6px}
.fit{font-size:12px;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-flex;gap:4px;align-items:center;background:var(--ok-bg);color:var(--ok)}
.fit.no{background:var(--bad-bg);color:var(--bad)}
.alt .bt{display:flex;justify-content:space-between;align-items:center;gap:10px}
.delta{font-weight:700;font-size:14.500px}
.delta.dn{color:var(--ok)}.delta.up{color:var(--warn)}
.delta small{display:block;font-weight:400;font-size:11.500px;color:var(--mute)}
.warnbox{background:var(--warn-bg);border-radius:12px;padding:10px 12px;font-size:13.500px;line-height:1.400;color:#4d3a12}
.warnbox .row{margin-top:10px}
.wa{background:#e9e1d8;border-radius:16px;padding:12px}
.wa-h{font-size:12px;font-weight:600;color:#54634f;margin-bottom:8px;display:flex;gap:6px;align-items:center}
.wa-b{background:#d9fdd3;border-radius:12px 12px 2px 12px;padding:6px;margin-left:28px}
.wa-c{background:#fff;border-radius:8px;overflow:hidden}
.wa-c .im{height:92px}
.wa-c .tx{padding:9px 10px;font-size:13px;line-height:1.450}
.wa-c .tx b{font-size:14.500px;display:block}
.wa-c .tx a{color:#0a6fd6;font-size:12.500px}
.wa-b p{font-size:13.500px;padding:6px 6px 2px}
.thinking{display:flex;gap:5px;padding:14px 4px}
.thinking i{width:8px;height:8px;border-radius:50%;background:var(--ai);animation:th 1s infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes th{50%{opacity:.25;transform:translateY(-3px)}}
.prop{border-radius:16px;background:var(--ai-bg);padding:14px}
.prop b{font-size:15.500px}
.prop ul{margin:8px 0 10px 18px;font-size:14px;line-height:1.500;color:#2a2b63}
.prop .keep{font-size:13px;color:#4a4b8a;margin-bottom:12px}
.bopt{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px;border-radius:14px;box-shadow:inset 0 0 0 1.500px var(--line);font-weight:600;font-size:15px}
.bopt.on{box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue-d);background:#f4f9ff}
.bopt small{font-weight:400;color:var(--mute);font-size:12.500px}

/* ---------- review + done ---------- */
.rv{padding:14px;display:grid;gap:8px}
.rv .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rv .hd b{font-size:15.500px;display:flex;gap:8px;align-items:center}
.rv .hd em{font-style:normal;font-weight:700;font-size:16px;white-space:nowrap}
.rv p{font-size:13px;line-height:1.450;color:#3d4a5f}
.rv .cx{font-size:12.500px;color:var(--ok);display:flex;gap:6px;align-items:flex-start;line-height:1.400}
.rv .old{text-decoration:line-through;color:var(--faint);font-weight:500;font-size:13px;margin-right:6px}
.apv{justify-self:start}
.apv.done{background:var(--ok-bg);color:var(--ok)}
.tot{padding:14px;display:grid;gap:7px;font-size:14px}
.tot div{display:flex;justify-content:space-between}
.tot .big{font-size:18px;font-weight:700;padding-top:9px;border-top:1px solid var(--line);margin-top:2px}
.tot small{color:var(--mute);font-size:12.500px}
.infobar{font-size:13px;line-height:1.400;padding:10px 12px;border-radius:12px;background:#e9f4ff;color:#0b4a8f;display:flex;gap:8px;align-items:flex-start}
.infobar button{font-weight:700;text-decoration:underline;color:inherit}
.done{background:#fff}
.done .scroll{padding:30px 22px;text-align:center}
.tick{width:76px;height:76px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;margin:10px auto 18px;animation:pop .5s cubic-bezier(.2,1.600,.4,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.done h2{font-size:26px;color:var(--navy);margin-bottom:6px}
.done>.scroll>p{color:var(--mute);font-size:14.500px;line-height:1.450;margin-bottom:20px}
.done .card{text-align:left;box-shadow:inset 0 0 0 1.500px var(--line);margin-bottom:12px}
.watch{padding:14px;font-size:13.500px;line-height:1.450;display:grid;gap:8px}
.watch div{display:flex;gap:8px;align-items:flex-start}
.watch svg{color:var(--ai);margin-top:2px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ================= v2: real MMT home, photos, chat onboarding, helper ================= */
img.scene{object-fit:cover}
.home{background:#f2f2f2}
.device[data-screen=home] .statusbar{background:#f8dec5}
.hm{display:block;width:100%;height:auto}
.home .plan-card{margin:2px 16px 10px;width:calc(100% - 32px)}
.home .h-trend{padding:14px 16px 120px}
.h-navimg{position:absolute;left:5.5%;bottom:18px;width:70.5%;height:auto;border-radius:32px;box-shadow:0 6px 22px rgba(11,37,69,.16);pointer-events:none}
.orb{background:none;box-shadow:0 8px 22px rgba(11,37,69,.4);width:64px;height:64px;right:4.6%;bottom:17px;overflow:hidden;padding:0}
.orb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}

.chat{background:#fff}
.chat .hero h1{font-size:38px;line-height:1.1;color:var(--navy);letter-spacing:-.5px;margin-top:6px}
.chat .hero h1 em{font-style:normal;background:linear-gradient(90deg,#1552c9,#53b2fe);-webkit-background-clip:text;background-clip:text;color:transparent}
.chat .hero .sub{font-size:20px;line-height:1.35;color:var(--navy);font-weight:600;margin:14px 0 8px}
.chat .hero .sub2{font-size:15px;line-height:1.5;color:#46546b;margin-bottom:26px}
.chat .hero .lbl{margin-bottom:10px}
.chat .bub{margin-top:14px;animation:enter .25s}
.chat .say{animation:enter .3s}
.chat .say .thinking{padding:8px 0}
.wg{margin:2px 0 6px 34px;padding:12px;border-radius:16px;background:#f6f8fc;display:grid;gap:10px;animation:enter .35s}
.wg-h{font-weight:700;font-size:14.5px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wg-h small{font-weight:400;font-size:12px;color:var(--mute)}
.wg .opt{background:#fff}
.wg .opt.on{background:var(--blue)}
.opt.tall{height:auto;padding:9px 14px;flex-direction:column;align-items:flex-start;gap:1px}
.opt.tall small{font-size:11.5px}
.tlist{background:#fff;border-radius:14px;overflow:hidden}
.tlist .trav{padding:10px;gap:9px;opacity:.55;transition:opacity .2s}
.tlist .trav.sel{opacity:1}
.ck{width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 2px #c3cddb;flex:none;margin-top:5px;display:grid;place-items:center;color:#fff}
.ck.on{background:var(--blue);box-shadow:none}
.by{font-size:11.5px;color:var(--faint);margin-top:4px}
.flexi{display:flex;gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:14px;background:#fff;font-weight:600;font-size:14px;line-height:1.3}
.flexi small{display:block;font-weight:400;color:var(--mute);font-size:12px;margin-top:2px}
.flexi i{width:38px;height:22px;border-radius:20px;background:#cfd8e4;flex:none;position:relative;transition:background .2s}
.flexi i::after{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.flexi.on i{background:var(--ok)}.flexi.on i::after{transform:translateX(16px)}
.wg .bopt{background:#fff;padding:11px 12px;font-size:14.5px;text-align:left;box-shadow:none}
.wg .bopt:active,.dest:active{background:#eef6ff}
.dest{display:flex;gap:10px;align-items:center;text-align:left;background:#fff;border-radius:14px;padding:8px}
.dest .th{width:72px;height:72px;border-radius:10px;overflow:hidden;flex:none}
.dest b{font-size:15px;display:flex;gap:6px;align-items:center}
.dest small{display:block;font-size:12.5px;line-height:1.35;color:#46546b;margin:3px 0}
.dest em{font-style:normal;font-size:12px;font-weight:600;color:var(--mute)}
.wg.sum{background:#fff;box-shadow:inset 0 0 0 1.5px #b9d9ff;display:block}
.wg.sum .wg-h{margin-bottom:10px}
.sendb.nudge{animation:nudge .8s ease-in-out 3}
@keyframes nudge{50%{box-shadow:0 0 0 8px rgba(0,140,255,.22);transform:scale(1.08)}}

.it .bx{display:block}
.it .bx>*+*{margin-top:7px}
.it .bx .sb{margin-top:3px}
.it .ph{float:right;width:54px;height:54px;border-radius:10px;overflow:hidden;margin:0 0 4px 10px}
.it .bx .hd{margin-top:0}
.it .bx::after{content:'';display:block;clear:both}
.it .hd em{margin-left:auto}

/* prototype helper: deliberately styled unlike the app */
.helper{border:1.5px dashed #c9a23a;background:#fffaeb;border-radius:14px;padding:12px;margin-bottom:18px}
.hp-t{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:#8a6a10;font-weight:700;margin-bottom:6px}
.helper p{font-size:12.5px;color:#6b5a2a;margin-bottom:8px}
.hp{display:block;width:100%;text-align:left;background:#fff;border:1px solid #ead9a6;border-radius:10px;padding:8px 10px;margin-top:6px;font-size:13px;line-height:1.35;color:#3d3414;font-family:ui-monospace,Consolas,monospace}
.hp:hover{background:#fff3cc}
.hp small{display:block;font-family:'DM Sans',sans-serif;font-size:11px;color:#8a6a10;margin-bottom:2px}
#mbar{display:none}
@media (max-width:820px){
  body.hasbar #mbar{display:flex;gap:8px;align-items:center;height:46px;padding:0 10px;overflow-x:auto;scrollbar-width:none;background:#fffaeb;border-bottom:1.5px dashed #c9a23a;white-space:nowrap;font-family:ui-monospace,Consolas,monospace;font-size:12px}
  #mbar b{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#8a6a10;flex:none}
  #mbar button{flex:none;background:#fff;border:1px solid #ead9a6;border-radius:8px;padding:6px 9px;color:#3d3414}
  body.hasbar .stage{height:calc(100% - 46px)}
}
@media (max-width:600px){body.hasbar .device{height:calc(100dvh - 46px)}}

.wg>.row{flex-wrap:nowrap}.wg>.row:has(.opt){flex-wrap:wrap}

/* screenshot mode (?shot=) */
body.shot #mbar{display:none!important}body.shot .device{height:100dvh!important}body.shot .stage{height:100%!important}body.shot *{animation:none!important;transition:none!important}body.shot .toast{display:none}
body.shot .stage,body.shot .device-wrap,body.shot .device{width:390px!important}