/* Tool pages */
.tool-layout { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) { .tool-layout { grid-template-columns: 5fr 7fr; } }
.tool-panel { background: var(--soft-100); border: 1px solid var(--soft-200); border-radius: var(--radius-lg); padding: var(--space-3); }
.tool-panel h2 { font-size: var(--fs-3); }
.result-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--white); position: relative; }
.result-panel h2 { font-size: var(--fs-3); }
.result-panel[aria-busy="true"] { opacity: 0.6; }
.kpis { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin: var(--space-2) 0; }
.kpi { border-top: 3px solid var(--blue); padding-top: 0.5rem; display: grid; gap: 0.15rem; align-content: start; }
.kpi .kpi-label { font-size: var(--fs-0); color: var(--muted); }
.kpi .kpi-value { font-size: var(--fs-4); font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; transition: color var(--dur-2); }
.kpi .kpi-value.is-neg { color: var(--danger); }
.kpi .kpi-sub { font-size: var(--fs-0); color: var(--muted); }
.kpi--soft { border-top-color: var(--soft); }
.kpi--delta { border-top-color: var(--ink); }
.delta-pos { color: var(--ok); } .delta-neg { color: var(--danger); }
.tool-section { padding-block: var(--space-4); border-top: 1px solid var(--line); }
.tool-section h2 { font-size: var(--fs-3); }
.tool-section p { max-width: 75ch; }
.formula { background: var(--soft-100); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--fs-0); direction: ltr; text-align: left; font-family: var(--font-mono); color: var(--ink); overflow-x: auto; }
html[dir="rtl"] .formula { direction: rtl; text-align: right; font-family: var(--font-fa); }
.empty-state { color: var(--muted); padding: var(--space-3); text-align: center; border: 1px dashed var(--soft-300); border-radius: var(--radius); }
.fields-grid { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.field-inline { display: grid; grid-template-columns: 1fr 110px; gap: 0.5rem; align-items: end; }
.unit { color: var(--muted); font-size: var(--fs-0); }

/* Compass */
.q-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); }
.q-card .q-pillar { font-size: var(--fs-0); color: var(--blue); font-weight: 700; }
.q-card h3 { font-size: var(--fs-2); margin: 0.25rem 0 var(--space-2); }
.q-nav { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.q-dots { display: flex; gap: 4px; flex-wrap: wrap; margin: var(--space-2) 0; }
.q-dots button { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--soft-300); background: var(--white); font-size: 10px; cursor: pointer; padding: 0; color: var(--muted); }
.q-dots button.is-answered { background: var(--blue); border-color: var(--blue); color: var(--white); }
.q-dots button.is-unknown { background: var(--soft-200); }
.q-dots button.is-current { outline: 2px solid var(--blue); outline-offset: 2px; }
html.js .compass-all { display: none; }
.compass-all .q-card { margin-bottom: var(--space-2); }
.pillar-bars { display: grid; gap: 0.6rem; margin: var(--space-2) 0; }
.pillar-bar { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; font-size: var(--fs-0); }
.pillar-bar .track { grid-column: 1 / -1; height: 10px; background: var(--soft-200); border-radius: 999px; overflow: hidden; }
.pillar-bar .fill { display: block; height: 100%; background: var(--blue); width: 0; transition: width var(--dur-3) var(--ease-out); }
.pillar-bar.is-bottleneck .fill { background: var(--danger); }
.pillar-bar .val { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; counter-reset: r; }
.rec-list li { counter-increment: r; display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; }
.rec-list li::before { content: counter(r); font-family: var(--font-en); font-weight: 800; color: var(--white); background: var(--blue); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-0); }
html[lang="fa"] .rec-list li::before { content: counter(r, persian); font-family: var(--font-fa); }
.rec-list .rec-title { font-weight: 700; color: var(--ink); }
.rec-list .rec-detail { font-size: var(--fs-0); color: var(--ink-2); }

/* Channels */
.channel-cols { display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .channel-cols { grid-template-columns: repeat(3, 1fr); } }
.channel-col { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-2); background: var(--white); }
.channel-col h3 { font-size: var(--fs-2); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.channel-col.is-off { opacity: 0.55; }
.channel-col .field { margin-bottom: 0.6rem; }
.channel-col .field label { font-weight: 500; }
.channel-col.is-best { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(20,52,95,0.15); }
.result-table td.neg { color: var(--danger); font-weight: 700; }
.result-table td.num, .result-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.best-badge { background: var(--blue); color: var(--white); font-size: var(--fs-0); padding: 0.1rem 0.5rem; border-radius: 999px; }

/* Simulator */
.sim-grid { display: grid; gap: var(--space-2); }
@media (min-width: 700px) { .sim-grid { grid-template-columns: 1fr 1fr; } }
.sim-col h3 { font-size: var(--fs-2); }
.preset-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--space-2); }
.preset-row .btn { font-size: var(--fs-0); }
.mult { font-size: var(--fs-0); color: var(--muted); }
.lever-list { display: grid; gap: 0.5rem; }
.lever { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; font-size: var(--fs-0); align-items: center; }
.lever .track { grid-column: 1 / -1; height: 8px; background: var(--soft-200); border-radius: 999px; overflow: hidden; }
.lever .fill { display: block; height: 100%; background: var(--blue); width: 0; transition: width var(--dur-3) var(--ease-out); }
.lever.is-top .fill { background: var(--blue-ink); }
.lever.is-top .name { font-weight: 800; color: var(--blue); }

/* Reports */
.report-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: start; padding-block: var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-3); }
.report-meta { font-size: var(--fs-0); color: var(--muted); display: grid; gap: 0.2rem; }
.report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share-box { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2); font-size: var(--fs-0); display: grid; gap: 0.5rem; }
.share-box code { direction: ltr; display: block; word-break: break-all; background: var(--soft-100); padding: 0.4rem 0.6rem; border-radius: 4px; }