:root{
  --bg:#f6f5f2; --card:#fff; --ink:#1f1a17; --muted:#6b635c;
  --accent:#c8801f; --accent-ink:#7a3d00; --line:#e6e1da; --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);
  --maxw:880px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Naskh Arabic","Noto Sans Arabic",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; font-size:17px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* header / footer */
.site-header{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px}
.site-title{font-size:22px; margin:0; letter-spacing:-.01em}
.site-footer{color:var(--muted); border-top:1px solid var(--line); margin-top:48px; padding:24px 0; font-size:14px; text-align:center}

/* buttons */
.btn{display:inline-block; padding:8px 14px; border-radius:9px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); text-decoration:none; font-size:14px; cursor:pointer; font-weight:550}
.btn:hover{border-color:#cdc6bd}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(.96)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px; font-size:13px}

/* content blocks */
.content{padding:34px 20px 0}
.block{margin:0 0 26px}
.block:last-child{margin-bottom:0}
.blk-heading{margin:.2em 0; line-height:1.25}
.blk-rich :is(h2,h3,h4,h5){margin:.4em 0 .3em; line-height:1.3}
.blk-rich ul,.blk-rich ol{padding-inline-start:1.4em}
.blk-rich p{margin:.5em 0}
.blk-rich [dir="rtl"],.blk-rich ul[dir="rtl"],.blk-rich ol[dir="rtl"]{text-align:right}
.blk-image img{max-width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow)}
.blk-video{position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.blk-video iframe{position:absolute; inset:0; width:100%; height:100%}
.blk-divider{border:none; border-top:1px solid var(--line); margin:8px 0}
.blk-quote{margin:0; padding:16px 20px; border-inline-start:4px solid var(--accent);
  background:var(--card); border-radius:10px; box-shadow:var(--shadow); font-size:19px}
.blk-quote cite{display:block; margin-top:8px; font-size:14px; color:var(--muted); font-style:normal}
.blk-animated{font-size:30px; font-weight:700; letter-spacing:-.01em}
.blk-animated .hl{color:var(--accent-ink); background:linear-gradient(transparent 60%, #f3d9a8 60%); padding:0 .1em}
.blk-animated .rot{color:var(--accent); transition:opacity .25s ease; display:inline-block}
.empty{color:var(--muted); text-align:center; padding:40px 0}

/* login */
.login-body{display:flex; min-height:100vh; align-items:center; justify-content:center}
.login-card{background:var(--card); padding:30px; border-radius:16px; box-shadow:var(--shadow);
  width:340px; max-width:90vw; display:flex; flex-direction:column; gap:14px}
.login-card h1{margin:0 0 4px; font-size:22px}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted)}
.login-card input{padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-size:16px}
.form-error{background:#fdecec; color:#a12626; padding:8px 12px; border-radius:8px; margin:0; font-size:14px}
.login-card .back{font-size:13px; color:var(--muted); text-decoration:none; text-align:center}

@media (max-width:600px){
  body{font-size:16px}
  .blk-animated{font-size:24px}
  .site-title{font-size:19px}
}