:root{--b7:#1E3A8A;--b1:#DBEAFE;--b0:#EFF6FF;--o5:#F97316;--s95:#0F172A;--s7:#334155;--s6:#475569;--s4:#64748B;--s2:#E2E8F0;--s1:#F1F5F9;--bg:#F0F4FA;--gn:#16A34A;--gb:#DCFCE7;--rd:#DC2626;--rb:#FEE2E2;--am:#D97706;--al:#F59E0B;--ab:#FEF3C7;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#7E94B0;color:var(--s95);padding:40px 20px;}
.ph{text-align:center;margin-bottom:48px;}
.ph h1{font-size:22px;font-weight:800;color:#0F172A;}
.ph p{font-size:12px;color:#1E3A8A;margin-top:4px;}
.tags{display:inline-flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:12px;font-size:10px;font-weight:700;}
.tg{border-radius:4px;padding:3px 9px;}
.tg.g{background:#DCFCE7;color:#16A34A;}.tg.b{background:#DBEAFE;color:#1E40AF;}.tg.o{background:#FFEDD5;color:#C2410C;}
.sec{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0F172A;background:white;display:inline-block;padding:5px 14px;border-radius:6px;margin-bottom:16px;box-shadow:0 1px 6px rgba(0,0,0,.1);}
.sw{margin-bottom:10px;}
.mr{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-bottom:56px;}
.dr{display:flex;flex-direction:column;gap:30px;margin-bottom:56px;}
.mf{background:white;border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.22);width:375px;flex-shrink:0;}
.df{background:white;border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.22);width:100%;max-width:1100px;margin:0 auto;}
.fl{background:#0F172A;color:white;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:7px 13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.fl .t{border-radius:4px;padding:2px 7px;font-size:9px;font-weight:800;}
.fl .t.n{background:#F97316;color:white;}.fl .t.r{background:#DC2626;color:white;}.fl .t.a{background:#F59E0B;color:#0F172A;}.fl .t.g{background:#16A34A;color:white;}.fl .t.b{background:#2446A6;color:white;}
.bp{background:var(--o5);color:white;border:none;border-radius:9px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;width:100%;}
.bp:disabled{background:var(--s2);color:var(--s4);cursor:not-allowed;}
.bd{background:var(--rd);color:white;border:none;border-radius:9px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;}
.bd:disabled{background:var(--s2);color:var(--s4);cursor:not-allowed;}
.bs{background:var(--gn);color:white;border:none;border-radius:9px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;}
.bs:disabled{background:var(--s2);color:var(--s4);cursor:not-allowed;}
.bsc{background:none;border:1.5px solid var(--s2);color:var(--s7);border-radius:9px;padding:10px 18px;font-size:12px;font-weight:600;cursor:pointer;width:100%;}
.bl{background:none;border:none;color:var(--b7);font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;}
.fg{display:flex;flex-direction:column;gap:5px;}
.lb{font-size:10px;font-weight:700;color:var(--s7);letter-spacing:.05em;text-transform:uppercase;}
.fi{border:1.5px solid var(--s2);border-radius:9px;padding:10px 13px;font-size:14px;color:var(--s95);background:white;outline:none;width:100%;}
.fi.e{border-color:var(--rd);background:var(--rb);}
.em{font-size:11px;color:var(--rd);}
.tb{background:var(--b7);padding:12px 17px;display:flex;align-items:center;justify-content:space-between;}
.br{font-size:12px;font-weight:700;color:white;display:flex;align-items:center;gap:7px;}
.pl{font-size:10px;color:var(--b1);background:rgba(255,255,255,.12);border-radius:20px;padding:3px 10px;}
.lh{background:var(--b7);padding:26px 22px 20px;text-align:center;}
.lb2{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border-radius:7px;padding:6px 12px;margin-bottom:13px;}
.lb2 span{font-size:12px;font-weight:700;color:white;}
.nw{display:flex;gap:9px;justify-content:center;}
.nd{width:46px;height:52px;border:2px solid var(--s2);border-radius:9px;font-size:20px;font-weight:700;text-align:center;color:var(--s95);background:var(--bg);}
.nd.e{border-color:var(--rd);background:var(--rb);}
.sb{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:4px 11px;font-size:11px;font-weight:700;}
.sb-on{background:var(--gb);color:var(--gn);}.sb-wt{background:var(--ab);color:#92400E;}.sb-ct{background:var(--rb);color:var(--rd);}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot.g{background:var(--gn);}.dot.r{background:var(--rd);animation:pulse 1.5s infinite;}.dot.a{background:var(--al);animation:pulse 1.5s infinite;}
.ic{background:white;border:1px solid var(--s2);border-radius:9px;padding:9px 11px;}
.ic-l{font-size:10px;color:var(--s4);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;}
.ic-v{font-size:12px;color:var(--s95);font-weight:600;}
.sd{width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;}
.sd.dn{background:var(--gn);color:white;}.sd.ac{background:var(--o5);color:white;}.sd.pe{background:var(--s2);color:var(--s4);}
.sl{flex:1;height:2px;}.sl.dn{background:var(--gn);}.sl.pe{background:var(--s2);}
.slb{font-size:9px;font-weight:700;text-transform:uppercase;}
.me{background:var(--s1);border-radius:11px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:var(--s4);}
.mf2{background:#C7D2FE;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:var(--b7);}
.mc{background:white;border-radius:15px;padding:20px 17px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-shadow:0 20px 56px rgba(0,0,0,.3);}
.mc-t{font-size:14px;font-weight:800;color:var(--s95);}
.mc-s{font-size:12px;color:var(--s6);line-height:1.6;max-width:250px;}
.pi{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.pi.wt{background:var(--b1);}.pi.ok{background:var(--gb);}.pi.er{background:var(--rb);}
.pi svg{width:25px;height:25px;}
.pi.wt svg{color:var(--b7);animation:spin 2s linear infinite;}.pi.ok svg{color:var(--gn);}.pi.er svg{color:var(--rd);}
.chip{background:var(--b0);border:1px solid var(--b1);border-radius:7px;padding:6px 10px;font-size:11px;font-weight:700;color:var(--b7);display:flex;align-items:center;gap:5px;}
.pb{background:var(--b1);border-radius:7px;padding:7px 10px;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--b7);font-weight:600;}
.pb svg{width:11px;height:11px;color:var(--b7);animation:spin 2s linear infinite;}
.ec{background:white;border:1px solid var(--s2);border-radius:9px;padding:9px 11px;}
.et{font-size:10px;font-weight:700;color:var(--s4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.er2{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--s1);}
.er2:last-child{border-bottom:none;}
.ed{width:6px;height:6px;border-radius:50%;flex-shrink:0;}.ed.g{background:var(--gn);}
.etx{font-size:10px;color:var(--s7);flex:1;}.eti{font-size:10px;color:var(--s4);}
.vi{background:white;border:1.5px solid var(--s2);border-radius:9px;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.vi.sl2{border-color:var(--b7);background:var(--b0);}
.cc{background:var(--gb);border:1px solid #BBF7D0;border-radius:9px;padding:9px 12px;}
.ov{position:absolute;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:18px;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
@keyframes spin{to{transform:rotate(360deg)}}

#app{width:100%;display:flex;justify-content:center;}

@media (max-width:767px){
  body{padding:20px 12px;}
  .mf{width:100%;max-width:375px;}
}

@media (min-width:768px){
  body{padding:32px 20px;}
  .df{width:100%;max-width:1100px;}
}