:root{
  --primary:#24483A; --primary-dark:#1A3529; --accent:#9C7631; --accent-light:#C2A060;
  --accent-soft:#DCC89C; --bg:#FAF6EC; --text:#1F1B16; --secondary:#1C2E4A;
  --fh:'ReemKufi'; --fb:'Tajawal';
}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Tajawal';font-weight:700 900;src:url('fonts/Tajawal-Bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:'ReemKufi';src:url('fonts/ReemKufi.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--fb),sans-serif;background:var(--bg);color:var(--text);line-height:1.75;font-size:16px;min-height:100vh;max-width:100vw;overflow-x:hidden}
a{color:var(--primary);text-decoration:none}
b,strong{font-weight:800}
.wrap{max-width:860px;margin:0 auto;padding:0 14px;width:100%}
header.top{background:var(--primary-dark);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.18)}
header.top .row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;flex-wrap:nowrap}
.brand{color:#fff;min-width:0}
.brand .nm{font-family:var(--fh);font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.hbtn{display:inline-block;border:1.5px solid var(--accent-light);color:#fff;border-radius:10px;padding:4px 9px;font-size:13.5px;font-weight:700;white-space:nowrap;background:none;font-family:inherit;cursor:pointer}
.hbtn .nb{background:#c0392b;color:#fff;border-radius:9px;padding:0 6px;font-size:11.5px;margin-right:3px}
.band{height:6px;background:repeating-linear-gradient(135deg,var(--accent) 0 10px,var(--accent-light) 10px 20px)}
main{padding:12px 0 40px}
h1.pt{font-family:var(--fh);color:var(--primary-dark);font-size:23px;margin:6px 0 2px;line-height:1.4}
.sub{color:#6b6656;font-size:14px;margin-bottom:8px}
.topbtns{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.card{background:#fff;border:1px solid var(--accent-soft);border-radius:14px;padding:12px 14px;margin:10px 0;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card.hl{border-color:var(--accent);border-width:1.5px;background:linear-gradient(180deg,#fff,var(--bg))}
.h{font-family:var(--fh);color:var(--primary-dark);font-size:17px;font-weight:700;margin-bottom:4px}
.row2{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sm{font-size:13.5px;color:#5f5a4d}
.hint{font-size:13px;color:#6b6656;margin-top:4px}
.empty{color:#8a8473;font-size:14px;padding:6px 0}
.btn{display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:10px;padding:7px 14px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;line-height:1.5}
.btn.o{background:#fff;color:var(--primary);border:1.5px solid var(--primary)}
.btn.g{background:var(--accent);color:#fff}
.btn.r{background:#b03a2e}
.btn.xs{padding:3px 10px;font-size:13.5px;border-radius:8px}
.btn:disabled{opacity:.55}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{display:inline-block;border-radius:10px;padding:0 9px;font-size:12.5px;font-weight:800;line-height:1.9;background:var(--bg);color:var(--primary-dark);border:1px solid var(--accent-soft)}
.chip.ok{background:#e9f4ec;color:#1f6b3a;border-color:#bfe0c9}
.chip.wait{background:#fbf5e4;color:#7a5a12;border-color:#ecdcae}
.chip.no{background:#fbeceb;color:#a93226;border-color:#f0cfca}
label.lb{display:block;font-weight:800;color:var(--primary-dark);margin:10px 0 3px;font-size:15px}
input[type=text],input[type=password],input[type=tel],input[type=search],select,textarea{width:100%;border:1.5px solid #cfc7b0;border-radius:10px;padding:8px 10px;font-family:inherit;font-size:16px;color:#111;font-weight:800;background:#fff}
.field-err{color:#b03a2e;font-size:13px;font-weight:800;margin-top:3px}
input.inv,textarea.inv,select.inv{border-color:#b03a2e;background:#fff6f5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
textarea{min-height:90px;resize:vertical}
input[type=file]{font-family:inherit;font-size:14px;margin-top:6px;max-width:100%}
label.chk{display:flex;gap:8px;align-items:flex-start;font-weight:800;margin-top:12px;line-height:1.6;font-size:14.5px}
label.chk input{width:20px;height:20px;flex:none;margin-top:3px}
.flashes{margin:8px 0}
.flash{border-radius:10px;padding:9px 12px;font-weight:800;margin:6px 0;font-size:14.5px}
.flash.err{background:#fbeceb;color:#a93226;border:1px solid #f0cfca}
.flash.ok{background:#e9f4ec;color:#1f6b3a;border:1px solid #bfe0c9}
.tabsstrip{display:flex;gap:6px;overflow-x:auto;white-space:nowrap;padding:4px 0 8px;margin-bottom:6px;-webkit-overflow-scrolling:touch}
.tabsstrip a,.tabsstrip span,.tabsstrip button{display:inline-block;flex:none;border:1.5px solid var(--accent-soft);border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px;color:var(--primary-dark);background:#fff;font-family:inherit;cursor:pointer}
.tabsstrip a.on,.tabsstrip button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.brand{display:flex;align-items:center;gap:7px}
.brand-icon{border-radius:6px;display:block;flex:none}
.figrow{display:block;padding:8px 0;border-top:1px solid #f0ead7}
.figrow:first-child{border-top:0}
.back{display:inline-block;margin-bottom:8px;font-weight:800;color:var(--primary)}
.taskcard{border-right:4px solid var(--accent-soft)}
.taskcard.needsinfo{border-right-color:#b03a2e}
.taskcard.pending{border-right-color:#7a5a12}
.taskcard.published{border-right-color:#1f6b3a}
.dup{background:#fbeceb;border:1.5px solid #f0cfca;color:#a93226;border-radius:10px;padding:8px 10px;margin:8px 0;font-weight:800;font-size:14px}
table.adm{width:100%;border-collapse:collapse;font-size:13.5px}
table.adm td,table.adm th{border:1px solid var(--accent-soft);padding:6px 8px;text-align:right;vertical-align:top}
table.adm th{background:var(--bg)}
.inline-form{display:inline}
.permgrid{display:flex;flex-direction:column;gap:8px;margin:10px 0}
@media (max-width:420px){ .hbtn{font-size:12.5px;padding:4px 7px} .brand .nm{font-size:15px} }
.pwtog{margin-top:4px;background:#fff;border:1.5px solid #cfc7b0;border-radius:8px;padding:3px 10px;font-family:inherit;font-size:13px;font-weight:800;color:#24483A;cursor:pointer}
.lb .hint{font-weight:400;font-size:12px;color:#6b6b6b}