:root{
  --purple:#5b2a86; --purple-dark:#3d1a5e; --purple-light:#8b5fbf; --purple-bg:#f4effa;
  --gold:#c9a227; --text:#2b2333; --muted:#6b6478; --white:#fff; --border:#e4dcf0;
  --radius:14px; --shadow:0 6px 24px rgba(91,42,134,.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Tajawal',sans-serif; background:var(--purple-bg); color:var(--text); min-height:100vh;}
img{max-width:100%; display:block;}
.container{max-width:1100px; margin:0 auto; padding:0 18px;}
header{background:linear-gradient(90deg,var(--purple-dark),var(--purple)); position:sticky; top:0; z-index:50;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; max-width:1100px; margin:0 auto; flex-wrap:wrap; gap:10px;}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:900; font-size:1.2rem;}
#logoBox{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; border:2px dashed rgba(255,255,255,.5); flex-shrink:0;}
#logoBox img{width:100%; height:100%; object-fit:cover;}
#logoInput{display:none;}
.navlinks{display:flex; gap:4px; flex-wrap:wrap;}
.navlinks button{background:none; border:none; color:#eee; font-family:inherit; font-size:.95rem; padding:8px 12px; border-radius:8px; cursor:pointer;}
.navlinks button.active,.navlinks button:hover{background:rgba(255,255,255,.15); color:#fff;}
.authbtns{display:flex; gap:8px;}
.btn{display:inline-block; padding:9px 18px; border-radius:8px; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.9rem; text-decoration:none;}
.btn-gold{background:var(--gold); color:#3d2f00;}
.btn-outline{background:transparent; border:1.5px solid #fff; color:#fff;}
.btn-purple{background:var(--purple); color:#fff;}
.btn-purple:hover{background:var(--purple-dark);}
section{display:none;}
section.active{display:block;}
.hero{background:linear-gradient(135deg,var(--purple),var(--purple-light)); color:#fff; padding:70px 0 90px; text-align:center;}
.hero h1{font-size:2.2rem; font-weight:900; margin-bottom:14px;}
.hero p{max-width:600px; margin:0 auto 26px; opacity:.92; line-height:1.8;}
.stats{display:flex; justify-content:center; gap:40px; margin-top:40px; flex-wrap:wrap;}
.stat b{font-size:1.8rem; display:block;}
.section-pad{padding:50px 0;}
h2.title{font-size:1.6rem; font-weight:900; color:var(--purple-dark); text-align:center; margin-bottom:8px;}
.subtitle{text-align:center; color:var(--muted); margin-bottom:34px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; border:1px solid var(--border);}
.practice-icon{width:46px; height:46px; border-radius:10px; background:var(--purple-bg); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:12px;}
.lawyer-card{text-align:center;}
.avatar{width:84px; height:84px; border-radius:50%; background:var(--purple-bg); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--purple);}
.tag{display:inline-block; background:var(--purple-bg); color:var(--purple); font-size:.75rem; padding:3px 10px; border-radius:20px; margin:2px;}
.news-date{color:var(--gold); font-weight:700; font-size:.8rem; margin-bottom:6px;}
form.card{max-width:560px; margin:0 auto;}
label{display:block; font-weight:700; margin:14px 0 6px; font-size:.9rem;}
input,select,textarea{width:100%; padding:11px; border:1.5px solid var(--border); border-radius:8px; font-family:inherit; font-size:.95rem; background:var(--white); color:var(--text);}
textarea{min-height:100px; resize:vertical;}
.tabs{display:flex; gap:8px; margin-bottom:20px; justify-content:center; flex-wrap:wrap;}
.tabs button{padding:9px 20px; border-radius:20px; border:1.5px solid var(--purple); background:transparent; color:var(--purple); font-family:inherit; cursor:pointer; font-weight:700;}
.tabs button.active{background:var(--purple); color:#fff;}
.msg{padding:12px; border-radius:8px; margin:14px 0; font-size:.9rem;}
.msg.ok{background:#eafaf0; color:#1e7a46; border:1px solid #b7ebc9;}
.msg.err{background:#fdeceb; color:#a4302a; border:1px solid #f3c4c0;}
.dash-item{background:var(--white); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:12px;}
.status{font-size:.75rem; padding:3px 10px; border-radius:20px; font-weight:700;}
.status.pending{background:#fff3d6; color:#8a6300;}
.status.answered{background:#e0f5e9; color:#1e7a46;}
.status.progress{background:#e6e0fa; color:var(--purple);}
.status.closed{background:#eee; color:#666;}
footer{background:var(--purple-dark); color:#e8dcf5; padding:36px 0; margin-top:20px;}
footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:.9rem;}
.hidden{display:none !important;}
.small{font-size:.85rem; color:var(--muted);}
.float-btn{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#fff; text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.25);}
.float-btn.whatsapp{background:#25D366;}
.float-btn.telegram{background:#229ED9;}
.news-img,.lawyer-photo{width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:12px;}
.lawyer-photo-round{width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 auto 12px; display:block;}
.notif-item{background:var(--white); border:1px solid var(--border); border-inline-start:4px solid var(--purple); border-radius:10px; padding:14px; margin-bottom:10px;}
@media(max-width:640px){.hero h1{font-size:1.6rem;} .nav{flex-direction:column; align-items:stretch;} .navlinks{justify-content:center;}}