@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --text: #1d1b16;
  --muted: #6b665c;
  --border: #e3e0d7;
  --accent: #b5562d;
  --accent-soft: #f6e5dc;
  --accent-text: #ffffff;
  --good: #2f7a4f;
  --warn: #a8741a;
  --danger: #b3261e;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15140f;
    --surface: #1e1d18;
    --surface-2: #272520;
    --text: #efece4;
    --muted: #a39d90;
    --border: #34322b;
    --accent: #e0835a;
    --accent-soft: #3a261c;
    --accent-text: #1a120d;
    --good: #6cc592;
    --warn: #e0b45a;
    --danger: #f08a80;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Vazirmatn, Tahoma, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
  font-size: 15px;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 800; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px 64px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 9px 16px; cursor: pointer; font-weight: 600; transition: .15s;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.btn.lg { padding: 12px 24px; font-size: 16px; }

input[type=text], input[type=number], input[type=password], textarea, select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; outline: none; transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 110px; }
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
label.field > small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
[dir=ltr] { text-align: left; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; transition: .15s;
}
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.badge {
  display: inline-block; font-size: 12px; padding: 1px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.good { color: var(--good); }

.spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border);
  border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 10px;
  z-index: 100; max-width: calc(100% - 32px); box-shadow: var(--shadow);
}
.toast.error { background: var(--danger); color: #fff; }

/* ---------- markdown ---------- */
.md h1, .md h2, .md h3, .md h4 { line-height: 1.5; margin: 1.4em 0 .5em; }
.md h2 { font-size: 20px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.md h3 { font-size: 17px; }
.md p { margin: .6em 0; }
.md ul, .md ol { padding-inline-start: 1.4em; margin: .5em 0; }
.md li { margin: .2em 0; }
.md code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.md blockquote { margin: .8em 0; padding: 4px 14px; border-inline-start: 3px solid var(--accent); background: var(--surface-2); border-radius: 6px; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.md .tbl { overflow-x: auto; }
.md table { border-collapse: collapse; width: 100%; margin: .8em 0; font-size: 14px; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; text-align: right; vertical-align: top; }
.md th { background: var(--surface-2); }
.md > :first-child { margin-top: 0; }

/* ---------- نمودارهای SSM ---------- */
:root { --good-soft: #e3f2e8; --danger-soft: #fbe4e2; --money: #2f7a4f; --power: #7a4fb5; --info: #3a6fb0; }
@media (prefers-color-scheme: dark) { :root { --good-soft: #1d3326; --danger-soft: #3a1f1d; --money: #6cc592; --power: #b593e6; --info: #7fb0ec; } }
.diagram { overflow-x: auto; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.diagram-svg { display: block; width: 100%; min-width: 680px; height: auto; font-family: Vazirmatn, Tahoma, sans-serif; }
.rp-frame { fill: var(--surface); stroke: var(--border); stroke-width: 2; stroke-dasharray: 2 6; }
.rp-frame.desired { fill: var(--good-soft); stroke: var(--good); }
.rp-cloud { fill: var(--surface-2); stroke: var(--border); }
.rp-cloud-t, .rp-role, .rp-label { fill: var(--muted); }
.rp-name { fill: var(--text); font-weight: 700; }
.rp-node { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; }
.rp-actor.client .rp-node { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 3; }
.rp-actor.st-new .rp-node { fill: var(--good-soft); stroke: var(--good); stroke-width: 3; }
.rp-actor.st-changed .rp-node { stroke: var(--good); stroke-width: 3; stroke-dasharray: 6 4; }
.rp-bubble-box { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
.rp-bubble-dot { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; }
.rp-bubble-t { fill: var(--text); font-style: italic; }
.rp-label-bg { fill: var(--surface); stroke: var(--border); }
.arw.k-money, .arw.k-goods, .arw.k-info, .arw.k-power, .arw.k-support, .arw.k-service, .arw.k-conflict, .arw.k-muted, .arw.k-new, .arw.k-model { stroke: none; }
.k-money { stroke: var(--money); fill: var(--money); }
.k-goods { stroke: var(--warn); fill: var(--warn); }
.k-info { stroke: var(--info); fill: var(--info); }
.k-power { stroke: var(--power); fill: var(--power); }
.k-support, .k-service { stroke: var(--good); fill: var(--good); }
.k-conflict { stroke: var(--danger); fill: var(--danger); }
.k-muted { stroke: var(--muted); fill: var(--muted); }
.k-new { stroke: var(--good); fill: var(--good); }
.k-model { stroke: var(--accent); fill: var(--accent); }
path.rp-rel { fill: none; stroke-width: 2.2; }
path.rp-rel.k-conflict { stroke-dasharray: 8 6; stroke-width: 2.6; }
path.rp-rel.k-info { stroke-dasharray: 2 5; }
path.rp-rel.st-same { stroke: var(--muted); opacity: .45; }
path.rp-rel.st-new, path.rp-rel.st-changed { stroke: var(--good); stroke-width: 3; opacity: 1; }
.rp-label-bg.st-new { stroke: var(--good); }
.cm-boundary { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 10 7; }
.cm-boundary-t, .cm-e-measure { fill: var(--muted); }
.cm-box { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.cm-label { fill: var(--text); font-weight: 600; }
.cm-num { fill: var(--accent); }
.cm-num-t { fill: var(--accent-text); font-weight: 700; }
.cm-edge { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .75; }
.cm-mon { fill: var(--surface-2); stroke: var(--border); stroke-dasharray: 6 4; }
.cm-mon-link { stroke: var(--muted); stroke-dasharray: 4 4; }
.cm-mon-title { fill: var(--text); font-weight: 700; }
.cm-e-title { fill: var(--accent); font-weight: 700; }
.cm-e-text { fill: var(--text); }

/* ---------- جلسه‌های کشف ---------- */
.ssm-steps { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.ssm-steps .sess { font-size: 11px; color: var(--muted); margin-inline: 8px 2px; }
.ssm-steps .sess:first-child { margin-inline-start: 0; }
.ssm-step { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.ssm-step.now { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700; }
.ssm-step.done { color: var(--good); }
.disc-card { min-height: 300px; }
.disc-card h2 { font-size: 20px; line-height: 1.6; margin: 0 0 8px; }
.disc-card .lead { color: var(--muted); margin: 0 0 14px; }
.coach-q { font-size: 18px; line-height: 1.8; font-weight: 600; margin: 4px 0 6px; white-space: pre-wrap; }
.disc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.disc-actions .spacer { flex: 1; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.sugg button { font-size: 13px; border: 1px dashed var(--border); background: transparent; border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--text); text-align: right; }
.sugg button:hover { border-color: var(--accent); color: var(--accent); }
.cov { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.cov span { font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.cov span.c1 { border-color: var(--accent); color: var(--accent); }
.cov span.c2 { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.busy { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 50px 10px; color: var(--muted); text-align: center; }
.busy .spinner { width: 30px; height: 30px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tension { background: var(--danger-soft); color: var(--danger); border-radius: 99px; padding: 3px 12px; font-size: 13px; }
.hw { background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.hw b { color: var(--accent); }
.opt-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: var(--surface-2); cursor: pointer; transition: .15s; }
.opt-card:hover { border-color: var(--accent); }
.opt-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.opt-card h3 { margin: 0 0 4px; font-size: 16px; }
.catwoe { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.catwoe td { border-top: 1px solid var(--border); padding: 5px 6px; vertical-align: top; }
.catwoe td:first-child { font-weight: 700; color: var(--accent); white-space: nowrap; width: 1%; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.seg button { border: 0; background: var(--surface); padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--muted); }
.seg button + button { border-inline-start: 1px solid var(--border); }
.seg button.on.good, .seg button.on.yes { background: var(--good); color: #fff; }
.seg button.on.weak, .seg button.on.hard { background: var(--warn); color: #fff; }
.seg button.on.missing, .seg button.on.no { background: var(--danger); color: #fff; }
.row-item { border-top: 1px solid var(--border); padding: 12px 0; }
.row-item .top { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.row-item input { margin-top: 8px; }
.shift { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--border); }
.shift .from { color: var(--muted); }
.shift .to { color: var(--good); font-weight: 600; }
.tabs-mini { display: inline-flex; gap: 4px; margin-bottom: 10px; }
.tabs-mini button { border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: 4px 14px; cursor: pointer; font-size: 13px; }
.tabs-mini button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
table.plan { width: 100%; border-collapse: collapse; font-size: 14px; }
table.plan th, table.plan td { text-align: right; padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.plan th { color: var(--muted); font-size: 13px; font-weight: 600; }
@media (max-width: 600px) { .shift { grid-template-columns: 1fr; } .shift .arrow { display: none; } }