/* style.css (v21 - увеличена высота формы) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --primary-color: #00e5ff;
  --shadow-color: rgba(0, 229, 255, 0.6);
  --input-bg-color: rgba(26, 22, 53, 0.85);
  --inactive-color: rgba(0, 229, 255, 0.4);
  --darker-bg: #1a1635;
  --error-color: #ff4d4d;
  --success-color: var(--primary-color);
}

* {
    box-sizing: border-box;
}

body {
  background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #0f0c29);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: var(--primary-color);
  font-family: 'JetBrains Mono', monospace;
  margin: 0;
  overflow: hidden;
}

@keyframes gradientBG {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.centered-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.1), transparent 60%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* --- Стили для лендинга (index.html) --- */
.landing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.landing-title {
    font-size: 7rem;
    margin: 0;
    text-shadow: 0 0 10px var(--shadow-color), 0 0 25px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 100px var(--shadow-color);
    animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
    to {
        text-shadow: 0 0 10px var(--shadow-color), 0 0 22px var(--shadow-color), 0 0 45px var(--shadow-color);
        opacity: 0.8;
    }
}
.tagline {
    font-size: 1.2rem;
    margin-top: 10px;
    margin-bottom: 40px;
    letter-spacing: 1px;
    opacity: 0.8;
}
.cta-button {
    background-color: transparent; border: 2px solid var(--primary-color); color: var(--primary-color);
    padding: 15px 30px; border-radius: 5px; font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem; cursor: pointer; text-transform: uppercase; font-weight: bold;
    transition: all 0.3s ease; text-shadow: 0 0 5px var(--shadow-color); text-decoration: none;
}
.cta-button:hover, button[type="submit"]:hover {
    background-color: var(--primary-color);
    color: #0f0c29;
    box-shadow: 0 0 25px var(--shadow-color);
    text-shadow: none;
}

/* --- Стили для аутентификации (auth.html) --- */
.auth-wrapper {
    width: 400px; max-width: 90%; background-color: var(--input-bg-color);
    border-radius: 10px; border: 1px solid var(--primary-color);
    box-shadow: 0 0 20px var(--shadow-color); overflow: hidden; backdrop-filter: blur(5px);
}
.tabs { display: flex; }
.tab-button {
    flex: 1; padding: 15px; background-color: transparent; border: none;
    border-bottom: 2px solid var(--inactive-color); color: var(--inactive-color);
    font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease;
}
.tab-button.active {
    color: var(--primary-color); border-bottom-color: var(--primary-color);
    text-shadow: 0 0 5px var(--shadow-color);
}
.form-content { 
    padding: 30px 40px 40px 40px;
    position: relative;
    min-height: 500px; /* ИЗМЕНЕНИЕ ЗДЕСЬ */
    display: flex;
    align-items: center;
}
.form-panel {
    position: absolute;
    width: calc(100% - 80px); /* Ширина минус паддинги родителя */
    left: 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
.form-panel.active {
    opacity: 1;
    visibility: visible;
}
form { display: flex; flex-direction: column; width: 100%; align-items: stretch; gap: 25px; }
h2 { text-align: center; margin-top: 0; margin-bottom: 10px; text-shadow: 0 0 5px var(--shadow-color); }

.input-group { position: relative; }

input {
    background-color: var(--darker-bg); border: 1px solid var(--primary-color);
    color: var(--primary-color); padding: 15px; border-radius: 5px;
    font-family: 'JetBrains Mono', monospace; font-size: 1rem; outline: none;
    transition: all 0.3s ease; width: 100%;
}
.input-group label {
    position: absolute; left: 15px; top: 15px; color: var(--inactive-color);
    pointer-events: none; transition: all 0.3s ease;
}
.input-group input:not(:placeholder-shown) + label,
.input-group input:focus + label {
    top: -10px; left: 10px; font-size: 0.8rem;
    background: var(--darker-bg); padding: 0 5px;
}
input:focus { box-shadow: 0 0 10px var(--shadow-color); }

button[type="submit"] {
    margin-top: 10px; background-color: var(--primary-color); border: none;
    color: var(--darker-bg); padding: 15px; border-radius: 5px; font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem; cursor: pointer; text-transform: uppercase; font-weight: bold;
    transition: all 0.3s ease;
}

button[type="submit"]:active { transform: scale(0.98); }

.forgot-password-link {
    display: block; margin-top: 20px; font-size: 0.9rem; color: var(--inactive-color);
    text-decoration: none; transition: color 0.3s ease; cursor: pointer;
}

.forgot-password-link:hover { color: var(--primary-color); }