/* ========= BRAND PALETTE (узгоджено з base.html) ========= */
:root{
  --bg:#050a12;          /* page bg */
  --surface:#0b1320;     /* cards */
  --text:#e6f0ff;
  --muted:#9bb1cf;
  --stroke:#1f2b45;
  --accent:#22d3ee;      /* cyan */
  --accent-2:#7c3aed;    /* violet */
}

/* ========= ЗАГАЛЬНІ СТИЛІ ========= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.10), transparent 60%),
             radial-gradient(900px 700px at 90% -20%, rgba(34,211,238,.08), transparent 60%),
             var(--bg);
  color:var(--text);
}

/* тягнемо на всю ширину в’юпорта, з урахуванням фіксованого хедера */
.container{
  display:flex;
  width:100vw;                 /* розтягуємо на весь екран */
  min-height:calc(100vh - var(--header-h,64px));
  margin-top:var(--header-h,64px);
  overflow:hidden;
}

/* ======= Left form column ======= */
.auth-box{
  width:50%;
  display:flex;
  flex-direction:column;
  padding:40px clamp(16px,3vw,40px);
  background:
    linear-gradient(180deg, rgba(13,22,37,.85), rgba(9,16,30,.85));
  border-right:1px solid rgba(255,255,255,.06);
}

/* wrapper для форм */
.form-wrapper{
  width:100%;
  max-width:600px;
  margin:40px auto 0;
}

/* ======= Right image column (desktop only) ======= */
.image-box{
  width:50%;                 /* фіксовано половина екрана */
  display:block;
}
.image-box img{
  display:block;
  width:100%;
  height:100%;               /* заповнює всю висоту контейнера */
  object-fit:cover;          /* обрізає, але без спотворень */
  border-left:1px solid rgba(255,255,255,.06);
}

/* ======= Responsive ======= */
@media (max-width:1024px){
  .container{min-height:calc(100vh - var(--header-h,64px));}
  .auth-box{width:100%;}
  .image-box{display:none;}
}

/* ========= ТАБИ ========= */
.tabs{display:flex;margin-bottom:24px;gap:8px}
.tab{
  flex:1;padding:12px 10px;background:transparent;border:none;
  font-size:16px;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;cursor:pointer;transition:border .2s,color .2s
}
.tab:hover{color:#bfefff}
.tab.active{
  color:var(--text);
  border-image: linear-gradient(90deg,var(--accent),var(--accent-2)) 1;
  border-bottom:2px solid transparent;
}

/* ========= ПОЛЯ ВВОДУ ========= */
.input-box{width:100%;position:relative;margin-bottom:22px}
.input-box input{
  width:100%;padding:14px 0 6px;background:transparent;border:none;
  border-bottom:1px solid var(--stroke);font-size:16px;color:var(--text);
  outline:none;transition:border-color .2s, box-shadow .2s;
}
.input-box input:focus{
  border-color:var(--accent);
  box-shadow:0 1px 0 0 var(--accent);
}
.input-box label{
  position:absolute;top:14px;left:0;color:#9fb2d1;font-size:16px;
  pointer-events:none;transition:.18s ease all;background:var(--surface);padding:0 4px
}
.input-box input:focus + label,
.input-box input:not(:placeholder-shown):valid + label{
  top:-8px;font-size:12px;color:var(--accent);
  box-shadow:0 0 0 0 rgba(0,0,0,0)
}

/* ========= КНОПКИ ========= */
button[type="submit"]{
  width:100%;padding:14px 16px;border:none;border-radius:12px;
  color:#041219;font-weight:800;font-size:16px;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 30px rgba(34,211,238,.25);
  transition:transform .05s, filter .2s
}
button[type="submit"]:hover{filter:brightness(1.05)}
button[type="submit"]:active{transform:translateY(1px)}

/* ========= SECONDARY (verify) ========= */
.verify-button{
  padding:12px 0;width:100%;font-size:14px;font-weight:600;
  background:transparent;color:var(--accent);
  border:1px solid var(--accent);border-radius:12px;cursor:pointer;
  transition:background .2s,color .2s; margin-top:16px;text-align:center
}
.verify-button:hover{background:var(--accent);color:#041219}

/* ========= АНІМАЦІЇ ========= */
form{opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;display:none;flex-direction:column}
form.show{opacity:1;transform:none;display:flex}

/* ========= СПОВІЩЕННЯ ========= */
.error-message{
  background:#ef4444;color:#fff;padding:10px;border-radius:10px;
  margin-bottom:16px;text-align:center;font-size:14px
}


/* ====== FIX: права картинка = півекрана, без відступів/радіусів ====== */
.container{
  align-items: stretch;              /* стовпці однакової висоти */
  gap: 0;                            /* без проміжків */
}

.image-box{
  width:50%;
  position:relative;
  height:calc(100vh - var(--header-h,64px));  /* урахувати фіксований хедер */
  margin:0; padding:0; display:block;
}

.image-box img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;                  /* заповнює повністю, без спотворень */
  border-radius:0;                   /* прибрати скруглення */
  box-shadow:none;                   /* прибрати тінь */
}

/* ====== FIX: лівий блок без “карточного” фону/ореолу ====== */
.auth-box{
  width:50%;
  padding:40px clamp(16px,3vw,40px);
  background:transparent !important; /* прибрати градієнт/склофон */
  border:none !important;
  box-shadow:none !important;
  justify-content:center;            /* вертикально центруємо форму */
}

.form-wrapper{
  margin:0 auto;                     /* без великого відступу зверху */
  max-width:600px;
}

/* мобільна поведінка як і було: картинка ховається */
@media (max-width:1024px){
  .auth-box{width:100%;}
  .image-box{display:none;}
}