/* Цифровой 112 — прототип по концепту design/board.html */
@font-face{font-family:Onest;font-weight:400 700;font-display:swap;src:url(fonts/Onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-weight:400 700;font-display:swap;src:url(fonts/Onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Unbounded;font-weight:500 800;font-display:swap;src:url(fonts/Unbounded-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-weight:500 800;font-display:swap;src:url(fonts/Unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --night:#101A3A;--night-2:#18244D;--ink:#0E1428;--snow:#F6F8FC;--mist:#E6ECF5;--line:#D5DDEA;--muted:#5F6A84;
  --sos:#FF3D2E;--sos-deep:#D92718;--sos-text:#C8231A;--sos-soft:#FFE3DF;
  --help:#16B497;--help-text:#0E7A66;--help-soft:#D9F5EE;
  --amber:#F2A33A;--amber-text:#8A5300;--amber-soft:#FDF0DB;
  --violet:#5B6CFF;
  --dark:#05070F;--dark-2:#0F1527;--dark-3:#141B2E;--dark-line:#1E2740;--dark-ink:#DCE3F2;--dark-muted:#8A96B2;
  --display:Unbounded,Onest,system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Onest,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--snow);color:var(--ink);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
h1,h2,h3,h4,p{margin:0}
svg{flex-shrink:0}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

/* ---------- рамка: телефон на всю ширину, на компьютере — макет телефона рядом с пояснением ---------- */
.stage{min-height:100%;display:flex}
.phone{position:relative;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--snow);overflow:hidden}
.side{display:none}
@media (min-width:900px){
  html{background:var(--night)}
  body{background:var(--night);color:var(--snow);overflow:hidden}
  body:before,body:after{content:"";position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none}
  body:before{width:900px;height:420px;left:-200px;top:20%;background:#2BD4B5;opacity:.35;transform:rotate(-12deg)}
  body:after{width:800px;height:420px;right:-160px;bottom:-10%;background:var(--violet);opacity:.25;transform:rotate(14deg)}
  .stage{position:relative;z-index:1;height:100dvh;align-items:center;justify-content:center;gap:72px;padding:28px}
  .phone{width:390px;height:min(820px,calc(100dvh - 56px));border-radius:48px;color:var(--ink);box-shadow:0 0 0 11px #1a2140,0 0 0 12.5px #3A4470,0 50px 90px -30px #000b;flex:none}
  .side{display:block;max-width:440px}
  .side h1{font-family:var(--display);font-weight:800;font-size:46px;line-height:1.04;letter-spacing:-.02em}
  .side .sub-h{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.35;color:#B9C3DD;margin-top:14px}
  .side p{color:#B9C3DD;font-size:16px;line-height:1.55;margin-top:18px;max-width:40ch}
  .side-qr{margin:26px 0 0;display:flex;align-items:center;gap:18px}
  .side-qr img{width:150px;height:150px;background:#fff;border-radius:18px;padding:8px}
  .side-qr figcaption{color:#B9C3DD;font-size:15px;max-width:14ch}
  .side .side-note{font-size:13.5px;color:#8F9BBB}
}

/* ---------- полоса «Демо» ---------- */
.demo-strip{display:flex;align-items:center;gap:8px;padding:calc(8px + var(--safe-t)) 16px 8px;background:var(--amber-soft);color:var(--amber-text);font-size:12.5px;font-weight:600;line-height:1.3;z-index:6;flex:none}
.demo-strip svg{width:16px;height:16px}
@media (min-width:900px){.demo-strip{padding-top:18px;justify-content:center}}

#app{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.screen{flex:1;display:flex;flex-direction:column;min-height:0;animation:enter .2s ease-out}
@keyframes enter{from{opacity:0}to{opacity:1}}
.pad{flex:1;overflow-y:auto;padding:4px 18px 18px;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.foot{padding:10px 18px calc(14px + var(--safe-b));flex:none}

/* ---------- верхняя строка ---------- */
.bar{display:flex;align-items:center;gap:6px;min-height:54px;padding:6px 8px 4px;flex:none}
.bar h2{font-family:var(--display);font-size:17px;font-weight:700;flex:1;letter-spacing:-.01em}
.brand{flex:1;display:flex;align-items:center;gap:9px;padding-left:10px;font-family:var(--display);font-weight:800;font-size:16px}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--sos)}
.icon-btn{width:44px;height:44px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;color:inherit}
.icon-btn .i{width:23px;height:23px}
.icon-btn:active{background:#0e14280f}

/* ---------- общие ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border:0;border-radius:16px;font-weight:700;font-size:15.5px;padding:12px 16px}
.btn .i{width:19px;height:19px}
.btn-sos{background:var(--sos);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-mist{background:var(--mist);color:var(--ink)}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn+.btn{margin-top:8px}
.linkish{background:none;border:0;min-height:44px;width:100%;font-weight:600;font-size:14.5px;color:var(--sos-text)}
.muted{color:var(--muted)}
.small{font-size:13.5px}

/* ---------- 0. знакомство ---------- */
.onb{flex:1;overflow-y:auto;padding:22px 22px calc(18px + var(--safe-b));display:flex;flex-direction:column}
.onb .mark{width:64px;height:64px;border-radius:20px;background:var(--sos);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px;box-shadow:0 18px 36px -12px #ff3d2eaa;margin:6px 0 20px}
.onb h1{font-family:var(--display);font-weight:800;font-size:27px;line-height:1.12;letter-spacing:-.01em}
.onb .lead{color:var(--muted);margin:12px 0 18px;font-size:15.5px}
.onb ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:13px}
.onb li{display:flex;gap:12px;font-size:14.5px;color:var(--muted);line-height:1.4}
.onb li .i{color:var(--help);margin-top:1px}
.onb li b{display:block;color:var(--ink);font-size:15px}
.onb .notice{background:var(--amber-soft);color:#6d4300;border-radius:16px;padding:13px 15px;font-size:14px;margin-bottom:16px}
.onb .grow{flex:1}

/* ---------- 1. главный экран: SOS ---------- */
.loc{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:13.5px;color:var(--muted)}
.loc b{color:var(--ink);font-weight:600}
.loc .dot{width:8px;height:8px;border-radius:50%;background:var(--help);box-shadow:0 0 0 4px var(--help-soft);flex:none}
.active-call{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;border:0;border-radius:14px;background:var(--help-soft);color:var(--help-text);padding:12px 14px;font-weight:700;font-size:14.5px;text-align:left;min-height:48px}
.active-call i{width:8px;height:8px;border-radius:50%;background:var(--help);animation:blink 1.4s infinite}
.sos-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 0 14px;min-height:250px}
.sos-ring{position:relative;width:212px;height:212px;display:grid;place-items:center}
.sos-ring:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:50%;border:3px solid var(--sos-soft)}
.hold-ring{position:absolute;inset:0;width:212px;height:212px;transform:rotate(-90deg);pointer-events:none}
.hold-ring circle{fill:none;stroke:var(--sos);stroke-width:3.5;stroke-linecap:butt;stroke-dasharray:656;stroke-dashoffset:656}
.sos{position:relative;z-index:1;width:184px;height:184px;border-radius:50%;border:0;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#FF6A5C,var(--sos) 55%,var(--sos-deep));color:#fff;font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:.02em;box-shadow:0 24px 50px -14px #ff3d2eb3;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;transition:transform .15s}
.sos.pressing{transform:scale(.95)}
.hint{font-size:14px;color:var(--muted);text-align:center;min-height:20px}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.svc button{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;min-height:48px;font-size:14.5px;font-weight:600;color:var(--ink);text-align:left}
.svc button .i{width:21px;height:21px}
.svc button[aria-pressed=true]{border-color:var(--sos);box-shadow:0 0 0 1px var(--sos) inset;color:var(--sos-text)}
.svc .wide{grid-column:1/-1;justify-content:center;color:var(--muted);font-weight:500}
.bottom-row{display:flex;gap:8px;margin-top:10px}
.bottom-row button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:14px;padding:12px 6px;min-height:50px;font-size:14px;font-weight:700;white-space:nowrap}
.bottom-row .i{width:18px;height:18px}
.quiet-btn{background:var(--ink);color:#fff}
.call-btn{background:var(--mist);color:var(--ink)}
.under{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.under button{background:none;border:0;min-height:44px;padding:0 4px;font-size:13.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px}
.under button .i{width:17px;height:17px}
.under button[aria-pressed=true]{color:var(--amber-text)}

/* ---------- отправка ---------- */
.sending{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 24px}
.pulse{width:104px;height:104px;margin:0 auto 24px;border-radius:50%;background:var(--sos);display:grid;place-items:center;color:#fff;position:relative;z-index:0}
.pulse .i{width:44px;height:44px}
.pulse:before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sos);animation:ping 1.4s ease-out infinite;z-index:-1}
@keyframes ping{from{transform:scale(1);opacity:.45}to{transform:scale(1.8);opacity:0}}
.sending h1{font-family:var(--display);font-weight:700;font-size:22px;text-align:center;line-height:1.2}
.sending .what{text-align:center;margin-top:8px;color:var(--muted);font-size:14.5px}

/* ---------- статусы (вертикальные шаги) ---------- */
.steps{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:11px}
.steps li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--muted)}
.steps .tk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--mist);flex:none}
.steps .tk .i{width:12px;height:12px;stroke:#fff;stroke-width:3;opacity:0}
.steps li.done{color:var(--ink)}
.steps li.done .tk{background:var(--help)}
.steps li.done .tk .i{opacity:1}
.steps li.now{color:var(--ink);font-weight:700}
.steps li.now .tk{background:#fff;border:2px solid var(--help);box-shadow:0 0 0 4px var(--help-soft)}

/* ---------- 3. помощь едет: карта и шторка ---------- */
.track{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.map{position:relative;height:300px;flex:none;background:#E4EBF2;overflow:hidden}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .back{position:absolute;left:10px;top:10px;background:#fff;box-shadow:0 6px 18px -8px #101a3a66;z-index:2}
.map .tag-scheme{position:absolute;right:10px;top:16px;background:#ffffffe6;border-radius:10px;padding:4px 9px;font-size:12px;font-weight:600;color:var(--muted)}
.sheet{position:relative;margin-top:-26px;background:#fff;border-radius:26px 26px 0 0;padding:16px 18px calc(16px + var(--safe-b));flex:1;display:flex;flex-direction:column;box-shadow:0 -10px 30px -12px #101a3a40}
.grab{width:38px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 14px}
.eta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.eta h3{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.2}
.eta .min{font-family:var(--display);font-weight:800;font-size:30px;color:var(--help);line-height:1;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.eta .min small{display:block;font-family:Onest,sans-serif;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:5px}
.note{font-size:12.5px;color:var(--muted);margin:6px 0 2px}
.acts{display:flex;gap:8px;margin-top:16px}
.acts button{position:relative;flex:1;display:flex;justify-content:center;align-items:center;gap:6px;border:0;border-radius:13px;background:var(--mist);min-height:48px;padding:10px;font-size:14px;font-weight:700}
.acts .i{width:18px;height:18px}
.badge{min-width:19px;height:19px;border-radius:10px;background:var(--sos);color:#fff;font-size:11.5px;display:inline-grid;place-items:center;padding:0 5px}
.feed{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.feed p,.feed button{font-size:13px;color:var(--muted);display:flex;gap:8px;text-align:left;line-height:1.4}
.feed p:before,.feed button:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--help);margin-top:6px;flex:none}
.feed button{background:none;border:0;padding:0;color:var(--violet);font-weight:600;min-height:32px;align-items:flex-start}
.arrived{background:var(--help);color:#fff;border-radius:18px;padding:16px;margin-top:14px}
.arrived h4{font-family:var(--display);font-size:17px}
.arrived p{font-size:14px;margin-top:4px;opacity:.95}
.arrived .btn{margin-top:12px;background:#fff;color:var(--help-text);min-height:46px}

/* ---------- 2. тихий вызов (тёмный) ---------- */
.phone.dark{background:var(--dark);color:var(--dark-ink)}
.phone.dark .demo-strip{background:#1d1708;color:#e9c37a}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px 12px;border-bottom:1px solid #141A2B;flex:none}
.qhead strong{font-family:var(--display);font-size:15px;font-weight:700;color:#E9EEF8;display:block}
.qhead span{font-size:12px;color:var(--dark-muted)}
.live{display:flex;align-items:center;gap:6px;font-size:12px;color:#7FE3CF;white-space:nowrap}
.live i{width:7px;height:7px;border-radius:50%;background:#2BD4B5;box-shadow:0 0 10px #2BD4B5}
.chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:14px 16px}
.chat:before{content:"";flex:1}
.sys{align-self:center;font-size:12px;color:var(--muted);background:var(--mist);border-radius:10px;padding:6px 10px;text-align:center;max-width:92%}
.msg{max-width:84%;border-radius:18px;padding:10px 13px;font-size:14.5px;line-height:1.4;word-wrap:break-word}
.msg.in{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.out{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.msg small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.msg img{display:block;max-width:100%;border-radius:12px}
.typing{font-size:12.5px;color:var(--muted);padding:0 4px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 16px 8px;flex:none}
.quick button{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:46px;font-size:14px;font-weight:600;text-align:center}
.quick .w{grid-column:1/-1}
.composer{display:flex;gap:8px;padding:6px 14px calc(10px + var(--safe-b));flex:none}
.composer input{flex:1;min-width:0;min-height:48px;border-radius:14px;border:1px solid var(--line);background:#fff;padding:0 14px;font-size:16px}
.composer .icon-btn{width:48px;height:48px;border-radius:14px;background:var(--ink);color:#fff}
.composer .icon-btn.plain{background:var(--mist);color:var(--ink)}
.phone.dark .sys{background:#0D1220;color:#6E7A96}
.phone.dark .msg.in{background:var(--dark-3);border-color:var(--dark-3);color:var(--dark-ink)}
.phone.dark .msg.out{background:#1F2A47}
.phone.dark .msg small,.phone.dark .typing{color:#6E7A96}
.phone.dark .quick button{background:var(--dark-2);border-color:var(--dark-line);color:#C9D2E6}
.phone.dark .composer input{background:var(--dark-2);border-color:var(--dark-line);color:var(--dark-ink)}
.phone.dark .composer input::placeholder{color:#525D78}
.phone.dark .composer .icon-btn{background:#1F2A47}
.phone.dark .composer .icon-btn.plain{background:var(--dark-2);color:var(--dark-ink)}
.phone.dark .icon-btn:active{background:#ffffff14}
.phone.dark .sheet{background:#0B101D;box-shadow:none}
.phone.dark .eta .min small,.phone.dark .note,.phone.dark .steps li,.phone.dark .feed p{color:var(--dark-muted)}
.phone.dark .steps li.done,.phone.dark .steps li.now{color:var(--dark-ink)}
.phone.dark .steps .tk{background:var(--dark-line)}
.phone.dark .steps li.done .tk{background:var(--help)}
.phone.dark .steps li.now .tk{background:var(--dark);box-shadow:0 0 0 4px #16b49733}
.phone.dark .acts button,.phone.dark .btn-mist{background:var(--dark-2);color:var(--dark-ink)}
.phone.dark .map{filter:brightness(.55) saturate(.8)}
.phone.dark .grab{background:var(--dark-line)}
.phone.dark .pulse,.phone.dark .pulse:before{background:#1F2A47}

/* ---------- 4. вызов по SMS ---------- */
.off-top{display:flex;align-items:center;gap:10px;background:var(--amber-soft);border-radius:16px;padding:12px 14px;margin-top:4px;color:var(--amber-text);font-size:14px;font-weight:600}
.big-ok{margin:20px 0 6px;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2}
.sub{font-size:14px;color:var(--muted);line-height:1.45}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;margin-top:12px}
.card .k{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.card .v{font-size:15px;font-weight:600}
.card .v small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.queue{display:flex;align-items:center;gap:12px}
.queue .thumb{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,#3B2A2A,#8C4A2F 60%,#F2A33A);flex:none}
.queue .t{flex:1;font-size:13px;line-height:1.35;color:var(--muted)}
.queue .t b{display:block;font-size:14px;color:var(--ink)}
.card .x{background:none;border:0;padding:0;margin-top:8px;min-height:36px;font-size:13.5px;color:var(--sos-text);font-weight:600}
.sms-in{background:var(--help-soft);border-color:#bfe9dc}
.sms-in .k{color:var(--help-text)}

/* ---------- 5. медкарта и близкие ---------- */
.mh h2{font-family:var(--display);font-size:22px;font-weight:700;margin-top:2px}
.verified{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--help-text);background:var(--help-soft);border-radius:20px;padding:5px 10px;margin-top:10px}
.verified .i{width:13px;height:13px;stroke-width:2.6}
.privacy{font-size:13px;color:var(--muted);margin:10px 0 4px;line-height:1.4}
.field{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--mist);font-size:14.5px}
.field span{color:var(--muted);flex:none}
.field input,.field select{flex:1;min-width:0;border:0;background:transparent;text-align:right;font-weight:600;font-size:15px;min-height:44px;padding:0;-webkit-appearance:none;appearance:none}
.field select{text-align-last:right;cursor:pointer}
.field input::placeholder{color:#a3adc2;font-weight:500}
.field input:focus{outline:none}
.field:focus-within{border-bottom-color:var(--violet)}
.people{margin-top:18px}
.people .k{font-size:13px;color:var(--muted);margin-bottom:4px}
.ppl{display:flex;align-items:center;gap:10px;min-height:52px;font-size:14.5px;width:100%;background:none;border:0;padding:0;text-align:left}
.ava{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;flex:none}
.tog{margin-left:auto;width:42px;height:25px;border-radius:13px;background:var(--line);position:relative;flex:none;transition:background .2s}
.tog:after{content:"";position:absolute;left:2px;top:2px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
[aria-checked=true] .tog{background:var(--help)}
[aria-checked=true] .tog:after{transform:translateX(17px)}
.add-form{display:flex;gap:8px;margin-top:6px}
.add-form input{flex:1;min-width:0;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#fff;font-size:16px}
.add-form button{min-height:46px;border:0;border-radius:12px;background:var(--mist);font-weight:700;padding:0 14px}

/* ---------- 6. экран близкого ---------- */
.lock{flex:1;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 30% 0%,#2C3F7A,#121A38 55%,#070A18);color:#fff;position:relative;overflow-y:auto}
.lock .back{position:absolute;left:8px;top:8px;color:#fff}
.clock{text-align:center;margin-top:40px}
.clock .d{font-size:14px;color:#C9D2EC}
.clock .t{font-family:var(--display);font-weight:500;font-size:68px;line-height:1;margin-top:4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.notif{margin:30px 14px 0;background:#f6f8fc29;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #ffffff24;border-radius:22px;padding:13px 14px}
.notif .app{display:flex;align-items:center;gap:8px;font-size:12px;color:#D7DEF0;margin-bottom:6px}
.notif .app i{width:20px;height:20px;border-radius:6px;background:var(--sos);display:grid;place-items:center;font-style:normal;font-size:8.5px;font-weight:800}
.notif .app span{margin-left:auto;color:#A9B3CF}
.notif b{display:block;font-size:14.5px;margin-bottom:3px}
.notif p{font-size:13.5px;line-height:1.4;color:#E6EBF7}
.notif .btns{display:flex;gap:6px;margin-top:10px}
.notif .btns button{flex:1;border:0;border-radius:12px;background:#ffffff29;color:#fff;min-height:40px;font-size:13px;font-weight:600}
.notif.two{margin-top:10px}
.lock .explain{margin:auto 18px calc(18px + var(--safe-b));font-size:13px;color:#B9C3DD;text-align:center;padding-top:24px}

/* ---------- фото ---------- */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.photo-grid figure{margin:0;border-radius:16px;overflow:hidden;background:var(--mist);aspect-ratio:3/4;position:relative}
.photo-grid img,.photo-grid svg{width:100%;height:100%;object-fit:cover;display:block}
.photo-grid figcaption{position:absolute;left:8px;right:8px;bottom:8px;background:#ffffffeb;border-radius:8px;font-size:12px;padding:4px 7px;font-weight:600;color:var(--help-text)}
.empty{border:1.5px dashed var(--line);border-radius:16px;padding:22px;text-align:center;color:var(--muted);margin-top:12px;font-size:14.5px}
.info{display:flex;gap:10px;background:var(--mist);border-radius:14px;padding:11px 13px;font-size:13.5px;color:var(--muted)}
.info .i{width:19px;height:19px}

/* ---------- памятки и «о проекте» ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{min-height:44px;border-radius:22px;border:1px solid var(--line);background:#fff;padding:8px 14px;font-size:14px;font-weight:600}
.chip[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.guide{counter-reset:g;list-style:none;padding:0;margin:12px 0 0;display:grid;gap:9px}
.guide li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px 12px 48px;position:relative;font-size:14.5px}
.guide li:before{counter-increment:g;content:counter(g);position:absolute;left:14px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--help-soft);color:var(--help-text);font-weight:700;font-size:12.5px;display:grid;place-items:center}
.phone.dark .guide li,.phone.dark .chip{background:var(--dark-2);border-color:var(--dark-line);color:var(--dark-ink)}
.about h1{font-family:var(--display);font-size:26px;font-weight:800;margin:4px 0 6px}
.about p{margin-top:10px;font-size:15px;color:var(--muted)}
.about h3{font-family:var(--display);font-size:15px;font-weight:700;margin-top:20px}
.about ul{padding-left:18px;margin:8px 0 0;color:var(--muted);font-size:14.5px}
.about li+li{margin-top:4px}
.about .qr{display:block;width:176px;height:176px;margin:18px auto 4px;background:#fff;border-radius:16px;padding:8px;border:1px solid var(--line)}
.setting{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:10px;text-align:left;min-height:60px}
.setting b{display:block;font-size:14.5px}
.setting span{font-size:12.5px;color:var(--muted)}

/* ---------- шторка-диалог и тост ---------- */
.modal-bg{position:absolute;inset:0;background:#0e142880;display:flex;align-items:flex-end;z-index:20;animation:enter .15s}
.modal{background:var(--snow);color:var(--ink);width:100%;border-radius:26px 26px 0 0;padding:20px 18px calc(18px + var(--safe-b))}
.modal h3{font-family:var(--display);font-size:18px;font-weight:700}
.modal p{color:var(--muted);font-size:14.5px;margin:6px 0 14px}
.toast{position:absolute;left:14px;right:14px;bottom:calc(18px + var(--safe-b));background:#0e1428f2;color:#fff;border-radius:14px;padding:12px 15px;font-size:14px;z-index:30;box-shadow:0 10px 30px #0006}

@keyframes blink{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}