/* ============================================================
   فناپذیر (Fanapazhir BPMS) — Design System
   Modern organizational UI · RTL · Vazirmatn
   ============================================================ */

@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --c-primary-900: #0B2E52;
  --c-primary-700: #12467F;
  --c-primary-500: #1E6BB8;
  --c-primary-300: #7FB3E3;
  --c-primary-50:  #EDF4FB;
  --c-accent: #0D9488;
  --c-accent-dark: #0B7A70;
  --c-gold: #E8A33D;
  --c-gold-dark: #C9871F;
  --c-bg: #F4F7FB;
  --c-card: #FFFFFF;
  --c-border: #E2E8F0;
  --c-border-soft: #EDF2F8;
  --c-text: #1F2A44;
  --c-text-2: #64748B;
  --c-success: #22C55E; --c-success-bg: #ECFDF3;
  --c-warning: #F59E0B; --c-warning-bg: #FFFAEB;
  --c-danger: #EF4444;  --c-danger-bg: #FEF3F2;
  --c-info: #3B82F6;    --c-info-bg: #EFF6FF;
  --c-purple: #8B5CF6;  --c-purple-bg: #F5F3FF;
  /* extended tokens (themable) */
  --bg: var(--c-bg);
  --c-topbar: rgba(255,255,255,.82);
  --c-row-hover: #F7FAFE;
  --c-tint-a: #FBFDFF;
  --c-tint-b: #F2F7FD;
  --c-grad-1: #0B2E52;   /* sidebar gradient start */
  --c-grad-2: #123E6E;   /* sidebar gradient end */
  --glow-1: rgba(30,107,184,.09);
  --glow-2: rgba(13,148,136,.07);
  --map-bg-1: #F7FBFF; --map-bg-2: #EEF4FB;
  --focus-ring: rgba(30,107,184,.16);
  --shadow-sm: 0 1px 3px rgba(15, 45, 85, .07), 0 1px 2px rgba(15, 45, 85, .05);
  --shadow: 0 6px 24px rgba(15, 45, 85, .08), 0 2px 6px rgba(15, 45, 85, .05);
  --shadow-lg: 0 16px 48px rgba(15, 45, 85, .16), 0 4px 12px rgba(15, 45, 85, .08);
  --radius: 16px;
  --radius-sm: 12px;
  --sidebar-w: 264px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.8;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary-500); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-primary-700); }
img { max-width: 100%; }
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.5; }
.mono { font-family: 'Vazirmatn', monospace; letter-spacing: .3px; }
.muted { color: var(--c-text-2); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.mt { margin-top: 16px; } .mt-2 { margin-top: 8px; } .mb { margin-bottom: 16px; }
.m-0 { margin: 0; }
.text-danger { color: var(--c-danger); } .text-success { color: #16A34A; }
.req { color: var(--c-danger); font-style: normal; }

/* ---------- Icons ---------- */
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; }
.ic.tiny { width: 14px; height: 14px; }

/* ============================================================ APP LAYOUT */
.app-body { min-height: 100vh; }
.layout { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--c-primary-900) 0%, var(--c-primary-700) 100%);
  color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 50;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-logo { width: 44px; height: 44px; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: .2px; }
.brand-sub { font-size: 11px; color: var(--c-primary-300); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 12px 20px; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }
.nav-section { font-size: 10.5px; color: var(--c-primary-300); padding: 16px 10px 6px; letter-spacing: .4px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  color: rgba(255,255,255,.82); padding: 10px 12px; border-radius: 10px;
  margin-bottom: 2px; font-size: 13.5px; font-weight: 500;
  position: relative; transition: background .2s, color .2s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active::before {
  content: ''; position: absolute; right: -12px; top: 8px; bottom: 8px;
  width: 4px; border-radius: 4px; background: var(--c-gold);
}
.nav-badge {
  margin-right: auto; background: var(--c-gold); color: var(--c-primary-900);
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.12); }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 10.5px; color: var(--c-primary-300); }
.sidebar-logout { color: rgba(255,255,255,.7); padding: 8px; border-radius: 8px; }
.sidebar-logout:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- Main area ---------- */
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 26px; background: var(--c-topbar); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 40;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.page-title { font-size: 17px; font-weight: 700; color: var(--c-primary-900); }
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search .ic { position: absolute; right: 12px; color: var(--c-text-2); width: 16px; height: 16px; }
.topbar-search input {
  border: 1px solid var(--c-border); border-radius: 10px;
  padding: 8px 36px 8px 14px; width: 280px; font: inherit; font-size: 13px;
  background: var(--c-bg); transition: border .2s, box-shadow .2s;
}
.topbar-search input:focus { outline: none; border-color: var(--c-primary-300); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--c-card); }
.icon-btn {
  border: 1px solid var(--c-border); background: var(--c-card); color: var(--c-text-2);
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s; position: relative;
}
.icon-btn:hover { color: var(--c-primary-500); border-color: var(--c-primary-300); background: var(--c-primary-50); }
.icon-btn.danger:hover { color: var(--c-danger); border-color: #FCA5A5; background: var(--c-danger-bg); }
.dot-badge {
  position: absolute; top: -6px; left: -6px; background: var(--c-danger); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; border: 2px solid var(--c-card);
}
.content { flex: 1; padding: 26px; max-width: 1440px; width: 100%; margin: 0 auto; }
.app-footer { text-align: center; color: var(--c-text-2); font-size: 11.5px; padding: 18px; border-top: 1px solid var(--c-border); }

/* ---------- Avatar ---------- */
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary-500), var(--c-accent));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.profile-btn { display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; font: inherit; color: var(--c-text); padding: 4px; border-radius: 10px; }
.profile-btn:hover { background: var(--c-bg); }
.profile-name { font-size: 13px; font-weight: 600; }

/* ---------- Dropdowns ---------- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 60;
}
.dropdown-menu.open { display: block; animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dropdown-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--c-border); }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--c-text); font-size: 13px; }
.dropdown-item:hover { background: var(--c-primary-50); }
.dropdown-empty { padding: 26px; text-align: center; color: var(--c-text-2); font-size: 13px; }
.dropdown-foot { display: block; text-align: center; padding: 10px; border-top: 1px solid var(--c-border); font-size: 12.5px; font-weight: 600; }
.notif-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--c-text); }
.notif-item:hover { background: var(--c-primary-50); }
.notif-item.unread { background: var(--c-primary-50); }
.notif-item.unread .notif-title::after { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--c-primary-500); border-radius: 50%; margin-right: 6px; }
.notif-title { font-size: 12.5px; font-weight: 600; }
.notif-body { font-size: 11.5px; color: var(--c-text-2); }
.notif-time { font-size: 10.5px; color: var(--c-text-2); white-space: nowrap; }
.notif-page-list .notif-item { padding: 14px 12px; border-bottom: 1px solid var(--c-border); border-radius: 0; }
.notif-page-list .notif-item:last-of-type { border-bottom: none; }
.link-btn { border: none; background: none; color: var(--c-primary-500); font: inherit; font-size: 12.5px; cursor: pointer; font-weight: 600; }
.link-btn:hover { color: var(--c-primary-700); text-decoration: underline; }

/* ============================================================ CARDS */
.card {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 22px; margin-bottom: 20px;
  animation: fadeUp .35s ease;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--c-primary-900); padding-bottom: 12px; border-bottom: 1px solid var(--c-border); margin-bottom: 16px; }
.card-title.no-border { border-bottom: none; padding-bottom: 0; margin-bottom: 10px; }
.card-title .ic { color: var(--c-primary-500); }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

/* ---------- Page grids ---------- */
.page-grid.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-box { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px; }
.chart-box h4 { font-size: 12.5px; color: var(--c-text-2); font-weight: 600; margin-bottom: 10px; }

/* ---------- KPI ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 18px 20px 16px; box-shadow: var(--shadow-sm); color: var(--c-text);
  transition: transform .2s, box-shadow .2s;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi-card::after { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; }
.kpi-primary::after { background: var(--c-primary-500); }
.kpi-gold::after { background: var(--c-gold); }
.kpi-success::after { background: var(--c-success); }
.kpi-info::after { background: var(--c-info); }
.kpi-purple::after { background: var(--c-purple); }
.kpi-icon { position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.kpi-primary .kpi-icon { background: var(--c-primary-50); color: var(--c-primary-500); }
.kpi-gold .kpi-icon { background: #FDF4E5; color: var(--c-gold-dark); }
.kpi-success .kpi-icon { background: var(--c-success-bg); color: #16A34A; }
.kpi-info .kpi-icon { background: var(--c-info-bg); color: var(--c-info); }
.kpi-purple .kpi-icon { background: var(--c-purple-bg); color: var(--c-purple); }
.kpi-value { font-size: 30px; font-weight: 800; color: var(--c-primary-900); line-height: 1.3; }
.kpi-label { font-size: 12.5px; color: var(--c-text-2); font-weight: 500; }

/* ---------- Dash head ---------- */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.dash-greet { font-size: 21px; color: var(--c-primary-900); }

/* ---------- Task / mini lists ---------- */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-card); color: var(--c-text); transition: border .2s, box-shadow .2s; }
a.task-item:hover { border-color: var(--c-primary-300); box-shadow: var(--shadow-sm); }
.task-row { flex-wrap: wrap; }
.task-overdue { border-color: #FECACA; background: #FFF9FA; }
.task-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--c-primary-50); color: var(--c-primary-500); display: flex; align-items: center; justify-content: center; }
.task-overdue .task-icon { background: var(--c-danger-bg); color: var(--c-danger); }
.task-info { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.task-info b { font-size: 13.5px; font-weight: 600; }
.task-sub { font-size: 11.5px; color: var(--c-text-2); }
.mini-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--c-text); }
.mini-item:hover { background: var(--c-primary-50); }
.mini-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--c-bg); color: var(--c-primary-500); display: flex; align-items: center; justify-content: center; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 20px;
  transition: all .2s; white-space: nowrap;
}
.btn .ic { width: 16px; height: 16px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--c-primary-500); color: #fff; box-shadow: 0 4px 14px rgba(30,107,184,.3); }
.btn-primary:hover { background: var(--c-primary-700); color: #fff; }
.btn-gold { background: var(--c-gold); color: var(--c-primary-900); box-shadow: 0 4px 14px rgba(232,163,61,.35); }
.btn-gold:hover { background: var(--c-gold-dark); color: #fff; }
.btn-teal { background: var(--c-accent); color: #fff; box-shadow: 0 4px 14px rgba(13,148,136,.3); }
.btn-teal:hover { background: var(--c-accent-dark); color: #fff; }
.btn-success { background: var(--c-success); color: #fff; }
.btn-success:hover { background: #16A34A; color: #fff; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #DC2626; color: #fff; }
.btn-ghost { background: transparent; border-color: var(--c-border); color: var(--c-text-2); }
.btn-ghost:hover { border-color: var(--c-primary-300); color: var(--c-primary-500); background: var(--c-primary-50); }
.btn-danger-outline { background: var(--c-card); border-color: #FCA5A5; color: var(--c-danger); }
.btn-danger-outline:hover { background: var(--c-danger-bg); color: var(--c-danger); }
.btn-warning-outline { background: var(--c-card); border-color: #FCD34D; color: #B45309; }
.btn-warning-outline:hover { background: var(--c-warning-bg); }
.btn-sm { padding: 6px 13px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 13px 30px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* ============================================================ FORMS */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; flex: 1; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--c-text-2); }
.form-row { display: flex; gap: 14px; }
.form-control {
  border: 1px solid var(--c-border); border-radius: 10px; padding: 9px 13px;
  font: inherit; font-size: 13.5px; background: var(--c-card); color: var(--c-text);
  width: 100%; transition: border .2s, box-shadow .2s;
}
.form-control:focus { outline: none; border-color: var(--c-primary-500); box-shadow: 0 0 0 3px rgba(30,107,184,.13); }
.form-control:disabled { background: var(--c-bg); color: var(--c-text-2); }
.form-control.is-invalid { border-color: var(--c-danger); }
textarea.form-control { resize: vertical; min-height: 44px; }
select.form-control { cursor: pointer; }
input[type=file].form-control { padding: 7px; background: var(--c-bg); }
.form-error { font-size: 11.5px; color: var(--c-danger); font-weight: 500; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--c-primary-500); cursor: pointer; }
.user-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.jdate { display: flex; gap: 8px; }
.jdate .form-control { padding: 8px 8px; }
.jdate-y { width: 100%; } .jdate-m { width: 100%; } .jdate-d { width: 78px; }

.fieldset { border: 1px solid var(--c-border); border-radius: 12px; padding: 18px 18px 8px; margin-bottom: 18px; background: #FBFCFE; }
.legend, .fieldset legend { font-size: 13px; font-weight: 700; color: var(--c-primary-700); padding: 0 8px; }

.repeat-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.repeat-row .form-control { padding: 8px 12px; }
.inline-form { display: inline; }

.table-filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.table-filters .form-control { width: auto; }
.filter-grow { flex: 1; min-width: 200px; }
.filter-grow .form-control { width: 100%; }

/* ============================================================ BADGES */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.badge-gray { background: #F1F5F9; color: #475569; }
.badge-slate { background: #E2E8F0; color: #475569; }
.badge-blue { background: var(--c-primary-50); color: var(--c-primary-700); }
.badge-navy { background: var(--c-primary-900); color: #fff; }
.badge-green { background: var(--c-success-bg); color: #15803D; }
.badge-lime { background: #ECFCCB; color: #4D7C0F; }
.badge-yellow { background: var(--c-warning-bg); color: #B45309; }
.badge-amber { background: #FFF7E6; color: #92400E; }
.badge-orange { background: #FFF1E6; color: #C2410C; }
.badge-darkorange { background: #FFEFE5; color: #9A3412; }
.badge-red { background: var(--c-danger-bg); color: #B91C1C; }
.badge-purple { background: var(--c-purple-bg); color: #6D28D9; }
.badge-purplelight { background: #EDE9FE; color: #7C3AED; }
.badge-violet { background: #F5F3FF; color: #6D28D9; }
.badge-teal { background: #E6FAF7; color: #0B7A70; }
.badge-cyan { background: #E0F2FE; color: #0369A1; }

/* ============================================================ TABLES */
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--c-border); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--c-card); }
.table th { text-align: right; font-size: 11.5px; font-weight: 700; color: var(--c-text-2); background: var(--c-bg); padding: 11px 14px; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--c-border-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--c-row-hover); }
.row-link { cursor: pointer; }
.row-actions { display: flex; gap: 4px; }

/* ============================================================ TABS */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 12px 12px 0 0; padding: 6px; margin-bottom: 0; border-bottom: none; overflow-x: auto; }
.tab { border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--c-text-2); padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: all .2s; white-space: nowrap; }
.tab:hover { background: var(--c-primary-50); color: var(--c-primary-700); }
.tab.active { background: var(--c-primary-500); color: #fff; box-shadow: 0 3px 10px rgba(30,107,184,.3); }
.tab-ai .ic { width: 14px; height: 14px; }
.tab-panel { display: none; background: var(--c-card); border: 1px solid var(--c-border); border-top: none; border-radius: 0 0 12px 12px; padding: 20px; margin-bottom: 20px; animation: fadeUp .3s ease; }
.tab-panel.active { display: block; }

/* ============================================================ APP VIEW (case file) */
.app-header-card { background: linear-gradient(135deg, #fff 60%, var(--c-primary-50)); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 22px; margin-bottom: 20px; }
.app-header-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.app-header-id { display: flex; align-items: center; gap: 14px; }
.app-header-id h2 { font-size: 18px; color: var(--c-primary-900); }
.app-header-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--c-primary-500), var(--c-primary-700)); color: #fff; display: flex; align-items: center; justify-content: center; }
.app-header-icon .ic { width: 24px; height: 24px; }
.app-header-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; }
.app-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.app-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.app-side { position: sticky; top: 84px; }
.side-card { padding: 16px; }
.side-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--c-primary-900); margin-bottom: 12px; }
.side-title .ic { color: var(--c-accent); }
.side-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px dashed var(--c-border); }
.side-kv:last-child { border-bottom: none; }
.side-kv span { color: var(--c-text-2); }
.side-task { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--c-bg); border-radius: 10px; margin-bottom: 8px; font-size: 12.5px; }
.side-event { display: flex; gap: 10px; align-items: center; padding: 7px 0; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 20px; }
.info-item { display: flex; flex-direction: column; gap: 2px; }
.info-item > span { font-size: 11.5px; color: var(--c-text-2); }
.info-item > b { font-size: 13.5px; font-weight: 600; }
.boxed-text { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #334155; white-space: pre-wrap; }
.callout { background: var(--c-primary-50); border: 1px solid #D6E6F5; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 20px; padding: 3px 12px; font-size: 12px; font-weight: 500; }
.chip-green { background: var(--c-success-bg); border-color: #BBF7D0; color: #15803D; }
.chip-red { background: var(--c-danger-bg); border-color: #FECACA; color: #B91C1C; }
.chip-lg { padding: 8px 18px; font-size: 13.5px; }
.big-chips { gap: 12px; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 8px; color: var(--c-text); transition: border .2s; }
.file-row:hover { border-color: var(--c-primary-300); background: var(--c-primary-50); }
.file-row .ic { color: var(--c-primary-500); }
.file-name { flex: 1; font-size: 13px; }
.file-size { font-size: 11.5px; }
.steps-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.referee-opinion, .council-decision-box { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 12px; padding: 16px; margin-top: 14px; }

/* ============================================================ STEPPER */
.stepper { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-top: 6px; }
.step { display: flex; align-items: center; flex: 1; min-width: 90px; position: relative; flex-direction: column; gap: 7px; }
.step-bullet {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; z-index: 2; border: 2px solid var(--c-border); background: var(--c-card); color: var(--c-text-2);
}
.step .ic { width: 14px; height: 14px; }
.step-label { font-size: 10.5px; color: var(--c-text-2); font-weight: 600; text-align: center; white-space: nowrap; }
.step-line { position: absolute; top: 15px; right: calc(50% + 20px); left: calc(-50% + 20px); height: 2px; background: var(--c-border); z-index: 1; }
.step.done .step-bullet { background: var(--c-success-bg); border-color: var(--c-success); color: #15803D; }
.step.done .step-line { background: var(--c-success); }
.step.done .step-label { color: #15803D; }
.step.current .step-bullet { background: var(--c-primary-500); border-color: var(--c-primary-500); color: #fff; box-shadow: 0 0 0 5px rgba(30,107,184,.18); }
.step.current .step-label { color: var(--c-primary-700); font-weight: 700; }
.step.current.stopped .step-bullet { background: var(--c-danger); border-color: var(--c-danger); box-shadow: 0 0 0 5px rgba(239,68,68,.15); }
.step.current.stopped .step-label { color: var(--c-danger); }

/* ============================================================ TIMELINE */
.timeline { position: relative; padding-right: 20px; }
.timeline::before { content: ''; position: absolute; right: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--c-border); }
.timeline-item { position: relative; padding: 0 22px 22px 0; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; right: -20px; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 2px var(--c-border); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot-blue, .dot-navy { background: var(--c-primary-500); }
.dot-green, .dot-lime { background: var(--c-success); }
.dot-yellow, .dot-amber, .dot-orange, .dot-darkorange { background: var(--c-warning); }
.dot-red { background: var(--c-danger); }
.dot-purple, .dot-purplelight, .dot-violet { background: var(--c-purple); }
.dot-teal, .dot-cyan { background: var(--c-accent); }
.dot-gray, .dot-slate { background: #94A3B8; }
.timeline-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 12px; padding: 12px 16px; }
.timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.timeline-note { font-size: 12.5px; color: #475569; margin-top: 4px; }
.timeline-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--c-text-2); margin-top: 6px; }
.timeline-meta .ic { width: 12px; height: 12px; }

/* ============================================================ CRITERIA */
.criteria-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 8px; background: var(--c-card); }
.criteria-score { width: 90px; }
.criteria-total { font-size: 13.5px; font-weight: 700; color: var(--c-primary-700); text-align: left; padding: 8px 12px; }
.votes-table { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vote-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vote-row select { width: 130px; }
.decision-form { border: 1px dashed var(--c-primary-300); border-radius: 12px; padding: 16px; margin-top: 14px; background: var(--c-primary-50); }

/* ============================================================ ALERTS & TOASTS */
.alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; padding: 13px 16px; margin-bottom: 16px; font-size: 13.5px; border: 1px solid transparent; }
.alert .ic { margin-top: 2px; }
.alert-success { background: var(--c-success-bg); color: #14532D; border-color: #BBF7D0; }
.alert-danger { background: var(--c-danger-bg); color: #7F1D1D; border-color: #FECACA; }
.alert-warning { background: var(--c-warning-bg); color: #78350F; border-color: #FDE68A; }
.alert-info { background: var(--c-info-bg); color: #1E3A8A; border-color: #BFDBFE; }
.alert-dismissible { justify-content: space-between; }
.alert-close { border: none; background: none; cursor: pointer; color: inherit; opacity: .6; padding: 4px; }
.alert-close:hover { opacity: 1; }
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--c-card); border: 1px solid var(--c-border); border-right: 4px solid var(--c-primary-500);
  border-radius: 12px; padding: 13px 18px; box-shadow: var(--shadow-lg); min-width: 300px; max-width: 420px;
  font-size: 13px; animation: slideIn .3s ease;
}
.toast.success { border-right-color: var(--c-success); }
.toast.danger { border-right-color: var(--c-danger); }
.toast.warning { border-right-color: var(--c-warning); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

/* ============================================================ MODALS */
.modal-backdrop { position: fixed; inset: 0; background: rgba(11,22,40,.55); backdrop-filter: blur(3px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--c-card); border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: fadeUp .25s ease; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--c-border); }
.modal-head h3 { font-size: 15px; color: var(--c-primary-900); display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 20px 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--c-border); background: var(--c-bg); border-radius: 0 0 16px 16px; }

/* ============================================================ AI */
.ai-inline { margin: 8px 0; }
.ai-badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--c-accent), var(--c-primary-500)); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px; }
.ai-panel { display: flex; flex-direction: column; gap: 14px; }
.ai-card { border: 1px solid #CDEDE8; background: linear-gradient(135deg, #F2FCFB, #fff); border-radius: 14px; padding: 18px; }
.ai-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ai-eval { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.gauge { position: relative; width: 150px; }
.gauge-value { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
.gauge-value b { font-size: 26px; color: var(--c-accent-dark); }
.gauge-value span { display: block; font-size: 10px; color: var(--c-text-2); }
.gauge-arc { transition: stroke-dashoffset 1s ease; }
.ai-eval-info { flex: 1; min-width: 220px; }
.ai-risk { font-size: 13.5px; margin-bottom: 6px; }
.ai-result { margin-top: 14px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 18px; font-size: 13.5px; animation: fadeUp .3s ease; }
.ai-result h4 { color: var(--c-accent-dark); font-size: 13.5px; margin-bottom: 8px; }
.ai-result ul, .ai-result ol { padding-right: 20px; margin: 6px 0; }
.ai-result li { margin-bottom: 4px; }
.ai-result .ai-md h4 { margin-top: 10px; }
.card-ai { border-color: #CDEDE8; }
.ai-hint { font-size: 11px; color: var(--c-text-2); }

/* ============================================================ ASSISTANT */
.assistant { position: fixed; bottom: 22px; left: 22px; z-index: 150; direction: rtl; }
.assistant-fab {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-primary-500));
  color: #fff; border: none; border-radius: 40px; padding: 12px 20px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 30px rgba(13,148,136,.4); transition: transform .2s;
}
.assistant-fab:hover { transform: translateY(-2px); }
.assistant-panel {
  display: none; position: absolute; bottom: 62px; left: 0; width: 380px; max-width: calc(100vw - 40px);
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden; flex-direction: column;
}
.assistant-panel.open { display: flex; animation: fadeUp .25s ease; }
.assistant-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, var(--c-primary-900), var(--c-primary-700)); color: #fff; }
.assistant-head-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.assistant-title { font-size: 13.5px; font-weight: 700; }
.assistant-sub { font-size: 10.5px; opacity: .8; }
.assistant-head .icon-btn { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; margin-right: auto; width: 30px; height: 30px; }
.assistant-body { height: 340px; overflow-y: auto; padding: 14px; background: var(--c-bg); display: flex; flex-direction: column; gap: 10px; }
.assistant-msg { max-width: 88%; font-size: 12.5px; line-height: 1.9; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; }
.assistant-bot { background: var(--c-card); border: 1px solid var(--c-border); align-self: flex-start; border-bottom-right-radius: 4px; }
.assistant-user { background: var(--c-primary-500); color: #fff; align-self: flex-end; border-bottom-left-radius: 4px; }
.assistant-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--c-border); background: var(--c-card); }
.assistant-input input { flex: 1; border: 1px solid var(--c-border); border-radius: 10px; padding: 9px 13px; font: inherit; font-size: 12.5px; }
.assistant-input input:focus { outline: none; border-color: var(--c-primary-500); }
.assistant-hint { font-size: 10px; color: var(--c-text-2); text-align: center; padding: 0 12px 10px; background: var(--c-card); }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary-300); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* ============================================================ AUTH PAGES */
.auth-body { min-height: 100vh; display: flex; align-items: stretch; }
.auth-wrap { display: flex; width: 100%; min-height: 100vh; }
.center-wrap { justify-content: center; align-items: center; }
.auth-hero {
  flex: 1.05; background:
    radial-gradient(circle at 85% 15%, rgba(127,179,227,.18) 0, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(232,163,61,.14) 0, transparent 45%),
    linear-gradient(160deg, var(--c-primary-900), var(--c-primary-700));
  color: #fff; padding: 60px 56px; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.auth-hero::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}
.auth-hero > * { position: relative; }
.auth-hero-logo { width: 76px; height: 76px; margin-bottom: 26px; }
.auth-hero h1 { font-size: 27px; font-weight: 800; line-height: 1.7; margin-bottom: 14px; }
.auth-hero-sub { color: var(--c-primary-300); font-size: 14px; margin-bottom: 26px; max-width: 480px; }
.auth-hero-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.auth-hero-features li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.auth-hero-features .ic { color: var(--c-gold); width: 16px; height: 16px; }
.auth-hero-stats { display: flex; gap: 34px; }
.auth-hero-stats b { display: block; font-size: 26px; font-weight: 800; color: var(--c-gold); }
.auth-hero-stats span { font-size: 12px; color: var(--c-primary-300); }
.auth-hero-note { margin-top: 30px; font-size: 13px; color: var(--c-primary-300); }
.auth-hero-note a { color: var(--c-gold); font-weight: 700; }
.auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--c-bg); overflow-y: auto; }
.auth-card { width: 100%; max-width: 460px; padding: 34px; }
.auth-card h2 { color: var(--c-primary-900); margin-bottom: 6px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--c-text-2); font-size: 12px; margin: 18px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }
.auth-flash { position: fixed; top: 18px; right: 18px; left: 18px; z-index: 300; max-width: 520px; margin: 0 auto; }
.demo-box { margin-top: 18px; background: var(--c-bg); border: 1px dashed var(--c-border); border-radius: 10px; padding: 12px 14px; font-size: 11.5px; color: var(--c-text-2); }
.demo-box code { display: inline-block; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 6px; padding: 1px 8px; margin: 3px 2px; font-size: 11px; direction: ltr; }
.tracking-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--c-primary-900); color: #fff; border-radius: 12px; padding: 14px 20px; margin: 18px 0; }
.tracking-code b { font-size: 18px; letter-spacing: 1px; }
.success-icon { width: 62px; height: 62px; border-radius: 50%; background: var(--c-success-bg); color: #16A34A; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.success-icon .ic { width: 30px; height: 30px; }
.error-card { text-align: center; max-width: 480px; }
.error-code { font-size: 74px; font-weight: 800; color: var(--c-primary-900); line-height: 1.2; }
.error-code.danger { color: var(--c-danger); }

/* ============================================================ SETTINGS / REPORTS */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.settings-grid .card { margin-bottom: 0; }
.settings-actions { grid-column: 1 / -1; }
.reports-head { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.export-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================ EMPTY / PAGINATION */
.empty-state { text-align: center; padding: 46px 20px; color: var(--c-text-2); }
.empty-state .ic { width: 44px; height: 44px; color: #CBD5E1; margin-bottom: 10px; }
.empty-state h4 { color: var(--c-text); font-size: 15px; margin-bottom: 4px; }
.empty-state p { font-size: 12.5px; }
.empty-state.small { padding: 26px 14px; }
.empty-state.small .ic { width: 30px; height: 30px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.page-btn { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-card); color: var(--c-text-2); font-size: 13px; font-weight: 600; padding: 0 8px; }
.page-btn.active { background: var(--c-primary-500); border-color: var(--c-primary-500); color: #fff; }
.page-btn:hover:not(.disabled):not(.active) { border-color: var(--c-primary-300); color: var(--c-primary-500); }
.page-btn.disabled { opacity: .45; pointer-events: none; }
.page-dots { color: var(--c-text-2); }

/* ============================================================ PRINT */
.print-body { background: #fff; padding: 30px; }
.print-toolbar { display: flex; gap: 10px; margin-bottom: 20px; }
.print-doc { max-width: 800px; margin: 0 auto; background: #fff; padding: 40px 50px; border: 1px solid var(--c-border); font-size: 13.5px; line-height: 2.1; }
.print-head { display: flex; align-items: center; gap: 16px; border-bottom: 3px double var(--c-primary-900); padding-bottom: 14px; margin-bottom: 24px; }
.print-logo { width: 64px; height: 64px; }
.print-org b { display: block; font-size: 17px; color: var(--c-primary-900); }
.print-org span { font-size: 12px; color: var(--c-text-2); }
.print-meta { margin-right: auto; text-align: left; font-size: 12px; color: var(--c-text-2); }
.print-title { text-align: center; font-size: 16px; font-weight: 800; color: var(--c-primary-900); background: var(--c-primary-50); border-radius: 8px; padding: 9px; margin-bottom: 20px; }
.print-recipient { margin-bottom: 14px; }
.print-thread { border-inline-start: 3px solid #CBD5E1; padding-inline-start: 12px; margin: 14px 0; }
.print-quote { font-size: 12.5px; color: #475569; margin-bottom: 10px; }
.print-body p { margin-bottom: 12px; text-align: justify; }
.print-sec { font-weight: 700; margin: 16px 0 6px; color: var(--c-primary-900); }
.print-pre { white-space: pre-wrap; background: var(--c-bg); border-radius: 8px; padding: 12px 16px; }
.print-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.print-table td, .print-table th { border: 1px solid var(--c-border); padding: 8px 14px; font-size: 12.5px; text-align: right; }
.print-table th { background: var(--c-primary-50); }
.print-list { padding-right: 22px; margin-bottom: 12px; }
.print-foot { margin-top: 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.print-sign { text-align: center; display: flex; flex-direction: column; gap: 26px; font-size: 12.5px; }
.print-signs { display: flex; gap: 40px; justify-content: space-between; width: 100%; }
.print-copy { font-size: 11px; }
@media print {
  .no-print, .print-toolbar, .toasts, .assistant { display: none !important; }
  .print-body { padding: 0; background: #fff; }
  .print-doc { border: none; padding: 10px; max-width: 100%; }
  body { background: #fff; }
}

/* ============================================================ RESPONSIVE */
.only-mobile { display: none; }
@media (max-width: 1100px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-side { position: static; }
  .page-grid.two-col { grid-template-columns: 1fr; }
  .charts-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .auth-wrap { flex-direction: column; }
  .auth-hero { padding: 40px 28px; min-height: auto; }
  .auth-hero h1 { font-size: 21px; }
  .only-desktop { display: none; }
  .topbar-search input { width: 150px; }
}
@media (max-width: 768px) {
  .sidebar { position: fixed; right: -290px; transition: right .25s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { right: 0; }
  .only-mobile { display: inline-flex; }
  .content { padding: 16px; }
  .form-row { flex-direction: column; }
  .jdate { flex-wrap: wrap; }
  .repeat-row { flex-wrap: wrap; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .app-header-actions { width: 100%; }
  .assistant-fab-label { display: none; }
  .assistant-fab { padding: 14px; border-radius: 50%; }
}

/* ============================================================
   v1.1 — مرکز من، نقشه گردش کار، استودیو، دیکته صوتی
   ============================================================ */

/* ---------- مرکز من ---------- */
.quick-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.grid-2{grid-template-columns:1fr}}
.task-list{display:flex;flex-direction:column;gap:8px}
.guide-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.guide-steps>li{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg)}
.guide-steps b{display:block;margin-bottom:6px}
.guide-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.guide-arrow{color:var(--muted)}
.guide-where{margin-top:6px;font-size:.82rem;color:var(--muted)}
.guide-custom{line-height:2}
.guide-custom h2,.guide-custom h3{margin:10px 0 6px;color:var(--navy)}
.guide-custom ul{padding-inline-start:20px}
.form-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.form-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--bg);text-decoration:none;color:inherit;transition:.2s}
.form-card:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.form-card .badge{align-self:flex-start}
.kpi-danger{--kpi:#EF4444}
.req-star{color:#EF4444}

/* ---------- نقشه گردش کار ---------- */
.wf-map-card{position:relative}
.wf-legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.wf-step-chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:3px 10px}
.wf-stage3d{position:relative;border:1px solid var(--border);border-radius:14px;background:linear-gradient(160deg,var(--map-bg-1) 0%,var(--map-bg-2) 100%);overflow:hidden;perspective:1500px}
.wf-floor{position:absolute;inset:-40% -20%;border-radius:50%;background:
 repeating-linear-gradient(0deg,rgba(30,107,184,.05) 0 1px,transparent 1px 44px),
 repeating-linear-gradient(90deg,rgba(30,107,184,.05) 0 1px,transparent 1px 44px);
 opacity:0;transition:opacity .5s;pointer-events:none;transform:translateY(6%)}
.wf-stage3d.mode-3d{background:linear-gradient(180deg,var(--map-bg-2) 0%,var(--map-bg-2) 70%,var(--map-bg-1) 100%)}
.wf-stage3d.mode-3d .wf-floor{opacity:1}
.wf-tilt{position:relative;height:620px;transition:transform .55s cubic-bezier(.22,.8,.32,1);transform-style:preserve-3d}
.wf-stage3d.mode-3d .wf-tilt{filter:drop-shadow(0 26px 34px rgba(2,20,50,.22))}
.wf-viewport{position:absolute;inset:0;height:100%;cursor:grab;touch-action:none}
.wf-viewport:active{cursor:grabbing}
.wf-map{display:block;width:100%;height:100%}
.wf-step-head{font-size:13px;font-weight:800;fill:#0B2E52;opacity:.85}
.wf-edge path{stroke:#94A3B8;stroke-width:1.6;opacity:.5;cursor:pointer;transition:.15s}
.wf-edge:hover path{opacity:1;stroke:#1E6BB8;stroke-width:2.4}
.wf-edge.hot path{stroke:#1E6BB8;stroke-width:2.6;opacity:.95}
.wf-edge.passed path{stroke:#0D9488;stroke-width:2.2;opacity:.85}
.wf-node{cursor:pointer}
.wf-box{fill:#fff;stroke:#CBD5E1;stroke-width:1.4;transition:.15s}
.wf-node:hover .wf-box{stroke:#1E6BB8;stroke-width:2.4}
.wf-node.sel .wf-box{stroke:#0B2E52;stroke-width:2.6}
.wf-node-label{font-size:12.5px;font-weight:700;fill:#0B2E52;pointer-events:none}
.wf-node-code{font-size:9.5px;fill:#94A3B8;pointer-events:none}
.wf-node.visited .wf-box{stroke:#0D9488;stroke-dasharray:4 3}
.wf-node.faded{opacity:.16;pointer-events:none}
.wf-node.rel .wf-box{stroke:#0D9488;stroke-width:2.6;filter:drop-shadow(0 3px 8px rgba(13,148,136,.28))}
.wf-node.rel .wf-node-label{fill:#0B6B62}
.wf-edge.faded path{opacity:.05;pointer-events:none}
.wf-edge.rel path{stroke:#0D9488;stroke-width:2.6;opacity:.95}
.wf-node.current .wf-box{fill:#EAF3FF;stroke:#1E6BB8;stroke-width:3;animation:wfPulse 1.6s infinite}
@keyframes wfPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(30,107,184,0))}50%{filter:drop-shadow(0 0 7px rgba(30,107,184,.55))}}
.wf-actions-card .quick-links{margin-bottom:8px}
.wf-dash-sample{display:inline-block;width:26px;height:0;border-top:2px dashed #94A3B8}
.dot-current{width:10px;height:10px;border-radius:50%;background:#1E6BB8;display:inline-block;animation:wfPulse 1.6s infinite}
.dot-s1,.dot-s2,.dot-s3,.dot-s4,.dot-s5,.dot-s6,.dot-s7,.dot-s8{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-s1{background:#94A3B8}.dot-s2{background:#E8A33D}.dot-s3{background:#EAB308}.dot-s4{background:#8B5CF6}
.dot-s5{background:#F97316}.dot-s6{background:#1E3A5F}.dot-s7{background:#0D9488}.dot-s8{background:#16A34A}
.wf-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wf-toolbar-group{display:flex;align-items:center;gap:4px;background:var(--c-card);border:1px solid var(--border);border-radius:10px;padding:3px}
.wf-zoom-btn{width:30px;height:30px;border:none;background:var(--bg);border-radius:8px;font-size:17px;font-weight:800;color:var(--navy);cursor:pointer}
.wf-zoom-btn:hover{background:var(--c-primary-50)}
.wf-pct{min-width:52px;text-align:center;font-size:.8rem;font-weight:700;color:var(--navy)}
.wf-tool-btn{border:1px solid var(--border);background:var(--c-card);border-radius:10px;padding:6px 12px;font:inherit;font-size:.8rem;font-weight:600;color:var(--navy);cursor:pointer;transition:.15s}
.wf-tool-btn:hover{background:var(--c-primary-50);border-color:var(--c-primary-100)}
.wf-tool-btn.on{background:#0B2E52;color:#fff;border-color:#0B2E52}
.wf-3d-toggle{background:linear-gradient(135deg,#0B2E52,#1E6BB8);color:#fff;border:none}
.wf-3d-toggle.on{background:linear-gradient(135deg,#0D9488,#1E6BB8)}
.wf-hint{font-size:.75rem;color:var(--muted);margin-inline-start:auto}
.wf-role-form select{height:36px;padding:2px 10px;font-size:.82rem;min-width:220px}
@media(max-width:800px){.wf-tilt{height:440px}.wf-hint{display:none}}
.wf-panel{position:absolute;top:52px;left:16px;width:320px;max-height:70%;overflow:auto;background:var(--c-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 40px rgba(2,20,50,.16);display:none;z-index:20}
.wf-panel.open{display:block}
.wf-panel-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--c-card)}
.wf-panel-body{padding:12px}
.wf-panel-body h4{margin:8px 0 6px;color:var(--navy)}
.wf-tlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.wf-tlist li{border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:.85rem}
.wf-to{color:var(--muted);font-size:.78rem}
.wf-roles{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

/* ---------- استودیو ---------- */
.studio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.studio-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:16px;padding:18px;background:linear-gradient(160deg,#fff, #F4F8FD);text-decoration:none;color:inherit;transition:.2s}
.studio-card:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateY(-2px)}
.studio-card b{font-size:1rem;color:var(--navy)}
.studio-card span:not(.studio-ic){font-size:.82rem;color:var(--muted);line-height:1.9}
.studio-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff}
.studio-ic .ic{width:22px;height:22px}

/* فرم‌ساز */
.fb-layout{display:grid;grid-template-columns:250px 1fr 320px;gap:14px;align-items:start}
@media(max-width:1200px){.fb-layout{grid-template-columns:1fr}}
.fb-palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fb-canvas{min-height:300px}
.fb-list{display:flex;flex-direction:column;gap:8px}
.fb-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--bg);cursor:pointer}
.fb-row.sel{border-color:var(--primary);background:#EAF3FF}
.fb-row-type{font-size:.72rem;background:var(--navy);color:#fff;border-radius:8px;padding:2px 8px;white-space:nowrap}
.fb-row-label{flex:1;font-weight:600}
.fb-row-actions{display:flex;gap:4px}
.fb-props{border-top:1px dashed var(--border);padding-top:12px}
.form-narrow{max-width:860px}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--bg);max-height:250px;overflow:auto}
.callout-warning{background:#FFF7E8;border-color:#E8A33D}
.wf-task-row{display:grid;grid-template-columns:150px 1fr 1fr 90px 40px;gap:6px;margin-bottom:8px}
@media(max-width:900px){.wf-task-row{grid-template-columns:1fr}}
.table-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.head-actions{display:flex;gap:8px}

/* ---------- دیکته صوتی (smart fields) ---------- */
.smart-wrap{position:relative;display:block}
.smart-wrap textarea,.smart-wrap input{padding-left:44px}
.smart-mic{position:absolute;left:6px;bottom:8px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--c-card);color:var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;z-index:2}
.smart-mic:hover{background:var(--primary);color:#fff}
.smart-mic .ic{width:16px;height:16px}
.smart-rec-dot{display:none}
.smart-mic.recording{background:#EF4444;border-color:#EF4444;color:#fff;animation:wfPulse 1s infinite}
.smart-mic.recording .smart-rec-dot{display:block;position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#fff}
.smart-mic.busy{opacity:.6;pointer-events:none}

/* ---------- v1.2: studio builders + automation ---------- */
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
@media(max-width:800px){.grid-4{grid-template-columns:1fr 1fr}}
.chart-tall{height:320px}
.fb-item{border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:8px;background:var(--bg)}
.fb-item-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-item-head b{flex:1;min-width:120px}
.fb-tools{display:flex;gap:4px;margin-inline-start:auto}
.letter-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--c-text-2);font-size:12.5px;margin-bottom:14px}
.letter-box{border:1px solid var(--border);border-radius:14px;padding:22px 26px;background:var(--bg);line-height:2.1;font-size:14.5px;white-space:pre-wrap}
.letter-thread{border-inline-start:3px solid var(--c-primary-100);padding-inline-start:16px;margin-bottom:18px}
.letter-thread .letter-box{background:transparent}
.read-receipt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--c-text-2)}
.read-receipt.done{color:#16A34A}
.badge-gold { background: #FDF4E5; color: #B45309; }
.link { color: var(--c-primary-500); font-weight: 600; }
.link:hover { color: var(--c-primary-700); text-decoration: underline; }
.ltr-num { direction: ltr; text-align: right; font-size: 12.5px; white-space: nowrap; }
.row-bold td { font-weight: 700; }

/* ================= v1.2.1: visual overhaul + DnD ================= */

/* ---------- workflow map: colored nodes ---------- */
.wf-box{stroke-width:1.6}
.wf-node{filter:drop-shadow(0 2px 5px rgba(2,20,50,.10));transition:filter .18s}
.wf-node:hover{filter:drop-shadow(0 6px 14px rgba(2,20,50,.22))}
.wf-node:hover .wf-box{stroke-width:2.6}
.wf-node.sel .wf-box{stroke-width:3;filter:drop-shadow(0 0 10px rgba(30,107,184,.45))}
.wf-node.badge-gray .wf-box{fill:#F8FAFC;stroke:#94A3B8}
.wf-node.badge-slate .wf-box{fill:#F8FAFC;stroke:#64748B}
.wf-node.badge-blue .wf-box{fill:#F0F7FF;stroke:#2563EB}
.wf-node.badge-amber .wf-box{fill:#FFFBEB;stroke:#D97706}
.wf-node.badge-cyan .wf-box{fill:#ECFEFF;stroke:#0891B2}
.wf-node.badge-yellow .wf-box{fill:#FEFCE8;stroke:#CA8A04}
.wf-node.badge-violet .wf-box{fill:#F5F3FF;stroke:#7C3AED}
.wf-node.badge-purple .wf-box{fill:#FAF5FF;stroke:#9333EA}
.wf-node.badge-purplelight .wf-box{fill:#FDF4FF;stroke:#C026D3}
.wf-node.badge-orange .wf-box{fill:#FFF7ED;stroke:#EA580C}
.wf-node.badge-navy .wf-box{fill:#EEF2FF;stroke:#3730A3}
.wf-node.badge-teal .wf-box{fill:#F0FDFA;stroke:#0D9488}
.wf-node.badge-green .wf-box{fill:#F0FDF4;stroke:#16A34A}
.wf-node.badge-lime .wf-box{fill:#F7FEE7;stroke:#65A30D}
.wf-node.badge-red .wf-box{fill:#FEF2F2;stroke:#DC2626}
.wf-node.badge-darkorange .wf-box{fill:#FFF7ED;stroke:#C2410C}

/* step pills */
.wf-step-pill rect{fill:var(--c-card);stroke:var(--hue,#1E6BB8);stroke-width:1.3;filter:drop-shadow(0 2px 5px rgba(2,20,50,.10))}
.wf-step-pill{opacity:.95}
.wf-step-pill text{font-size:12.5px;font-weight:800;fill:#334155}
.wf-step-dot{fill:var(--hue,#1E6BB8);opacity:.9}

/* animated hot path */
.wf-edge.hot path{stroke-dasharray:10 7;animation:wfFlow 1.1s linear infinite}
@keyframes wfFlow{to{stroke-dashoffset:-17}}
.wf-edge.rel path{stroke-dasharray:9 6;animation:wfFlow 1.6s linear infinite}

/* panel: slide-in + gradient header */
.wf-panel{animation:wfPanelIn .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes wfPanelIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.wf-panel-head{background:linear-gradient(135deg,#0B2E52,#1E6BB8);color:#fff;border-radius:14px 14px 0 0}
.wf-panel-head b{color:#fff;font-size:.9rem}
.wf-panel-head .btn{color:#fff;border-color:rgba(255,255,255,.3)}
.wf-panel-ic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
.wf-panel-ic .ic{width:16px;height:16px}
.wf-tlist li{background:linear-gradient(160deg,var(--c-card),var(--c-tint-b));border-inline-start:3px solid #1E6BB8;transition:.15s}
.wf-tlist li:hover{transform:translateX(-3px);box-shadow:0 4px 12px rgba(2,20,50,.08)}

/* ---------- shared builder DnD ---------- */
.drag-handle{cursor:grab;color:#94A3B8;padding:2px 4px;font-size:15px;letter-spacing:-1px;user-select:none}
.drag-handle:active{cursor:grabbing}
.dragging{opacity:.45;transform:scale(.98);box-shadow:0 8px 24px rgba(2,20,50,.25)!important}
.fb-row[draggable],.fb-item[draggable],.rb-tray-chip[draggable]{cursor:grab}
.fb-row{gap:8px;transition:transform .15s,box-shadow .15s,border-color .15s;background:linear-gradient(160deg,var(--c-card),var(--c-tint-a))}
.fb-row:hover{border-color:#B9D2EC;box-shadow:0 3px 10px rgba(2,20,50,.07)}
.fb-row.sel{border-color:var(--c-primary-500);background:linear-gradient(160deg,var(--c-primary-50),var(--c-tint-b));box-shadow:0 4px 14px rgba(30,107,184,.16)}
.fb-grip{color:#B7C7DA;font-size:16px}

/* palette buttons (form builder) */
.fb-palette{background:linear-gradient(180deg,var(--c-tint-a),var(--c-tint-b))}
.fb-palette-grid .btn{border-style:dashed;justify-content:flex-start;gap:6px}
.fb-palette-grid .btn:hover{border-style:solid;transform:translateY(-1px)}

/* dashboard widget cards */
.fb-item{background:linear-gradient(160deg,var(--c-card),var(--c-tint-b));transition:transform .15s,box-shadow .15s,border-color .15s}
.fb-item:hover{box-shadow:0 5px 16px rgba(2,20,50,.10);border-color:#B9D2EC}
.fb-item-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fb-item-ic .ic{width:19px;height:19px}
.fb-item-ic.t-kpi{background:#EFF6FF;color:#2563EB}
.fb-item-ic.t-bar{background:#F0FDFA;color:#0D9488}
.fb-item-ic.t-doughnut{background:#FAF5FF;color:#9333EA}
.fb-item-ic.t-trend{background:#FFF7ED;color:#EA580C}
.fb-item-ic.t-table{background:#F0FDF4;color:#16A34A}
.fb-drop-hint{border:2px dashed #1E6BB8;border-radius:12px;background:#EAF3FF;color:#1E6BB8;font-size:.8rem;font-weight:700;padding:10px;text-align:center;margin-bottom:8px;display:none}
.fb-drop-hint.show{display:block}

/* report builder */
.rb-src-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.rb-src{border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;background:linear-gradient(160deg,var(--c-card),var(--c-tint-b));cursor:pointer;transition:.16s;position:relative}
.rb-src:hover{border-color:#B9D2EC;transform:translateY(-2px);box-shadow:0 6px 16px rgba(2,20,50,.09)}
.rb-src.sel{border-color:var(--c-primary-500);background:linear-gradient(160deg,var(--c-primary-50),var(--c-tint-b));box-shadow:0 5px 16px rgba(30,107,184,.18)}
.rb-src .rb-src-ic{width:36px;height:36px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.rb-src.sel .rb-src-ic{background:#0B2E52}
.rb-src b{font-size:.86rem;color:var(--navy)}
.rb-src .rb-src-check{position:absolute;top:10px;left:10px;width:22px;height:22px;border-radius:50%;background:#16A34A;color:#fff;display:none;align-items:center;justify-content:center}
.rb-src.sel .rb-src-check{display:flex}
.rb-chip-grid{display:flex;flex-wrap:wrap;gap:8px}
.rb-chip{border:1.5px solid var(--border);border-radius:99px;padding:6px 14px;font-size:.8rem;font-weight:600;background:var(--c-card);cursor:pointer;transition:.15s;user-select:none}
.rb-chip:hover{border-color:#1E6BB8;color:#1E6BB8;transform:translateY(-1px)}
.rb-chip.on{background:var(--c-primary-900);border-color:var(--c-primary-900);color:#fff;box-shadow:0 3px 10px rgba(11,46,82,.3)}
.rb-tray{border:1.5px dashed #B9D2EC;border-radius:14px;background:var(--c-tint-b);min-height:64px;padding:10px;display:flex;flex-wrap:wrap;gap:8px}
.rb-tray-chip{display:inline-flex;align-items:center;gap:8px;background:var(--c-card);border:1.5px solid #1E6BB8;color:#0B2E52;border-radius:12px;padding:7px 12px;font-size:.8rem;font-weight:700;box-shadow:0 2px 8px rgba(30,107,184,.14);cursor:grab;transition:.15s}
.rb-tray-chip:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(30,107,184,.22)}
.rb-tray-chip .ord{width:22px;height:22px;border-radius:50%;background:#1E6BB8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;flex-shrink:0}
.rb-tray-chip .rm{border:none;background:none;color:#EF4444;font-weight:800;cursor:pointer;font-size:.9rem;padding:0 2px}

/* chip-toggles (workflow builder) */
.chip-grid{display:flex;flex-wrap:wrap;gap:8px}
.chip-toggle input{position:absolute;opacity:0;pointer-events:none}
.chip-toggle span{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:99px;padding:6px 14px;font-size:.8rem;font-weight:600;background:var(--c-card);color:var(--muted);cursor:pointer;transition:.15s;user-select:none}
.chip-toggle span::before{content:'';width:8px;height:8px;border-radius:50%;background:#CBD5E1;transition:.15s}
.chip-toggle:hover span{border-color:#1E6BB8;color:#1E6BB8}
.chip-toggle input:checked + span{background:var(--c-primary-50);border-color:#1E6BB8;color:#0B2E52}
.chip-toggle input:checked + span::before{background:#16A34A}

/* studio cards accents */
.studio-card[data-accent="a-blue"] .studio-ic{background:linear-gradient(135deg,#1E6BB8,#0891B2)}
.studio-card[data-accent="a-teal"] .studio-ic{background:linear-gradient(135deg,#0D9488,#16A34A)}
.studio-card[data-accent="a-violet"] .studio-ic{background:linear-gradient(135deg,#7C3AED,#C026D3)}
.studio-card[data-accent="a-navy"] .studio-ic{background:linear-gradient(135deg,#0B2E52,#1E3A8A)}
.studio-card[data-accent="a-amber"] .studio-ic{background:linear-gradient(135deg,#D97706,#F59E0B)}

/* AI builder card */
.ai-builder-card{border:1.5px solid transparent;background:linear-gradient(var(--c-card),var(--c-card)) padding-box,linear-gradient(135deg,#0D9488,#1E6BB8,#7C3AED) border-box;border-radius:16px}
.ai-builder-card .card-title{color:#0B6B62}

/* ============================================================
   v1.3 — THEMES (user-selectable) + modern polish
   data-theme on <html>: light | dark | ocean | emerald | violet | sunset
   ============================================================ */

/* ---------- ocean ---------- */
html[data-theme="ocean"] {
  --c-primary-900: #083344; --c-primary-700: #0E7490; --c-primary-500: #0891B2;
  --c-primary-300: #67E8F9; --c-primary-50: #ECFEFF;
  --c-accent: #06B6D4; --c-accent-dark: #0891B2;
  --c-bg: #F0FBFC; --c-tint-a: #F6FDFE; --c-tint-b: #EAF7F9;
  --c-row-hover: #EDFAFC; --c-border-soft: #E4F3F6;
  --c-grad-1: #083344; --c-grad-2: #0E7490;
  --glow-1: rgba(8,145,178,.10); --glow-2: rgba(6,182,212,.08);
  --map-bg-1: #F4FCFD; --map-bg-2: #E6F5F8;
  --focus-ring: rgba(8,145,178,.18);
}
/* ---------- emerald ---------- */
html[data-theme="emerald"] {
  --c-primary-900: #064E3B; --c-primary-700: #047857; --c-primary-500: #059669;
  --c-primary-300: #6EE7B7; --c-primary-50: #ECFDF5;
  --c-accent: #0D9488; --c-accent-dark: #0F766E;
  --c-bg: #F1FBF6; --c-tint-a: #F7FDF9; --c-tint-b: #EAF8F1;
  --c-row-hover: #EDFAF4; --c-border-soft: #E3F4EB;
  --c-grad-1: #064E3B; --c-grad-2: #065F46;
  --glow-1: rgba(5,150,105,.10); --glow-2: rgba(13,148,136,.08);
  --map-bg-1: #F4FCF8; --map-bg-2: #E6F6EE;
  --focus-ring: rgba(5,150,105,.18);
}
/* ---------- violet ---------- */
html[data-theme="violet"] {
  --c-primary-900: #2E1065; --c-primary-700: #6D28D9; --c-primary-500: #7C3AED;
  --c-primary-300: #C4B5FD; --c-primary-50: #F5F3FF;
  --c-accent: #0D9488; --c-accent-dark: #0F766E;
  --c-bg: #F7F6FD; --c-tint-a: #FBFAFE; --c-tint-b: #F1EEFB;
  --c-row-hover: #F7F5FE; --c-border-soft: #EFEAF9;
  --c-grad-1: #2E1065; --c-grad-2: #5B21B6;
  --glow-1: rgba(124,58,237,.10); --glow-2: rgba(13,148,136,.07);
  --map-bg-1: #FAF9FE; --map-bg-2: #F0ECFA;
  --focus-ring: rgba(124,58,237,.18);
}
/* ---------- sunset ---------- */
html[data-theme="sunset"] {
  --c-primary-900: #7C2D12; --c-primary-700: #C2410C; --c-primary-500: #EA580C;
  --c-primary-300: #FDBA74; --c-primary-50: #FFF7ED;
  --c-accent: #0F766E; --c-accent-dark: #115E59;
  --c-bg: #FDF8F2; --c-tint-a: #FFFCF8; --c-tint-b: #FBF3EA;
  --c-row-hover: #FEF9F3; --c-border-soft: #F6EDE3;
  --c-grad-1: #7C2D12; --c-grad-2: #9A3412;
  --glow-1: rgba(234,88,12,.10); --glow-2: rgba(15,118,110,.07);
  --map-bg-1: #FFFCF7; --map-bg-2: #F9F0E6;
  --focus-ring: rgba(234,88,12,.18);
}
/* ---------- dark (شب) ---------- */
html[data-theme="dark"] {
  --c-primary-900: #DBEAFE; /* note: used as headline color → light in dark mode */
  --c-primary-700: #93C5FD; --c-primary-500: #60A5FA; --c-primary-300: #3B82F6;
  --c-primary-50: #16233B;
  --c-accent: #2DD4BF; --c-accent-dark: #14B8A6;
  --c-gold: #FBBF24; --c-gold-dark: #F59E0B;
  --c-bg: #0B1220; --c-card: #101A2C; --c-border: #1E293B; --c-border-soft: #17233A;
  --c-text: #E2E8F0; --c-text-2: #94A3B8;
  --c-success: #34D399; --c-success-bg: #0A2A1D;
  --c-warning: #FBBF24; --c-warning-bg: #2A1E05;
  --c-danger: #F87171;  --c-danger-bg: #2B0F12;
  --c-info: #60A5FA;    --c-info-bg: #0C1E36;
  --c-purple: #A78BFA;  --c-purple-bg: #1E1035;
  --bg: var(--c-bg);
  --c-topbar: rgba(13,21,37,.85);
  --c-row-hover: #16233B;
  --c-tint-a: #0F1B30; --c-tint-b: #12203A;
  --c-grad-1: #0A1526; --c-grad-2: #10203C;
  --glow-1: rgba(59,130,246,.14); --glow-2: rgba(45,212,191,.07);
  --map-bg-1: #0E1930; --map-bg-2: #0B1526;
  --focus-ring: rgba(96,165,250,.25);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow: 0 6px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
}
html[data-theme="dark"] body { color-scheme: dark; }

/* dark-mode component patches */
html[data-theme="dark"] .badge-gray { background: #1E293B; color: #CBD5E1; }
html[data-theme="dark"] .badge-blue { background: #0C1E36; color: #93C5FD; }
html[data-theme="dark"] .badge-teal { background: #0A2E2A; color: #5EEAD4; }
html[data-theme="dark"] .badge-green { background: #0A2A1D; color: #6EE7B7; }
html[data-theme="dark"] .badge-red { background: #2B0F12; color: #FCA5A5; }
html[data-theme="dark"] .badge-amber { background: #2A1E05; color: #FCD34D; }
html[data-theme="dark"] .badge-gold { background: #2A1E05; color: #FCD34D; }
html[data-theme="dark"] .badge-navy { background: #172554; color: #A5B4FC; }
html[data-theme="dark"] .badge-violet { background: #1E1035; color: #C4B5FD; }
html[data-theme="dark"] .wf-node-label { fill: #E2E8F0; }
html[data-theme="dark"] .wf-node-code { fill: #64748B; }
html[data-theme="dark"] .wf-step-pill text { fill: #CBD5E1; }
html[data-theme="dark"] .wf-edge path { stroke: #475569; }
html[data-theme="dark"] .chart-box { background: var(--c-tint-a); }
html[data-theme="dark"] .chart-box h4 { color: #94A3B8; }
html[data-theme="dark"] .letter-box { background: var(--c-tint-a); }
html[data-theme="dark"] .callout { background: var(--c-info-bg); border-color: #1E3A5F; }
html[data-theme="dark"] .callout-warning { background: #2A1E05; border-color: #8A6417; }
html[data-theme="dark"] .alert { border-color: transparent; }
html[data-theme="dark"] .empty-state { color: #94A3B8; }
html[data-theme="dark"] .auth-hero { background: radial-gradient(circle at 85% 15%, rgba(96,165,250,.15) 0, transparent 45%), radial-gradient(circle at 15% 85%, rgba(45,212,191,.12) 0, transparent 45%), linear-gradient(160deg, #0A1526, #10203C); }
html[data-theme="dark"] .rb-src-check { background: #16A34A; }
html[data-theme="dark"] ::selection { background: rgba(96,165,250,.4); }
html[data-theme="dark"] .btn-gold { color: #0B1220; }
html[data-theme="dark"] .nav-badge { color: #0B1220; }

/* ============================================================
   modern polish (all themes)
   ============================================================ */
body {
  background:
    radial-gradient(1100px 520px at 88% -8%, var(--glow-1), transparent 60%),
    radial-gradient(900px 480px at -8% 108%, var(--glow-2), transparent 55%),
    var(--c-bg);
  background-attachment: fixed;
}
::selection { background: var(--c-primary-500); color: #fff; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-text-2) 35%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c-text-2) 60%, transparent); border: 2px solid transparent; background-clip: content-box; }

/* sidebar: richer gradient + glow active */
.sidebar {
  background: linear-gradient(178deg, var(--c-grad-1) 0%, var(--c-grad-2) 100%);
  box-shadow: 4px 0 24px rgba(2, 20, 50, .18);
}
.sidebar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 20% 0%, rgba(255,255,255,.07), transparent 60%);
}
.sidebar-brand { position: relative; }
.brand-logo { filter: drop-shadow(0 4px 10px rgba(255,255,255,.25)); }
.nav-item { border-radius: 12px; }
.nav-item .ic { transition: transform .2s; }
.nav-item:hover .ic { transform: translateY(-1px) scale(1.08); }
.nav-item.active {
  background: linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(2,20,50,.25);
  backdrop-filter: blur(4px);
}
.nav-item.active::before {
  background: var(--c-gold);
  box-shadow: 0 0 12px var(--c-gold);
}
.sidebar-user { background: rgba(0,0,0,.18); backdrop-filter: blur(4px); }

/* topbar: stronger glass */
.topbar { background: var(--c-topbar); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.icon-btn { border-radius: 12px; }
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.theme-btn { color: var(--c-primary-500); border-color: color-mix(in srgb, var(--c-primary-500) 35%, var(--c-border)); }

/* cards: softer, deeper */
.card { border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .25s; }
.card:hover { box-shadow: var(--shadow); }

/* buttons: gradient + lift */
.btn { border-radius: 12px; }
.btn-primary {
  background: linear-gradient(135deg, var(--c-primary-500), var(--c-primary-700));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-primary-500) 40%, transparent);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--c-primary-700), var(--c-primary-900)); transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--c-primary-500) 50%, transparent); }
.btn-teal {
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-accent) 40%, transparent);
}
.btn-teal:hover { background: linear-gradient(135deg, var(--c-accent-dark), var(--c-accent)); transform: translateY(-1px); }
.btn-gold {
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dark));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-gold) 45%, transparent);
}
.btn-gold:hover { transform: translateY(-1px); }
.btn-danger { box-shadow: 0 4px 14px rgba(239,68,68,.35); }
.btn-danger:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }

/* KPI cards: gradient wash per tone */
.kpi-card { border-radius: var(--radius); }
.kpi-primary { background: linear-gradient(150deg, var(--c-primary-50), var(--c-card) 65%); }
.kpi-success { background: linear-gradient(150deg, var(--c-success-bg), var(--c-card) 65%); }
.kpi-gold    { background: linear-gradient(150deg, var(--c-warning-bg), var(--c-card) 65%); }
.kpi-info    { background: linear-gradient(150deg, var(--c-info-bg), var(--c-card) 65%); }
.kpi-purple  { background: linear-gradient(150deg, var(--c-purple-bg), var(--c-card) 65%); }
.kpi-danger  { background: linear-gradient(150deg, var(--c-danger-bg), var(--c-card) 65%); }
.kpi-card::after { background: linear-gradient(180deg, var(--c-primary-500), var(--c-accent)); opacity: .85; }

/* tables */
.table th { background: color-mix(in srgb, var(--c-tint-b) 70%, var(--c-card)); font-size: 11px; letter-spacing: .2px; text-transform: uppercase; }

/* inputs */
.form-control { border-radius: 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
.form-control:focus { outline: none; border-color: var(--c-primary-500); box-shadow: 0 0 0 4px var(--focus-ring); }
.check-grid { background: var(--c-tint-a); border-color: color-mix(in srgb, var(--c-border) 70%, transparent); }

/* auth (login): deeper modern backdrop */
.auth-hero { background:
  radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--c-primary-300) 26%, transparent) 0, transparent 45%),
  radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--c-gold) 20%, transparent) 0, transparent 45%),
  linear-gradient(160deg, var(--c-grad-1), var(--c-grad-2));
}
.auth-card { box-shadow: var(--shadow-lg); border-radius: 20px; }

/* ============================================================
   theme menu (topbar palette dropdown)
   ============================================================ */
.theme-menu { min-width: 320px; padding: 10px; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 6px; }
.theme-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  border: 1.5px solid var(--c-border); border-radius: 14px; padding: 10px 12px;
  background: var(--c-card); cursor: pointer; transition: .16s; font: inherit; text-align: right;
}
.theme-opt:hover { border-color: var(--c-primary-500); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.theme-opt.on { border-color: var(--c-primary-500); background: var(--c-primary-50); box-shadow: 0 0 0 3px var(--focus-ring); }
.theme-swatch { display: flex; width: 100%; height: 26px; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-border); }
.theme-swatch i { flex: 1; }
.theme-opt-name { font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.theme-opt-hint { font-size: 10.5px; color: var(--c-text-2); }
.density-row { display: flex; gap: 8px; padding: 8px 6px 4px; }
.density-opt span { background: var(--c-card); }
.density-opt.on-opt span { background: var(--c-primary-500); border-color: var(--c-primary-500); color: #fff; }
.density-opt.on-opt span::before { background: #fff; }
.theme-note { font-size: 10.5px; color: var(--c-text-2); text-align: center; padding: 8px 6px 2px; }

/* ============================================================
   density
   ============================================================ */
html[data-density="compact"] { --sidebar-w: 232px; --radius: 13px; }
html[data-density="compact"] body { font-size: 13px; }
html[data-density="compact"] .content { padding: 16px; }
html[data-density="compact"] .card { padding: 15px 16px; margin-bottom: 13px; }
html[data-density="compact"] .nav-item { padding: 8px 10px; font-size: 12.5px; }
html[data-density="compact"] .table td { padding: 8px 10px; }
html[data-density="compact"] .table th { padding: 8px 10px; }
html[data-density="compact"] .kpi-card { padding: 12px 14px; }
html[data-density="compact"] .form-control { padding: 7px 12px; }
html[data-density="compact"] .btn { padding: 8px 16px; }

/* ===================== v1.5: Help Drawer ===================== */
.help-btn { position: relative; }
.help-btn svg { width: 20px; height: 20px; color: var(--c-text-soft); }
.help-btn:hover svg { color: var(--c-primary); }
.help-backdrop { position: fixed; inset: 0; background: rgba(8, 15, 30, .45); backdrop-filter: blur(2px); z-index: 90; }
.help-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(430px, 94vw);
  background: var(--c-card, #fff); z-index: 95; display: flex; flex-direction: column;
  box-shadow: 8px 0 40px rgba(2, 8, 20, .25);
  transform: translateX(-105%); transition: transform .32s cubic-bezier(.22, .9, .3, 1);
  border-right: 1px solid var(--c-border);
}
[dir="rtl"] .help-drawer { left: auto; right: 0; transform: translateX(105%); box-shadow: -8px 0 40px rgba(2, 8, 20, .25); border-right: 0; border-left: 1px solid var(--c-border); }
.help-drawer.open { transform: translateX(0); }
.help-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, var(--c-grad-1, var(--c-primary)), var(--c-grad-2, var(--c-primary-700))); color: #fff; }
.help-head-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, .18); flex: 0 0 auto; }
.help-head-icon svg { width: 23px; height: 23px; color: #fff; }
.help-drawer-kicker { font-size: 11px; opacity: .85; }
.help-drawer-title { margin: 0; font-size: 17px; font-weight: 800; }
.help-head .icon-btn { margin-inline-start: auto; color: #fff; }
.help-body { overflow-y: auto; padding: 16px 18px 8px; flex: 1; }
.help-intro { font-size: 13.5px; line-height: 2; color: var(--c-text); background: var(--c-tint-a, #F3F6FA); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; border: 1px solid var(--c-border-soft); }
.help-section { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--c-border-soft); border-radius: 12px; background: var(--c-card, #fff); }
.help-section h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 800; color: var(--c-primary); display: flex; align-items: center; gap: 6px; }
.help-section h3::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); flex: 0 0 auto; }
.help-section p { margin: 0; font-size: 12.8px; line-height: 2.05; color: var(--c-text-soft); }
.help-tips { margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--c-tint-b, #FFF8E6); border: 1px solid var(--c-border-soft); }
.help-tips h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.help-tips ul { margin: 0; padding: 0 18px 0 0; list-style: none; }
.help-tips li { font-size: 12.6px; line-height: 1.9; color: var(--c-text-soft); padding: 3px 0 3px 20px; position: relative; }
.help-tips li::before { content: '✓'; position: absolute; right: 0; top: 3px; color: var(--c-success, #16A34A); font-weight: 800; }
.help-voice-note { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(34, 211, 238, .08)); border: 1px dashed var(--c-primary); font-size: 12.4px; line-height: 1.95; color: var(--c-text-soft); }
.voice-note-mic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary); color: #fff; flex: 0 0 auto; }
.voice-note-mic svg { width: 17px; height: 17px; }
.help-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 18px; border-top: 1px solid var(--c-border); font-size: 11px; color: var(--c-text-fade, #94A3B8); background: var(--c-bg-soft, #FAFCFE); }
.help-foot kbd { background: var(--c-card, #fff); border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; font-family: inherit; font-size: 10.5px; }

/* ===================== v1.5: Voice Assistant ===================== */
.voice-fab {
  position: absolute; right: -66px; bottom: 0; /* کنار دکمهٔ چت، داخل داک دستیار */
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #2563EB);
  box-shadow: 0 10px 26px rgba(124, 58, 237, .4);
  transition: transform .18s, box-shadow .18s;
}
/* اگر دکمهٔ چت نبود (صفحهٔ بدون دستیار) → گوشهٔ پایین چپ */
body > .voice-fab { position: fixed; left: 20px; bottom: 20px; right: auto; z-index: 80; }
.voice-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(124, 58, 237, .5); }
.voice-fab.listening { background: linear-gradient(135deg, #DC2626, #EA580C); animation: voicePulse 1.15s infinite; }
@keyframes voicePulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45), 0 10px 26px rgba(220, 38, 38, .4); }
  70% { box-shadow: 0 0 0 16px rgba(220, 38, 38, 0), 0 10px 26px rgba(220, 38, 38, .4); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), 0 10px 26px rgba(220, 38, 38, .4); }
}
.voice-panel {
  position: fixed; bottom: 92px; left: 20px; z-index: 81;
  width: min(360px, 92vw); border-radius: 16px; overflow: hidden;
  background: var(--c-card, #fff); border: 1px solid var(--c-border);
  box-shadow: 0 18px 50px rgba(2, 8, 20, .22);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97);
  transition: all .22s cubic-bezier(.22, .9, .3, 1);
}
.voice-panel.open { opacity: 1; visibility: visible; transform: none; }
.voice-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 13px; background: linear-gradient(135deg, var(--c-grad-1, #7C3AED), var(--c-grad-2, #2563EB)); color: #fff; }
.voice-close { background: rgba(255, 255, 255, .16); color: #fff; border: 0; border-radius: 8px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; }
.voice-close:hover { background: rgba(255, 255, 255, .3); }
.voice-status { padding: 10px 14px 4px; font-size: 12.3px; color: var(--c-text-soft); }
.voice-transcript { margin: 6px 14px; padding: 8px 12px; border-radius: 11px; background: var(--c-tint-a, #F3F6FA); border: 1px solid var(--c-border-soft); font-size: 13px; font-weight: 700; color: var(--c-text); }
.voice-result { margin: 6px 14px; padding: 9px 12px; border-radius: 11px; font-size: 12.6px; line-height: 1.9; }
.voice-result.success { background: rgba(22, 163, 74, .1); color: var(--c-success, #16A34A); border: 1px solid rgba(22, 163, 74, .25); }
.voice-result.warning { background: rgba(217, 119, 6, .1); color: #B45309; border: 1px solid rgba(217, 119, 6, .25); }
.voice-result.danger { background: rgba(220, 38, 38, .1); color: #DC2626; border: 1px solid rgba(220, 38, 38, .25); }
.voice-hints { padding: 8px 14px 12px; }
.voice-hints-title { display: block; font-size: 11px; color: var(--c-text-fade, #94A3B8); margin-bottom: 6px; }
.voice-chip { display: inline-block; margin: 0 0 6px 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-bg-soft, #FAFCFE); color: var(--c-text-soft); font-size: 11.6px; cursor: pointer; font-family: inherit; transition: all .15s; }
.voice-chip:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-tint-a, #F3F6FA); }
[data-theme="dark"] .voice-chip { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .voice-result.warning { color: #FBBF24; }
[data-theme="dark"] .help-tips li::before { color: #34D399; }
@media (max-width: 640px) {
  .voice-fab { right: -58px; width: 50px; height: 50px; }
  body > .voice-fab { left: 14px; bottom: 14px; }
  .voice-panel { bottom: 84px; left: 14px; }
  .help-drawer { width: 100vw; }
}

/* ===================== v1.5: Workflow editor — visual BPMN mode ===================== */
.wf-mode-tabs { display: flex; gap: 8px; margin: 0 0 14px; padding: 5px; background: var(--c-tint-a, #F3F6FA); border: 1px solid var(--c-border-soft); border-radius: 14px; width: fit-content; }
.wf-mode-tab { border: 0; background: transparent; color: var(--c-text-soft); font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 10px; cursor: pointer; transition: all .18s; }
.wf-mode-tab:hover { color: var(--c-primary); }
.wf-mode-tab.on { background: var(--c-card, #fff); color: var(--c-primary); box-shadow: 0 2px 10px rgba(15, 40, 80, .1); }
[data-theme="dark"] .wf-mode-tab.on { background: #16233B; }
.wf-edit-stage { height: 560px; }
@media (max-width: 900px) { .wf-edit-stage { height: 420px; } }
.wf-rel-sample { display: inline-block; width: 22px; height: 0; border-top: 3px solid #0D9488; border-radius: 2px; vertical-align: middle; margin-left: 4px; }

/* ===================== v1.5.1: BPMN sub-process focus ===================== */
.wf-hidden { display: none !important; }
.wf-scope-group { display: flex; gap: 4px; background: rgba(255, 255, 255, .65); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.wf-scope-btn { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: all .15s; }
.wf-scope-btn:hover { color: #1E6BB8; }
.wf-scope-btn.on { background: #1E6BB8; color: #fff; }
[data-theme="dark"] .wf-scope-group { background: rgba(16, 26, 44, .8); }