/* فونت روی سرور خودمان: یک فایل متغیر با همهٔ وزن‌ها (۱۰۰ تا ۹۰۰)؛ بدون وابستگی به گوگل */
@font-face{ font-family:'Peyda'; src:url('../fonts/peyda/PeydaWebFaNum-Regular.woff2') format('woff2'); font-weight:100 450; font-display:swap; }
@font-face{ font-family:'Peyda'; src:url('../fonts/peyda/PeydaWebFaNum-Medium.woff2') format('woff2'); font-weight:451 600; font-display:swap; }
@font-face{ font-family:'Peyda'; src:url('../fonts/peyda/PeydaWebFaNum-Bold.woff2') format('woff2'); font-weight:601 900; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-VF.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
/* Marko design system — palette built from #00DDFF. Follows ui-ux-pro-max checklist:
   SVG icons, 4.5:1 contrast, visible focus, reduced-motion, pointer cursors, responsive 375/768/1024/1440. */
:root{
  --bg:#F3F8FA; --surface:#FFFFFF; --surface-2:#EDF4F7; --border:#DCE7EC;
  --text:#0B1F26; --muted:#556E7A; --brand:#00DDFF; --brand-strong:#006B80;
  --brand-soft:#E6FCFF; --on-brand:#042A33; --danger:#C62849; --danger-soft:#FCEEF0;
  --ok:#0F8F5F; --ok-soft:#EBF7F1; --warn:#A8620A; --warn-soft:#FFF8E6;
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(11,31,38,.05),0 10px 28px -12px rgba(11,31,38,.16);
  --brand-rgb:0,221,255; --brand-hi:#33E4FF; --brand-lo:#00B4D1; --hero-a:#04222A; --hero-b:#06384A;
}
.dark{
  --bg:#061216; --surface:#0C1D24; --surface-2:#112830; --border:#1B3540;
  --text:#E8F6FA; --muted:#8CA9B4; --brand-strong:#3FE6FF; --brand-soft:#0A2E36;
  --danger:#FF7A95; --danger-soft:#3A1520; --ok:#4ADE9E; --ok-soft:#0B2B20; --warn:#FFB35C; --warn-soft:#33220A;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.7);
}
*{ -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body,button,input,textarea,select{ font-family:'Peyda','Vazirmatn',system-ui,sans-serif; }
body{ background:radial-gradient(900px 420px at 100% -10%,rgba(var(--brand-rgb),.10),transparent 60%),var(--bg); background-attachment:fixed; color:var(--text); font-size:14px; line-height:1.8; }
.scroll-thin::-webkit-scrollbar{ width:8px; height:8px; } .scroll-thin::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
.no-scroll::-webkit-scrollbar{ display:none; } .no-scroll{ scrollbar-width:none; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); }
.muted{ color:var(--muted); } .brand-text{ color:var(--brand-strong); }
.field{ width:100%; background:var(--surface); border:1.5px solid #B9CDD5; border-radius:12px; padding:.7rem .95rem; color:var(--text); font-size:13px; transition:border-color .15s, background .15s, box-shadow .15s; outline:none; }
.field-b{ background:var(--surface); border-color:#B9CDD5; }
.dark .field-b, .dark .field{ border-color:#2B4A57; }
.field-b:hover{ border-color:var(--brand); }
.keybox{ background:var(--surface); border:1.5px solid var(--border); border-radius:16px; }
.keyok{ display:flex; align-items:flex-start; gap:10px; background:#E5F7EF; color:#0B6B47; border:1.5px solid #9BDBBF; border-radius:12px; padding:10px 14px; font-size:13px; font-weight:700; line-height:1.9; }
.dark .keyok{ background:#0E2A21; color:#6FE0B0; border-color:#1E5A44; }
.field::placeholder{ color:var(--muted); opacity:.75; }
.field:hover{ border-color:var(--brand); }
.field:focus{ border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.2); }
.label{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:.35rem; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; font-size:13px; border-radius:12px; padding:.62rem 1.05rem; cursor:pointer; transition:transform .12s, background .15s, box-shadow .15s, opacity .15s; white-space:nowrap; border:1.5px solid transparent; min-height:40px; }
.btn:active{ transform:scale(.97); } .btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn:focus-visible,.nav-link:focus-visible,.icon-btn:focus-visible,a:focus-visible{ outline:3px solid rgba(var(--brand-rgb),.55); outline-offset:2px; }
.btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-lo)); color:var(--on-brand); box-shadow:0 8px 22px -8px rgba(var(--brand-rgb),.85); }
.btn-primary:hover:not(:disabled){ background:linear-gradient(135deg,var(--brand-hi),var(--brand)); box-shadow:0 10px 26px -8px rgba(var(--brand-rgb),.95); }
.btn-soft{ background:var(--brand-soft); color:var(--brand-strong); } .btn-soft:hover{ filter:brightness(.97); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); } .btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ background:var(--danger-soft); color:var(--danger); } .btn-danger:hover{ filter:brightness(.97); }
.btn-delete{ background:var(--danger); color:#fff; }
.icon-btn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; color:var(--muted); cursor:pointer; transition:background .15s,color .15s; }
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-btn.sm{ width:34px; height:34px; border-radius:10px; }
.icon-btn.danger{ color:var(--danger); } .icon-btn:disabled{ opacity:.3; cursor:not-allowed; }

.nav-link{ display:flex; align-items:center; gap:.7rem; padding:.6rem .85rem; border-radius:12px; color:var(--muted); font-weight:600; font-size:13px; cursor:pointer; transition:background .15s,color .15s; width:100%; text-align:right; text-decoration:none; }
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{ background:linear-gradient(270deg,var(--brand-soft),transparent 140%); color:var(--brand-strong); font-weight:800; box-shadow:inset -3px 0 0 var(--brand); }
.nav-group{ display:flex; align-items:center; justify-content:space-between; width:100%; font-size:11.5px; font-weight:800; color:var(--muted); padding:.5rem .85rem; margin:.5rem 0 .15rem; border-radius:10px; cursor:pointer; text-align:right; }
.nav-group:hover{ background:var(--surface-2); color:var(--text); }
.nav-group svg{ transition:transform .2s; }
.nav-sec.closed .nav-group svg{ transform:rotate(90deg); }
.nav-sec.closed .nav-items{ display:none; }
.nav-group .cnt{ font-size:10px; background:var(--brand-soft); color:var(--brand-strong); border-radius:99px; padding:0 .45rem; margin-right:.4rem; }

.chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:11px; font-weight:700; padding:.15rem .6rem; border-radius:999px; background:var(--brand-soft); color:var(--brand-strong); }
.chip-admin{ background:var(--warn-soft); color:var(--warn); }
.item{ position:relative; background:var(--surface-2); border-radius:12px; padding:.65rem .85rem .65rem 2.2rem; font-size:12.5px; font-weight:500; line-height:1.9; white-space:pre-wrap; word-break:break-word; }
.item.plain{ padding:.6rem .85rem; }
.item .x{ position:absolute; left:.45rem; top:.45rem; opacity:0; transition:opacity .15s; }
.item:hover .x,.item:focus-within .x{ opacity:1; }
@media (hover:none){ .item .x{ opacity:.7; } }
.x{ width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--danger); cursor:pointer; }
.x:hover{ background:var(--danger-soft); }
.bar{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.bar>i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--brand-lo)); transition:width .5s ease; }
.hero-grad{ background:radial-gradient(1200px 400px at 0% 0%, rgba(var(--brand-rgb),.28), transparent 60%), linear-gradient(135deg,var(--hero-a),var(--hero-b)); color:#E8F6FA; }
.dot-grid{ background-image:radial-gradient(rgba(var(--brand-rgb),.35) 1px, transparent 1px); background-size:22px 22px; }
.tag-pill{ display:inline-flex; align-items:center; gap:.3rem; background:var(--surface); color:var(--brand-strong); border-radius:10px; padding:.15rem .6rem; font-weight:700; font-size:11.5px; margin:.15rem 0; }
.toast-out{ opacity:0; transform:translateY(8px); transition:all .25s; }
.empty{ text-align:center; padding:3rem 1.5rem; }

/* tables (admin) */
table{ width:100%; border-collapse:collapse; }
th{ text-align:right; font-size:11.5px; font-weight:800; color:var(--muted); padding:.8rem 1.1rem; background:var(--surface-2); white-space:nowrap; }
th:first-child{ border-radius:0 12px 12px 0; } th:last-child{ border-radius:12px 0 0 12px; }
td{ padding:.85rem 1.1rem; border-top:1px solid var(--border); font-size:13px; vertical-align:middle; }
tbody tr{ transition:background .15s; } tbody tr:hover{ background:color-mix(in srgb,var(--brand-soft) 70%,transparent); }

@keyframes rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.animate-rise{ animation:rise .35s ease-out both; } .animate-toast{ animation:toastIn .25s ease-out both; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

@media print{
  @page{ size:A4 portrait; margin:1.4cm; }
  html,body,#app,#main,#content{ display:block !important; height:auto !important; overflow:visible !important; background:#fff !important; }
  aside,header,#toasts,#overlay,#ai-drawer,#login,button,.no-print,.x,input.field,.add-row{ display:none !important; }
  .card{ box-shadow:none !important; break-inside:avoid; }
  *{ color:#000 !important; border-color:#ccc !important; background:transparent !important; }
  .grid{ display:block !important; } .grid>*{ margin-bottom:1rem; }
}

/* user card (profile entry) */
.user-card{ text-decoration:none; color:inherit; }
.user-card:hover{ background:var(--surface-2); }
.user-card.active{ background:var(--brand-soft); }
.user-card:focus-visible{ outline:3px solid rgba(var(--brand-rgb),.55); outline-offset:2px; }

/* reorderable / editable items */
.item.rich{ display:flex; flex-wrap:wrap; align-items:center; gap:.1rem .4rem; padding:.55rem .7rem .35rem .6rem; }
.item.rich .txt{ flex:1 1 100%; min-width:0; cursor:text; padding:.1rem .15rem; border-radius:6px; }
.item.rich .acts{ flex:none; display:flex; gap:0; margin-inline-start:auto; opacity:.4; transition:opacity .15s; }
.item.rich:hover .acts,.item.rich:focus-within .acts{ opacity:1; }
@media (hover:none){ .item.rich .acts{ opacity:.8; } }
.item.rich .acts button{ width:24px; height:22px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; }
.item.rich .acts button:hover{ background:var(--surface); color:var(--text); }
.item.rich .acts button.del{ color:var(--danger); }
.item.rich .acts button:disabled{ opacity:.25; cursor:default; }
.item.rich.road{ background:var(--surface-2); align-items:center; flex-wrap:wrap; }
.item.rich.road .txt{ flex-basis:100%; }

/* proposal cards inside the assistant */
.prop{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.7rem .8rem; margin-top:.55rem; }
.prop .ptxt{ font-size:12.5px; line-height:1.95; white-space:pre-wrap; word-break:break-word; }
.prop .pbtn{ display:inline-flex; align-items:center; gap:.3rem; font-size:11.5px; font-weight:800; padding:.3rem .65rem; border-radius:9px; cursor:pointer; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
.prop .pbtn.ok{ background:var(--brand); color:var(--on-brand); border-color:transparent; }
.prop .pbtn.no{ color:var(--danger); }
.prop.done{ opacity:.75; }
.role-chip{ flex:none; font-size:11px; font-weight:700; padding:.25rem .65rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); cursor:pointer; white-space:nowrap; background:transparent; }
.role-chip.on{ background:var(--brand-soft); color:var(--brand-strong); border-color:transparent; }
.score-ring{ font-weight:900; }
.item.rich.road .txt{ order:1; }
.item.rich.road .acts{ order:2; }
.item.rich .road-meta{ order:3; flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding-top:.35rem; border-top:1px dashed var(--border); margin-top:.15rem; }
.item.done .txt{ text-decoration:line-through; opacity:.6; }
.item.rich > .chip{ order:2; }

/* ---------- انتخابگر تاریخ شمسی ---------- */
.jd-wrap{ display:inline-block; }
.jd-btn{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; text-align:right; white-space:nowrap; }
.jd-btn .jd-ph{ color:var(--muted); }
.jd-pop{ position:fixed; z-index:900; width:272px; max-width:calc(100vw - 16px); background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px; padding:.75rem; box-shadow:0 18px 40px -12px rgba(11,31,38,.35); font-size:12.5px; }
.jd-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.jd-title{ display:flex; align-items:center; gap:.4rem; font-weight:800; }
.jd-year{ background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:.15rem .35rem; font-size:12px; color:var(--text); width:4rem; text-align:center; font-weight:700; }
.jd-year:focus-visible{ outline:2px solid var(--brand); }
.jd-nav{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); cursor:pointer; color:var(--text); }
.jd-nav:hover{ background:var(--brand-soft); color:var(--brand-strong); }
.jd-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.jd-wd span{ font-size:11px; font-weight:700; color:var(--muted); padding:.25rem 0; }
.jd-d{ height:34px; border-radius:10px; cursor:pointer; font-size:12.5px; color:var(--text); }
.jd-d:hover{ background:var(--brand-soft); color:var(--brand-strong); }
.jd-d.fri, .jd-wd .fri{ color:var(--danger); }
.jd-d.now{ box-shadow:inset 0 0 0 1.5px var(--brand); }
.jd-d.sel{ background:var(--brand); color:var(--on-brand); font-weight:800; }
.jd-d:focus-visible, .jd-nav:focus-visible, .jd-link:focus-visible{ outline:2px solid var(--brand-strong); outline-offset:1px; }
.jd-foot{ display:flex; justify-content:space-between; margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--border); }
.jd-link{ font-weight:700; font-size:12px; color:var(--brand-strong); padding:.2rem .5rem; border-radius:8px; cursor:pointer; }
.jd-link.danger{ color:var(--danger); }
@media print{ .jd-pop{ display:none !important; } }

/* ---------- مشتری نمونه: گروه‌های بازشونده ---------- */
.pgroup{ border-top:1px solid var(--border); padding:.2rem 0; }
.pgroup summary{ list-style:none; display:flex; align-items:center; gap:.5rem; padding:.55rem .1rem; cursor:pointer; font-weight:800; font-size:13px; color:var(--text); border-radius:8px; }
.pgroup summary::-webkit-details-marker{ display:none; }
.pgroup summary:hover{ color:var(--brand-strong); }
.pgroup summary:focus-visible{ outline:2px solid var(--brand-strong); outline-offset:2px; }
.pgroup summary .chev{ margin-right:auto; transition:transform .2s; color:var(--muted); }
.pgroup[open] summary .chev{ transform:rotate(180deg); }

/* ---------- وصل‌کردن پیام به بازار: یک چیپ کوچک کنار متن ---------- */
.mk-pick{ display:inline-flex; align-items:center; gap:.25rem; flex:none; max-width:9.5rem; padding:.1rem .5rem .1rem .2rem; border-radius:999px; background:var(--brand-soft); color:var(--brand-strong); font-size:11px; font-weight:700; }
.mk-pick.off{ background:var(--warn-soft); color:var(--warn); }
.mk-pick > i, .mk-pick > svg{ margin-right:.25rem; }
.mk-pick select{ min-width:0; width:100%; max-width:7.6rem; background:transparent; border:0; color:inherit; font:inherit; font-size:11px; cursor:pointer; text-overflow:ellipsis; padding:.15rem 0; outline:none; }
.mk-pick select option{ color:var(--text); background:var(--surface); font-weight:500; }
.mk-pick:focus-within{ outline:2px solid var(--brand-strong); outline-offset:1px; }

/* ---------- فیلتر زیر ستون‌های جدول مشتریان ---------- */
.ct-frow td{ background:var(--surface-2); padding:.45rem .5rem; vertical-align:top; min-width:128px; }
.ct-frow td:first-child{ min-width:0; }
.ctf{ width:100%; min-width:0; min-height:0; padding:.3rem .5rem !important; font-size:11.5px !important; border-radius:8px !important; margin-bottom:4px; background:var(--surface) !important; border:1px solid var(--border) !important; }
.ctf:focus{ border-color:var(--brand) !important; }
.ctf.ct-on{ border-color:var(--brand-strong) !important; background:var(--brand-soft) !important; font-weight:700; }
.ct-date{ display:flex; align-items:center; gap:.3rem; font-size:11px; color:var(--muted); }
.ct-date .jd-wrap{ flex:1; min-width:0; } .ct-date .jd-btn{ width:100%; margin-bottom:4px; }
.ct-sort{ display:inline-flex; align-items:center; gap:.25rem; font-weight:inherit; cursor:pointer; color:inherit; }
.ct-sort:hover{ color:var(--brand-strong); }
.ct-arrow::after{ content:'↕'; font-style:normal; opacity:.35; font-size:11px; }
.ct-sort[data-dir=asc] .ct-arrow::after{ content:'↑'; opacity:1; color:var(--brand-strong); }
.ct-sort[data-dir=desc] .ct-arrow::after{ content:'↓'; opacity:1; color:var(--brand-strong); }

.chip-off{ background:var(--danger-soft); color:var(--danger); }
.chip-on{ background:#E5F7EF; color:#0F8F5F; }
.dot-on{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; margin-left:.35rem; }
.row-off td{ opacity:.6; }
.row-off td:last-child{ opacity:1; }

.nb{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; font-size:12.5px; font-weight:500; line-height:1.8; color:var(--text); border:1px solid var(--border); background:var(--surface-2); }
.nb > i, .nb > svg{ flex-shrink:0; }
.nb b{ font-weight:700; }
.nb-info{ background:#EAF9FC; border-color:#C6EEF6; } .nb-info > i{ color:var(--brand-strong); }
.nb-ok{ background:#EDF8F2; border-color:#CDE9DA; } .nb-ok > i{ color:#0F8F5F; }
.nb-warn{ background:#FFF9E8; border-color:#F6E6B8; } .nb-warn > i{ color:var(--warn); }
.nb-bad{ background:#FDF0F2; border-color:#F5D3D9; } .nb-bad > i{ color:var(--danger); }
.nb-imp{ background:#EEF4F7; border-color:#D3E1E8; } .nb-imp > i{ color:var(--brand-strong); }
.dark .nb-info{ background:#0B222A; border-color:#17414D; } .dark .nb-ok{ background:#0C2219; border-color:#17402E; }
.dark .nb-warn{ background:#251B0C; border-color:#4A3615; } .dark .nb-bad{ background:#2A1219; border-color:#53212D; } .dark .nb-imp{ background:#10232B; border-color:#22404B; }
.dark .nb-ok > i{ color:var(--ok); } .dark .nb-warn > i{ color:var(--warn); } .dark .nb-bad > i{ color:var(--danger); }
body.ro #view textarea:disabled, body.ro #view input:disabled, body.ro #view select:disabled{ opacity:.7; cursor:not-allowed; }
.nb-imp .btn-ghost{ color:var(--text); background:var(--surface); border-color:var(--border); }
.nb-imp .btn-ghost:hover{ background:var(--brand-soft); }
.bar-col{ display:flex; align-items:flex-end; gap:3px; height:110px; }
.bar-col i{ flex:1; background:var(--brand); border-radius:4px 4px 0 0; min-height:2px; opacity:.85; }
.bar-col i:hover{ opacity:1; }

/* پوشش پشت پنل مشاور: پررنگ‌تر و بدون لکه در فایرفاکس */
#ai-overlay, #overlay, #modal { transform: translateZ(0); will-change: opacity; }
@-moz-document url-prefix() {
  /* فایرفاکس هنگام تارکردن پشت‌زمینه لکه می‌اندازد؛ تار را برمی‌داریم و پوشش را کمی پررنگ‌تر می‌کنیم */
  #overlay, #modal, header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #modal { background: rgba(0,0,0,.62) !important; }
  #overlay { background: rgba(0,0,0,.6) !important; }
  header { background: var(--bg) !important; }
}
/* پیش‌نمایش ارائه: در تمام‌صفحه نوار بالا پنهان می‌شود تا فاصلهٔ مشکی نماند */
#exp-ov:fullscreen, #exp-ov:-webkit-full-screen { width: 100vw; height: 100vh; }
#exp-ov:fullscreen > div:first-child, #exp-ov:-webkit-full-screen > div:first-child { display: none; }
#exp-ov:fullscreen > iframe, #exp-ov:-webkit-full-screen > iframe { flex: 1 1 auto; height: 100vh; background: #000; }


/* ---------- زبان طراحی لوکس: هیرو، کارت شاخص، مدال، چیپ‌ها ---------- */
.modal-bare{ padding:0 !important; border-radius:28px; overflow-x:hidden; background:var(--bg); }
.lx-hero{ position:relative; padding:1.4rem 1.6rem 1.7rem; color:#E8F6FA; background:radial-gradient(900px 300px at 85% -20%,rgba(var(--brand-rgb),.38),transparent 60%),radial-gradient(600px 260px at 5% 120%,rgba(var(--brand-rgb),.22),transparent 60%),linear-gradient(135deg,var(--hero-a),var(--hero-b)); }
.lx-hero .sub{ color:rgba(255,255,255,.68); }
.lx-big{ font-size:2.6rem; font-weight:900; letter-spacing:-1px; color:#fff; line-height:1.25; }
.lx-big small{ font-size:.95rem; font-weight:700; color:rgba(255,255,255,.7); margin-right:.4rem; letter-spacing:0; }
.lx-glass{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); border-radius:16px; padding:.6rem .8rem; }
.lx-pill{ display:inline-flex; align-items:center; gap:.35rem; border-radius:99px; padding:.15rem .7rem; font-size:12px; font-weight:800; }
.lx-pill.up{ background:var(--ok-soft); color:var(--ok); } .lx-pill.dn{ background:var(--danger-soft); color:var(--danger); } .lx-pill.glass{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); } .lx-pill.solid-ok{ background:#0F8F5F; color:#fff; } .lx-pill.solid-bad{ background:#C62849; color:#fff; }
.lx-kpi{ position:relative; overflow:hidden; padding:1rem 1.1rem; }
.lx-ic{ width:38px; height:38px; border-radius:13px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-strong); flex:none; }
.lx-ic.ok{ background:var(--ok-soft); color:var(--ok); } .lx-ic.warn{ background:var(--warn-soft); color:var(--warn); } .lx-ic.bad{ background:var(--danger-soft); color:var(--danger); } .lx-ic.vio{ background:#EEEBFF; color:#5B49D6; }
.dark .lx-ic.vio{ background:#1E1A3F; color:#A99BFF; }
.lx-val{ font-size:1.45rem; font-weight:900; line-height:1.3; margin-top:.5rem; }
.lx-val small{ font-size:.72rem; font-weight:700; color:var(--muted); margin-right:.3rem; }
.lx-seg{ height:10px; border-radius:9px; background:var(--surface-2); overflow:hidden; display:flex; }
.lx-seg i{ display:block; height:100%; }
.lx-leg{ display:flex; flex-wrap:wrap; gap:.3rem .9rem; font-size:11.5px; color:var(--muted); margin-top:.5rem; }
.lx-leg b{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-left:.35rem; vertical-align:middle; }
.lx-pod{ display:flex; align-items:center; gap:.75rem; padding:.6rem 0; border-top:1px dashed var(--border); } .lx-pod:first-of-type{ border-top:0; }
.lx-medal{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:13px; color:#fff; flex:none; }
.lx-prog{ height:7px; border-radius:9px; background:var(--surface-2); margin-top:.3rem; overflow:hidden; } .lx-prog i{ display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,var(--brand),var(--brand-lo)); }
.lx-al{ display:flex; gap:.6rem; align-items:flex-start; border-radius:16px; padding:.65rem .85rem; font-size:12.5px; margin-top:.5rem; }
.lx-al.warn{ background:var(--warn-soft); color:var(--warn); } .lx-al.bad{ background:var(--danger-soft); color:var(--danger); } .lx-al.info{ background:var(--brand-soft); color:var(--brand-strong); }
.lx-dark{ background:linear-gradient(135deg,var(--hero-a),var(--hero-b)); color:#fff; border:0; }
.lx-dark .muted{ color:rgba(255,255,255,.7); }
.sw{ width:38px; height:38px; border-radius:50%; cursor:pointer; border:3px solid var(--surface); box-shadow:0 0 0 1.5px var(--border); transition:transform .12s; } .sw:hover{ transform:scale(1.1); }
.sw.on{ box-shadow:0 0 0 3px var(--brand-strong); }
@media (max-width:640px){ .lx-big{ font-size:2rem; } .lx-hero{ padding:1.1rem 1.1rem 1.3rem; } }

.lx-g4{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } .lx-g2{ display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; } .lx-hg{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; align-items:center; margin-top:1rem; }
@media (min-width:900px){ .lx-g4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .lx-g2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lx-hg{ grid-template-columns:1.3fr 1fr; } }

.lx-g3{ } @media (min-width:900px){ .lx-g3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.lx-kpi.fin-click:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(var(--brand-rgb),.45); } .lx-kpi{ transition:transform .15s, box-shadow .15s; }
@media (min-width:1100px){ .lx-g6{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } } .lx-g6 .lx-val{ font-size:1.2rem; } .lx-g6 .lx-kpi{ padding:.8rem .9rem; }

/* اسکلت بارگیری */
.skel-wrap{ display:grid; gap:1rem; }
.skel{ border-radius:10px; background:linear-gradient(90deg,var(--surface-2) 25%,color-mix(in srgb,var(--surface-2) 55%,var(--surface)) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:skel 1.3s ease-in-out infinite; }
@keyframes skel{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }
@media (prefers-reduced-motion:reduce){ .skel{ animation:none } }

/* جعبهٔ کهربایی (درخواست تمدید، راهنمای پرداخت): در هر دو حالت روشن و تیره خوانا */
.amber-box{ background:#FFF7E6; border:1.5px solid #E8B04A; color:#4a3205; }
.amber-box .muted{ color:#7a5a1a; }
.amber-box-dash{ border-style:dashed; }
.dark .amber-box{ background:#2E2410; border-color:#8A6A24; color:#F5E3B8; }
.dark .amber-box .muted{ color:#CBB27A; }
.amber-box .amber-in{ background:rgba(255,255,255,.65); }
.dark .amber-box .amber-in{ background:rgba(255,255,255,.07); }
.amber-box .amber-hot{ background:#FFE9B8; border:1.5px solid #E8A91F; }
.dark .amber-box .amber-hot{ background:#4A3810; border-color:#C8962C; }

/* ---------- حرکت و راهنمای شناور ---------- */
.tip{ position:fixed; z-index:9999; max-width:240px; padding:7px 11px; border-radius:10px; font-size:12px; line-height:1.8; background:#0f1b21; color:#fff; box-shadow:0 10px 30px -8px rgba(0,0,0,.45); pointer-events:none; opacity:0; transform:translateY(4px) scale(.98); transition:opacity .14s ease, transform .14s ease; }
.tip.on{ opacity:1; transform:none; }
@keyframes fxIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.fx-in{ animation:fxIn .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fxW{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes fxH{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.fx-w{ transform-origin:right center; animation:fxW .8s cubic-bezier(.2,.7,.2,1) both; }
.fx-h{ transform-origin:center bottom; animation:fxH .8s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion:reduce){ .fx-in,.fx-w,.fx-h{ animation:none !important; } .tip{ transition:none; } }

.pie-seg{transition:opacity .15s;cursor:pointer}svg:hover .pie-seg:not(:hover){opacity:.5}
/* آکاردئون تنظیمات (مثلاً کیف پول) */
.wl-acc{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.wl-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem 1rem;cursor:pointer;list-style:none;background:var(--surface-2)}
.wl-acc>summary::-webkit-details-marker{display:none}
.wl-acc>summary b{display:block;font-size:13.5px;font-weight:900}
.wl-acc>summary small{display:block;margin-top:.15rem;font-size:11.5px;color:var(--muted);line-height:1.7}
.wl-acc>summary i{flex:0 0 auto;transition:transform .2s}
.wl-acc[open]>summary i{transform:rotate(180deg)}
.wl-acc[open]>summary{border-bottom:1px solid var(--border)}
.wl-acc>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.wl-acc-b{padding:1rem}
.trash-n{ position:absolute; top:-7px; inset-inline-start:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:99px; background:var(--danger); color:#fff; font-size:11px; font-weight:800; line-height:20px; text-align:center; box-shadow:0 0 0 2px var(--surface); }