@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;700;900&display=swap');

* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Montserrat',sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; background:url('./img/maxresdefault.jpg') no-repeat center center fixed; background-size:cover; overflow-x:hidden; }
.fade-in { animation:fade 0.6s ease; }
@keyframes fade { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:none;} }

.wrapper { width:470px; background:rgba(0,0,0,0.55); color:white; border-radius:14px; padding:40px; text-align:center; backdrop-filter:blur(10px); }
.input-box { position:relative; width:100%; height:50px; margin:20px 0; }
.input-box input { width:100%; height:100%; background:transparent; border:2px solid rgba(255,255,255,0.8); border-radius:40px; outline:none; padding:0 45px 0 20px; font-size:16px; color:white; transition:0.25s; }
.input-box input:hover { border-color:#fff; box-shadow:0 0 10px rgba(255,255,255,0.15); }
.input-box input::placeholder { color:white; }
.input-box i { position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:20px; }

.btn { display:inline-block; width:100%; height:45px; background:white; border:none; border-radius:40px; cursor:pointer; font-size:16px; font-weight:600; color:#333; box-shadow:0 0 10px rgba(0,0,0,0.5); text-decoration:none; line-height:45px; transition:all 0.3s ease; }
.btn:hover { background:#f0f0f0; }

.register-link { font-size:14.5px; text-align:center; margin:20px 0 15px; }
.register-link p a { color:white; text-decoration:none; font-weight:600; }
.register-link p a:hover { text-decoration:underline; }

.menu-btn { position:fixed; top:20px; left:20px; z-index:1100; background:rgba(0,0,0,0.6); color:#fff; border:1px solid rgba(255,255,255,0.2); padding:10px 16px; border-radius:10px; cursor:pointer; backdrop-filter:blur(8px); transition:all 0.3s ease; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); opacity:0; pointer-events:none; transition:0.3s; z-index:1000; }
.overlay.show { opacity:1; pointer-events:auto; }

.sidebar { position:fixed; top:0; left:0; width:260px; height:100vh; background:rgba(0,0,0,0.85); backdrop-filter:blur(10px); transform:translateX(-100%); transition:0.35s ease; z-index:1001; padding:20px; }
.sidebar.open { transform:translateX(0); }

.profile { text-align:center; margin:100px 0 25px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1); }
.avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 10px;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none; /* важно */
}

.avatar:hover {
    box-shadow: 0 0 15px rgba(255,255,255,0.4);
    transform: scale(1.05);
    transition: 0.3s ease;
}


.status { font-size:14px; cursor:pointer; }
.online { color:#4cff4c; }
.offline { color:#ff4c4c; }
.stats { margin-top:10px; font-size:13px; color:#ddd; }
.bar { height:8px; background:rgba(255,255,255,0.2); border-radius:10px; overflow:hidden; margin-top:6px; }
.fill { height:100%; background:linear-gradient(90deg,#fff,#aaa); }

.menu a { display:block; color:#fff; text-decoration:none; padding:10px 12px; border-radius:8px; margin-bottom:6px; transition:0.25s; }
.menu a:hover { background:rgba(255,255,255,0.15); transform:translateX(4px); }

.date { font-size:13px; margin:25px 0 15px; color:#ccc; display:block; }

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

@media (max-width:600px) { .wrapper { width:90%; padding:30px 20px; } }