*{box-sizing:border-box;font-family:'Segoe UI',system-ui,Arial,sans-serif}
body{margin:0;min-height:100vh;color:#f4f4f4;
 background:radial-gradient(circle at 50% 30%,#7d1417 0%,#520d0f 55%,#380809 100%)}
#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 16px}
.logo{display:block;margin:0 auto}
.title{font-size:22px;font-weight:800;letter-spacing:3px;margin:10px 0 22px;text-align:center}
.subtitle{font-size:20px;font-weight:700;margin:8px 0 22px;text-align:center}
.box{width:100%;max-width:400px}
.ig{position:relative;margin:12px 0}
.ig .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex}
.ig input{width:100%;padding:15px 14px 15px 44px;border-radius:8px;border:1px solid #2a2a2a;background:#1b1b1b;color:#fff;font-size:15px;outline:none}
.ig input:focus{border-color:#e8e8e8;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.ig input::placeholder{color:#8a8a8a}
.login-btn{width:100%;margin-top:10px;padding:15px;border:none;border-radius:8px;cursor:pointer;background:linear-gradient(180deg,#d84c4c,#b52a2a);color:#fff;font-size:15px;font-weight:800;letter-spacing:2px}
.login-btn:hover{background:linear-gradient(180deg,#e05555,#c23030)}
.stay{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;font-size:12px;font-weight:800;letter-spacing:1px;color:#fff;cursor:pointer;user-select:none}
.stay input{width:16px;height:16px;accent-color:#111}
.err{color:#ffb4b4;font-size:12.5px;margin-top:12px;text-align:center;font-weight:600;min-height:16px}
.card{background:#171717;border:1px solid #0a0a0a;border-radius:10px;padding:18px 20px;margin:8px 0 18px}
.row{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:14px;color:#eaeaea}
.row .ic{display:flex}.row.mono{font-family:Consolas,monospace;font-size:13px;color:#cfcfcf}
.actions{display:flex;gap:12px}
.act{flex:1;padding:14px;border:none;border-radius:8px;font-size:13px;font-weight:800;letter-spacing:1px;cursor:pointer;text-align:center;text-decoration:none;line-height:1}
.act.red{background:linear-gradient(180deg,#d0413f,#b02a2a);color:#fff}.act.red:hover{background:#c23434}
.act.grey{background:#6f6f6f;color:#fff}.act.grey:hover{background:#7c7c7c}
.mfa-wrap{display:flex;gap:16px;margin:6px 0 16px}
.qr{background:#fff;border-radius:8px;padding:8px;width:150px;height:150px;flex:0 0 auto}
.qr svg{width:100%;height:100%;display:block}
.mfa-info{flex:1;background:#1b1b1b;border-radius:8px;padding:14px;font-size:13px;line-height:1.5}
.mfa-info .li{display:flex;gap:9px;align-items:flex-start;margin:8px 0;color:#e6e6e6}
.back{display:block;text-align:center;color:#e9a0a0;font-size:22px;text-decoration:none;margin-top:8px}
.hub a.btn{display:block;width:100%;max-width:360px;background:#161616;color:#fff;border-radius:9px;padding:16px;margin:12px auto;font-weight:800;letter-spacing:2px;text-decoration:none;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.hub a.btn:hover{background:#1f1f1f}