*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto; background:var(--bg); color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,textarea,select,button{font-family:inherit}
textarea{resize:vertical}

.header{
  position:sticky; top:0; z-index:30;
  background:var(--card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--navy)}
.brand img{width:34px;height:34px}
.search{display:flex; gap:.5rem; flex:1; max-width:560px}
.search input{flex:1; padding:.6rem .8rem; border:1px solid var(--border); border-radius:12px; background:#fff}
.header__right{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.icon-btn{border:1px solid var(--border); background:#fff; border-radius:12px; padding:.4rem .6rem; cursor:pointer}
.btn{
  background:var(--navy); color:#fff; border:none; border-radius:12px;
  padding:.55rem .9rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
}
.btn.ghost{background:transparent;color:var(--navy); border:1px solid var(--border)}
.btn.danger{background:var(--danger)}
.chip{background:rgba(42,167,222,.12); color:var(--navy); padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); font-size:.9rem}
.badge{background:rgba(15,163,168,.14); color:var(--navy); padding:.2rem .55rem; border-radius:999px; border:1px solid var(--border); font-size:.85rem}
.muted{color:var(--muted)}
.tiny{font-size:.78rem}
.dot{margin:0 .25rem}

.app{display:flex; gap:1rem; padding:1rem; max-width:1200px; margin:0 auto}
.content{flex:1; min-width:0}
.sidebar{
  width:280px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.75rem; position:sticky; top:76px; height:calc(100vh - 92px); overflow:auto;
}
.sidebar__head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.75rem}
.sidebar__title{font-weight:800;color:var(--navy)}
.nav{display:flex; flex-direction:column; gap:.35rem}
.nav a{padding:.55rem .7rem;border-radius:12px;border:1px solid transparent}
.nav a:hover{background:rgba(24,50,93,.05); border-color:var(--border)}

.drawer-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40}
@media (max-width: 980px){
  .search{display:none}
  .sidebar{position:fixed; inset:0 auto 0 0; height:100vh; top:0; z-index:50; transform:translateX(-110%); transition:.2s ease}
  .sidebar.open{transform:translateX(0)}
  .drawer-backdrop.show{display:block}
}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card__body{padding:1rem}
.grid{display:grid; gap:1rem}
.grid.cats{grid-template-columns:repeat(4,1fr)}
.grid.posts{grid-template-columns:repeat(3,1fr)}
.grid.stats{grid-template-columns:repeat(5,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width: 980px){
  .grid.cats{grid-template-columns:repeat(2,1fr)}
  .grid.posts{grid-template-columns:repeat(1,1fr)}
  .grid.stats{grid-template-columns:repeat(2,1fr)}
  .grid.two{grid-template-columns:repeat(1,1fr)}
  .app{padding:.75rem}
}
.cat-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); position:relative}
.cat-card .badge{position:absolute; top:.75rem; left:.75rem}
.cat-card__title{font-weight:800; color:var(--navy); font-size:1.05rem}
.cat-card__desc{margin-top:.35rem; color:var(--muted); font-size:.9rem}

.post-card .cover{width:100%; height:170px; object-fit:cover; border-radius:14px}
.post-card .title{margin:.5rem 0 .2rem 0; font-size:1.05rem}
.post-card .excerpt{margin:0; color:var(--muted); font-size:.92rem; min-height:3.1em}
.row{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.meta{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.75rem; flex-wrap:wrap}
.stats{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.page-head h1{margin:0;color:var(--navy)}
.section{margin:1.2rem 0}
.section__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.filters{display:flex; gap:.5rem; flex-wrap:wrap}
select, input, textarea{
  width:100%; padding:.6rem .8rem; border:1px solid var(--border); border-radius:12px; background:#fff;
}
.filters select, .filters input{width:auto; min-width:160px}

.alert{padding:.75rem 1rem; border-radius:14px; border:1px solid var(--border); margin-bottom:1rem}
.alert.success{background:rgba(31,157,85,.12)}
.alert.error{background:rgba(214,69,69,.12)}
.alert ul{margin:.25rem 0 0 0}

.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:.7rem .5rem; border-bottom:1px solid var(--border); vertical-align:top; text-align:right}
.table th{color:var(--navy); font-weight:800; background:rgba(24,50,93,.03)}
.list{margin:0; padding:0 1.2rem 0 0}
.list li{margin:.35rem 0}

.pagination{display:flex; gap:.35rem; justify-content:center; margin-top:1rem; flex-wrap:wrap}
.pagination a{padding:.4rem .65rem; border-radius:12px; border:1px solid var(--border); background:#fff}
.pagination a.active{background:var(--navy); color:#fff}

.center{display:flex; align-items:center; justify-content:center; padding:2rem}
.kpi{color:var(--muted); font-weight:700}
.kpi__v{font-size:1.6rem; font-weight:900; color:var(--navy)}

.post-head{display:grid; grid-template-columns: 1fr; gap:1rem}
.post-head__cover{height:220px; border-radius:var(--radius); background-size:cover; background-position:center; border:1px solid var(--border)}
.post-content{margin-top:1rem}
.prose p{line-height:1.9}
.prose h2,.prose h3{color:var(--navy)}
.comments{margin-top:1rem}
.thread{display:flex; flex-direction:column; gap:.5rem}
.thread.level-1{margin-right:1rem}
.thread.level-2{margin-right:2rem}
.comment{border:1px solid var(--border); background:rgba(24,50,93,.03); border-radius:14px; padding:.65rem}
.comment--doc{background:rgba(15,163,168,.10); border-color:rgba(15,163,168,.25)}
.comment__head{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.comment__text{margin-top:.35rem}

.stars, .stars-input{display:inline-flex; gap:.15rem; align-items:center}
.star{font-size:1.05rem; line-height:1}
.star.filled{color:#f4b400}
.star.empty{color:rgba(0,0,0,.18)}
.stars-input .star{cursor:pointer; font-size:1.35rem}

.footer{padding:1.3rem 1rem; margin-top:1.5rem; border-top:1px solid var(--border); background:var(--card); display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap}
.footer__links{display:flex; gap:1rem; flex-wrap:wrap}

.toast-host{position:fixed; bottom:16px; left:16px; z-index:60; display:flex; flex-direction:column; gap:.5rem}
.toast{background:var(--navy); color:#fff; padding:.65rem .9rem; border-radius:14px; box-shadow:var(--shadow); max-width:320px}

.chat{margin:1rem 0; display:flex; flex-direction:column; gap:.5rem; max-height:52vh; overflow:auto; padding:.75rem; border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,.55)}
.bubble{max-width:80%; padding:.6rem .75rem; border-radius:16px; border:1px solid var(--border); background:#fff}
.bubble--visitor{margin-left:auto}
.bubble--doctor{margin-right:auto; background:rgba(15,163,168,.10)}
.chat-img{margin-top:.35rem; border-radius:12px; max-height:180px; object-fit:cover}