:root {
  --color-bg: #040607;
  --color-card-bg: rgba(7,18,32,0.90);
  --color-card-border: #1E7AC8;
  --color-field-bg: #1F4363;
  --color-field-border: #3A75A9;
  --color-field-border-focus: #1E7AC8;
  --color-placeholder: rgba(188,188,188,.4);
  --color-label: #919191;
  --color-heading: #FFFFFF;
  --color-subtitle: #919191;
  --color-button-text: #FFFFFF;
  --gradient-button: linear-gradient(360deg,#1E7AC8 0%, #005AA8 100%);
  --radius-card: 20px;
  --radius-field: 20px;
  --radius-button: 20px;
  --h-field: 58px;
  --auth-card-width: 420px;
  --auth-card-min-height: 560px;
  --font-heading: 'Unbounded', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --transition-fast: .18s cubic-bezier(.4,0,.2,1);
  --focus-ring: 0 0 0 3px rgba(30,122,200,.35);
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font-family: var(--font-body);
  background:var(--color-bg);
  color:#e7f1ff;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}

body:before, body:after { content:""; position:fixed; inset:0; pointer-events:none; }
body:before { background: var(--color-bg); }
body:after { background:rgba(26,129,225,0.1); }

.bg-effects { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:visible; }

.bg-overlay { position:absolute; inset:0; background:rgba(26,129,225,0.035); }
.bg-effects:after { display:none; }
.fractal { position:absolute; mix-blend-mode:screen; filter:brightness(1.22) saturate(135%); }
.fractal img { width:100%; height:100%; object-fit:contain; display:block; }
.fractal { overflow:hidden; }
.fractal-blue-left {
  width:1180px; height:1180px;
  left:0; top:50%; transform:translate(-20%, -50%) scaleX(1); will-change:transform,opacity; 
}
.fractal-blue-right {
  width:1500px; height:1500px;
  right:0; left:auto; top:55%; transform:translate(28%, -50%); will-change:transform,opacity; 
}
@media (max-width:1700px){
  .fractal-blue-left { width:1000px; height:1000px; transform:translate(-28%, -50%) scaleX(1); }
  .fractal-blue-right { width:1300px; height:1300px; transform:translate(20%, -50%); }
}
@media (max-width:1500px){
  .fractal-blue-left { width:880px; height:880px; transform:translate(-26%, -50%) scaleX(1); }
  .fractal-blue-right { width:1100px; height:1100px; transform:translate(14%, -50%); }
}
@media (max-width:1100px){
  .fractal-blue-left, .fractal-blue-right { width:600px; height:600px; }
  .fractal-blue-right { display:none; }
  .fractal-blue-left { left:50%; transform:translate(-45%, -50%) scaleX(1); }
}
@media (max-width:900px){
  .fractal-blue-left { width:480px; height:480px; opacity:0.60; transform:translate(-48%, -50%) scaleX(1); }
}

@keyframes floatSlow { 0%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(1.5%, -1.5%,0) scale(1.025);} 100%{ transform:translate3d(0,0,0) scale(1);} }
@keyframes grainShift { 0%{ transform:translate3d(0,0,0);} 100%{ transform:translate3d(-10%, -8%,0);} }
@media (max-width:1100px) { .bg-effects .fx-left, .bg-effects .fx-right { opacity:.18; } }
@media (max-width:1100px) { .bg-effects .orb { opacity:.14; } }
@media (max-width:880px) { .bg-effects .orb-a, .bg-effects .orb-d { display:none; } }
@media (max-width:780px) { .bg-effects { display:none; } }

.logo { gap:14px; }
.logo img { height:50px; width:auto; display:block; }

.lang-switch { position:relative; padding-left:44px; border-radius: 10px !important; min-width: 0px !important}
.lang-switch .flag { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:6px; overflow:hidden; display:flex; }
.lang-switch .flag img { width:100%; height:100%; object-fit:cover; display:block; }

.site-top {
  width:100%; max-width:1480px; margin:0 auto; padding:22px 42px; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:10;
}
.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:.5px; }
.logo-mark { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; background:linear-gradient(145deg,#0d65ff,#0a3d8f); box-shadow:0 6px 18px -6px rgba(13,101,255,.5); font-size:15px; }

.lang-switch { display:inline-flex; align-items:center; gap:10px; background:#0e2538; color:#e2eef7; border:1px solid #224964; padding:10px 24px 10px 64px; border-radius:40px; cursor:pointer; font-size:15px; letter-spacing:.6px; font-weight:600; transition:.25s; min-width:132px; justify-content:flex-start; line-height:1; box-shadow:0 4px 14px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,0.05) inset; }
.lang-switch .lang-label { position:relative; z-index:2; }
.lang-switch:hover { background:#142839; color:#fff; border-color:#20445d; }

.main-wrap { 
  flex: 1; 
  display: flex; 
  align-items: flex-start; 
  justify-content: flex-start; 
  padding: 0 20px 100px; 
  position: relative;
  width: 100%;
  min-height: calc(100vh - 100px);
}

.card-frame { 
  position: absolute; 
  left: 50%;
  transform: translateX(-50%);
  width: var(--auth-card-width);
  height: auto;
  min-height: var(--auth-card-min-height);
}
.card-glow { display: none; }
.auth-card { 
  width: var(--auth-card-width); 
  max-width: var(--auth-card-width); 
  height: auto;
  min-height: var(--auth-card-min-height);
  position: relative; 
  background: rgba(0,94,224,0.049); 
  border: 1px solid rgba(225,225,225,0.15); 
  border-radius: 20px; 
  padding: 32px 40px 42px;
  backdrop-filter: blur(49px) saturate(140%); 
  box-shadow: inset 36px -36px 36px rgba(85,105,134,0.045), inset -36px 36px 36px rgba(255,255,255,0.045), 0 34px 68px -38px rgba(0,0,0,.82); 
  overflow: visible;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.auth-card:before { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  width: var(--auth-card-width); 
  height: 100%; 
  min-height: var(--auth-card-min-height);
  transform: translate(-50%,-50%); 
  background: rgba(31,149,247,0.23); 
  filter: blur(270px);
  pointer-events: none; 
  z-index: 0; 
}

.auth-header { text-align:center; margin:0 0 28px; position:relative; }
.auth-header h1 { margin:0 0 10px; font-size:30px; font-weight:600; font-family:var(--font-heading); line-height:38px; color:var(--color-heading); letter-spacing:.2px; }
.auth-header p { margin:0 0 38px; font-size:16px; line-height:20px; font-weight:300; font-family:var(--font-heading); color:var(--color-subtitle); max-width:524px; }

.form-grid { display:flex; flex-direction:column; gap:18px; }
.field { position:relative; display:flex; flex-direction:column; gap:10px; }
.field label { font-size:14px; font-weight:300; font-family:var(--font-heading); color:var(--color-label); line-height:17px; }

.input-wrap { position:relative; }
.input-wrap input {
  width:100%; height: 46px; padding: 0 2px; border-radius: 10px;
  background:#061C2F; border:1px solid #0E4F85; color:#E2F2FF;
  font-family: 'Unbounded', sans-serif; font-size: 13px;
}
.input-wrap input::placeholder { color:var(--color-placeholder); font-weight:300; }
.input-wrap input:focus { outline:none; border-color:#1E7AC8; box-shadow:0 0 0 3px rgba(30,122,200,.25); }

.toggle-pass { position:absolute; top:50%; right:18px; transform:translateY(-50%); background:none; border:none; color:var(--color-placeholder); cursor:pointer; font-size:18px; padding:4px; display:flex; align-items:center; transition:var(--transition-fast); }
.toggle-pass:hover { color:#fff; }

.hcaptcha-box { margin-top:6px; display:flex; justify-content:center; }

.submit-btn { margin-top:24px; background:var(--gradient-button); border:none; width:100%; height:56px; color:var(--color-button-text); font-size:14px; font-weight:400; font-family:var(--font-heading); letter-spacing:.2px; border-radius:18px; cursor:pointer; position:relative; overflow:hidden; transition:var(--transition-fast); display:inline-flex; align-items:center; justify-content:center; }
.submit-btn:before { content:""; position:absolute; inset:0; background:linear-gradient(360deg,rgba(255,255,255,.25),transparent 70%); opacity:0; transition:var(--transition-fast); }
.submit-btn:hover:before { opacity:.6; }
.submit-btn:hover { filter:brightness(1.05); }
.submit-btn:active { transform:translateY(2px); }

.alt-action { margin-top:26px; text-align:center; font-size:14px; font-family:var(--font-heading); font-weight:300; color:var(--color-placeholder); }
.alt-action button { background:none; border:none; color:#FFFFFF; cursor:pointer; padding:0 2px; font-size:14px; font-weight:400; font-family:var(--font-heading); }
.alt-action button:hover { text-decoration:underline; }

.message { margin-top:18px; font-size:14px; padding:13px 16px; border-radius:14px; font-weight:500; letter-spacing:.4px; display:flex; align-items:center; gap:10px; border:1px solid transparent; animation:fadeIn .5s ease; background:rgba(32,52,70,.5); }
.message.success { background:rgba(11,112,75,.3); border-color:rgba(27,172,118,.5); color:#57dfb0; }
.message.error { background:rgba(157,33,33,.3); border-color:rgba(206,76,76,.5); color:#ff9b9b; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }

footer.auth-footer { margin-top:40px; text-align:center; font-size:12px; color:#557088; letter-spacing:.5px; font-family:var(--font-body); }

.auth-card > * { position:relative; z-index:2; }

@media (max-width: 1400px) {
  .card-frame {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: auto;
    max-width: var(--auth-card-width);
    margin: 50px auto 80px;
  }
  .main-wrap {
    justify-content: center;
    padding: 0 20px 80px;
    min-height: 100vh;
  }
}

@media (max-width:640px) {
  .site-top { padding:18px 20px; }
  .auth-card { 
    width: 100%; 
    max-width: 100%;
    height: auto;
    padding: 46px 34px 60px; 
  }
  .auth-header h1 { font-size:30px; line-height:38px; }
  :root { --h-field:58px; }
}

@media (max-width:540px){
  body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .site-top { padding:14px 18px; }
  .card-frame {
    margin: 20px auto 40px;
  }
  .auth-card { 
    width: 100%; 
    max-width: 100%; 
    height: auto;
    min-height: auto;
    margin: 0 auto; 
    border-radius: 26px; 
    padding: 42px 28px 54px; 
  }
  .auth-card:before {
    width: 100%;
    height: 100%;
    min-height: auto;
  }
  .auth-header h1 { font-size:28px; line-height:34px; letter-spacing:.3px; }
  .auth-header p { font-size:14px; line-height:18px; margin-bottom:30px; }
  :root { --h-field:56px; }
  .input-wrap input { font-size:13px; }
  .submit-btn { height:56px; font-size:13px; }
  .lang-switch { padding:8px 20px 8px 58px; font-size:14px; min-width:128px; }
  .lang-switch .flag { width:34px; height:34px; left:16px; }
  .fractal-blue-left { opacity:.45; }
}
@media (max-width:420px){
  .site-top { padding:12px 14px; }
  .auth-card { 
    padding: 38px 24px 48px; 
    border-radius: 24px; 
    height: auto;
  }
  .auth-header h1 { font-size:26px; line-height:32px; }
  .auth-header p { font-size:13px; line-height:17px; }
  .field label { font-size:13px; }
  .input-wrap input { padding:0 20px; font-size:13px; }
  .submit-btn { height:54px; }
  .alt-action { font-size:13px; }
  footer.auth-footer { font-size:11px; }
  .lang-switch { padding:7px 18px 7px 54px; font-size:13px; min-width:120px; }
}
@media (max-width:360px){
  .auth-card { 
    padding: 34px 20px 44px; 
    height: auto;
  }
  .auth-header h1 { font-size:24px; line-height:30px; }
  .input-wrap input { font-size:12.5px; }
  .submit-btn { font-size:12.5px; }
}

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

@media (min-width:1700px){
  .lang-switch { position:fixed; top:30px; right:46px; backdrop-filter:blur(18px) saturate(150%); }
  .lang-switch .flag { left:18px; width:34px; height:34px; }
  .site-top .logo { position:fixed; top:30px; left:46px; z-index:50; }
  .site-top { padding-top:90px; }
}

@media (min-width:1600px){
  .auth-card { 
    width: var(--auth-card-width); 
    max-width: var(--auth-card-width);
    min-height: var(--auth-card-min-height);
    padding: 32px 40px 42px; 
  }
  .auth-card:before {
    width: var(--auth-card-width);
    min-height: var(--auth-card-min-height);
  }
  .auth-header { margin-bottom: 30px; }
  .auth-header h1 { font-size: 32px; line-height: 40px; margin-bottom: 12px; }
  .auth-header p { font-size: 16px; line-height: 20px; margin-bottom: 32px; }
  .fractal-blue-left { width:1050px; height:1050px; transform:translate(-18%, -50%) scaleX(1); }
  .fractal-blue-right { width:1320px; height:1320px; transform:translate(22%, -50%); }
}
@media (min-width:1800px){ .lang-switch { top:32px; right:56px; } }
@media (min-width:2000px){ .lang-switch { top:34px; right:72px; } }
@media (min-width:2300px){ .lang-switch { top:36px; right:90px; } }
@media (min-width:1900px){
  .auth-card { 
    width: var(--auth-card-width); 
    max-width: var(--auth-card-width);
    min-height: var(--auth-card-min-height);
    padding: 32px 40px 42px; 
  }
  .auth-card:before {
    width: var(--auth-card-width);
    min-height: var(--auth-card-min-height);
  }
  .auth-header h1 { font-size: 32px; line-height: 40px; }
  .auth-header p { font-size: 16px; line-height: 20px; margin-bottom: 32px; }
  footer.auth-footer { font-size: 12px; }
  .fractal-blue-left { width:1100px; height:1100px; transform:translate(-18%, -50%) scaleX(1); }
  .fractal-blue-right { width:1400px; height:1400px; transform:translate(25%, -50%); }
}

@media (min-width:2300px){
  .auth-card { 
    width: var(--auth-card-width); 
    max-width: var(--auth-card-width);
    min-height: 520px;
    padding: 32px 40px 40px; 
  }
  .auth-card:before {
    width: var(--auth-card-width);
    height: 520px;
    min-height: 520px;
  }
  .auth-header h1 { font-size: 30px; line-height: 38px; }
  .fractal-blue-left { width:1050px; height:1050px; transform:translate(-15%, -50%) scaleX(1); }
  .fractal-blue-right { width:1350px; height:1350px; transform:translate(22%, -50%); }
}

.fractal {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  overflow: visible;
}
.fractal-blue-left, .fractal-blue-right { transform: none; width: 100vw; height: 100vh; }
.fractal img { position: absolute; top: 50%; transform: translateY(-50%); height: 100vh; width: auto; object-fit: contain; }
.fractal-blue-left img { left: 0; }
.fractal-blue-right img { right: 0; }

@media (max-width:375px) {
  .hcaptcha-box {
    margin-top: 10px;
    min-height: 80px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}