/* Вбудована форма входу (js/inline.js, шаблони templates/designs/<id>/ дизайнів з 'form.embed'). Лише вигляд; усе під .smsi.
   Кольори й шрифти — змінні сторінки, що вбудовує форму (тема сторінок читачів: --ink, --muted, --line, --coral…),
   із запасними значеннями. */
.smsi{ color:var(--ink, #27324A); }
.smsi *{ box-sizing:border-box; }
.smsi-form.loading-animation{ opacity:.6; pointer-events:none; }
.smsi-h{ margin:6px 0 4px; font:900 22px/1.2 var(--display, system-ui, sans-serif); }
.smsi-p{ margin:0 0 14px; color:var(--muted, #56698F); font-size:14px; line-height:1.5; }
.smsi-f{ display:grid; gap:6px; margin:0; }
.smsi-f > span:first-child{ font-size:13px; font-weight:700; }
.smsi-in{ display:flex; align-items:center; min-height:50px; padding:0 14px; border:2px solid var(--line, #C9DEF4); border-radius:16px; background:var(--surface, #fff); }
.smsi-in:focus-within{ border-color:var(--coral, #F08365); }
.smsi-in input{ flex:1 1 auto; min-width:0; height:46px; border:0; outline:none; background:transparent; color:var(--ink, #27324A); font:inherit; font-size:17px; }
.smsi-pre{ margin-right:6px; color:var(--muted, #56698F); font-size:17px; white-space:nowrap; }
.smsi-err{ margin:8px 2px 0; font-size:14px; line-height:1.35; color:var(--bad, #D1462F); }
.smsi-err:empty{ display:none; }
.smsi-btn{ display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; margin-top:12px; padding:12px 18px; border:0; border-radius:16px;
  background:var(--coral, #F08365); color:#fff; font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
.smsi-btn:active{ transform:translateY(1px); }
.smsi-or{ display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--muted, #56698F); font-size:13px; }
.smsi-or::before, .smsi-or::after{ content:""; flex:1; height:1px; background:var(--line, #C9DEF4); }
.smsi-apple{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; border-radius:16px; background:#000; color:#fff; font-weight:700; font-size:15px; text-decoration:none; }
.smsi-apple svg{ width:19px; height:19px; }
html:not(.is-apple) .smsi .apple-only{ display:none !important; }
.smsi-perks{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 14px; margin-top:12px; font-size:12px; color:var(--muted, #56698F); }

.smsi-otp{ position:relative; display:flex; justify-content:center; gap:10px; width:max-content; max-width:100%; margin:6px auto 4px; }
.smsi-otp span{ display:flex; align-items:center; justify-content:center; width:56px; height:64px; border:2px solid var(--line, #C9DEF4); border-radius:16px;
  background:var(--surface, #fff); font:900 28px var(--display, system-ui, sans-serif); }
.smsi-otp[data-len="5"] span, .smsi-otp[data-len="6"] span{ width:44px; height:56px; font-size:22px; }
.smsi-otp span.is-on{ border-color:var(--coral, #F08365); }
/* одне справжнє поле поверх клітинок: набір, вставка й автопідстановка коду з SMS (iOS вставляє всі цифри одразу) */
.smsi-otp input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; font-size:16px; caret-color:transparent; cursor:text; }
.smsi-otp.is-bad span{ border-color:var(--bad, #D1462F); animation:smsi-shake .3s; }
@keyframes smsi-shake{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.smsi-form[data-smsf="code"] .smsi-err{ text-align:center; }
.smsi-resend{ margin-top:8px; text-align:center; font-size:13px; }
.smsi-link{ border:0; background:none; padding:4px; font:inherit; font-weight:700; color:var(--coral, #F08365); cursor:pointer; }
.smsi-p .smsi-link{ padding:0; }
.smsi-link.is-wait{ color:var(--muted, #56698F); font-weight:400; cursor:default; }
.smsi-help{ margin-top:4px; text-align:center; font-size:13px; color:var(--muted, #56698F); }
.smsi-help summary{ display:inline-block; padding:4px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; list-style:none; }
.smsi-help summary::-webkit-details-marker{ display:none; }
.smsi-help div{ margin:6px 0 0; padding:10px 12px; border-radius:14px; background:var(--bg, #E9F2FB); text-align:left; line-height:1.45; }
.smsi-help a{ color:var(--ink, #27324A); }

.smsi-wait{ display:flex; align-items:center; justify-content:center; gap:10px; margin:4px 0 2px; color:var(--muted, #56698F); font-size:14px; font-weight:600; }
.smsi-wait--big{ flex-direction:column; gap:14px; padding:30px 0 20px; }
.smsi-spin{ width:18px; height:18px; border:3px solid var(--line, #C9DEF4); border-top-color:var(--coral, #F08365); border-radius:50%; animation:smsi-r .8s linear infinite; }
.smsi-wait--big .smsi-spin{ width:40px; height:40px; border-width:4px; }
@keyframes smsi-r{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .smsi-spin{ animation-duration:2s; } .smsi-otp.is-bad span{ animation:none; } }