/* M Tek - Premium Login UI */
:root{
    --login-bg:#061221;
    --login-bg2:#0b2342;
    --login-card:rgba(19,43,73,.82);
    --login-line:rgba(255,255,255,.14);
    --login-gold:#ffd21a;
    --login-gold2:#ffbf00;
    --login-text:#f8fbff;
    --login-muted:#aebdd0;
    --login-input:#ffffff;
    --login-ink:#14263c;
    --login-shadow:0 30px 80px rgba(0,0,0,.42);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;width:100%}
body{
    font-family:'Inter','Poppins',Arial,sans-serif;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    color:var(--login-text);
    background:
      radial-gradient(circle at 18% 12%,rgba(17,91,170,.32),transparent 32%),
      radial-gradient(circle at 84% 86%,rgba(0,204,255,.14),transparent 30%),
      linear-gradient(145deg,var(--login-bg) 0%,#08182d 46%,var(--login-bg2) 100%);
    overflow-x:hidden;
}
body::before{
    content:"";position:fixed;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 30%);
}
.login-container{width:100%;display:flex;justify-content:center;align-items:center}
.login-card{
    position:relative;width:min(100%,470px);padding:34px 34px 30px;
    border:1px solid var(--login-line);border-radius:28px;
    background:linear-gradient(155deg,rgba(29,56,91,.9),rgba(13,37,66,.88));
    box-shadow:var(--login-shadow),inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.login-card::before{content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 36%,rgba(255,210,26,.03))}
.login-header{position:relative;text-align:center;margin-bottom:24px}
.login-logo-wrap{width:118px;height:118px;margin:0 auto 18px;display:grid;place-items:center;background:transparent;box-shadow:none;border:0;padding:0}
.login-logo{width:118px;height:118px;object-fit:contain;border-radius:0;display:block}
.login-header h2{font-size:32px;line-height:1.12;font-weight:800;letter-spacing:-.7px;color:var(--login-gold);margin-bottom:9px}
.login-header p{font-size:15px;line-height:1.55;color:#f3f7fd}
.input-group{position:relative;display:flex;align-items:stretch;min-height:60px;margin-bottom:16px;border:1px solid #dbe4ee;border-radius:17px;background:var(--login-input);overflow:hidden;box-shadow:0 9px 24px rgba(0,0,0,.10);transition:border-color .2s,box-shadow .2s,transform .2s}
.input-group:focus-within{border-color:var(--login-gold);box-shadow:0 0 0 4px rgba(255,210,26,.13),0 14px 28px rgba(0,0,0,.14);transform:translateY(-1px)}
.input-icon{flex:0 0 58px;display:grid;place-items:center;background:#193d68;color:var(--login-gold);font-size:19px}
.input-group input{width:100%;min-width:0;border:0;outline:0;padding:0 16px;background:#fff;color:var(--login-ink);font:600 15px/1 'Inter',sans-serif}
.input-group input::placeholder{color:#8793a3;font-weight:500}
.password-group input{padding-right:12px}
.password-toggle{flex:0 0 58px;border:0;border-left:1px solid rgba(25,61,104,.08);background:#193d68;color:var(--login-gold);display:grid;place-items:center;font-size:18px;cursor:pointer;touch-action:manipulation;transition:background .2s,color .2s}
.password-toggle:hover,.password-toggle:focus-visible{background:#214b7b;color:#fff;outline:none}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:7px 1px 23px;font-size:13px}
.login-options label{display:flex;align-items:center;gap:8px;color:#eef5fd;cursor:pointer;font-weight:500}
.login-options input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--login-gold);cursor:pointer}
.login-options a{color:var(--login-gold);font-weight:700;text-decoration:none}
.login-options a:hover{text-decoration:underline;color:#fff}
.error,.success{margin:0 0 16px;padding:12px 14px;border-radius:13px;text-align:center;font-size:13px;font-weight:700;line-height:1.45}
.error{background:rgba(220,53,69,.18);border:1px solid rgba(255,118,130,.26);color:#ffd5da}
.success{background:rgba(40,167,69,.18);border:1px solid rgba(110,238,128,.25);color:#ddffe4}
.register-btn{position:relative;width:100%;min-height:58px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--login-gold) 0%,#ffd900 48%,var(--login-gold2) 100%);color:#171717;font:800 17px/1 'Inter',sans-serif;letter-spacing:.15px;cursor:pointer;box-shadow:0 16px 30px rgba(255,197,0,.18);transition:transform .2s,box-shadow .2s,filter .2s}
.register-btn:hover{transform:translateY(-2px);box-shadow:0 20px 34px rgba(255,197,0,.25);filter:brightness(1.02)}
.register-btn:active{transform:translateY(0)}
.login-link{margin-top:23px;text-align:center;color:#eef5fd;font-size:14px;line-height:1.6}
.login-link a{color:var(--login-gold);font-weight:800;text-decoration:none}
.login-link a:hover{color:#fff;text-decoration:underline}
@media (max-width:600px){
    body{padding:14px;align-items:flex-start;padding-top:max(14px,env(safe-area-inset-top))}
    .login-container{min-height:calc(100svh - 28px)}
    .login-card{width:100%;max-width:430px;padding:24px 18px 21px;border-radius:22px}
    .login-card::before{border-radius:22px}
    .login-logo-wrap{width:96px;height:96px;border-radius:24px;padding:6px;margin-bottom:15px}
    .login-header h2{font-size:27px;margin-bottom:7px}
    .login-header p{font-size:13px}
    .input-group{min-height:56px;border-radius:15px;margin-bottom:13px}
    .input-icon,.password-toggle{flex-basis:52px}
    .input-icon{font-size:17px}
    .password-toggle{font-size:17px}
    .input-group input{font-size:14px;padding-left:14px}
    .login-options{margin:5px 1px 18px;font-size:12.5px}
    .register-btn{min-height:54px;border-radius:14px;font-size:16px}
    .login-link{margin-top:18px;font-size:13px}
}
@media (max-width:380px){
    body{padding:10px}
    .login-container{min-height:calc(100svh - 20px)}
    .login-card{padding:20px 14px 18px}
    .login-logo-wrap{width:84px;height:84px;border-radius:21px}
    .login-header h2{font-size:24px}
    .login-header p{font-size:12px}
    .input-group{min-height:53px}
    .input-icon,.password-toggle{flex-basis:48px}
    .input-group input{font-size:13px}
    .login-options{font-size:12px}
    .register-btn{min-height:51px;font-size:15px}
    .login-link{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Final corporate logo/mobile refinement */
.login-card{max-width:440px;background:linear-gradient(155deg,rgba(20,45,75,.96),rgba(10,29,52,.94));border-radius:24px;box-shadow:0 26px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07)}
.login-logo-wrap{filter:drop-shadow(0 12px 24px rgba(0,126,255,.18))}
@media (max-width:600px){
  body{padding:12px}
  .login-card{padding:22px 16px 19px;border-radius:20px}
  .login-logo-wrap,.login-logo{width:88px;height:88px}
  .login-logo-wrap{margin-bottom:12px}
  .login-header{margin-bottom:18px}
  .login-header h2{font-size:25px;letter-spacing:-.4px}
  .login-header p{font-size:12px;color:#d7e3f0}
  .input-group{min-height:54px;border-radius:14px;margin-bottom:11px}
  .input-icon,.password-toggle{flex-basis:49px}
  .input-icon{font-size:16px}
  .password-toggle{font-size:16px}
  .input-group input{font-size:13px;padding-left:13px}
  .login-options{margin:4px 1px 15px;font-size:11px}
  .register-btn{min-height:52px;border-radius:13px;font-size:15px}
  .login-link{margin-top:15px;font-size:12px}
}

/* ==========================================================
   M TEK LOGIN — CLEAN MOBILE BRANDING
========================================================== */
.login-logo-wrap{background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;padding:0!important}
.login-logo{background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important}
@media (max-width:600px){
    body{padding:10px!important;align-items:flex-start!important;padding-top:max(10px,env(safe-area-inset-top))!important;background:linear-gradient(145deg,#061221 0%,#091a31 55%,#0a2040 100%)!important}
    .login-container{width:100%!important;min-height:calc(100vh - 20px)!important;min-height:calc(100svh - 20px)!important;align-items:flex-start!important;padding-top:16px!important}
    .login-card{width:100%!important;max-width:430px!important;padding:22px 15px 18px!important;border-radius:20px!important;background:linear-gradient(155deg,rgba(16,34,58,.97),rgba(9,25,44,.97))!important;box-shadow:0 22px 55px rgba(0,0,0,.35)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
    .login-logo-wrap,.login-logo{width:88px!important;height:88px!important;margin-left:auto!important;margin-right:auto!important;object-fit:contain!important}
    .login-logo-wrap{margin-bottom:12px!important}
    .login-header{margin-bottom:18px!important}
    .login-header h2{font-size:25px!important;line-height:1.15!important}
    .login-header p{font-size:12px!important;line-height:1.45!important}
    .input-group{min-height:54px!important}
    .input-group input{font-size:13px!important}
    .register-btn{min-height:52px!important}
}