/* ================= نظام التصميم =================
   نفس ألوان وأسلوب موقع مواعيد الاعتراف، وبنفس أسماء الكلاسات —
   يعني تقدر تنسخ style.css من الموقع التاني هنا وهيشتغل زي ما هو. */

:root{
  --ink:#2E362F; --ink-dim:#6A7D6B;
  --paper:#FAF7F0; --paper-2:#FFFFFF; --paper-3:#F2EFE7;
  --border:#E9E3D7;
  --gold:#8A664E; --gold-soft:#F4D9C7;
  --wine:#C97B65; --wine-dark:#9C5541; --wine-soft:#F5E1D8;
  --teal:#465449; --teal-soft:#DCE6DC;
  --danger:#B5473A; --danger-soft:#F5DFDA;
  --sage:#A8B8A2; --sage-soft:#E9EEE6;
  --blue:#91AFC0; --blue-soft:#E6EEF1;
  --apricot:#E6AA82; --apricot-soft:#F8E7D8;
  --sand:#DCC8A6; --sand-soft:#F1E9D8;
  --radius-s:10px; --radius-m:18px; --radius-l:26px;
  --shadow:0 1px 2px rgba(46,54,47,.06), 0 8px 24px -12px rgba(46,54,47,.18);
  --shadow-lg:0 2px 6px rgba(46,54,47,.09), 0 26px 60px -22px rgba(46,54,47,.4);
  --font-display:'Tajawal','Segoe UI',sans-serif;
  --font-body:'Tajawal','Segoe UI',sans-serif;
  --font-verse:'Amiri',serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior-y:contain}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-weight:500; font-size:15px; line-height:1.6;
  min-height:100dvh;
}
button,a,.day,.slot,.chip,.item{touch-action:manipulation}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:800; line-height:1.3; text-wrap:balance}
p{margin:0}
button{cursor:pointer; background:none; border:none; padding:0; font-family:var(--font-body); color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}
img{max-width:100%}

/* ---------- مساعدات ---------- */
.row{display:flex; align-items:center; flex-wrap:nowrap}
.row.wrap{flex-wrap:wrap}
.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}
.stack{display:flex; flex-direction:column}
.stack.gap4{gap:4px}.stack.gap10{gap:10px}.stack.gap12{gap:12px}
.cols2{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.cols3{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px}
.center{text-align:center}
.muted{color:var(--ink-dim)}
.tiny{font-size:12.5px}.sm{font-size:13.5px}
.verse{font-family:var(--font-verse); font-weight:400}
.eyebrow{font-size:11.5px; letter-spacing:.12em; color:var(--ink-dim); font-weight:700}
.hidden{display:none !important}
.label{font-size:12.5px; font-weight:800; color:var(--ink-dim); margin:.6rem 0 .35rem}

/* ---------- أزرار ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:.55rem 1rem; border-radius:999px;
  border:1px solid var(--border); background:var(--paper-2); color:var(--ink);
  font-size:14px; font-weight:700; transition:background .15s, border-color .15s, transform .08s;
}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--paper-3)}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:linear-gradient(180deg,var(--wine),var(--wine-dark)); border-color:var(--wine-dark); color:#FFF6F1; box-shadow:0 8px 18px -12px rgba(156,85,65,.9)}
.btn-primary:hover{background:linear-gradient(180deg,#d08a76,#a75f4a)}
.btn-teal{background:var(--teal-soft); border-color:#C6D5C6; color:var(--teal)}
.btn-gold{background:var(--gold-soft); border-color:#E7C3A9; color:var(--gold)}
.btn-danger{background:var(--danger-soft); border-color:#EBC6BF; color:var(--danger)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-dim)}
.btn-ghost:hover{background:var(--paper-3)}
.btn-sm{min-height:38px; padding:.35rem .75rem; font-size:13px}
.btn-lg{min-height:52px; font-size:16px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; pointer-events:none}

/* ---------- خانات الإدخال ---------- */
.field{display:flex; flex-direction:column; gap:.3rem}
.field label{font-size:12.5px; font-weight:800; color:var(--teal)}
.input,.select,.textarea{
  width:100%; min-height:46px; padding:.6rem .8rem;
  border:1px solid var(--border); border-radius:var(--radius-s);
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:15px; font-weight:500; line-height:1.5;
  text-align:right;
}
/* الكتابة والتلميح دايماً من اليمين — حتى في خانات الأرقام */
.input::placeholder,.textarea::placeholder{color:var(--ink-dim); opacity:.75; font-weight:500; text-align:right}
/* على الموبايل ١٦ عشان سفاري ما يعملش زوم لوحده */
@media (pointer:coarse){ .input,.select,.textarea{font-size:16px} }
.textarea{min-height:90px; resize:vertical; line-height:1.6}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--wine); background:var(--paper-2)}
.input[aria-invalid="true"]{border-color:var(--danger); background:#FDF6F4}
.err{color:var(--danger); font-size:12px; font-weight:700}
.hint{font-size:12.5px; color:var(--ink-dim); line-height:1.6}
.hint.center{text-align:center}

/* ---------- بطاقات ---------- */
.card{background:var(--paper-2); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow)}
.pad14{padding:14px}.pad16{padding:16px}.pad24{padding:24px}
.section{margin-bottom:1.5rem}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; flex-wrap:wrap}
.section-head h2{font-size:17px}
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem}

/* ---------- شارات ---------- */
.pill{display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:999px;
  font-size:11.5px; font-weight:800; border:1px solid transparent; white-space:nowrap}
.pill-ok{background:var(--sage-soft); border-color:#CFDCCC; color:var(--teal)}
.pill-warn{background:var(--sand-soft); border-color:#E3D4B4; color:var(--gold)}
.pill-bad{background:var(--danger-soft); border-color:#EBC6BF; color:var(--danger)}
.pill-blue{background:var(--blue-soft); border-color:#CFE0E7; color:#4E7387}
.pill-neutral{background:var(--paper-3); border-color:var(--border); color:var(--ink-dim)}
.pill-wine{background:var(--wine-soft); border-color:#EBC6BF; color:var(--wine-dark)}

.banner{display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-radius:var(--radius-m);
  background:var(--sand-soft); border:1px solid #E3D4B4; color:var(--gold); font-size:13px; font-weight:700; margin-bottom:.8rem}
.banner.ok{background:var(--sage-soft); border-color:#CFDCCC; color:var(--teal)}
.banner.bad{background:var(--danger-soft); border-color:#EBC6BF; color:var(--danger)}
.banner span{flex:1}

.empty{padding:1.6rem 1rem; text-align:center; color:var(--ink-dim); font-size:13.5px;
  background:var(--paper-2); border:1px dashed var(--border); border-radius:var(--radius-m)}
.empty b{display:block; color:var(--ink); font-size:15px; margin-bottom:.25rem}

/* ---------- الغلاف ---------- */
.landing-main{min-height:100dvh; display:flex; flex-direction:column}
.cover-hero{position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.2rem; min-height:60dvh; overflow:hidden;
  /* تدرّج بديل لحد ما صورة الغلاف تتحط */
  background:linear-gradient(160deg,#B9705B,#8A4A38 55%,#46352C)}
.cover-hero picture,.auth picture{position:absolute; inset:0; display:block}
.cover-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cover-photo.img-gone,.auth-bg-photo.img-gone{display:none}
.cover-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(46,54,47,.15),rgba(46,54,47,.82))}
.cover-title{position:relative; color:#FFF6F1; margin-bottom:1.2rem}
.cover-eyebrow{display:block; font-size:11.5px; letter-spacing:.14em; font-weight:700; opacity:.9; margin-bottom:.4rem}
.cover-title h1{font-size:clamp(22px,6vw,34px); color:#FFF6F1}
.cover-sub{margin-top:.55rem; max-width:30ch; font-size:13.5px; opacity:.92; line-height:1.6}
.cover-actions{position:relative; display:flex; flex-direction:column; gap:.7rem}
.cover-btn{display:flex; align-items:center; gap:.8rem; width:100%; padding:.9rem 1.1rem;
  border-radius:var(--radius-m); background:var(--paper-2); border:1px solid var(--border);
  box-shadow:var(--shadow-lg); text-align:start}
.cover-btn b{display:block; font-size:15.5px; font-weight:800}
.cover-btn small{display:block; font-size:12px; color:var(--ink-dim); font-weight:600}
.cover-btn-icon{display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--wine-soft); color:var(--wine-dark)}

/* ---------- الشريط العلوي ---------- */
.topbar{display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem;
  padding-top:calc(.7rem + env(safe-area-inset-top));
  background:linear-gradient(180deg,var(--wine),var(--wine-dark)); color:#FFF6F1}
.cross-badge{position:relative; width:44px; height:44px; flex:none; border-radius:50%; overflow:hidden;
  background:rgba(255,255,255,.18); display:grid; place-items:center; color:#FFF6F1}
.cross-badge svg{width:24px; height:24px}
.cross-badge img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* لو الصورة مش موجودة بتتخفي والصليب المرسوم بيبان مكانها */
.cross-badge img.img-gone{display:none}
.brand-t{flex:1; min-width:0}
.brand-t b{display:block; font-family:var(--font-display); font-size:1.15rem; font-weight:700; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-t span{display:block; font-size:.68rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-btn{display:inline-flex; align-items:center; gap:.3rem; min-height:40px; padding:.3rem .7rem;
  border-radius:999px; background:rgba(255,255,255,.16); color:#FFF6F1; font-size:13px; font-weight:700}
.tb-btn.tb-ico{width:40px; padding:0; justify-content:center; position:relative}
.tb-mini{padding:.35rem .8rem; border-radius:999px; background:rgba(255,255,255,.16); color:#FFF6F1; font-size:12.5px; font-weight:700}
.badge{position:absolute; top:-2px; inset-inline-start:-2px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--danger); color:#fff; font-size:10.5px; font-weight:800;
  display:grid; place-items:center}

/* ---------- شريط الصفحة والقائمة ---------- */
.navwrap{padding:.7rem .9rem 0}
.navpill{display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--border); box-shadow:var(--shadow)}
.navpill .ico{display:inline-flex; color:var(--wine-dark)}
.navpill b{flex:1; font-size:.95rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hamb{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--paper-3); color:var(--ink)}
.drawer-ov{position:fixed; inset:0; background:rgba(46,54,47,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:60}
.drawer-ov.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; inset-block:0; inset-inline-start:0; width:min(84vw,320px); z-index:61;
  background:var(--paper-2); border-inline-end:1px solid var(--border); box-shadow:var(--shadow-lg);
  transform:translateX(-100%); transition:transform .22s ease; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); visibility:hidden; pointer-events:none}
/* في RTL القائمة بتطلع من اليمين، فبتتخبى ناحية اليمين */
html[dir="rtl"] .drawer{transform:translateX(100%)}
.drawer.open{transform:none !important; visibility:visible; pointer-events:auto}
.drawer-head{display:flex; align-items:center; gap:.6rem; padding:.9rem; border-bottom:1px solid var(--border)}
.drawer-head b{flex:1}
.drawer-nav{flex:1; overflow:auto; padding:.6rem}
.drawer-link{display:flex; align-items:center; gap:.7rem; width:100%; min-height:46px; padding:.5rem .7rem;
  border-radius:var(--radius-s); color:var(--ink); font-size:14.5px; font-weight:700}
.drawer-link:hover{background:var(--paper-3)}
.drawer-link[aria-current="true"]{background:var(--wine-soft); color:var(--wine-dark)}
.drawer-link .n{margin-inline-start:auto; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:var(--wine-dark); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center}
.drawer-foot{padding:.8rem; border-top:1px solid var(--border)}

.main{padding:.9rem .9rem calc(2rem + env(safe-area-inset-bottom)); max-width:900px; margin:0 auto}

/* ---------- الإحصائيات ---------- */
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.stat{position:relative; padding:.8rem .9rem; border-radius:var(--radius-m); background:var(--paper-2);
  border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden}
.stat::before{content:''; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--sage)}
.stat.wine::before{background:var(--wine-dark)}
.stat.teal::before{background:var(--teal)}
.stat.blue::before{background:var(--blue)}
.stat.danger::before{background:var(--danger)}
.stat-t{font-size:12px; font-weight:800; color:var(--ink-dim)}
.stat-v{font-size:26px; font-weight:800; line-height:1.2}
.stat-s{font-size:11.5px; color:var(--ink-dim); font-weight:600}

/* ---------- التقويم ---------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem}
.cal-title{font-weight:800; font-size:15px}
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; min-width:0}
.cal-dow{text-align:center; font-size:11px; font-weight:800; color:var(--ink-dim); padding-bottom:2px}
.day{position:relative; min-width:0; overflow:hidden; min-height:66px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; padding:5px 4px;
  border:1px solid var(--border); border-radius:var(--radius-s); background:var(--paper-2)}
.day-void{border:none; background:none}
.day-num{font-size:15px; font-weight:800; line-height:1}
.day-meta{font-size:10px; font-weight:700; color:var(--ink-dim); line-height:1.2; max-width:100%;
  overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.day-open{background:var(--sage-soft); border-color:#CFDCCC}
.day-full{background:var(--danger-soft); border-color:#EBC6BF}
.day-closed{background:var(--paper-3)}
.day-past{opacity:.55}
.day-dim{background:var(--paper-3); border-color:var(--border); opacity:.32}
.day-today{box-shadow:inset 0 0 0 2px var(--wine)}
.day-sel{box-shadow:inset 0 0 0 2px var(--wine-dark)}
.day[disabled]{cursor:default}
.day-dot{position:absolute; top:7px; inset-inline-start:6px; width:6px; height:6px; border-radius:50%; background:var(--wine-dark)}
.cal-admin .day-meta{font-weight:700}
.cal-admin .day-count{font-size:14px; font-weight:800; color:var(--wine-dark)}
.legend{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.7rem; font-size:11px; color:var(--ink-dim); font-weight:700}
.legend span{display:inline-flex; align-items:center; gap:.3rem}
.legend i{width:12px; height:12px; border-radius:4px; border:1px solid var(--border); display:inline-block}
.legend .legend-dot i{width:7px; height:7px; border-radius:50%; background:var(--wine-dark); border:none}

/* ---------- المواعيد المتاحة ---------- */
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin:.6rem 0}
.slot{display:flex; flex-direction:column; align-items:center; gap:2px; min-height:52px; padding:.5rem .4rem;
  border:1px solid var(--border); border-radius:var(--radius-s); background:var(--paper-2);
  font-size:14px; font-weight:800}
.slot small{font-size:10.5px; font-weight:700; color:var(--ink-dim)}
.slot[disabled]{opacity:.45; text-decoration:line-through}
.slot[aria-pressed="true"]{background:linear-gradient(180deg,var(--wine),var(--wine-dark)); border-color:var(--wine-dark); color:#FFF6F1}
.slot[aria-pressed="true"] small{color:#F7E3DC}

.chipset{display:flex; gap:6px; overflow-x:auto; padding-bottom:.4rem; margin-bottom:.6rem; scrollbar-width:none}
.chipset::-webkit-scrollbar{display:none}
.chip{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; min-height:36px;
  padding:.3rem .75rem; border-radius:999px; border:1px solid var(--border);
  background:var(--paper-2); font-size:13px; font-weight:700}
.chip .dot{width:7px; height:7px; border-radius:50%; background:var(--border)}
.chip[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#fff}
.chip[aria-pressed="true"] .dot{background:#fff}

/* ---------- القوائم ---------- */
.list{display:flex; flex-direction:column; gap:8px}
.item{display:flex; align-items:flex-start; gap:.8rem; padding:.8rem .9rem; border:1px solid var(--border);
  border-radius:var(--radius-m); background:var(--paper-2); box-shadow:var(--shadow)}
.item.past{opacity:.66}
.avatar{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:15px; background:var(--wine-soft); color:var(--wine-dark)}
.avatar.teal{background:var(--teal-soft); color:var(--teal)}
.avatar.blue{background:var(--blue-soft); color:#4E7387}
.bk-when{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-top:.2rem}
.bk-time{font-size:19px; font-weight:800; color:var(--wine-dark); font-variant-numeric:tabular-nums}
.bk-date{font-size:12.5px; font-weight:600; color:var(--ink-dim)}
.acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:.5rem}
.mini{display:flex; align-items:center; gap:.45rem; font-size:12.5px; color:var(--ink-dim); font-weight:700}
.sep-dot{opacity:.5}

/* ---------- مجموعات الأيام ---------- */
.daygrps{display:flex; flex-direction:column; gap:10px}
.daygrp{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--paper-2);
  box-shadow:var(--shadow); overflow:hidden}
.daygrp-h{display:flex; align-items:center; justify-content:space-between; gap:.6rem; width:100%;
  min-height:48px; padding:.6rem .8rem; border:0; background:transparent; font:inherit; color:inherit; text-align:start}
.daygrp-h:hover{background:var(--paper)}
.daygrp-t{font-weight:800; font-size:14.5px; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.daygrp .caret{display:inline-flex; color:var(--ink-dim); transition:transform .18s}
.daygrp .caret svg{width:18px; height:18px}
.daygrp.is-open .caret{transform:rotate(180deg)}
.daygrp .list{padding:0 .6rem .7rem}
.daygrp.is-open .daygrp-h{border-bottom:1px solid var(--border)}
.daysplit{display:flex; align-items:center; gap:.6rem; margin:.75rem 0 .55rem; color:var(--ink-dim)}
.daysplit::before,.daysplit::after{content:''; flex:1; border-top:2px dotted var(--border)}
.daysplit span{font-size:11.5px; font-weight:700; white-space:nowrap}

/* ---------- القاعات ---------- */
.roomgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.roomcard{display:flex; flex-direction:column; gap:.5rem; padding:.9rem; text-align:start;
  border:1px solid var(--border); border-radius:var(--radius-m); background:var(--paper-2); box-shadow:var(--shadow)}
.roomcard[aria-pressed="true"]{border-color:var(--wine-dark); box-shadow:inset 0 0 0 1px var(--wine-dark), var(--shadow)}
.roomcard-h{display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem}
.roomcard b{font-size:15.5px; font-weight:800}
.roomfacts{display:flex; flex-wrap:wrap; gap:.4rem}
.fact{display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem; border-radius:999px;
  background:var(--paper-3); border:1px solid var(--border); font-size:11.5px; font-weight:700; color:var(--ink-dim)}
.fact svg{width:14px; height:14px}
.roomnote{font-size:12.5px; color:var(--ink-dim); line-height:1.55}

/* ---------- الجداول ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--paper-2); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:13.5px}
th,td{padding:.55rem .8rem; text-align:start; border-bottom:1px solid var(--border); white-space:nowrap}
th{background:var(--paper-3); font-size:12px; font-weight:800; color:var(--ink-dim)}
tbody tr:last-child td{border-bottom:0}

/* ---------- الجدول الأسبوعي ---------- */
.wkrow{display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px dashed var(--border); flex-wrap:wrap}
.wkrow:last-child{border-bottom:none}
.wkname{min-width:62px; font-size:13.5px; font-weight:800}
.wktimes{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.wktimes .input{min-height:40px; width:118px; font-size:14px; padding:.3rem .5rem}
.switch{position:relative; width:46px; height:27px; flex:none; border-radius:999px; background:var(--border); transition:background .18s}
.switch::after{content:''; position:absolute; top:3px; inset-inline-start:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow); transition:transform .18s}
.switch[aria-checked="true"]{background:var(--teal)}
html[dir="rtl"] .switch[aria-checked="true"]::after{transform:translateX(-19px)}
.switchrow{display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.55rem 0}
.switchrow .t b{display:block; font-size:14px; font-weight:800}
.switchrow .t span{display:block; font-size:12px; color:var(--ink-dim)}

/* ---------- النوافذ ---------- */
.scrim{position:fixed; inset:0; background:rgba(46,54,47,.5); z-index:70}
.sheet{position:fixed; z-index:71; background:var(--paper-2); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; max-height:88dvh}
.sheet-modal{inset-inline:0; bottom:0; border-radius:var(--radius-l) var(--radius-l) 0 0;
  padding-bottom:env(safe-area-inset-bottom); animation:sheetUp .22s ease}
@media (min-width:640px){
  .sheet-modal{inset-inline:auto; inset-inline-start:50%; bottom:auto; top:50%;
    transform:translate(50%,-50%); width:min(560px,92vw); border-radius:var(--radius-l); animation:none}
  html[dir="rtl"] .sheet-modal{transform:translate(50%,-50%)}
}
@keyframes sheetUp{from{transform:translateY(24px); opacity:.4} to{transform:none; opacity:1}}
.sheet-head{display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; border-bottom:1px solid var(--border)}
.sheet-head h3{flex:1; font-size:16px}
.sheet-body{padding:1rem; overflow:auto; display:flex; flex-direction:column; gap:.8rem}
.sheet-foot{display:flex; gap:.6rem; justify-content:flex-end; padding:.8rem 1rem; border-top:1px solid var(--border); flex-wrap:wrap}

/* ---------- الإشعارات المؤقتة ---------- */
.toast-wrap{position:fixed; inset-inline:0; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; pointer-events:none; padding:0 1rem}
.toast{max-width:min(420px,92vw); padding:.7rem 1rem; border-radius:999px; font-size:13.5px; font-weight:700;
  background:var(--ink); color:#FFF6F1; box-shadow:var(--shadow-lg)}
.toast.ok{background:var(--teal)}
.toast.bad{background:var(--danger)}
.toast.warn{background:var(--gold)}

/* ---------- تسجيل الدخول ---------- */
.auth{position:relative; min-height:calc(100dvh - 60px); display:grid; place-items:center; padding:1.2rem;
  background:linear-gradient(160deg,#F7EFE6,#EFE6DA)}
.auth-bg-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.auth-bg-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(250,247,240,.9),rgba(250,247,240,.98))}
.auth-card{position:relative; width:min(460px,100%)}

/* ---------- التحميل ---------- */
.loading{min-height:100dvh; display:grid; place-items:center; gap:1rem}
.spinner{width:28px; height:28px; border-radius:50%; border:3px solid var(--border);
  border-top-color:var(--wine-dark); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body.is-busy{cursor:progress}
body.is-busy .btn-primary{opacity:.65; pointer-events:none}

/* على الشاشات الكبيرة الغلاف ما يفردش على العرض كله */
@media (min-width:760px){
  .cover-hero{padding:2rem 2.4rem}
  .cover-title,.cover-actions{max-width:460px}
  .cover-title h1{font-size:38px}
}

@media (max-width:640px){
  .day{min-height:62px}
  .main{padding:.9rem .7rem calc(2rem + env(safe-area-inset-bottom))}
  .cover-btn{padding:.8rem .9rem}
}

/* ================= المكتبة ================= */
.linkish{display:inline; padding:0; background:none; border:0; color:inherit; font:inherit; text-align:start; cursor:pointer}
.linkish:hover{text-decoration:underline; text-decoration-color:var(--wine)}
.thumbbtn{padding:0; border:0; background:none; flex:none}
.bthumb{width:46px; height:62px; flex:none; border-radius:6px; object-fit:cover; background:var(--paper-3);
  border:1px solid var(--border); box-shadow:0 2px 6px -3px rgba(46,54,47,.35)}
.bthumb-ph{display:grid; place-items:center; color:var(--wine-dark); background:var(--wine-soft); border-color:#EBC6BF}
.mthumb{width:40px; height:40px; flex:none; border-radius:50%; object-fit:cover; border:1px solid var(--border)}
.mini.wrap{flex-wrap:wrap; row-gap:.1rem}
.chip .n{font-size:11px; opacity:.7; font-variant-numeric:tabular-nums}
.item-btn{width:100%; text-align:start; align-items:center; font:inherit; color:inherit; cursor:pointer}
.item-btn:hover{background:var(--paper)}

.searchbox{position:relative; display:flex; align-items:center}
.searchbox svg{position:absolute; inset-inline-start:.75rem; color:var(--ink-dim); pointer-events:none}
.searchbox .input{padding-inline-start:2.5rem}
.idxhits{display:flex; align-items:flex-start; gap:.35rem; margin-top:.35rem; padding:.35rem .55rem; border-radius:var(--radius-s);
  background:var(--sand-soft); color:var(--gold); font-size:12.5px; font-weight:700}
.idxhits svg{flex:none; margin-top:3px}

.scanbar{display:flex; align-items:center; gap:.6rem}
.scanbar .input{flex:1; min-width:0}
.scanbar-ico{color:var(--wine-dark); display:inline-flex}
.scan-input{letter-spacing:.02em}
.quick{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:.7rem}
.quick-b{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; min-height:78px; padding:.6rem .3rem;
  border:1px solid var(--border); border-radius:var(--radius-m); background:var(--paper-2); box-shadow:var(--shadow);
  color:var(--wine-dark); text-align:center}
.quick-b b{font-size:12.5px; color:var(--ink); line-height:1.3}
.quick-b:hover{background:var(--wine-soft)}
@media (max-width:420px){ .quick{grid-template-columns:repeat(2,minmax(0,1fr))} }

.bars{display:flex; flex-direction:column; gap:4px}
.bar-row{display:grid; grid-template-columns:minmax(0,9rem) 1fr auto; align-items:center; gap:.6rem; width:100%;
  padding:.3rem .2rem; border:0; background:none; border-radius:8px; font:inherit; color:inherit; text-align:start}
button.bar-row:hover{background:var(--paper-3)}
.bar-l{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{height:10px; border-radius:999px; background:var(--paper-3); overflow:hidden}
.bar-fill{display:block; height:100%; border-radius:999px; background:var(--wine)}
.bar-fill.teal{background:var(--teal)}
.bar-fill.blue{background:var(--blue)}
.bar-v{font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.bar-v small{display:block; font-size:10.5px; font-weight:600; color:var(--ink-dim); line-height:1.1}
@media (max-width:480px){ .bar-row{grid-template-columns:minmax(0,6.5rem) 1fr auto} }

.seg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; margin-bottom:.9rem;
  border-radius:999px; background:var(--paper-3); border:1px solid var(--border)}
.seg-b{display:flex; align-items:center; justify-content:center; gap:.35rem; min-height:42px; padding:.3rem .4rem; border-radius:999px;
  font-size:13px; font-weight:800; color:var(--ink-dim)}
.seg-b span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.seg-b .n{font-size:11px; opacity:.8}
.seg-b[aria-pressed="true"]{background:var(--paper-2); color:var(--wine-dark); box-shadow:var(--shadow)}
@media (max-width:420px){ .seg-b svg{display:none} .seg-b{font-size:12px} }

.step{display:flex; align-items:center; gap:.55rem; font-size:14.5px}
.step-n{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--paper-3);
  color:var(--ink-dim); font-size:13px; font-weight:800; flex:none}
.step-n.done{background:var(--teal); color:#fff}
.pick-sel{display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius-m);
  border:1px solid #CFDCCC; background:var(--sage-soft)}
.picklist{display:flex; flex-direction:column; gap:4px; margin-top:-.3rem}
.pick-row{display:flex; align-items:center; gap:.6rem; width:100%; padding:.45rem .55rem; border-radius:var(--radius-s);
  border:1px solid var(--border); background:var(--paper-2); text-align:start; font:inherit; color:inherit}
.pick-row:hover{background:var(--wine-soft)}
.pick-row span{min-width:0; display:flex; flex-direction:column}
.pick-row b{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pick-row small{font-size:12px; color:var(--ink-dim); font-weight:600}
.pick-row .bthumb{width:34px; height:46px}
.pick-row .avatar,.pick-row .mthumb{width:34px; height:34px; font-size:13px}

.sheet-body > *{flex-shrink:0}
@media (min-width:640px){ .sheet-wide{width:min(720px,94vw) !important} }
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px}
.gallery a{display:flex; flex-direction:column; gap:.25rem; color:var(--ink-dim); text-decoration:none; font-size:12px; font-weight:700; text-align:center}
.gallery img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--paper-3)}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden}
.facts div{background:var(--paper-2); padding:.5rem .7rem; min-width:0}
.facts span{display:block; font-size:11.5px; font-weight:800; color:var(--ink-dim)}
.facts b{display:block; font-size:14px; overflow-wrap:anywhere}
.facts a{color:var(--wine-dark)}
.learn{padding:.8rem .9rem; border-radius:var(--radius-m); background:var(--wine-soft); border:1px solid #EBC6BF}
.learn-h{display:flex; align-items:center; gap:.35rem; font-size:12.5px; font-weight:800; color:var(--wine-dark); margin-bottom:.3rem}
.learn p{font-size:14.5px; line-height:1.8}
.indexbox{white-space:pre-wrap; max-height:260px; overflow:auto; padding:.7rem .8rem; border-radius:var(--radius-s);
  background:var(--paper); border:1px solid var(--border); font-size:14px; line-height:1.9}
.textarea.tall{min-height:170px}
.bc-wrap{padding:.4rem 0}
svg.bc{max-width:100%; height:auto}
.suggest{margin-top:-.3rem; padding:.5rem .6rem; border-radius:var(--radius-s); background:var(--paper); border:1px dashed var(--border)}
.suggest .chip{min-height:32px}

.fslot-box{display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; min-height:92px; padding:.6rem;
  border:1px dashed var(--border); border-radius:var(--radius-s); background:var(--paper)}
.fslot-box.has{border-style:solid; background:var(--paper-2)}
.fslot-box label.btn{cursor:pointer; font-size:13px; font-weight:700; color:var(--ink)}
.slot-img{width:84px; height:110px; object-fit:cover; border-radius:6px; border:1px solid var(--border); display:block}
.slot-audio{width:100%; max-width:420px; height:40px}
.spinner.sm{width:18px; height:18px; border-width:2px}

.mhead{display:flex; align-items:center; gap:.9rem}
.mhead h3{font-size:18px}
.mphoto{width:84px; height:84px; flex:none; border-radius:50%; object-fit:cover; border:2px solid var(--wine-soft)}
.mphoto-ph{display:grid; place-items:center; background:var(--wine-soft); color:var(--wine-dark); font-size:30px; font-weight:800}
.mform-top{display:flex; gap:.8rem; align-items:flex-start}
.mform-top .fslot{width:130px; flex:none}
@media (max-width:480px){ .mform-top{flex-direction:column} .mform-top .fslot{width:100%} }

/* كارت العضوية — مقاس الكارت البنكي تقريباً */
.mcard{width:min(340px,100%); margin:0 auto; border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--border); box-shadow:var(--shadow-lg)}
.mcard-top{display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; color:#FFF6F1;
  background:linear-gradient(180deg,var(--wine),var(--wine-dark)); -webkit-print-color-adjust:exact; print-color-adjust:exact}
.mcard-top .cross-badge{width:38px; height:38px}
.mcard-top b{display:block; font-size:13px; line-height:1.3}
.mcard-top span{display:block; font-size:11px; opacity:.9}
.mcard-body{display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem .2rem}
.mcard-photo{width:62px; height:62px; flex:none; border-radius:10px; object-fit:cover; border:1px solid var(--border)}
.mcard-photo.mphoto-ph{border-radius:10px; font-size:24px}
.mcard-name{font-size:17px; font-weight:800; line-height:1.3}
.mcard-sub{font-size:12px; color:var(--ink-dim); font-weight:700}
.mcard-bc{text-align:center; padding:.2rem .6rem .5rem}

.labels{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.label-card{border:1px dashed var(--border); border-radius:8px; padding:.35rem .4rem; text-align:center; background:#fff; break-inside:avoid}
.label-t{font-size:11.5px; font-weight:800; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- الطباعة ---------- */
.codebox{display:flex; align-items:center; min-height:46px; padding:.5rem .8rem; border-radius:var(--radius-s);
  background:var(--paper-3); border:1px solid var(--border)}
.codebox .hint{display:inline-flex; align-items:center; gap:.35rem}
.codebox b{font-size:17px; letter-spacing:.04em; font-variant-numeric:tabular-nums}
.label-church{font-size:10px; font-weight:700; color:var(--ink-dim); line-height:1.2}
#printRoot{display:none}
@media print{
  body.printing{background:#fff; margin:0}
  body.printing > *:not(#printRoot){display:none !important}
  body.printing #printRoot{display:block}
  #printRoot *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  #printRoot .label-card{background:#fff; text-align:center; font-family:var(--font-body)}
  #printRoot .label-t{font-weight:800; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  /* الكارت بمقاس CR80 بالظبط */
  #printRoot.print-card .mcard{width:85.6mm; height:54mm; margin:0; border:0; border-radius:0; box-shadow:none;
    display:flex; flex-direction:column; overflow:hidden; page-break-after:avoid}
  #printRoot.print-card .mcard-top{padding:1.6mm 3mm; gap:2mm}
  #printRoot.print-card .mcard-top .cross-badge{width:8mm; height:8mm}
  #printRoot.print-card .mcard-top b{font-size:2.7mm}
  #printRoot.print-card .mcard-top span{font-size:2.2mm}
  #printRoot.print-card .mcard-body{flex:1; padding:1.8mm 3mm 0; gap:2.5mm}
  #printRoot.print-card .mcard-photo{width:15mm; height:15mm; border-radius:2mm}
  #printRoot.print-card .mcard-photo.mphoto-ph{font-size:6mm}
  #printRoot.print-card .mcard-name{font-size:4mm}
  #printRoot.print-card .mcard-sub{font-size:2.6mm}
  #printRoot.print-card .mcard-bc{padding:0 3mm 1.5mm}
  #printRoot.print-card svg.bc{height:13mm; width:auto; max-width:100%}
}

/* ---------- تحديث: خط واحد، مسح بالكاميرا، فلاتر ---------- */
.item b,.pick-sel b{font-size:15px}
.mini{font-size:12.5px}
.section-head h2{font-size:17px}
.scanfield{display:flex; gap:6px; align-items:stretch}
.scanfield .input{flex:1; min-width:0}
.cam-btn{min-width:46px; padding:0 .7rem; border-radius:var(--radius-s); color:var(--wine-dark); background:var(--wine-soft); border-color:#EBC6BF}
.cam-btn:hover{background:#F0D2C5}
.scanbar{gap:6px}
.scanbar .cam-btn{min-height:46px}
.home{max-width:720px; margin:1.2rem auto 0}
.home .quick{margin-top:1rem}
.home .quick-b{min-height:96px}
.home .quick-b b{font-size:14px}
.home-hits{margin-top:.5rem}
.filters-btn{margin-top:.6rem}
.filters-btn .count{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--teal); color:#fff; font-size:11px}
.filters-btn[aria-expanded="true"]{background:var(--paper-3)}
.morefilters{margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:.6rem; align-items:flex-start}
.morefilters .cols3{width:100%; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.codebox{justify-content:space-between; gap:.6rem}
#camOv .sheet{z-index:81}
#camOv .scrim{z-index:80}
.cam-sheet .sheet-head h3{display:flex; align-items:center; gap:.4rem}
#camView{width:100%; min-height:240px; border-radius:var(--radius-s); overflow:hidden; background:#111}
#camView video{width:100% !important; height:auto !important; display:block}
@media (max-width:420px){ .home .quick-b{min-height:84px} }
.btn{text-decoration:none}
.niim{margin-top:.2rem; background:var(--paper); box-shadow:none}
.label-card{aspect-ratio:5/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; overflow:hidden}
.label-church2{font-size:9.5px; font-weight:800; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.label-a{font-size:10.5px; color:var(--ink-dim); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.label-card svg.bc{max-height:44%; width:auto}

/* ================= كارت العضوية (CR80) — كل المقاسات بالمم عشان المعاينة = الطباعة ================= */
.id-sheet{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding:.3rem 0}
.idcard{position:relative; width:85.6mm; height:54mm; flex:none; overflow:hidden; border-radius:3.2mm;
  background:#FAF7F0; color:#2E362F; font-family:var(--font-body); box-shadow:0 2px 6px rgba(46,54,47,.12), 0 12px 28px -14px rgba(46,54,47,.45);
  border:1px solid #E9E3D7; -webkit-print-color-adjust:exact; print-color-adjust:exact; direction:rtl; text-align:right}
.id-water{position:absolute; width:30mm; height:30mm; left:-5mm; bottom:-6mm; opacity:.07; pointer-events:none}
.id-water-big{width:40mm; height:40mm; left:50%; top:50%; bottom:auto; transform:translate(-50%,-50%); opacity:.06}
.id-head{position:relative; display:flex; align-items:center; gap:2.2mm; height:12.5mm; padding:0 3mm;
  background:linear-gradient(180deg,#C97B65,#9C5541); color:#FFF6F1; border-bottom:.7mm solid #D9B48F}
.id-seal{width:9.5mm; height:9.5mm; flex:none; border-radius:50%; background:#FFF6F1; padding:.4mm; box-shadow:0 0 0 .3mm rgba(255,246,241,.6)}
.id-seal img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.id-head-t{min-width:0}
.id-head-t b{display:block; font-size:2.75mm; font-weight:800; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.id-head-t span{display:block; font-size:2.1mm; font-weight:700; color:#F4D9C7; letter-spacing:.02em}
.id-body{position:relative; display:flex; gap:3mm; padding:2.4mm 3mm 0; height:25.5mm}
.id-photo{width:17mm; height:21mm; flex:none; border-radius:2mm; object-fit:cover; border:.5mm solid #D9B48F; background:#F5E1D8}
.id-photo-ph{display:grid; place-items:center; font-size:8mm; font-weight:800; color:#9C5541}
.id-info{min-width:0; flex:1; display:flex; flex-direction:column; gap:.9mm}
.id-name{font-size:4mm; font-weight:800; line-height:1.2; color:#2E362F; margin-bottom:.4mm;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.id-row{display:flex; align-items:baseline; gap:1.5mm; font-size:2.35mm; line-height:1.3; white-space:nowrap}
.id-row span{color:#6A7D6B; font-weight:700; min-width:13mm}
.id-row b{color:#465449; font-weight:800; overflow:hidden; text-overflow:ellipsis}
.id-foot{position:absolute; left:0; right:0; bottom:0; height:13mm; padding-bottom:.8mm; display:flex; align-items:center; justify-content:center;
  background:#fff; border-top:.4mm solid #E9E3D7}
.id-foot svg.bc{height:10.5mm; width:auto; max-width:60mm}
.idback{display:flex; flex-direction:column; padding:3.5mm 5mm 0}
.id-back-t{font-size:3.2mm; font-weight:800; color:#9C5541; margin-bottom:1.2mm; padding-bottom:1mm; border-bottom:.4mm solid #D9B48F; align-self:flex-start}
.id-rules{margin:0; padding:0 3.5mm 0 0; font-size:2.35mm; line-height:1.55; font-weight:600; color:#2E362F}
.id-rules li::marker{color:#9C5541}
.id-verse{margin-top:1.4mm; text-align:center; font-family:var(--font-verse); font-size:3.4mm; color:#8A664E}
.id-verse small{font-family:var(--font-body); font-size:2mm; color:#6A7D6B}
.id-back-foot{position:absolute; left:0; right:0; bottom:0; padding:1.3mm 4mm; text-align:center; font-size:2.1mm; font-weight:700;
  color:#FFF6F1; background:linear-gradient(180deg,#C97B65,#9C5541); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media print{
  #printRoot.print-card .idcard{box-shadow:none}
}
.label-p{font-size:9.5px; color:var(--ink-dim); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.labels.size5080 .label-card{aspect-ratio:5/8; gap:4px}
.labels.size5080 .label-card svg.bc{max-height:30%}

/* ================= كارت العضوية بالطول (CR80: 54 × 85.6 مم) — حسب التصميم المعتمد ================= */
.pcard{position:relative; width:54mm; height:85.6mm; flex:none; overflow:hidden; border-radius:3.2mm;
  background:#F7F1E6; color:#3A2A22; direction:rtl; text-align:right; font-family:var(--font-body);
  box-shadow:0 2px 6px rgba(46,54,47,.12), 0 14px 30px -14px rgba(46,54,47,.45); border:1px solid #E6DCCB;
  -webkit-print-color-adjust:exact; print-color-adjust:exact}
.id-sheet .pcard{zoom:1.45}
.pc-leaf{position:absolute; width:16mm; opacity:.55; pointer-events:none}
.pc-leaf-l{left:-3mm; top:30mm; transform:scaleX(-1); opacity:.45}
.pc-leaf-tr{right:-2mm; top:5mm; width:15mm}
.pc-leaf-bl{left:-3mm; bottom:22mm; width:15mm; transform:scaleX(-1) rotate(-20deg)}
.pc-head{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5mm; padding:3.2mm 3.4mm 0}
.pc-title{min-width:0; text-align:center; flex:1}
.pc-title b{display:block; font-family:var(--font-verse); font-weight:700; font-size:5.6mm; line-height:1.05; color:#7A1E22}
.pc-title span{display:block; font-family:var(--font-verse); font-weight:700; font-size:3.15mm; line-height:1.25; color:#5E1418; white-space:nowrap}
.pc-seal{width:15.5mm; height:15.5mm; flex:none; border-radius:50%; background:#7A1E22; padding:.55mm; box-shadow:0 0 0 .35mm #C9A063}
.pc-seal img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.pc-seal-c{position:absolute; left:50%; top:6.3mm; transform:translateX(-50%); width:15.5mm; height:15.5mm}
.pc-div{display:flex; align-items:center; gap:1mm; margin:1.2mm 6mm 0}
.pc-div i{flex:1; height:.25mm; background:linear-gradient(90deg,transparent,#C9A063,transparent)}
.pc-divx{width:3.6mm; height:3.6mm; flex:none}
.pc-church{position:absolute; right:0; top:22mm; width:31mm; height:33mm; object-fit:cover; object-position:left top; opacity:.9}
.pc-photo{position:absolute; left:3.4mm; top:23.5mm; width:21mm; height:25.5mm; border-radius:1.8mm; overflow:hidden;
  background:#DEDCD8; border:.7mm solid #FBF8F2; box-shadow:0 .4mm 1.2mm rgba(58,42,34,.25)}
.pc-photo img,.pc-photo svg{width:100%; height:100%; object-fit:cover; display:block}
.pc-fields{position:absolute; left:3.2mm; right:3.2mm; top:52.5mm; display:flex; flex-direction:column; gap:1.1mm}
.pc-field{display:flex; align-items:center; gap:1.2mm; height:5.6mm; padding:0 2mm; border-radius:1.4mm; background:#EADFCC;
  font-size:2.75mm; white-space:nowrap; overflow:hidden}
.pc-field span{font-weight:800; color:#3A2A22; flex:none}
.pc-field b{font-weight:800; color:#5E1418; overflow:hidden; text-overflow:ellipsis}
.pc-field b.pc-long{font-size:2.35mm}
.pc-bc{height:8mm; border-radius:1.4mm; background:#fff; border:.25mm solid #E1D5C0; display:flex; align-items:center; justify-content:center; overflow:hidden}
.pc-bc svg.bc{height:7.2mm; width:auto; max-width:44mm}
.pc-band{position:absolute; left:0; right:0}
.pc-band svg{display:block; width:100%; height:100%}
.pc-band-bottom{bottom:0; height:12mm}
.pc-band-top{top:0; height:5.5mm}
.pc-crosses{position:absolute; left:2mm; right:2mm; bottom:1.6mm; display:flex; justify-content:space-between}
.pc-x{width:5mm; height:5mm}
.pc-verse{position:absolute; left:3.5mm; right:3.5mm; top:23.6mm; padding:1mm 0 1.2mm; border-radius:2mm; background:rgba(234,223,204,.6); text-align:center}
.pc-verse .pc-div{margin:0 4mm}
.pc-verse p{margin:.3mm 0 0; font-family:var(--font-verse); font-weight:700; font-size:3.3mm; line-height:1.45; color:#7A1E22}
.pc-verse small{display:block; font-size:2mm; font-weight:700; color:#5E1418; margin-bottom:.2mm}
.pc-rules-t{position:absolute; left:3.5mm; right:3.5mm; top:47.8mm; height:5.4mm; border-radius:2.7mm; background:#EADFCC;
  display:flex; align-items:center; justify-content:center; font-size:2.85mm; font-weight:800; color:#3A2A22}
.pc-rules{position:absolute; left:3mm; right:3.8mm; top:54.3mm; margin:0; padding:0 2.6mm 0 0; font-size:1.88mm; line-height:1.55; font-weight:600; color:#3A2A22}
.pc-rules li::marker{color:#7A1E22}
@media print{
  #printRoot.print-card .pc-bc svg.bc{height:7.2mm; width:auto; max-width:44mm}
  #printRoot.print-card .pc-div i{height:.3mm}
}

/* ================= كارت العضوية — التصميم المعتمد (صورة) + البيانات فوقه ================= */
.tcard{position:relative; height:85.6mm; width:48.68mm; flex:none; overflow:hidden; border-radius:3.2mm; background:#F5EEE2;
  box-shadow:0 2px 6px rgba(46,54,47,.12), 0 14px 30px -14px rgba(46,54,47,.45);
  -webkit-print-color-adjust:exact; print-color-adjust:exact; direction:rtl}
.tcard-back{width:48.52mm}
.id-sheet .tcard{zoom:1.5}
.tc-bg{position:absolute; inset:0; width:100%; height:100%; display:block}
.tc-seal{position:absolute; border-radius:50%; object-fit:cover; display:block}
.tc-photo{position:absolute; object-fit:cover; border-radius:1.1mm; display:block}
.tc-val{position:absolute; display:flex; align-items:center; justify-content:flex-start; padding-inline-start:1mm;
  font-family:'Noto Naskh Arabic','Amiri',serif; font-weight:700; font-size:3.15mm; color:#4A1C17;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1}
.tc-val.tc-long{font-size:2.55mm}
.tc-num span{font-family:'Noto Naskh Arabic','Amiri',serif; letter-spacing:.02em}
.tc-bar{position:absolute; display:flex; align-items:stretch; padding:0.9mm 1.6mm; box-sizing:border-box}
.tc-bar svg.bc-fill{width:100%; height:100%; display:block}
@media print{
  #printRoot.print-card .tc-bar svg.bc-fill{width:100% !important; height:100% !important; max-width:none !important}
}

/* ---------- شريط فلاتر الأعضاء ---------- */
.filterbar{padding:12px; margin-bottom:.6rem; display:flex; flex-direction:column; gap:10px}
.filterbar-row{display:flex; align-items:center; gap:10px; justify-content:space-between}
.seg{display:flex; gap:2px; padding:3px; background:var(--paper-3); border:1px solid var(--border); border-radius:12px;
  overflow-x:auto; scrollbar-width:none; min-width:0; flex:0 1 auto}
.seg::-webkit-scrollbar{display:none}
.seg-btn{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; min-height:34px; padding:0 12px;
  border:0; border-radius:9px; background:transparent; color:var(--ink-dim); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:background .15s, color .15s}
.seg-btn:hover{color:var(--ink)}
.seg-btn[aria-pressed="true"]{background:var(--paper-2); color:var(--wine-dark); box-shadow:0 1px 2px rgba(46,54,47,.12)}
.seg-n{min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:rgba(46,54,47,.07);
  font-size:11.5px; line-height:20px; text-align:center; font-variant-numeric:tabular-nums}
.seg-btn[aria-pressed="true"] .seg-n{background:var(--wine-soft); color:var(--wine-dark)}
.sortsel{display:flex; align-items:center; gap:8px; flex:none; font-size:13px; color:var(--ink-dim); font-weight:700}
.select.select-sm{min-height:36px; padding-block:0; font-size:13.5px; width:auto; min-width:150px}
.resultbar{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--ink-dim); margin:0 .2rem .5rem}
.resultbar .linkish{font-size:13px; color:var(--wine-dark); font-weight:700}
@media (max-width:640px){
  .filterbar-row{flex-direction:column; align-items:stretch}
  .seg{width:100%; flex-wrap:wrap; overflow:visible}
  .seg-btn{flex:1 1 auto; justify-content:center; padding:0 10px}
  .sortsel{justify-content:space-between}
  .item .acts{flex-wrap:nowrap; gap:6px}
  .item .acts .btn{padding-inline:.7rem}
  .select.select-sm{flex:1}
}

/* ---------- التسجيل الصوتي والـ PDF في بيانات الكتاب ---------- */
.pill-audio{background:#F3E4E5; color:#4A1216; border:1px solid #E6CCCE}
.facts-book{grid-template-columns:repeat(3,1fr)}
.facts .fact-hl{background:#FBF1F1}
.facts .fact-hl > span{color:#4A1216}
.fact-yes{display:inline-flex; align-items:center; gap:5px; color:#4A1216 !important; font-weight:800}
.fact-yes svg{width:14px; height:14px}
.fact-audio{display:block; width:100%; height:32px; margin-top:6px}
@media (max-width:640px){
  .facts-book{grid-template-columns:repeat(2,1fr)}
  .facts-book > div:last-child:nth-child(odd){grid-column:span 2}
}
.fact-sub{display:block; margin-top:4px; font-size:12px; color:var(--wine-dark); font-weight:700}
.pill-audio{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.pill-audio svg{display:inline-block; flex:none}
.pick-row span.pill-audio{display:inline-flex; flex-direction:row; padding:1px 8px; font-size:11.5px; margin-inline-start:6px; vertical-align:middle}
.label-img-wrap{padding:0 !important; background:#fff; aspect-ratio:auto !important; display:flex; align-items:center; justify-content:center}
.label-img{display:block; width:100%; height:auto; image-rendering:pixelated}
.labels.size5080{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.labels{grid-template-columns:repeat(auto-fill,minmax(260px,320px)) !important; justify-content:center}
.label-img-wrap{border:1px solid var(--border) !important; border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* رفع صور الكتب بالجملة */
.bulk-drop{display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; padding:1.4rem 1rem;
  border:2px dashed var(--border); border-radius:var(--radius-m); background:var(--paper-3); color:var(--ink-dim); cursor:pointer}
.bulk-drop b{color:var(--ink); font-size:15px}
.bulk-drop.over{border-color:var(--wine); background:var(--wine-soft)}
.bulk-drop.off{opacity:.55; cursor:default}
.bulk-sum{display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.8rem 0 .4rem; font-size:13.5px; color:var(--ink-dim)}
.bulk-sum b{color:var(--ink)} .t-ok{color:var(--teal); font-weight:700} .t-bad{color:var(--danger); font-weight:700}
.bulk-bar{height:6px; border-radius:6px; background:var(--paper-3); overflow:hidden; margin-bottom:.5rem}
.bulk-bar i{display:block; height:100%; background:var(--teal); transition:width .3s}
.bulk-list{max-height:46vh; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-s)}
.bulk-row{display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto; gap:.6rem; align-items:center;
  padding:.45rem .7rem; font-size:13px; border-bottom:1px solid var(--border)}
.bulk-row:last-child{border-bottom:0}
.bulk-name{font-family:ui-monospace,monospace; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start}
.bulk-what{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bulk-what em{font-style:normal; color:var(--danger); margin-inline-start:.3rem}
.bulk-st{font-size:12px; font-weight:700; color:var(--ink-dim)}
.s-ok .bulk-st{color:var(--teal)} .s-bad .bulk-st, .s-err .bulk-st{color:var(--danger)} .s-up .bulk-st{color:var(--wine-dark)}
@media (max-width:480px){ .bulk-row{grid-template-columns:1fr auto} .bulk-what{grid-column:1/-1; grid-row:2} }
.nowrap{white-space:nowrap}