:root{--primary-color:#5c54e5;--primary-hover:#4a42cd;--bg-color:#f8f9fd;--card-bg:#fff;--text-main:#2d3142;--text-muted:#7c8097;--error-color:#fa5252;--border-color:#e6e8f0;--like-color:#4c6ef5;--unlike-color:#fa5252;--shadow:0 8px 24px #959da526;--radius:12px}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:var(--bg-color);color:var(--text-main);min-height:100vh}.navbar{background-color:var(--primary-color);z-index:1000;justify-content:space-between;align-items:center;height:65px;padding:0 2rem;display:flex;position:sticky;top:0;box-shadow:0 4px 12px #5c54e533}.navbar .links{gap:1.5rem;display:flex}.navbar .links a{color:#ffffffd9;padding:.5rem 0;font-size:1rem;font-weight:600;text-decoration:none;transition:color .2s}.navbar .links a:hover{color:#fff}.navbar .user{align-items:center;gap:1rem;display:flex}.navbar .user p{color:#fff;font-size:.95rem;font-weight:500}.navbar .user img{object-fit:cover;border:2px solid #ffffff80;border-radius:50%;width:32px;height:32px}.navbar .logout-btn{color:#fff;cursor:pointer;background-color:#ffffff26;border:1px solid #ffffff4d;border-radius:6px;padding:.4rem 1rem;font-weight:600;transition:all .2s}.navbar .logout-btn:hover{color:var(--primary-color);background-color:#fff}.page-container,.create-post-page,.login-page{max-width:700px;margin:2.5rem auto;padding:0 1.5rem}.card{background-color:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border-color);padding:2rem}.card h1{color:var(--text-main);margin-bottom:1.5rem;padding-bottom:.5rem;font-size:1.8rem;position:relative}.card h1:after{content:"";background-color:var(--primary-color);border-radius:2px;width:40px;height:4px;position:absolute;bottom:0;left:0}.page-container .card>div>div{background-color:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border-color);margin-bottom:1.5rem;padding:1.5rem;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #00000008}.page-container .card>div>div:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.page-container .user{margin-bottom:.75rem}.page-container .user p{color:var(--primary-color);font-size:.9rem;font-weight:600}.page-container .title h1{color:var(--text-main);margin-bottom:.75rem;padding-bottom:0;font-size:1.4rem;font-weight:700}.page-container .title h1:after{display:none}.page-container .body p{color:var(--text-main);white-space:pre-wrap;margin-bottom:1.25rem;font-size:1.05rem;line-height:1.6}.page-container .footer{border-top:1px solid var(--border-color);align-items:center;gap:1rem;padding-top:1rem;display:flex}.page-container .footer button{border:1px solid var(--border-color);cursor:pointer;background:#f1f3f5;border-radius:20px;justify-content:center;align-items:center;padding:.4rem 1rem;font-size:1.1rem;transition:all .2s;display:flex}.page-container .footer button:hover{background-color:#e9ecef;transform:scale(1.05)}.page-container .footer p{color:var(--text-muted);font-size:.95rem;font-weight:600}.form-card h2{color:var(--text-main);margin-bottom:1.5rem;font-size:1.6rem}.post-form{flex-direction:column;display:flex}.form-input,.form-textarea{border:1px solid var(--border-color);width:100%;color:var(--text-main);background-color:#fafbfc;border-radius:8px;outline:none;padding:.85rem 1rem;font-size:1rem;transition:all .2s}.form-textarea{resize:vertical;min-height:150px}.form-input:focus,.form-textarea:focus{border-color:var(--primary-color);background-color:#fff;box-shadow:0 0 0 3px #5c54e526}.error-msg{color:var(--error-color);min-height:1.2rem;margin-top:.35rem;margin-bottom:1rem;font-size:.85rem;font-weight:500}.submit-btn{background-color:var(--primary-color);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.9rem;font-size:1rem;font-weight:600;transition:background-color .2s,transform .1s;box-shadow:0 4px 12px #5c54e533}.submit-btn:hover{background-color:var(--primary-hover)}.submit-btn:active{transform:scale(.98)}.login-page{justify-content:center;align-items:center;min-height:calc(100vh - 150px);display:flex}.login-page .card{text-align:center;width:100%;max-width:400px}.login-page p{color:var(--text-main);margin-bottom:1.5rem;font-size:1.1rem;font-weight:500}.google-btn{color:#4285f4;cursor:pointer;background-color:#fff;border:1px solid #4285f4;border-radius:6px;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s;box-shadow:0 2px 6px #0000000d}.google-btn:hover{color:#fff;background-color:#4285f4;box-shadow:0 4px 12px #4285f44d}