:root{
  --red:#e30f2e; --red2:#ff5a45; --ink:#2b2b2b; --muted:#9a9a9a;
  --field:#f5f6f8; --grad:linear-gradient(135deg,var(--red2),var(--red));
}
*{box-sizing:border-box;}

.auth-body{
  margin:0;min-height:100vh;background:#fff;color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,sans-serif;position:relative;overflow-x:hidden;
}
.auth-body::before{content:"";position:fixed;top:-230px;right:-230px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle at 38% 62%, var(--red2) 0%, var(--red) 72%);z-index:0;}
.auth-body::after{content:"";position:fixed;bottom:-230px;left:-230px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle at 62% 38%, var(--red2) 0%, var(--red) 72%);z-index:0;}

.auth-wrap{position:relative;z-index:1;max-width:1260px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:0 30px;}

.auth-grid{flex:1;display:grid;grid-template-columns:1fr 430px;align-items:center;gap:40px;padding:20px 0;}

.auth-art{position:relative;text-align:center;}
.auth-art::before{content:"";position:absolute;inset:13% 10%;z-index:-1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--red) 12%,transparent),color-mix(in srgb,var(--red2) 4%,transparent) 55%,transparent 72%);}
.auth-art .mascot{width:100%;max-width:680px;height:auto;filter:drop-shadow(0 24px 34px rgba(120,40,60,.13));}

.auth-card{background:#fff;border:1px solid #f0e6ea;border-radius:18px;padding:40px 38px;box-shadow:0 26px 70px rgba(120,40,60,.10);}

.auth-tabs{display:flex;gap:34px;margin-bottom:28px;}
.auth-tabs .tab{position:relative;font-size:20px;font-weight:700;color:#bcbcbc;cursor:pointer;padding:0 0 10px;background:none;border:0;font-family:inherit;transition:color .15s;}
.auth-tabs .tab::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:3px;border-radius:3px;background:var(--red);transform:translateX(-50%);transition:width .18s;}
.auth-tabs .tab.is-active{color:var(--ink);}
.auth-tabs .tab.is-active::after{width:26px;}

.auth-form{display:none;flex-direction:column;}
.auth-card.mode-login .form-login{display:flex;}
.auth-card.mode-register .form-register{display:flex;}

.auth-fld{display:flex;align-items:center;background:var(--field);border-radius:10px;padding:0 16px;height:52px;margin-bottom:14px;border:1px solid transparent;transition:border-color .15s,background .15s;}
.auth-fld:focus-within{background:#fff;border-color:var(--red);}
.auth-fld > i{color:#b3b3b3;font-size:15px;width:20px;text-align:center;flex:none;}
.auth-fld input{flex:1;border:0;background:transparent;outline:none;font-family:inherit;font-size:14.5px;color:var(--ink);height:100%;padding:0 10px;}
.auth-fld input::placeholder{color:#b3b3b3;}
.auth-fld .pw-toggle{border:0;background:none;color:#b3b3b3;cursor:pointer;font-size:15px;padding:0 2px;flex:none;}
.auth-fld .pw-toggle:hover{color:var(--red);}

.pw-meter{display:flex;flex-direction:column;gap:7px;margin:-2px 2px 14px;}
.pw-bars{display:flex;gap:5px;width:100%;}
.pw-bars span{flex:1;height:6px;border-radius:3px;background:#e8e8ea;transition:background .2s;}
.pw-label{font-size:12px;font-weight:600;color:var(--muted);text-align:right;min-height:15px;line-height:15px;}

.auth-submit{width:100%;height:52px;border:0;border-radius:10px;background:var(--grad);color:#fff;font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;margin-top:8px;transition:transform .1s;}
.auth-submit:active{transform:translateY(1px);}

.auth-agree{display:flex;align-items:flex-start;gap:8px;margin:2px 0 4px;font-size:12.5px;color:var(--muted);line-height:1.7;}
.auth-agree input{margin-top:3px;width:15px;height:15px;accent-color:var(--red);flex:none;}
.auth-agree a{color:#5b7cc8;}

.auth-switch{text-align:center;margin:18px 0 0;font-size:13.5px;color:var(--muted);}
.auth-switch a{color:var(--red);font-weight:600;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}

.auth-foot{display:flex;align-items:center;justify-content:center;gap:18px;padding:20px 0 24px;font-size:12px;color:#a7a7a7;}
.auth-foot span{display:inline-flex;align-items:center;gap:6px;}
.auth-foot i{color:#e0a020;font-size:14px;}

.auth-mtop,.auth-mbrand,.auth-forgot,.auth-mor,.auth-alt{display:none;}


.auth-forgot{display:block;text-align:right;font-size:12.5px;font-weight:600;color:var(--red);text-decoration:none;margin:-4px 2px 14px;}
.auth-forgot:hover{text-decoration:underline;}

@media (max-width:640px){
  .auth-body{background:#fff;}
  .auth-body::before{width:360px;height:360px;top:-220px;right:-150px;opacity:.13;}
  .auth-body::after{display:none;}

  .auth-wrap{padding:0;max-width:100%;}

  .auth-mtop{display:flex;align-items:center;gap:12px;padding:14px 16px 13px;border-bottom:1px solid #eef0f4;position:relative;z-index:1;}
  .auth-mback{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:18px;text-decoration:none;flex:none;}
  .auth-mtop-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .auth-mtop-tx b{font-size:16px;font-weight:800;color:var(--ink);line-height:1.1;}
  .auth-mtop-tx span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .auth-grid{display:block;padding:0;}
  .auth-art{display:none;}

  .auth-card{border:0;border-radius:0;box-shadow:none;background:transparent;padding:24px 20px 40px;}

  .auth-tabs{display:none;}

  .auth-mbrand{display:flex;flex-direction:column;align-items:center;gap:14px;margin:8px 0 26px;}
  .auth-mbrand img{height:44px;width:auto;object-fit:contain;}
  .auth-mlogo{font-family:'Baloo 2',cursive;font-weight:800;font-size:26px;color:var(--red);letter-spacing:.3px;}
  .auth-mhead{font-size:22px;font-weight:800;color:var(--ink);}

  .auth-fld{height:54px;border-radius:12px;background:#f4f5f7;margin-bottom:13px;padding:0 18px;}
  .auth-fld > i{display:none;}
  .auth-fld input{font-size:15px;padding:0;}
  .auth-fld .pw-toggle{font-size:16px;padding:0 2px;}

  .auth-forgot{display:block;text-align:right;font-size:12.5px;font-weight:600;color:var(--red);text-decoration:none;margin:-1px 2px 14px;}

  .auth-submit{height:54px;border-radius:12px;font-size:15.5px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;}

  .auth-mor{display:flex;align-items:center;text-align:center;gap:12px;margin:18px 2px;color:#b0aeb4;font-size:12px;font-weight:600;}
  .auth-mor::before,.auth-mor::after{content:"";flex:1;height:1px;background:#e9e9ee;}

  .auth-alt{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border:1px solid #e2e3e8;border-radius:12px;background:#fff;color:var(--ink);font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;}
  .auth-alt i{color:var(--red);}

  .pw-meter{margin:-2px 2px 13px;}
  .auth-switch{margin-top:16px;}
  .auth-foot{padding:14px 0 22px;font-size:11px;}
}



.swal2-styled{font-family:inherit !important;}
.swal2-styled.swal2-confirm{background:var(--grad) !important;background-color:var(--red) !important;border:0 !important;border-radius:11px !important;font-weight:800 !important;box-shadow:none !important;}
.swal2-styled.swal2-confirm:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 35%,transparent) !important;}
.swal2-styled.swal2-cancel{background-color:#8b90a0 !important;border-radius:11px !important;font-weight:800 !important;}