.login{flex-direction:column;gap:10px;max-width:300px;margin:100px auto;display:flex}input{border:1px solid #ccc;border-radius:8px;padding:10px}button{color:#fff;background:#2563eb;border:none;border-radius:8px;padding:10px}.layout{height:100vh;display:flex}.sidebar{color:#fff;background:#0f172a;width:250px;padding:25px}.sidebar a,.sidebar router-link{color:#cbd5e1;border-radius:8px;margin-bottom:10px;padding:10px;text-decoration:none;display:block}.sidebar a:hover,.router-link-active{color:#fff;background:#1e293b}.main{flex:1;padding:30px;overflow-y:auto}.page{padding:30px;font-family:Arial}.form{background:#fff;border-radius:15px;margin-bottom:20px;padding:20px}input,textarea{border:1px solid #ddd;border-radius:10px;width:100%;margin-bottom:10px;padding:12px}textarea{height:120px}button{cursor:pointer;color:#fff;background:#2563eb;border:none;border-radius:8px;margin-right:5px;padding:10px 15px}.grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.card{background:#fff;border-radius:15px;padding:15px}.slider{height:200px;margin-bottom:10px;position:relative}.slider img{object-fit:cover;border-radius:10px;width:100%;height:200px}.slider button{color:#fff;background:#0006;border:none;padding:5px 10px;position:absolute;top:50%;transform:translateY(-50%)}.slider button:first-child{left:10px}.slider button:last-child{right:10px}.about-page{background:#f5f7fb;min-height:100vh;font-family:Arial}.header{background:#fff;justify-content:space-between;align-items:center;padding:20px 60px;display:flex;box-shadow:0 5px 20px #0000000d}.logo{color:#2563eb;font-size:22px;font-weight:700}.link{color:#333;font-weight:500;text-decoration:none;transition:all .3s}.link:hover{color:#2563eb}.active{color:#2563eb;border-bottom:2px solid #2563eb}.box{text-align:right;direction:rtl;background:#fff;border-radius:20px;max-width:800px;margin:60px auto;padding:30px;box-shadow:0 10px 30px #00000014}.box h2{color:#2563eb;margin-bottom:20px}.box p{color:#374151;margin-bottom:15px;line-height:2}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial}.page{background:#f5f7fb;min-height:100vh}.header{z-index:10;background:#fff;justify-content:space-between;padding:20px 60px;display:flex;position:sticky;top:0;box-shadow:0 5px 20px #0000000d}.logo{color:#2563eb;font-weight:700}.menu{gap:15px;display:flex}.link{color:#333;border-radius:10px;padding:8px 12px;text-decoration:none}.link:hover{background:#f1f5f9}.active{color:#fff;background:#2563eb}.hero{text-align:center;padding:50px}.posts{grid-template-columns:repeat(3,1fr);gap:20px;padding:40px;display:grid}.card{background:#fff;border-radius:15px;padding-bottom:15px;overflow:hidden;box-shadow:0 10px 20px #00000014}.slider{width:100%;height:220px;position:relative;overflow:hidden}.slider img{object-fit:cover;width:100%;height:220px}.nav{color:#fff;cursor:pointer;background:#0006;border:none;border-radius:8px;padding:6px 12px;position:absolute;top:50%;transform:translateY(-50%)}.left{left:10px}.right{right:10px}.card h3{padding:10px 15px}.card p{color:#555;padding:0 15px}.footer{text-align:center;color:#fff;background:#111827;margin-top:40px;padding:30px}