/* =========================================================
   iKral Phonebook — طراحی یکپارچه
   رنگ‌ها از لوگو: آبی/فیروزه‌ای (کارت جلو)، سرخابی/بنفش (کارت میانی)، نارنجی/قرمز (کارت پشتی)
   ویژگی‌های منطقی (inline-start/end) برای پشتیبانی هم‌زمان فارسی و انگلیسی
   ========================================================= */
@font-face { font-family: Vazirmatn; src: url(../fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --brand: #0a4bfe; --brand-rgb: 10, 75, 254;
  --cyan: #00d4ff; --blue: #0a86fe; --deep: #0018fd; --mag: #ea03c2; --pur: #4e01b3; --org: #fdaa02; --red: #fb1b2a; --pink: #fb035e;
  --grad: linear-gradient(135deg, #00d4ff 0%, #0a86fe 28%, #0a4bfe 58%, #4e01b3 100%);
  --grad-h: linear-gradient(90deg, #00d4ff, #0a4bfe 40%, #ea03c2 75%, #fdaa02);
  --grad-warm: linear-gradient(135deg, #fdaa02, #fb1b2a 55%, #fb035e);
  --grad-mag: linear-gradient(135deg, #ea03c2, #4e01b3);
  --bg: #f3f5fb; --bg2: #eaeefa; --surface: #fff; --surface2: #f6f8fd; --surface3: #eef1f9;
  --line: #e2e6f1; --line2: #d3d9ea;
  --text: #0d1330; --text2: #39415f; --muted: #687092; --faint: #9aa1bd;
  --ink: #0a4bfe; --ink-soft: rgba(10, 75, 254, .09); --unit-ink: #4e01b3;
  --ok: #0c9d61; --ok-soft: rgba(12, 157, 97, .11); --warn: #d98800; --warn-soft: rgba(253, 170, 2, .15);
  --err: #e0243d; --err-soft: rgba(224, 36, 61, .1); --info: #0a86fe;
  --r: 18px; --r-sm: 12px; --r-xs: 9px; --r-lg: 24px;
  --sh1: 0 1px 2px rgba(13, 19, 48, .04), 0 2px 10px -3px rgba(13, 19, 48, .07);
  --sh2: 0 14px 34px -14px rgba(13, 19, 48, .22), 0 4px 10px -6px rgba(13, 19, 48, .08);
  --sh3: 0 30px 70px -24px rgba(13, 19, 48, .4);
  --ring: 0 0 0 3px rgba(var(--brand-rgb), .24);
  --top-h: 70px; --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
:root[data-theme=dark] {
  --bg: #090c17; --bg2: #0c1022; --surface: #11162c; --surface2: #161c38; --surface3: #1c2344;
  --line: #222a4b; --line2: #2d365e;
  --text: #edf0fb; --text2: #c5cbe8; --muted: #8e96bb; --faint: #5d6589;
  --ink: #6f9bff; --ink-soft: rgba(111, 155, 255, .13); --unit-ink: #c89bff;
  --ok: #2fd08b; --ok-soft: rgba(47, 208, 139, .13); --warn: #ffbf3c; --warn-soft: rgba(255, 191, 60, .13); --err: #ff5d73; --err-soft: rgba(255, 93, 115, .13);
  --sh1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 10px -3px rgba(0, 0, 0, .35);
  --sh2: 0 16px 40px -16px rgba(0, 0, 0, .7), 0 4px 10px -6px rgba(0, 0, 0, .5);
  --sh3: 0 30px 80px -20px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #090c17; --bg2: #0c1022; --surface: #11162c; --surface2: #161c38; --surface3: #1c2344;
    --line: #222a4b; --line2: #2d365e;
    --text: #edf0fb; --text2: #c5cbe8; --muted: #8e96bb; --faint: #5d6589;
    --ink: #6f9bff; --ink-soft: rgba(111, 155, 255, .13); --unit-ink: #c89bff;
    --ok: #2fd08b; --ok-soft: rgba(47, 208, 139, .13); --warn: #ffbf3c; --warn-soft: rgba(255, 191, 60, .13); --err: #ff5d73; --err-soft: rgba(255, 93, 115, .13);
    --sh1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 10px -3px rgba(0, 0, 0, .35);
    --sh2: 0 16px 40px -16px rgba(0, 0, 0, .7), 0 4px 10px -6px rgba(0, 0, 0, .5);
    --sh3: 0 30px 80px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* ---------- پایه ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; font: 400 14.5px/1.75 Vazirmatn, Tahoma, system-ui, sans-serif; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* ارقام فارسی در رابط فارسی؛ در ورودی‌ها، کدها و نسخه انگلیسی ارقام لاتین */
html[lang=fa] body { font-feature-settings: "ss01"; }
input, textarea, select, code, .code-box, .codes, .lat, [dir=ltr] { font-feature-settings: normal; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 480px at 100% -10%, rgba(0, 212, 255, .10), transparent 60%), radial-gradient(760px 420px at -5% 0%, rgba(234, 3, 194, .07), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(253, 170, 2, .06), transparent 60%);
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--ring); }
::selection { background: rgba(var(--brand-rgb), .2); }
mark { background: linear-gradient(transparent 55%, rgba(253, 170, 2, .45) 55%); color: inherit; border-radius: 2px; padding: 0 1px; }
.ltr, [dir=ltr] { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 9999; padding: 8px 14px; border-radius: 10px; background: var(--text); color: var(--bg); transition: top .2s; }
.skip:focus { top: 10px; }
svg.ico, .ib svg, .btn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 18px; height: 18px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- دکمه‌ها ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line2); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .2s, transform .15s; text-decoration: none !important;
}
.btn:hover { border-color: var(--faint); background: var(--surface2); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn.primary { border: 0; color: #fff; background: var(--grad); background-size: 140% 140%; box-shadow: 0 8px 22px -10px rgba(var(--brand-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.primary:hover { background-position: 100% 0; box-shadow: 0 10px 26px -10px rgba(var(--brand-rgb), .9); }
.btn.warm { border: 0; color: #fff; background: var(--grad-warm); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text2); }
.btn.ghost:hover { background: var(--ink-soft); color: var(--ink); }
.btn.soft { background: var(--ink-soft); border-color: transparent; color: var(--ink); }
.btn.danger { color: var(--err); border-color: transparent; border-color: color-mix(in srgb, var(--err) 35%, transparent); background: transparent; }
.btn.danger:hover { background: var(--err-soft); }
.btn.danger.fill { background: var(--err); color: #fff; border: 0; }
.btn.sm { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 10px; gap: 6px; }
.btn.block { width: 100%; }
.btn .badge { margin-inline-start: 2px; }
.ib {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--text2); transition: background .15s, color .15s, transform .15s;
}
.ib:hover { background: var(--ink-soft); color: var(--ink); text-decoration: none; }
.ib:active { transform: scale(.94); }
.ib.sm { width: 32px; height: 32px; border-radius: 10px; }
.ib.line { border-color: var(--line); background: var(--surface); }
.ib.on { color: var(--org); }
.ib svg { width: 19px; height: 19px; }
.ib.sm svg { width: 16px; height: 16px; }
.badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; font: 700 11px/1 Vazirmatn, sans-serif; color: #fff; background: var(--grad-warm); }
.ib .badge { position: absolute; top: 2px; inset-inline-end: 1px; border: 2px solid var(--surface); min-width: 18px; height: 18px; }

/* ---------- سربرگ ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--surface); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line); }
.top::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--grad-h); opacity: .85; }
.top-in { display: flex; align-items: center; gap: 14px; max-width: 1560px; height: var(--top-h); margin: 0 auto; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex: none; text-decoration: none !important; min-width: 0; }
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 4px 10px rgba(var(--brand-rgb), .3)); }
.brand-t { display: grid; line-height: 1.25; min-width: 0; }
.brand-t b { font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; text-align: start; }
.brand-t small { font-size: 11.5px; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: #fff; padding: 2px; border: 1px solid var(--line); }
.search { position: relative; flex: 1; max-width: 640px; margin-inline: auto; }
.search > .ico { position: absolute; inset-inline-start: 15px; top: 50%; translate: 0 -50%; color: var(--faint); pointer-events: none; }
.search input {
  width: 100%; height: 46px; padding-inline: 44px 84px; border-radius: 15px; border: 1px solid var(--line); background: var(--surface2); color: var(--text);
  font-size: 15px; transition: border-color .15s, box-shadow .2s, background .15s;
}
.search input::placeholder { color: var(--faint); }
.search input:focus { outline: none; border-color: rgba(var(--brand-rgb), .55); background: var(--surface); box-shadow: var(--ring); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search .mic { position: absolute; inset-inline-end: 42px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; }
.search .mic.rec { color: #fff; background: var(--grad-warm); animation: pulse 1.2s infinite; }
.search .clr { position: absolute; inset-inline-end: 42px; top: 50%; translate: 0 -50%; }
.kbd { position: absolute; inset-inline-end: 12px; top: 50%; translate: 0 -50%; display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line2); color: var(--faint); font: 600 12px/1 Vazirmatn, monospace; background: var(--surface); }
.search input:focus ~ .kbd { opacity: 0; }
.top-act { display: flex; align-items: center; gap: 4px; flex: none; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 4px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13.5px; }
.user-chip .av { width: 30px; height: 30px; border-radius: 9px; }
.av { display: grid; place-items: center; flex: none; border-radius: 12px; color: #fff; font-weight: 800; background: var(--grad); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(251, 27, 42, .15); } }

/* ---------- نوار اطلاعیه ---------- */
.ann { display: flex; align-items: center; gap: 10px; max-width: 1560px; margin: 12px auto 0; padding: 10px 16px; border-radius: 14px; color: #fff; font-weight: 600; font-size: 14px; background: var(--grad); box-shadow: var(--sh1); width: calc(100% - 40px); }
.ann.warning { background: var(--grad-warm); }
.ann.success { background: linear-gradient(135deg, #0c9d61, #0a86fe); }
.ann.danger { background: linear-gradient(135deg, #fb1b2a, #ea03c2); }
.ann svg { width: 20px; height: 20px; flex: none; }
.ann p { flex: 1; margin: 0; }
.ann a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ann .ib { color: #fff; width: 32px; height: 32px; }
.ann .ib:hover { background: rgba(255, 255, 255, .18); }

/* ---------- چیدمان ---------- */
.layout { display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: 22px; max-width: 1560px; margin: 0 auto; padding: 18px 20px 60px; align-items: start; }
.side { position: sticky; top: calc(var(--top-h) + 16px); max-height: calc(100vh - var(--top-h) - 32px); overflow: auto; display: grid; gap: 14px; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh1); scrollbar-width: thin; }
.side h4 { margin: 4px 8px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.nav { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text2); text-align: start; font-size: 14px; transition: background .12s, color .12s; }
.nav:hover { background: var(--surface2); color: var(--text); }
.nav.active { background: var(--ink-soft); color: var(--ink); font-weight: 700; }
.nav .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface2); color: var(--muted); flex: none; }
.nav.active .ic { background: var(--ink); color: #fff; }
.nav .ic svg { width: 16px; height: 16px; }
.nav .sw { width: 10px; height: 10px; margin-inline: 10px; border-radius: 4px; flex: none; box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.nav .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .ct { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.nav.active .ct { color: var(--ink); }
.side-find { position: relative; }
.side-find input { width: 100%; height: 36px; padding-inline: 34px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface2); font-size: 13px; }
.side-find input:focus { outline: none; border-color: rgba(var(--brand-rgb), .5); box-shadow: var(--ring); }
.side-find .ico { position: absolute; inset-inline-start: 10px; top: 9px; width: 17px; height: 17px; color: var(--faint); }
.side-foot { padding: 8px; font-size: 12px; color: var(--muted); line-height: 1.9; border-top: 1px dashed var(--line); }
.main { min-width: 0; }

/* ---------- نوار ابزار ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.toolbar h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; display: flex; align-items: baseline; gap: 8px; }
.toolbar h1 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.toolbar .sp { flex: 1; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--ink-soft); color: var(--ink); }
.seg button svg { width: 16px; height: 16px; }
.seg .d { width: 8px; height: 8px; border-radius: 3px; }
.select { height: 40px; padding-inline: 12px 32px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23687092' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat; background-position: left 12px center; appearance: none; font-size: 13.5px; }
[dir=ltr] .select { background-position: right 12px center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--text2); }
a.chip { padding: 0 12px; }
.chip b { color: var(--text); }
.chip .d { width: 8px; height: 8px; border-radius: 3px; }
.chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 6px; background: var(--surface3); color: var(--muted); }
.chip button:hover { background: var(--err-soft); color: var(--err); }
.mob-only { display: none !important; }

/* ---------- کارت مخاطب ---------- */
.list { min-height: 50vh; outline: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.card {
  --c: var(--brand); position: relative; display: flex; flex-direction: column; min-height: 168px; padding: 16px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh1); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; overflow: hidden; outline: none;
}
.card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c), var(--c)); background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, transparent)); opacity: .9; }
.card:hover { transform: translateY(-2px); box-shadow: var(--sh2); border-color: var(--line); border-color: color-mix(in srgb, var(--c) 30%, var(--line)); }
.card:focus-visible { box-shadow: var(--ring), var(--sh2); }
.card.sel { border-color: var(--ink); box-shadow: var(--ring); }
.c-top { display: flex; gap: 13px; align-items: flex-start; }
.c-body { flex: 1; min-width: 0; }
.c-hon { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.c-name { font-size: 15.5px; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; }
.c-role { font-size: 13px; color: var(--text2); line-height: 1.6; margin-top: 1px; overflow-wrap: anywhere; }
.c-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: var(--text2); background: var(--surface2); border: 1px solid var(--line); max-width: 100%; }
.tag i { width: 7px; height: 7px; border-radius: 3px; background: var(--c); flex: none; }
.tag svg { width: 12px; height: 12px; color: var(--faint); }
.tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.pr { border-color: transparent; }
.xt {
  --c2: color-mix(in srgb, var(--c) 72%, #000); position: relative; display: grid; place-items: center; align-content: center; width: 70px; height: 70px; flex: none; border-radius: 17px;
  color: #fff; border: 0; background: linear-gradient(145deg, var(--c), var(--c) 55%, var(--c2)); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%, var(--c2)); box-shadow: 0 10px 20px -12px var(--c), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.xt b { font-size: 21px; font-weight: 800; line-height: 1.1; letter-spacing: -.2px; }
.xt b.l { font-size: 15.5px; }
.xt b.xl { font-size: 12px; line-height: 1.3; padding: 0 4px; text-align: center; }
.xt small { font-size: 10px; opacity: .85; font-weight: 600; }
.xt.none { background: var(--surface3); color: var(--faint); box-shadow: none; }
.xt.none svg { width: 22px; height: 22px; }
button.xt:hover { filter: brightness(1.06); }
.ph { position: relative; flex: none; }
.ph img { width: 70px; height: 70px; border-radius: 17px; object-fit: cover; background: var(--surface3); }
.ph .xt.mini { position: absolute; bottom: -6px; inset-inline-end: -6px; width: auto; min-width: 38px; height: 26px; padding: 0 7px; border-radius: 9px; border: 2px solid var(--surface); }
.ph .xt.mini b { font-size: 12.5px; }
.pdot { position: absolute; top: -3px; inset-inline-start: -3px; width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--surface); background: var(--faint); z-index: 2; }
.pdot.available { background: #12c27a; } .pdot.busy { background: #fb1b2a; } .pdot.away { background: #fdaa02; } .pdot.leave { background: #8a93b5; } .pdot.offsite { background: #ea03c2; }
.c-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; }
.c-other { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--text2); }
.c-other span { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.c-other svg { width: 13px; height: 13px; color: var(--faint); flex: none; }
.c-acts { display: flex; gap: 2px; opacity: .75; transition: opacity .15s; }
.card:hover .c-acts, .card:focus-within .c-acts { opacity: 1; }
.card.unit .c-name, .u-row.is-unit b { color: var(--unit-ink); }
.card .chk { position: absolute; top: 12px; inset-inline-end: 12px; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line2); background: var(--surface); display: grid; place-items: center; color: #fff; }
.card.sel .chk { background: var(--ink); border-color: var(--ink); }
.card .chk svg { width: 14px; height: 14px; stroke-width: 3; }
.sk { pointer-events: none; min-height: 168px; }
.sk i, .sk b, .sk span { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--surface2), var(--surface3), var(--surface2)); background-size: 200% 100%; animation: sh 1.3s infinite; }
.sk i { width: 70px; height: 70px; border-radius: 17px; float: inline-start; margin-inline-end: 13px; }
.sk b { height: 16px; width: 55%; margin-top: 8px; } .sk span { height: 12px; width: 40%; margin-top: 10px; }
@keyframes sh { to { background-position: -200% 0; } }

/* ---------- جدول ---------- */
.table { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; overflow: clip; box-shadow: var(--sh1); }
.tr { display: grid; grid-template-columns: 84px minmax(180px, 2fr) minmax(110px, 1.1fr) minmax(90px, .9fr) minmax(130px, 1.2fr) auto; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.tr:first-child { border-top: 0; }
.tr:hover { background: var(--surface2); }
.tr.th { cursor: default; background: var(--surface2); font-size: 12px; font-weight: 700; color: var(--muted); position: sticky; top: var(--top-h); z-index: 2; }
.tr .ext { --c: var(--brand); justify-self: start; min-width: 52px; padding: 3px 10px; border-radius: 9px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c); background: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.tr .ext.none { color: var(--faint); background: none; }
.tr .nm b { display: block; font-weight: 700; } .tr .nm span { font-size: 12.5px; color: var(--muted); }
.tr .cell { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr .cell .d { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.tr .acts { display: flex; gap: 2px; }

/* ---------- گروه‌ها ---------- */
.group { margin-bottom: 26px; }
.group-h { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.group-h h3 { margin: 0; font-size: 16px; font-weight: 800; }
.group-h .sw { width: 12px; height: 12px; border-radius: 4px; }
.group-h .n { font-size: 12.5px; color: var(--muted); }
.group-h .ln { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
[dir=rtl] .group-h .ln { background: linear-gradient(-90deg, var(--line), transparent); }

/* ---------- پاسخ‌های جستجو ---------- */
.s-info { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 13px; background: var(--ink-soft); color: var(--ink); font-size: 13.5px; }
.s-info svg { width: 18px; height: 18px; flex: none; }
.ext-ans { display: grid; gap: 8px; margin-bottom: 16px; }
.ea { --c: var(--brand); display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: start; box-shadow: var(--sh1); }
.ea .xt { width: 58px; height: 58px; border-radius: 14px; }
.ea b { display: block; font-size: 15px; } .ea span { font-size: 12.5px; color: var(--muted); }
.ea.free { border-style: dashed; }
.empty { display: grid; justify-items: center; gap: 6px; padding: 60px 20px; text-align: center; color: var(--muted); }
.empty .ei { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: var(--ink-soft); color: var(--ink); margin-bottom: 8px; }
.empty .ei svg { width: 32px; height: 32px; stroke-width: 1.6; }
.empty h3 { margin: 0; color: var(--text); font-size: 17px; }
.empty p { margin: 0 0 10px; max-width: 440px; }

/* ---------- پنجره‌ها ---------- */
.ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(9, 12, 23, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .18s ease; }
.mdl { position: relative; width: min(560px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh3); border: 1px solid var(--line); animation: pop .22s var(--ease); overflow: hidden; }
.mdl.wide { width: min(860px, 100%); } .mdl.xl { width: min(1180px, 100%); height: min(92vh, 980px); } .mdl.sm { width: min(420px, 100%); }
.mdl-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.mdl-h h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; }
.mdl-h .hi { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ink-soft); color: var(--ink); flex: none; }
.mdl-h .hi svg { width: 20px; height: 20px; }
.mdl-b { padding: 18px; overflow: auto; flex: 1; }
.mdl-f { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface2); }
.mdl-f .sp { flex: 1; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* جزئیات مخاطب */
.d-hero { --c: var(--brand); position: relative; display: flex; align-items: center; gap: 16px; margin: -18px -18px 16px; padding: 22px 18px 18px; background: linear-gradient(160deg, var(--surface), var(--surface) 75%); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 75%); }
.d-hero .xt { width: 82px; height: 82px; border-radius: 22px; } .d-hero .xt b { font-size: 25px; }
.d-hero .ph img { width: 82px; height: 82px; border-radius: 22px; }
.d-hero h2 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.45; }
.d-hero .hon { font-size: 12.5px; color: var(--muted); } .d-hero .pos { color: var(--text2); }
.d-pres { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 3px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; background: var(--surface2); border: 1px solid var(--line); }
.d-pres i { width: 9px; height: 9px; border-radius: 50%; }
.drow { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--line); }
.drow:last-child { border-bottom: 0; }
.drow .di { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface2); color: var(--muted); flex: none; }
.drow .di svg { width: 18px; height: 18px; }
.drow .dt { flex: 1; min-width: 0; display: grid; }
.drow .dt small { font-size: 12px; color: var(--muted); } .drow .dt b { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.drow .da { display: flex; gap: 2px; }
.d-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.d-acts .ib { width: 48px; height: 48px; border-radius: 15px; background: var(--surface2); border: 1px solid var(--line); }
.d-acts .ib.primary { color: #fff; background: var(--grad); border: 0; box-shadow: 0 10px 20px -10px rgba(var(--brand-rgb), .8); }
.d-acts .ib svg { width: 21px; height: 21px; }
.reveal-box { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; background: var(--warn-soft); font-size: 13px; color: var(--text2); }

/* منو */
.menu { position: fixed; z-index: 300; min-width: 230px; max-width: calc(100vw - 20px); padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh3); animation: pop .16s var(--ease); max-height: 80vh; overflow: auto; }
.menu button, .menu a { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--text); text-align: start; font-size: 14px; text-decoration: none !important; }
.menu button:hover, .menu a:hover, .menu .hi { background: var(--surface2); }
.menu svg { width: 18px; height: 18px; color: var(--muted); }
.menu hr { margin: 5px 6px; border: 0; border-top: 1px solid var(--line); }
.menu .mh { padding: 8px 12px 6px; font-size: 12px; color: var(--muted); }
.menu .mh b { display: block; font-size: 14px; color: var(--text); }
.menu .badge { margin-inline-start: auto; }
.menu .danger { color: var(--err); } .menu .danger svg { color: var(--err); }

/* اعلان کوتاه */
.toasts { position: fixed; bottom: 20px; inset-inline-start: 50%; translate: -50% 0; z-index: 900; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
[dir=ltr] .toasts { translate: -50% 0; } [dir=rtl] .toasts { translate: 50% 0; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: #121733; color: #fff; font-size: 14px; box-shadow: var(--sh3); animation: pop .2s var(--ease); pointer-events: auto; }
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.ok svg { color: #2fd08b; } .toast.err svg { color: #ff6b80; } .toast.info svg { color: #6fd0ff; }
:root[data-theme=dark] .toast { background: #eef1fb; color: #0d1330; }
.tip { position: fixed; z-index: 5000; pointer-events: none; max-width: 260px; padding: 6px 11px; border-radius: 10px; font: 600 12.5px/1.6 Vazirmatn, sans-serif; color: #fff; background: #121733; box-shadow: var(--sh2); opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; text-align: center; }
.tip.show { opacity: 1; transform: none; }
:root[data-theme=dark] .tip { background: #eef1fb; color: #0d1330; }

/* ---------- فرم‌ها ---------- */
.fl { display: grid; gap: 6px; min-width: 0; }
.fl > span { font-size: 13px; font-weight: 600; color: var(--text2); }
.fl > span .req { color: var(--err); }
.fl .hint, .hint { font-size: 12px; color: var(--muted); line-height: 1.7; }
.input, .fl input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), .fl select, .fl textarea {
  width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--surface); color: var(--text); font-size: 14px; transition: border-color .15s, box-shadow .2s;
}
.fl textarea, textarea.input { min-height: 84px; resize: vertical; line-height: 1.8; }
.input:focus, .fl input:focus, .fl select:focus, .fl textarea:focus { outline: none; border-color: rgba(var(--brand-rgb), .6); box-shadow: var(--ring); }
.fl select, select.input { appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23687092' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 12px center; padding-inline-end: 32px; }
[dir=ltr] .fl select, [dir=ltr] select.input { background-position: right 12px center; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .wide, .fl.wide { grid-column: 1 / -1; }
.form h3, .sec-h { grid-column: 1 / -1; margin: 8px 0 -2px; font-size: 14px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
.form h3::after, .sec-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pw { position: relative; display: block; }
.pw input { padding-right: 46px !important; padding-left: 14px !important; }
.pw .ib { position: absolute; right: 4px; left: auto; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.chk { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; user-select: none; }
.chk input { width: 18px; height: 18px; accent-color: var(--brand); }
.sw-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface2); cursor: pointer; }
.sw-row > div { flex: 1; } .sw-row b { display: block; font-size: 14px; } .sw-row small { font-size: 12px; color: var(--muted); }
.switch { position: relative; width: 44px; height: 26px; flex: none; appearance: none; border-radius: 20px; background: var(--line2); cursor: pointer; transition: background .2s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: inset-inline-start .2s var(--ease); }
.switch:checked { background: var(--grad); } .switch:checked::after { inset-inline-start: 21px; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.radio-cards label { display: grid; gap: 2px; padding: 10px 12px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.radio-cards label:has(input:checked) { border-color: var(--ink); background: var(--ink-soft); } .radio-cards label.is-on { border-color: var(--ink); background: var(--ink-soft); }
.radio-cards input { position: absolute; opacity: 0; pointer-events: none; }
.radio-cards b { font-size: 13.5px; } .radio-cards small { font-size: 12px; color: var(--muted); }
.typeseg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; grid-column: 1 / -1; }
.typeseg button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; color: var(--muted); }
.typeseg button.active { border-color: var(--ink); color: var(--ink); background: var(--ink-soft); }
.photo-row { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; padding: 12px; border-radius: 16px; border: 1px dashed var(--line2); background: var(--surface2); }
.photo-prev { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; overflow: hidden; background: var(--surface3); color: var(--faint); flex: none; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.combo { position: relative; }
.combo .sw { position: absolute; inset-inline-start: 12px; top: 16px; width: 11px; height: 11px; border-radius: 4px; pointer-events: none; }
.combo input { padding-inline-start: 32px !important; }
.combo-list { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto; padding: 5px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh3); }
.opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.opt.hi, .opt:hover { background: var(--surface2); } .opt.sel { color: var(--ink); font-weight: 700; }
.opt .sw { position: static; } .opt small { margin-inline-start: auto; color: var(--faint); }
.opt.create { color: var(--ink); font-weight: 600; }
.cap { display: flex; align-items: center; gap: 10px; }
.cap .cap-img { flex: none; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); overflow: hidden; }
.cap .cap-img svg { width: 140px; height: 46px; }
.cap input { flex: 1; min-width: 0; text-align: center; letter-spacing: 3px; }
.strength { height: 6px; border-radius: 4px; background: var(--surface3); overflow: hidden; }
.strength i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .25s, background .25s; }
.alert { display: flex; gap: 10px; padding: 11px 14px; border-radius: 13px; font-size: 13.5px; line-height: 1.8; background: var(--ink-soft); color: var(--text); }
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ink); }
.alert.warn { background: var(--warn-soft); } .alert.warn svg { color: var(--warn); }
.alert.err { background: var(--err-soft); } .alert.err svg { color: var(--err); }
.alert.ok { background: var(--ok-soft); } .alert.ok svg { color: var(--ok); }
.code-box { padding: 12px 14px; border-radius: 13px; background: var(--surface2); border: 1px dashed var(--line2); font: 600 15px/1.8 ui-monospace, Consolas, monospace; direction: ltr; text-align: center; word-break: break-all; user-select: all; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; font: 600 14px ui-monospace, monospace; direction: ltr; }
.codes span { padding: 6px; border-radius: 9px; background: var(--surface2); text-align: center; }

/* ---------- پنل مدیریت ---------- */
.panel { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; min-height: 0; }
.p-nav { padding: 12px; border-inline-end: 1px solid var(--line); background: var(--surface2); overflow: auto; }
.p-nav h5 { margin: 12px 10px 4px; font-size: 11px; font-weight: 700; color: var(--faint); }
.p-nav h5:first-child { margin-top: 2px; }
.p-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--text2); text-align: start; font-size: 13.5px; font-weight: 600; }
.p-nav button:hover { background: var(--surface3); color: var(--text); }
.p-nav button.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh1); }
.p-nav button svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.p-nav button.active svg { color: var(--ink); }
.p-nav button .badge { margin-inline-start: auto; }
.p-body { min-width: 0; overflow: auto; padding: 20px 22px 40px; }
.p-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.p-head h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 800; }
.p-head p { flex-basis: 100%; margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.box { padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
.box > h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.box > h3 svg { width: 19px; height: 19px; color: var(--ink); }
.box > h3 .sp { flex: 1; }
.box > p { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }
.rows { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.row:hover { border-color: var(--line2); }
.row .rm { flex: 1; min-width: 0; } .row .rm b { display: block; font-size: 14px; overflow-wrap: anywhere; } .row .rm small { display: block; font-size: 12.5px; color: var(--muted); }
.row .ra { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.row .sw { width: 14px; height: 14px; border-radius: 5px; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; background: var(--surface3); color: var(--text2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.err { background: var(--err-soft); color: var(--err); } .pill.info { background: var(--ink-soft); color: var(--ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.kpi small { display: block; font-size: 12px; color: var(--muted); } .kpi b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi.g { color: #fff; border: 0; background: var(--grad); } .kpi.g small { color: rgba(255, 255, 255, .85); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 10px; }
.bars i { flex: 1; min-width: 3px; border-radius: 5px 5px 2px 2px; background: var(--grad); opacity: .9; position: relative; }
.bars i:hover { opacity: 1; filter: brightness(1.1); }
.bars.h i { background: var(--grad-mag); }
.blabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 6px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.hbar .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .v { color: var(--muted); font-variant-numeric: tabular-nums; }
.hbar .b { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--surface3); overflow: hidden; margin-bottom: 6px; }
.hbar .b i { display: block; height: 100%; border-radius: 4px; background: var(--grad-h); }
.score { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--v) * 1%), var(--surface3) 0); flex: none; }
.score::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.score b { position: relative; font-size: 26px; font-weight: 800; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.perm { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer; font-size: 13.5px; font-weight: 600; background: var(--surface); }
.perm:has(input:checked) { border-color: var(--ink); background: var(--ink-soft); color: var(--ink); } .perm.is-on { border-color: var(--ink); background: var(--ink-soft); color: var(--ink); }
.perm input { accent-color: var(--brand); width: 17px; height: 17px; }
.perm small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.diff { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; margin-top: 8px; }
.diff dt { color: var(--muted); } .diff dd { margin: 0; overflow-wrap: anywhere; }
.diff del { color: var(--err); text-decoration-thickness: 1px; } .diff ins { color: var(--ok); text-decoration: none; font-weight: 600; }
.tl { position: relative; display: grid; gap: 10px; padding-inline-start: 18px; }
.tl::before { content: ""; position: absolute; inset-inline-start: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl .row::before { content: ""; position: absolute; inset-inline-start: -18px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
.tl .row { position: relative; align-items: flex-start; }
.drop { display: grid; place-items: center; gap: 6px; padding: 26px; border-radius: 18px; border: 2px dashed var(--line2); background: var(--surface2); text-align: center; color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s; }
.drop.over, .drop:hover { border-color: var(--ink); background: var(--ink-soft); color: var(--ink); }
.drop svg { width: 34px; height: 34px; stroke-width: 1.6; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th, .mini-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.mini-table th { font-size: 12px; color: var(--muted); font-weight: 700; background: var(--surface2); position: sticky; top: 0; }
.scroll-x { overflow: auto; max-height: 340px; border: 1px solid var(--line); border-radius: 13px; }

/* نوار انتخاب گروهی */
.bulk { position: fixed; bottom: 18px; inset-inline-start: 50%; z-index: 120; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 18px; background: #121733; color: #fff; box-shadow: var(--sh3); animation: pop .2s var(--ease); max-width: calc(100vw - 24px); }
[dir=rtl] .bulk { translate: 50% 0; } [dir=ltr] .bulk { translate: -50% 0; }
.bulk b { padding: 0 8px; font-size: 14px; }
.bulk .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.bulk .btn:hover { background: rgba(255, 255, 255, .16); }
.bulk .btn.danger { color: #ff8a9a; }

/* ---------- صفحه ورود و نصب ---------- */
.lg-body { display: grid; min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.lg-bg { position: fixed; inset: 0; overflow: hidden; z-index: -1; }
.lg-bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.lg-bg i:nth-child(1) { width: 520px; height: 520px; top: -160px; inset-inline-end: -120px; background: #00d4ff; }
.lg-bg i:nth-child(2) { width: 460px; height: 460px; bottom: -180px; inset-inline-start: -120px; background: #ea03c2; opacity: .3; animation-delay: -6s; }
.lg-bg i:nth-child(3) { width: 360px; height: 360px; bottom: 10%; inset-inline-end: 10%; background: #fdaa02; opacity: .22; animation-delay: -12s; }
:root[data-theme=dark] .lg-bg i { opacity: .22; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.08); } }
.lg-wrap { display: grid; place-items: center; align-content: center; gap: 16px; padding: 24px 16px; }
.lg-card { width: min(410px, 100%); padding: 26px 28px 22px; border-radius: 28px; background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); box-shadow: var(--sh3); text-align: center; }
.lg-logo { display: grid; place-items: center; margin: -8px auto 2px; }
.lg-logo video { width: 230px; height: auto; aspect-ratio: 5 / 3; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.lg-card.dk { background: rgba(9, 12, 23, .94); }
.lg-org { margin: 0 auto 12px; } .lg-org img { width: 96px; height: 96px; object-fit: contain; border-radius: 22px; background: #fff; padding: 8px; box-shadow: var(--sh2); }
.lg-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface2); color: var(--text2); font-size: 12.5px; line-height: 1.9; text-align: start; }
.lg-title { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.3px; }
.lg-sub { margin: 2px 0 18px; color: var(--muted); font-size: 13.5px; }
.lg-form { display: grid; gap: 13px; text-align: start; }
.lg-hint { margin: 0; font-size: 13px; color: var(--muted); }
.code-in { text-align: center; font-size: 22px !important; letter-spacing: 6px; font-weight: 700; }
.lg-err { padding: 10px 12px; border-radius: 12px; background: var(--err-soft); color: var(--err); font-size: 13.5px; text-align: start; margin-bottom: 12px; }
.lg-form .lg-err { margin: 0; }
.lg-go { width: 100%; min-height: 48px; font-size: 15px; border-radius: 14px; margin-top: 4px; }
.lg-back { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--muted); }
.lg-foot { margin: 0; font-size: 12px; color: var(--faint); }
.err-code { font-size: 64px; font-weight: 900; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 4px 0 8px; }
/* نصب‌کننده مرحله‌ای */
.inst-card { width: min(760px, 100%); text-align: start; padding-bottom: 22px; }
.inst-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.inst-top .lg-title { margin: 0; font-size: 24px; text-align: start; } .inst-top .lg-sub { margin: 0; text-align: start; }
.inst-steps-bar { display: flex; gap: 4px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: s; }
.inst-steps-bar li { flex: 1; display: grid; justify-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); text-align: center; position: relative; }
.inst-steps-bar li::before { content: ""; position: absolute; top: 15px; inset-inline-start: calc(-50% + 18px); width: calc(100% - 36px); height: 2px; background: var(--line); }
.inst-steps-bar li:first-child::before { display: none; }
.inst-steps-bar li i { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface2); border: 2px solid var(--line); font-style: normal; font-weight: 800; font-size: 13px; color: var(--muted); }
.inst-steps-bar li.on { color: var(--ink); font-weight: 700; } .inst-steps-bar li.on i { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -6px rgba(var(--brand-rgb), .8); }
.inst-steps-bar li.done { color: var(--ok); } .inst-steps-bar li.done i { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.inst-steps-bar li.done::before, .inst-steps-bar li.on::before { background: var(--ok); }
.ist { animation: fade .25s; }
.inst-h { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font-size: 16.5px; font-weight: 800; }
.inst-h i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink-soft); color: var(--ink); font-style: normal; font-size: 13px; }
.inst-p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.9; }
.inst-req { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-bottom: 14px; font-size: 13px; }
.inst-req div { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); }
.inst-req span { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-weight: 800; font-size: 13px; }
.inst-req b { font-size: 13px; } .inst-req small { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.inst-req .ok span { color: var(--ok); background: var(--ok-soft); } .inst-req .no { border-color: var(--line); border-color: color-mix(in srgb, var(--err) 40%, var(--line)); } .inst-req .no span { color: var(--err); background: var(--err-soft); }
.inst-req .opt span { color: var(--warn); background: var(--warn-soft); }
.inst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.inst-grid .wide { grid-column: 1 / -1; }
.inst-chk { margin-top: 12px; font-size: 13px; } .inst-chk small { color: var(--muted); }
.inst-test { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; min-height: 40px; }
.inst-test span { font-size: 13px; font-weight: 600; } .inst-test span.ok { color: var(--ok); } .inst-test span.no { color: var(--err); }
.inst-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.inst-cards label { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.inst-cards label:has(input:checked) { border-color: var(--ink); background: var(--ink-soft); } .inst-cards label.is-on { border-color: var(--ink); background: var(--ink-soft); }
.inst-cards input { position: absolute; opacity: 0; } .inst-cards b { font-size: 14px; } .inst-cards small { font-size: 12px; color: var(--muted); line-height: 1.7; }
.inst-file { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface2); }
.inst-file .input { max-width: 260px; }
.inst-sw { display: grid; gap: 8px; margin-bottom: 12px; }
.inst-2fa { max-width: 360px; }
.inst-review { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface2); font-size: 13.5px; }
.inst-review dt { color: var(--muted); } .inst-review dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.inst-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.inst-nav .sp { flex: 1; } .inst-nav .lg-go { width: auto; margin: 0; min-width: 160px; }
.inst-ok { padding: 14px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-weight: 700; text-align: center; margin-bottom: 12px; }
.inst-done { display: grid; justify-items: center; gap: 4px; margin: 6px 0 16px; text-align: center; }
.inst-done h2 { margin: 6px 0 0; font-size: 20px; } .inst-done p { margin: 0; color: var(--muted); }
.inst-check { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 30px; font-weight: 800; box-shadow: 0 12px 26px -10px var(--ok); animation: pop .35s var(--ease); }
.inst-todo { display: grid; gap: 10px; margin: 16px 0 0; padding-inline-start: 22px; font-size: 13.5px; line-height: 1.9; }
.inst-todo .code-box { display: block; margin-top: 6px; }
.inst-cfg { font-family: monospace; font-size: 12px; margin-bottom: 12px; }
@media (max-width: 600px) { .inst-grid { grid-template-columns: 1fr; } .inst-steps-bar span { display: none; } .inst-nav .lg-go { flex: 1; } }

/* ---------- صفحه‌های عمومی (تماس، واحد، کارت ویزیت) ---------- */
.pg-main { max-width: 1080px; margin: 0 auto; padding: 26px 20px 50px; }
.pg-hero { --c: var(--brand); position: relative; padding: 28px; margin-bottom: 18px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh1); overflow: hidden; }
.pg-hero::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: var(--grad-h); }
.pg-hero h1 { margin: 0 0 6px; font-size: 28px; font-weight: 900; letter-spacing: -.4px; }
.pg-hero p { margin: 0 0 14px; color: var(--text2); }
.pg-hero .chips { margin-bottom: 14px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.pg-card { --c: var(--brand); padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh1); border-top: 4px solid var(--c); }
.pg-card h2 { margin: 0 0 10px; font-size: 18px; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; }
.map { margin-top: 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.map iframe { width: 100%; height: 100%; border: 0; }
.map-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.lines li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface2); font-size: 14px; }
.crumb { display: flex; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.u-list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.u-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.u-row:nth-child(even) { background: var(--surface2); }
.u-row b { display: block; } .u-row span { font-size: 13px; color: var(--muted); }
.u-row .nums { display: flex; gap: 12px; align-items: center; flex: none; }
.u-row .ext { min-width: 52px; padding: 2px 10px; border-radius: 9px; text-align: center; font-weight: 800; color: var(--ink); background: var(--ink-soft); }
.pg-foot { padding: 20px; text-align: center; font-size: 12.5px; color: var(--faint); }
.ssr { padding: 20px; }
.vcard { --c: var(--brand); position: relative; width: min(440px, 100%); margin: 10px auto; padding: 0 22px 24px; border-radius: 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh2); text-align: center; overflow: hidden; }
.vc-band { height: 108px; margin: 0 -22px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #00d4ff), var(--c) 50%, color-mix(in srgb, var(--c) 60%, #4e01b3)); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #00d4ff), var(--c) 50%, color-mix(in srgb, var(--c) 60%, #4e01b3)); }
.vc-photo { display: grid; place-items: center; width: 116px; height: 116px; margin: -58px auto 10px; border-radius: 34px; border: 5px solid var(--surface); background: var(--grad); color: #fff; font-size: 44px; font-weight: 900; overflow: hidden; box-shadow: var(--sh2); }
.vc-photo img { width: 100%; height: 100%; object-fit: cover; }
.vcard h1 { margin: 0; font-size: 23px; font-weight: 900; }
.vc-role { margin: 2px 0 10px; color: var(--text2); }
.vc-org { margin: 8px 0 16px; font-size: 13px; color: var(--muted); }
.vc-rows { display: grid; gap: 6px; text-align: start; }
.vc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--surface2); color: var(--text); text-decoration: none !important; }
a.vc-row:hover { background: var(--ink-soft); }
.vc-row span { font-size: 13px; color: var(--muted); } .vc-row b { font-size: 15px; }
.vc-act { display: flex; gap: 8px; margin-top: 16px; } .vc-act .btn { flex: 1; min-height: 46px; }
.vc-qr { display: grid; place-items: center; margin: 18px auto 4px; width: 172px; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.vc-qr svg { width: 150px; height: 150px; }
.vc-hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.qr-box { display: grid; place-items: center; padding: 14px; border-radius: 20px; background: #fff; width: fit-content; margin: 0 auto 12px; border: 1px solid var(--line); }
.qr-box svg { width: 230px; height: 230px; }

/* ---------- کیوسک ---------- */
.kiosk .side, .kiosk .top-act, .kiosk .kbd, .kiosk .c-acts, .kiosk .toolbar .seg, .kiosk .toolbar .select, .kiosk #annBar .ib { display: none !important; }
.kiosk { --top-h: 96px; }
.kiosk .layout { grid-template-columns: 1fr; max-width: 1300px; }
.kiosk .top-in { max-width: 1300px; }
.kiosk .search { max-width: 860px; }
.kiosk .search input { height: 64px; font-size: 21px; border-radius: 20px; padding-inline-start: 58px; }
.kiosk .search > .ico { width: 26px; height: 26px; inset-inline-start: 20px; }
.kiosk .search .mic { width: 48px; height: 48px; inset-inline-end: 10px; }
.kiosk .grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.kiosk .card { min-height: 190px; padding: 20px; }
.kiosk .c-name { font-size: 19px; } .kiosk .xt { width: 84px; height: 84px; } .kiosk .xt b { font-size: 26px; }
.k-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 20px; }
.k-cats button { height: 48px; padding: 0 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; font-weight: 700; color: var(--text2); }
.k-cats button.active { background: var(--grad); color: #fff; border: 0; }
.k-exit { position: fixed; bottom: 14px; inset-inline-start: 14px; opacity: .25; }
.k-exit:hover { opacity: 1; }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 240px minmax(0, 1fr); gap: 16px; }
  .tr { grid-template-columns: 76px minmax(160px, 2fr) minmax(100px, 1fr) minmax(110px, 1fr) auto; } .tr .c-site { display: none; }
}
@media (max-width: 860px) {
  :root { --top-h: 60px; }
  .top-in { gap: 8px; padding: 0 12px; flex-wrap: wrap; height: auto; min-height: var(--top-h); padding-block: 8px; }
  .brand-t small { max-width: 150px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search input { height: 44px; }
  .kbd { display: none; } .search .mic, .search .clr { inset-inline-end: 6px; }
  .top-act { margin-inline-start: auto; }
  .user-chip span { display: none; } .user-chip { padding: 0 4px; }
  .layout { grid-template-columns: 1fr; padding: 12px 12px 90px; }
  .side { position: fixed; inset: auto 0 0 0; top: auto; z-index: 150; max-height: 78vh; border-radius: 24px 24px 0 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .28s var(--ease); box-shadow: var(--sh3); }
  .side.open { transform: none; }
  .side::before { content: ""; display: block; width: 44px; height: 5px; margin: 2px auto 8px; border-radius: 4px; background: var(--line2); }
  .side-ov { position: fixed; inset: 0; z-index: 140; background: rgba(9, 12, 23, .45); animation: fade .2s; }
  .mob-only { display: inline-flex !important; }
  .toolbar h1 { font-size: 17px; flex-basis: 100%; }
  .toolbar .sp { display: none; }
  .toolbar .select { flex: 1; min-width: 0; width: 0; }
  .seg button { padding: 0 9px; }
  .top-act .lang { display: none; }
  .brand-t b { font-size: 15.5px; }
  .tbar-site { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
  .tbar-site::-webkit-scrollbar { display: none; }
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .card { min-height: 0; padding: 13px; }
  .c-acts { opacity: 1; }
  .xt, .ph img { width: 62px; height: 62px; border-radius: 15px; } .xt b { font-size: 19px; }
  .tr { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px; } .tr .c-dept, .tr .c-mail, .tr.th { display: none; }
  .ov { padding: 0; place-items: end stretch; }
  .mdl, .mdl.wide, .mdl.sm { width: 100%; max-height: 92vh; border-radius: 26px 26px 0 0; animation: up .26s var(--ease); }
  .mdl.xl { width: 100%; height: 96vh; border-radius: 22px 22px 0 0; }
  .mdl-f { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .form { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .p-nav { display: flex; gap: 4px; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 8px; scrollbar-width: none; }
  .p-nav h5 { display: none; } .p-nav button { width: auto; white-space: nowrap; flex: none; }
  .p-body { padding: 16px 14px 40px; }
  .bulk { bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .fab { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); inset-inline-end: 18px; z-index: 100; width: 58px; height: 58px; border-radius: 19px; color: #fff; background: var(--grad); box-shadow: 0 14px 30px -10px rgba(var(--brand-rgb), .8); border: 0; display: grid; place-items: center; }
  .fab svg { width: 26px; height: 26px; }
  .pg-hero { padding: 20px; } .pg-hero h1 { font-size: 22px; }
  .ann { width: calc(100% - 24px); margin-top: 10px; font-size: 13px; }
  .kiosk .search input { height: 56px; font-size: 18px; }
}
@media (min-width: 861px) { .fab { display: none !important; } }
@media (max-width: 420px) { .brand-t small { display: none; } .top-act .btn.soft span { display: none; } .codes { grid-template-columns: 1fr; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- چاپ ---------- */
@media print {
  body::before, .top, .side, .toolbar .seg, .toolbar .select, .c-acts, #annBar, .bulk, .fab, .toasts, .ov { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .layout { display: block; padding: 0; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .card { box-shadow: none; break-inside: avoid; min-height: 0; padding: 8px; border-color: #ccc; }
  .xt { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.sticky-save { position: sticky; bottom: -40px; z-index: 3; margin: 0 -22px -40px; padding: 12px 22px 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 20px -14px rgba(13, 19, 48, .25); }
@media (max-width: 860px) { .sticky-save { margin: 0 -14px -40px; padding-inline: 14px; } }

/* =========================================================
   دفترچه‌های تلفن (مشترک و شخصی)
   ========================================================= */
.secbar { display: flex; gap: 6px; padding: 5px; margin-bottom: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh1); overflow-x: auto; scrollbar-width: none; }
.secbar::-webkit-scrollbar { display: none; }
.sec { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: 1 0 auto; justify-content: center; height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .15s, color .15s; }
.sec:hover { color: var(--text); background: var(--surface2); }
.sec svg { width: 18px; height: 18px; }
.sec i { font-style: normal; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 8px; background: var(--surface3); color: var(--muted); font-size: 12px; line-height: 22px; font-variant-numeric: tabular-nums; }
.sec.active { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px rgba(var(--brand-rgb), .9); }
.sec.active i { background: rgba(255, 255, 255, .22); color: #fff; }
.s-info.alt { flex-wrap: wrap; background: var(--surface2); color: var(--text2); border: 1px dashed var(--line2); }
.s-info.alt .chip { height: 28px; padding: 0 10px; cursor: pointer; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.tagcloud .chip { height: 28px; padding: 0 10px; cursor: pointer; font-size: 12px; }
.tagcloud .chip svg { width: 12px; height: 12px; color: var(--faint); }
.tagcloud .chip small { color: var(--faint); font-size: 11px; }
.chip.on { background: var(--ink-soft); border-color: rgba(var(--brand-rgb), .35); color: var(--ink); }
.chip.on svg { color: var(--ink); }
button.chip:hover { border-color: var(--line2); color: var(--text); }

.bav { --c: var(--brand); display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 17px; object-fit: cover; color: #fff; font-weight: 800; font-size: 20px;
  background: linear-gradient(135deg, var(--c), var(--c)); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
img.bav { background: var(--surface3); }
.bav.sm { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
.bcard { min-height: 0; gap: 0; }
.bcard .c-name { font-size: 15.5px; }
.bcard .tag i { background: var(--c); }
.plist { display: grid; gap: 4px; margin-top: 12px; padding: 8px; border-radius: 13px; background: var(--surface2); }
.pl { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px; border-radius: 9px; }
.pl:hover { background: var(--surface); }
.pt { display: inline-flex; align-items: center; gap: 5px; flex: none; min-width: 78px; font-size: 12px; color: var(--muted); }
.pt svg { color: var(--faint); }
.pn { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--text); text-align: start; font-variant-numeric: tabular-nums; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.pn:hover { color: var(--ink); text-decoration: none; }
.primary-ib { background: var(--grad) !important; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(var(--brand-rgb), .9); }
.btable .tr { grid-template-columns: 50px minmax(160px, 1.6fr) minmax(130px, 1.2fr) minmax(130px, 1fr) minmax(140px, 1.1fr) auto; }
.btable .bav { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
.btable .cell a { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.desk-only { display: inline-flex; }
.ph-list { display: grid; gap: 8px; }
.ph-row { display: grid; grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ph-row select, .ph-row input { height: 42px; width: 100%; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; }
.ph-row select:focus, .ph-row input:focus { outline: none; border-color: rgba(var(--brand-rgb), .5); box-shadow: var(--ring); }
.ph-row input[name=pn] { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.av-prev { display: grid; place-items: center; }
.toast-act { margin-inline-start: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: 13px; }
.toast-act:hover { background: rgba(255, 255, 255, .24); }

/* =========================================================
   پنل مدیریت مستقل (/admin)
   ========================================================= */
body.adm { background: var(--bg); }
body.adm::before { display: none; }
.adm-wrap { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.adm-side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--surface); border-inline-end: 1px solid var(--line); z-index: 60; }
.adm-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; }
.adm-brand img { border-radius: 10px; }
.adm-brand b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.2px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: start; }
.adm-brand small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.adm-nav { flex: 1; overflow: auto; padding: 4px 12px 12px; scrollbar-width: thin; }
.adm-nav h5 { margin: 14px 10px 4px; font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: .3px; }
.adm-nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 11px; margin-bottom: 2px; border-radius: 12px; color: var(--text2); font-size: 13.8px; font-weight: 600; text-decoration: none !important; transition: background .12s, color .12s; }
.adm-nav a:hover { background: var(--surface2); color: var(--text); }
.adm-nav a svg { width: 19px; height: 19px; color: var(--faint); flex: none; }
.adm-nav a.active { background: var(--ink-soft); color: var(--ink); }
.adm-nav a.active svg { color: var(--ink); }
.adm-nav a.active::before { content: ""; position: absolute; inset-inline-start: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad); }
[dir=ltr] .adm-nav a.active::before { border-radius: 4px 0 0 4px; }
.adm-nav a .badge { margin-inline-start: auto; position: static; }
.adm-me { display: flex; align-items: center; gap: 10px; margin: 10px 12px 14px; padding: 10px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--line); }
.adm-me .av { width: 36px; height: 36px; }
.adm-me div { flex: 1; min-width: 0; line-height: 1.35; }
.adm-me b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-me small { display: block; font-size: 11.5px; color: var(--muted); text-align: start; }
.adm-body { min-width: 0; display: flex; flex-direction: column; }
.adm-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; height: 70px; padding: 0 26px; background: var(--bg); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.adm-burger { display: none; }
.adm-title { min-width: 0; line-height: 1.3; }
.adm-title small { display: block; font-size: 11.5px; color: var(--muted); }
.adm-title h1 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-find { position: relative; flex: 1; max-width: 440px; margin-inline-start: auto; }
.adm-find .search { max-width: none; }
.adm-find .search input { height: 42px; }
.adm-res { max-height: 70vh; }
.adm-res .mh { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--faint); }
.adm-res .opt { width: 100%; border: 0; background: transparent; color: var(--text); text-align: start; text-decoration: none !important; }
.adm-res .opt svg { width: 17px; height: 17px; color: var(--muted); }
.adm-res .opt .sw { width: 10px; height: 10px; border-radius: 4px; flex: none; }
.adm-act { display: flex; align-items: center; gap: 6px; }
.adm-main { width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px 26px 70px; outline: none; }
.adm-main .p-head h2 { font-size: 21px; }
.adm-main .sticky-save { margin: 0 -26px -70px; padding-inline: 26px; bottom: 0; }

/* داشبورد */
.dash-hero { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 16px; padding: 22px 24px; border-radius: var(--r-lg); color: #fff; background: var(--grad); overflow: hidden; box-shadow: 0 18px 40px -22px rgba(var(--brand-rgb), .9); }
.dash-hero::after { content: ""; position: absolute; inset-inline-end: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(234, 3, 194, .55), transparent 70%); pointer-events: none; }
.dash-hero > div { flex: 1; position: relative; z-index: 1; }
.dash-hero h2 { margin: 0; font-size: 22px; font-weight: 800; }
.dash-hero p { margin: 2px 0 0; opacity: .85; font-size: 13.5px; }
.score.sm { position: relative; z-index: 1; width: 74px; height: 74px; background: conic-gradient(#fff calc(var(--v) * 1%), rgba(255, 255, 255, .22) 0); text-decoration: none !important; }
.score.sm::before { inset: 7px; background: var(--brand); background: color-mix(in srgb, var(--brand) 70%, #000); }
.score.sm b { font-size: 19px; color: #fff; }
.kpi-l { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none !important; transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
a.kpi-l[href]:hover { transform: translateY(-2px); box-shadow: var(--sh2); border-color: var(--line2); }
.kpi-i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--ink-soft); color: var(--ink); }
.kpi-i svg { width: 22px; height: 22px; }
.kpi-l b { font-size: 22px; line-height: 1.3; }
.kpi.g .kpi-i { background: var(--grad); color: #fff; }
.kpi.warm { border-color: var(--line); border-color: color-mix(in srgb, var(--org) 45%, var(--line)); }
.kpi.warm .kpi-i { background: var(--grad-warm); color: #fff; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.qa { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface2); color: var(--text2); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none !important; transition: background .15s, border-color .15s, transform .15s var(--ease); }
.qa:hover { background: var(--surface); border-color: rgba(var(--brand-rgb), .35); color: var(--ink); transform: translateY(-2px); }
.qa svg { width: 24px; height: 24px; color: var(--ink); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.dash-grid .box { margin: 0; }
.feed { display: grid; }
.feed > div { padding: 9px 2px; border-bottom: 1px solid var(--line); }
.feed > div:last-child { border-bottom: 0; }
.feed b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.feed small { font-size: 12px; color: var(--muted); }
a.alert { color: var(--text); text-decoration: none !important; transition: filter .15s; }
a.alert:hover { filter: brightness(.97); }

/* جدول داده */
.dt-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dt-tools .side-find { flex: 1; min-width: 220px; }
.dt-tools .side-find input { height: 40px; background: var(--surface); }
.dt-tools .side-find .ico { top: 11px; }
.dt-tools .select { height: 40px; max-width: 220px; }
.dt-wrap { border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); overflow-x: auto; box-shadow: var(--sh1); }
table.dt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dt th { position: sticky; top: 0; padding: 10px 12px; background: var(--surface2); color: var(--muted); font-size: 12px; font-weight: 700; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--line); user-select: none; }
.dt th.sortable { cursor: pointer; }
.dt th.sortable:hover, .dt th.on { color: var(--ink); }
.dt th i { font-style: normal; font-size: 9px; margin-inline-start: 5px; }
.dt td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr[data-id] { cursor: pointer; transition: background .1s; }
.dt tbody tr[data-id]:hover { background: var(--surface2); }
.dt tbody tr.sel { background: var(--ink-soft); }
.dt .dt-c { width: 38px; padding-inline-end: 0; }
.dt input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }
.dt .dt-a { width: 1%; white-space: nowrap; text-align: end; }
.dt .dt-a .ib { opacity: .6; } .dt tr:hover .dt-a .ib { opacity: 1; }
.dt .w-ext { width: 86px; }
.dt-name { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.dt-name img { width: 34px; height: 34px; border-radius: 11px; object-fit: cover; flex: none; background: var(--surface3); }
.dt-name div { min-width: 0; line-height: 1.45; }
.dt-name b { display: block; font-weight: 700; }
.dt-name small { display: block; font-size: 12px; color: var(--muted); }
.ext-pill { --c: var(--brand); display: inline-block; min-width: 48px; padding: 2px 10px; border-radius: 9px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c); background: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pdot.static { position: static; flex: none; width: 11px; height: 11px; border: 0; margin-inline-start: auto; }
.ph-mini { display: flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-mini svg { color: var(--faint); flex: none; }
.dt-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.dt-count { margin: 10px 4px 0; font-size: 12.5px; color: var(--muted); }
.dt-bulk { position: sticky; top: 78px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 12px; border-radius: 15px; background: #121733; color: #fff; box-shadow: var(--sh2); animation: pop .18s var(--ease); }
.dt-bulk b { padding: 0 6px; font-size: 13.5px; }
.dt-bulk .sp { flex: 1; }
.dt-bulk .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.dt-bulk .btn:hover { background: rgba(255, 255, 255, .16); }
.dt-bulk .btn.danger { color: #ff8a9a; }
.muted { color: var(--muted); }

/* دفترچه مشترک در پنل */
.book-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.gpanel { position: sticky; top: 86px; margin: 0; padding: 12px; }
.gpanel > h3 { margin: 2px 4px 10px; }
.gitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--text2); font-size: 13.5px; text-align: start; }
.gitem:hover { background: var(--surface2); }
.gitem.active { background: var(--ink-soft); color: var(--ink); font-weight: 700; }
.gitem .sw { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.gitem .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gitem .ct { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.grow { position: relative; display: flex; align-items: center; }
.grow .gitem { flex: 1; }
.gact { display: none; position: absolute; inset-inline-end: 4px; gap: 1px; padding: 2px; border-radius: 10px; background: var(--surface); box-shadow: var(--sh1); }
.grow:hover .gact, .grow:focus-within .gact { display: flex; }

/* ---------- واکنش‌گرا: دفترچه‌ها و پنل ---------- */
@media (max-width: 1100px) {
  .btable .tr { grid-template-columns: 50px minmax(150px, 1.6fr) minmax(120px, 1fr) minmax(120px, 1fr) auto; } .btable .c-mail { display: none; }
  .hide-md { display: none; }
  .book-grid { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .adm-wrap { grid-template-columns: 1fr; }
  .adm-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 280px; max-width: 86vw; transform: translateX(105%); transition: transform .26s var(--ease); box-shadow: var(--sh3); z-index: 160; }
  [dir=ltr] .adm-side { transform: translateX(-105%); }
  .adm-side.open { transform: none !important; }
  .adm-burger { display: grid; }
  .adm-top { height: auto; min-height: 62px; flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
  .adm-title { flex: 1; }
  .adm-title h1 { font-size: 17px; }
  .adm-find { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .adm-act .btn span { display: none; }
  .adm-main { padding: 16px 14px 80px; }
  .adm-main .sticky-save { margin: 0 -14px -80px; padding-inline: 14px; }
  .dt-bulk { top: 118px; }
  .gpanel { top: 126px; }
  .side-ov { position: fixed; inset: 0; z-index: 150; background: rgba(9, 12, 23, .45); animation: fade .2s; }
}
@media (max-width: 860px) {
  .desk-only { display: none !important; }
  .secbar { margin-bottom: 10px; }
  .sec { height: 40px; padding: 0 12px; font-size: 13px; }
  .btable .tr { grid-template-columns: 44px minmax(0, 1fr) auto; } .btable .c-dept, .btable .acts { display: none; }
  .ph-row { grid-template-columns: 110px minmax(0, 1fr) auto; }
  .ph-row input[name=pl] { grid-column: 1 / -2; grid-row: 2; height: 36px; font-size: 13px; }
  .hide-sm { display: none; }
  .book-grid { grid-template-columns: 1fr; }
  .gpanel { position: static; }
  .gact { display: flex; position: static; box-shadow: none; background: none; }
  .dash-hero { padding: 18px; } .dash-hero h2 { font-size: 18px; }
  .dash-grid { grid-template-columns: 1fr; }
  .dt-tools .select { flex: 1; max-width: none; min-width: 0; }
  .dt-name { min-width: 0; }
}
@media print { .adm-side, .adm-top, .dt-bulk, .secbar { display: none !important; } .adm-wrap { display: block; } }
.bs-form { display: grid; gap: 10px; }
.bs-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; }
.bs-row .chk { font-weight: 600; }

.book-grid > *, .dash-grid > * { min-width: 0; }
@media (max-width: 860px) {
  .dt-tools .side-find { flex-basis: 100%; }
  .dt-tools .select { flex: 1 1 28%; }
}
@media (max-width: 600px) {
  .dt .dt-a, .dt th:last-child { display: none; }
  .dt td, .dt th { padding: 9px 8px; }
  .dt .w-ext { width: 64px; }
  .ext-pill { min-width: 0; padding: 2px 7px; }
  .dt-name .bav.sm, .dt-name img { display: none; }
}
@media (max-width: 600px) { .adm-main .p-head h2 { flex-basis: 100%; } }

/* =========================================================
   پیگیری مشتری، مناسبت‌ها، نقشه، شماره‌های ضروری (۵٫۲)
   ========================================================= */
.sos-btn { color: #fff !important; background: linear-gradient(135deg, #fb1b2a, #fb035e) !important; border: 0 !important; box-shadow: 0 6px 14px -8px #fb1b2a; }
.sos-btn svg { width: 16px; height: 16px; }
.sos-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1560px; margin: 10px auto 0; padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(251, 27, 42, .1), rgba(251, 3, 94, .08)); border: 1px solid rgba(251, 27, 42, .25); font-size: 15px; }
.sos-strip > svg { width: 22px; height: 22px; color: #fb1b2a; }
.sos-i { --c: #fb1b2a; display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 12px; background: var(--surface); border-inline-start: 4px solid var(--c); }
.sos-i b { font-size: 17px; color: var(--c); font-variant-numeric: tabular-nums; }
.sos-row .ra .btn span { font-variant-numeric: tabular-nums; }
.tag.pend { color: var(--warn); background: var(--warn-soft); border-color: transparent; } .tag.pend svg { color: var(--warn); }
.tag.occ { color: #c2185b; background: rgba(234, 3, 194, .1); border-color: transparent; } .tag.occ svg { color: #ea03c2; }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; cursor: pointer; user-select: none; }
.gchip input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }
.gchip i { width: 9px; height: 9px; border-radius: 3px; }
.gchip:has(input:checked) { border-color: rgba(var(--brand-rgb), .45); background: var(--ink-soft); color: var(--ink); font-weight: 600; } .gchip.is-on { border-color: rgba(var(--brand-rgb), .45); background: var(--ink-soft); color: var(--ink); font-weight: 600; }
.dt-list { display: grid; gap: 8px; }
.dt-row { display: grid; grid-template-columns: 130px 64px 104px 96px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.dt-row select, .dt-row input, .loc-row input, .when-d select, .when-d input { height: 40px; width: 100%; padding: 0 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; }
.dt-row select:focus, .dt-row input:focus, .loc-row input:focus, .when-d select:focus, .when-d input:focus { outline: none; border-color: rgba(var(--brand-rgb), .5); box-shadow: var(--ring); }
.loc-row { display: flex; gap: 8px; } .loc-row input { flex: 1; font-variant-numeric: tabular-nums; } .loc-row .btn { flex: none; }
.when { display: grid; gap: 8px; }
.when-q { display: flex; flex-wrap: wrap; gap: 6px; } .when-q .chip { cursor: pointer; padding: 0 10px; height: 30px; }
.when-d { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px 104px; gap: 6px; }
.when [data-when-out] { color: var(--ink); font-weight: 600; }
.res-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; cursor: pointer; }
.rchip input { position: absolute; opacity: 0; pointer-events: none; }
.rchip:has(input:checked) { color: #fff; border-color: transparent; background: var(--ink); } .rchip.is-on { color: #fff; border-color: transparent; background: var(--ink); }
.rchip.ok:has(input:checked) { background: var(--ok); } .rchip.ok.is-on { background: var(--ok); } .rchip.warn:has(input:checked) { background: var(--warn); } .rchip.warn.is-on { background: var(--warn); } .rchip.err:has(input:checked) { background: var(--err); } .rchip.err.is-on { background: var(--err); }
.d-tl { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.d-tl > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; }
.d-tl > h3 svg { width: 18px; height: 18px; color: var(--ink); }
.tl-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tl { position: relative; display: grid; gap: 4px; margin-top: 12px; }
.tl::before { content: ""; position: absolute; inset-inline-start: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-i { position: relative; display: flex; gap: 10px; padding: 6px 0; }
.tl-ic { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface2); border: 2px solid var(--surface); color: var(--muted); }
.tl-i.call .tl-ic { background: rgba(10, 75, 254, .12); color: var(--ink); }
.tl-i.task .tl-ic { background: var(--warn-soft); color: var(--warn); }
.tl-i.task.done .tl-ic { background: var(--ok-soft); color: var(--ok); }
.tl-i.late .tl-ic { background: var(--err-soft); color: var(--err); }
.tl-b { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 13px; background: var(--surface2); }
.tl-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.tl-h .sp { flex: 1; } .tl-h small { color: var(--muted); }
.tl-h .chk { font-size: 13.5px; gap: 7px; }
.tl-i.done .tl-h b { text-decoration: line-through; color: var(--muted); }
.tl-b p { margin: 4px 0 2px; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-b small { display: block; font-size: 11.5px; color: var(--muted); } .tl-b small.late { color: var(--err); font-weight: 600; }
.tl-b small svg { width: 12px; height: 12px; vertical-align: -2px; }
.tk-h { margin: 14px 4px 6px; font-size: 13px; color: var(--muted); } .tk-h:first-child { margin-top: 0; }
.row.tk input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ok); flex: none; cursor: pointer; }
.row.tk.late { border-color: var(--line); border-color: color-mix(in srgb, var(--err) 35%, var(--line)); } .row.tk.late small { color: var(--err); }
.row.occ.today { border-color: rgba(234, 3, 194, .4); background: rgba(234, 3, 194, .05); }
.occ-d { display: grid; place-items: center; flex: none; width: 54px; height: 50px; border-radius: 13px; background: var(--surface2); line-height: 1.2; text-align: center; }
.occ-d b { font-size: 17px; color: #c2185b; } .occ-d small { font-size: 10px; color: var(--muted); }
.row.occ.today .occ-d { background: linear-gradient(135deg, #ea03c2, #4e01b3); } .row.occ.today .occ-d b { color: #fff; font-size: 13px; }
.pp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 240px; overflow: auto; }
.pp-list small { display: block; font-size: 11px; color: var(--muted); text-align: start; }
.gitem .pub { color: #fb1b2a; display: grid; } .gitem .pub svg { width: 13px; height: 13px; }
.feed > div.late b { color: var(--err); } .feed > div.today b { color: #c2185b; }
ol.steps { margin: 0 0 12px; padding-inline-start: 22px; line-height: 2.1; font-size: 13.5px; }
.dup { display: grid; gap: 6px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface2); }
.dup-i { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 11px; background: var(--surface); cursor: pointer; }
.dup-i input { margin-top: 4px; accent-color: var(--brand); width: 17px; height: 17px; }
.dup-i b { display: block; font-size: 14px; } .dup-i small { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.dup-i:has(input:checked) { box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), .45); } .dup-i.is-on { box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), .45); }
.dup-a { display: flex; gap: 6px; align-items: center; }

/* نقشه */
.mapbox { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; }
.map-area { min-width: 0; }
.mapw { position: relative; height: calc(100vh - 240px); min-height: 420px; border-radius: var(--r); overflow: hidden; background: #dfe7f3; border: 1px solid var(--line); box-shadow: var(--sh1); touch-action: none; cursor: grab; outline: none; user-select: none; }
.mapw:active { cursor: grabbing; } .mapw:focus-visible { box-shadow: var(--ring); }
:root[data-theme=dark] .map-t img { filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .map-t img { filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9); } }
.map-t, .map-m { position: absolute; inset: 0; } .map-t img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.mk { --c: #0a4bfe; position: absolute; translate: -50% -100%; width: 30px; height: 38px; padding: 0; border: 0; background: none; cursor: pointer; }
.mk i { position: absolute; inset: 0 0 8px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--c); border: 3px solid #fff; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .45); }
.mk.approx i { background: #fff; border: 4px solid var(--c); }
.mk.cl { translate: -50% -50%; width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; border: 3px solid #fff; box-shadow: 0 6px 14px -4px rgba(10, 75, 254, .7); }
.map-pop { position: absolute; z-index: 5; translate: -50% calc(-100% - 46px); display: grid; gap: 4px; min-width: 170px; max-width: 240px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh3); font-size: 13px; cursor: default; }
.map-pop small { color: var(--muted); } .map-pop .approx-t { color: var(--warn); } .map-pop .btn { justify-self: start; margin-top: 4px; }
.map-z { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 4; display: grid; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--sh2); }
.map-z button { width: 38px; height: 36px; border: 0; background: none; color: var(--text); font-size: 18px; font-weight: 700; cursor: pointer; } .map-z button + button { border-top: 1px solid var(--line); } .map-z button:hover { background: var(--surface2); }
.map-attr { position: absolute; bottom: 0; inset-inline-start: 0; z-index: 4; padding: 2px 8px; background: rgba(255, 255, 255, .8); color: #333; font-size: 10px; border-start-end-radius: 8px; }
.map-side { max-height: calc(100vh - 240px); min-height: 420px; overflow: auto; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; }
.map-side details { margin-bottom: 6px; } .map-side summary { display: flex; align-items: center; gap: 6px; padding: 6px 4px; font-weight: 700; cursor: pointer; } .map-side summary small { margin-inline-start: auto; color: var(--faint); }
.map-side summary svg { color: var(--ink); }
.ms-i { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 9px; } .ms-i:hover { background: var(--surface2); } .ms-i input { accent-color: var(--brand); width: 16px; height: 16px; } .ms-i span { cursor: pointer; flex: 1; } .ms-i small { color: var(--warn); }
.ms-route { margin-bottom: 10px; padding: 10px; border-radius: 13px; background: var(--surface2); }
.ms-route.on { background: var(--ink-soft); }
.ms-route > b { display: flex; align-items: center; gap: 6px; } .ms-route > b small { margin-inline-start: auto; font-weight: 500; color: var(--muted); }
.ms-route ol { margin: 8px 0; padding-inline-start: 20px; } .ms-route li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ms-btns { display: flex; flex-wrap: wrap; gap: 6px; } .ms-none { margin: 10px 4px 0; }
@media (max-width: 860px) {
  .dt-row { grid-template-columns: 1fr 64px 1fr auto; } .dt-row [name=dty] { grid-column: 1 / 2; } .dt-row [name=dtl] { grid-column: 2 / -2; }
  .when-d { grid-template-columns: 56px 1fr 76px; } .when-d [type=time] { grid-column: 1 / -1; }
  .loc-row { flex-wrap: wrap; } .loc-row input { flex-basis: 100%; }
  .mapbox { grid-template-columns: 1fr; } .mapw { height: 62vh; min-height: 340px; } .map-side { max-height: none; min-height: 0; }
  .sos-btn span { display: none; }
}
.inst-color { display: flex; align-items: center; gap: 10px; } .inst-color input[type=color] { width: 54px; height: 40px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.inst-color small { font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ---- پیامک گروهی ---- */
.sms-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sms-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.sms-tags .chip { height: 26px; padding: 0 9px; cursor: pointer; font-size: 12px; }
.sms-tags .chip:hover { border-color: var(--ink); color: var(--ink); }
.sms-meta small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sms-pre { padding: 12px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); font-size: 13px; }
.sms-bubble { margin-top: 8px; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: var(--ink-soft); color: var(--text); white-space: pre-wrap; line-height: 1.9; max-width: 92%; }
.warn-t { color: var(--warn); }
.tl-i.sms .tl-ic { background: var(--ink-soft); color: var(--ink); }
/* ---- پاک‌سازی و داده نمونه ---- */
.box.wipe { border-color: var(--line); border-color: color-mix(in srgb, var(--err) 35%, var(--line)); }
.box.wipe h3 { color: var(--err); }
.box.wipe .perm small { color: var(--muted); margin-inline-start: 4px; }

/* ---------- انتخاب فایل (به‌جای دکمه انگلیسی مرورگر) ---------- */
.filepick { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 6px 5px 12px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.filepick:hover, .filepick:focus-within { border-color: var(--ink); background: var(--ink-soft); }
.filepick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.filepick .fp-btn { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--ink-soft); color: var(--ink); font-weight: 700; font-size: 12.5px; }
.filepick .fp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.filepick.has .fp-name { color: var(--text); font-weight: 600; }
.filepick .fp-x { margin-inline-start: auto; position: relative; z-index: 1; }
/* دکمه پنل مدیریت در سربرگ */
.top-act .admin-go { white-space: nowrap; }
@media (max-width: 560px) { .top-act .admin-go span { display: none; } .top-act .admin-go { padding: 0 9px; } }
/* شبکه داخلی در نصب‌کننده */
.inst-net { margin-top: 6px; }
.inst-net input.input { margin-top: 8px; }
.inst-sum { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); font-size: 13px; line-height: 2; }
.inst-sum b { font-weight: 800; }
/* مرورگرهای بدون color-mix (Chrome ≤110، Firefox ≤112): رنگ دوم کاشی‌ها همان رنگ اصلی */
@supports not (color: color-mix(in srgb, red 50%, blue)) { .xt { --c2: var(--c); } }

/* نشان «انتخاب شده» روی کارت‌های گزینه (در همه مرورگرها واضح) */
.inst-cards label, .radio-cards label { padding-inline-end: 38px; }
.inst-cards label::after, .radio-cards label::after { content: ""; position: absolute; top: 12px; inset-inline-end: 12px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); box-sizing: border-box; }
.inst-cards label:has(input:checked)::after, .radio-cards label:has(input:checked)::after { border-color: var(--ink); background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.inst-cards label.is-on::after, .radio-cards label.is-on::after { border-color: var(--ink); background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.inst-file { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) { .inst-file, .inst-grid { grid-template-columns: 1fr; } }
.radio-cards label { position: relative; }
.inst-file .input { max-width: none; }
.inst-review { grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); }
.inst-review dd { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 560px) {
  .inst-review { grid-template-columns: 1fr; gap: 0; padding: 6px 14px; }
  .inst-review dt { padding-top: 9px; font-size: 12px; }
  .inst-review dd { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
  .inst-review dd:last-child { border-bottom: 0; }
}
.inst-cards label { transition: none; }
.lg-step { display: grid; gap: 14px; }
.lg-err { white-space: pre-line; overflow-wrap: anywhere; }

/* ================= ۵٫۴: نوار ابزار آیکنی سربرگ ================= */
.tools { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 15px; background: var(--surface2); border: 1px solid var(--line); }
.tb { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; border: 0; background: transparent; color: var(--text2); cursor: pointer; text-decoration: none !important; transition: background .16s, color .16s, transform .16s; }
.tb svg { width: 19px; height: 19px; }
.tb:hover { background: var(--surface); color: var(--brand); box-shadow: var(--sh1); }
.tb:active { transform: scale(.92); }
.tb:focus-visible { outline: none; box-shadow: var(--ring); }
.tb.sos { color: #fff; background: linear-gradient(135deg, #fb1b2a, #fb035e); box-shadow: 0 6px 14px -8px #fb1b2a; }
.tb.sos:hover { color: #fff; filter: brightness(1.08); }
.tb.pri { color: #fff; background: var(--grad); box-shadow: 0 6px 14px -8px rgba(var(--brand-rgb), .9); }
.tb.pri:hover { color: #fff; filter: brightness(1.08); }
@media (max-width: 640px) {
  .top-in { flex-wrap: wrap; height: auto; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .top-act { order: 3; width: 100%; justify-content: center; }
  .top-act .tools { flex: 1; justify-content: space-between; }
  .tb { width: 38px; height: 38px; }
}

/* ================= ۵٫۴: کارت ویزیت در پنجره ================= */
.mdl.vc-mdl { width: min(420px, 100%); background: transparent; border: 0; box-shadow: none; overflow: visible; }
.vc-mdl .mdl-b { padding: 0; overflow: auto; border-radius: 30px; }
.vc-mdl .vcard { margin: 0; width: 100%; }
.vc-mdl .vcard h2 { margin: 0; font-size: 22px; font-weight: 900; }
.vc-x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; background: rgba(255, 255, 255, .22) !important; color: #fff !important; backdrop-filter: blur(6px); }
.vc-act .btn svg { width: 17px; height: 17px; }
.vc-qr .spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; }

/* ================= ۵٫۴: تماس با ما در پنجره ================= */
.mdl.ct-mdl { width: min(480px, 100%); }
.ct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ct-head img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.ct-head b { font-size: 16px; font-weight: 800; }
.ct-head p { margin: 3px 0 0; font-size: 13px; color: var(--text2); line-height: 1.9; }
.ct-list { display: grid; gap: 6px; }
.ct-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface2); color: var(--text); text-decoration: none !important; transition: background .15s, transform .15s; }
a.ct-i:hover { background: rgba(var(--brand-rgb), .08); transform: translateX(-2px); }
.ct-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--surface); color: var(--brand); box-shadow: var(--sh1); }
.ct-ic svg { width: 18px; height: 18px; }
.ct-t { display: grid; min-width: 0; }
.ct-t small { font-size: 11.5px; color: var(--muted); }
.ct-t b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.ct-dir { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.ct-dir a { padding: 4px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 12px; color: var(--text2); text-decoration: none !important; }
.ct-dir a:hover { border-color: var(--brand); color: var(--brand); }
.ct-socs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ct-soc { padding: 7px 13px; border-radius: 11px; font-size: 12.5px; font-weight: 700; color: #fff !important; text-decoration: none !important; background: var(--grad); }
.ct-soc { display: inline-flex; align-items: center; gap: 7px; } .ct-soc.has-ic { padding-inline-start: 6px; } .ct-soc img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; background: #fff; }
.ct-soc.s-instagram { background: linear-gradient(135deg, #f9a33a, #e1306c 55%, #833ab4); } .ct-soc.s-telegram { background: #27a3e3; } .ct-soc.s-whatsapp { background: #1fa855; }
.ct-soc.s-bale { background: #12a69a; } .ct-soc.s-eitaa { background: #ef7f1a; } .ct-soc.s-linkedin { background: #0a66c2; }
.ct-h { margin: 16px 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.ct-sites { display: grid; gap: 8px; }
.ct-site { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); border-inline-start: 4px solid var(--c); }
.ct-site b { font-size: 14px; } .ct-site a { font-size: 13px; width: fit-content; } .ct-site small { font-size: 12px; color: var(--text2); line-height: 1.8; }

/* ================= ۵٫۴: بازگشت از کیوسک ================= */
.k-exit { position: fixed; top: 14px; bottom: auto; inset-inline-end: 14px; inset-inline-start: auto; z-index: 60; opacity: .85; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 12px; height: 40px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh2); color: var(--text) !important; font-weight: 700; font-size: 13px; text-decoration: none !important; }
.k-exit:hover { opacity: 1; color: var(--brand) !important; }
.k-exit svg { width: 18px; height: 18px; }

/* ================= ۵٫۴: اسکرول نرم پنل کناری ================= */
.side { scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; transition: scrollbar-color .3s; -webkit-overflow-scrolling: touch; }
.side:hover, .side:focus-within { scrollbar-color: rgba(var(--brand-rgb), .35) transparent; }
.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.side::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; background-color: transparent; transition: background-color .3s; }
.side:hover::-webkit-scrollbar-thumb { background-color: rgba(var(--brand-rgb), .3); }
.side::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--brand-rgb), .55); }
@media (prefers-reduced-motion: reduce) { .side { scroll-behavior: auto; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- پنل: آیکن‌های سربرگ ---------- */
.ht-prev { display: inline-flex; flex-wrap: wrap; min-height: 44px; }
.ht-row { cursor: grab; user-select: none; }
.ht-row.off { opacity: .55; }
.ht-row.drag { opacity: .4; }
.ht-row.over { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .25); }
.ht-grip { color: var(--muted); display: grid; } .ht-grip svg { width: 18px; height: 18px; stroke-width: 3; }
.ht-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--surface2); color: var(--ink); flex: none; } .ht-ic svg { width: 19px; height: 19px; }

/* ---------- پنل: وضعیت سرور ---------- */
.st-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-list { display: grid; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
.st-row:first-child { border-top: 0; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ok); }
.st-warn .st-dot { background: var(--warn); } .st-err .st-dot { background: var(--err); } .st-info .st-dot { background: var(--ink); }
.st-l { flex: 1; min-width: 0; } .st-l b { display: block; font-size: 13.5px; } .st-l small { display: block; font-size: 12px; color: var(--muted); line-height: 1.8; overflow-wrap: anywhere; }
.st-v { font-size: 13px; color: var(--text2); text-align: end; max-width: 45%; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .st-row { flex-wrap: wrap; row-gap: 4px; } .st-l { flex: 1 1 calc(100% - 30px); } .st-v { max-width: none; flex: 1; text-align: right; padding-right: 21px; } }

/* ---------- پنل: آیکن شبکه‌ها و کارت QR ---------- */
.soc-rows { display: grid; gap: 10px; }
.soc-row { display: flex; align-items: flex-end; gap: 8px; }
.soc-row .fl { flex: 1; margin: 0; }
.soc-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--surface2); border: 1px dashed var(--line2); color: var(--muted); overflow: hidden; }
.soc-ic img { width: 100%; height: 100%; object-fit: cover; }
.soc-row label.ib { cursor: pointer; }
.qr-prev { display: flex; justify-content: center; padding: 16px; border-radius: 16px; background: var(--surface2); overflow: auto; }
.qr-card { --w: 148mm; width: var(--w); min-height: calc(var(--w) * 1.414); box-sizing: border-box; padding: 9% 8%; background: #fff; color: #0f172a; border-radius: 14px; box-shadow: var(--sh2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; text-align: center; }
.qr-card.sz-a4 { --w: 210mm; } .qr-card.sz-card { --w: 90mm; min-height: 55mm; padding: 4mm 5mm; flex-direction: row; gap: 4mm; text-align: start; flex-wrap: wrap; }
.qc-logo { max-height: 14mm; max-width: 60%; object-fit: contain; }
.qc-t { font-size: calc(var(--w) * .06); font-weight: 800; line-height: 1.5; }
.qc-codes { display: flex; flex-wrap: wrap; justify-content: center; gap: 5mm; width: 100%; }
.qc-codes figure { margin: 0; display: grid; gap: 2mm; justify-items: center; width: calc(var(--w) * .2); }
.qc-codes figure.main { width: calc(var(--w) * .56); flex-basis: 100%; max-width: calc(var(--w) * .56); }
.qc-codes svg { width: 100%; height: auto; display: block; }
.qc-codes figcaption { font-size: calc(var(--w) * .028); font-weight: 700; }
.qc-codes figure.main figcaption { display: none; }
.qc-s { font-size: calc(var(--w) * .034); color: #334155; }
.qc-u { font-size: calc(var(--w) * .026); color: #64748b; }
.qr-card.sz-card .qc-codes { width: auto; } .qr-card.sz-card .qc-codes figure.main { width: 30mm; max-width: 30mm; flex-basis: auto; }
.qr-card.sz-card .qc-codes figure { width: 14mm; } .qr-card.sz-card .qc-t { font-size: 5mm; flex-basis: 100%; } .qr-card.sz-card .qc-logo { max-height: 9mm; }
.qr-card.sz-card .qc-s, .qr-card.sz-card .qc-u { font-size: 3mm; }
body.qr-print { display: grid; place-items: center; min-height: 100vh; }
body.qr-print .qr-card { border-radius: 0; }

/* ---------- پنل: پیش‌نمایش کوچک صفحه ورود ---------- */
.lg-set { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
@media (max-width: 640px) { .lg-set { grid-template-columns: 1fr; } .lg-mini { justify-self: center; } }
.lg-mini { --lm: var(--brand); display: grid; justify-items: center; gap: 6px; width: 190px; padding: 18px 14px; border-radius: 18px; background: var(--surface2); border: 1px solid var(--line); box-shadow: var(--sh1); }
.lg-mini .lm-logo img { width: 52px; height: 52px; object-fit: contain; border-radius: 13px; background: #fff; }
.lg-mini b { font-size: 13px; } .lg-mini small { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.7; }
.lg-mini i { display: block; width: 100%; height: 14px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.lg-mini .lm-btn { width: 100%; height: 18px; border-radius: 7px; background: var(--lm, var(--brand)); background: linear-gradient(90deg, color-mix(in srgb, var(--lm, var(--brand)) 70%, #fff), var(--lm, var(--brand))); }
.lg-mini .lm-note { width: 100%; padding: 5px 6px; border-radius: 7px; background: var(--surface); text-align: start; }
/* قالب‌های کارت QR */
.qr-tpls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .qr-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qr-card { position: relative; overflow: hidden; }
.qr-card.tpl-brand { background: linear-gradient(to bottom, var(--qb) 0 37%, #fff 37%); }
.qr-card.tpl-brand .qc-t { color: #fff; }
.qr-card.tpl-brand .qc-logo, .qr-card.tpl-dark .qc-logo { background: #fff; padding: 2mm; border-radius: 3mm; }
.qr-card.tpl-dark { background: #0b1220; color: #fff; }
.qr-card.tpl-dark .qc-s { color: #cbd5e1; } .qr-card.tpl-dark .qc-u { color: #94a3b8; }
.qr-card.tpl-dark .qc-codes svg { border-radius: 2mm; }
.qr-card.tpl-frame { border: calc(var(--w) * .03) solid var(--qb); }
.qr-card.tpl-frame .qc-codes figure.main { position: relative; padding-bottom: calc(var(--w) * .02); }
.qr-card.tpl-frame .qc-codes figure.main figcaption { display: block; justify-self: center; padding: .4em 1.4em; border-radius: 99px; background: var(--qb); color: #fff; font-size: calc(var(--w) * .032); }
.qr-card.sz-card.tpl-brand { background: linear-gradient(to bottom, var(--qb) 0 50%, #fff 50%); }
.qr-card.sz-card.tpl-frame { border-width: 2mm; }
.qr-card.sz-card.tpl-frame .qc-codes figure.main figcaption { display: none; }