:root { --bg:#f3f5f8; --card:#fff; --text:#16202e; --soft:#566274; --line:#dde2ea; --brand:#2d5fa8; --brand-soft:#e8eff9; --warn:#9b3b1b; }
body.wellness { --brand:#1f7a6d; --brand-soft:#e4f3f0; }
* { box-sizing:border-box; }
html, body { margin:0; background:#e6e9ee; color:var(--text); font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.demo-note { background:#fff6d6; border-bottom:1px solid #e6d58a; font-size:13px; line-height:1.5; padding:8px 14px; text-align:center; }
.phone { max-width:430px; min-height:calc(100vh - 38px); margin:0 auto; background:var(--bg); display:flex; flex-direction:column; box-shadow:0 0 0 1px var(--line); }
.top { background:var(--brand); color:#fff; padding:14px 16px 12px; }
.top .name { font-size:18px; font-weight:700; line-height:1.2; }
.top .sub { font-size:12.5px; opacity:.92; margin-top:3px; }
.screen { flex:1; padding:14px 14px 8px; display:none; }
.screen.on { display:block; }
h2 { font-size:17px; margin:2px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.lbl { font-size:11.5px; color:var(--soft); text-transform:uppercase; letter-spacing:.07em; }
.big { font-size:26px; font-weight:700; margin-top:2px; }
.row { display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:8px 0; border-top:1px solid var(--line); align-items:center; }
.row.first { border-top:0; }
.up { color:#1f8f5a; font-weight:600; }
.tag { display:inline-block; font-size:12.5px; font-weight:600; color:var(--warn); background:#fbece6; border-radius:6px; padding:3px 8px; }
p { font-size:14.5px; line-height:1.55; margin:6px 0 0; }
.soft { color:var(--soft); }
.small { font-size:12.5px; line-height:1.5; color:var(--soft); margin-top:8px; }
.btn { display:block; width:100%; min-height:46px; margin-top:10px; font-size:14.5px; font-weight:700; border:0; border-radius:8px; background:var(--brand); color:#fff; cursor:pointer; text-align:center; text-decoration:none; line-height:46px; }
.btn.alt { background:#fff; color:var(--brand); border:1.5px solid var(--brand); line-height:43px; }
details { border-top:1px solid var(--line); padding:10px 0; }
details:first-of-type { border-top:0; }
summary { font-size:14.5px; font-weight:600; cursor:pointer; line-height:1.4; }
details p { margin-top:8px; }
details a { color:var(--brand); font-weight:600; font-size:13.5px; }
iframe { width:100%; border:0; border-radius:12px; background:transparent; display:block; }
.tabs { position:sticky; bottom:0; display:grid; grid-template-columns:repeat(5, 1fr); background:#fff; border-top:1px solid var(--line); margin-top:auto; }
.tabs button { min-height:56px; border:0; background:#fff; font-size:12px; font-weight:600; color:var(--soft); cursor:pointer; padding:6px 2px; border-top:3px solid transparent; }
.tabs button.on { color:var(--brand); border-top-color:var(--brand); }

.top .brand { display:flex; align-items:center; gap:9px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,.28); }
.top .brand svg { flex:none; border-radius:6px; box-shadow:0 0 0 1.5px rgba(255,255,255,.55); }
.top .bname { font-size:15px; font-weight:700; letter-spacing:.08em; line-height:1.1; }
.top .btag { font-size:11.5px; letter-spacing:.06em; opacity:.92; margin-top:2px; }
.foot { font-size:12.5px; line-height:1.5; color:var(--soft); padding:14px 16px 16px; border-top:1px solid var(--line); margin:0 14px; text-align:center; }