body{background:var(--ink)}
.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:56px;padding:28px}
.side{color:#fff;max-width:320px;display:flex;flex-direction:column;gap:16px}
.side h2{font-size:28px}
.side p{color:rgba(255,255,255,.7);font-size:14.5px}
.side p a{color:#fff;text-decoration:underline}
.side .hint{background:var(--ink2);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;font-size:13.5px;color:rgba(255,255,255,.8)}
.side .hint ol{margin:8px 0 0 18px;display:grid;gap:4px}
.side .demo-tag{align-self:flex-start}
.phone{width:390px;height:min(844px,calc(100vh - 56px));min-height:640px;border-radius:52px;background:#000;padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 2px #2a2f2c;flex:none}
.screen{width:100%;height:100%;border-radius:42px;overflow:hidden;background:var(--paper);position:relative;display:flex;flex-direction:column}
.status{height:44px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 26px 0 30px;font-weight:600;font-size:14px;background:var(--paper);z-index:3}
.bat{width:24px;height:12px;border:1.5px solid var(--ink);border-radius:3px;position:relative}
.bat::after{content:'';position:absolute;inset:1.5px 5px 1.5px 1.5px;background:var(--ink);border-radius:1px}
.view{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:4px 18px 24px}
.view::-webkit-scrollbar{display:none}
.tabbar{flex:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:#fff;padding:8px 6px 20px}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#9AA09C;padding:4px 0}
.tabbar button.on{color:var(--ink)}
.tabbar button.on svg{stroke:var(--g)}
.tabbar svg.i{width:22px;height:22px}

@media(max-width:860px){.side{display:none}.stage{padding:0}}
@media(max-width:500px){
  .stage{display:block;min-height:0}
  .phone{width:100%;height:100vh;height:100dvh;min-height:0;border-radius:0;padding:0;box-shadow:none}
  .screen{border-radius:0}
  .status{display:none}
  .view{padding-top:max(14px,env(safe-area-inset-top))}
  .tabbar{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}

/* headers */
.hd{display:flex;align-items:center;gap:10px;padding:8px 0 14px}
.hd h1{font-size:20px;flex:1}
.back{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.hello{display:flex;align-items:center;justify-content:space-between;padding:6px 0 14px}
.hello h1{font-size:22px}
.lang-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600}

/* emergency */
.sos{display:flex;align-items:center;gap:12px;background:var(--r);color:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 10px 24px rgba(226,65,46,.28)}
.sos .ic{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.sos b{font-family:var(--f-head);font-size:16px;display:block}
.sos span{font-size:12.5px;opacity:.9}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;min-height:104px}
.tile .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.tile b{font-size:14px;line-height:1.25}
.tile small{font-size:11.5px;color:var(--muted);margin-top:-6px}
.ic.g{background:var(--g2);color:var(--g)}.ic.b{background:var(--b2);color:var(--b)}.ic.y{background:var(--y2);color:#B58500}.ic.r{background:var(--r2);color:var(--r)}.ic.o{background:#FFF0E5;color:var(--o)}.ic.k{background:#EEF0EE;color:var(--ink3)}
.sec-t{font-family:var(--f-head);font-size:15px;margin:20px 0 10px}
.alert-new{display:flex;gap:12px;align-items:center;background:var(--g2);border:1px solid #BFE6CF;border-radius:16px;padding:12px 14px}

/* steps */
.steps{display:flex;gap:5px;margin:0 0 16px}
.steps i{flex:1;height:4px;border-radius:2px;background:#E4E2DC}
.steps i.on{background:var(--g)}
.opt{width:100%;display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:13px 14px;text-align:left;margin-bottom:9px}
.opt.sel{border-color:var(--g);background:#F6FCF8}
.opt b{font-size:14.5px;display:block}
.opt small{font-size:12px;color:var(--muted)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:600}
.chip.sel{border-color:var(--g);background:var(--g);color:#fff}
.pay-logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
.recap{background:#fff;border:1px dashed #CFCBC0;border-radius:16px;padding:14px;font-size:13.5px}
.recap .row{padding:5px 0}
.success{text-align:center;padding:10px 0}
.success .big{width:72px;height:72px;border-radius:50%;background:var(--g2);color:var(--g);display:grid;place-items:center;margin:8px auto 14px}
.success .big svg{width:36px;height:36px;stroke-width:2.4}

/* dossier */
.idcard{background:var(--ink);color:#fff;border-radius:18px;padding:16px}
.idcard .row{gap:12px}
.idcard .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.idcard .meta div{background:rgba(255,255,255,.07);border-radius:12px;padding:8px 10px}
.idcard .meta small{display:block;font-size:10.5px;opacity:.6;text-transform:uppercase;letter-spacing:.05em}
.idcard .meta b{font-size:14px}
.seg{display:flex;background:#EFEDE7;border-radius:12px;padding:3px;margin:14px 0}
.seg button{flex:1;padding:8px 4px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 14px;margin-bottom:9px}
.item h4{font-size:14.5px;font-family:var(--f-body);font-weight:700}
.med{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.med:first-of-type{border-top:0}

/* assistant */
.chat{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.bub{max-width:86%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45}
.bub.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.bub.doc{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.bub.ai{align-self:flex-start;background:#F3F7FF;border:1px solid #D6E4FF;border-bottom-left-radius:5px}
.bub.sys{align-self:center;background:transparent;color:var(--muted);font-size:12.5px;text-align:center;max-width:100%}
.bub .who{font-size:11.5px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.bub ol{margin:6px 0 4px 18px;display:grid;gap:4px}
.bub .note{font-size:11px;opacity:.7;margin-top:6px}
.voice{display:flex;align-items:center;gap:8px}
.voice .wave{display:flex;align-items:center;gap:2px;height:22px}
.voice .wave i{width:3px;border-radius:2px;background:currentColor;opacity:.85}
.trans{font-size:12px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.18);opacity:.9}
.danger{align-self:stretch;background:var(--r);color:#fff;border-radius:16px;padding:12px 14px}
.danger a{display:flex;justify-content:center;margin-top:8px;background:#fff;color:var(--r);border-radius:999px;padding:10px;font-weight:700}
.search{align-self:stretch;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;gap:12px;align-items:center}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid #E4E2DC;border-top-color:var(--g);animation:sp 1s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.composer{position:sticky;bottom:-24px;background:var(--paper);padding:10px 0 4px;margin-top:6px}
.composer .bar{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 5px 5px 14px}
.composer input{flex:1;border:0;outline:0;font-size:14.5px;background:transparent;min-width:0}
.mic{width:42px;height:42px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;flex:none}
.mic.rec{background:var(--r);animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,65,46,.5)}100%{box-shadow:0 0 0 14px rgba(226,65,46,0)}}
.recbar{display:flex;align-items:center;gap:10px;flex:1;color:var(--r);font-weight:600;font-size:13.5px}
.recbar .wave{display:flex;gap:2px;align-items:center;height:22px;flex:1}
.recbar .wave i{width:3px;background:var(--r);border-radius:2px;animation:wv .8s ease-in-out infinite alternate}
@keyframes wv{from{height:4px}to{height:20px}}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:10}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:18px 18px 28px;z-index:11;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.7,.2,1);max-height:85%;overflow:auto}
.sheet.on{transform:none}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:#DDD;margin:0 auto 14px}
.paywait{text-align:center;padding:12px 0}
.paywait .spin{width:46px;height:46px;border-width:4px;margin:6px auto 14px}
.hos{display:flex;gap:12px;align-items:center;padding:12px 0}