/* =====================================================================
   SOTC patient app (PWA, /app) - design system and screens
   Source file (not minified on purpose: served as-is and cached by the service worker).
   Design approved as the phase-1 prototype; Material 3 tokens, RTL, light and dark themes.
   ===================================================================== */
@font-face{font-family:"Vazirmatn";src:url("/Content/Fonts/Vazirmatn/Vazirmatn-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Material Symbols Rounded";src:url("/Content/Fonts/MaterialSymbols/MaterialSymbolsRounded.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
/* ============ Tokens (Material 3, seed #0D47A1) ============ */
:root{
  --r-box:12px; --r-inner:8px;
  /* اندازه متن ( تنظیمات برنامه ) : همه font-size و line-height ها در این ضریب ضرب می شوند ؛ آیکن ها ثابت اند */
  --fs:1;
  --primary:#1E5BB8; --on-primary:#FFFFFF; --primary-container:#D8E2FF; --on-primary-container:#001A43;
  --secondary-container:#DCE2F9; --on-secondary-container:#141B2C;
  --tertiary:#2D6A4F; --tertiary-container:#B4F1CF; --on-tertiary-container:#002113;
  --warn:#7A5900; --warn-container:#FFDF9E; --on-warn-container:#261A00;
  --error:#BA1A1A; --error-container:#FFDAD6; --on-error-container:#410002;
  --surface:#F2F5FA; --sc-lowest:#FFFFFF; --sc-low:#F7F9FC; --sc:#EAEFF6; --sc-high:#E2E8F1; --sc-highest:#D9E0EA;
  --card:#FFFFFF; --card-border:#DDE4EE; --shadow-card:0 1px 3px rgba(16,36,72,.06),0 6px 16px -10px rgba(16,36,72,.16);
  --hero:#1E5BB8; --on-hero:#FFFFFF;
  --blue:#1E5BB8; --blue-bg:#E1EAFF; --teal:#00796B; --teal-bg:#D3F1EB; --amber:#9A5B00; --amber-bg:#FFE8C2;
  --green:#23724D; --green-bg:#D7F2E2; --rose:#B42318; --rose-bg:#FDE1DD;
  --on-surface:#191C22; --on-surface-variant:#43474F; --outline:#737780; --outline-variant:#C3C6D1;
  --inverse-surface:#2E3036; --inverse-on-surface:#EFF0F7; --inverse-primary:#ADC6FF;
  --scrim:rgba(8,12,20,.42);
  --page-bg:#E6EAF2; --frame:#1B1D22; --panel-bg:#FFFFFF;
  --shadow-1:0 1px 2px rgba(10,20,40,.18),0 1px 3px 1px rgba(10,20,40,.08);
  --shadow-3:0 4px 8px 3px rgba(10,20,40,.10),0 1px 3px rgba(10,20,40,.18);
  --ease:cubic-bezier(.2,0,0,1); --ease-dec:cubic-bezier(.05,.7,.1,1); --ease-acc:cubic-bezier(.3,0,.8,.15);
  --font:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --primary:#ADC6FF; --on-primary:#002E6A; --primary-container:#1B4488; --on-primary-container:#D8E2FF;
    --secondary-container:#3F4759; --on-secondary-container:#DCE2F9;
    --tertiary:#98D5B3; --tertiary-container:#0F5138; --on-tertiary-container:#B4F1CF;
    --warn:#F5C451; --warn-container:#5A4300; --on-warn-container:#FFDF9E;
    --error:#FFB4AB; --error-container:#93000A; --on-error-container:#FFDAD6;
    --surface:#0E1116; --sc-lowest:#0A0C10; --sc-low:#151920; --sc:#1B2028; --sc-high:#242A33; --sc-highest:#2E3540;
    --card:#171B22; --card-border:#2A313C; --shadow-card:0 1px 2px rgba(0,0,0,.4),0 6px 14px -10px rgba(0,0,0,.55); --hero:#1D3A6E; --on-hero:#FFFFFF;
    --blue:#ADC6FF; --blue-bg:#1D3056; --teal:#7FD8CB; --teal-bg:#10392F; --amber:#FFC46E; --amber-bg:#46310A;
    --green:#94D8B1; --green-bg:#163A28; --rose:#FFB4AB; --rose-bg:#4A1B18;
    --on-surface:#E2E2E9; --on-surface-variant:#C3C6D1; --outline:#8D9199; --outline-variant:#43474F;
    --inverse-surface:#E2E2E9; --inverse-on-surface:#2E3036; --inverse-primary:#2356A8;
    --scrim:rgba(0,0,0,.6); --page-bg:#0A0C10; --frame:#2A2D34; --panel-bg:#15171C;
  }
}
:root[data-theme="dark"]{
  --primary:#ADC6FF; --on-primary:#002E6A; --primary-container:#1B4488; --on-primary-container:#D8E2FF;
  --secondary-container:#3F4759; --on-secondary-container:#DCE2F9;
  --tertiary:#98D5B3; --tertiary-container:#0F5138; --on-tertiary-container:#B4F1CF;
  --warn:#F5C451; --warn-container:#5A4300; --on-warn-container:#FFDF9E;
  --error:#FFB4AB; --error-container:#93000A; --on-error-container:#FFDAD6;
  --surface:#0E1116; --sc-lowest:#0A0C10; --sc-low:#151920; --sc:#1B2028; --sc-high:#242A33; --sc-highest:#2E3540;
    --card:#171B22; --card-border:#2A313C; --shadow-card:0 1px 2px rgba(0,0,0,.4),0 6px 14px -10px rgba(0,0,0,.55); --hero:#1D3A6E; --on-hero:#FFFFFF;
    --blue:#ADC6FF; --blue-bg:#1D3056; --teal:#7FD8CB; --teal-bg:#10392F; --amber:#FFC46E; --amber-bg:#46310A;
    --green:#94D8B1; --green-bg:#163A28; --rose:#FFB4AB; --rose-bg:#4A1B18;
  --on-surface:#E2E2E9; --on-surface-variant:#C3C6D1; --outline:#8D9199; --outline-variant:#43474F;
  --inverse-surface:#E2E2E9; --inverse-on-surface:#2E3036; --inverse-primary:#2356A8;
  --scrim:rgba(0,0,0,.6); --page-bg:#0A0C10; --frame:#2A2D34; --panel-bg:#15171C;
}

:root[data-fs="l"]{--fs:1.12}
:root[data-fs="xl"]{--fs:1.25}

/* ============ Base ============ */
/* hidden باید همیشه پنهان کند ؛ بدون این ، display کلاس ها ( مثل .screen{display:flex} ) آن را خنثی می کند و همه صفحه ها روی هم دیده می شوند */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--surface);overscroll-behavior-y:none;color:var(--on-surface);font-family:var(--font);font-size:calc(14.5px*var(--fs));line-height:1.6;direction:rtl;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3,p{margin:0}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:12px}
/* عنوان صفحه و پنجره ها فقط برای جابجایی فوکوس صفحه خوان فوکوس می گیرند ؛ حلقه فوکوس لازم ندارند */
[tabindex="-1"]:focus{outline:none}
/* متنی که فقط صفحه خوان می خواند */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* type scale */
.t-display{font-size:calc(30px*var(--fs));line-height:calc(42px*var(--fs));font-weight:800;letter-spacing:-.2px;text-wrap:balance}
.t-headline{font-size:calc(23px*var(--fs));line-height:calc(36px*var(--fs));font-weight:700;text-wrap:balance}
.t-title-l{font-size:calc(19px*var(--fs));line-height:calc(30px*var(--fs));font-weight:700}
.t-title-m{font-size:calc(16px*var(--fs));line-height:calc(26px*var(--fs));font-weight:600}
.t-body-l{font-size:calc(16px*var(--fs));line-height:calc(28px*var(--fs))}
.t-body{font-size:calc(14.5px*var(--fs));line-height:calc(25px*var(--fs))}
.t-label-l{font-size:calc(14px*var(--fs));line-height:calc(20px*var(--fs));font-weight:600}
.t-label-m{font-size:calc(12.5px*var(--fs));line-height:calc(18px*var(--fs));font-weight:500}
.t-label-s{font-size:calc(12px*var(--fs));line-height:calc(17px*var(--fs));font-weight:500}
.muted{color:var(--on-surface-variant)}

/* icons */
.icon{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;display:inline-block;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;user-select:none;flex:none}
.icon.fill{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.icon.flip{transform:scaleX(-1)}
.icon.sm{font-size:20px}
.icon.xs{font-size:18px}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--outline);border-radius:8px;overflow:hidden}
.seg button{padding:7px 6px;font-size:calc(12.5px*var(--fs));line-height:calc(18px*var(--fs));display:flex;align-items:center;justify-content:center;gap:4px;border-inline-start:1px solid var(--outline)}
.seg button:first-child{border-inline-start:0}
.seg button[aria-pressed="true"]{background:var(--secondary-container);color:var(--on-secondary-container);font-weight:600}

.app{position:fixed;inset:0;margin:0 auto;max-width:560px;display:flex;flex-direction:column;background:var(--surface);overflow:hidden;isolation:isolate}
.viewport{position:relative;flex:1;overflow:hidden}

/* ============ Screens ============ */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--surface);will-change:transform,opacity}
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;position:relative}
.scroll::-webkit-scrollbar{display:none}
.content{padding:8px 16px 104px;display:flex;flex-direction:column;gap:12px}
.content.form-content{padding-top:8px}
.content.tight{padding-bottom:24px}

/* top app bar */
.topbar{height:calc(64px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);flex:none;display:flex;align-items:center;gap:2px;padding-inline:4px;background:var(--surface);transition:background .2s var(--ease),box-shadow .2s;position:relative;z-index:2}
.topbar.scrolled{background:var(--card);box-shadow:0 1px 0 var(--card-border),0 6px 14px -10px rgba(16,36,72,.25)}
.topbar-title{flex:1;min-width:0;font-size:calc(19px*var(--fs));line-height:calc(28px*var(--fs));font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:12px 4px}
.topbar-title small{display:block;font-size:calc(12px*var(--fs));line-height:calc(16px*var(--fs));font-weight:500;color:var(--on-surface-variant)}
.topbar .icon-btn:first-child + .topbar-title{padding-inline-start:4px}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;text-decoration:none;align-items:center;justify-content:center;gap:8px;height:48px;padding-inline:24px;border-radius:24px;font-size:calc(15px*var(--fs));font-weight:600;line-height:calc(20px*var(--fs));white-space:nowrap;transition:box-shadow .2s,background .2s,opacity .2s;user-select:none}
.btn::before,.icon-btn::before,.tap::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s;pointer-events:none;border-radius:inherit}
.btn:hover::before,.icon-btn:hover::before,.tap:hover::before{opacity:.08}
.btn:active::before,.icon-btn:active::before,.tap:active::before{opacity:.12}
.btn .icon{font-size:20px}
.btn-filled{background:var(--primary);color:var(--on-primary);box-shadow:0 1px 2px color-mix(in srgb,var(--primary) 30%,transparent)}
.btn-tonal{background:var(--blue-bg);color:var(--blue)}
.btn-outlined{border:1px solid var(--outline);color:var(--primary)}
.btn-text{color:var(--primary);padding-inline:14px}
.btn-danger{background:var(--error);color:var(--surface)}
.btn-block{width:100%}
.btn-sm{height:36px;padding-inline:16px;font-size:calc(13.5px*var(--fs));border-radius:18px}
.btn[disabled],.btn.loading{pointer-events:none}
.btn[disabled]{background:color-mix(in srgb,var(--on-surface) 12%,transparent);color:color-mix(in srgb,var(--on-surface) 40%,transparent);box-shadow:none}
.btn.loading .btn-label{opacity:.0}
.btn .spin{position:absolute;inset:0;margin:auto;display:none}
.btn.loading .spin{display:block}
.icon-btn{position:relative;width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--on-surface-variant);flex:none;overflow:hidden}
.tap{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.16;transform:scale(0);animation:ripple .55s var(--ease-dec) forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid currentColor;border-inline-end-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* text fields (outlined) */
.field{position:relative;display:block}
.field input,.field textarea{width:100%;border:1px solid var(--outline);border-radius:10px;background:transparent;padding:16px 16px 14px;font-size:calc(16px*var(--fs));line-height:calc(24px*var(--fs));outline:none;transition:border-color .15s,box-shadow .15s;resize:none}
.field.has-icon input{padding-inline-start:48px}
.field textarea{min-height:150px;padding-top:18px}
.field-label{position:absolute;inset-inline-start:12px;top:15px;padding-inline:4px;color:var(--on-surface-variant);font-size:calc(16px*var(--fs));line-height:calc(24px*var(--fs));pointer-events:none;transition:all .15s var(--ease);background:var(--surface)}
.field.has-icon .field-label{inset-inline-start:44px}
.field-icon{position:absolute;inset-inline-start:13px;top:16px;color:var(--on-surface-variant)}
.field input:focus,.field textarea:focus{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.field input:focus + .field-label,.field input:not(:placeholder-shown) + .field-label,
.field textarea:focus + .field-label,.field textarea:not(:placeholder-shown) + .field-label{top:-10px;inset-inline-start:12px;font-size:calc(12px*var(--fs));line-height:calc(18px*var(--fs));color:var(--primary)}
.field input:not(:focus):not(:placeholder-shown) + .field-label,.field textarea:not(:focus):not(:placeholder-shown) + .field-label{color:var(--on-surface-variant)}
.field.error input,.field.error textarea{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
.field.error .field-label,.field.error .field-icon{color:var(--error)!important}
.field-support{display:flex;justify-content:space-between;gap:8px;padding:4px 16px 0;font-size:calc(12.5px*var(--fs));line-height:calc(18px*var(--fs));color:var(--on-surface-variant)}
.field.error + .field-support .msg{color:var(--error)}
.sheet .field-label{background:var(--sc-low)}

/* chips */
/* وضعیت ( بیضی ) : زمینه کم رنگ از رنگ همان وضعیت ، بدون حاشیه */
.chip{--tone:var(--on-surface-variant);display:inline-flex;align-items:center;gap:5px;height:26px;padding-inline:8px 11px;border-radius:999px;font-size:calc(12.5px*var(--fs));font-weight:600;line-height:calc(18px*var(--fs));letter-spacing:-.1px;white-space:nowrap;flex:none;background:color-mix(in srgb,var(--tone) 12%,var(--card));color:var(--tone)}
.chip .icon{font-size:15px;font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 20}
.chip.s-warn{--tone:var(--warn)}
.chip.s-info{--tone:var(--primary)}
.chip.s-review{--tone:var(--teal)}
.chip.s-ok{--tone:var(--green)}
.chip.s-error{--tone:var(--error)}
.chip.s-neutral{--tone:var(--on-surface-variant)}
/* کلاس های s-* ( مشترک با باکس های هشدار ) زمینه خودشان را دارند ؛ این قاعده برای بیضی وضعیت بر آنها غلبه می کند */
.chip[class*="s-"]{background:color-mix(in srgb,var(--tone) 12%,var(--card));color:var(--tone);box-shadow:none}
.s-warn{background:var(--warn-container);color:var(--on-warn-container)}
.s-info{background:var(--primary-container);color:var(--on-primary-container)}
.s-review{background:var(--secondary-container);color:var(--on-secondary-container)}
.s-ok{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.s-error{background:var(--error-container);color:var(--on-error-container)}
.s-neutral{background:transparent;color:var(--on-surface-variant);box-shadow:inset 0 0 0 1px var(--outline-variant)}
/* فیلترها به خط بعد می روند تا همه داخل صفحه و قابل انتخاب باشند ( اسکرول افقی روی دسکتاپ و بعضی گوشی ها دیده نمی شد ) */
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{position:relative;height:30px;padding-inline:10px 5px;border-radius:8px;border:1px solid var(--card-border);background:var(--card);box-shadow:0 1px 2px rgba(16,36,72,.05);display:inline-flex;align-items:center;gap:5px;font-size:calc(12px*var(--fs));font-weight:600;white-space:nowrap;color:var(--on-surface);flex:none;transition:background .2s,color .2s}
.fchip::after{content:"";position:absolute;inset:-6px -3px}
.fchip-count{min-width:18px;height:18px;padding-inline:5px;border-radius:999px;background:var(--sc);color:var(--on-surface-variant);font-size:calc(12px*var(--fs));font-weight:700;display:inline-grid;place-items:center}
.fchip[aria-pressed="true"]{background:var(--primary);border-color:transparent;color:var(--on-primary);box-shadow:none}
.fchip[aria-pressed="true"] .fchip-count{background:color-mix(in srgb,var(--on-primary) 22%,transparent);color:var(--on-primary)}

/* cards & lists */
.card{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);border-radius:var(--r-box);padding:16px;display:flex;flex-direction:column;gap:12px}
.card .field-label,.wl-form .field-label,.sheet .field-label{background:var(--card)}
.tile{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none}
.card-outlined{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-box);padding:16px;display:flex;flex-direction:column;gap:12px}
.card-head{display:flex;align-items:center;gap:10px}
.card-head .t-title-m{flex:1}
.section-title{display:flex;align-items:center;justify-content:space-between;padding-inline:4px;margin:4px 0 -4px}
.section-title h2{font-size:calc(15px*var(--fs));font-weight:700;line-height:calc(24px*var(--fs))}
.list{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);border-radius:var(--r-box);overflow:hidden}
.li{position:relative;display:flex;align-items:center;gap:14px;min-height:62px;padding:10px 16px;text-align:start;width:100%}
.li + .li::after{content:"";position:absolute;top:0;inset-inline:70px 16px;height:1px;background:var(--card-border)}
.li-lead{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--blue-bg);color:var(--blue);flex:none}
.tone-blue{background:var(--blue-bg);color:var(--blue)}
.tone-teal{background:var(--teal-bg);color:var(--teal)}
.tone-amber{background:var(--amber-bg);color:var(--amber)}
.tone-green{background:var(--green-bg);color:var(--green)}
.tone-rose{background:var(--rose-bg);color:var(--rose)}
.li-body{flex:1;min-width:0;display:flex;flex-direction:column}
.li-body .t-title-m,.li-body .t-label-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-trail{text-align:end;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-block:9px}
.kv + .kv{border-top:1px dashed var(--outline-variant)}
.kv dt{color:var(--on-surface-variant);font-size:calc(14px*var(--fs))}
.kv dd{margin:0;font-weight:600;text-align:end}
dl{margin:0}

/* bottom navigation */
.navbar{flex:none;display:grid;grid-template-columns:repeat(5,1fr);height:calc(80px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card);border-top:1px solid var(--card-border);box-shadow:0 -8px 20px -14px rgba(16,36,72,.28);position:relative;z-index:5;transition:transform .3s var(--ease),margin .3s var(--ease)}
.app:not(.has-nav) .navbar{transform:translateY(100%);margin-top:calc(-80px - env(safe-area-inset-bottom,0px))}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--on-surface-variant);font-size:calc(12px*var(--fs));line-height:calc(16px*var(--fs));font-weight:500;position:relative}
.nav-ind{position:relative;width:60px;height:32px;border-radius:16px;display:grid;place-items:center;transition:background .25s var(--ease);overflow:hidden}
.nav-item[aria-current="page"]{color:var(--primary);font-weight:700}
.nav-item[aria-current="page"] .nav-ind{background:var(--blue-bg);color:var(--blue)}
.nav-item[aria-current="page"] .icon{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}
.badge{position:absolute;top:2px;inset-inline-end:12px;min-width:16px;height:16px;padding-inline:4px;border-radius:8px;background:var(--error);color:var(--surface);font-size:calc(10.5px*var(--fs));line-height:calc(16px*var(--fs));font-weight:700;text-align:center}
.badge.dot{min-width:8px;width:8px;height:8px;padding:0;top:5px;inset-inline-end:16px}

/* extended FAB */
.fab{position:absolute;inset-inline-end:16px;bottom:16px;height:56px;border-radius:14px;background:var(--primary);color:var(--on-primary);box-shadow:0 4px 12px -4px color-mix(in srgb,var(--primary) 45%,transparent);display:flex;align-items:center;gap:10px;padding-inline:16px 20px;font-weight:600;font-size:calc(15px*var(--fs));z-index:3;overflow:hidden;transition:padding .25s var(--ease),width .25s var(--ease)}
.fab .fab-label{max-width:160px;white-space:nowrap;overflow:hidden;transition:max-width .25s var(--ease),opacity .2s}
.fab.collapsed{padding-inline:16px;gap:0}
.fab.collapsed .fab-label{max-width:0;opacity:0}

/* bottom action bar */
.actionbar{flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--card-border);box-shadow:0 -8px 20px -14px rgba(16,36,72,.28);display:flex;gap:10px}

/* ============ Overlays ============ */
.layer{position:absolute;inset:0;z-index:40;pointer-events:none}
.layer > *{pointer-events:auto}
.scrim{position:absolute;inset:0;background:var(--scrim);animation:fadeIn .25s var(--ease) both}
.scrim.out{animation:fadeOut .2s var(--ease) both}
.sheet{position:absolute;inset-inline:0;bottom:0;max-height:92%;background:var(--card);border-radius:var(--r-box) var(--r-box) 0 0;overflow:hidden;padding:0 0 calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;animation:sheetIn .38s var(--ease-dec) both}
.sheet.out{animation:sheetOut .22s var(--ease-acc) both}
/* بالای Drawer یک خط آبی در تمام عرض ؛ دستگیره فقط محدوده نامرئی کشیدن و بستن است */
.sheet::before{content:"";position:absolute;top:0;inset-inline:0;height:5px;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 45%,#8EC5FF),var(--primary));z-index:1}
.sheet-handle{height:22px;flex:none;touch-action:none;cursor:grab}
.sheet-body{overflow-y:auto;padding:4px 20px 4px;display:flex;flex-direction:column;gap:14px}
.sheet-title{font-size:calc(19px*var(--fs));line-height:calc(30px*var(--fs));font-weight:700}
.dialog{position:absolute;inset:0;margin:auto;width:min(340px,calc(100% - 48px));height:fit-content;background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;animation:dialogIn .3s var(--ease-dec) both}
.dialog.out{animation:fadeOut .15s both}
.dialog .d-icon{align-self:center;color:var(--primary)}
.dialog-actions{display:flex;justify-content:flex-end;gap:4px;margin-top:6px}
.menu{position:absolute;min-width:190px;background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:8px 0;box-shadow:var(--shadow-3);animation:menuIn .2s var(--ease-dec) both;transform-origin:top left}
.menu button{width:100%;display:flex;align-items:center;gap:12px;height:48px;padding-inline:14px 20px;font-size:calc(14.5px*var(--fs));position:relative;overflow:hidden}
.menu button.danger{color:var(--error)}
.snackbar{position:absolute;inset-inline:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--inverse-surface);color:var(--inverse-on-surface);border-radius:12px;min-height:48px;padding:8px 8px 8px 16px;padding-inline-start:16px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-3);animation:snackIn .3s var(--ease-dec) both;font-size:calc(14px*var(--fs));line-height:calc(22px*var(--fs))}
.app:not(.has-nav) .snackbar{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.app.has-actionbar .snackbar{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.snackbar .sn-text{flex:1;padding-block:6px}
.snackbar .btn-text{color:var(--inverse-primary);height:40px}
.snackbar.out{animation:fadeOut .2s both}
.offline-bar{position:relative;flex:none;z-index:30;background:var(--inverse-surface);color:var(--inverse-on-surface);font-size:calc(12.5px*var(--fs));line-height:calc(18px*var(--fs));padding:5px 12px;display:flex;align-items:center;justify-content:center;gap:6px}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes sheetIn{from{transform:translateY(100%)}}
@keyframes sheetOut{to{transform:translateY(100%)}}
@keyframes dialogIn{from{opacity:0;transform:scale(.92)}}
@keyframes menuIn{from{opacity:0;transform:scale(.9)}}
@keyframes snackIn{from{opacity:0;transform:translateY(12px)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* skeleton, empty, pull to refresh */
.sk{background:linear-gradient(90deg,var(--sc) 20%,var(--sc-high) 40%,var(--sc) 60%);background-size:300% 100%;animation:sk 1.3s linear infinite;border-radius:10px}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
.sk-card{height:132px;border-radius:var(--r-box)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px}
.empty-art{width:72px;height:72px;border-radius:var(--r-box);display:grid;place-items:center;background:var(--blue-bg);color:var(--blue);margin-bottom:6px}
.empty-art .icon{font-size:36px}
/* حالت خالی : اشاره به دکمه شناور پایین صفحه ( در RTL سمت چپ است ) */
.empty-hint{display:flex;align-items:flex-end;gap:4px;margin-top:10px;font-size:calc(13px*var(--fs));line-height:calc(20px*var(--fs));font-weight:600;color:var(--primary)}
/* arrow_downward چرخیده ؛ فلش مورب در زیرمجموعه فونت آیکن نیست */
.empty-hint .icon{font-size:26px;transform:rotate(45deg);animation:hintBob 1.6s var(--ease) infinite}
@keyframes hintBob{50%{transform:rotate(45deg) translateY(5px)}}
.ptr{position:absolute;top:0;inset-inline:0;display:flex;justify-content:center;z-index:1;pointer-events:none;transform:translateY(-60px)}
.ptr-dot{width:40px;height:40px;border-radius:50%;background:var(--sc-lowest);box-shadow:var(--shadow-3);display:grid;place-items:center;color:var(--primary)}
.ptr.spinning .icon{animation:spin .8s linear infinite}

/* stepper */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:32px 1fr;gap:12px;position:relative;padding-bottom:18px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;inset-inline-start:15px;top:32px;bottom:0;width:2px;background:var(--outline-variant)}
.step:last-child::before{display:none}
.step.done::before{background:var(--tertiary)}
.step-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--outline-variant);color:var(--on-surface-variant);background:var(--card)}
.step.done .step-dot{background:var(--tertiary);border-color:var(--tertiary);color:var(--surface)}
.step.current .step-dot{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 16%,transparent)}
.step.fail .step-dot{background:var(--error);border-color:var(--error);color:var(--surface)}
.step-dot .icon{font-size:18px}
.step-body{padding-top:4px;display:flex;flex-direction:column}
.step.done .step-body,.step.done .step-body .muted{color:var(--green)}

/* splash */
#scr-splash{align-items:center;justify-content:center;gap:18px;background:var(--card)}
.splash-foot{position:absolute;bottom:40px;inset-inline:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.lin{width:120px;height:4px;border-radius:2px;background:var(--secondary-container);overflow:hidden;position:relative}
/* نوار با transform حرکت می کند ( روی GPU ؛ جابجایی right/left هر فریم را روی ترد اصلی می کشید ) . صفحه راست به چپ است :
   از بیرون سمت راست ( ۱۰۰٪ عرض خود نوار ) تا بیرون سمت چپ ( ۲۵۰٪ = عرض کامل ظرف ) */
.lin::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:40%;background:var(--primary);border-radius:2px;animation:lin 1.1s var(--ease) infinite}
@keyframes lin{from{transform:translateX(100%)}to{transform:translateX(-250%)}}
@keyframes markIn{from{opacity:0;transform:scale(.7) rotate(-12deg)}}
.lin-det{height:6px;border-radius:3px;background:var(--secondary-container);overflow:hidden;width:100%}
.lin-det > i{display:block;height:100%;width:0;background:var(--primary);border-radius:3px;transition:width .2s linear}

/* welcome: white page, hospital logo + name, illustration, login form, registration link, contact box.
   The page is exactly the phone's height and nothing scrolls: the illustration takes the leftover space (capped,
   hidden when too small), whatever is left after the cap goes above the contact box, so that box always sits at the
   bottom of the page; the scroll container stays only as a fallback for the largest text size */
.screen.welcome{background:var(--card)}
.wl{min-height:100%;display:flex;flex-direction:column;gap:14px;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(12px + env(safe-area-inset-bottom,0px))}
.wl-brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
/* لوگو از تنظیمات می آید و شکلش معلوم نیست : کادر مربع ثابت و contain ، نه کشیده می شود نه صفحه را جابجا می کند */
.hosp-logo{width:64px;height:64px;object-fit:contain;flex:none;background:#FFFFFF;border-radius:14px;padding:5px;box-shadow:0 0 0 1px var(--card-border)}
.wl-name{font-size:calc(17px*var(--fs));line-height:calc(26px*var(--fs));font-weight:800;text-wrap:balance}
/* تصویر در فضای باقی مانده کوچک و بزرگ می شود ؛ خود svg مطلق است تا اندازه اش ارتفاع صفحه را زیاد نکند */
.wl-art{flex:1 1 0;min-height:0;max-height:235px;position:relative;container-type:size}
.wl-art svg{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:300px;display:block}
@container (max-height:80px){.wl-art svg{visibility:hidden}}
.wl-form{display:flex;flex-direction:column;gap:12px}
.wl-register{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:-6px;font-size:calc(14px*var(--fs));line-height:calc(22px*var(--fs))}
.wl-register .btn-text{height:40px;padding-inline:8px}
/* illustration */
.ill-blob{fill:var(--blue-bg)}
.ill-ground{fill:color-mix(in srgb,var(--on-surface) 9%,transparent)}
.ill-device{fill:#1D2740}
.ill-screen{fill:var(--card)}
.ill-blue{fill:var(--primary)}
.ill-blue-soft{fill:var(--blue-bg)}
.ill-line{fill:var(--sc-highest)}
.ill-line-strong{fill:var(--on-surface-variant);opacity:.45}
.ill-input{fill:var(--card);stroke:var(--primary);stroke-width:1.6}
.ill-dot{fill:var(--on-surface)}
.ill-white{fill:var(--on-primary)}
.ill-green{fill:#2FA36B}
.ill-teal{fill:#14A392}
.ill-amber{fill:#F2A93B}
.ill-check{fill:none;stroke:#FFFFFF;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ill-phone{animation:floatY 3.4s ease-in-out infinite}
.ill-float{animation:floatY 4.2s ease-in-out infinite}
.ill-float.f2{animation-duration:3.6s;animation-delay:-1.4s}
.ill-float.f3{animation-duration:5s;animation-delay:-2.2s}
.ill-badge{transform-box:fill-box;transform-origin:center;animation:badgePulse 2.4s ease-in-out infinite}
.ill-cursor{fill:var(--primary);animation:cursorBlink 1s steps(1) infinite}
.ill-dot{opacity:0;animation:typeDot 3.4s infinite}
.ill-dot.d2{animation-delay:.25s}.ill-dot.d3{animation-delay:.5s}.ill-dot.d4{animation-delay:.75s}
@keyframes floatY{50%{transform:translateY(-6px)}}
@keyframes badgePulse{50%{transform:scale(1.1)}}
@keyframes cursorBlink{50%{opacity:0}}
@keyframes typeDot{0%,6%{opacity:0}12%,82%{opacity:1}92%,100%{opacity:0}}
.splash-name{padding-inline:24px;text-align:center;font-size:calc(19px*var(--fs));line-height:calc(28px*var(--fs));font-weight:800;text-wrap:balance}
.splash-logo{width:88px;height:88px;object-fit:contain;background:#FFFFFF;border-radius:20px;padding:8px;box-shadow:0 0 0 1px var(--card-border);animation:markIn .7s var(--ease-dec) both}

/* OTP */
.otp{display:flex;gap:10px;justify-content:center;direction:ltr}
.otp input{width:52px;height:60px;border-radius:10px;border:1px solid var(--outline);background:transparent;text-align:center;font-size:calc(26px*var(--fs));font-weight:700;outline:none;caret-color:var(--primary);transition:border-color .15s,box-shadow .15s,background .15s}
.otp input:focus{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.otp input{background:var(--card)}
.otp input.filled{background:var(--blue-bg);border-color:transparent;color:var(--blue)}
.otp.error input{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
.otp.shake{animation:shake .4s}
.otp-art{width:72px;height:72px;border-radius:18px;background:var(--blue-bg);color:var(--blue);display:grid;place-items:center}
.otp-art .icon{font-size:36px}

/* update */
#scr-update{align-items:center;justify-content:center;padding:32px;text-align:center;gap:16px}
.upd-art{width:112px;height:112px;border-radius:24px;background:var(--primary-container);color:var(--on-primary-container);display:grid;place-items:center}
.upd-art .icon{font-size:52px;animation:bob 1.6s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.ver{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:4px 12px;font-weight:600}

/* home */
.alert-card{border-radius:var(--r-box);padding:12px 14px;display:flex;gap:12px;align-items:center;border:1px solid color-mix(in srgb,currentColor 20%,transparent);box-shadow:var(--shadow-card)}
.alert-card .icon{font-size:26px}
.alert-card .ac-body{flex:1;min-width:0}
/* موجودی کافی کیف پول در باکس پرداخت */
.ac-wallet{display:flex;align-items:center;gap:4px;margin-top:6px;padding-top:6px;border-top:1px dashed color-mix(in srgb,currentColor 30%,transparent);font-size:calc(12.5px*var(--fs));line-height:calc(18px*var(--fs));font-weight:600}
.ac-wallet .icon{font-size:16px}
/* باکس پرداخت : چیدمان عمودی و دکمه زیر متن */
.pay-alert{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
.pay-alert-head{display:flex;align-items:center;gap:12px}
.pay-alert-text{font-size:calc(13px*var(--fs));line-height:calc(22px*var(--fs));text-align:justify}
.pay-alert-amount{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px dashed color-mix(in srgb,currentColor 30%,transparent);font-size:calc(13px*var(--fs))}
.pay-alert-amount b{font-size:calc(15px*var(--fs));font-weight:800}
.pay-alert .ac-wallet{margin-top:0;padding-top:0;border-top:0}
.pay-alert .btn{height:44px}
.pay-alert .btn-sm{height:32px;margin-top:-4px}
/* پنجره پرداخت : پیشنهاد استعلام پیش از پرداخت دوباره */
.inq-warn{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-box);background:var(--error-container);color:var(--on-error-container)}
.inq-warn p{font-size:calc(13px*var(--fs));line-height:calc(22px*var(--fs));text-align:justify}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick button{border-radius:var(--r-box);padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:start;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);min-height:104px}
.quick button .li-lead{width:40px;height:40px}
.quick .q-primary{background:var(--primary);color:var(--on-primary);border-color:transparent;box-shadow:0 4px 12px -8px color-mix(in srgb,var(--primary) 70%,transparent)}
/* home header */
.home-bar{background:var(--hero)!important;color:var(--on-hero);box-shadow:none!important}
.home-bar .topbar-title small{color:color-mix(in srgb,var(--on-hero) 78%,transparent)}
.home-band{height:64px;background:var(--hero);border-radius:0 0 20px 20px}
.home-content{margin-top:-56px;position:relative}
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sum{position:relative;overflow:hidden;border-radius:var(--r-inner);padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.sum b{font-size:calc(18px*var(--fs));line-height:calc(26px*var(--fs));font-weight:800}
.sum span.t-label-s{color:var(--on-surface-variant)}
.sum + .sum::before{content:"";position:absolute;inset-inline-start:-2px;top:14px;bottom:14px;width:1px;background:var(--card-border)}
/* رنگ یکدست به جای opacity : opacity لایه جدا می سازد و بررسی کنتراست ، زمینه دکمه را نمی بیند */
.quick .q-primary .q-sub{color:color-mix(in srgb,var(--on-primary) 88%,var(--primary))}
.quick .q-primary .li-lead{background:color-mix(in srgb,var(--on-primary) 18%,transparent);color:var(--on-primary)}
.milestone{display:flex;align-items:center;gap:14px;border-radius:var(--r-box);box-shadow:var(--shadow-card);padding:14px 16px;background:var(--green-bg);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 22%,transparent)}
.milestone .tile{width:48px;height:48px;border-radius:10px;background:var(--card);color:var(--green)}
.milestone b{font-size:calc(26px*var(--fs));line-height:calc(34px*var(--fs));font-weight:800}
.milestone-days{font-variant-numeric:proportional-nums;letter-spacing:0}

/* request cards */
.rcard{--accent:var(--outline-variant);position:relative;overflow:hidden;background:var(--card);border:1px solid var(--card-border);border-inline-start:3px solid var(--accent);box-shadow:var(--shadow-card);border-radius:var(--r-box);padding:14px 16px;display:flex;flex-direction:column;gap:8px;text-align:start;width:100%;animation:rise .35s var(--ease-dec) both}
.rcard[data-tone="s-warn"]{--accent:var(--warn)}
.rcard[data-tone="s-info"]{--accent:var(--primary)}
.rcard[data-tone="s-review"]{--accent:var(--teal)}
.rcard[data-tone="s-ok"]{--accent:var(--tertiary)}
.rcard[data-tone="s-error"]{--accent:var(--error)}
.rcard-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* کارت درخواست : دکمه باز کردن کل کارت را می پوشاند و دکمه پرداخت جدا روی آن است ( دکمه داخل دکمه نیست ) */
.rcard-open{position:absolute;inset:0;z-index:0;border-radius:inherit}
.rcard > :not(.rcard-open):not(.ripple){position:relative;z-index:1;pointer-events:none}
.rcard > .btn{pointer-events:auto}
.rcard-go{font-size:calc(22px*var(--fs));color:var(--on-surface-variant)}
/* تیکتی که کارشناس پاسخ داده و منتظر بیمار است */
.rcard-new{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;font-size:calc(12px*var(--fs));font-weight:700;color:var(--error)}
.new-dot{width:8px;height:8px;border-radius:50%;background:var(--error);display:inline-block;flex:none}
/* کارت مینیمال : موضوع ( تیکت ) ، متن دو خطی ، یک خط اطلاعات و ردیف مبلغ ( درخواست ) */
.rcard-subject{font-size:calc(15px*var(--fs));line-height:calc(24px*var(--fs));font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard.is-new .rcard-subject{font-weight:800}
.rcard-text{font-size:calc(14px*var(--fs));line-height:calc(23px*var(--fs));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard-text b{font-weight:600;color:var(--on-surface-variant)}
.rcard-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:calc(12.5px*var(--fs));line-height:calc(18px*var(--fs));color:var(--on-surface-variant)}
.meta-item{display:inline-flex;align-items:center;gap:4px;min-width:0;font-variant-numeric:proportional-nums}
.meta-item .icon{font-size:16px}
.rcard-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:2px;padding-top:10px;border-top:1px solid var(--card-border);font-size:calc(13px*var(--fs));line-height:calc(20px*var(--fs))}
.rcard-foot b{font-size:calc(15px*var(--fs));font-weight:700}
.rcard-pay{font-weight:600;color:var(--on-surface-variant)}
.rcard-pay.is-paid{color:var(--green)}
.rcard-pay.is-failed{color:var(--error)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.answer{border-radius:var(--r-box);box-shadow:var(--shadow-card);padding:16px;background:var(--tertiary-container);color:var(--on-tertiary-container);display:flex;flex-direction:column;gap:8px}
.reject{border-radius:var(--r-box);box-shadow:var(--shadow-card);padding:16px;background:var(--error-container);color:var(--on-error-container);display:flex;flex-direction:column;gap:6px}
.files{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.file{position:relative;aspect-ratio:1;max-width:100%;border-radius:var(--r-inner);overflow:hidden;background:var(--sc-high);display:flex;flex-direction:column;justify-content:flex-end}
.file-img{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 9px,color-mix(in srgb,var(--on-surface) 9%,transparent) 9px 11px) 14px 16px/60% 64% no-repeat,
  linear-gradient(160deg,var(--sc-lowest),var(--sc-high))}
.file-pdf{position:absolute;inset:0;display:grid;place-items:center;background:var(--error-container);color:var(--on-error-container)}
.file-pdf .icon{font-size:40px}
.file-cap{position:relative;font-size:calc(12px*var(--fs));line-height:calc(16px*var(--fs));padding:4px 6px;background:color-mix(in srgb,var(--inverse-surface) 72%,transparent);color:var(--inverse-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:left}
.file-x{position:absolute;top:0;inset-inline-end:0;width:40px;height:40px;display:grid;place-items:center;color:var(--inverse-on-surface);z-index:2}
.file-x::before{content:"";position:absolute;inset:6px;border-radius:50%;background:color-mix(in srgb,var(--inverse-surface) 75%,transparent)}
.file-x .icon{font-size:18px;position:relative}
.file-prog{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 55%,transparent);font-weight:700;font-size:calc(13px*var(--fs));z-index:1}
/* فرم درخواست : دکمه های « دیدن » و « ویرایش » زیر هر عکس ؛ ضربه روی خود عکس هم آن را باز می کند */
.file-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.file-open{position:absolute;inset:0;z-index:1;border-radius:inherit}
/* اگر دو دکمه کنار هم جا نشوند ( گوشی باریک یا متن بزرگ ) ، دکمه دوم به خط بعد می رود و متنش بریده نمی شود */
.file-acts{display:flex;flex-wrap:wrap;gap:6px}
.file-act{position:relative;overflow:hidden;flex:1 0 auto;height:36px;padding-inline:4px;border-radius:8px;border:1px solid var(--card-border);background:var(--sc-low);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:calc(12.5px*var(--fs));font-weight:600;white-space:nowrap}
.file-act svg{width:17px;height:17px;flex:none}
.file-act .icon{font-size:17px}
/* نوار فایل های پیام تیکت : کاشی کوچک ، ویرایش یک دکمه گرد در گوشه دیگر عکس */
.file-ed{position:absolute;top:0;inset-inline-start:0;width:34px;height:34px;display:grid;place-items:center;color:var(--inverse-on-surface);z-index:2}
.file-ed::before{content:"";position:absolute;inset:4px;border-radius:50%;background:color-mix(in srgb,var(--inverse-surface) 75%,transparent)}
.file-ed .icon{font-size:16px;position:relative}
.attach-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.attach-row button{position:relative;overflow:hidden;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--primary) 45%,transparent);background:color-mix(in srgb,var(--blue-bg) 45%,transparent);padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:calc(13px*var(--fs));font-weight:600;color:var(--primary)}

/* chat */
.chat{display:flex;flex-direction:column;gap:6px;padding:12px 12px 16px}
.day{align-self:center;font-size:calc(12px*var(--fs));color:var(--on-surface-variant);background:var(--sc);border-radius:8px;padding:2px 10px;margin:10px 0 4px}
.bubble{max-width:82%;padding:10px 14px 6px;border-radius:14px;display:flex;flex-direction:column;gap:4px;animation:rise .3s var(--ease-dec) both}
.bubble.me{align-self:flex-start;background:var(--primary);color:var(--on-primary);border-start-start-radius:4px;box-shadow:0 3px 8px -6px color-mix(in srgb,var(--primary) 70%,transparent)}
.bubble.them{align-self:flex-end;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);border-start-end-radius:4px}
.bubble.me .file-cap{background:rgba(0,0,0,.45);color:#fff}
.bubble .who{font-size:calc(12px*var(--fs));font-weight:700;color:var(--primary)}
.bubble .meta{align-self:flex-end;display:flex;gap:4px;align-items:center;font-size:calc(12px*var(--fs));color:var(--on-surface-variant)}
.bubble.me .meta{color:color-mix(in srgb,var(--on-primary) 85%,var(--primary))}
.bubble .meta .icon{font-size:15px}
.composer{flex:none;display:flex;align-items:flex-end;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--card-border)}
.composer textarea{flex:1;resize:none;border:0;outline:none;background:var(--sc);border-radius:24px;padding:12px 16px;max-height:120px;min-height:48px;font-size:calc(15px*var(--fs));line-height:calc(24px*var(--fs))}
.send{width:48px;height:48px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:none;position:relative;overflow:hidden}
.send .icon{transform:scaleX(-1)}
.closed-note{flex:none;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));text-align:center;background:var(--sc-low);color:var(--on-surface-variant);font-size:calc(13.5px*var(--fs))}
/* فایل هایی که همراه پیام بعدی تیکت ارسال می شوند */
.composer-files{flex:none;display:flex;gap:8px;overflow-x:auto;padding:8px 12px 0;background:var(--card);border-top:1px solid var(--card-border);scrollbar-width:none}
.composer-files .file{width:72px;flex:none}
.composer-files:not([hidden]) + .composer{border-top:0}

/* نمایش عکس پیوست داخل برنامه */
.viewer{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;animation:fadeIn .2s var(--ease) both}
.viewer-bar{position:absolute;top:0;inset-inline:0;z-index:2;display:flex;justify-content:space-between;padding:calc(6px + env(safe-area-inset-top,0px)) 6px 18px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.viewer-bar .icon-btn{color:#FFFFFF}
.viewer-open{align-self:center;color:#FFFFFF;font-size:calc(13px*var(--fs));font-weight:600;padding:8px 12px;border-radius:8px;background:rgba(20,22,28,.7);text-decoration:none}
.viewer-stage{flex:1;overflow:hidden;display:grid;place-items:center;touch-action:none;color:#FFFFFF}
.viewer-stage > *{grid-area:1/1}
.viewer-stage img{max-width:100%;max-height:100%;display:block;user-select:none;-webkit-user-drag:none;transform-origin:center;transition:transform .2s var(--ease);animation:fadeIn .2s var(--ease) both}
.viewer-stage img.moving{transition:none}
.viewer-error{padding:24px;text-align:center;font-size:calc(14px*var(--fs))}
/* چند عکس : شماره عکس ، دکمه قبلی ( راست ) و بعدی ( چپ ) */
.viewer-count{align-self:center;color:#FFFFFF;font-size:calc(14px*var(--fs));font-weight:600}
.viewer-nav{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#FFFFFF}
.viewer-nav.prev{inset-inline-start:8px}
.viewer-nav.next{inset-inline-end:8px}
.viewer-foot{position:absolute;bottom:0;inset-inline:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.viewer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;pointer-events:auto}
/* زمینه تیره و حاشیه روشن : روی عکس سفید و سیاه هر دو دیده می شود */
.viewer-close{background:rgba(20,22,28,.88);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.viewer-bar .icon-btn,.viewer-count{background:rgba(20,22,28,.7)}
.viewer-count{padding:4px 12px;border-radius:999px}
.viewer-hint{text-align:center;font-size:calc(12px*var(--fs));line-height:calc(18px*var(--fs));color:rgba(255,255,255,.72)}

/* ============ ویرایش عکس پیوست ( بریدن و چرخاندن ) ============ */
.editor{position:absolute;inset:0;background:#0B0D11;color:#FFFFFF;display:flex;flex-direction:column;animation:fadeIn .2s var(--ease) both}
.editor-bar{flex:none;display:flex;align-items:center;gap:2px;padding:calc(4px + env(safe-area-inset-top,0px)) 4px 0}
.editor-bar .icon-btn{color:#FFFFFF}
.editor-title{font-size:calc(18px*var(--fs));line-height:calc(26px*var(--fs));font-weight:700}
.editor-hint{flex:none;margin:2px 16px 0;font-size:calc(13px*var(--fs));line-height:calc(21px*var(--fs));color:rgba(255,255,255,.8);text-align:center}
.editor-stage{flex:1;min-height:0;position:relative;overflow:hidden;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}
.editor-stage > *{grid-area:1/1}
.editor-frame{position:relative;direction:ltr}
.editor-frame canvas{display:block;width:100%;height:100%}
/* بیرون کادر تیره می شود ( سایه بزرگ که لبه صحنه آن را می برد ) */
.crop-box{position:absolute;outline:2px solid #FFFFFF;box-shadow:0 0 0 100vmax rgba(0,0,0,.6);cursor:move}
.crop-box::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .15s;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px) 0 0/33.34% 100%,linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px) 0 0/100% 33.34%}
.editor.dragging .crop-box::before{opacity:1}
/* دستگیره ها : جای لمس بزرگ ( 52 پیکسل گوشه ها ) و نشانه سفید و ضخیم */
.crop-h{position:absolute;z-index:1}
.h-nw,.h-ne,.h-sw,.h-se{width:52px;height:52px;z-index:2}
.h-nw{left:-26px;top:-26px;cursor:nwse-resize}
.h-ne{right:-26px;top:-26px;cursor:nesw-resize}
.h-sw{left:-26px;bottom:-26px;cursor:nesw-resize}
.h-se{right:-26px;bottom:-26px;cursor:nwse-resize}
.h-nw::before,.h-ne::before,.h-sw::before,.h-se::before{content:"";position:absolute;width:26px;height:26px;border:0 solid #FFFFFF;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
.h-nw::before{left:21px;top:21px;border-left-width:5px;border-top-width:5px}
.h-ne::before{right:21px;top:21px;border-right-width:5px;border-top-width:5px}
.h-sw::before{left:21px;bottom:21px;border-left-width:5px;border-bottom-width:5px}
.h-se::before{right:21px;bottom:21px;border-right-width:5px;border-bottom-width:5px}
.h-n,.h-s{left:26px;right:26px;height:40px;cursor:ns-resize}
.h-n{top:-20px}
.h-s{bottom:-20px}
.h-e,.h-w{top:26px;bottom:26px;width:40px;cursor:ew-resize}
.h-w{left:-20px}
.h-e{right:-20px}
.h-n::before,.h-s::before,.h-e::before,.h-w::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#FFFFFF;border-radius:3px;box-shadow:0 0 2px rgba(0,0,0,.7)}
.h-n::before,.h-s::before{width:30px;height:5px}
.h-e::before,.h-w::before{width:5px;height:30px}
.editor-tools{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 16px 0}
.editor-tool{position:relative;overflow:hidden;min-height:52px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.12);color:#FFFFFF;display:flex;align-items:center;justify-content:center;gap:8px;font-size:calc(14px*var(--fs));line-height:calc(20px*var(--fs));font-weight:600}
.editor-tool svg{width:24px;height:24px;flex:none}
.editor-tool[disabled]{opacity:.4;pointer-events:none}
.editor-actions{flex:none;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.editor-actions .btn{flex:1}
.editor-cancel{color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.editor-ok{display:inline-flex;align-items:center;gap:6px}
.editor.busy .editor-stage,.editor.busy .editor-tools{pointer-events:none}

/* wallet */
.balance{border-radius:var(--r-box);padding:20px;background:var(--hero);color:var(--on-hero);box-shadow:0 4px 12px -8px color-mix(in srgb,var(--hero) 70%,transparent);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.balance::after{content:"";position:absolute;width:180px;height:180px;border-radius:0 70% 0 70%;background:color-mix(in srgb,var(--on-hero) 10%,transparent);inset-inline-start:-50px;bottom:-70px;transform:rotate(-8deg)}
.balance b{font-size:calc(32px*var(--fs));line-height:calc(44px*var(--fs));font-weight:800}
.balance-sub{color:color-mix(in srgb,var(--on-hero) 88%,var(--hero))}
.balance-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{border-radius:var(--r-box);background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:calc(16px*var(--fs));font-weight:700}
.month{font-size:calc(12.5px*var(--fs));font-weight:700;color:var(--on-surface-variant);padding:2px 4px 0;margin-bottom:-6px}
/* جمع پرداختی ها و برگشتی ها : یک کارت با دو ستون */
.wallet-stats{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-box);box-shadow:var(--shadow-card)}
.wallet-stats > div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;min-width:0}
.wallet-stats > div + div{border-inline-start:1px solid var(--card-border)}
.wallet-stats span{font-size:calc(12.5px*var(--fs));line-height:calc(18px*var(--fs));color:var(--on-surface-variant)}
.wallet-stats b{font-size:calc(16px*var(--fs));line-height:calc(24px*var(--fs));font-weight:700;white-space:nowrap}
.wallet-stats small{font-size:calc(12px*var(--fs));font-weight:500;color:var(--on-surface-variant);margin-inline-start:4px}
/* تراکنش ها : سطرهای ساده با خط جداکننده ؛ برداشت قرمز ، واریز و برگشت سبز */
.tx-list{background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-box);box-shadow:var(--shadow-card);padding-inline:14px}
.tx{display:flex;align-items:center;gap:12px;padding-block:12px}
.tx + .tx{border-top:1px solid var(--card-border)}
.tx-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.tx-ic .icon{font-size:18px}
.tx-in .tx-ic{background:var(--green-bg);color:var(--green)}
.tx-out .tx-ic{background:var(--rose-bg);color:var(--rose)}
.tx-body{flex:1;min-width:0;display:flex;flex-direction:column}
.tx-title{font-size:calc(14px*var(--fs));line-height:calc(22px*var(--fs));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-meta{font-size:calc(12px*var(--fs));line-height:calc(18px*var(--fs));color:var(--on-surface-variant)}
.tx-end{flex:none;display:flex;flex-direction:column;align-items:flex-end}
.tx-amt{font-size:calc(14.5px*var(--fs));line-height:calc(22px*var(--fs));font-weight:700;direction:ltr;unicode-bidi:isolate}
.tx-kind{font-size:calc(12px*var(--fs));line-height:calc(17px*var(--fs));font-weight:600}
.tx-in .tx-amt,.tx-in .tx-kind{color:var(--green)}
.tx-out .tx-amt,.tx-out .tx-kind{color:var(--error)}

/* record */
.idcard{border-radius:var(--r-box);background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);padding:18px;display:flex;flex-direction:column;gap:14px}
.idcard-top{display:flex;align-items:center;gap:14px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fact{background:var(--sc-low);border:1px solid var(--card-border);border-radius:var(--r-inner);padding:8px 10px;display:flex;flex-direction:column;gap:0;min-width:0}
.fact span{font-size:calc(12px*var(--fs));color:var(--on-surface-variant)}
.fact b{font-size:calc(15px*var(--fs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.organs{display:flex;flex-wrap:wrap;gap:6px}
/* دکمه متنی « ویرایش شماره » صفحه کد پیامکی */
.mask-btn{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-weight:600;font-size:calc(13px*var(--fs))}
.med{display:flex;flex-direction:column;gap:2px;padding-block:10px}
.med + .med{border-top:1px solid var(--outline-variant)}

/* install */
.install{border-radius:var(--r-box);padding:14px 16px;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);display:flex;gap:12px;align-items:center}
.ios-steps{counter-reset:s;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.ios-steps li{counter-increment:s;display:flex;gap:12px;align-items:center}
.ios-steps li::before{content:counter(s,persian);width:30px;height:30px;border-radius:50%;background:var(--primary-container);color:var(--on-primary-container);display:grid;place-items:center;font-weight:700;flex:none}
.result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px}
.result-art{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;animation:markIn .5s var(--ease-dec) both}
.result-art .icon{font-size:56px}
.receipt{width:100%;border-radius:var(--r-box);background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);padding:8px 16px;text-align:start}

.li,.quick button{position:relative;overflow:hidden}
.switch{appearance:none;-webkit-appearance:none;width:52px;height:32px;border-radius:16px;background:var(--sc-highest);border:2px solid var(--outline);position:relative;flex:none;cursor:pointer;transition:background .2s,border-color .2s;margin:0}
.switch::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--outline);top:6px;right:6px;transition:all .2s var(--ease)}
.switch:checked{background:var(--primary);border-color:var(--primary)}
.switch:checked::after{width:24px;height:24px;top:2px;right:22px;background:var(--on-primary)}
.chat.static .bubble:not(:last-child){animation:none}
/* پاسخی که همان لحظه ( کانال زنده ) رسیده */
.chat.static .bubble.live-new{animation:rise .35s var(--ease-dec) both}
.med-name{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700}
.med-dose{font-size:calc(13px*var(--fs));color:var(--on-surface-variant)}
.danger-text{color:var(--error)!important}

/* ============ Utilities ( به جای style داخل html ) ============ */
.grow{flex:1;min-width:0}
.pre{white-space:pre-line}
.wrap{white-space:normal}
.center{text-align:center}
.justify{text-align:justify}
.stack-8{display:flex;flex-direction:column;gap:8px}
.error-text{color:var(--error)}
.ok-text{color:var(--green)}
.ltr-value{direction:ltr;text-align:right}
.scroll-col{display:flex;flex-direction:column}
.tile.on-card{background:var(--card)}
.c-primary{color:var(--primary)}
.c-warn{color:var(--warn)}
.c-error{color:var(--error)}
/* اسکلت های بارگذاری */
.sk-more{height:88px;border-radius:var(--r-box)}
.sk-hero{height:150px;border-radius:var(--r-box)}
.sk-receipt{height:118px;border-radius:var(--r-box)}
.sk-button{height:48px;border-radius:24px}
.sk-line{display:inline-block;width:110px;height:14px;vertical-align:middle}
.sk-bubble{height:64px;width:65%;border-radius:14px}
.sk-bubble.them{align-self:flex-end}
.sk-bubble.me{height:52px;width:55%}
/* صفحه جزئیات درخواست */
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.block-title{display:flex;gap:6px;align-items:center}
.answer-meta{color:color-mix(in srgb,currentColor 85%,transparent)}
.card-sub{margin-top:4px;padding-top:10px;border-top:1px solid var(--card-border);font-size:calc(13px*var(--fs));line-height:calc(20px*var(--fs));font-weight:700;color:var(--on-surface-variant)}
/* خانه */
.sum-card{padding:10px 6px}
.quick .t-title-m{display:block}
.account-mobile{direction:ltr;text-align:right}
.home-bar{padding-inline:20px 6px}
.home-bar .topbar-title{padding:0}
/* پرداخت و کیف پول */
.sheet-sub{margin-top:-8px}
.receipt.flat{background:var(--surface);box-shadow:none;padding:2px 16px}
.kv-total dd{font-size:calc(17px*var(--fs))}
.pay-wallet{background:var(--surface);border-radius:var(--r-box);cursor:pointer}
.secure-note{display:flex;gap:4px;justify-content:center;align-items:center}
.result-art.ok{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.result-art.fail{background:var(--error-container);color:var(--on-error-container)}
.result-text{max-width:320px}
.result-actions{display:flex;flex-direction:column;gap:10px;width:100%}
.balance-unit{font-size:calc(15px*var(--fs));font-weight:600}
.balance-note{max-width:270px}
/* پرونده */
.facts .fact.wide{grid-column:1/-1}
.milestone .tile .icon{font-size:28px}
.stat{text-align:start}
.ios-steps .icon{vertical-align:-5px}
.install .icon-btn{width:44px;height:44px}
.bubble .files{grid-template-columns:repeat(2,96px)}
.btn-logout{border-color:var(--outline-variant)}
/* تنظیمات : اندازه متن و تماس با مرکز */
.fs-seg .fs-a{font-weight:700;line-height:1;font-size:13px}
.fs-seg .fs-a.l{font-size:15px}
.fs-seg .fs-a.xl{font-size:17px}
.contact-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-box);background:var(--surface)}
.contact-text{font-size:calc(14px*var(--fs));line-height:calc(22px*var(--fs))}
.contact-text .phone,.wl-contact .phone{font-weight:700;white-space:nowrap}
/* صفحه ورود : شماره تماس مرکز ( همان متن صفحه ورود پنل وب ) در کادر پایین صفحه */
.wl-contact{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-box);background:var(--surface);color:var(--on-surface-variant);font-size:calc(13px*var(--fs));line-height:calc(21px*var(--fs))}
.wl-contact .icon{color:var(--teal)}
/* ثبت نام : جنسیت با دکمه رادیویی واقعی ( کیبورد و صفحه خوان ) به شکل دو دکمه */
.choice{display:flex;align-items:center;gap:8px;min-height:56px;padding:7px 8px;padding-inline-start:16px;border:1px solid var(--outline);border-radius:10px}
.choice-label{flex:1;color:var(--on-surface-variant);font-size:calc(16px*var(--fs));line-height:calc(24px*var(--fs))}
.choice-opt{position:relative}
.choice-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice-opt span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:40px;padding-inline:16px;border-radius:20px;border:1px solid var(--outline-variant);font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.choice-opt input:checked + span{background:var(--primary);border-color:transparent;color:var(--on-primary)}
.choice-opt input:focus-visible + span{outline:3px solid var(--primary);outline-offset:2px}
.choice.error{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
.choice.error .choice-label{color:var(--error)}
.choice.error + .field-support .msg{color:var(--error)}
/* ثبت نام : گروه چند گزینه ای ( ارگان پیوندی ، وضعیت پیوند ) ؛ عنوان بالا و گزینه ها زیر آن ، سه تا در هر سطر */
.choice.stack{flex-direction:column;align-items:stretch;padding:10px 12px 12px}
.choice.stack .choice-label{flex:none}
.choice-opts{display:flex;flex-wrap:wrap;gap:8px}
.choice.stack .choice-opt{flex:1 1 calc(33.333% - 8px)}
.choice.stack .choice-opt span{display:flex;min-width:0;padding-inline:10px;white-space:nowrap}
/* چک باکس : مربع خالی کنار نام که با انتخاب ، تیک می شود ( هر دو حالت هم عرض تا متن جابجا نشود ) */
.choice-opt input[type="checkbox"] + span::before{content:"";flex:none;box-sizing:border-box;width:16px;height:16px;margin-inline-end:8px;border:2px solid var(--outline);border-radius:4px}
.choice-opt input[type="checkbox"]:checked + span::before{width:7px;height:12px;margin-inline:5px 12px;margin-top:-3px;border:solid currentColor;border-width:0 2px 2px 0;border-radius:0;transform:rotate(45deg)}
.reg-desc textarea{min-height:110px}
/* قفل برنامه */
.lock-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-box);background:var(--surface)}
.lock-card .grow{display:flex;flex-direction:column}
.otp.pin input{-webkit-text-security:disc;font-size:30px}
.pin-msg{text-align:center;min-height:calc(18px*var(--fs))}
.lock-screen{gap:16px}
.lock-spin{color:var(--primary)}
/* اثر انگشت ، زنگ اعلان و موبایل فیلد ورود : آیکنشان در فونت آیکن برنامه نیست و به صورت SVG کشیده می شوند */
.bio-ic,.bell-ic{width:22px;height:22px;flex:none}
.phone-ic{width:24px;height:24px}
.field input:focus ~ .field-icon{color:var(--primary)}
.btn .bio-ic{width:20px;height:20px}
.nav-item .badge{top:10px;inset-inline-end:calc(50% - 30px)}
.nav-item .badge.dot{top:14px;inset-inline-end:calc(50% - 20px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============ Real device ============ */
.topbar.tall{height:calc(72px + env(safe-area-inset-top,0px))}
.ptr{top:calc(64px + env(safe-area-inset-top,0px))}
.ptr.tall{top:calc(72px + env(safe-area-inset-top,0px))}
.screen-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:calc(24px + env(safe-area-inset-top,0px)) 28px calc(24px + env(safe-area-inset-bottom,0px))}
#scr-update{padding-top:calc(32px + env(safe-area-inset-top,0px))}
.account-line{display:flex;align-items:center;gap:12px}
.account-line .t-title-m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* خروج از حساب روی کارت حساب خانه */
.logout-btn{width:40px;height:40px;border-radius:10px;background:var(--rose-bg);color:var(--rose)}
/* دکمه تنظیمات روی نوار آبی خانه : زمینه نیمه شفاف تا دکمه بودنش دیده شود */
.hero-btn{width:40px;height:40px;margin-inline-end:6px;color:var(--on-hero);background:color-mix(in srgb,var(--on-hero) 16%,transparent)}

/* ============ Requests ============ */
.files:empty,#requestsMore:empty{display:none}
/* ظرف هایی که با جاوااسکریپت پر می شوند جعبه ای نمی سازند تا کارت های داخلشان همان فاصله بقیه کارت ها را بگیرند */
#homeInstall,#homeRequests,#homeLatest,#homeRecord{display:contents}
.clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
a.file{display:flex}
.file-cap.fa{direction:rtl;text-align:center}
#nrText{min-height:132px}
/* دو ستون تا عکس بزرگ تر دیده شود و دکمه های زیرش جا شوند */
#nrFiles,#ntFiles{grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){
  body{background:var(--page-bg)}
  .app{box-shadow:0 0 0 1px var(--card-border),0 24px 60px -24px rgba(16,36,72,.35)}
}