:root{
  --wrap:1280px;
  --ease:cubic-bezier(.22,.7,.2,1);

  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-2:#f3f5f8;
  --surface-3:#e9edf2;
  --surface-glass:rgba(255,255,255,.90);

  --text:#171a20;
  --text-2:#525a66;
  --text-3:#7b8390;

  --line:#dce1e8;
  --line-2:#cfd6df;
  --line-3:#bac3cf;

  --accent:#c62828;
  --accent-2:#e85a5a;
  --accent-soft:rgba(198,40,40,.10);

  --success:#198754;
  --success-soft:rgba(25,135,84,.12);

  --warning:#b45309;
  --warning-soft:rgba(245,158,11,.14);

  --shadow-1:0 8px 24px rgba(20,22,28,.06);
  --shadow-2:0 16px 40px rgba(20,22,28,.10);
  --shadow-3:0 26px 60px rgba(20,22,28,.14);
  --shadow-4:0 34px 80px rgba(20,22,28,.18);

  --radius-sm:12px;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
}

*{
  box-sizing:border-box;
}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #ffffff 0%, #f4f6f8 44%, #edf1f5 100%);
  min-height:100vh;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================
   AUTH LAYOUT
   ========================= */
.auth{
  position:relative;
  min-height:calc(100vh - 220px);
  padding:46px 0 84px;
  overflow:hidden;
}

.auth::before,
.auth::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}

.auth::before{
  top:10px;
  left:-130px;
  width:360px;
  height:360px;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 72%);
  filter:blur(16px);
  opacity:.92;
}

.auth::after{
  right:-140px;
  bottom:10px;
  width:380px;
  height:380px;
  background:radial-gradient(circle, rgba(198,40,40,.08) 0%, rgba(198,40,40,0) 72%);
  filter:blur(24px);
  opacity:.82;
}

.auth__wrap{
  width:min(100%, calc(var(--wrap) - 420px));
  max-width:720px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* =========================
   CARD
   ========================= */
.auth-card{
  position:relative;
  overflow:hidden;
  padding:38px;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(247,249,252,.96) 100%);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:var(--shadow-4);
  backdrop-filter:blur(16px);
}

.auth-card::before{
  content:"";
  position:absolute;
  top:-70px;
  right:-70px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}

.auth-card::after{
  content:"";
  position:absolute;
  left:-80px;
  bottom:-80px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(198,40,40,.06) 0%, rgba(198,40,40,0) 72%);
  pointer-events:none;
}

.auth-title{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  font-size:40px;
  line-height:1.04;
  letter-spacing:-1.15px;
  font-weight:900;
  color:#12161d;
}

.auth-subtitle{
  position:relative;
  z-index:1;
  margin:0 0 26px;
  font-size:15px;
  line-height:1.8;
  color:var(--text-2);
  max-width:56ch;
}

/* =========================
   ALERTS
   ========================= */
.auth-alert,
.auth-success{
  position:relative;
  z-index:1;
  margin:0 0 22px;
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.65;
  font-weight:700;
  box-shadow:var(--shadow-1);
}

.auth-alert{
  color:#8f1d1d;
  background:linear-gradient(180deg, #fff5f5 0%, #fef0f0 100%);
  border:1px solid rgba(198,40,40,.20);
}

.auth-success{
  color:#146c43;
  background:linear-gradient(180deg, #f2fff8 0%, #ebfff4 100%);
  border:1px solid rgba(25,135,84,.20);
}

/* =========================
   FORM
   ========================= */
.auth-form{
  position:relative;
  z-index:1;
  display:grid;
  gap:18px;
}

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

.auth-label{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.15px;
  color:#20252d;
}

.auth-input{
  width:100%;
  min-height:58px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:18px;
  outline:none;
  background:linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
  color:var(--text);
  font-size:15px;
  font-weight:600;
  box-shadow:var(--shadow-1);
  transition:
    transform .22s var(--ease),
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    background .22s var(--ease),
    color .22s var(--ease);
}

select.auth-input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:52px;
  background-image:
    linear-gradient(45deg, transparent 50%, #6f7783 50%),
    linear-gradient(135deg, #6f7783 50%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
  background-position:
    calc(100% - 24px) calc(50% - 3px),
    calc(100% - 18px) calc(50% - 3px),
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat:no-repeat;
}

.auth-input::placeholder{
  color:#8d95a1;
  font-weight:500;
}

.auth-input:hover{
  border-color:var(--line-2);
  background:#ffffff;
}

.auth-input:focus{
  transform:translateY(-1px);
  border-color:rgba(198,40,40,.34);
  background:#ffffff;
  box-shadow:
    0 0 0 4px rgba(198,40,40,.08),
    0 16px 28px rgba(20,22,28,.08);
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#171a20;
  -webkit-box-shadow:0 0 0 1000px #ffffff inset, 0 16px 28px rgba(20,22,28,.08);
  transition:background-color 99999s ease-in-out 0s;
}

/* =========================
   HELPER / ERRORS
   ========================= */
.auth-help{
  margin-top:2px;
  font-size:13px;
  line-height:1.55;
  color:var(--text-3);
}

.auth-error{
  margin-top:2px;
  font-size:13px;
  line-height:1.5;
  color:#c62828;
  font-weight:700;
}

.auth-input.is-invalid{
  border-color:rgba(198,40,40,.44);
  box-shadow:
    0 0 0 4px rgba(198,40,40,.08),
    0 10px 24px rgba(198,40,40,.08);
}

/* =========================
   CHECKBOX
   ========================= */
.auth-checkbox{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.auth-checkbox__input{
  width:18px;
  height:18px;
  margin-top:3px;
  accent-color:var(--accent);
  flex:0 0 18px;
}

.auth-checkbox__text{
  font-size:14px;
  line-height:1.7;
  color:#344050;
}

.auth-checkbox__line-main{
  font-weight:700;
}

.auth-checkbox__line-sub{
  color:#68707c;
  margin-top:4px;
}

.auth-checkbox__text a{
  color:#1d232b;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}

.auth-checkbox__text a:hover{
  color:var(--accent);
}

/* =========================
   HONEYPOT
   ========================= */
.hp-wrap{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* =========================
   ACTIONS
   ========================= */
.auth-actions{
  display:grid;
  gap:12px;
  margin-top:6px;
}

.btn-auth{
  position:relative;
  overflow:hidden;
  min-height:56px;
  padding:0 18px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.2px;
  transition:
    transform .24s var(--ease),
    box-shadow .24s var(--ease),
    border-color .24s var(--ease),
    background .24s var(--ease),
    color .24s var(--ease),
    filter .24s var(--ease);
}

.btn-auth::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 24%, rgba(255,255,255,.24) 50%, transparent 76%);
  transform:translateX(-140%);
  transition:transform .82s var(--ease);
}

.btn-auth:hover::before{
  transform:translateX(140%);
}

.btn-auth--primary{
  border:0;
  color:#fff;
  background:linear-gradient(180deg, #323741 0%, #1b1f26 100%);
  box-shadow:0 16px 30px rgba(20,22,28,.16);
}

.btn-auth--primary:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 40px rgba(20,22,28,.20);
  filter:brightness(1.05);
}

.btn-auth--primary:active{
  transform:translateY(-1px);
}

.btn-auth--ghost{
  border:1px solid var(--line);
  color:#262d37;
  background:linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  box-shadow:var(--shadow-1);
}

.btn-auth--ghost:hover{
  transform:translateY(-2px);
  border-color:var(--line-2);
  background:#ffffff;
  box-shadow:var(--shadow-2);
}

.btn-auth:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(198,40,40,.12),
    0 16px 32px rgba(20,22,28,.14);
}

/* =========================
   OPTIONAL PANEL / INFO
   ========================= */
.auth-panel{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}

.auth-panel h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.3px;
  color:#1c2128;
}

.auth-panel p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--text-2);
}

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:2px 0;
  color:var(--text-3);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, rgba(220,225,232,0) 0%, rgba(220,225,232,1) 50%, rgba(220,225,232,0) 100%);
}

/* =========================
   GRID HELPERS FOR REGISTER
   ========================= */
.auth-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.auth-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .auth{
    padding:30px 0 58px;
    min-height:auto;
  }

  .auth__wrap{
    width:min(100%, calc(100% - 24px));
    max-width:760px;
  }

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

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

@media (max-width: 760px){
  .auth-grid-2,
  .auth-grid-3{
    grid-template-columns:1fr;
    gap:14px;
  }

  .auth{
    padding:22px 0 46px;
  }

  .auth__wrap{
    width:min(100%, calc(100% - 18px));
  }

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

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

  .auth-subtitle{
    margin-bottom:18px;
    font-size:14px;
    line-height:1.65;
  }

  .auth-form{
    gap:14px;
  }

  .auth-input{
    min-height:54px;
    padding:0 15px;
    border-radius:16px;
    font-size:15px;
  }

  select.auth-input{
    padding-right:46px;
    background-position:
      calc(100% - 20px) calc(50% - 3px),
      calc(100% - 14px) calc(50% - 3px),
      0 0;
  }

  .btn-auth{
    min-height:52px;
    border-radius:14px;
    font-size:14px;
  }

  .auth-alert,
  .auth-success{
    padding:12px 14px;
    border-radius:14px;
    font-size:13px;
  }
}

@media (max-width: 430px){
  .auth-card{
    padding:18px 14px 14px;
    border-radius:20px;
  }

  .auth-title{
    font-size:24px;
    letter-spacing:-.8px;
  }

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

  .auth-input{
    min-height:50px;
    font-size:14px;
    border-radius:14px;
  }

  .btn-auth{
    min-height:50px;
    font-size:13.5px;
    border-radius:13px;
  }

  .auth-checkbox{
    gap:10px;
  }

  .auth-checkbox__text{
    font-size:13px;
    line-height:1.6;
  }
}