/* Загрузчик веб-версии Rozvedka и offline.html — в стиле окна программы: токены app.css, стеклянная карточка как у входа
   (account.css .ac-card), кнопки .btn / .btn.primary окна, живой фон bg.js (RZGfx) за карточкой. Карточка не по центру:
   слева, текст по левому краю, внизу — тихая строка версии. Отступы три уровня: 8 внутри / 16 между / 32 между блоками. */
:root{
  color-scheme:dark;
  --bg:#030303; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --ink:#F2F2F6; --ink2:#C6C7D2; --ink3:#8E8FA0;
  --c1:#FF8F8F; --c2:#FF3030; --c1-rgb:255,120,120; --c2-rgb:255,45,45;
  --ok:#6FD39A; --err:#FF6B6B; --err-rgb:255,107,107;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --surface-1-rgb:10,10,10;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --glass-panel:blur(18px) saturate(160%); --glass-a:.78; --glass-hi:inset 0 1px 0 rgba(255,255,255,.07);
  --sp-in:8px; --sp-el:16px; --sp-sec:32px;
}
html[data-glass="soft"]{--glass-panel:blur(10px) saturate(135%); --glass-a:.86}
html[data-glass="strong"]{--glass-panel:blur(30px) saturate(185%); --glass-a:.66}
html.gfx-low{--glass-panel:none; --glass-a:.95}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}

/* живой фон окна + вуаль слева, где карточка (яркий фон не лежит прямо под текстом) */
#bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.bg-veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,3,3,.78) 0,rgba(3,3,3,.5) 38%,rgba(3,3,3,.18) 72%,rgba(3,3,3,.08) 100%)}

body.rzw-boot{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:1fr auto}
.rzw-stage{position:relative;z-index:1;display:flex;align-items:center;padding:var(--sp-sec) clamp(16px,7vw,112px)}
.rzw-foot{position:relative;z-index:1;display:flex;gap:var(--sp-el);flex-wrap:wrap;padding:0 clamp(16px,7vw,112px) 20px;color:var(--ink3);font-size:12px}

/* карточка — стекло, как вход окна */
.rzw-card{width:min(440px,100%);padding:28px 28px 24px;border-radius:var(--r-lg);border:1px solid var(--line2);
  background:rgba(var(--surface-1-rgb),var(--glass-a));-webkit-backdrop-filter:var(--glass-panel);backdrop-filter:var(--glass-panel);
  box-shadow:0 30px 80px rgba(0,0,0,.6),var(--glass-hi);animation:rzwUp .4s var(--ease-out)}
@keyframes rzwUp{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* логотип: настоящий знак окна (logo.png) + имя */
.rzw-mark{display:flex;align-items:center;gap:10px;margin:0 0 var(--sp-sec);font-weight:650;font-size:15px;color:var(--ink);letter-spacing:-.005em}
.rzw-mark::before{content:"";width:28px;height:28px;flex:none;background:url(logo.png) center/contain no-repeat}
.rzw-mark::after{content:"Rozvedka"}

.rzw-h{font-size:22px;line-height:1.25;margin:0 0 var(--sp-in);font-weight:650;color:var(--ink);text-wrap:balance}
.rzw-t{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0;white-space:pre-line;text-wrap:pretty}
.rzw-t b{color:var(--ink);font-weight:600}
.rzw-err{color:var(--err)}
.rzw-small{font-size:12px;line-height:1.5;color:var(--ink3);margin:var(--sp-el) 0 0}

/* кнопки — как .btn окна (стекло), но без «таблетки»: радиус 12 */
.rzw-acts{display:flex;flex-wrap:wrap;gap:var(--sp-in);margin-top:24px}
.rzw-btn{position:relative;isolation:isolate;overflow:hidden;height:40px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;text-decoration:none;font:inherit;font-size:13.5px;color:var(--ink);
  background:rgba(255,255,255,.055);-webkit-backdrop-filter:blur(8px) saturate(170%);backdrop-filter:blur(8px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.12),0 8px 24px -8px rgba(0,0,0,.55);
  transition:transform .16s var(--ease-out),background-color .2s var(--ease-out),box-shadow .2s var(--ease-out),opacity .2s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rzw-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 46%)}
.rzw-btn:hover{background:rgba(255,255,255,.1)}
.rzw-btn:active{transform:scale(.97)}
.rzw-btn:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
.rzw-btn:disabled{opacity:.5;cursor:default;transform:none}
.rzw-btn.pri{font-weight:600;background:linear-gradient(135deg,rgba(var(--c1-rgb),.34),rgba(var(--c2-rgb),.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(var(--c1-rgb),.3),inset 0 -12px 20px -12px rgba(var(--c2-rgb),.45),0 10px 30px -10px rgba(var(--c2-rgb),.4)}
.rzw-btn.pri:hover{background:linear-gradient(135deg,rgba(var(--c1-rgb),.46),rgba(var(--c2-rgb),.5))}
/* главное действие — на всю ширину карточки, второстепенные — строкой под ним */
.rzw-acts .rzw-btn.pri{flex:1 1 100%}

/* число-сверка входа и ожидание бота */
.rzw-code{margin:24px 0 0;padding:16px;border-radius:var(--r-lg);background:rgba(var(--c1-rgb),.08);border:1px solid rgba(var(--c1-rgb),.28);display:flex;align-items:center;gap:16px}
.rzw-pin{font-size:40px;line-height:1;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink)}
.rzw-code small{font-size:12.5px;line-height:1.45;color:var(--ink2)}
.rzw-wait{display:flex;align-items:center;gap:10px;margin-top:var(--sp-el);font-size:12.5px;color:var(--ink3)}
.rzw-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--c1);animation:rzwSpin .8s linear infinite}
@keyframes rzwSpin{to{transform:rotate(360deg)}}

/* «Обновление базы…»: тонкая полоска + процент справа */
.rzw-prog{margin-top:24px}
.rzw-prog-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--sp-in);font-size:12.5px;color:var(--ink3)}
.rzw-prog-row b{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rzw-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.rzw-bar > i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--c1),var(--c2));transition:width .25s var(--ease-out)}

/* списки цифр — без коробок: строки с тонким разделителем */
.rzw-list{margin:var(--sp-el) 0 0;padding:0;list-style:none;font-size:13px;color:var(--ink2)}
.rzw-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.rzw-list li:last-child{border-bottom:0}
.rzw-list li b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.rzw-file{display:none}

/* формы (вход почтой в оболочке) */
.rzw-form{display:grid;gap:var(--sp-in);margin-top:var(--sp-el)}
.rzw-in{width:100%;height:42px;padding:0 12px;font:inherit;font-size:16px;color:var(--ink);background:rgba(0,0,0,.38);border:1px solid var(--line2);border-radius:var(--r-md);outline:none;transition:border-color .15s,box-shadow .15s}
.rzw-in:focus-visible{border-color:rgba(var(--c1-rgb),.6);box-shadow:0 0 0 3px rgba(var(--c1-rgb),.18)}
.rzw-form .rzw-err{margin:0;min-height:1em;font-size:12.5px}

@media (max-width:560px){
  .bg-veil{background:linear-gradient(180deg,rgba(3,3,3,.55) 0,rgba(3,3,3,.72) 100%)}
  .rzw-stage{align-items:flex-start;padding-top:24px}
  .rzw-card{padding:24px 20px 20px}
  .rzw-mark{margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){.rzw-card{animation:none}.rzw-spin{animation-duration:2.4s}.rzw-bar > i{transition:none}}