/* ==========================================================================
   Единая страница входа / регистрации — split-layout в фирменном стиле сайта.
   Подключается из login.php и register.php. Акцентный цвет приходит инлайном
   (--accent) из настроек, всё остальное строится от него через color-mix.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:          #1c1e22;
  --bg-2:        #222428;
  --bg-3:        #26292e;
  --bg-card:     #2d3036;
  --bg-input:    #1e2025;
  --bg-hover:    #2e3138;
  --border:      #2e3239;
  --border-2:    #353b45;
  --text:        #c8cdd8;
  --text-dim:    #5c6475;
  --text-light:  #e2e6ef;
  --text-muted:  #7a8499;
  --red:         #e05252;
  --accent:      #3dba6f;   /* переопределяется инлайном из настроек сайта */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ height:100%; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; }

.auth-wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:100vh;
}

/* ── Левая часть: hero ─────────────────────────────────── */
.auth-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:64px 72px;
  border-right:1px solid var(--border);
  background:
    radial-gradient(120% 90% at 12% 100%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 55%),
    radial-gradient(80% 60% at 92% 0%,  color-mix(in srgb, var(--accent) 7%,  transparent) 0%, transparent 50%),
    linear-gradient(160deg, #16181c 0%, #0f1114 100%);
}
/* тонкая сетка на фоне (как на референсе) */
.auth-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(115% 100% at 18% 50%, #000 0%, transparent 75%);
          mask-image:radial-gradient(115% 100% at 18% 50%, #000 0%, transparent 75%);
  pointer-events:none;
}
.auth-hero-inner{ position:relative; max-width:470px; }

.hero-logo{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow:0 10px 34px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  margin-bottom:26px;
}
.hero-brand{
  font-size:14px; font-weight:700; letter-spacing:.03em;
  color:var(--accent); margin-bottom:18px;
}
.hero-title{
  font-size:44px; line-height:1.08; font-weight:800;
  color:var(--text-light); letter-spacing:-.02em; margin-bottom:20px;
}
.hero-title span{
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #ffffff));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:15.5px; color:var(--text-muted); max-width:410px; }

/* ── Правая часть: карточка ────────────────────────────── */
.auth-panel{
  display:flex; align-items:center; justify-content:center;
  padding:40px 32px; overflow-y:auto;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 60%),
    var(--bg);
}
.auth-card{
  width:100%; max-width:400px; margin:auto;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:18px;
  padding:34px 32px 28px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  animation:authUp .5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes authUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.auth-brand{ font-size:19px; font-weight:800; color:var(--text-light); text-align:center; }
.auth-brand span{ color:var(--accent); }
.auth-brand-sub{ text-align:center; font-size:12.5px; color:var(--text-dim); margin:4px 0 22px; }

/* сегментированный переключатель вход/регистрация */
.auth-tabs{
  display:flex; gap:4px; padding:4px; margin-bottom:24px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:11px;
}
.auth-tab{
  flex:1; text-align:center; padding:9px 0;
  font-size:13.5px; font-weight:600; color:var(--text-muted);
  border-radius:8px; cursor:pointer;
  transition:background .18s, color .18s;
}
.auth-tab:hover{ color:var(--text-light); }
.auth-tab.active{ background:var(--bg-card); color:var(--text-light); box-shadow:0 1px 2px rgba(0,0,0,.25); }

.auth-title{ font-size:21px; font-weight:700; color:var(--text-light); text-align:center; margin-bottom:6px; }
.auth-desc{ font-size:13px; color:var(--text-dim); text-align:center; margin-bottom:22px; }

/* поля ввода */
.auth-field{ margin-bottom:14px; }
.auth-input-wrap{ position:relative; }
.auth-input{
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text-light);
  font-size:14px; font-family:var(--font);
  padding:13px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.auth-input::placeholder{ color:var(--text-dim); }
.auth-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.auth-eye{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--text-dim); font-size:17px; cursor:pointer;
  background:none; border:none; padding:0; line-height:1;
  transition:color .15s;
}
.auth-eye:hover{ color:var(--text-muted); }
.auth-hint{ font-size:11.5px; color:var(--text-dim); margin-top:6px; padding-left:2px; }

/* основная кнопка */
.auth-btn{
  width:100%; margin-top:6px;
  padding:13px 16px; border:none; border-radius:10px;
  font-size:14.5px; font-weight:700; font-family:var(--font); color:#fff; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ffffff));
  box-shadow:0 12px 26px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  transition:transform .12s, box-shadow .18s, filter .18s;
}
.auth-btn:hover{
  transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 16px 32px -10px color-mix(in srgb, var(--accent) 85%, transparent);
}
.auth-btn:active{ transform:translateY(0); }
.auth-btn i{ margin-right:7px; }

/* сообщения (ошибка / успех) */
.auth-msg{
  display:flex; align-items:center; gap:9px;
  border-radius:10px; padding:11px 14px; margin-bottom:16px;
  font-size:13px; line-height:1.4;
}
.auth-msg i{ flex-shrink:0; font-size:16px; }
.auth-msg.err{ background:rgba(224,82,82,.09); border:1px solid rgba(224,82,82,.28); color:#e8888f; }
.auth-msg.ok{
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color:color-mix(in srgb, var(--accent) 65%, #ffffff);
}

/* разделитель «или» */
.auth-or{ display:flex; align-items:center; gap:12px; color:var(--text-dim); font-size:12px; margin:20px 0; }
.auth-or::before,.auth-or::after{ content:''; flex:1; height:1px; background:var(--border); }

/* виджет телеграм по центру */
.auth-tg{ display:flex; justify-content:center; }

/* низ карточки */
.auth-foot{ display:flex; align-items:center; justify-content:center; margin-top:20px; }
.auth-back{
  font-size:12.5px; color:var(--text-dim);
  display:inline-flex; align-items:center; gap:6px; transition:color .15s;
}
.auth-back:hover{ color:var(--text-muted); }
.auth-terms{ font-size:11.5px; color:var(--text-dim); text-align:center; margin-top:14px; line-height:1.5; }
.auth-terms a{ color:var(--accent); }
.auth-terms a:hover{ text-decoration:underline; }

/* ── Адаптив ────────────────────────────────────────────── */
@media (max-width: 920px){
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-hero{ display:none; }
  .auth-panel{ padding:28px 18px; min-height:100vh; }
}

@media (prefers-reduced-motion: reduce){
  .auth-card{ animation:none; }
  .auth-btn:hover{ transform:none; }
}