* {box-sizing: border-box; margin: 0; padding: 0;}
body, html {width: 100%; height: 100%; color: #ffe58f; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; background: url('../img/bg-main.jpg') no-repeat center top fixed; background-size: cover;}
html, body, input, button, select, textarea, a, label {font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;}
.page-overlay {background: rgba(8, 8, 8, 0.4); width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start;}
.main-wrapper {max-width: 690px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;}
.site-logo img {width: 100%; max-width: 690px;}
.auth-form {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;}
.auth-form .auth-input, .auth-form .btn {flex: 1; font-size: 15px; height: 36px;}
.auth-input {padding: 9px 10px 10px; width: 198px; border: 1px solid #8a8a8a; border-radius: 6px; background: #f9f6ef; color: #2a2a2a; transition: all 0.3s ease-in-out; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);}
.auth-input::placeholder {color: #999;}
.auth-input:focus {outline: none; border-color: #a5c956; box-shadow: 0 0 4px 2px rgba(165, 201, 86, 0.3); background: #fffdf7;}
.auth-input:focus::placeholder {opacity: 0;}
.btn {padding: 8px 24px 9px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; color: #fff; transition: all 0.3s ease-in-out; text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);}
.btn-login {background: linear-gradient(to bottom, #cdeb8e, #a5c956);}
.btn-login:hover {background: linear-gradient(to bottom, #d9f59a, #b0dc68); box-shadow: 0 0 10px rgba(180, 220, 100, 0.5);}
.btn-register {background: linear-gradient(to bottom, #7abcff, #4096ee);}
.btn-register:hover {background: linear-gradient(to bottom, #8fcbff, #5ba4f5); box-shadow: 0 0 10px rgba(96, 171, 248, 0.5);}
.main-menu {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px;}
.main-menu a {color: #ffe58f; font-size: 18px; text-decoration: none; position: relative;}
.main-menu a::after {content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: #ffe58f; transition: 0.3s ease;}
.main-menu a:hover::after {width: 100%;}
.project-description {color: #fff5c8; font-size: 16px; line-height: 1.6;}
.project-version {color: #ff9b53; font-weight: bold;}
.site-footer {color: #ff9b53; font-size: 16px; letter-spacing: 0.8px; display: flex; flex-direction: column; align-items: center; gap: 12px;}