/* Login V43 — isolated, maintainable, no legacy V33/V40/V42 stacking */
:root{
  --login-card-h: 560px;
  --login-obsidian:#121722;
  --login-obsidian-2:#0b0f18;
  --login-burgundy:#4a0619;
  --login-wine:#6d1230;
  --login-gold:#c7973a;
  --login-gold-soft:#f0d28a;
  --login-pearl:#fbf8f1;
  --login-cream:#fffaf2;
  --login-text:#121722;
  --login-muted:#364152;
  --login-line:rgba(95,68,50,.14);
  --login-shadow:0 28px 86px rgba(18,23,34,.14);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body.login-body-v33{
  min-height:100svh;
  margin:0;
  display:grid;
  place-items:center;
  padding:18px;
  overflow:auto;
  direction:rtl;
  color:var(--login-text);
  font-family:"Tajawal","Cairo","Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(42rem 32rem at 8% 0%,rgba(240,210,138,.28),transparent 58%),
    radial-gradient(48rem 34rem at 92% 0%,rgba(116,21,50,.18),transparent 58%),
    linear-gradient(135deg,#fbf8f1 0%,#f1ece5 42%,#e8edf2 100%);
}
body.login-body-v33::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(rgba(74,6,25,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,6,25,.025) 1px,transparent 1px);
  background-size:44px 44px;
}
button,input{font:inherit}

.login-shell-v33{
  position:relative;
  isolation:isolate;
  width:min(1220px,calc(100vw - 44px));
  min-height:min(720px,calc(100svh - 36px));
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);
  grid-template-areas:"mascot form";
  align-items:stretch;
  direction:ltr;
  overflow:hidden;
  border-radius:34px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:var(--login-shadow);
  backdrop-filter:blur(20px);
}
.login-shell-v33>*{direction:rtl}
.login-shell-v33::after{
  content:"";
  position:absolute;
  inset:10px;
  z-index:5;
  pointer-events:none;
  border-radius:27px;
  border:1px solid rgba(199,151,58,.12);
}

.login-showcase-v33{
  grid-area:mascot;
  position:relative;
  min-width:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  align-items:stretch;
  padding:clamp(22px,2.2vw,34px);
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.16));
}
.login-showcase-v33::before{
  content:"";
  position:absolute;
  inset:20px;
  z-index:0;
  border-radius:28px;
  background:
    radial-gradient(circle at 52% 40%,rgba(199,151,58,.12),transparent 24rem),
    linear-gradient(145deg,rgba(255,255,255,.90),rgba(248,244,236,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 54px rgba(18,23,34,.09);
}
.login-showcase-v33::after{
  content:"MR.VAPE AI";
  position:absolute;
  left:38px;
  bottom:104px;
  z-index:1;
  pointer-events:none;
  color:rgba(74,6,25,.040);
  font-size:clamp(46px,5.4vw,78px);
  font-weight:1000;
  letter-spacing:.02em;
  white-space:nowrap;
}

.login-brand-v33{
  position:absolute;
  top:36px;
  right:36px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:13px;
  width:max-content;
  max-width:calc(100% - 72px);
  padding:10px 12px;
  border-radius:22px;
  color:#111827;
  background:rgba(255,255,255,.88);
  border:1px solid var(--login-line);
  box-shadow:0 16px 42px rgba(18,23,34,.08);
  backdrop-filter:blur(14px);
}
.login-logo-v33{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:19px;
  background:#fff;
  border:1px solid var(--login-line);
  color:var(--login-burgundy);
  font-weight:1000;
  box-shadow:0 10px 26px rgba(15,23,42,.10);
}
.login-logo-v33 img{width:100%;height:100%;object-fit:contain;padding:4px}
.login-brand-v33 h1{margin:0;color:#111827;font-size:19px;line-height:1.15;letter-spacing:-.03em;white-space:nowrap}
.login-brand-v33 small{display:block;color:#a36f16;font-size:10.5px;font-weight:1000;letter-spacing:.095em;text-transform:uppercase;white-space:nowrap}

.login-mascot-wrap-v33{
  position:relative;
  z-index:2;
  width:100%;
  height:auto;
  min-height:min(560px,calc(100svh - 130px));
  align-self:center;
  justify-self:center;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:96px 18px 126px;
  border-radius:30px;
}
.login-glow-v33{
  position:absolute;
  width:min(390px,58%);
  aspect-ratio:1;
  border-radius:999px;
  opacity:.78;
  background:radial-gradient(circle,rgba(199,151,58,.30),rgba(116,21,50,.12) 45%,transparent 72%);
  filter:blur(6px);
  animation:pulseLoginGlow 3.8s ease-in-out infinite;
}
.login-mascot-v33{
  position:relative;
  width:auto;
  height:auto;
  max-height:min(390px,calc(100svh - 330px));
  max-width:min(470px,72%);
  object-fit:contain;
  border-radius:30px;
  filter:drop-shadow(0 22px 28px rgba(18,23,34,.20));
  animation:mascotFloatV33 4.4s ease-in-out infinite;
}
.login-bubble-v33{
  position:absolute;
  right:7%;
  bottom:112px;
  z-index:4;
  max-width:330px;
  padding:15px 17px;
  color:#fff;
  border-radius:22px;
  border:1px solid rgba(240,210,138,.18);
  background:linear-gradient(135deg,rgba(18,23,34,.88),rgba(74,6,25,.80));
  box-shadow:0 18px 54px rgba(18,23,34,.25);
  backdrop-filter:blur(16px);
  animation:bubblePopV33 4.2s ease-in-out infinite;
}
.login-bubble-v33 b{display:block;margin-bottom:5px;color:var(--login-gold-soft);font-size:15px}
.login-bubble-v33 span{display:block;color:#f8fafc;font-size:12.5px;line-height:1.75;font-weight:850}

.login-feature-row-v33{
  position:absolute;
  left:34px;
  right:34px;
  bottom:34px;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
.login-feature-row-v33 div{
  min-height:82px;
  display:grid;
  align-content:center;
  padding:12px 13px;
  color:#111827;
  border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--login-line);
  box-shadow:0 12px 30px rgba(18,23,34,.055);
  backdrop-filter:blur(10px);
}
.login-feature-row-v33 b{display:block;color:#8a5b12;font-size:14px}
.login-feature-row-v33 span{display:block;margin-top:4px;color:#4b5563;font-size:12px;line-height:1.5;font-weight:800}

.login-form-side-v33{
  grid-area:form;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,3vw,44px);
  background:linear-gradient(180deg,rgba(255,253,248,.95),rgba(255,255,255,.88));
}
.login-form-side-v33::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%,rgba(199,151,58,.14),transparent 20rem),
    radial-gradient(circle at 88% 88%,rgba(74,6,25,.08),transparent 22rem);
}
.login-card-v33{
  position:relative;
  z-index:1;
  width:100%;
  max-width:470px;
  min-height:min(590px,calc(100svh - 112px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-inline:auto;
  padding:34px 30px;
  border-radius:30px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--login-line);
  box-shadow:0 22px 60px rgba(18,23,34,.10);
}
.login-kicker-v33{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.09em;
  white-space:nowrap;
  background:linear-gradient(135deg,var(--login-obsidian),var(--login-burgundy));
  box-shadow:0 12px 30px rgba(74,6,25,.16);
}
.login-card-v33 h2{
  margin:18px 0 9px;
  color:var(--login-text);
  font-size:clamp(38px,4vw,58px);
  line-height:1.03;
  font-weight:1000;
  letter-spacing:-.055em;
}
.login-card-v33 p{margin:0 0 22px;color:var(--login-muted);line-height:1.78;font-weight:850;font-size:15px}
.login-card-v33 form{display:grid;gap:14px}
.login-card-v33 label{display:block;margin:0;color:var(--login-text);font-size:13px;font-weight:1000}
.login-input-v33{position:relative;margin-top:8px}
.login-input-v33 input{
  width:100%;
  min-height:58px;
  border-radius:19px;
  border:1px solid var(--login-line);
  background:#fff;
  padding:16px 48px 16px 15px;
  color:var(--login-text);
  font-size:15px;
  font-weight:900;
  outline:none;
  box-shadow:0 12px 28px rgba(15,23,42,.045);
}
.login-input-v33 input::placeholder{color:#7b8494;font-weight:850}
.login-input-v33 input:focus{border-color:var(--login-gold);box-shadow:0 0 0 4px rgba(199,151,58,.16),0 14px 32px rgba(15,23,42,.07)}
.login-input-v33 i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;filter:saturate(1.05)}
.login-password-toggle-v43{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  min-width:42px;
  min-height:38px;
  padding:0 10px;
  border:0;
  border-radius:13px;
  cursor:pointer;
  color:var(--login-burgundy);
  background:rgba(199,151,58,.10);
  font-weight:1000;
}
.login-password-toggle-v43:hover{background:rgba(199,151,58,.18)}
.login-input-v33.has-toggle input{padding-left:62px}
.login-submit-v33{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:19px;
  padding:16px 18px;
  cursor:pointer;
  color:#fff;
  font-weight:1000;
  font-size:17px;
  background:linear-gradient(135deg,var(--login-burgundy),var(--login-obsidian) 58%,var(--login-gold));
  box-shadow:0 20px 48px rgba(74,6,25,.22);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.login-submit-v33:hover{transform:translateY(-1px);box-shadow:0 25px 72px rgba(74,6,25,.30)}
.login-submit-v33:disabled{cursor:wait;opacity:.78;filter:saturate(.85)}
.login-note-v33{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  padding:12px 13px;
  border-radius:18px;
  color:var(--login-muted);
  background:rgba(199,151,58,.08);
  border:1px solid rgba(199,151,58,.15);
  font-size:12.5px;
  font-weight:900;
  line-height:1.7;
}
.alert.login-error-v33{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:18px;
  color:#be123c;
  background:#fff1f2;
  border:1px solid #fecdd3;
  font-weight:1000;
}

@keyframes mascotFloatV33{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-10px) rotate(.8deg)}}
@keyframes pulseLoginGlow{0%,100%{transform:scale(.96);opacity:.72}50%{transform:scale(1.04);opacity:1}}
@keyframes bubblePopV33{0%,100%{transform:translateY(0);opacity:.94}50%{transform:translateY(-6px);opacity:1}}

@media(max-width:1040px){
  body.login-body-v33{padding:12px;place-items:start center}
  .login-shell-v33{width:min(760px,calc(100vw - 24px));min-height:auto;grid-template-columns:1fr;grid-template-areas:"mascot" "form";direction:rtl;border-radius:30px}
  .login-showcase-v33{grid-template-rows:auto auto auto;padding:22px}
  .login-form-side-v33{padding:22px}
  .login-card-v33{max-width:100%;min-height:auto}
  .login-brand-v33{position:relative;top:auto;right:auto;justify-self:end;margin-bottom:12px}
  .login-mascot-wrap-v33{min-height:340px;padding:20px 0 78px;overflow:hidden}
  .login-mascot-v33{max-height:310px;max-width:74%}
  .login-bubble-v33{right:24px;bottom:82px}
  .login-feature-row-v33{position:relative;left:auto;right:auto;bottom:auto;margin-top:10px}
}
@media(max-width:680px){
  .login-shell-v33{border-radius:24px}
  .login-showcase-v33{padding:14px}
  .login-showcase-v33::before{inset:10px;border-radius:24px}
  .login-form-side-v33{padding:14px}
  .login-card-v33{padding:20px;border-radius:24px}
  .login-card-v33 h2{font-size:34px}
  .login-brand-v33{width:100%;max-width:100%;align-items:center}
  .login-logo-v33{width:54px;height:54px;flex-basis:54px}
  .login-mascot-wrap-v33{min-height:260px;padding:10px 0 36px}
  .login-mascot-v33{max-height:240px;max-width:78%}
  .login-bubble-v33{position:relative;inset:auto;margin-top:-18px;max-width:100%}
  .login-feature-row-v33{grid-template-columns:1fr}
  .login-showcase-v33::after{display:none}
}
@media(max-width:420px){
  body.login-body-v33{padding:8px}
  .login-shell-v33{width:100%;border-radius:22px}
  .login-card-v33 h2{font-size:31px}
  .login-brand-v33 h1{font-size:16px}
  .login-brand-v33 small{font-size:9.5px}
}
@media (prefers-reduced-motion: reduce){
  .login-glow-v33,.login-mascot-v33,.login-bubble-v33{animation:none}
  .login-submit-v33,.login-submit-v33:hover{transform:none}
}