:root{
    --page-bg:#edf2f8;
    --page-bg-2:#f7f9fc;

    --card:#ffffff;
    --border:#d9e1ea;
    --border-strong:#c9d3df;

    --text:#0f172a;
    --muted:#64748b;

    --primary:#615fff;
    --primary-2:#8a63ff;
    --primary-3:#4f46e5;

    --shadow-sm:0 8px 22px rgba(15,23,42,.05);
    --shadow-md:0 16px 40px rgba(15,23,42,.08);
    --shadow-lg:0 24px 60px rgba(15,23,42,.12);

    --success:#0f9f6e;
    --warning:#d97706;
    --danger:#dc2626;

    --glass:rgba(255,255,255,.68);
    --glass-2:rgba(255,255,255,.52);

    --tr:.18s ease;
  }

  *{ box-sizing:border-box; }
  html,body{
    margin:0;
    padding:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at top left, rgba(97,95,255,.10), transparent 28%),
      radial-gradient(circle at 90% 10%, rgba(138,99,255,.08), transparent 22%),
      linear-gradient(180deg, #fffdf8 0%, #fffaf1 100%);
  }

  button,input,a{ font:inherit; }
  [hidden]{ display:none !important; }

  .auth-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(420px, 520px) 1fr;
  }

  .auth-left{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    border-right:1px solid rgba(217,225,234,.7);
    background:
      linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .auth-left::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at top left, rgba(97,95,255,.10), transparent 30%),
      radial-gradient(circle at bottom left, rgba(217,119,6,.07), transparent 28%);
    pointer-events:none;
  }

  .auth-card{
    position:relative;
    z-index:1;
    width:min(100%, 440px);
    border:1px solid rgba(255,255,255,.72);
    border-radius:30px;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,244,.96));
    box-shadow:0 28px 70px rgba(15,23,42,.10);
    padding:24px;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .brand-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
  }

  .brand-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:58px;
    padding:8px 12px;
    border-radius:18px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:var(--shadow-sm);
    text-decoration:none;
  }

  .brand-link img{
    display:block;
    max-width:160px;
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .mini-link{
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    color:#485dff;
  }

  .auth-title{
    margin:14px 0 0;
    font-size:38px;
    line-height:1;
    letter-spacing:-.045em;
    font-weight:950;
    color:#0f172a;
  }

  .auth-subtitle{
    margin:12px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.65;
  }

  .benefits{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
  }

  .benefit-pill{
    min-height:32px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    border-radius:999px;
    background:#fff;
    border:1px solid #ebe2d7;
    color:#5c6f84;
    font-size:12px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
  }

  .benefit-pill__dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    box-shadow:0 0 0 4px rgba(97,95,255,.08);
  }

  .auth-form{
    margin-top:22px;
    display:grid;
    gap:14px;
  }

  .field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .field{
    display:grid;
    gap:8px;
  }

  .field__label{
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#607486;
  }

  .field__control{
    position:relative;
  }

  .field__input{
    width:100%;
    min-height:50px;
    border-radius:16px;
    border:1px solid #e4dacd;
    background:linear-gradient(180deg,#fffefc,#fffdfa);
    color:#0f172a;
    font-size:14px;
    font-weight:700;
    padding:0 15px;
    outline:none;
    transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
  }

  .field__input:focus{
    border-color:rgba(97,95,255,.36);
    box-shadow:0 0 0 5px rgba(97,95,255,.08);
  }

  .field__input--with-btn{
    padding-right:52px;
  }

  .field__toggle{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:0;
    border-radius:12px;
    background:#f7f8fb;
    color:#64748b;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background var(--tr), transform var(--tr);
  }

  .field__toggle:hover{
    background:#eef2f8;
    transform:translateY(-50%) scale(1.02);
  }

  .field__toggle svg{
    width:18px;
    height:18px;
    display:block;
  }

  .password-strength{
    display:flex;
    gap:6px;
    margin-top:8px;
  }

  .password-strength__bar{
    height:6px;
    flex:1;
    border-radius:999px;
    background:#e9eef5;
    transition:background var(--tr), transform var(--tr);
  }

  .password-strength__text{
    margin-top:8px;
    font-size:12px;
    font-weight:800;
    color:#7b8b9d;
  }

  .checkbox-row{
    display:grid;
    grid-template-columns:18px 1fr;
    gap:10px;
    align-items:start;
    margin-top:2px;
    color:#607486;
    font-size:13px;
    line-height:1.55;
    font-weight:700;
  }

  .checkbox-row input{
    width:18px;
    height:18px;
    margin-top:1px;
    accent-color:#615fff;
  }

  .checkbox-row a{
    color:#485dff;
    text-decoration:none;
    font-weight:900;
  }

  .submit-btn{
    min-height:52px;
    border:0;
    border-radius:16px;
    cursor:pointer;
    color:#fff;
    font-size:14px;
    font-weight:900;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    box-shadow:0 18px 34px rgba(97,95,255,.20);
    transition:transform var(--tr), box-shadow var(--tr), opacity var(--tr);
    position:relative;
    overflow:hidden;
  }

  .submit-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.22) 50%, transparent 75%);
    transform:translateX(-130%);
    transition:transform .8s ease;
  }

  .submit-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 24px 42px rgba(97,95,255,.25);
  }

  .submit-btn:hover::before{
    transform:translateX(130%);
  }

  .submit-btn:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
  }

  .auth-note{
    min-height:20px;
    font-size:13px;
    line-height:1.5;
    color:#64748b;
    font-weight:700;
  }

  .auth-note.is-error{ color:var(--danger); }
  .auth-note.is-success{ color:var(--success); }

  .auth-footer{
    margin-top:6px;
    text-align:center;
    color:#64748b;
    font-size:13px;
    font-weight:700;
  }

  .auth-footer a{
    color:#485dff;
    font-weight:900;
    text-decoration:none;
  }

  .auth-right{
    position:relative;
    overflow:hidden;
    padding:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 20% 15%, rgba(97,95,255,.14), transparent 28%),
      radial-gradient(circle at 82% 16%, rgba(138,99,255,.12), transparent 22%),
      radial-gradient(circle at 70% 80%, rgba(217,119,6,.08), transparent 20%),
      linear-gradient(180deg, #fffdf8 0%, #fffaf1 100%);
  }

  .auth-right::before,
  .auth-right::after{
    content:"";
    position:absolute;
    border-radius:999px;
    filter:blur(10px);
    pointer-events:none;
  }

  .auth-right::before{
    width:320px;
    height:320px;
    top:-90px;
    right:-90px;
    background:linear-gradient(135deg, rgba(97,95,255,.18), rgba(138,99,255,.08));
  }

  .auth-right::after{
    width:240px;
    height:240px;
    left:-80px;
    bottom:-80px;
    background:linear-gradient(135deg, rgba(217,119,6,.10), rgba(97,95,255,.06));
  }

  .showcase{
    position:relative;
    width:min(100%, 860px);
    height:720px;
  }

  .floating-chip{
    position:absolute;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.80);
    color:#536779;
    font-size:13px;
    font-weight:900;
    box-shadow:0 18px 36px rgba(15,23,42,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    animation:floatY 4.5s ease-in-out infinite;
    z-index:3;
  }

  .floating-chip--1{ top:120px; right:84px; }
  .floating-chip--2{ top:270px; left:24px; animation-delay:.8s; }
  .floating-chip--3{ bottom:22px; right:60px; animation-delay:1.4s; }

  .floating-chip__dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    box-shadow:0 0 0 4px rgba(97,95,255,.08);
  }

  .mock-stage{
    position:absolute;
    inset:120px 0 0 40px;
  }

  .mock-window{
    position:absolute;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.88);
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,251,244,.96));
    box-shadow:0 26px 68px rgba(15,23,42,.10);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    display: flex;
    flex-direction: column;
  }

  .mock-window--main{
    width:620px;
    height:420px;
    left:90px;
    top:40px;
    z-index:2;
    animation:floatMain 6s ease-in-out infinite;
  }

  .mock-window--small{
    width:260px;
    height:190px;
    left:0;
    top:300px;
    z-index:3;
    animation:floatY 5.2s ease-in-out infinite;
  }

  .mock-window--stats{
    width:250px;
    height:170px;
    right:10px;
    top:320px;
    z-index:3;
    animation:floatY 5.6s ease-in-out infinite;
    animation-delay:.9s;
  }

  .mock-topbar{
    height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    border-bottom:1px solid #ece2d7;
    background:rgba(255,255,255,.84);

    flex: 0 0 52px;
  }

  .mock-dots{
    display:flex;
    align-items:center;
    gap:6px;
  }

  .mock-dots span{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#d8dee8;
  }

  .mock-topbar__title{
    font-size:12px;
    font-weight:900;
    color:#72849a;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .mock-content{
    padding:16px;
    
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .mock-content__img {
    display: block;
    width: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
  }

  .mock-content__img--structure {
    object-fit: cover;
  }

  .mock-content__img--ai_script {
    object-fit: cover;
    width: 110%;
    padding-top: 10px;
    padding-left: 10px;
  }

  .mock-search{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    border-radius:18px;
    background:#f7f8fc;
    border:1px solid #e8edf5;
    font-size:13px;
    font-weight:800;
    color:#7a8a9b;
  }

  .mock-search__cta{
    min-height:32px;
    padding:0 12px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;
    display:inline-flex;
    align-items:center;
    font-size:12px;
    font-weight:900;
    box-shadow:0 10px 22px rgba(97,95,255,.18);
  }

  .mock-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:14px;
  }

  .mock-kpi{
    border:1px solid #ece2d7;
    border-radius:18px;
    padding:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,245,.94));
  }

  .mock-kpi__label{
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#8a7d70;
  }

  .mock-kpi__value{
    margin-top:8px;
    font-size:24px;
    line-height:1;
    font-weight:950;
    color:#122033;
  }

  .mock-kpi__sub{
    margin-top:6px;
    font-size:12px;
    color:#7a8a9b;
    font-weight:700;
  }

  .mock-grid{
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:12px;
    margin-top:14px;
  }

  .mock-card{
    border:1px solid #ece2d7;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,245,.95));
    padding:14px;
    box-shadow:0 10px 22px rgba(15,23,42,.04);
  }

  .mock-card__title{
    font-size:14px;
    font-weight:900;
    color:#122033;
    letter-spacing:-.02em;
  }

  .mock-lines{
    display:grid;
    gap:8px;
    margin-top:12px;
  }

  .mock-line{
    height:10px;
    border-radius:999px;
    background:linear-gradient(90deg,#eef2f8 0%, #f7f9fc 100%);
  }

  .mock-line.w-90{ width:90%; }
  .mock-line.w-70{ width:70%; }
  .mock-line.w-55{ width:55%; }
  .mock-line.w-40{ width:40%; }

  .mock-score{
    display:flex;
    align-items:center;
    justify-content:center;
    width:110px;
    height:110px;
    margin:12px auto 0;
    border-radius:999px;
    background:
      radial-gradient(circle at center, #fff 56%, transparent 57%),
      conic-gradient(from 180deg, #615fff 0 72%, #e7ecf5 72% 100%);
    box-shadow:0 16px 32px rgba(97,95,255,.12);
    position:relative;
  }

  .mock-score__inner{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .mock-score__num{
    font-size:24px;
    font-weight:950;
    color:#122033;
    line-height:1;
  }

  .mock-score__label{
    margin-top:5px;
    font-size:11px;
    font-weight:900;
    color:#7a8a9b;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  .mock-list{
    display:grid;
    gap:10px;
    margin-top:12px;
  }

  .mock-list__item{
    display:grid;
    grid-template-columns:18px 1fr;
    gap:8px;
    font-size:12px;
    line-height:1.5;
    color:#516477;
    font-weight:800;
  }

  .mock-list__item::before{
    content:"✓";
    width:18px;
    height:18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,159,110,.10);
    color:#0f9f6e;
    font-size:11px;
    font-weight:950;
  }

  .mini-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
  }

  .mini-stat{
    border:1px solid #ece2d7;
    border-radius:16px;
    padding:12px;
    background:#fff;
  }

  .mini-stat__label{
    font-size:11px;
    font-weight:900;
    color:#8a7d70;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  .mini-stat__value{
    margin-top:8px;
    font-size:22px;
    font-weight:950;
    line-height:1;
    color:#122033;
  }

  .mini-stat__sub{
    margin-top:6px;
    font-size:12px;
    color:#7a8a9b;
    font-weight:700;
  }

  .toast{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:10000;
    background:#111827;
    color:#fff;
    padding:12px 14px;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    font-weight:800;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }

  .toast.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  @keyframes floatY{
    0%,100%{ transform:translateY(0px); }
    50%{ transform:translateY(-10px); }
  }

  @keyframes floatMain{
    0%,100%{ transform:translateY(0px) rotate(0deg); }
    50%{ transform:translateY(-12px) rotate(-.4deg); }
  }

  @media (max-width:1180px){
    .auth-shell{
      grid-template-columns:1fr;
    }

    .auth-right{
      min-height:720px;
      border-top:1px solid rgba(217,225,234,.7);
    }
  }

  @media (max-width:860px){
    .field-grid{
      grid-template-columns:1fr;
    }

    .showcase{
      height:620px;
    }

    .mock-stage{
      inset:150px 0 0 0;
      transform:scale(.88);
      transform-origin:top center;
    }
  }

  @media (max-width:640px){
    .auth-left,
    .auth-right{
      padding:14px;
    }

    .auth-card{
      padding:18px;
      border-radius:24px;
    }

    .auth-title{
      font-size:30px;
    }

    .showcase{
      height:520px;
    }

    .mock-stage{
      inset:170px 0 0 -45px;
      transform:scale(.68);
      transform-origin:top left;
    }

    .floating-chip{
      display:none;
    }
  }

  @media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
      animation:none !important;
      transition:none !important;
      scroll-behavior:auto !important;
    }
  }

  .oauth-stack{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.oauth-btn{
  width:100%;
  min-height:50px;
  border-radius:16px;
  border:1px solid #e4dacd;
  background:linear-gradient(180deg,#fff,#fffdf9);
  color:#172033;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(15,23,42,.04);
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}

.oauth-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(97,95,255,.22);
  box-shadow:0 16px 30px rgba(15,23,42,.07);
}

.oauth-btn svg{
  width:19px;
  height:19px;
  display:block;
}

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 4px;
  color:#8a99a6;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:#eadfd3;
}

.auth-form{
  margin-top:14px;
}

.auth-meta{
  display:flex;
  justify-content:flex-end;
  margin-top:-4px;
}

.auth-text-btn{
  border:0;
  background:transparent;
  padding:0;
  color:#485dff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
}

.auth-text-btn:hover{
  text-decoration:underline;
}

/* =========================================================
   LOGIN PAGE RESPONSIVE PATCH
   Insert at the VERY END of <style>
========================================================= */

html{
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
}

img,
video{
  max-width:100%;
}

.auth-shell,
.auth-left,
.auth-right,
.auth-card,
.showcase,
.mock-stage,
.mock-window{
  min-width:0;
}

/* Better default desktop sizing */
.auth-shell{
  grid-template-columns:minmax(420px, 500px) minmax(0, 1fr);
}

.auth-card{
  width:min(100%, 440px);
}

.auth-title{
  font-size:clamp(31px, 3vw, 38px);
}

.auth-subtitle{
  max-width:360px;
}

.showcase{
  width:min(100%, 860px);
  max-width:860px;
}

/* Large monitors */
@media (min-width:1600px){
  .auth-shell{
    grid-template-columns:minmax(480px, 560px) minmax(0, 1fr);
  }

  .auth-left,
  .auth-right{
    padding:42px;
  }

  .auth-card{
    width:min(100%, 470px);
    padding:28px;
  }

  .showcase{
    transform:scale(1.04);
    transform-origin:center;
  }
}

/* Laptops / smaller desktop */
@media (min-width:1181px) and (max-width:1360px){
  .auth-shell{
    grid-template-columns:minmax(390px, 460px) minmax(0, 1fr);
  }

  .auth-left,
  .auth-right{
    padding:22px;
  }

  .auth-card{
    padding:22px;
  }

  .brand-link{
    min-height:52px;
  }

  .brand-link img{
    max-width:145px;
  }

  .auth-title{
    font-size:34px;
  }

  .showcase{
    height:640px;
  }

  .mock-stage{
    inset:110px 0 0 0;
    transform:scale(.84);
    transform-origin:top center;
  }

  .floating-chip--1{
    top:88px;
    right:40px;
  }

  .floating-chip--2{
    top:225px;
    left:0;
  }

  .floating-chip--3{
    bottom:40px;
    right:30px;
  }
}

/* Tablet: form first, showcase below but compact */
@media (max-width:1180px){
  .auth-shell{
    grid-template-columns:1fr !important;
  }

  .auth-left{
    min-height:auto;
    padding:32px 22px 22px;
    border-right:0;
  }

  .auth-card{
    width:min(100%, 520px);
  }

  .auth-subtitle{
    max-width:none;
  }

  .auth-right{
    min-height:auto !important;
    padding:18px 22px 32px;
    border-top:0;
  }

  .showcase{
    height:390px !important;
    max-width:720px;
  }

  .mock-stage{
    inset:60px 0 0 0 !important;
    transform:scale(.64) !important;
    transform-origin:top center !important;
  }

  .floating-chip{
    min-height:34px;
    font-size:12px;
  }

  .floating-chip--1{
    top:28px;
    right:90px;
  }

  .floating-chip--2{
    top:160px;
    left:20px;
  }

  .floating-chip--3{
    bottom:10px;
    right:70px;
  }
}

/* Small tablets */
@media (max-width:860px){
  .auth-left{
    padding:24px 16px 14px;
  }

  .auth-card{
    width:min(100%, 500px);
    padding:22px;
    border-radius:28px;
  }

  .brand-row{
    margin-bottom:14px;
  }

  .brand-link{
    min-height:52px;
    border-radius:16px;
  }

  .brand-link img{
    max-width:145px;
  }

  .auth-title{
    margin-top:10px;
  }

  .benefits{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .benefit-pill{
    width:100%;
    justify-content:center;
  }

  .field-grid{
    grid-template-columns:1fr !important;
  }

  .auth-right{
    padding:10px 16px 28px;
  }

  .showcase{
    height:320px !important;
  }

  .mock-stage{
    inset:44px 0 0 0 !important;
    transform:scale(.52) !important;
    transform-origin:top center !important;
  }

  .floating-chip--1{
    top:12px;
    right:40px;
  }

  .floating-chip--2{
    top:132px;
    left:10px;
  }

  .floating-chip--3{
    bottom:0;
    right:36px;
  }
}

/* Phones: prioritize login form, make showcase a small preview */
@media (max-width:640px){
  .auth-shell{
    display:block;
    min-height:100dvh;
  }

  .auth-left{
    min-height:100dvh;
    align-items:flex-start;
    padding:12px;
  }

  .auth-card{
    width:100%;
    min-height:calc(100dvh - 24px);
    padding:18px;
    border-radius:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .brand-row{
    justify-content:center;
    margin-bottom:14px;
  }

  .brand-link{
    width:100%;
    min-height:54px;
  }

  .brand-link img{
    max-width:145px;
  }

  .auth-title{
    font-size:30px;
    text-align:left;
  }

  .auth-subtitle{
    font-size:14px;
    line-height:1.55;
  }

  .oauth-stack{
    margin-top:18px;
  }

  .oauth-btn,
  .submit-btn,
  .field__input{
    min-height:50px;
    border-radius:15px;
  }

  .auth-divider{
    margin:18px 0 2px;
  }

  .auth-form{
    gap:12px;
  }

  .auth-meta{
    justify-content:flex-start;
    margin-top:-2px;
  }

  .checkbox-row{
    font-size:12px;
  }

  .auth-footer{
    margin-top:4px;
  }

  .auth-right{
    display:none;
  }

  .toast{
    left:10px;
    right:10px;
    bottom:10px;
    text-align:center;
  }
}

/* Very small phones */
@media (max-width:420px){
  .auth-left{
    padding:8px;
  }

  .auth-card{
    min-height:calc(100dvh - 16px);
    padding:16px;
    border-radius:22px;
  }

  .auth-title{
    font-size:28px;
  }

  .auth-subtitle{
    font-size:13px;
  }

  .oauth-btn{
    font-size:13px;
  }

  .auth-divider{
    font-size:11px;
  }

  .field__label{
    font-size:11px;
  }

  .field__input{
    font-size:14px;
  }
}

/* Landscape phones: avoid vertical overflow */
@media (max-height:620px) and (max-width:900px){
  .auth-left{
    min-height:auto;
  }

  .auth-card{
    min-height:auto;
    justify-content:flex-start;
  }

  .auth-right{
    display:none;
  }
}

/* =========================================================
   LOGIN PAGE CTA VISIBILITY FIX
   Insert at the VERY END of <style>
========================================================= */

/* Top create-account CTA */
.brand-row{
  align-items:center;
}

.auth-create-link{
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  text-decoration:none;
  color:#3344d3;
  font-size:13px;
  font-weight:950;
  background:linear-gradient(135deg, rgba(97,95,255,.10), rgba(138,99,255,.07));
  border:1px solid rgba(97,95,255,.14);
  box-shadow:0 10px 22px rgba(97,95,255,.07);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-create-link:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(97,95,255,.14), rgba(138,99,255,.10));
  box-shadow:0 14px 28px rgba(97,95,255,.10);
}

/* Make bottom footer look like a clear secondary action */
.auth-footer{
  margin-top:8px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid #eadfd3;
  box-shadow:0 8px 18px rgba(15,23,42,.035);
}

.auth-footer a{
  display:inline-flex;
  margin-left:4px;
}

/* Desktop / laptop short-height optimization */
@media (min-width:641px) and (max-height:760px){
  .auth-left{
    align-items:flex-start !important;
    min-height:100vh;
    overflow:auto;
    padding:14px !important;
  }

  .auth-card{
    margin:auto 0;
    padding:18px !important;
  }

  .brand-row{
    margin-bottom:12px !important;
  }

  .brand-link{
    min-height:48px !important;
  }

  .brand-link img{
    max-width:138px !important;
  }

  .auth-title{
    margin-top:8px !important;
    font-size:30px !important;
  }

  .auth-subtitle{
    margin-top:8px !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .oauth-stack{
    margin-top:14px !important;
    gap:8px !important;
  }

  .oauth-btn,
  .submit-btn,
  .field__input{
    min-height:44px !important;
  }

  .auth-divider{
    margin:14px 0 0 !important;
  }

  .auth-form{
    margin-top:10px !important;
    gap:10px !important;
  }

  .field{
    gap:6px !important;
  }

  .field__label{
    font-size:11px !important;
  }

  .field__toggle{
    width:34px !important;
    height:34px !important;
  }

  .auth-note{
    min-height:16px !important;
    font-size:12px !important;
  }

  .auth-footer{
    padding:10px 12px !important;
    font-size:12px !important;
  }
}

/* Mobile: keep Create account always visible near logo */
@media (max-width:640px){
  .auth-card{
    justify-content:flex-start !important;
    min-height:calc(100dvh - 24px);
    max-height:calc(100dvh - 24px);
    overflow:auto;
  }

  .brand-row{
    position:sticky;
    top:0;
    z-index:5;
    margin:-18px -18px 14px;
    padding:12px 12px 10px;
    background:linear-gradient(180deg, rgba(255,251,244,.98), rgba(255,251,244,.88));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(234,223,211,.72);
  }

  .brand-link{
    width:auto !important;
    min-height:44px !important;
    padding:6px 10px;
  }

  .brand-link img{
    max-width:120px !important;
  }

  .auth-create-link{
    min-height:38px;
    padding:0 12px;
    font-size:12px;
  }

  .auth-title{
    margin-top:4px;
  }

  .auth-footer{
    margin-top:10px;
    font-size:12px;
  }
}

/* Very small phones */
@media (max-width:420px){
  .auth-card{
    min-height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
  }

  .brand-row{
    margin:-16px -16px 12px;
    padding:10px;
  }

  .brand-link img{
    max-width:108px !important;
  }

  .auth-create-link{
    padding:0 10px;
    font-size:11px;
  }
}

/* Very short screens: make the whole card scroll, but keep top CTA visible */
@media (max-height:620px){
  .auth-left{
    align-items:flex-start !important;
    overflow:auto;
  }

  .auth-card{
    justify-content:flex-start !important;
    max-height:calc(100dvh - 24px);
    overflow:auto;
  }

  .brand-row{
    position:sticky;
    top:0;
    z-index:5;
  }

  .auth-right{
    display:none !important;
  }
}