/* سون‌پارس حسابداری — تم تیره/روشن */
@import url('vendor/vazirmatn.css');
:root{
  /* پالتِ مرکز تلفن، عینِ مقادیرِ خودش (خوانده‌شده از استایلِ زندهٔ 4001).
     نامِ توکن‌ها عمداً دست‌نخورده مانده تا هر ۳۳۶ خطِ پایین و استایلِ
     داخلِ تک‌تکِ صفحه‌ها بدونِ تغییر با تمِ تازه کار کند. */
  /* زمینهٔ خودِ مرکز تلفن #0b1521 است، ولی آنجا تقریباً همه‌جای صفحه را
     کارت پوشانده و دیده نمی‌شود. اینجا صفحه‌های فرم فضای خالیِ زیادی
     دارند و آن سرمه‌ایِ تقریباً سیاه کنارِ فیروزه‌ای بیگانه می‌افتاد.
     ورودی‌ها هم از همین می‌گیرند و مثل چاله دیده می‌شدند. */
  --bg:#08222a; --panel:#17393f; --panel2:#1e4a52;
  --line:rgba(168,214,206,.26);
  --ink:#eaf2f5; --muted:#a1bac0;   /* روی --panel2 که روشن‌ترین سطح است
     سنجیده شد نه روی --panel؛ با #93aeb5 برچسب‌های خاکستری ۴.۱۶:۱ می‌دادند. */
  --brand:#3fd6c4; --brand-d:#2ab5a4; --brand-l:#12343a;
  /* متنی که *روی* --brand می‌نشیند. فیروزه‌ای روشن است، پس سفید روی آن
     نمی‌ماند؛ هر جا brand پس‌زمینه بود، ink تیره می‌آید. */
  --on-brand:#06282b;
  --green:#3fd6a4; --green-l:#123a33; --red:#ff8085; --red-l:#3a1f24;
  --amber:#e9b44c; --amber-l:#3a2f18;
  --green-t:#3fd6a4; --red-t:#ff8085; --amber-t:#e9b44c; --blue-t:#3fd6c4;
  --purple-t:#a99bf0;   /* پیش‌فاکتور — پنجمین نوعِ فاکتور که توکن نداشت
                           و با هگزِ #9CC2FF از پالتِ قدیمی جا مانده بود */
  /* پالتِ نمودارها: شش رنگِ متمایز برای دسته‌های یک نمودار (بانک‌ها،
     هزینه‌ها، مشتریان). پیش از این reports_panel از --violet و --teal
     استفاده می‌کرد که *هیچ‌جا تعریف نشده بودند*، و دو میلهٔ بانک
     background نامعتبر می‌گرفتند و کاملاً نامرئی می‌شدند. */
  --ch-1:#3fd6c4; --ch-2:#8c7be8; --ch-3:#e9b44c;
  --ch-4:#ff8085; --ch-5:#5bc0de; --ch-6:#3fd6a4;
  --ch-n:#6f8f97;   /* «سایر» — خنثی. --muted برای متن ساخته شده و
                       به‌عنوانِ سطحِ نمودار خیلی سنگین می‌افتاد. */
  --radius:14px;
  /* به مرورگر می‌گوید کنترل‌های خودش را هم تیره بکشد: نوارِ اسکرول،
     تقویمِ input[type=date]، چک‌باکس. بدونِ این، منوی جستجو یک نوارِ
     اسکرولِ سفید وسطِ کادرِ تیره داشت. */
  color-scheme:dark;

  /* پوسته: نوارِ بالا، ریلِ کنار و نوارِ وضعیت.
     ⚠️ پوسته پالتِ *خودش* را دارد و نه --panel/--ink را. چون در تمِ
     روشن سبزِ تیره است، هرچه رویش می‌نشیند باید روشن باشد؛ اگر از
     توکن‌های محتوا استفاده می‌کرد، متنِ تیره روی سبزِ تیره گم می‌شد. */
  --shell:#0e2830; --shell-ink:#eaf2f5;
  --shell-2:#1e4a52;          /* سطحِ هاور و کاشیِ فعال */
  --shell-muted:#a1bac0;      /* برچسب‌های ریز زیرِ آیکون‌ها */
  --shell-accent:#3fd6c4;     /* آیکون‌ها و حالتِ فعال */
  --shell-line:rgba(168,214,206,.16);
  --shell-danger:#ff8085;

  /* --- سه‌بعدی: چهار دستورِ ثابت که همه‌جای اپ تکرار می‌شوند --- */
  --edge:inset 0 1px 0 rgba(255,255,255,.07);          /* لبهٔ نوریِ بالا */
  --raise:inset 0 1px 0 rgba(255,255,255,.10),0 -2px 6px rgba(0,0,0,.35);
  --sink:inset 0 1px 3px rgba(0,0,0,.30);              /* فرورفته: ورودی‌ها */
  --lift-1:0 1px 2px rgba(0,0,0,.26),0 6px 18px rgba(0,0,0,.32);
  --lift-2:0 6px 20px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.32);
  --lift-3:0 20px 48px rgba(0,0,0,.62),0 6px 16px rgba(0,0,0,.42);
}
body.light{
  /* روشن‌ها از تیره‌ها مشتق نشده‌اند؛ جداگانه سنجیده‌اند تا روی سفید و روی
     سطحِ #e9f2f0 هر دو ۴.۵:۱ بدهند. */
  --bg:#eef4f3; --panel:#ffffff; --panel2:#e9f2f0;
  --line:rgba(16,60,66,.16);
  --ink:#132227; --muted:#526a71;
  --brand:#0b7568; --brand-d:#08574d; --brand-l:#dcf1ee;
  --on-brand:#ffffff;
  --green:#0e7a5a; --green-l:#dff3ea; --red:#c1352f; --red-l:#fbe7e6;
  --amber:#8a6410; --amber-l:#f7edd8;
  --green-t:#0b6b4e; --red-t:#b32d28; --amber-t:#7d5a0d; --blue-t:#0b7568;
  --purple-t:#5b46c9;
  --ch-1:#0b7568; --ch-2:#5b46c9; --ch-3:#8a6410;
  --ch-4:#c1352f; --ch-5:#1b6d8a; --ch-6:#0e7a5a;
  --ch-n:#9db3b8;

  /* سبزِ تیره، نه سفید — خواستهٔ داوود. مقادیر روی همین زمینه سنجیده
     شده‌اند: سفید ۷.۵:۱ · --shell-muted ۵.۴:۱ · روی سطحِ هاور که
     تیره‌تر است هر دو بالاتر می‌روند. */
  --shell:#0b5f57; --shell-ink:#ffffff;
  --shell-2:#0a5049;
  --shell-muted:#cfeae4;
  --shell-accent:#5fe8d6;
  --shell-line:rgba(255,255,255,.17);
  --shell-danger:#ffbcbc;

  --edge:inset 0 1px 0 rgba(255,255,255,.9);
  --raise:inset 0 1px 0 rgba(255,255,255,.9),0 -1px 4px rgba(16,40,44,.10);
  --sink:inset 0 1px 3px rgba(16,40,44,.12);
  --lift-1:0 1px 2px rgba(16,40,44,.07),0 6px 18px rgba(16,40,44,.09);
  --lift-2:0 6px 20px rgba(16,40,44,.13),0 2px 6px rgba(16,40,44,.09);
  --lift-3:0 20px 48px rgba(16,40,44,.20),0 6px 16px rgba(16,40,44,.13);
}
/* نوارِ اسکرولِ خودِ صفحه از عنصرِ ریشه رنگ می‌گیرد، نه از body. تا وقتی
   color-scheme فقط روی body.light بود، در حالتِ روشن یک نوارِ اسکرولِ
   سیاه کنارِ صفحهٔ سفید می‌ماند. کلاسِ light را header روی <html> هم
   می‌گذارد و footer موقعِ تعویضِ تم هر دو را می‌چرخاند. */
:root.light{ color-scheme:light }

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Vazirmatn,system-ui,Tahoma,sans-serif;background:var(--bg);color:var(--ink);
  font-size:14.5px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:plaintext}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}

.app{display:grid;grid-template-columns:1fr 250px;min-height:100vh}
.sidebar{background:var(--panel);border-inline-start:1px solid var(--line);position:sticky;top:0;
  height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px;justify-content:flex-end;text-align:right}
.brand .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(150deg,var(--brand),var(--brand-d));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
.brand b{font-size:16px;font-weight:800;display:block}.brand small{color:var(--muted);font-size:11px}
.nav{padding:6px 12px;flex:1}
.nav .grp{color:var(--muted);font-size:10.5px;font-weight:700;padding:14px 12px 6px;text-align:right}
.nav a{display:flex;align-items:center;gap:11px;padding:9.5px 13px;border-radius:9px;color:var(--ink);
  font-size:13.5px;font-weight:500;margin-bottom:2px;flex-direction:row-reverse;text-align:right;opacity:.86}
.nav a svg{width:18px;height:18px;opacity:.8;flex-shrink:0}
.nav a:hover{background:var(--panel2);opacity:1}
.nav a.on{background:var(--brand);color:#fff;opacity:1}.nav a.on svg{opacity:1}
.nav a span:first-child{flex:1}
.side-foot{padding:14px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);text-align:center}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--panel);border-bottom:1px solid var(--line);height:60px;display:flex;
  align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:17px;font-weight:700}.topbar .spacer{flex:1}
.chip{display:flex;align-items:center;gap:7px;background:var(--brand-l);color:var(--blue-t);padding:6px 12px;
  border-radius:8px;font-size:12.5px;font-weight:600}
.chip svg{width:15px;height:15px}
.themebtn{display:flex;align-items:center;gap:7px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer}
.themebtn svg{width:15px;height:15px}
.user{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.user .av{width:30px;height:30px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-weight:800;color:#fff}
.content{padding:24px;flex:1}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel2);
  color:var(--ink);padding:8.5px 15px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.13s}
.btn:hover{border-color:var(--brand)}
.btn svg{width:16px;height:16px}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}.btn.pri:hover{background:var(--brand-d)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#2A1E08}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.danger{color:var(--red);border-color:var(--red)}.btn.danger:hover{background:var(--red-l)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--panel2)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.card-h{padding:15px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.card-h h3{font-size:15px;font-weight:700}.card-h .spacer{flex:1}
.card-b{padding:19px}
.grid{display:grid;gap:15px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1050px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}

.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;position:relative}
.kpi .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.kpi .ic svg{width:20px;height:20px}
.kpi .lbl{color:var(--muted);font-size:12.5px;font-weight:600}
.kpi .val{font-size:23px;font-weight:800;margin-top:3px}
.i-blue{background:var(--brand-l);color:var(--blue-t)}.i-green{background:var(--green-l);color:var(--green-t)}
.i-red{background:var(--red-l);color:var(--red-t)}.i-amber{background:var(--amber-l);color:var(--amber-t)}
/* i-violet و i-teal در reports_panel استفاده می‌شدند ولی هیچ‌جا تعریف
   نشده بودند، پس دو کاشیِ آیکون بی‌رنگ و تخت می‌ماندند. */
.i-violet{background:color-mix(in srgb,var(--ch-2) 16%,transparent);color:var(--ch-2)}
.i-teal{background:color-mix(in srgb,var(--ch-5) 16%,transparent);color:var(--ch-5)}

.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);padding:11px 13px;
  border:1px solid var(--line);background:var(--panel2);white-space:nowrap}
.tbl td{padding:11px 13px;border:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tbl tr:hover td{background:var(--panel2)}
.tbl .l{text-align:left}.tbl .c{text-align:center}
.tbl td.num{unicode-bidi:isolate;text-align:center}
.tbl th.l{text-align:center}
.tbl td{text-align:center}
.tbl td svg{width:18px;height:18px;vertical-align:-4px;opacity:.85}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.p-green{background:var(--green-l);color:var(--green-t)}.p-amber{background:var(--amber-l);color:var(--amber-t)}
.p-red{background:var(--red-l);color:var(--red-t)}.p-gray{background:var(--panel2);color:var(--muted)}.p-blue{background:var(--brand-l);color:var(--blue-t)}

.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);opacity:.85;margin-bottom:6px}
.inp{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13.5px;
  background:var(--bg);color:var(--ink)}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.inp::placeholder{color:var(--muted)}
select.inp{cursor:pointer}
.row{display:flex;gap:12px}.row>*{flex:1}

.inv-tbl{width:100%;border-collapse:collapse}
.inv-tbl th{background:var(--panel2);font-size:11.5px;color:var(--muted);font-weight:700;padding:9px 10px;text-align:right;border-bottom:1px solid var(--line)}
.inv-tbl td{padding:5px 7px;border-bottom:1px solid var(--line)}
.inv-tbl input,.inv-tbl select{border:1px solid transparent;background:transparent;width:100%;padding:7px;border-radius:7px;color:var(--ink);font-size:13.5px}
.inv-tbl input:focus,.inv-tbl select:focus{outline:none;background:var(--bg);border-color:var(--brand)}
.inv-tbl select option{background:var(--panel)}
.inv-tbl .x{color:var(--red);background:var(--red-l);border:none;width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:15px}
.inv-tbl th{text-align:center}
.inv-tbl td{text-align:center}
.inv-tbl input{text-align:center}
.inv-tbl select{text-align:center;text-align-last:center}
.inv-tbl select option{text-align:center}
.totbox{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.totrow{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px}
.totrow.grand{border-top:1.5px dashed var(--line);margin-top:8px;padding-top:11px;font-size:17px;font-weight:800;color:var(--blue-t)}

.flash{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:9px}
.flash svg{width:18px;height:18px;flex-shrink:0}
.flash.ok{background:var(--green-l);color:var(--green-t);border:1px solid var(--green)}
.flash.err{background:var(--red-l);color:var(--red-t);border:1px solid var(--red)}
.empty{text-align:center;padding:46px;color:var(--muted)}
.section-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.section-title h2{font-size:19px;font-weight:800}.section-title .spacer{flex:1}
.tag-woo{background:#7F54B3;color:#fff;padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:700}
.tag-man{background:var(--panel2);color:var(--muted);padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:700}
.hint{font-size:12.5px;color:var(--blue-t);background:var(--brand-l);border-radius:10px;padding:11px 14px;margin-bottom:16px;display:flex;gap:9px}
.hint svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}

/* صفحه ورود */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px 30px}
.login-card .logo{width:54px;height:54px;border-radius:14px;background:linear-gradient(150deg,var(--brand),var(--brand-d));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px;margin:0 auto 16px}
.login-card h2{text-align:center;font-size:19px;margin-bottom:4px}
.login-card p{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:24px}

@media print{.sidebar,.topbar{display:none}.app{display:block}.content{padding:0}.card{border:none}}
@media(max-width:880px){.app{grid-template-columns:1fr}.sidebar{display:none}.g4,.g3,.g2{grid-template-columns:1fr}}

/* ---- سربرگ‌های فرم (تب) ---- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:0}
.tab{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:1px solid transparent;border-bottom:none;
  border-radius:9px 9px 0 0;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;background:transparent}
.tab svg{width:16px;height:16px}
.tab:hover{color:var(--ink);background:var(--panel2)}
.tab.on{color:var(--ink);background:var(--panel2);border-color:var(--line);border-bottom:2px solid var(--brand);margin-bottom:-1px}
.pane{display:none}.pane.on{display:block}
.checkrow{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:9px 0;cursor:pointer}
.checkrow input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.tbl input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;-webkit-appearance:checkbox;appearance:auto}
.tbl tr.selrow{cursor:pointer}
.tbl tr.selrow:hover{background:var(--panel2)}
.subhead{font-size:12px;font-weight:700;color:var(--muted);margin:6px 0 10px;letter-spacing:.3px}
.bankrow,.addrrow{display:grid;gap:10px;padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;position:relative}
.delx{position:absolute;top:8px;left:8px;background:var(--red-l);color:var(--red);border:none;width:26px;height:26px;border-radius:7px;cursor:pointer}
.formgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
@media(max-width:760px){.formgrid{grid-template-columns:1fr 1fr}}
.formgrid.two{grid-template-columns:1fr 1fr}
.formgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1300px){.formgrid.four{grid-template-columns:1fr 1fr}}
.span2{grid-column:span 2}.span3{grid-column:span 3}

/* ---- فرم دریافت و پرداخت (راست‌چین: پنل راست) ---- */
.pf-wrap{display:grid;grid-template-columns:210px 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.pf-side{background:var(--panel2);border-inline-start:1px solid var(--line);padding:9px}
.pf-gr{font-size:11px;font-weight:700;margin:11px 6px 4px;color:var(--muted)}
.pf-op{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--ink);margin-bottom:2px}
.pf-op svg{width:16px;height:16px;flex-shrink:0;opacity:.85;color:var(--brand)}
.pf-op:hover{background:var(--panel)}
.pf-op.on{background:var(--brand);color:#fff}.pf-op.on svg{color:#fff;opacity:1}
.pf-op.soon{opacity:.5}
.pf-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.pf-lb{font-size:11px;color:var(--muted);margin-bottom:3px;display:block}
.pf-in{width:100%;height:30px;background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--ink);padding:0 8px;font-size:12.5px}
.pf-in:focus{outline:none;border-color:var(--brand)}
.pf-bt{height:30px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:7px;font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0 10px;white-space:nowrap}
.pf-bt svg{width:14px;height:14px}
.pf-bt:hover{border-color:var(--brand)}
.pf-x{width:28px;height:30px;flex:0 0 28px;border:1px solid var(--line);background:var(--panel2);color:var(--red);border-radius:7px;cursor:pointer;font-size:14px}
.pf-card{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px}
.pf-soonmsg{background:var(--amber-l);color:var(--amber-t);border:1px solid var(--amber);border-radius:9px;padding:10px 13px;font-size:12.5px;font-weight:600;margin-bottom:6px;display:none}
@media(max-width:760px){.pf-wrap{grid-template-columns:1fr}.pf-side{border-inline-start:none;border-bottom:1px solid var(--line)}}

/* ---- پوسته منوی هلو (همه صفحات) ---- */
.hm{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.hm-top{background:var(--brand-d);color:#fff;display:flex;align-items:center;gap:4px;padding:0 14px;height:46px;flex-wrap:wrap;position:sticky;top:0;z-index:30}
.hm-brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15px}
.hm-brand .lg{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--brand-d);display:grid;place-items:center;font-size:15px}
.hm-mnu{padding:7px 12px;border-radius:7px;font-size:13px;cursor:pointer;white-space:nowrap;position:relative}
.hm-mnu:hover{background:rgba(255,255,255,.16)}
.hm-dd{display:none;position:absolute;top:100%;right:0;min-width:235px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.32);padding:6px;z-index:60}
.hm-mnu:hover .hm-dd{display:block}
.hm-dd a,.hm-dd .soon{display:block;padding:9px 13px;font-size:12.5px;color:var(--ink);text-decoration:none;border-radius:7px;cursor:pointer;white-space:nowrap}
.hm-dd a:hover{background:var(--brand);color:#fff}
.hm-dd .soon{color:var(--muted)}
.hm-dd .sep{height:1px;background:var(--line);margin:5px 4px}
.hm-sub{position:relative}
.hm-sub > a.has-fly{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hm-sub > a.has-fly .ar{color:var(--muted);font-size:10px}
.hm-flyout{display:none;position:absolute;right:100%;top:-6px;min-width:220px;max-height:72vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.32);padding:6px;z-index:70}
.hm-sub:hover > .hm-flyout{display:block}
.hm-flyout a,.hm-flyout .soon{display:block;padding:9px 13px;font-size:12.5px;color:var(--ink);text-decoration:none;border-radius:7px;white-space:nowrap}
.hm-flyout a:hover{background:var(--brand);color:#fff}
.hm-flyout .soon{color:var(--muted);cursor:pointer}
.hm-sub .hm-dd2{display:none;position:absolute;top:-7px;right:100%;min-width:215px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.32);padding:6px;z-index:70}
.hm-sub:hover .hm-dd2{display:block}
.hm-dd2 a,.hm-dd2 .soon{display:block;padding:9px 13px;font-size:12.5px;color:var(--ink);text-decoration:none;border-radius:7px;cursor:pointer;white-space:nowrap}
.hm-dd2 a:hover{background:var(--brand);color:#fff}
.hm-dd2 .soon{color:var(--muted)}
.hm-srch{background:rgba(255,255,255,.16);border:none;border-radius:7px;color:#fff;height:30px;padding:0 11px;font-size:12.5px;width:140px}
.hm-srch::placeholder{color:var(--muted)}
.hm-tbtn{background:rgba(255,255,255,.16);border:none;border-radius:7px;color:#fff;height:30px;padding:0 11px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:5px}
.hm-tool{background:var(--panel);border-bottom:1px solid var(--line);display:flex;gap:4px;padding:9px 14px;flex-wrap:wrap}
.hm-ti{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 12px;border-radius:9px;cursor:pointer;color:var(--ink);min-width:64px;text-decoration:none}
.hm-ti:hover{background:var(--panel2)}
.hm-ti i{font-size:22px;color:var(--brand)}
.hm-ti span{font-size:11px;color:var(--muted)}
.hm-shell{flex:1;display:grid;grid-template-columns:96px 1fr;min-height:0}
.hm-side{background:var(--panel);border-inline-start:1px solid var(--line);overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px}
.hm-sb{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 5px;border-radius:10px;color:var(--ink);text-decoration:none;cursor:pointer;text-align:center}
.hm-sb:hover{background:var(--panel2)}
.hm-sb.on{background:var(--brand);color:#fff}
.hm-sb i{font-size:23px;color:var(--brand)}
.hm-sb.on i{color:#fff}
.hm-sb span{font-size:10.5px;line-height:1.3}
.hm-content{display:flex;flex-direction:column;min-width:0;overflow-y:auto}
.hm-pagehead{display:flex;align-items:center;gap:12px;padding:13px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:10}
.hm-pagehead h1{font-size:17px;font-weight:700}.hm-pagehead .spacer{flex:1}
.hm-stat{background:var(--brand-d);color:#fff;display:flex;align-items:center;gap:18px;padding:0 16px;height:32px;font-size:12px;flex-wrap:wrap}
@media(max-width:760px){.hm-shell{grid-template-columns:1fr}.hm-side{border-inline-start:none;border-bottom:1px solid var(--line)}}
@media print{.hm-top,.hm-tool,.hm-side,.hm-stat,.hm-pagehead{display:none}.hm-shell{grid-template-columns:1fr}.content{padding:0}}

/* ================================================================
   ریسپانسیو موبایل — افزوده شد ۹ مرداد ۱۴۰۵
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
   این بخش فقط *اضافه* شده و هیچ قانونِ قبلی دست نخورده است.
   اگر روزی مشکلی ساخت، کافی است همین بلوک تا انتهای فایل پاک شود
   و همه‌چیز دقیقاً مثلِ قبل می‌شود.
   ================================================================ */
@media(max-width:760px){

  /* --- منوی کناری: مشکلِ اصلی ---
     ستونِ ۹۶ پیکسلی روی موبایل به یک ستونِ عمودیِ ۷۹۰ پیکسلی تبدیل می‌شد و
     محتوای واقعی از ۸۳۶ پیکسلِ پایین‌تر شروع می‌کرد. حالا نوارِ افقیِ لغزنده. */
  /* grid-template-rows لازم است: بدونِ آن، در صفحه‌های کم‌محتوا شبکه فضای
     خالی را بینِ دو ردیف پخش می‌کند و نوارِ منو الکی تا ۱۸۶ پیکسل کش می‌آید. */
  .hm-shell{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .hm-side{
    align-items:flex-start;
    flex-direction:row;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:4px; padding:6px 8px;
    border-inline-start:none;
    /* ⚠️ --shell-line نه --line: پس از سبزشدنِ پوسته، توکنِ محتوا روی آن
       ترکیب می‌شود و خطِ جداکننده عملاً ناپدید می‌شود — همان اشکالی که
       در کاشیِ «عکس پروفایل» هم بود. */
    border-bottom:1px solid var(--shell-line);
  }
  .hm-side::-webkit-scrollbar{height:0}
  .hm-sb{flex:0 0 auto; min-width:64px; padding:7px 6px}
  .hm-sb i{font-size:20px}
  .hm-sb span{font-size:10px; white-space:nowrap}

  /* --- نوارِ بالا --- */
  .hm-top{gap:2px; padding:0 8px; overflow-x:auto; flex-wrap:nowrap}
  .hm-top::-webkit-scrollbar{height:0}
  .hm-brand{flex:0 0 auto}
  .hm-mnu{flex:0 0 auto; padding:7px 9px; font-size:12.5px}
  .hm-srch{width:118px}
  .hm-sb-spacer{display:none}

  /* منوهای کشویی نباید از لبهٔ صفحه بیرون بزنند */
  .hm-dd{position:fixed; top:46px; right:8px; left:8px; min-width:0;
         max-height:70vh; overflow-y:auto}
  .hm-flyout,.hm-dd2{position:static; right:auto; top:auto; min-width:0;
         box-shadow:none; border:none; border-radius:0;
         padding:0 0 0 10px; max-height:none}

  /* --- نوارِ ابزار --- */
  .hm-tool{gap:2px; padding:7px 8px; overflow-x:auto; flex-wrap:nowrap}
  .hm-tool::-webkit-scrollbar{height:0}
  .hm-ti{flex:0 0 auto; min-width:58px; padding:6px 9px}
  .hm-ti i{font-size:19px}

  /* --- سرِ صفحه و نوارِ وضعیت --- */
  .hm-pagehead{padding:11px 14px; flex-wrap:wrap; gap:8px}
  .hm-pagehead h1{font-size:15.5px}
  .hm-stat{height:auto; padding:6px 12px; gap:10px; font-size:11px}
  .content{padding:12px !important}

  /* --- جدول‌ها: به‌جای بیرون زدن، خودشان می‌لغزند ---
     روی خودِ جدول اعمال می‌شود نه والدش، چون بعضی صفحه‌ها استایلِ خودشان را
     روی .card دارند و overflow را می‌بندند. */
  .content table{display:block; width:100%; overflow-x:auto;
                 -webkit-overflow-scrolling:touch}
  .content table::-webkit-scrollbar{height:5px}
  .content table::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
  table.tbl th, table.tbl td{white-space:nowrap; padding:8px 7px; font-size:12px}

  /* --- ورودی‌ها: کمتر از ۱۶ باشد، آیفون موقعِ تایپ خودش زوم می‌کند و
     کاربر باید دستی برگرداند. چند صفحه استایلِ داخلیِ خودشان را دارند که
     بعد از این فایل می‌آید، برای همین اینجا important لازم است. فقط
     اندازهٔ حرف است و روی چیدمان اثری ندارد. --- */
  input[type=text],input[type=number],input[type=password],input[type=date],
  input[type=search],input[type=tel],input[type=email],select,textarea,
  .pgfltr input,.pgfltr select,.hm-srch{font-size:16px !important}
  .btn{min-height:40px}

  /* --- شبکه‌ها یک‌ستونه --- */
  .formgrid,.formgrid.four{grid-template-columns:1fr}
}

/* گوشی‌های باریک */
@media(max-width:420px){
  .hm-brand span{display:none}      /* فقط لوگو بماند، جا باز شود */
  .hm-srch{width:96px}
  .hm-sb{min-width:58px}
}

/* منوهای بالا وقتی با لمس باز می‌شوند (اسکریپتِ footer کلاس را می‌گذارد).
   روی دسکتاپ هرگز این کلاس اضافه نمی‌شود، پس رفتارِ hover دست‌نخورده است. */
.hm-mnu.tap-open > .hm-dd{display:block}
.hm-sub.tap-open > .hm-flyout,.hm-sub.tap-open > .hm-dd2{display:block}

/* ---- خطِ مانده زیر انتخابگرهای صفحهٔ دریافت و پرداخت (۸ شهریور ۱۴۰۵) ---- */
.bal{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;margin-top:4px;
     font-size:11.5px;line-height:1.6;font-variant-numeric:tabular-nums;min-height:19px}
.bal-k{color:var(--muted);font-size:10.5px}
.bal-v{font-weight:700}
.bal-s{color:var(--muted);font-size:10.5px}
.bal-ar{color:var(--muted);margin:0 1px}
.bal-x{color:var(--red-t);font-size:10.5px;font-weight:700}
.bal .bal-v.is-cre{color:var(--green-t)}
.bal .bal-v.is-deb{color:var(--red-t)}
.bal .bal-v.is-zero{color:var(--muted)}
.bal.is-none{color:var(--muted)}

/* ================================================================
   تمِ سه‌بعدی — ۱۰ شهریور ۱۴۰۵
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
   فقط *افزوده* شده. هیچ قانونی بالاتر پاک نشده، پس اگر روزی مشکلی
   ساخت، همین بلوک تا آخرِ فایل پاک شود و اپ به حالتِ تخت برمی‌گردد.

   دستورِ سه‌بعدی همان است که از داشبوردِ مرکز تلفن خوانده شد:
   یک خطِ نوریِ داخلی بالای المان (--edge / --raise) + سایهٔ بیرونی.
   لبهٔ روشن یعنی «نور از بالا می‌تابد» و همین یک خط سطح را از صفحه
   بلند می‌کند. ورودی‌ها برعکس‌اند (--sink) تا فرورفته دیده شوند —
   تضادِ برجسته و فرورفته چیزی است که عمق را باورپذیر می‌کند.
   ================================================================ */

/* ---------- ۱) پوستهٔ اپ: نوارِ بالا، ریلِ کنار، نوارِ وضعیت ---------- */
.hm-top{background:var(--shell);color:var(--shell-ink);
        box-shadow:var(--edge),var(--lift-2);
        border-bottom:1px solid var(--line)}
/* لوگو روی پوسته می‌نشیند نه روی کارت، پس فیروزه‌ایِ روشنِ پوسته را
   می‌گیرد؛ با --brand تیره روی سبزِ تیره تقریباً محو می‌شد. */
.hm-brand .lg{background-color:var(--shell-accent);
              background-image:linear-gradient(160deg,var(--shell-accent),var(--brand));
              color:#06282b;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
              0 2px 6px rgba(0,0,0,.30)}
.hm-mnu{color:var(--shell-ink);transition:background .14s,box-shadow .14s}
.hm-mnu:hover{background:var(--shell-2);box-shadow:var(--raise)}
.hm-srch,.hm-tbtn{background:var(--shell-2);color:var(--shell-ink);
                  border:1px solid var(--shell-line);box-shadow:var(--sink)}
.hm-srch::placeholder{color:var(--shell-muted)}
.hm-tbtn{box-shadow:var(--edge),0 2px 4px rgba(0,0,0,.22);cursor:pointer}
.hm-tbtn:active{transform:translateY(1px);box-shadow:var(--sink)}
.hm-stat{background:var(--shell);color:var(--shell-ink);
         border-top:1px solid var(--shell-line);box-shadow:var(--edge)}

.hm-tool{box-shadow:var(--edge),0 4px 14px rgba(0,0,0,.22)}
.hm-ti{transition:background .14s,box-shadow .14s,transform .14s}
.hm-ti:hover{background:var(--panel2);box-shadow:var(--raise);transform:translateY(-1px)}

.hm-side{box-shadow:var(--edge);border-inline-start-color:var(--shell-line)}
.hm-sb{color:var(--shell-ink);transition:background .14s,box-shadow .14s,transform .14s}
.hm-sb i{color:var(--shell-accent)}
.hm-sb span{color:var(--shell-muted)}
.hm-sb:hover{background:var(--shell-2);box-shadow:var(--raise);transform:translateY(-1px)}
/* حالتِ فعال: عینِ دستورِ خودِ مرکز تلفن */
.hm-sb.on{background:var(--shell-2);color:var(--shell-accent);
          border:1px solid rgba(255,255,255,.10);box-shadow:var(--raise)}
.hm-sb.on i,.hm-sb.on span{color:var(--shell-accent)}

/* ---------- ۲) منوهای کشویی: بالاترین ارتفاع ---------- */
.hm-dd,.hm-flyout,.hm-dd2{box-shadow:var(--lift-3)}
.hm-dd a:hover,.hm-flyout a:hover,.hm-dd2 a:hover{background:var(--brand);color:var(--on-brand)}

/* ---------- ۳) کارت‌ها و جعبه‌ها ---------- */
.card,.kpi,.totbox,.pf-card,.pf-wrap,.login-card,.bankrow,.addrrow{
  box-shadow:var(--edge),var(--lift-1)}
.kpi{transition:transform .16s,box-shadow .16s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--edge),var(--lift-2)}
.kpi .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 6px rgba(0,0,0,.26)}
.card-h{box-shadow:var(--edge)}

/* ---------- ۴) دکمه‌ها: بالا می‌آیند، با فشار پایین می‌روند ---------- */
.btn,.pf-bt{box-shadow:var(--edge),0 2px 4px rgba(0,0,0,.22)}
.btn:active,.pf-bt:active{transform:translateY(1px);box-shadow:var(--sink)}
.btn.ghost{box-shadow:none}
.btn.ghost:hover{box-shadow:var(--raise)}
.btn.pri{color:var(--on-brand);background-color:var(--brand);
         background-image:linear-gradient(180deg,var(--brand),var(--brand-d))}
.btn.pri:hover{background:linear-gradient(180deg,var(--brand-d),var(--brand-d))}
.btn.green{color:var(--on-brand)}
.btn.amber{color:#2A1E08}
/* در تمِ روشن --amber تیره شد (#8a6410) و متنِ تقریباً سیاه روی آن به
   ۳.۰۴:۱ افتاد. سفید روی همان زمینه ۵.۳۷:۱ می‌دهد. */
body.light .btn.amber{color:#fff}

/* ---------- ۵) هر جا brand پس‌زمینه است، متن باید تیره شود ---------- */
.nav a.on,.pf-op.on,.user .av,.hm-sb.on{color:var(--on-brand)}
.nav a.on{color:var(--on-brand)}
.nav a.on svg,.pf-op.on svg{color:var(--on-brand)}
.hm-sb.on{color:var(--brand)}          /* ریلِ کنار سبکِ خودش را دارد */
.user .av{background-color:var(--brand);
          background-image:linear-gradient(160deg,var(--brand),var(--brand-d));
          color:var(--on-brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
          0 2px 5px rgba(0,0,0,.3)}
.brand .logo,.login-card .logo{background:linear-gradient(150deg,var(--brand),var(--brand-d));
          color:var(--on-brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
          0 4px 12px rgba(0,0,0,.32)}
.tag-woo{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}

/* ---------- ۶) ورودی‌ها فرورفته‌اند (نقطهٔ مقابلِ برجسته) ---------- */
.inp,.pf-in{box-shadow:var(--sink)}
.inp:focus{box-shadow:var(--sink),0 0 0 3px var(--brand-l)}
.pf-in:focus{box-shadow:var(--sink),0 0 0 3px var(--brand-l)}

/* ---------- ۷) جدول‌ها، برچسب‌ها، پیام‌ها ---------- */
.tbl th,.inv-tbl th{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.flash,.hint{box-shadow:var(--edge),var(--lift-1)}
.tab.on{box-shadow:var(--edge)}
.pf-side{box-shadow:var(--edge)}
.pf-op{transition:background .14s,box-shadow .14s}
.pf-op:hover{box-shadow:var(--raise)}
.pf-op.on{box-shadow:var(--edge),0 2px 6px rgba(0,0,0,.28)}

/* ---------- ۸) احترام به کم‌کردنِ حرکت ---------- */
@media(prefers-reduced-motion:reduce){
  .kpi,.hm-sb,.hm-ti,.hm-mnu,.btn,.pf-bt,.pf-op{transition:none!important}
  .kpi:hover,.hm-sb:hover,.hm-ti:hover{transform:none!important}
}

/* ---------- ۹) چاپ: سایه جوهر می‌خورد و چیزی اضافه نمی‌کند ---------- */
@media print{
  .card,.kpi,.totbox,.pf-card,.pf-wrap,.login-card,.btn,.pill,.flash,.hint,
  .bankrow,.addrrow,.inp,.pf-in,.hm-tool{box-shadow:none!important}
}

/* ================================================================
   ۱۰) عمقِ پوسته — نوارِ بالا و ریلِ کنار
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
   سایهٔ تنها کافی نبود: نوار و ریل هم‌رنگِ محتوا بودند و سایه روی
   هم‌رنگِ خودش دیده نمی‌شود. سه چیز با هم عمق می‌سازند:
     · سطحِ گرادیان‌دار (بالا روشن‌تر) → یعنی نور از بالا
     · خطِ نوریِ داخلی روی لبهٔ رو‌به‌نور
     · سایهٔ افکنده *روی محتوا*، نه دورِ خودِ نوار
   ریل سمتِ راست است (RTL)، پس سایه‌اش باید به چپ بیفتد.
   ================================================================ */
/* ⚠️ background-color و background-image جدا نوشته شده‌اند، نه کوتاه‌نویسِ
   background. کوتاه‌نویس، background-color را شفاف می‌کند؛ و اگر مرورگری
   color-mix را نشناسد کلِ اعلان نامعتبر و دور ریخته می‌شود — آن‌وقت نوار
   و ریل بی‌رنگ می‌مانند و متنِ سفیدشان روی زمینهٔ روشن ناپدید می‌شود.
   با تفکیک، فقط گرادیان می‌افتد و رنگِ یکدستِ پوسته سرِ جایش می‌ماند. */
.hm-top{
  background-color:var(--shell);
  background-image:linear-gradient(180deg,
             color-mix(in srgb,var(--shell) 88%,#fff) 0%,
             var(--shell) 62%,
             color-mix(in srgb,var(--shell) 92%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             0 6px 16px rgba(0,0,0,.30), 0 1px 0 rgba(0,0,0,.35);
  position:relative; z-index:40}

.hm-tool{
  background-color:var(--panel);
  background-image:linear-gradient(180deg,
             color-mix(in srgb,var(--panel) 92%,#fff),
             var(--panel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.24);
  position:relative;z-index:25}

.hm-side{
  background-color:var(--shell);
  background-image:linear-gradient(270deg,
             color-mix(in srgb,var(--shell) 92%,#fff) 0%,
             var(--shell) 55%,
             color-mix(in srgb,var(--shell) 94%,#000) 100%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.09),
             -8px 0 20px rgba(0,0,0,.26);
  position:relative;z-index:15}

/* کاشیِ فعالِ ریل: برجسته‌تر از بقیه، با هالهٔ فیروزه‌ای که نشان دهد
   خودش منبعِ رنگ است نه فقط رنگ‌شده. */
.hm-sb.on{
  background-color:var(--shell-2);
  background-image:linear-gradient(180deg,
             color-mix(in srgb,var(--shell-2) 86%,var(--shell-accent)) 0%,
             var(--shell-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             0 3px 8px rgba(0,0,0,.34),
             0 0 0 1px color-mix(in srgb,var(--shell-accent) 40%,transparent)}
.hm-sb:active{transform:translateY(1px);box-shadow:var(--sink)}

/* سرِ صفحه و نوارِ وضعیت: لایه‌های میانی */
.hm-pagehead{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
             0 4px 12px rgba(0,0,0,.20);position:relative;z-index:12}
.hm-stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
             0 -4px 12px rgba(0,0,0,.22)}

/* در حالتِ روشن سایه‌ها باید بسیار ملایم‌تر باشند، وگرنه کثیف می‌شود */
body.light .hm-top{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
  0 5px 16px rgba(11,60,55,.28),0 1px 0 rgba(0,0,0,.18)}
body.light .hm-tool{box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(16,40,44,.07)}
body.light .hm-side{box-shadow:inset 1px 0 0 rgba(255,255,255,.14),
  -8px 0 20px rgba(11,60,55,.22)}
body.light .hm-pagehead{box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(16,40,44,.06)}
body.light .hm-stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 -3px 10px rgba(11,60,55,.20)}
body.light .hm-sb.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 7px rgba(0,0,0,.22),
             0 0 0 1px color-mix(in srgb,var(--shell-accent) 45%,transparent)}

/* بلوکِ @supports قبلی برداشته شد: با تفکیکِ background-color و
   background-image دیگر لازم نیست، و بدتر اینکه background-image:none
   گرادیان را حتی در مرورگرهای سالم هم می‌توانست بی‌اثر کند. */

@media print{
  .hm-top,.hm-tool,.hm-side,.hm-pagehead,.hm-stat{box-shadow:none!important;
    background-image:none!important}
}

/* ================================================================
   ۱۱) پوسته در موبایل — عمداً *آخرِ* فایل
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
   ⚠️ این بلوک باید بعد از بخشِ ۱۰ بیاید. @media امتیازِ ویژگی اضافه
   نمی‌کند؛ اگر بالاتر از قانون‌های .hm-side بخشِ ۱۰ نوشته شود، همان‌ها
   برنده می‌شوند و این‌ها بی‌اثر می‌مانند. یک بار همین اتفاق افتاد و
   فقط با اندازه‌گیریِ زندهٔ getComputedStyle معلوم شد.

   در موبایل ریل از یک ستونِ عمودیِ کنار به یک نوارِ افقیِ بالای صفحه
   تبدیل می‌شود، پس هر سه نشانهٔ سه‌بعدی باید بچرخند: گرادیان از افقی
   به عمودی، لبهٔ نوری از کنارهٔ چپ به بالا، و سایه از چپ به پایین.
   ================================================================ */
@media(max-width:760px){
  .hm-side{
    background-image:linear-gradient(180deg,
               color-mix(in srgb,var(--shell) 92%,#fff) 0%,
               var(--shell) 55%,
               color-mix(in srgb,var(--shell) 94%,#000) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 6px 16px rgba(0,0,0,.26);
  }
  body.light .hm-side{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
                      0 6px 16px rgba(11,60,55,.20)}
}