: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-num:'Tajawal','Segoe UI',sans-serif;
  --font-verse:'Amiri',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-weight:500; font-size:15px; line-height:1.6;
  direction:rtl; text-align:right; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold-soft); color:var(--ink)}
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,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0; font-family:var(--font-body)}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

.page-tex{position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(220,200,166,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(168,184,162,.09), transparent 60%);
}
.page-wm{position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.11;
  background-position:center 32%; background-size:cover; background-repeat:no-repeat;
  filter:saturate(.6) brightness(1.15) contrast(1.05);
}
#root{position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column}

/* ---------- primitives ---------- */
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap14{gap:14px}.gap16{gap:16px}.gap20{gap:20px}.gap24{gap:24px}
.grow{flex:1}.wrap{flex-wrap:wrap}.center{text-align:center}.hidden{display:none !important}
.muted{color:var(--ink-dim)}
.tiny{font-size:12.5px}.sm{font-size:13.5px}
.b7{font-weight:700}.b8{font-weight:800}
.verse{font-family:var(--font-verse); font-weight:400}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.eyebrow{font-size:11.5px; letter-spacing:.12em; color:var(--ink-dim); font-weight:700}

.card{background:var(--paper-2); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow)}
.pad10{padding:10px}.pad12{padding:12px}.pad14{padding:14px}.pad16{padding:16px}.pad20{padding:20px}.pad24{padding:24px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.65rem 1.1rem; border-radius:var(--radius-m); border:1px solid var(--border);
  background:var(--paper-2); color:var(--ink); font-size:14px; font-weight:700;
  transition:background .16s, border-color .16s, transform .08s, box-shadow .16s;
}
.btn:hover{background:var(--paper-3); border-color:var(--sand)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45; pointer-events: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); border-color:var(--wine-dark)}
.btn-gold{background:var(--gold-soft); border-color:#E7C3A9; color:var(--gold)}
.btn-gold:hover{background:#F7E2D3; border-color:var(--gold)}
.btn-teal{background:var(--teal-soft); border-color:#C6D5C6; color:var(--teal)}
.btn-teal:hover{background:#E6EFE6; border-color:var(--teal)}
.btn-danger{background:var(--danger-soft); border-color:#EBC6BF; color:var(--danger)}
.btn-danger:hover{background:#F9E7E3; border-color:var(--danger)}
.btn-wa{background:#E7F6EC; border-color:#BFE3CC; color:#0F7A45}
.btn-wa:hover{background:#DCF0E3; border-color:#0F7A45}
.btn-wa svg{color:#25A366}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-dim)}
.btn-ghost:hover{background:var(--paper-3); border-color:var(--border)}
.btn-sm{padding:.4rem .8rem; font-size:13px; border-radius:12px}
.btn-lg{padding:.85rem 1.4rem; font-size:16px}
.btn-block{width:100%}

.field{display:flex; flex-direction:column; gap:.35rem}
.field > label, .label{font-size:.82rem; font-weight:700; color:var(--ink-dim)}
.input,.select,.textarea{
  width:100%; padding:.65rem .8rem; border-radius:var(--radius-s);
  border:1px solid var(--border); background:var(--paper); color:var(--ink);
  font-size:15px; font-family:var(--font-body); transition:border-color .16s, box-shadow .16s;
}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(138,102,78,.25)}
.input.bad,.select.bad{border-color:var(--danger); box-shadow:0 0 0 3px rgba(181,71,58,.18)}
.input:disabled,.select:disabled{background:var(--paper-3); color:var(--ink-dim)}
.textarea{min-height:86px; resize:vertical; line-height:1.6}
.select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%); background-position:14px calc(50% - 2px),19px calc(50% - 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-left:32px}
.err{color:var(--danger); font-size:12.5px; font-weight:700; display:flex; align-items:flex-start; gap:.3rem}
.err::before{content:'\26A0'; line-height:1.35}
.hint{color:var(--ink-dim); font-size:12.5px; font-weight:500}

.pill{display:inline-flex; align-items:center; gap:5px; padding:.2rem .6rem; border-radius:100px; font-size:12px; font-weight:700; border:1px solid transparent; white-space:nowrap}
.pill-ok{background:var(--sage-soft); color:var(--teal); border-color:#CFDCCC}
.pill-warn{background:var(--gold-soft); color:var(--gold); border-color:#E7C3A9}
.pill-bad{background:var(--danger-soft); color:var(--danger); border-color:#EBC6BF}
.pill-neutral{background:var(--paper-3); color:var(--ink-dim); border-color:var(--border)}
.pill-wine{background:var(--wine-soft); color:var(--wine-dark); border-color:#EBCBBE}
.pill-blue{background:var(--blue-soft); color:#4E7387; border-color:#CFE0E7}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:.6rem; padding:.85rem 1.25rem;
  background:linear-gradient(180deg,var(--wine),var(--wine-dark));
  color:#FFF6F1; box-shadow:var(--shadow); position:sticky; top:0; z-index:20;
}
.stickytop{position:sticky; top:0; z-index:21; background:var(--paper); box-shadow:0 6px 18px -14px rgba(46,54,47,.5)}
.stickytop .topbar{position:static; box-shadow:none}
.cross-badge{width:38px; height:38px; flex:none; border-radius:50%; background:#fff; padding:0; display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.18); overflow:hidden}
.cross-badge img{width:100%; height:100%; object-fit:contain; display:block}
.brand-t{min-width:0; flex:1}
.brand-t b{display:block; font-family:var(--font-display); font-size:1.25rem; 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:.45rem; padding:.45rem .8rem; border-radius:100px;
  background:rgba(255,255,255,.14); color:#FFF6F1; border:1px solid rgba(255,255,255,.18);
  font-size:13px; font-weight:700; transition:background .16s;
}
.tb-btn:hover{background:rgba(255,255,255,.26)}
.tb-ico{width:38px; height:38px; padding:0; justify-content:center; position:relative; flex:none}
.badge{
  position:absolute; top:-3px; inset-inline-end:-3px;
  min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--danger); color:#fff; font-weight:800; font-size:.62rem;
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 0 0 2px var(--wine-dark); font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .topbar{padding:.7rem .85rem; gap:.5rem}
  .cross-badge{width:32px; height:32px; border-radius:50%}
  .brand-t b{font-size:.86rem}
  .brand-t span{font-size:.62rem}
  .tb-btn .lbl{display:none}
  .tb-btn{padding:.45rem; width:36px; height:36px; justify-content:center}
  .tb-ico{width:36px; height:36px}
}

/* ---------- navigation: pill bar + off-canvas drawer ---------- */
.navwrap{max-width:1120px; margin:0 auto; width:100%; padding:.6rem 1rem 0}
.stickytop .navwrap{padding-bottom:.6rem}
.navpill{display:flex; align-items:center; gap:.55rem; background:var(--paper-2); border:1px solid var(--border);
  border-radius:100px; padding:.3rem .35rem .3rem 1rem; box-shadow:var(--shadow)}
.navpill .ico{color:var(--wine-dark); display:grid; place-items:center}
.navpill b{flex:1; font-size:.95rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hamb{width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--paper-3); color:var(--ink); transition:background .16s}
.hamb:hover{background:var(--sand-soft)}
.drawer-ov{position:fixed; inset:0; background:transparent; z-index:70; pointer-events:none; transition:background .24s ease}
.drawer-ov.open{background:rgba(20,15,10,.45); pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(80vw,300px); background:var(--paper-2);
  border-left:1px solid var(--border); z-index:71; transform:translateX(100%); transition:transform .24s ease;
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg)}
.drawer.open{transform:none}
.drawer-head{display:flex; align-items:center; gap:.6rem; padding:1rem; border-bottom:1px solid var(--border)}
.drawer-head b{flex:1; font-size:1rem; font-weight:800}
.drawer-nav{padding:.6rem; display:flex; flex-direction:column; gap:.2rem; overflow-y:auto; flex:1}
.drawer-link{display:flex; align-items:center; gap:.7rem; padding:.7rem .85rem; border-radius:14px;
  font-weight:700; font-size:.95rem; color:var(--ink); width:100%; text-align:right; transition:background .16s}
.drawer-link:hover{background:var(--paper-3)}
.drawer-link[aria-current="true"]{background:var(--teal); color:#fff}
.drawer-link .n{margin-inline-start:auto; font-size:.72rem; font-weight:800; background:var(--wine-soft); color:var(--wine-dark); border-radius:100px; padding:.1rem .45rem}
.drawer-link[aria-current="true"] .n{background:rgba(255,255,255,.22); color:#fff}
.drawer-foot{padding:.75rem; border-top:1px solid var(--border)}
@media (prefers-reduced-motion:reduce){ .drawer,.drawer-ov{transition:none} }
.main{flex:1; width:100%; max-width:1120px; margin:0 auto; padding:1.1rem 1rem 5rem}

/* ---------- cover ---------- */
.landing-main{flex:1; display:flex; flex-direction:column}
.cover-hero{position:relative; flex:1; min-height:calc(100dvh - 70px); overflow:hidden}
.cover-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% center; display:block}
@media (min-width:600px) and (max-width:900px){ .cover-photo{object-position:72% center} }
@media (max-width:600px){ .cover-photo{object-position:center 70%} .cover-hero{min-height:calc(100dvh - 60px)} }
.cover-scrim{position:absolute; inset:0;
  background:
    linear-gradient(80deg, rgba(20,16,10,.52) 0%, rgba(20,16,10,.24) 40%, rgba(20,16,10,0) 60%),
    linear-gradient(0deg, rgba(20,16,10,.6) 0%, rgba(20,16,10,.16) 30%, rgba(20,16,10,0) 48%);
}
.cover-title{position:absolute; left:6%; top:9%; width:min(40%,480px)}
.cover-eyebrow{display:block; font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:.02em; color:#141109;
  text-shadow:0 1px 0 rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.9), 0 0 22px rgba(255,255,255,.65)}
.cover-title h1{margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.4vw + .8rem,3.4rem); line-height:1.2; color:#0f0d09; text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 0 12px rgba(255,255,255,.95), 0 0 30px rgba(255,255,255,.7), 0 0 46px rgba(255,255,255,.45)}
.cover-kicker{display:flex; align-items:center; gap:.6rem; margin-top:.8rem; font-family:var(--font-body); font-weight:700; font-size:.92rem; color:#141109;
  text-shadow:0 1px 0 rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.6)}
.cover-kicker span{width:26px; height:1px; background:currentColor; opacity:.75}
.cover-actions{position:absolute; left:6%; bottom:7%; width:min(46%,380px); display:flex; flex-direction:column; gap:.85rem}
.cover-btn{
  display:flex; align-items:center; gap:.8rem; width:100%; text-align:right;
  padding:.8rem .9rem; border-radius:var(--radius-m);
  background:rgba(23,20,15,.58); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.55); color:#fff;
  transition:transform .18s, background .18s;
}
.cover-btn:hover{transform:translateY(-3px); background:rgba(23,20,15,.72)}
.cover-btn-icon{width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--wine-soft); color:var(--wine-dark)}
.cover-btn.servant .cover-btn-icon{background:var(--teal-soft); color:var(--teal)}
.cover-btn b{display:block; font-size:1rem; font-weight:800; line-height:1.3}
.cover-btn small{display:block; font-size:.76rem; opacity:.82; font-weight:500; line-height:1.4}
@media (max-width:600px){
  .cover-title{left:20px; width:190px; top:6.5%}
  .cover-title h1{font-size:clamp(1.5rem,5.6vw,1.9rem)}
  .cover-eyebrow{font-size:1.05rem}
  .cover-actions{width:min(72%,380px); left:20px; bottom:6%}
}

/* ---------- auth ---------- */
.auth{position:relative; flex:1; display:flex; align-items:center; justify-content:center; padding:1.6rem 1rem 3rem; overflow:hidden}
.auth-bg-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top}
.auth-bg-scrim{position:absolute; inset:0; background:rgba(250,247,240,.72)}
.auth-card{position:relative; width:100%; max-width:440px}

/* ---------- calendar ---------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.75rem}
.cal-title{font-family:var(--font-display); font-size:1.15rem; font-weight:800}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-dow{text-align:center; font-size:11.5px; font-weight:800; color:var(--ink-dim); padding:4px 0}
.day{position:relative; min-height:66px; border-radius:12px; border:1px solid var(--border); background:var(--paper-2);
  padding:5px 6px; display:flex; flex-direction:column; gap:2px; text-align:right; transition:border-color .16s, transform .1s, box-shadow .16s}
.day:hover:not(.day-void):not(:disabled){border-color:var(--gold); transform:translateY(-1px); box-shadow:var(--shadow)}
.day-void{background:transparent; border-color:transparent; pointer-events:none}
.day:disabled{cursor:default}
.day-past{opacity:.45}
.day-past.day-open,.day-past.day-some,.day-past.day-full{background:var(--paper-3); border-color:var(--border)}
.day-num{font-size:14px; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums}
.day-today{box-shadow:inset 0 0 0 2px var(--gold)}
.day-open{background:var(--sage-soft); border-color:#CFDCCC}
.day-some{background:var(--sand-soft); border-color:#E4D5B8}
.day-full{background:var(--danger-soft); border-color:#EBC6BF}
.day-closed{background:var(--paper-3)}
.day-closed .day-num{color:var(--ink-dim)}
.day-sel{box-shadow:inset 0 0 0 2px var(--wine-dark)}
.day-meta{font-size:10.5px; line-height:1.35; color:var(--ink-dim); font-weight:700}
.day-dot{position:absolute; bottom:6px; left:6px; width:7px; height:7px; border-radius:50%; background:var(--wine-dark)}
.legend{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.7rem; font-size:12px; color:var(--ink-dim); font-weight:700}
.legend i{display:inline-block; width:11px; height:11px; border-radius:4px; margin-inline-end:5px; vertical-align:-1px; border:1px solid var(--border)}

/* ---------- slots ---------- */
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:7px}
.slot{padding:.55rem .3rem; border-radius:12px; border:1px solid var(--border); background:var(--paper-2);
  font-size:14px; font-weight:800; text-align:center; transition:all .16s; font-variant-numeric:tabular-nums}
.slot:hover:not([disabled]){border-color:var(--gold); background:var(--gold-soft)}
.slot[aria-pressed="true"]{background:linear-gradient(180deg,var(--wine),var(--wine-dark)); border-color:var(--wine-dark); color:#FFF6F1}
.slot[disabled]{opacity:.5; background:var(--paper-3); color:var(--ink-dim); text-decoration:line-through; cursor:not-allowed}
.slot small{display:block; font-size:10.5px; font-weight:700; opacity:.78; text-decoration:none}

/* ---------- lists / tables ---------- */
.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}
.avatar.sand{background:var(--sand-soft); color:var(--gold)}
.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:620px; font-size:13.5px}
th,td{padding:.55rem .8rem; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap}
th{background:var(--paper-3); font-size:12px; font-weight:800; color:var(--ink-dim); position:sticky; top:0}
td{font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--paper)}

/* ---------- stats ---------- */
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px}
.stat{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--paper-2); padding:.85rem 1rem; position:relative; overflow:hidden; box-shadow:var(--shadow)}
.stat::before{content:""; position:absolute; top:0; right:0; bottom:0; width:3px; background:var(--gold)}
.stat.wine::before{background:var(--wine)}
.stat.teal::before{background:var(--teal)}
.stat.blue::before{background:var(--blue)}
.stat.danger::before{background:var(--danger)}
.stat .k{font-size:11.5px; color:var(--ink-dim); font-weight:700}
.stat .v{font-size:1.75rem; font-weight:800; line-height:1.2; font-family:var(--font-num); font-variant-numeric:tabular-nums}
.stat .d{font-size:11.5px; color:var(--ink-dim); font-weight:500}
.bars{display:flex; align-items:flex-end; gap:6px; height:158px; padding-top:8px}
.bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; min-width:0}
.bar .fill{width:100%; max-width:44px; background:linear-gradient(180deg,var(--wine),var(--wine-dark)); border-radius:8px 8px 0 0; min-height:3px; transition:height .45s ease}
.bar .fill.g{background:linear-gradient(180deg,var(--sand),var(--gold))}
.bar .fill.t{background:linear-gradient(180deg,var(--sage),var(--teal))}
.bar .cap{font-size:10.5px; color:var(--ink-dim); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.bar .val{font-size:11.5px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- sheets / modals ---------- */
.scrim{position:fixed; inset:0; background:rgba(28,22,16,.42); z-index:60; backdrop-filter:blur(2px); animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes toastin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes slideup{from{transform:translateY(16px); opacity:0}to{transform:none; opacity:1}}
.sheet{position:fixed; z-index:61; background:var(--paper-2); border:1px solid var(--border);
  border-radius:var(--radius-l); box-shadow:var(--shadow-lg); animation:slideup .2s ease;
  display:flex; flex-direction:column; max-height:min(88dvh,760px)}
.sheet-drop{top:70px; left:14px; width:min(400px,calc(100vw - 28px))}
.sheet-modal{top:50%; right:50%; transform:translate(50%,-50%); width:min(580px,calc(100vw - 28px))}
.sheet-head{display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--border); flex:none}
.sheet-head h3{font-size:1.02rem; font-weight:800; flex:1}
.sheet-body{padding:1rem 1.1rem; overflow-y:auto; display:flex; flex-direction:column; gap:.85rem}
.sheet-foot{padding:.8rem 1.1rem; border-top:1px solid var(--border); display:flex; gap:.5rem; flex:none; flex-wrap:wrap}
@media (max-width:640px){ .sheet-drop{top:auto; bottom:0; right:0; left:0; width:auto; border-radius:var(--radius-l) var(--radius-l) 0 0; max-height:84dvh} }

.notif{display:flex; gap:.7rem; padding:.7rem .8rem; border-radius:14px; border:1px solid var(--border); background:var(--paper)}
.notif.unread{background:var(--gold-soft); border-color:#E7C3A9}
.notif-ico{width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--paper-2); border:1px solid var(--border); color:var(--gold)}
.notif.unread .notif-ico{background:#fff}
.notif b{font-size:13.5px; font-weight:800; display:block; line-height:1.4}
.notif p{font-size:13px; color:var(--ink-dim); line-height:1.55; font-weight:500}
.notif time{font-size:11.5px; color:var(--ink-dim); font-weight:700}

.toast-wrap{position:fixed; bottom:18px; right:50%; transform:translateX(50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; width:calc(100vw - 28px); max-width:430px; pointer-events:none}
.toast{pointer-events:auto; background:var(--ink); color:#FAF7F0; padding:.7rem 1rem; border-radius:14px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow-lg); animation:toastin .18s ease; width:100%; text-align:center}
.toast.ok{background:var(--teal); color:#F4F8F3}
.toast.bad{background:var(--danger); color:#FDF3F1}
.toast.warn{background:var(--gold); color:#FFF6EE}

.empty{padding:2.2rem 1.1rem; text-align:center; color:var(--ink-dim); border:1px dashed var(--sand); border-radius:var(--radius-m); background:var(--paper-3); font-weight:500}
.empty b{display:block; color:var(--ink); font-size:15px; margin-bottom:.25rem; font-weight:800}

.section{display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.6rem}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap}
.section-head h2{font-size:1.1rem; font-weight:800}
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.split{display:grid; grid-template-columns:1.25fr 1fr; gap:14px; align-items:start}
@media (max-width:820px){ .split{grid-template-columns:1fr} }
@media (max-width:640px){ .cols2,.cols3{grid-template-columns:1fr} .day{min-height:56px} .main{padding:.9rem .7rem 5rem} }

.steps{display:flex; align-items:center; gap:.4rem; margin-bottom:1rem; font-size:12.5px; color:var(--ink-dim); flex-wrap:wrap; font-weight:700}
.step{display:flex; align-items:center; gap:.4rem}
.step .n{width:23px; height:23px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:800; background:var(--paper-3); color:var(--ink-dim); border:1px solid var(--border)}
.step.on .n{background:var(--wine-dark); color:#FFF6F1; border-color:var(--wine-dark)}
.step.on{color:var(--ink)}
.step.done .n{background:var(--sage-soft); color:var(--teal); border-color:#CFDCCC}
.step-sep{color:var(--sand)}

.blockrow{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.blockrow .input,.blockrow .select{width:auto; min-width:0; flex:1 1 88px; padding:.45rem .55rem; font-size:14px}
.chipset{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .8rem; border-radius:12px;
  border:1px solid var(--border); background:var(--paper-2); font-size:13px; font-weight:700; transition:all .16s}
.chip:hover{border-color:var(--gold)}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--sand); flex:none; transition:background .16s}
.chip[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#fff}
.chip[aria-pressed="true"] .dot{background:#fff}

/* ---------- pill switch ---------- */
.switch{position:relative; width:46px; height:25px; flex:none; border-radius:999px; background:#CFC9BC; padding:0; transition:background .2s}
.switch[aria-checked="true"]{background:var(--teal)}
.switch::after{content:""; position:absolute; top:3px; right:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .2s}
.switch[aria-checked="true"]::after{transform:translateX(-21px)}
.switchrow{display:flex; align-items:center; gap:.75rem; justify-content:space-between}
.switchrow .t{flex:1; min-width:0}
.switchrow .t b{display:block; font-size:.92rem; font-weight:800}
.switchrow .t span{display:block; font-size:.78rem; color:var(--ink-dim); font-weight:500; line-height:1.45}

/* ---------- password field ---------- */
.pw{position:relative}
.pw .input{padding-left:42px}
.pw-eye{position:absolute; left:6px; top:50%; transform:translateY(-50%); width:32px; height:32px;
  border-radius:9px; display:grid; place-items:center; color:var(--ink-dim); transition:background .16s, color .16s}
.pw-eye:hover{background:var(--paper-3); color:var(--ink)}

.banner{display:flex; gap:.6rem; padding:.7rem .9rem; border-radius:var(--radius-s); border:1px solid #E7C3A9; background:var(--gold-soft); color:var(--ink); font-size:13.5px; line-height:1.55; font-weight:500}
.banner.bad{border-color:#EBC6BF; background:var(--danger-soft)}
.banner.ok{border-color:#CFDCCC; background:var(--sage-soft)}
.banner.blue{border-color:#CFE0E7; background:var(--blue-soft)}
.banner b{font-weight:800}

.mini{display:flex; align-items:center; gap:.45rem; font-size:12.5px; color:var(--ink-dim); font-weight:700}
.sep-dot{opacity:.5}
@media print{
  .topbar,.navwrap,.drawer,.drawer-ov,.toast-wrap,.scrim,.sheet,.page-tex,.page-wm,.hamb{display:none !important}
  body{background:#fff}
  .card,.tablewrap,.item,.stat{box-shadow:none}
}

/* ---------- الجدول الأسبوعي ---------- */
.weekgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:10px}
.daycard{box-shadow:none}
.daycard.wk-off .wk-rows{display:none}
.daycard.wk-off{background:var(--paper-3)}
.daycard .switchrow .t{display:flex; align-items:center; gap:.5rem}
.daycard .switchrow .t b{font-size:.98rem}
.blockrow{display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto; gap:5px; align-items:center;
  padding:.5rem .55rem; border:1px solid var(--border); border-radius:12px; background:var(--paper)}
.blockrow .lbl{font-size:12px; font-weight:700; color:var(--ink-dim); white-space:nowrap}
.blockrow .select{width:100%; min-width:0; padding:.4rem .35rem; padding-left:22px; font-size:13px;
  background-color:var(--paper-2); background-position:7px calc(50% - 2px),12px calc(50% - 2px)}
.blockrow .rowdel{padding:.3rem; width:28px; height:28px; justify-content:center}
.notebox{display:flex; gap:.45rem; align-items:flex-start; margin-top:.4rem; padding:.45rem .6rem;
  border-radius:10px; background:var(--sand-soft); border:1px solid #E4D5B8; color:var(--ink);
  font-size:12.5px; line-height:1.5; font-weight:500}
.notebox svg{flex:none; color:var(--gold); margin-top:2px}
.tb-mini{display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  padding:.28rem .6rem; border-radius:100px; background:rgba(255,255,255,.14); color:#FFF6F1;
  border:1px solid rgba(255,255,255,.2); font-size:.72rem; font-weight:700; white-space:nowrap;
  transition:background .16s}
.tb-mini:hover{background:rgba(255,255,255,.3)}
.tb-mini-ico{padding:.28rem; width:26px; height:26px}
@media (max-width:560px){ .tb-mini{font-size:.68rem; padding:.25rem .5rem} }
.welcome{display:flex; align-items:center; gap:.9rem; padding:1rem 1.15rem; margin-bottom:1rem;
  border-radius:var(--radius-m); border:1px solid var(--border); background:var(--paper-2); box-shadow:var(--shadow)}
.welcome h2{font-size:1.35rem; line-height:1.25; margin:.05rem 0 .15rem}
.welcome .eyebrow{display:block}
.blockrow .rowdel{justify-self:end}
.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}