/* =========================================================================
   MAKON POS · ЭКРАН ВХОДА — концепция B «Центр»  ·  makon-login.css v1
   -------------------------------------------------------------------------
   Одна карточка по центру, под ней полоса «время · погода · намаз» и хадис.
   Подключается ПОСЛЕ style.css/makon-skin.css. Старые стили .lg2* не трогает —
   у нового экрана свои классы .lgb*, поэтому откат = убрать 2 строки из
   index.html (makon-login.css и makon-login.js).
   Цвета берутся из общего словаря токенов (makon-skin.css): --bg, --card,
   --tx, --tx2, --tx3, --line, --acc — значит тёмная тема работает сама.
   ========================================================================= */

.lgb{
  --g1:rgba(21,168,124,.30);      /* изумрудное свечение сверху слева */
  --g2:rgba(61,107,229,.22);      /* синее свечение снизу справа */
  --acc2:#0E7D5C;
  --on-acc:#fff;
  --lgb-soft:var(--card2,#F4F6FA);
  --lgb-sh:0 1px 2px rgba(16,24,40,.05),0 10px 34px rgba(16,24,40,.09);
  --lgb-sh-lg:0 24px 64px rgba(16,24,40,.16);
  min-height:100vh;min-height:100dvh;position:relative;display:flex;
  align-items:center;justify-content:center;padding:34px 20px;
  background:
    radial-gradient(920px 600px at 10% -10%,var(--g1),transparent 62%),
    radial-gradient(860px 560px at 94% 108%,var(--g2),transparent 62%),
    var(--bg);
  color:var(--tx);overflow-x:hidden;
}
html[data-theme="dark"] .lgb{
  --g1:rgba(47,215,162,.20);--g2:rgba(110,147,255,.16);
  --acc2:#15A87C;--on-acc:#04231A;
  --lgb-soft:#171F2B;
  --lgb-sh:0 2px 8px rgba(0,0,0,.45);
  --lgb-sh-lg:0 30px 72px rgba(0,0,0,.6);
}
/* мягкая сетка на фоне — «бумага», а не пустота */
.lgb::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.85;
  background-image:linear-gradient(var(--line) 1px,transparent 0),
                   linear-gradient(90deg,var(--line) 1px,transparent 0);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%)}
.lgb-in{position:relative;z-index:2;width:100%;max-width:428px}

/* ---------- карточка ---------- */
.lgb-card{background:var(--card);border:1px solid var(--line);border-radius:26px;
  padding:36px 34px 28px;box-shadow:var(--lgb-sh-lg)}
.lgb-brand{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:24px}
.lgb-logo{height:42px;width:auto;display:block}
html[data-theme="dark"] .lgb-logo{filter:brightness(0) invert(1);opacity:.94}
.lgb-sub{font-size:11.5px;font-weight:600;color:var(--tx3);letter-spacing:.2px;text-align:center}
.lgb-h1{font-size:25px;font-weight:800;letter-spacing:-.6px;margin:0 0 5px;text-align:center;color:var(--tx)}
.lgb-h2{font-size:13.5px;color:var(--tx2);margin:0 0 22px;line-height:1.5;text-align:center;font-weight:500}

/* ---------- поля ---------- */
.lgb-row{margin-bottom:15px}
.lgb-lab{display:block;font-size:11.5px;font-weight:700;color:var(--tx2);margin:0 0 7px}
.lgb-field{display:flex;align-items:center;gap:11px;height:54px;padding:0 15px;
  background:var(--lgb-soft);border:1.5px solid var(--line);border-radius:14px;
  transition:border-color .15s,box-shadow .15s,background .15s}
.lgb-field:focus-within{border-color:var(--acc);background:var(--card);
  box-shadow:0 0 0 4px var(--accs,rgba(21,168,124,.12))}
.lgb-field svg{width:19px;height:19px;color:var(--tx3);flex:0 0 auto}
.lgb-field:focus-within svg{color:var(--acc)}
/* важно: makon-skin.css красит ЛЮБОЙ input рамкой и кольцом на фокусе —
   гасим это для полей входа, рамку рисует сам .lgb-field */
.lgb-input,.lgb-input:focus,.lgb-input:hover{flex:1;min-width:0;border:none;outline:none;
  box-shadow:none;border-radius:0;background:transparent;color:var(--tx);
  font-size:15.5px;font-weight:600;height:100%;padding:0}
.lgb-input::placeholder{color:var(--tx3);font-weight:500}
.lgb-input:-webkit-autofill,.lgb-input:-webkit-autofill:hover,.lgb-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tx);-webkit-box-shadow:0 0 0 60px var(--lgb-soft) inset;
  caret-color:var(--tx)}
.lgb-eye{border:none;background:transparent;padding:4px;cursor:pointer;color:var(--tx3);
  display:flex;align-items:center}
.lgb-eye:hover{color:var(--tx)}
.lgb-caps{display:none;align-items:center;gap:7px;margin-top:8px;font-size:11.5px;
  font-weight:700;color:var(--warn,#D98A1F)}
.lgb-caps svg{width:15px;height:15px;flex:0 0 auto}
.lgb-caps.on{display:flex}

/* ---------- кнопка ---------- */
.lgb-btn{width:100%;height:54px;border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,var(--acc),var(--acc2));color:var(--on-acc);
  font-size:15.5px;font-weight:800;letter-spacing:.2px;display:flex;align-items:center;
  justify-content:center;gap:9px;box-shadow:0 8px 22px rgba(21,168,124,.28);
  transition:transform .15s,box-shadow .15s;margin-top:6px}
.lgb-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(21,168,124,.34)}
.lgb-btn:active{transform:translateY(0)}
.lgb-btn:disabled{opacity:.6;cursor:default;transform:none}
.lgb-btn svg{width:19px;height:19px}
.lgb-btn.ghost{background:transparent;color:var(--tx2);border:1.5px solid var(--line);
  box-shadow:none;font-weight:700;height:48px;font-size:14px}
.lgb-btn.ghost:hover{border-color:var(--line2,var(--line));color:var(--tx);
  transform:none;box-shadow:none}

/* ---------- ошибка (в неё пишет doLogin из app.js) ---------- */
.lgb-err{display:none;gap:10px;padding:12px 14px;border-radius:12px;
  background:var(--dngs,rgba(226,71,74,.10));border:1px solid rgba(226,71,74,.30);
  margin-bottom:15px;font-size:13px;font-weight:700;color:var(--dng,#E2474A);line-height:1.45}
.lgb-err:not(:empty){display:block;animation:lgbShake .35s}
.lgb-err div{font-weight:500;color:var(--tx2)}
.lgb-err code{background:var(--lgb-soft)!important;color:var(--tx)!important;
  padding:1px 6px!important;border-radius:5px!important;font-size:11.5px!important}
@keyframes lgbShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ---------- подвал карточки ---------- */
.lgb-hint{font-size:11.5px;color:var(--tx3);text-align:center;margin-top:14px;
  line-height:1.55;font-weight:500}
.lgb-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.lgb-lang{display:flex;background:var(--lgb-soft);border:1px solid var(--line);
  border-radius:11px;padding:3px}
.lgb-lang button{border:none;background:transparent;color:var(--tx3);font-size:12px;
  font-weight:800;padding:6px 12px;border-radius:8px;cursor:pointer;letter-spacing:.3px}
.lgb-lang button.on{background:var(--card);color:var(--tx);box-shadow:var(--lgb-sh)}
.lgb-ico{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);
  background:var(--lgb-soft);color:var(--tx2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex:0 0 auto}
.lgb-ico:hover{color:var(--tx)}
.lgb-ico svg{width:18px;height:18px}
.lgb-foot{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11px;color:var(--tx3);font-weight:600}
.lgb-dot{display:inline-flex;align-items:center;gap:6px}
.lgb-dot i{width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 3px var(--accs,rgba(21,168,124,.12));display:block;flex:0 0 auto}
.lgb-dot.off i{background:var(--dng,#E2474A);box-shadow:0 0 0 3px rgba(226,71,74,.14)}

/* ---------- полоса «время · погода · намаз» ---------- */
.lgb-strip{display:flex;align-items:center;gap:10px;margin-top:16px;padding:13px 16px;
  border-radius:16px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--lgb-sh);font-size:12.5px;font-weight:700;color:var(--tx2);
  flex-wrap:wrap;justify-content:center}
.lgb-strip>span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.lgb-strip b{color:var(--tx);font-weight:800}
.lgb-sep{width:1px;height:16px;background:var(--line);flex:0 0 auto;display:block!important}
.lgb-time{font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;font-size:17px;
  color:var(--tx)!important;letter-spacing:-.3px;font-weight:700;font-feature-settings:'tnum'}
.lgb-date{text-align:center;margin-top:11px;font-size:11.5px;color:var(--tx3);font-weight:700}
.lgb-quote{text-align:center;margin-top:9px;font-size:12.5px;color:var(--tx3);
  font-style:italic;line-height:1.6;font-weight:600;padding:0 10px}
.lgb-quote b{font-style:normal;font-weight:800;color:var(--tx3)}

/* ---------- экраны 2FA / смены пароля ---------- */
.lgb-badge{width:62px;height:62px;border-radius:19px;display:flex;align-items:center;
  justify-content:center;margin:0 auto 16px;background:var(--accs,rgba(21,168,124,.12));color:var(--acc)}
.lgb-badge svg{width:29px;height:29px}
.lgb-spin{width:46px;height:46px;border:3.5px solid var(--line);border-top-color:var(--acc);
  border-radius:50%;margin:4px auto 0;animation:lgbSpin .9s linear infinite}
@keyframes lgbSpin{to{transform:rotate(360deg)}}
.lgb-tg{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:13px;
  background:var(--lgb-soft);border:1px solid var(--line);margin-top:18px;text-align:left}
.lgb-tg svg{width:20px;height:20px;color:var(--blue,#4F7CFF);flex:0 0 auto;margin-top:1px}
.lgb-tg-t{font-size:12px;color:var(--tx2);line-height:1.6;font-weight:600}
.lgb-tg-t b{color:var(--tx)}
.lgb-center{text-align:center}
.lgb-code{text-align:center;font-size:26px!important;letter-spacing:10px;font-weight:800;
  font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif}
.lgb-meter{display:flex;gap:5px;margin-top:9px}
.lgb-meter i{height:4px;flex:1;border-radius:3px;background:var(--line);display:block}
.lgb-meter i.on{background:var(--acc)}
.lgb-meter i.mid{background:var(--warn,#D98A1F)}
.lgb-rules{margin-top:9px;font-size:11.5px;color:var(--tx3);line-height:1.6;font-weight:600}
.lgb-rules b{color:var(--acc)}
.lgb-rules b.mid{color:var(--warn,#D98A1F)}

/* ---------- телефон ---------- */
@media (max-width:560px){
  .lgb{padding:20px 14px 26px;align-items:flex-start}
  .lgb::before{display:none}
  .lgb-card{padding:26px 20px 22px;border-radius:22px}
  .lgb-h1{font-size:22px}
  .lgb-logo{height:36px}
  .lgb-field{height:52px}
  .lgb-input{font-size:16px}   /* iOS не зумит поле при фокусе только от 16px */
  .lgb-btn{height:52px}
  .lgb-strip{font-size:11.5px;padding:11px 12px;gap:8px}
  .lgb-time{font-size:15px}
  .lgb-strip .lgb-hide-sm,.lgb-strip .lgb-hide-sm+.lgb-sep{display:none!important}
}
@media (max-height:620px){
  .lgb{align-items:flex-start}
  .lgb-brand{margin-bottom:16px}
  .lgb-quote{display:none}
}