/* SZ Health v4.1 — مظهر ثلاثي الأبعاد: حواف عميقة وحركة ضغط · Designed by Salah Zakaria */
:root{
  --edge:#cbd5e6;--edge-card:#dbe3f0;--edge-p:#0a6c72;--edge-d:#b9373d;--edge-n:#0b1a33;--d:5px;
  --glow:0 16px 28px -16px rgba(16,27,50,.38);--inset:inset 0 2px 5px rgba(16,27,50,.09);
  --gloss:inset 0 1px 0 rgba(255,255,255,.85);--ease:cubic-bezier(.2,.8,.2,1);
  --bg:#eaf0f8;
}
:root[data-theme=dark]{--edge:#050b17;--edge-card:#070d1b;--edge-p:#08585e;--edge-d:#7b1f24;--edge-n:#040813;--glow:0 18px 30px -16px rgba(0,0,0,.7);--inset:inset 0 2px 6px rgba(0,0,0,.45);--gloss:inset 0 1px 0 rgba(255,255,255,.07);--bg:#070d1b}
@media (prefers-color-scheme:dark){:root[data-theme=auto]{--edge:#050b17;--edge-card:#070d1b;--edge-p:#08585e;--edge-d:#7b1f24;--edge-n:#040813;--glow:0 18px 30px -16px rgba(0,0,0,.7);--inset:inset 0 2px 6px rgba(0,0,0,.45);--gloss:inset 0 1px 0 rgba(255,255,255,.07);--bg:#070d1b}}
body{background:radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%),radial-gradient(700px 420px at 0% 110%,color-mix(in srgb,var(--info) 10%,transparent),transparent 60%),var(--bg);background-attachment:fixed}

/* ── الأزرار: ثلاثية الأبعاد مع حافة عميقة وضغط ── */
.btn,.chip,.tab,.seg button,.icon-btn.raised,.kp-pad button,.roles span,.grid-menu a,.grid-menu button,.subnav a{
  transition:transform .09s var(--ease),box-shadow .09s var(--ease),filter .15s,background .15s;will-change:transform}
.btn{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2));
  box-shadow:0 var(--d) 0 var(--edge),var(--glow),var(--gloss);margin-bottom:var(--d);transform:translateY(0)}
.btn:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 calc(var(--d) + 1px) 0 var(--edge),var(--glow),var(--gloss)}
.btn:active,.btn.pressed{transform:translateY(var(--d));box-shadow:0 0 0 var(--edge),0 2px 5px -2px rgba(0,0,0,.35),inset 0 2px 5px rgba(0,0,0,.12);filter:brightness(.97)}
.btn.primary{background:linear-gradient(180deg,#46efdc 0,#12bfae 48%,#0a9aa0 100%);color:#032a2d;border-color:#0a8f95;text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 var(--d) 0 var(--edge-p),0 16px 24px -12px var(--brand),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.08)}
.btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.primary:active{box-shadow:0 0 0 var(--edge-p),0 2px 6px -2px var(--brand),inset 0 3px 6px rgba(0,0,0,.2)}
.btn.danger{background:linear-gradient(180deg,var(--surface),var(--bad-soft));border-color:color-mix(in srgb,var(--bad) 45%,var(--line));box-shadow:0 var(--d) 0 var(--edge-d),0 12px 20px -14px var(--bad),var(--gloss)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.danger:active{box-shadow:0 0 0 var(--edge-d),inset 0 2px 5px rgba(0,0,0,.18)}
.btn.solid-danger{background:linear-gradient(180deg,#ff7076,#d93f45);color:#fff;box-shadow:0 var(--d) 0 var(--edge-d),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.sm{--d:3px;padding:7px 11px}
.hero .btn{background:linear-gradient(180deg,#ffffff2a,#ffffff10);border-color:#ffffff3a;box-shadow:0 var(--d) 0 #06122a,inset 0 1px 0 #ffffff55;color:#fff}
.hero .btn.primary{background:linear-gradient(180deg,#5ff3e1,#17b6a8);color:#032a2d;box-shadow:0 var(--d) 0 #0a6c72,0 14px 22px -10px #14e0cc,inset 0 1px 0 #fff9}
.btn.disabled,.btn[disabled]{box-shadow:0 2px 0 var(--edge);transform:translateY(3px)}
.icon-btn{border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface2));box-shadow:0 3px 0 var(--edge),var(--gloss);margin-bottom:3px}
.icon-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--edge),inset 0 2px 4px rgba(0,0,0,.15)}
.chip{box-shadow:0 3px 0 var(--edge),var(--gloss);margin-bottom:3px}.chip:active{transform:translateY(3px);box-shadow:none}
.chip.on{background:linear-gradient(180deg,#46efdc,#12bfae);color:#032a2d;border-color:#0a8f95;box-shadow:0 3px 0 var(--edge-p)}
.seg{background:var(--surface2);border-radius:14px;padding:4px;box-shadow:var(--inset)}.seg button{border-radius:11px;font-weight:700}
.seg button.on{background:linear-gradient(180deg,#46efdc,#12bfae);color:#032a2d;box-shadow:0 3px 0 var(--edge-p)}
.seg button:active{transform:translateY(2px)}
.tabs{box-shadow:var(--inset)}.tab.active{box-shadow:0 3px 0 var(--edge),var(--gloss)}.tab:active{transform:translateY(2px)}
.roles span{box-shadow:0 3px 0 var(--edge)}.roles input:checked+span{box-shadow:0 3px 0 var(--edge-p);border-color:var(--brand)}.roles label:active span{transform:translateY(3px);box-shadow:none}
.kp-pad button{border-radius:20px!important;box-shadow:0 6px 0 rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.35)!important}
.kp-pad button:active{transform:translateY(6px);box-shadow:0 0 0 rgba(0,0,0,.38),inset 0 3px 8px rgba(0,0,0,.4)!important}

/* ── البطاقات: ارتفاع وحواف ── */
.card{border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 94%,var(--surface2)));
  box-shadow:0 5px 0 var(--edge-card),var(--glow),var(--gloss);margin-bottom:5px}
.grid>.card,.grid>article{margin-bottom:5px}
.kpi{transition:transform .1s var(--ease),box-shadow .1s var(--ease);cursor:default}
.kpi:has(a.cover){cursor:pointer}.kpi:has(a.cover):hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--edge-card),0 22px 34px -16px rgba(16,27,50,.45),var(--gloss)}
.kpi:has(a.cover):active{transform:translateY(5px);box-shadow:0 0 0 var(--edge-card),inset 0 2px 6px rgba(0,0,0,.12)}
.kpi .v{letter-spacing:-.5px;text-shadow:0 1px 0 rgba(255,255,255,.5)}
:root[data-theme=dark] .kpi .v{text-shadow:none}
.ico,.kpi .ico,.grid-menu .ico{background-image:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%);box-shadow:0 3px 0 rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.6);border-radius:13px}
.strip>div,.opt,.li,.vcard{border-radius:16px;box-shadow:0 3px 0 var(--edge-card),var(--gloss)}
.li{background:linear-gradient(180deg,var(--surface),var(--surface2))}
.li:has(a):active,.opt:active{transform:translateY(2px)}
.page-h h2{font-size:24px;letter-spacing:-.3px;background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--ink) 65%,var(--brand)));-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{box-shadow:0 2px 0 rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.5)}

/* ── الواجهة العلوية ── */
.hero{border-radius:26px;padding:26px;background:radial-gradient(circle at 92% 8%,#2ee6d255,transparent 42%),radial-gradient(circle at 6% 120%,#3b82f655,transparent 45%),linear-gradient(145deg,#0f2447,#17407a 60%,#0f6a7c);
  box-shadow:0 8px 0 var(--edge-n),0 28px 40px -20px rgba(8,22,50,.7),inset 0 1px 0 rgba(255,255,255,.22);margin-bottom:22px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,0) 38%);pointer-events:none}
.hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;inset-inline-end:-60px;bottom:-90px;background:radial-gradient(circle,#5ff3e144,transparent 70%);pointer-events:none}
.hero h2{text-shadow:0 2px 8px rgba(0,0,0,.35)}
.topbar{background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 4px 0 color-mix(in srgb,var(--edge-card) 70%,transparent),0 14px 24px -18px rgba(0,0,0,.4);border-bottom:1px solid var(--line)}
.sidebar{background:linear-gradient(180deg,#0d1a33,#162b52 60%,#12404f);box-shadow:inset -1px 0 0 #ffffff12,12px 0 30px -18px rgba(0,0,0,.6)}
.nav a{border:1px solid transparent;margin-bottom:3px}
.nav a:hover{background:#ffffff14;transform:translateX(-2px)}
.nav a.active{background:linear-gradient(180deg,#3fe9d6,#12b3a6 55%,#0d8f99);border-color:#0a8f95;color:#032a2d;box-shadow:0 4px 0 #086a70,0 14px 20px -10px #0fd2bf,inset 0 1px 0 rgba(255,255,255,.6)}
.nav a:active{transform:translateY(3px);box-shadow:none}
.brand-mark{box-shadow:0 4px 0 #086a70,0 12px 20px -8px #0bd3c0,inset 0 1px 0 #fff8}
input,select,textarea{box-shadow:var(--inset);border-radius:14px}
input:focus,select:focus,textarea:focus{box-shadow:var(--inset),0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.modal{border-radius:24px;box-shadow:0 8px 0 var(--edge-card),0 40px 90px rgba(0,0,0,.5)}
.modal-h{background:linear-gradient(180deg,var(--surface2),var(--surface))}
.auth-card{box-shadow:0 8px 0 var(--edge-card),0 30px 60px -24px rgba(0,0,0,.4),var(--gloss);border-radius:26px}
.swt{box-shadow:var(--inset)}

/* ── شريط التنقل السريع (بين الأقسام بدون الرجوع للرئيسية) ── */
.subnav{display:none}
@media (max-width:1023px){
  .subnav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;position:sticky;top:var(--top);z-index:19;padding:10px 12px 12px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:14px;font-weight:700;font-size:13.5px;color:var(--ink);scroll-snap-align:center;
    background:linear-gradient(180deg,var(--surface),var(--surface2));border:1px solid var(--line);box-shadow:0 4px 0 var(--edge),var(--gloss);margin-bottom:4px}
  .subnav a svg{width:17px;height:17px;color:var(--brand2)}
  .subnav a:active{transform:translateY(4px);box-shadow:0 0 0 var(--edge)}
  .subnav a.active{background:linear-gradient(180deg,#46efdc,#12bfae 55%,#0a9aa0);color:#032a2d;border-color:#0a8f95;box-shadow:0 4px 0 var(--edge-p),0 12px 18px -10px var(--brand),inset 0 1px 0 rgba(255,255,255,.7)}
  .subnav a.active svg{color:#032a2d}
  /* الشريط السفلي: لوح عائم ثلاثي الأبعاد */
  .bottomnav{inset-inline:10px;bottom:calc(8px + env(safe-area-inset-bottom));height:var(--bottom);padding:6px;border-radius:24px;border:1px solid var(--line);
    background:linear-gradient(180deg,var(--surface),var(--surface2));box-shadow:0 6px 0 var(--edge),0 24px 36px -14px rgba(0,0,0,.45),var(--gloss)}
  .main{padding-bottom:calc(var(--bottom) + 26px + env(safe-area-inset-bottom))}
  .bottomnav a,.bottomnav button{transition:transform .09s var(--ease)}
  .bottomnav a:active,.bottomnav button:active{transform:translateY(3px) scale(.96)}
  .bottomnav a.active svg{background:linear-gradient(180deg,#46efdc,#12bfae);color:#032a2d;box-shadow:0 3px 0 var(--edge-p);width:40px;height:30px;border-radius:12px}
}
.fab{box-shadow:0 7px 0 #086a70,0 20px 30px -10px #0bd3c0,inset 0 1px 0 #fff9!important}.fab:active{transform:translateY(6px)!important;box-shadow:0 1px 0 #086a70!important}

/* ── حركة دخول متدرجة ── */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.content>*{animation:rise .5s var(--ease) both}
.content>*:nth-child(2){animation-delay:.05s}.content>*:nth-child(3){animation-delay:.1s}.content>*:nth-child(4){animation-delay:.15s}.content>*:nth-child(5){animation-delay:.2s}.content>*:nth-child(n+6){animation-delay:.25s}
.hero{animation-name:rise}
@media (prefers-reduced-motion:reduce){.content>*,.btn,.kpi,.subnav a{animation:none!important;transition:none!important}}
@media print{.subnav{display:none!important}.btn,.card,.hero,.kpi{box-shadow:none!important}.page-h h2{color:#000;background:none}}
.pbar{height:16px;border-radius:99px;background:var(--surface2);box-shadow:var(--inset);overflow:hidden;margin:6px 0 4px}
.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(180deg,#46efdc,#12bfae 55%,#0a9aa0);box-shadow:0 0 12px var(--brand),inset 0 1px 0 rgba(255,255,255,.6);transition:width .6s var(--ease)}
button.li{width:100%;text-align:start;cursor:pointer;font:inherit;color:inherit}
.dose.done{background:linear-gradient(180deg,var(--ok-soft),var(--surface));border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.dose.late{background:linear-gradient(180deg,var(--bad-soft),var(--surface));border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.dose:active{transform:translateY(3px)}
.task{text-decoration:none;color:inherit}.task .tk{width:26px;height:26px;border-radius:9px;border:2px solid var(--line);display:grid;place-items:center;font-weight:800;color:#fff;flex:none;box-shadow:var(--inset)}
.task.done .tk{background:linear-gradient(180deg,#46efdc,#12bfae);border-color:#0a8f95;box-shadow:0 3px 0 var(--edge-p)}.task.done .li-m b{text-decoration:line-through;opacity:.65}