/* login.css – Break_VPN */
:root{--a1:#2E8BFF;--a2:#00D4FF;--ag:linear-gradient(135deg,#2E8BFF,#00D4FF);--bg:#0D0E1A;--card:rgba(255,255,255,.06);--inp:rgba(255,255,255,.08);--bd:rgba(255,255,255,.12);--t1:#F0F2FF;--t2:#9095B4;--t3:#5A5F7D;--shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);--err:#FF5C8A;}
[data-theme=light]{--bg:#EEF0FF;--card:rgba(255,255,255,.8);--inp:rgba(255,255,255,.9);--bd:rgba(46,139,255,.2);--t1:#1A1B2E;--t2:#5A5F7D;--t3:#9095B4;--shadow:0 24px 64px rgba(46,139,255,.15),0 0 0 1px rgba(46,139,255,.1);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;font-family:'Vazirmatn','Inter','Helvetica Neue',sans-serif;background:var(--bg);color:var(--t1);overflow:hidden;transition:background .35s,color .35s;}
#particles-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;}

/* Controls top */
.top-controls{position:fixed;top:16px;display:flex;align-items:center;gap:10px;z-index:100;}
[dir=rtl] .top-controls{left:16px;}
[dir=ltr] .top-controls{right:16px;}

/* Lang selector */
.lang-selector{position:relative;}
.lang-btn{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:7px 14px;color:var(--t1);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;backdrop-filter:blur(12px);transition:.2s;}
.lang-btn:hover{border-color:var(--a1);}
.lang-menu{position:absolute;top:calc(100% + 8px);background:var(--bg);border:1px solid var(--bd);border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.4);min-width:140px;display:none;flex-direction:column;}
[dir=rtl] .lang-menu{right:0;}
[dir=ltr] .lang-menu{left:0;}
.lang-menu.open{display:flex;}
.lang-option{padding:10px 16px;font-size:13px;cursor:pointer;transition:.15s;color:var(--t1);}
.lang-option:hover,.lang-option.active-lang{background:rgba(46,139,255,.1);color:var(--a1);}
.active-lang{font-weight:600;}

.theme-toggle{background:var(--card);border:1px solid var(--bd);border-radius:50px;padding:7px 12px;cursor:pointer;font-size:16px;display:flex;gap:5px;align-items:center;backdrop-filter:blur(12px);transition:.2s;}
.theme-toggle:hover{border-color:var(--a1);}
[data-theme=dark] .sun-ic{display:none;}
[data-theme=light] .moon-ic{display:none;}

/* Card */
#login-container{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,92vw);background:var(--card);border:1px solid var(--bd);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(28px) saturate(1.4);z-index:10;animation:slideUp .5s cubic-bezier(.22,1,.36,1) both;}
@keyframes slideUp{from{opacity:0;transform:translate(-50%,calc(-50% + 30px))}to{opacity:1;transform:translate(-50%,-50%)}}

/* Brand */
.brand{display:flex;align-items:center;gap:14px;padding:28px 28px 18px;}
.brand-logo svg{width:54px;height:54px;filter:drop-shadow(0 0 12px rgba(46,139,255,.5));}
.brand-text{display:flex;flex-direction:column;}
.brand-name{font-size:24px;font-weight:700;color:var(--t1);}
.brand-name span{background:var(--ag);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.brand-sub{font-size:12px;color:var(--t2);margin-top:2px;}

/* Inputs */
#login-upper{padding:8px 28px 20px;display:flex;flex-direction:column;gap:14px;}
.input-group{position:relative;display:flex;align-items:center;}
.input-icon{position:absolute;right:14px;font-size:16px;pointer-events:none;z-index:1;}
[dir=ltr] .input-icon{right:auto;left:14px;}
.input-group input{width:100%;height:50px;padding:0 44px;background:var(--inp);border:1.5px solid var(--bd);border-radius:12px;color:var(--t1);font-family:inherit;font-size:14px;outline:none;transition:.25s;direction:ltr;text-align:right;}
[dir=ltr] .input-group input{text-align:left;}
.input-group input::placeholder{color:var(--t3);}
.input-group input:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(46,139,255,.2);}
.eye-btn{position:absolute;left:12px;background:none;border:none;cursor:pointer;color:var(--t2);padding:4px;display:flex;align-items:center;transition:.2s;}
[dir=ltr] .eye-btn{left:auto;right:12px;}
.eye-btn:hover{color:var(--a1);}
.eye-btn svg{width:18px;height:18px;}

/* Lower */
#login-lower{background:linear-gradient(0deg,rgba(46,139,255,.08),transparent);border-top:1px solid var(--bd);padding:18px 28px 24px;display:flex;flex-direction:column;gap:12px;}
#error-text{color:var(--err);font-size:13px;min-height:18px;text-align:center;font-weight:500;}
#error-text:empty{display:none;}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
#error-text.shake{animation:shake .4s ease;}
.loginbtn{width:100%;height:48px;background:var(--ag);border:none;border-radius:12px;color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s;box-shadow:0 8px 24px rgba(46,139,255,.35);}
.loginbtn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 12px 32px rgba(46,139,255,.45);}
.loginbtn:disabled{opacity:.7;cursor:not-allowed;}
@keyframes spin-a{to{transform:rotate(360deg)}}
.spin{animation:spin-a .8s linear infinite;width:20px;height:20px;}
.login-footer{padding:10px 28px 16px;text-align:center;font-size:11px;color:var(--t3);}
@media(max-width:460px){#login-container{border-radius:20px;}.brand{padding:22px 20px 14px;}#login-upper{padding:8px 20px 16px;}#login-lower{padding:16px 20px 22px;}}

/* ── Lang code (مخفف صحیح زبان به جای پرچم) ── */
.lang-code{display:inline-block;min-width:24px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--a1);background:rgba(46,139,255,.14);border-radius:6px;padding:2px 6px;}
.lang-option .lang-code{margin-inline-end:8px;}
.lang-btn{font-weight:600;}

/* ── بخش تماس تلگرام زیر فرم ورود ── */
.login-contact{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--bd,rgba(255,255,255,.1));
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}
.login-contact .lc-text{
  font-size:13px;line-height:1.7;color:var(--t2,#9095B4);max-width:320px;
}
.login-contact .lc-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:12px;
  background:linear-gradient(135deg,#2AABEE,#229ED9);
  color:#fff;font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 8px 22px rgba(34,158,217,.35);
  transition:transform .2s ease,box-shadow .2s ease;
  direction:ltr;
}
.login-contact .lc-link:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,158,217,.5);}
.login-contact .lc-link svg{flex-shrink:0;}