/* Tafsirico (تفسیریکو) — shared design system. Source of truth: design-system-v3 + project summary §2.
   Everything is local: fonts, icons and scripts come from this server only. */

@font-face{font-family:'YekanBakh';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/YekanBakhFaNum-Regular.woff') format('woff')}
@font-face{font-family:'YekanBakh';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/YekanBakhFaNum-Bold.woff') format('woff')}

:root{--pcard:rgba(255,255,255,.66);
  --bg:#EEF2F7;--surface:#FFFFFF;--sunk:#F5F8FC;
  --ink:#0B1220;--txt:#334155;--body:#556479;--muted:#8494A8;--slate:#475569;
  --border:#E3E9F0;--border-l:#EFF3F8;
  --indigo:#6366F1;--indigo-d:#4F46E5;--indigo-l:#C7D2FE;--indigo-xl:#E8ECFF;--navy:#1E1B4B;
  --ok:#0E9B79;--ok-bg:#E4F5F0;--ok-tx:#08624C;
  --warn:#D98708;--warn-bg:#FCF1DE;--warn-tx:#835303;
  --dang:#DC4C4C;--dang-bg:#FBE9E9;--dang-tx:#98302F;
  --sh1:0 1px 2px rgba(11,18,32,.05), inset 0 1px 0 rgba(255,255,255,.9);
  --sh2:0 2px 4px rgba(11,18,32,.03), 0 14px 34px -10px rgba(11,18,32,.10), inset 0 1px 0 rgba(255,255,255,.9);
  --sh3:0 4px 8px rgba(11,18,32,.04), 0 24px 52px -14px rgba(11,18,32,.16);
  --glass:rgba(255,255,255,.72);--gblur:blur(26px) saturate(180%);
  --solid:rgba(255,255,255,.97);
  --gring:inset 0 0 0 1px rgba(255,255,255,.9);--gsh:0 18px 44px -8px rgba(11,18,32,.20);
  --r-sm:10px;--r-tile:16px;--r-md:18px;--r-card:26px;--r-pill:9999px;
  --e:cubic-bezier(.4,0,.2,1);--eo:cubic-bezier(.22,1,.36,1);--sp:cubic-bezier(.34,1.56,.64,1);
  /* layout */
  --rail:76px;--off:68px;--page:1180px;--gut:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'YekanBakh',system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:14.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;min-height:100vh;font-variant-numeric:normal}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{line-height:inherit}
.num,.tab{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideR{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(11deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes livedot{0%,100%{box-shadow:0 0 0 0 rgba(14,155,121,.5)}70%{box-shadow:0 0 0 7px rgba(14,155,121,0)}}
@keyframes rp{to{transform:scale(2.4);opacity:0}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.rise{opacity:0;animation:rise .6s var(--eo) forwards}
.d1{animation-delay:.06s}.d2{animation-delay:.15s}.d3{animation-delay:.24s}.d4{animation-delay:.33s}.d5{animation-delay:.42s}

/* =====================================================================
   STAFF SHELL (doctor · typist · admin)
   One page width (1180) for the header pill and the content, flush edges at every width.
   ===================================================================== */
body.staff{padding:100px var(--off) 56px 0}
.shell{max-width:calc(var(--page) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}

/* ---- expanding rail ---- */
.rail{position:fixed;top:0;right:0;bottom:0;width:var(--rail);background:var(--surface);border-left:1px solid var(--border);
  padding:16px 0;z-index:55;overflow:hidden;transition:width .46s var(--eo),box-shadow .46s var(--eo);display:flex;flex-direction:column}
.rail:hover,.rail:focus-within{width:264px;box-shadow:-14px 0 50px -12px rgba(11,18,32,.18)}
.lgrow{display:flex;align-items:center;height:44px;margin-bottom:22px;padding:0 18px;gap:12px}
.lg{width:40px;height:40px;border-radius:var(--r-pill);display:block;flex:none;animation:popIn .5s var(--sp) both}
.lg img{width:40px;height:40px;display:block}
.lgname{white-space:nowrap;opacity:0;transform:translateX(-8px);transition:.42s var(--eo);font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.01em;flex:1}
.rail:hover .lgname,.rail:focus-within .lgname{opacity:1;transform:none}
.nav{position:relative;display:flex;flex-direction:column;gap:5px;padding:0 14px}
/* each nav group owns its pill; only the group holding the active item shows it */
.pill{position:absolute;right:14px;left:14px;top:0;height:50px;border-radius:var(--r-md);background:var(--navy);transition:transform .52s var(--sp),opacity .2s;z-index:0;
  box-shadow:0 10px 24px -8px rgba(30,27,75,.5);opacity:0}
.nav.has-on .pill{opacity:1}
.ri{position:relative;z-index:1;display:flex;align-items:center;height:50px;border-radius:var(--r-md);color:var(--body);cursor:pointer;
  transition:color .26s var(--e);animation:popIn .45s var(--sp) both;white-space:nowrap}
.ri:nth-child(2){animation-delay:.04s}.ri:nth-child(3){animation-delay:.08s}.ri:nth-child(4){animation-delay:.12s}
.ri:nth-child(5){animation-delay:.16s}.ri:nth-child(6){animation-delay:.2s}.ri:nth-child(7){animation-delay:.24s}
.ri:nth-child(8){animation-delay:.28s}.ri:nth-child(9){animation-delay:.32s}
.ri .ic{width:48px;display:grid;place-items:center;flex:none;transition:transform .3s var(--sp);font-size:22px}
.ri:hover:not(.on){color:var(--ink)}
.ri:hover .ic{transform:scale(1.14)}
.ri.on{color:#fff}
.ri .rl{font-size:14.5px;font-weight:700;opacity:0;transform:translateX(-8px);transition:.42s var(--eo)}
.rail:hover .rl,.rail:focus-within .rl{opacity:1;transform:none}
.ri .cnt{margin-inline-start:auto;margin-inline-end:16px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--border-l);color:var(--body);
  font-size:11px;font-weight:700;display:grid;place-items:center;opacity:0;transition:.42s var(--eo)}
.rail:hover .ri .cnt,.rail:focus-within .ri .cnt{opacity:1}
.ri.on .cnt{background:rgba(255,255,255,.22);color:#fff}
.ri .cdot{position:absolute;top:8px;left:13px;width:9px;height:9px;border-radius:50%;background:var(--dang);border:2px solid var(--surface);transition:.3s var(--eo);z-index:2}
.ri.on .cdot{display:none}
.rail:hover .ri .cdot{opacity:0}
.rsp{flex:1;min-height:16px}
.rdiv{height:1px;background:var(--border);margin:12px 22px}
.ri.more{display:none}

/* ---- floating glass header ---- */
.sw{position:fixed;top:18px;left:0;right:var(--off);z-index:45;padding:0 var(--gut);pointer-events:none}
.hdr{position:relative;max-width:var(--page);margin:0 auto;pointer-events:auto;background:var(--glass);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);
  border-radius:var(--r-pill);min-height:56px;padding:8px;display:flex;align-items:center;gap:12px;box-shadow:var(--gring),var(--gsh);animation:rise .55s var(--eo) both;min-width:0}
.hdr>*{flex:none}
.hlive{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.hlive .ld{width:9px;height:9px;border-radius:50%;background:var(--ok);animation:livedot 1.6s ease-in-out infinite}
.htt,.hlive{margin-inline-start:10px}
.htt{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.hsep{width:1px;height:26px;background:rgba(11,18,32,.09)}
.capm{display:flex;align-items:center;gap:9px}
.cap{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.bar{width:78px;height:6px;border-radius:var(--r-pill);background:rgba(11,18,32,.1);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--indigo);width:0;transition:width 1s var(--eo)}
.bar.full i{background:var(--dang)}
.capv{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.spacer{flex:1 1 auto!important;min-width:0}
.avpill{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
  padding:7px 13px;border-radius:var(--r-pill);cursor:pointer;transition:.24s var(--e);white-space:nowrap;border:none}
.avpill:hover{background:#fff;transform:translateY(-2px)}
.avpill .sdot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.avpill.away .sdot{background:var(--warn)}.avpill.leave .sdot{background:var(--muted)}
.avpill i{font-size:14px;color:var(--muted)}
.work{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--body);white-space:nowrap}
.work i{font-size:16px;color:var(--indigo-d)}.work b{color:var(--ink);font-variant-numeric:tabular-nums}
.spill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:7px 13px;border-radius:var(--r-pill);transition:.24s var(--e);white-space:nowrap}
.spill:hover{transform:translateY(-2px)}
.spill i{font-size:15px}.spill .n{font-variant-numeric:tabular-nums}
.spill.a{color:var(--indigo-d);background:rgba(232,236,255,.75);box-shadow:inset 0 0 0 1px rgba(99,102,241,.18)}
.spill.b{color:var(--warn-tx);background:rgba(252,241,222,.8);box-shadow:inset 0 0 0 1px rgba(217,135,8,.18)}
.spill.bonus{color:var(--warn-tx);background:linear-gradient(135deg,#FFF6E5,#FCEBCB);box-shadow:inset 0 0 0 1px rgba(217,135,8,.22)}
.bonuspill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--warn-tx);background:linear-gradient(180deg,#FFF6E6,#FCEFD6);box-shadow:inset 0 0 0 1px rgba(217,135,8,.28);padding:7px 13px;border-radius:var(--r-pill);transition:.24s var(--e);white-space:nowrap;animation:bglow 2.4s ease-in-out infinite}
.bonuspill:hover{transform:translateY(-2px)}.bonuspill i{color:var(--warn);font-size:15px}.bonuspill .n{font-variant-numeric:tabular-nums}
@keyframes bglow{0%,100%{box-shadow:inset 0 0 0 1px rgba(217,135,8,.28),0 0 0 0 rgba(217,135,8,0)}50%{box-shadow:inset 0 0 0 1px rgba(217,135,8,.4),0 0 0 6px rgba(217,135,8,.09)}}
.gsrch{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);border-radius:var(--r-pill);padding:8px 14px;transition:.24s var(--e);width:240px}
.gsrch:focus-within{box-shadow:inset 0 0 0 2px var(--indigo-l);background:#fff}
.gsrch i{color:var(--muted);font-size:16px}.gsrch input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:var(--ink);min-width:0}
/* icon button (bell). Badge sits on the button's corner, never on the glyph. */
.hb{position:relative;width:38px;height:38px;border-radius:var(--r-pill);background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);border:none;
  display:grid;place-items:center;color:var(--txt);cursor:pointer;transition:.24s var(--e);font-size:19px}
.hb:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.hb .bdot{position:absolute;top:-3px;left:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--dang);color:#fff;
  font-size:9.5px;font-weight:700;display:grid;place-items:center;border:2px solid rgba(255,255,255,.98);line-height:1}
.hb.ring2 i{animation:shake 1s var(--e) 1.2s 2;transform-origin:50% 10%}
.who{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
  padding:5px 14px 5px 5px;border-radius:var(--r-pill);cursor:pointer;transition:.24s var(--e);border:none;text-align:start}
.who:hover{background:#fff;transform:translateY(-2px)}
.av{width:30px;height:30px;border-radius:var(--r-pill);background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.av i{font-size:16px}
.who .nm2,.who .sp2{display:block}
.who .nm2{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;white-space:nowrap}
.who .sp2{font-size:11px;color:var(--body);line-height:1.2;white-space:nowrap}

/* ---- dropdowns: near-solid glass ---- */
.dd{position:absolute;top:calc(100% + 12px);left:8px;width:340px;max-width:calc(100vw - 40px);background:var(--solid);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-card);padding:8px;box-shadow:inset 0 0 0 1px #fff,0 24px 56px -12px rgba(11,18,32,.28),0 2px 8px rgba(11,18,32,.06);
  opacity:0;transform:translateY(-12px) scale(.96);pointer-events:none;transition:.34s var(--eo);z-index:60}
.dd.o{opacity:1;transform:none;pointer-events:auto}
.dd.menu{width:240px}
.nh{display:flex;align-items:center;justify-content:space-between;padding:11px 12px}
.nh b{font-size:14.5px;color:var(--ink)}
.nh button{font-size:12px;color:var(--indigo-d);font-weight:700;cursor:pointer;padding:4px 8px;border-radius:var(--r-pill);transition:.2s var(--e);background:none;border:none}
.nh button:hover{background:var(--indigo-xl)}
.ni{display:flex;align-items:flex-start;gap:11px;padding:12px;border-radius:var(--r-md);transition:.22s var(--e);background:var(--surface);box-shadow:0 1px 2px rgba(11,18,32,.04);margin-bottom:6px}
.ni:hover{background:var(--sunk);transform:translateX(-4px)}
.ni .ic2{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;font-size:18px;background:var(--indigo-xl);color:var(--indigo-d)}
.ni .ic2.k2{background:var(--dang-bg);color:var(--dang-tx)}.ni .ic2.k3{background:var(--warn-bg);color:var(--warn-tx)}.ni .ic2.k4{background:var(--warn-bg);color:var(--warn-tx)}
.ni .t1{font-size:13px;font-weight:700;color:var(--ink);line-height:1.5}
.ni .t2{font-size:12px;color:var(--body);margin-top:1px}
.ni .tdot{width:8px;height:8px;border-radius:50%;background:var(--indigo);flex:none;margin-top:6px}
.dd.o .ni{animation:slideR .42s var(--eo) both}
.nf{display:block;text-align:center;font-size:12px;color:var(--indigo-d);font-weight:700;padding:10px;border-radius:var(--r-md);transition:.2s var(--e)}
.nf:hover{background:var(--indigo-xl)}
.nempty{text-align:center;padding:26px 12px;color:var(--muted);font-size:13px}
.nempty i{display:block;font-size:30px;color:var(--indigo-l);margin-bottom:6px}
.mi{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-md);font-size:13.5px;font-weight:700;color:var(--ink);background:none;border:none;width:100%;cursor:pointer;transition:.2s var(--e)}
.mi:hover{background:var(--sunk)}.mi i{font-size:18px;color:var(--body)}
.mi.dan{color:var(--dang-tx)}.mi.dan i{color:var(--dang)}

/* =====================================================================
   COMPONENTS
   ===================================================================== */
.hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ttl{font-size:25px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.3}
.tsub{font-size:13px;color:var(--body);margin-top:2px}
/* .card is the prototype card: surface, radius, shadow, NO padding. Each card type sets its own padding (as in the
   prototypes); .pad is the generic padding for simple cards on pages that have no prototype. */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh2)}
.card.pad{padding:26px}
.card.sm{padding:18px;border-radius:var(--r-md)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12.5px;padding:8px 15px;border-radius:var(--r-pill);background:var(--surface);color:var(--body);box-shadow:var(--sh1),0 0 0 1px var(--border);
  cursor:pointer;transition:.24s var(--e);display:inline-flex;align-items:center;gap:6px;font-weight:700;border:none;line-height:1.7;font-family:inherit}
.chip .cc{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--border-l);color:var(--body);font-size:10.5px;display:grid;place-items:center;font-variant-numeric:tabular-nums;line-height:1.7}
.chip.on .cc{background:rgba(255,255,255,.22);color:#fff}
.chip:hover{color:var(--ink);transform:translateY(-1px)}
.chip.on,.chip:has(input:checked){background:var(--navy);color:#fff;box-shadow:0 6px 16px -6px rgba(30,27,75,.5)}
.chip:has(input:focus-visible){outline:2px solid var(--indigo);outline-offset:2px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);background:var(--border-l);color:var(--slate);white-space:nowrap}
.tag i{font-size:13px}
.tag.ok{background:var(--ok-bg);color:var(--ok-tx)}.tag.warn{background:var(--warn-bg);color:var(--warn-tx)}.tag.dan{background:var(--dang-bg);color:var(--dang-tx)}.tag.acc{background:var(--indigo-xl);color:var(--indigo-d)}
.btn{font-weight:700;border:none;cursor:pointer;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:.24s var(--e);font-size:13.5px;padding:11px 18px;white-space:nowrap;position:relative;overflow:hidden;line-height:normal}
.btn i{font-size:17px}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.b-pri{background:var(--navy);color:#fff;box-shadow:0 6px 18px -5px rgba(30,27,75,.5)}.b-pri:hover{transform:translateY(-2px)}
.b-acc{background:var(--indigo);color:#fff;box-shadow:0 6px 18px -5px rgba(99,102,241,.6)}.b-acc:hover{background:var(--indigo-d);transform:translateY(-2px)}
.b-sec{background:var(--surface);color:var(--ink);box-shadow:var(--sh1),0 0 0 1px var(--border)}.b-sec:hover{transform:translateY(-2px);box-shadow:var(--sh2),0 0 0 1px var(--border)}
.b-dan{background:var(--surface);color:var(--dang-tx);box-shadow:var(--sh1),0 0 0 1px #F3D2D2}.b-dan:hover{transform:translateY(-2px)}
.b-dsol{background:var(--dang);color:#fff;box-shadow:0 6px 18px -6px rgba(220,76,76,.6)}.b-dsol:hover{transform:translateY(-2px)}
.b-sm{font-size:12.5px;padding:9px 15px;min-height:38px}
.b-blk{width:100%}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rp .62s var(--eo);pointer-events:none}

/* forms */
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.fld label{font-size:13px;font-weight:700;color:var(--ink)}
.fld .hint{font-size:12px;color:var(--muted)}
.inp{width:100%;height:50px;border-radius:var(--r-md);border:none;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--border);padding:0 16px;font-size:15px;color:var(--ink);transition:.2s var(--e)}
.inp:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--indigo)}
.inp.ltr{direction:ltr;text-align:right;letter-spacing:.04em}
.inp[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--dang)}
.err{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--dang-tx);background:var(--dang-bg);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:14px}
.note{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--body);background:var(--sunk);border-radius:var(--r-tile);padding:12px 14px}
.note i{font-size:18px;color:var(--indigo-d);flex:none;margin-top:1px}
.note.warn{background:var(--warn-bg);color:var(--warn-tx)}.note.warn i{color:var(--warn)}

/* stat tile */
.stat{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh2);padding:18px 20px;display:flex;align-items:center;gap:14px}
.stat .si{width:44px;height:44px;border-radius:var(--r-tile);background:var(--indigo-xl);color:var(--indigo-d);display:grid;place-items:center;font-size:22px;flex:none}
.stat .sv{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.stat .sl{font-size:12.5px;color:var(--body)}

/* empty / not-yet-built state */
.empty{text-align:center;padding:56px 24px}
.empty .ei{width:72px;height:72px;margin:0 auto 18px;border-radius:24px;background:var(--indigo-xl);color:var(--indigo-d);display:grid;place-items:center;font-size:34px}
.empty h2{font-size:18px;color:var(--ink);margin-bottom:6px}
.empty p{font-size:13.5px;color:var(--body);max-width:420px;margin:0 auto}

/* toast: transparent glass */
.tst{position:fixed;bottom:26px;right:50%;transform:translateX(50%) translateY(90px);z-index:140;background:rgba(255,255,255,.9);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);
  border-radius:var(--r-pill);padding:13px 24px;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--ink);box-shadow:var(--gring),var(--gsh);opacity:0;transition:.55s var(--eo);max-width:calc(100vw - 40px)}
.tst.o{transform:translateX(50%);opacity:1}
.tst i{font-size:19px;color:var(--ok)}

/* modal + phone sheet: near-solid glass over a veil */
.veil{position:fixed;inset:0;background:rgba(11,18,32,.40);z-index:120;opacity:0;pointer-events:none;transition:.3s var(--e)}
.veil.o{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:130;left:0;right:0;bottom:0;background:var(--solid);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-card) var(--r-card) 0 0;padding:10px 14px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -12px rgba(11,18,32,.3);transform:translateY(105%);transition:transform .42s var(--eo)}
.sheet.o{transform:none}
.sheet{visibility:hidden;transition:transform .42s var(--eo),visibility 0s .42s}.sheet.o{visibility:visible;transition:transform .42s var(--eo)}
@media(min-width:521px){.sheet,.veil{display:none}}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--border);margin:0 auto 10px}
.sheet .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sheet .si{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:var(--r-md);font-size:12.5px;font-weight:700;color:var(--ink);text-align:center;min-height:76px}
.sheet .si i{font-size:24px;color:var(--body)}
.sheet .si.on{background:var(--indigo-xl);color:var(--indigo-d)}.sheet .si.on i{color:var(--indigo-d)}
.sheet .si:active{background:var(--sunk)}

/* test-mode ribbon */
.testbar{position:fixed;bottom:0;left:0;z-index:150;font-size:11px;font-weight:700;color:var(--warn-tx);background:var(--warn-bg);padding:3px 12px;border-top-right-radius:10px;opacity:.92}

/* =====================================================================
   AUTH (login) — centred card on a soft gradient. Mobile-first.
   ===================================================================== */
body.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:radial-gradient(1200px 600px at 85% -10%,#DDE3FF 0,transparent 60%),radial-gradient(900px 500px at -10% 110%,#E0F2EC 0,transparent 55%),var(--bg)}
.authw{width:100%;max-width:420px}
.brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:22px;animation:rise .6s var(--eo) both}
.brand img{width:48px;height:48px}
.brand b{font-size:26px;color:var(--ink);letter-spacing:-.01em}
.authc{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh3);padding:30px 26px;animation:rise .6s var(--eo) .08s both}
.authc h1{font-size:21px;color:var(--ink);line-height:1.4}
.authc .lead{font-size:13.5px;color:var(--body);margin:4px 0 22px}
.otp{display:flex;gap:8px;direction:ltr;justify-content:center;margin-bottom:8px}
.otp input{width:48px;height:56px;border-radius:var(--r-md);border:none;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--border);text-align:center;font-size:22px;font-weight:700;color:var(--ink);transition:.2s var(--e)}
.otp input:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--indigo);transform:translateY(-2px)}
.otpmeta{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--body);margin:10px 0 18px}
.linkb{background:none;border:none;color:var(--indigo-d);font-weight:700;cursor:pointer;padding:6px 4px;font-size:12.5px}
.linkb:disabled{color:var(--muted);cursor:default}
.testcode{display:flex;align-items:center;gap:10px;background:var(--warn-bg);color:var(--warn-tx);border-radius:var(--r-tile);padding:12px 14px;font-size:12.5px;margin-bottom:18px}
.testcode b{font-size:20px;letter-spacing:.2em;direction:ltr;color:var(--ink);font-variant-numeric:tabular-nums}
.testcode i{font-size:20px}
.phonebox{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:var(--body);margin-bottom:18px}
.phonebox b{direction:ltr;color:var(--ink);font-variant-numeric:tabular-nums}
.authfoot{text-align:center;font-size:12px;color:var(--muted);margin-top:18px}
.demo{margin-top:16px;background:rgba(255,255,255,.7);border-radius:var(--r-md);padding:12px 14px;font-size:12px;color:var(--body);box-shadow:var(--sh1)}
.demo b{color:var(--ink)}.demo ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:6px}
.demo li span{direction:ltr;display:inline-block;font-variant-numeric:tabular-nums}

/* =====================================================================
   PATIENT APP — mobile-first consumer shell: glass top bar + floating glass tab bar.
   ===================================================================== */
body.pt{padding:88px 16px 110px;background:radial-gradient(900px 520px at 100% -10%,#DFE4FF 0,transparent 60%),radial-gradient(800px 480px at -20% 100%,#DDF3EC 0,transparent 60%),var(--bg);background-attachment:fixed}
.pwrap{max-width:560px;margin:0 auto}
.pttop{position:fixed;top:12px;left:12px;right:12px;z-index:45;max-width:600px;margin:0 auto;height:56px;display:flex;align-items:center;gap:10px;padding:0 8px;padding-inline-start:14px;
  background:var(--glass);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);border-radius:var(--r-pill);box-shadow:var(--gring),var(--gsh)}
.pttop .pb{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;color:var(--ink)}
.pttop .pb img{width:32px;height:32px}
.ptab{position:fixed;bottom:14px;left:12px;right:12px;z-index:45;max-width:460px;margin:0 auto;height:66px;display:flex;align-items:center;justify-content:space-around;padding:0 6px;
  background:var(--glass);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);border-radius:var(--r-pill);box-shadow:var(--gring),var(--gsh);margin-bottom:env(safe-area-inset-bottom)}
.ptab a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:56px;border-radius:var(--r-pill);font-size:11px;font-weight:700;color:var(--body);transition:.24s var(--e)}
.ptab a i{font-size:22px;transition:transform .3s var(--sp)}
.ptab a.on{color:var(--indigo-d)}.ptab a.on i{transform:translateY(-1px) scale(1.08)}
.ptab a.cta{flex:none;width:56px;height:56px;background:var(--navy);color:#fff;box-shadow:0 10px 24px -8px rgba(30,27,75,.6);margin:0 4px}
.ptab a.cta span{display:none}.ptab a.cta i{font-size:26px}

/* =====================================================================
   BREAKPOINTS: 1280+ desktop · 768 tablet · 320–520 phone
   ===================================================================== */
@media(max-width:1180px){.hlive,.hsep.hl2{display:none}}
@media(max-width:1080px){
  .who .nm2,.who .sp2,.gsrch{display:none}
  .who{padding:5px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .g3,.g2{grid-template-columns:minmax(0,1fr)}
  .spill .t{display:none}
}
@media(max-width:520px){
  :root{--gut:16px}
  body.staff{padding:88px var(--gut) 92px}
  .hb{width:44px;height:44px;font-size:20px}.who{padding:5px}.av{width:34px;height:34px}.btn{min-height:44px}
  .shell{padding:0}
  .sw{right:0;top:12px}
  .hdr{padding:0 6px;gap:8px}
  .htt,.hlive{margin-inline-start:6px}
  .capm,.hsep,.avpill .avt,.avpill i,.work .wt,.htt,.spill .t,.bonuspill .t{display:none}
  .testbar{bottom:auto;top:0;border-radius:0 0 0 10px}
  .avpill{padding:7px 10px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.pad{padding:20px}
  .ttl{font-size:22px}
  /* rail becomes the bottom bar: primary items + «بیشتر», each at least 44px wide */
  .rail{top:auto;bottom:0;right:0;left:0;width:100%!important;height:68px;flex-direction:row;border-left:none;border-top:1px solid var(--border);padding:0 6px env(safe-area-inset-bottom);box-shadow:none!important}
  .lgrow,.rdiv,.rsp,.pill{display:none}
  .rail .nav{flex-direction:row;flex:1;padding:0;gap:0;justify-content:space-around}
  .rail .nav.bottom{display:none}
  .ri{display:none;height:64px;min-width:56px;flex:1;flex-direction:column;gap:0;justify-content:center;animation:none}
  .ri.prim,.ri.more{display:flex}
  .ri .rl{display:block;opacity:1;transform:none;font-size:10.5px;line-height:1.2;max-width:76px;overflow:hidden;text-overflow:ellipsis}
  .ri .ic{font-size:22px;height:28px;width:auto}
  .ri .cnt{display:none}
  .ri .cdot{top:8px;left:calc(50% - 16px)}
  .ri.on{color:var(--indigo-d)}
  .dd{position:fixed;top:78px;left:var(--gut);right:var(--gut);width:auto}
  .dd.menu{width:auto}
}

/* Reduced motion (e.g. Windows Server's default "best performance" setting): animations still run, but instantly, so
   every element lands in its final state. (Switching animations off left fade-in cards stuck at opacity 0.) */
/* «کاهش حرکت» in settings does the same as the system setting */
.rm *,.rm *::before,.rm *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
/* report editor text size (settings → میز نگارش) */
body[data-esz="sm"] .edit{font-size:13px!important}body[data-esz="lg"] .edit{font-size:16.5px!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}

/* ---- page-to-page motion ----
   First page of a visit: the shell pops in like the prototypes. Later pages: the rail and header stay put,
   the page content cross-fades and rises, and the active pill springs from where it was. */
@view-transition{navigation:auto}
.rail{view-transition-name:rail}.sw{view-transition-name:hdr}
::view-transition-old(root){animation:.18s var(--e) both fade reverse}
::view-transition-new(root){animation:.28s var(--eo) both fade}
.warm .hdr,.warm .ri,.warm .lg{animation:none}
.ri,.ri .ic{-webkit-tap-highlight-color:transparent}

/* ---- icons: Phosphor in the SF-Symbols style (outline normally, filled when active or inside a tile) ---- */
.ph{display:inline-flex;align-items:center;justify-content:center;font-style:normal;line-height:1;width:1em;height:1em;flex:none;vertical-align:-.14em}
.ph svg{width:1em;height:1em;fill:currentColor;overflow:visible;display:block}
.ph .f{display:none}
.on .ph .o,.tile .ph .o,.si .ph .o,.ic2 .ph .o,.bpi .ph .o,.ei .ph .o,.lg .ph .o,.av .ph .o,.ph.fill .o,.chip.on .ph .o,.b-pri .ph .o,.ptab a.cta .ph .o{display:none}
.on .ph .f,.tile .ph .f,.si .ph .f,.ic2 .ph .f,.bpi .ph .f,.ei .ph .f,.lg .ph .f,.av .ph .f,.ph.fill .f,.chip.on .ph .f,.b-pri .ph .f,.ptab a.cta .ph .f{display:inline}
.ri .ic .ph{font-size:22px}
.ri.on .ic .ph{animation:popIn .4s var(--sp)}

/* ---- countdown ring (shared by every page with a deadline) ---- */
.ring{width:30px;height:30px;flex:none;transform:rotate(90deg)}
.ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.ring .bgc{stroke:rgba(11,18,32,.1)}.ring .fg{stroke:var(--warn);transition:stroke-dashoffset 1s linear}
.ring.ok .fg{stroke:var(--ok)}.ring.dan .fg{stroke:var(--dang)}.ring.acc .fg{stroke:var(--indigo)}
.cd.late,.cd.late .cdt{color:var(--dang-tx)}
.sub2:disabled{opacity:.55;cursor:not-allowed;transform:none!important}

/* ring tones (by time left): indigo → amber under 10 min → red under 5 min or late */
.tn-acc .fg{stroke:var(--indigo)!important}.tn-warn .fg{stroke:var(--warn)!important}.tn-dan .fg{stroke:var(--dang)!important}
.tn-warn .cdt{color:var(--warn-tx)}.tn-dan .cdt{color:var(--dang-tx)}

/* scanned stamp (PNG set by the admin) in place of the generated round seal */
.seal.scan{border:none!important;border-radius:0!important;transform:none!important;width:auto!important;min-width:86px;max-width:160px;height:92px!important;display:grid;place-items:center;position:relative}
.seal.scan::before{display:none!important}
.seal.scan img{max-width:100%;max-height:100%;object-fit:contain;display:block}
#seal.scan img{opacity:.16;transition:opacity .4s var(--e)}
#seal.scan.applied img{opacity:1;animation:stampIn .6s var(--sp)}
/* doctor profile: stamp card + scanned stamp upload (shared look with the admin stamp settings) */
.stamprow{display:flex;align-items:center;gap:16px}
.stamprow .seal{width:86px;height:86px;border-radius:50%;border:2.5px solid rgba(30,27,75,.55);display:grid;place-items:center;text-align:center;color:rgba(30,27,75,.8);transform:rotate(-8deg);flex:none;font-size:9.5px;font-weight:700;line-height:1.5;padding:6px}
.stamprow .stx2{min-width:0}.stamprow .p1{font-size:14px;font-weight:700;color:var(--ink)}.stamprow .p2{font-size:12px;color:var(--muted);line-height:1.8;margin-top:2px}
.stamprow .pend{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--warn-tx);background:var(--warn-bg);border-radius:var(--r-pill);padding:4px 10px}
.scanbox{width:100%;height:140px;border-radius:var(--r-md);display:grid;place-items:center;padding:10px;margin-bottom:12px;background-color:#fff;
  background-image:linear-gradient(45deg,var(--sunk) 25%,transparent 25%,transparent 75%,var(--sunk) 75%),linear-gradient(45deg,var(--sunk) 25%,transparent 25%,transparent 75%,var(--sunk) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;box-shadow:inset 0 0 0 1px var(--border-l)}
.scanbox img{max-width:100%;max-height:120px;object-fit:contain}
.noscan{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.upl{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--r-md);border:1.5px dashed var(--indigo-l);color:var(--indigo-d);font-size:13px;font-weight:700;cursor:pointer;margin-bottom:8px;position:relative;text-align:center}
.upl input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.upl:focus-within{outline:2px solid var(--indigo);outline-offset:2px}
.hintline{display:block;font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:10px}
.ferr{font-size:12.5px;color:var(--dang-tx);background:var(--dang-bg);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:12px}
/* voice memos (doctor ↔ typist) */
.vbtn{width:40px;height:40px;flex:none;border:none;border-radius:50%;background:var(--indigo-xl);color:var(--indigo-d);display:grid;place-items:center;cursor:pointer;transition:.2s}
.vbtn:hover:not(:disabled){background:var(--indigo);color:#fff}
.vbtn:disabled{opacity:.4;cursor:not-allowed}
.vrec{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:8px 10px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.5px var(--dang-bg),0 6px 18px -10px rgba(220,38,38,.4)}
.vrec .vdot{width:10px;height:10px;border-radius:50%;background:#DC2626;animation:vpulse 1.2s ease-in-out infinite;flex:none}
@keyframes vpulse{50%{opacity:.25}}
.vrec .vt{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;min-width:38px}
.vrec .vlab{flex:1;font-size:12px;color:var(--muted)}
.vrec button{border:none;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:36px;border-radius:var(--r-pill)}
.vrec .vx{width:36px;justify-content:center;background:var(--sunk);color:var(--body)}
.vrec .vstop,.vrec .vsend{padding:0 14px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700}
.vrec.ready{box-shadow:inset 0 0 0 1.5px var(--indigo-l)}
.vrec audio{flex:1;min-width:0;height:36px}
.recording>.vbtn{display:none}
.vmsg{display:inline-flex;align-items:center;gap:8px;max-width:100%}
.vmsg audio{height:36px;max-width:240px;min-width:160px}
.vmsg .vlen{font-size:11.5px;font-weight:700;opacity:.75;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.vrec .vdot{animation:none}}
.cbrow{display:flex;gap:8px;align-items:center}.cbrow .cb{flex:1}
.recording>textarea,.recording>.send,.recording>.cic,.recording>.ib2,.recording>.cbrow{display:none!important}
.recording>.vrec{margin-top:0}
/* ticket conversation (all roles) */
.tthread{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.tthread .tm{max-width:82%;display:flex;flex-direction:column;gap:3px}
.tthread .tm.me{align-self:flex-start}.tthread .tm.them{align-self:flex-end}
.tthread .tmh{font-size:11px;font-weight:700;color:var(--muted);padding:0 4px}
.tthread .tmb{padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
.tthread .tm.me .tmb{background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.tthread .tm.them .tmb{background:#fff;color:var(--ink);box-shadow:var(--sh1),0 0 0 1px var(--border-l);border-bottom-left-radius:5px}
.tthread .tsys{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:6px 12px}
.tthread .tsys.ok{background:var(--ok-bg);color:var(--ok-tx)}.tthread .tsys.rej{background:var(--dang-bg);color:var(--dang-tx)}
.treply{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.treply textarea{flex:1;min-height:46px;max-height:160px;resize:vertical;border:none;outline:none;border-radius:16px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--border-l);padding:11px 14px;font-family:inherit;font-size:14px;color:var(--ink)}
.treply textarea:focus{box-shadow:inset 0 0 0 2px var(--indigo-l);background:#fff}
.treply .btn{flex:none}
/* typist workspace: the doctor's voice dictation, playable in the «منبع دیکته» card */
.dict{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.dict .drow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--sunk)}
.dict .drow .vmsg{flex:1;min-width:0}.dict .drow audio{flex:1;min-width:0;max-width:none}
.dict .dt{font-size:11.5px;color:var(--body);font-variant-numeric:tabular-nums}