@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#222;background:#fafafa;font-family:Poppins,sans-serif}.login-page{background-image:url(https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1600&q=80);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex;position:relative;overflow:hidden}.overlay{background:linear-gradient(#0000008c,#0000008c);position:absolute;inset:0}.login-container{z-index:2;justify-content:space-between;align-items:center;gap:60px;width:1100px;max-width:95%;display:flex;position:relative}.login-left{color:#fff;flex:1}.login-left h1{letter-spacing:1px;margin-bottom:20px;font-size:70px;font-weight:700}.login-left p{opacity:.95;font-size:22px;line-height:1.7}.login-card{-webkit-backdrop-filter:blur(20px);color:#fff;background:#ffffff1f;border:1px solid #fff3;border-radius:25px;width:420px;padding:45px;box-shadow:0 15px 45px #00000059}.login-card h2{text-align:center;margin-bottom:10px;font-size:32px}.subtitle{text-align:center;color:#ddd;margin-bottom:30px}.login-card input{color:#fff;background:#ffffff26;border:1px solid #ffffff40;border-radius:12px;outline:none;width:100%;margin-bottom:18px;padding:15px 18px;font-size:15px;transition:all .3s}.login-card input::placeholder{color:#f1f1f1}.login-card input:focus{background:#fff3;border-color:#0095f6;box-shadow:0 0 12px #0095f659}.create-post input,.comment-box input{color:#222;background:#fff;border:1px solid #ddd;border-radius:10px;outline:none;width:100%;padding:12px 15px;font-size:14px;transition:all .3s}.create-post input::placeholder,.comment-box input::placeholder{color:#888}.create-post input:focus,.comment-box input:focus{border-color:#0095f6;box-shadow:0 0 8px #0095f633}.comment-box input{margin:0}button{cursor:pointer;border:none;border-radius:12px;width:100%;padding:14px;font-size:15px;font-weight:600;transition:all .3s}.login-btn{color:#fff;background:#0095f6}.login-btn:hover{background:#07c;transform:translateY(-2px);box-shadow:0 10px 25px #0095f659}.register-btn{color:#222;background:#fff;margin-top:12px}.register-btn:hover{background:#f2f2f2;transform:translateY(-2px)}.logout-btn{color:#fff;background:#0095f6;border-radius:8px;width:auto;padding:8px 15px}.logout-btn:hover{background:#0078d4}.like-btn{color:#ff2d55;background:0 0;border:none;width:auto;padding:0;font-size:16px}.like-btn:hover{transform:scale(1.1)}.divider{color:#fff;justify-content:center;align-items:center;margin:25px 0;display:flex}.divider:before,.divider:after{content:"";background:#ffffff4d;flex:1;height:1px}.divider span{margin:0 15px}.create-account{text-align:center;color:#eee}.topbar{z-index:100;background:#fff;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;height:65px;padding:0 30px;display:flex;position:sticky;top:0}.topbar-title{font-size:24px;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.container{width:100%;max-width:600px;margin:30px auto}.create-post{background:#fff;border-radius:18px;margin-bottom:25px;padding:20px;box-shadow:0 5px 18px #00000014}.upload-row{justify-content:space-between;align-items:center;margin-top:15px;display:flex}.upload-icon{cursor:pointer;background:#f5f5f5;border-radius:10px;padding:10px 18px;transition:all .3s}.upload-icon:hover{background:#ececec}.post{background:#fff;border-radius:18px;margin-bottom:30px;overflow:hidden;box-shadow:0 6px 20px #00000014}.post-user{padding:15px;font-size:15px;font-weight:600}.post-img{object-fit:cover;width:100%;max-height:600px}.post-actions{padding:12px 15px}.caption,.comments{padding:0 15px 15px}.comment{margin:6px 0}.comment-box{border-top:1px solid #eee;gap:10px;padding:12px;display:flex}.comment-box input{color:#333;background:#f5f5f5;border:none;margin:0}.comment-box input::placeholder{color:#777}.comment-box button{width:auto;padding:10px 18px}@media (width<=900px){.login-container{text-align:center;flex-direction:column}.login-left{display:none}.login-card{width:100%;max-width:420px;padding:35px}.topbar-title{position:static;transform:none}}@media (width<=500px){.login-card{padding:25px}.login-card h2{font-size:26px}.container{padding:12px}}