/* سئو ICSD — سامانهٔ طراحی پایه
   هویت: «کاشی» — رنگ‌های کاشی‌کاری کاشان (لاجورد، فیروزه، زعفران، لعاب سفید).
   هر صفحهٔ سایت یک کاشی است؛ ممیزی کاشی‌های شکسته را پیدا می‌کند.
   همهٔ پوسته‌ها (سایت عمومی، پنل مشتری، پنل مدیریت) از همین توکن‌ها و اجزا استفاده می‌کنند. */

@font-face { font-family: "Vazirmatn"; src: url("../vendor/fonts/vazirmatn-arabic-wght-normal.05d9ce2a23d3.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Vazirmatn"; src: url("../vendor/fonts/vazirmatn-latin-wght-normal.e7eada615dc3.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Kufi"; src: url("../vendor/fonts/noto-kufi-fa-wght.d2ff43834cc3.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../vendor/fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2-variations");
  font-weight: 100 800; font-display: swap; }

:root {
  /* رنگ */
  --lapis-900: #0c1533; --lapis-800: #14224f; --lapis-700: #1b2e6e; --lapis-600: #1f3a93; --lapis-500: #3554b8;
  --lapis-200: #c9d3ee; --lapis-100: #e4e9f7; --lapis-50: #f1f4fb;
  --firooze-700: #0b7f86; --firooze-600: #0e9690; --firooze-500: #12a5a0; --firooze-200: #a9e3df; --firooze-50: #e8f7f6;
  --saffron-700: #a86a00; --saffron-500: #f0a21e; --saffron-200: #fbe0a8; --saffron-50: #fef6e3;
  --lal-700: #a72a1a; --lal-500: #d8432f; --lal-200: #f5c3bb; --lal-50: #fdeeeb;
  --glaze: #fbfcfe; --paper: #ffffff; --mist: #f1f4fa; --line: #dce2ee; --line-strong: #c3ccdf;
  --ink: #101936; --ink-2: #3c4667; --ink-3: #6a7392; --ink-4: #98a0b8;

  --primary: var(--lapis-600); --primary-ink: #fff; --accent: var(--firooze-500);
  --good: #0e9f86; --ok: #e39a12; --bad: var(--lal-500);
  --bg: var(--glaze); --surface: var(--paper); --text: var(--ink); --text-muted: var(--ink-3);
  --focus: 0 0 0 3px rgba(31, 58, 147, .28);

  /* تایپ */
  --font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-display: "Kufi", "Vazirmatn", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem;
  --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem;

  /* فاصله و شکل */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-tile: 22%;
  --shadow-pop: 0 12px 32px -12px rgba(12, 21, 51, .28), 0 2px 6px rgba(12, 21, 51, .08);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.75; color: var(--text);
  background: var(--bg); font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }
img, svg { max-inline-size: 100%; vertical-align: middle; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--lapis-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lapis-800); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: var(--firooze-200); color: var(--lapis-900); }
[hidden] { display: none !important; }

/* ---------- تایپوگرافی ---------- */
.h1, .h2, .h3 { line-height: 1.35; font-weight: 800; color: var(--lapis-800); letter-spacing: -.01em; }
.h1 { font-size: var(--fs-2xl); } .h2 { font-size: var(--fs-xl); } .h3 { font-size: var(--fs-lg); font-weight: 700; }
.display { font-family: var(--font-display); font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.lead { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.9; }
.muted { color: var(--text-muted); } .small { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); }
.strong { font-weight: 700; }
.mono, .ltr { direction: ltr; unicode-bidi: isolate; } .mono { font-family: var(--font-mono); font-size: .92em; }
.ltr { text-align: start; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--mist); padding: .1em .4em; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center { text-align: center; } .text-end { text-align: end; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- چیدمان ---------- */
.container { inline-size: min(100% - 2rem, 1180px); margin-inline: auto; }
.container--narrow { inline-size: min(100% - 2rem, 760px); }
.flow > * + * { margin-block-start: var(--flow, var(--s4)); }
.row { display: flex; align-items: center; gap: var(--gap, var(--s3)); flex-wrap: wrap; }
.row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .row--top { align-items: flex-start; }
.row--nowrap { flex-wrap: nowrap; }
.grow { flex: 1 1 0; min-inline-size: 0; }
.grid { display: grid; gap: var(--gap, var(--s4)); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr)); }
.split { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .grid:not(.grid--auto) { grid-template-columns: minmax(0, 1fr); } .split { grid-template-columns: minmax(0, 1fr); } }
.split > *, .grid > * { min-inline-size: 0; }
.mt-0 { margin-block-start: 0 !important; } .mt-2 { margin-block-start: var(--s2); } .mt-4 { margin-block-start: var(--s4); }
.mt-5 { margin-block-start: var(--s5); } .mt-6 { margin-block-start: var(--s6); } .mb-4 { margin-block-end: var(--s4); }
.gap-1 { --gap: var(--s1); } .gap-2 { --gap: var(--s2); } .gap-5 { --gap: var(--s5); }
@media (max-width: 640px) { .hide-sm { display: none !important; } }
@media (min-width: 641px) { .only-sm { display: none !important; } }

/* ---------- آیکن ---------- */
.ic { inline-size: 1.15em; block-size: 1.15em; flex: none; vertical-align: -.2em; }
.ic--lg { inline-size: 1.6em; block-size: 1.6em; } .ic--xl { inline-size: 2.4em; block-size: 2.4em; }
.ic--flip { transform: scaleX(-1); } /* آیکن‌های جهت‌دار در RTL */

/* ---------- دکمه ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-block-size: 2.6rem;
  padding: .45rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper);
  color: var(--lapis-800); font-weight: 600; font-size: var(--fs-base); line-height: 1.4; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .1s; white-space: nowrap; }
.btn:hover { border-color: var(--lapis-500); color: var(--lapis-700); background: var(--lapis-50); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn--primary:hover { background: var(--lapis-700); border-color: var(--lapis-700); color: #fff; }
.btn--accent { background: var(--firooze-700); border-color: var(--firooze-700); color: #fff; }
.btn--accent:hover { background: #086a70; border-color: #086a70; color: #fff; }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--lapis-50); border-color: transparent; }
.btn--danger { color: var(--lal-700); border-color: var(--lal-200); }
.btn--danger:hover { background: var(--lal-50); border-color: var(--lal-500); color: var(--lal-700); }
.btn--sm { min-block-size: 2rem; padding: .2rem .7rem; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--lg { min-block-size: 3.2rem; padding: .6rem 1.6rem; font-size: var(--fs-md); }
.btn--block { inline-size: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::after { content: ""; inline-size: 1em; block-size: 1em; border: 2px solid currentColor;
  border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 0; color: var(--lapis-600); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; }

/* ---------- فرم ---------- */
.field { display: grid; gap: .35rem; align-content: start; }
.label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); }
.label .req { color: var(--lal-500); }
.input, .select, .textarea { inline-size: 100%; min-block-size: 2.7rem; padding: .45rem .8rem; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color .15s, box-shadow .15s; }
.textarea { min-block-size: 6.5rem; line-height: 1.8; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--lapis-500); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--lapis-600); box-shadow: var(--focus); }
.input[dir="ltr"], .input.ltr { text-align: left; font-family: var(--font-mono); font-size: .9rem; }
.input--lg { min-block-size: 3.3rem; font-size: var(--fs-md); padding-inline: 1rem; }
.select { appearance: none; padding-inline-end: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7392' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left .7rem center; background-size: 1rem; }
.help { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.7; }
.error, .errorlist { font-size: var(--fs-sm); color: var(--lal-700); list-style: none; padding: 0; margin: 0; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--lal-500); }
.form-grid { display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; padding-block-start: var(--s4);
  border-block-start: 1px solid var(--line); margin-block-start: var(--s5); }
.check { display: inline-flex; align-items: flex-start; gap: .6rem; cursor: pointer; line-height: 1.6; }
.check input { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .2rem; accent-color: var(--lapis-600); flex: none; }
.switch { position: relative; display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; }
.switch input { appearance: none; inline-size: 2.6rem; block-size: 1.5rem; border-radius: 99px; background: var(--line-strong);
  position: relative; transition: background .2s; cursor: pointer; flex: none; margin: 0; }
.switch input::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 1.125rem;
  block-size: 1.125rem; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.switch input:checked { background: var(--firooze-600); }
.switch input:checked::after { transform: translateX(-1.1rem); }
.input-group { display: flex; }
.input-group .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group .btn { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }
.secret-state { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--firooze-700); }

/* ---------- قاب (panel) ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-block-end: 1px solid var(--line); }
.panel__title { font-size: var(--fs-md); font-weight: 700; color: var(--lapis-800); display: flex; align-items: center; gap: .5rem; }
.panel__body { padding: var(--s5); }
.panel__body--flush { padding: 0; }
.panel__foot { padding: var(--s3) var(--s5); border-block-start: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-muted); }
.panel--accent { border-inline-start: 4px solid var(--accent); }
.panel--warn { border-inline-start: 4px solid var(--saffron-500); background: var(--saffron-50); }

/* ---------- آمار ---------- */
.stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { padding: var(--s4) var(--s5); border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line);
  margin: 0 -1px -1px 0; display: grid; gap: .15rem; align-content: start; }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); display: flex; align-items: center; gap: .4rem; }
.stat__value { font-size: var(--fs-xl); font-weight: 800; color: var(--lapis-800); line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.stat--good .stat__value { color: var(--good); } .stat--bad .stat__value { color: var(--bad); } .stat--ok .stat__value { color: var(--saffron-700); }
a.stat { text-decoration: none; color: inherit; transition: background .15s; }
a.stat:hover { background: var(--lapis-50); }

/* ---------- جدول ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: start; font-weight: 600; color: var(--ink-3); font-size: var(--fs-xs); padding: .7rem var(--s4);
  border-block-end: 1px solid var(--line-strong); white-space: nowrap; background: var(--mist); position: sticky; inset-block-start: 0; }
.table td { padding: .7rem var(--s4); border-block-end: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover td { background: var(--lapis-50); }
.table--dense td, .table--dense th { padding-block: .45rem; }
.table .cell-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.cell-num { text-align: end; }
.table .cell-actions { text-align: end; white-space: nowrap; }
.cell-url { direction: ltr; text-align: right; text-decoration: none; font-family: var(--font-mono); font-size: .8rem; max-inline-size: 420px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: var(--ink-2); }
a.cell-url:hover { color: var(--lapis-600); }
.table a.row-link { font-weight: 600; text-decoration: none; }
.table a.row-link:hover { text-decoration: underline; }
th a.sort { color: inherit; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
th a.sort.is-active { color: var(--lapis-700); }

/* ---------- نشان‌ها ---------- */
.badge, .sev, .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 99px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.8; white-space: nowrap; border: 1px solid transparent; }
.badge { background: var(--mist); color: var(--ink-2); }
.badge--ok { background: var(--firooze-50); color: var(--firooze-700); } .badge--warn { background: var(--saffron-50); color: var(--saffron-700); }
.badge--bad { background: var(--lal-50); color: var(--lal-700); } .badge--info { background: var(--lapis-50); color: var(--lapis-600); }
.badge--muted { background: transparent; border-color: var(--line-strong); color: var(--ink-3); }
.sev::before { content: ""; inline-size: .55rem; block-size: .55rem; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.sev--critical { background: var(--lal-50); color: var(--lal-700); } .sev--high { background: #fdf0e6; color: #b3510f; }
.sev--medium { background: var(--saffron-50); color: var(--saffron-700); } .sev--low { background: var(--lapis-50); color: var(--lapis-500); }
.sev--info { background: var(--mist); color: var(--ink-3); }
.chip { border-color: var(--line-strong); color: var(--ink-2); background: var(--paper); text-decoration: none; }
a.chip:hover, .chip.is-active { border-color: var(--lapis-600); color: var(--lapis-700); background: var(--lapis-50); }
.dot { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--ink-4); display: inline-block; }
.dot--ok { background: var(--good); } .dot--warn { background: var(--ok); } .dot--bad { background: var(--bad); }
.dot--live { background: var(--firooze-500); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.delta { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.delta--up { color: var(--good); } .delta--down { color: var(--bad); } .delta--flat { color: var(--ink-4); font-weight: 500; }

/* ---------- پیام‌ها ---------- */
.alert { display: flex; gap: .7rem; align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r);
  border: 1px solid var(--line); background: var(--mist); color: var(--ink-2); line-height: 1.8; }
.alert .ic { margin-block-start: .3rem; }
.alert--info { background: var(--lapis-50); border-color: var(--lapis-200); color: var(--lapis-800); }
.alert--ok, .alert--success { background: var(--firooze-50); border-color: var(--firooze-200); color: #07585d; }
.alert--warn, .alert--warning { background: var(--saffron-50); border-color: var(--saffron-200); color: #7a4d00; }
.alert--bad, .alert--error { background: var(--lal-50); border-color: var(--lal-200); color: var(--lal-700); }
.messages { display: grid; gap: var(--s2); margin-block-end: var(--s4); }

/* ---------- زبانه، صفحه‌بندی، مسیر ---------- */
.tabs { display: flex; gap: var(--s1); border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs__item { padding: .65rem 1rem; color: var(--ink-3); text-decoration: none; font-weight: 600; white-space: nowrap;
  border-block-end: 2px solid transparent; margin-block-end: -1px; display: inline-flex; gap: .45rem; align-items: center; }
.tabs__item:hover { color: var(--lapis-700); }
.tabs__item.is-active { color: var(--lapis-700); border-color: var(--lapis-600); }
.tabs__count { font-size: var(--fs-xs); background: var(--mist); border-radius: 99px; padding: 0 .5rem; color: var(--ink-3); }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s4); font-size: var(--fs-sm); }
.pager a, .pager span { min-inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center; border-radius: var(--r-sm);
  text-decoration: none; padding-inline: .5rem; color: var(--ink-2); }
.pager a:hover { background: var(--lapis-50); } .pager .is-current { background: var(--lapis-600); color: #fff; font-weight: 700; }
.pager .is-off { color: var(--ink-4); }
.crumbs { display: flex; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--lapis-600); }
.crumbs li + li::before { content: "‹"; margin-inline-end: .5rem; color: var(--ink-4); }

/* ---------- نوار ابزار و فیلتر ---------- */
.toolbar { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; padding: var(--s3) var(--s5);
  border-block-end: 1px solid var(--line); }
.toolbar .input, .toolbar .select { min-block-size: 2.3rem; inline-size: auto; font-size: var(--fs-sm); }
.toolbar .search { flex: 1 1 220px; max-inline-size: 360px; }

/* ---------- حالت خالی ---------- */
.empty { text-align: center; padding: var(--s7) var(--s5); color: var(--ink-3); display: grid; justify-items: center; gap: var(--s3); }
.empty__mark { inline-size: 64px; block-size: 64px; display: grid; place-items: center; color: var(--lapis-500);
  background: var(--lapis-50); border-radius: var(--r-tile); transform: rotate(45deg); }
.empty__mark .ic { transform: rotate(-45deg); inline-size: 28px; block-size: 28px; }
.empty__title { font-weight: 700; color: var(--lapis-800); font-size: var(--fs-md); }
.empty p { max-inline-size: 46ch; }

/* ---------- حلقهٔ امتیاز ---------- */
.ring { --ring-size: 120px; position: relative; inline-size: var(--ring-size); block-size: var(--ring-size); display: grid;
  place-items: center; flex: none; --ring-color: var(--ink-4); }
.ring svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.ring__track { fill: none; stroke: var(--line); stroke-width: 7; }
.ring__bar { fill: none; stroke: var(--ring-color); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.ring__value { font-size: calc(var(--ring-size) * .32); font-weight: 800; color: var(--lapis-800); line-height: 1;
  font-variant-numeric: tabular-nums; }
.ring__label { position: absolute; inset-block-end: 18%; font-size: calc(var(--ring-size) * .1); color: var(--ink-3); }
.ring:has(.ring__label) .ring__value { transform: translateY(-12%); }
.ring--good { --ring-color: var(--good); } .ring--ok { --ring-color: var(--ok); } .ring--bad { --ring-color: var(--bad); }
.score-text--good { color: var(--good); } .score-text--ok { color: var(--saffron-700); } .score-text--bad { color: var(--bad); }

/* ---------- نمودارها (SVG سمت سرور) ---------- */
.chart-wrap { margin: 0; } .chart { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
.chart__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart__tick { font-size: 11px; fill: var(--ink-3); font-family: var(--font); }
.chart__line { fill: none; stroke: var(--lapis-600); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--2 { stroke: var(--firooze-500); stroke-width: 2; stroke-dasharray: 5 4; }
.chart__area { fill: var(--lapis-600); opacity: .08; }
.chart__dot { fill: transparent; } .chart__dot:hover { fill: var(--lapis-600); r: 4; }
.chart-legend { display: flex; gap: var(--s4); font-size: var(--fs-xs); color: var(--ink-3); margin-block-end: var(--s2); }
.legend::before { content: ""; display: inline-block; inline-size: 1rem; block-size: 3px; border-radius: 2px; vertical-align: middle;
  margin-inline-end: .4rem; background: var(--lapis-600); }
.legend--2::before { background: var(--firooze-500); }
.chart-empty { color: var(--ink-3); font-size: var(--fs-sm); padding: var(--s5); text-align: center; }
.spark path { stroke: var(--lapis-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .spark circle { fill: var(--lapis-600); }
.spark--good path { stroke: var(--good); } .spark--good circle { fill: var(--good); }
.spark--bad path { stroke: var(--bad); } .spark--bad circle { fill: var(--bad); }
.hbars { display: grid; gap: .55rem; }
.hbar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: var(--s3); align-items: center; font-size: var(--fs-sm); }
.hbar__label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__track { block-size: .6rem; background: var(--mist); border-radius: 3px; overflow: hidden; display: flex; }
.hbar__fill { background: var(--lapis-500); border-radius: 3px; }
.hbar__value { font-variant-numeric: tabular-nums; font-weight: 600; min-inline-size: 2.5ch; text-align: end; }
.stack { display: flex; block-size: .7rem; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--mist); }
.stack__seg { background: var(--ink-4); }
.hbar__fill.sev--critical, .stack__seg.sev--critical { background: var(--lal-500); }
.hbar__fill.sev--high, .stack__seg.sev--high { background: #e8762b; }
.hbar__fill.sev--medium, .stack__seg.sev--medium { background: var(--saffron-500); }
.hbar__fill.sev--low, .stack__seg.sev--low { background: var(--lapis-500); }
.hbar__fill.sev--info, .stack__seg.sev--info { background: var(--ink-4); }
.hbar__fill.is-good, .stack__seg.is-good { background: var(--good); }
.progress { block-size: .5rem; background: var(--mist); border-radius: 99px; overflow: hidden; }
.progress__bar { block-size: 100%; background: var(--firooze-500); border-radius: 99px; transition: inline-size .5s var(--ease); }
.progress--bad .progress__bar { background: var(--bad); } .progress--warn .progress__bar { background: var(--ok); }

/* ---------- فهرست کلید/مقدار ---------- */
.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: .55rem var(--s5); font-size: var(--fs-sm); }
.kv dt { color: var(--ink-3); } .kv dd { font-weight: 500; min-inline-size: 0; overflow-wrap: anywhere; }

/* ---------- گفت‌وگو، منو ---------- */
.dialog { border: 0; border-radius: var(--r-lg); padding: 0; inline-size: min(92vw, 520px); box-shadow: var(--shadow-pop); color: var(--text); }
.dialog::backdrop { background: rgba(12, 21, 51, .5); }
.dialog__head { padding: var(--s4) var(--s5); border-block-end: 1px solid var(--line); font-weight: 700; display: flex;
  justify-content: space-between; align-items: center; }
.dialog__body { padding: var(--s5); } .dialog__foot { padding: var(--s4) var(--s5); border-block-start: 1px solid var(--line);
  display: flex; gap: var(--s3); justify-content: flex-end; }
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; }
.menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 30; min-inline-size: 200px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: var(--s2); }
.menu__list a, .menu__list button { display: flex; gap: .6rem; align-items: center; inline-size: 100%; padding: .5rem .7rem;
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); background: none; border: 0; cursor: pointer; text-align: start; }
.menu__list a:hover, .menu__list button:hover { background: var(--lapis-50); color: var(--lapis-700); }
.menu__sep { block-size: 1px; background: var(--line); margin: var(--s2) 0; }

/* ---------- متن بلند (خروجی هوش مصنوعی، صفحه‌های متنی) ---------- */
.prose { line-height: 2; color: var(--ink-2); max-inline-size: 72ch; }
.prose > * + * { margin-block-start: .8em; }
.prose h3, .prose h4, .prose h5, .prose h6 { color: var(--lapis-800); font-size: var(--fs-md); font-weight: 700; margin-block-start: 1.4em; }
.prose ul, .prose ol { padding-inline-start: 1.4em; } .prose li + li { margin-block-start: .3em; }
.prose strong { color: var(--ink); }
.ai-box { border: 1px solid var(--firooze-200); background: var(--firooze-50); border-radius: var(--r-lg); padding: var(--s5); }
.ai-box__head { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--firooze-700); margin-block-end: var(--s3); }

/* ---------- کاشی (نشان برند) ---------- */
.tile-mark { inline-size: 1.9rem; block-size: 1.9rem; flex: none; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--lapis-800); font-weight: 800;
  font-size: var(--fs-md); }
.brand__name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }

/* ---------- Tom Select و تقویم شمسی (هماهنگ با پوسته) ---------- */
.ts-wrapper { font: inherit; }
.ts-wrapper .ts-control { min-block-size: 2.7rem; border: 1px solid var(--line-strong); border-radius: var(--r); padding: .4rem .8rem;
  font-size: var(--fs-base); box-shadow: none; background: var(--paper); }
.ts-wrapper.focus .ts-control { border-color: var(--lapis-600); box-shadow: var(--focus); }
.ts-dropdown { border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); margin-block-start: 4px; }
.ts-dropdown .active { background: var(--lapis-50); color: var(--lapis-800); }
.ts-dropdown .create, .ts-dropdown .no-results { padding: .5rem .8rem; color: var(--ink-3); }
jdp-container { font-family: var(--font) !important; border-radius: var(--r) !important; box-shadow: var(--shadow-pop) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important; }
}