:root {
    --bg: #0f1115;
    --bg-2: #161a22;
    --bg-3: #1c2230;
    --border: #2a3142;
    --text: #e8eaef;
    --text-secondary: #c8d0dc;
    --muted: #b8c0ce;
    --accent: #ffd400;
    --accent-2: #f5c400;
    --accent-soft: rgba(255, 212, 0, 0.12);
    --danger: #ff5c5c;
    --success: #3dd68c;
    --pistachio: #9dbf7a;
    --pistachio-2: #8aaf66;
    --pistachio-soft: rgba(157, 191, 122, 0.16);
    --info: #5ab0ff;
    --radius: 14px;
    --nav-h: 64px;
    --bottom-h: 68px;
    --sidebar-w: 220px;

    /* Bootstrap dark overrides */
    --bs-body-color: #e8eaef;
    --bs-body-bg: #0f1115;
    --bs-secondary-color: #b8c0ce;
    --bs-tertiary-color: #9aa3b5;
    --bs-heading-color: #f3f5f9;
    --bs-emphasis-color: #f3f5f9;
    --bs-border-color: #2a3142;
    --bs-card-color: #e8eaef;
    --bs-card-bg: #161a22;
    --bs-accordion-color: #e8eaef;
    --bs-accordion-bg: #161a22;
    --bs-accordion-btn-color: #e8eaef;
    --bs-accordion-btn-bg: #161a22;
    --bs-accordion-active-color: #ffd400;
    --bs-accordion-active-bg: #1c2230;
    --bs-table-color: #e8eaef;
}

* { box-sizing: border-box; }

html {
    color-scheme: dark;
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: "Vazirmatn", sans-serif;
    min-height: 100%;
}

.accordion-button {
    color: var(--text) !important;
    background-color: transparent;
}

.accordion-button:not(.collapsed) {
    color: var(--accent) !important;
    background-color: var(--bg-3);
}

.accordion-body {
    color: var(--text-secondary);
    background-color: var(--bg);
}

.text-muted {
    color: var(--muted) !important;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

.skip-link {
    position: absolute;
    top: -100px;
    right: 1rem;
    z-index: 1100;
    padding: .55rem 1rem;
    background: var(--accent);
    color: #111 !important;
    font-weight: 700;
    border-radius: 8px;
    transition: top .15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: .75rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.app-shell {
    min-height: 100vh;
    padding-bottom: calc(var(--bottom-h) + 16px);
}

.app-brand-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: .75rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}

.app-brand-footer a {
    color: var(--accent);
    font-weight: 600;
}

.report-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    min-height: 180px;
    padding-top: .5rem;
}

.report-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.report-bar-track {
    width: 100%;
    max-width: 36px;
    height: 120px;
    display: flex;
    align-items: flex-end;
    background: var(--bg-3);
    border-radius: 6px 6px 2px 2px;
    overflow: hidden;
}

.report-bar-fill {
    width: 100%;
    background: var(--accent);
    border-radius: 6px 6px 0 0;
    min-height: 4px;
}

.report-bar-value {
    font-size: .65rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.report-bar-label {
    font-size: .75rem;
    color: var(--text-secondary);
}

.report-hbar-chart {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.report-hbar-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    gap: .5rem;
    align-items: center;
}

.report-hbar-label {
    font-size: .8rem;
    color: var(--text-secondary);
}

.report-hbar-track {
    height: 10px;
    background: var(--bg-3);
    border-radius: 999px;
    overflow: hidden;
}

.report-hbar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    min-width: 0;
}

.report-hbar-value {
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--nav-h);
    background: rgba(15, 17, 21, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.brand {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text) !important;
    font-size: 1.15rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.brand span { color: var(--accent); }

.sidebar {
    background: var(--bg-2);
    border-left: 1px solid var(--border);
    min-height: calc(100vh - var(--nav-h));
}

@media (min-width: 992px) {
    .app-sidebar {
        position: fixed;
        top: var(--nav-h);
        right: 0;
        width: var(--sidebar-w);
        height: calc(100vh - var(--nav-h));
        z-index: 1020;
    }

    .app-sidebar .sidebar {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 1rem .75rem;
    }

    .app-main {
        margin-right: var(--sidebar-w);
        min-width: 0;
    }
}

.nav-link-app {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    color: var(--muted);
    border-radius: 10px;
    margin-bottom: .25rem;
    transition: .15s ease;
}

.nav-link-app:hover,
.nav-link-app.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-h);
    background: rgba(15, 17, 21, 0.96);
    border-top: 1px solid var(--border);
    z-index: 1040;
    display: flex;
}

.bottom-nav a,
.bottom-nav .dropup > a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    color: var(--muted);
    font-size: .7rem;
}

.bottom-nav a.active,
.bottom-nav a:hover,
.bottom-nav .dropup > a.active,
.bottom-nav .dropup > a:hover {
    color: var(--accent);
}

.bottom-nav .dropup {
    flex: 1;
    height: 100%;
}

.page-wrap { padding: 1.25rem 0 2rem; }

.page-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.page-sub {
    color: var(--muted);
    font-size: .9rem;
    margin: .25rem 0 0;
}

.page-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
    transition: color .15s ease;
}

.page-help-btn:hover {
    color: var(--accent);
}

.page-help-btn:focus {
    outline: none;
}

.page-help-btn:focus-visible {
    color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.page-help-tooltip .tooltip-inner {
    max-width: 280px;
    text-align: right;
    font-size: .82rem;
    line-height: 1.65;
    padding: .55rem .75rem;
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--border);
}

.page-help-tooltip .tooltip-arrow::before {
    border-bottom-color: var(--border);
}

.card-app {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}

.card-app .card-body { padding: 1.1rem; }

.stat-card {
    background: linear-gradient(160deg, var(--bg-2), var(--bg-3));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    height: 100%;
}

a.stat-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

a.stat-card:hover {
    border-color: var(--accent);
    color: inherit;
}

a.stat-card:hover .value {
    color: var(--accent);
}

.stat-card .label {
    color: var(--muted);
    font-size: .82rem;
    margin-bottom: .35rem;
}

.stat-card .value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text);
}

.stat-card .value-sm {
    font-size: 1rem;
    line-height: 1.35;
}

a.stat-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.stat-card .icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .dashboard-actions {
        width: 100%;
    }

    .dashboard-actions .btn {
        flex: 1 1 calc(50% - .25rem);
    }
}

.pipeline-progress-bar {
    background: var(--accent);
}

.pipeline-progress-bar.is-won { background: var(--success); }
.pipeline-progress-bar.is-lost { background: var(--danger); }
.pipeline-progress-bar.is-negotiation { background: var(--info); }
.pipeline-progress-bar.is-proposal { background: #c9a227; }
.pipeline-progress-bar.is-qualified { background: #7ec8ff; }
.pipeline-progress-bar.is-new { background: var(--accent); }

.list-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
    font-size: .95rem;
    border: 1px solid rgba(255, 212, 0, .2);
}

.status-new, .stage-new { color: var(--accent); background: var(--accent-soft); }
.status-contacted, .stage-qualified { color: var(--info); background: rgba(90, 176, 255, .12); }
.status-qualified, .stage-proposal { color: #e8d48b; background: rgba(201, 162, 39, .15); }
.status-converted, .stage-won { color: var(--success); background: rgba(61, 214, 140, .12); }
.status-lost, .stage-lost { color: var(--danger); background: rgba(255, 92, 92, .12); }
.stage-negotiation { color: #9ad0ff; background: rgba(90, 176, 255, .14); }

.btn-accent {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--accent);
    border-color: var(--accent);
    color: #111 !important;
    font-weight: 700;
}

.btn-accent::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.38) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    animation: btn-accent-shine 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.btn-accent > * {
    position: relative;
    z-index: 2;
}

.btn-accent:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: #111 !important;
}

@keyframes btn-accent-shine {
    0%, 62% {
        transform: translateX(-120%);
    }
    78% {
        transform: translateX(120%);
    }
    100% {
        transform: translateX(120%);
    }
}

.btn-pistachio {
    background: var(--pistachio);
    border-color: var(--pistachio);
    color: #1a2414 !important;
    font-weight: 700;
}

.btn-pistachio:hover {
    background: var(--pistachio-2);
    border-color: var(--pistachio-2);
    color: #1a2414 !important;
}

.btn-pistachio:focus-visible {
    outline: 2px solid var(--pistachio);
    outline-offset: 2px;
}

.btn-accent:focus-visible,
.btn-ghost:focus-visible,
.btn:focus-visible,
.nav-link-app:focus-visible,
.landing-nav-links a:focus-visible,
.landing-nav-mobile a:focus-visible,
.landing-footer-links a:focus-visible,
.landing-nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-ghost:hover {
    background: var(--bg-3);
    border-color: var(--muted);
    color: var(--text);
}

/* تراز عمودی آیکون و متن در دکمه‌ها */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    vertical-align: middle;
}

.btn i[class*="fa-"],
.btn .fa,
.dropdown-item i[class*="fa-"],
.dropdown-item .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    margin: 0 !important;
}

.nav-link-app i[class*="fa-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 1.15em;
    flex-shrink: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-control,
.form-select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    min-height: 44px;
}

.form-control:focus,
.form-select:focus {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 .2rem rgba(255, 212, 0, .15);
}

.form-control::placeholder { color: #6d7588; }

/* پلیس‌هولدر فارسی RTL؛ مقدار واردشده LTR */
input[type="email"],
.input-ltr-value {
    direction: rtl;
    text-align: right;
}

input[type="email"]:not(:placeholder-shown),
.input-ltr-value:not(:placeholder-shown) {
    direction: ltr;
    text-align: left;
}

/* نوار فیلتر/جستجو: دسکتاپ یک‌خط (nowrap)؛ در RTL دکمه‌ها سمت راست ورودی */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .filters-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.filters-bar-search {
    display: flex;
    flex: 1 1 14rem;
    gap: .35rem;
    align-items: stretch;
    min-width: 0;
}

.filters-bar-q {
    flex: 1 1 auto;
    min-width: 0;
}

.filters-bar-select {
    flex: 0 1 9.5rem;
    min-width: 7.5rem;
    width: auto;
}

.filters-bar-check {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: .25rem;
}

.filters-bar-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: .35rem;
    /* در RTL اولین آیتم سمت راست است → دکمه‌ها راستِ ورودی */
    order: -1;
}

.filters-bar-actions > .btn,
.filters-bar-btn {
    min-height: 44px;
    min-width: 44px;
    padding-inline: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-view-toggle {
    width: auto;
    min-height: 44px;
    flex: 0 0 auto;
}

.filters-bar-view {
    margin-inline-start: auto;
}

.filter-view-toggle > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: .75rem;
}

/* یکسان‌سازی ارتفاع دکمه‌های فیلتر با ورودی‌ها (فرم‌های قدیمی مبتنی بر row) */
.card-app .card-body > .row.g-2 > [class*="col-"].d-grid > .btn {
    min-height: 44px;
}

.form-check-input {
    background-color: var(--bg);
    border-color: var(--border);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-label {
    color: var(--text);
}

.form-label {
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: .35rem;
}

.table-app {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: rgba(255,255,255,.03);
    margin-bottom: 0;
}

.table-app th {
    color: var(--muted);
    font-weight: 600;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-soft {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
    padding: .35rem .65rem;
    font-weight: 600;
}

.badge-success-soft { background: rgba(61,214,140,.15); color: var(--success); }
.badge-danger-soft { background: rgba(255,92,92,.15); color: var(--danger); }
.badge-info-soft { background: rgba(90,176,255,.15); color: var(--info); }
.badge-muted-soft { background: rgba(154,163,181,.15); color: var(--muted); }

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
}

.empty-state i {
    font-size: 2.2rem;
    color: var(--accent);
    margin-bottom: .75rem;
    opacity: .85;
}

.alert {
    border-radius: 12px;
    border: 1px solid var(--border);
}

.alert-success { background: rgba(61,214,140,.12); color: var(--success); }
.alert-danger { background: rgba(255,92,92,.12); color: var(--danger); }

.alert-app {
    transition: opacity .35s ease, transform .35s ease, max-height .35s ease, margin .35s ease, padding .35s ease;
}

.alert-app.is-hiding {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.pipeline-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .85rem;
    width: 100%;
}

.pipeline-col {
    min-width: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
}

.pipeline-col-head {
    padding: .85rem .75rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}

.pipeline-col-head .fw-semibold {
    font-size: .9rem;
    line-height: 1.35;
}

.pipeline-col-body {
    padding: .75rem;
    min-height: 180px;
    max-height: 65vh;
    overflow-y: auto;
    flex: 1;
}

.deal-chip {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .8rem .65rem;
    margin-bottom: .65rem;
    word-break: break-word;
    position: relative;
    cursor: grab;
}

.deal-chip:hover { border-color: var(--accent); }

.deal-chip.is-dragging {
    opacity: .55;
    cursor: grabbing;
}

.deal-chip-drag {
    position: absolute;
    top: .55rem;
    left: .45rem;
    color: var(--muted);
    font-size: .75rem;
    opacity: .55;
}

.pipeline-col-body.is-drop-target {
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
    background: var(--accent-soft);
}

.pipeline-col-flash {
    box-shadow: 0 0 0 2px var(--accent);
}

.pipeline-stage-jump {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.pipeline-stage-jump .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .pipeline-board {
        display: flex;
        overflow-x: auto;
        padding-bottom: .5rem;
        scroll-snap-type: x mandatory;
    }

    .pipeline-col {
        flex: 0 0 min(72vw, 280px);
        scroll-snap-align: start;
    }
}

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse at top right, rgba(255,212,0,.1), transparent 48%),
        radial-gradient(ellipse at bottom left, rgba(90,176,255,.07), transparent 42%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.85rem 1.75rem 1.6rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    animation: authCardIn .45s ease both;
}

.auth-card.auth-card-wide {
    max-width: 640px;
}

.auth-section {
    margin-bottom: 1.35rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--border);
}

.auth-section-title {
    font-size: .92rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 1rem;
}

.auth-check .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .2rem;
    background-color: var(--bg);
    border-color: var(--border);
}

.auth-check .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.auth-check .form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--accent-soft);
    border-color: var(--accent);
}

.auth-check .form-check-label {
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.6;
}

.auth-submit.is-loading {
    opacity: .75;
    pointer-events: none;
}

.auth-password-wrap {
    position: relative;
}

.auth-password-wrap .form-control {
    padding-inline-end: 2.75rem;
}

.auth-password-toggle {
    position: absolute;
    inset-inline-end: .55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    color: var(--accent);
    outline: none;
}

.auth-password-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.auth-back-home {
    opacity: .55;
    text-decoration: none !important;
    transition: opacity .2s ease;
}

.auth-back-home:hover {
    opacity: .9;
    color: var(--muted) !important;
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card {
        animation: none;
    }
}

/* ========== لندینگ ========== */
html { scroll-behavior: smooth; }

.landing {
    overflow-x: hidden;
}

.landing-section,
.landing-cta {
    scroll-margin-top: calc(var(--nav-h) + 12px);
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--nav-h);
    background: rgba(15, 17, 21, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.landing-nav > .container {
    min-height: var(--nav-h);
}

.landing-nav-links a {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
    padding: .45rem .85rem;
    border-radius: 8px;
    transition: color .2s ease, background .2s ease;
}

.landing-nav-links a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.landing-nav-toggle {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    padding: 0;
}

.landing-nav-toggle:hover {
    background: var(--bg-3);
    color: var(--accent);
}

.landing-nav-mobile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem 1rem 1rem;
    border-top: 1px solid var(--border);
    background: rgba(15, 17, 21, 0.98);
}

.landing-nav-mobile[hidden] {
    display: none !important;
}

.landing-nav-mobile a {
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    padding: .75rem .85rem;
    border-radius: 10px;
}

.landing-nav-mobile a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.landing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    align-items: flex-end;
    padding: 4.5rem 0 5rem;
    background: var(--bg);
}

.landing-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.landing-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.landing-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(15, 17, 21, .28) 0%, rgba(15, 17, 21, .58) 48%, rgba(15, 17, 21, .78) 100%),
        linear-gradient(0deg, rgba(15, 17, 21, .72) 0%, rgba(15, 17, 21, .4) 55%, rgba(15, 17, 21, .28) 100%);
}

.landing-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.landing-hero-copy {
    max-width: 36rem;
    animation: landingFadeUp .7s ease;
    padding: 1.25rem 1.1rem;
    border-radius: 16px;
    background: rgba(15, 17, 21, .22);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(42, 49, 66, .22);
}

.landing-brand {
    font-size: clamp(2.6rem, 7vw, 4.1rem);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: .85rem;
    letter-spacing: -0.03em;
    color: var(--text);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.landing-brand span { color: var(--accent); }

.landing-headline {
    font-size: clamp(1.25rem, 2.8vw, 1.65rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.45;
    margin-bottom: 1rem;
    max-width: 22em;
    text-shadow: 0 1px 16px rgba(0, 0, 0, .4);
}

.landing-lead {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 34rem;
    margin-bottom: 1.75rem;
}

.landing-hero-cta {
    animation: landingFadeUp .7s ease .12s both;
}

/* پیش‌نمایش داشبورد */
.landing-preview {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    animation: landingFadeUp .8s ease .2s both;
}

.landing-preview-bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem 1rem;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
}

.landing-preview-bar > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border);
}

.landing-preview-bar > span:nth-child(1) { background: #ff5c5c; }
.landing-preview-bar > span:nth-child(2) { background: #ffd400; }
.landing-preview-bar > span:nth-child(3) { background: #3dd68c; }

.landing-preview-title {
    margin-right: auto;
    font-size: .8rem;
    color: var(--muted);
    font-weight: 600;
}

.landing-preview-body {
    padding: 1.15rem;
}

.landing-preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    margin-bottom: 1.1rem;
}

.landing-preview-stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem .65rem;
    text-align: center;
}

.landing-preview-stat.accent {
    border-color: rgba(255, 212, 0, .35);
    background: var(--accent-soft);
}

.landing-preview-stat .label {
    display: block;
    font-size: .72rem;
    color: var(--muted);
    margin-bottom: .25rem;
}

.landing-preview-stat .value {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
}

.landing-preview-stat.accent .value { color: var(--accent); }

.landing-preview-pipeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    align-items: center;
    margin-bottom: 1.1rem;
    padding: .9rem .75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.pipe-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
}

.pipe-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .95rem;
    animation: landingFadeUp .7s ease both;
}

.pipe-col:nth-child(2) .pipe-icon { animation-delay: .1s; }
.pipe-col:nth-child(3) .pipe-icon { animation-delay: .2s; }
.pipe-col:nth-child(4) .pipe-icon { animation-delay: .3s; }

.pipe-icon.accent {
    background: var(--accent);
    border-color: var(--accent-2);
    color: #111;
}

.pipe-head {
    font-size: .68rem;
    color: var(--muted);
}

.landing-preview-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.preview-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .82rem;
}

.preview-row i {
    color: var(--accent);
    width: 1rem;
    text-align: center;
}

.preview-row span {
    flex: 1;
    color: var(--text);
    font-weight: 600;
}

.preview-row em {
    font-style: normal;
    color: var(--muted);
    font-size: .75rem;
}

/* سکشن‌ها */
.landing-section {
    padding: 4.5rem 0;
}

.landing-section-alt {
    background: var(--bg-2);
    border-block: 1px solid var(--border);
}

.landing-section-head {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 2.75rem;
}

.landing-section-head h2 {
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
    margin-bottom: .65rem;
    color: var(--text);
}

.landing-section-head p {
    color: var(--muted);
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
}

.landing-value,
.landing-module,
.landing-audience {
    height: 100%;
    padding: 1.5rem 1.25rem;
}

.landing-value-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.landing-value h3,
.landing-module h3,
.landing-audience h3,
.landing-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--text);
}

.landing-value p,
.landing-module p,
.landing-audience p,
.landing-step p {
    color: var(--muted);
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

.landing-module,
.landing-audience {
    border: none;
    border-radius: 0;
    background: transparent;
    transition: color .2s ease;
    padding-inline: 0;
}

.landing-section-alt .landing-module,
.landing-section-alt .landing-audience {
    background: transparent;
}

.landing-module:hover,
.landing-audience:hover {
    transform: none;
}

.landing-module:hover > i,
.landing-audience:hover > i,
.landing-module:hover h3,
.landing-audience:hover h3 {
    color: var(--accent);
}

.landing-module > i,
.landing-audience > i {
    display: block;
    font-size: 1.35rem;
    color: var(--accent);
    margin-bottom: .85rem;
}

.landing-steps .landing-step {
    text-align: center;
    padding: 1rem .5rem;
}

.landing-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #111;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.landing-checklist {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.landing-checklist li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: var(--text-secondary);
    font-size: .98rem;
    line-height: 1.6;
}

.landing-checklist i {
    color: var(--accent);
    margin-top: .2rem;
    flex-shrink: 0;
}

/* پلن‌ها */
.landing-plan {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-2);
}

.landing-section-alt .landing-plan {
    background: var(--bg);
}

.landing-plan-featured {
    border-color: rgba(255, 212, 0, .45);
    background:
        linear-gradient(180deg, rgba(255, 212, 0, .08), transparent 42%),
        var(--bg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}

.landing-plan-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: .72rem;
    font-weight: 700;
    color: #111;
    background: var(--accent);
    padding: .28rem .65rem;
    border-radius: 6px;
}

.landing-plan-name {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: .35rem;
    color: var(--text);
}

.landing-plan-desc {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.landing-plan-price {
    margin-bottom: 1.35rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.landing-plan-price-amounts {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    flex-wrap: wrap;
}

.landing-plan-price .amount-original {
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: line-through;
    line-height: 1.3;
}

.landing-plan-price .amount {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1.2;
}

.landing-plan-price .unit {
    display: block;
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--muted);
}

.landing-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    flex: 1;
}

.landing-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.landing-plan-features i {
    color: var(--accent);
    margin-top: .2rem;
    flex-shrink: 0;
}

.landing-plan .btn {
    margin-top: auto;
}

.landing-plan-btn-disabled,
.landing-plan-btn-disabled:disabled {
    background: rgba(42, 49, 66, .45) !important;
    border-color: rgba(42, 49, 66, .55) !important;
    color: rgba(184, 192, 206, .55) !important;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.landing-plan-full .landing-plan-badge {
    background: rgba(42, 49, 66, .4);
    color: rgba(184, 192, 206, .55);
    border: 1px solid rgba(42, 49, 66, .5);
}

/* سوالات متداول */
.landing-faq {
    width: 100%;
}

.landing-faq .accordion-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: .75rem;
    background: var(--bg-2);
}

.landing-faq .accordion-item:last-child {
    margin-bottom: 0;
}

.landing-faq .accordion-button {
    font-weight: 700;
    font-size: .98rem;
    box-shadow: none;
}

.landing-faq .accordion-button::after {
    margin-left: 0;
    margin-right: auto;
}

.landing-faq .accordion-body {
    font-size: .95rem;
    line-height: 1.75;
    color: var(--muted);
}

.landing-cta {
    padding: 4.5rem 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 212, 0, .14), transparent 55%),
        var(--bg-2);
    border-block: 1px solid var(--border);
}

.landing-cta h2 {
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
    margin-bottom: .75rem;
}

.landing-cta p {
    color: var(--muted);
    margin-bottom: 1.75rem;
    font-size: 1.05rem;
}

.landing-footer {
    padding: 3rem 0 1.5rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.landing-footer-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    text-align: right;
    width: 100%;
}

.landing-footer-col {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 992px) {
    .landing-footer-cols {
        gap: 1.25rem 1.75rem;
    }

    .landing-footer-col {
        flex: 1 1 180px;
        min-width: 160px;
    }

    .landing-footer-col:first-child {
        margin-inline-end: 1.5rem;
    }
}

.landing-footer .brand {
    font-size: 2.3rem;
}

.landing-footer-text {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.7;
}

.landing-footer-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .85rem;
}

.landing-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.landing-footer-links li { margin-bottom: .45rem; }

.landing-footer-links a {
    color: var(--muted);
    font-size: .9rem;
}

.landing-footer-links a:hover { color: var(--accent); }

.landing-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: .65rem;
}

.landing-footer-contact i {
    color: var(--accent);
    margin-top: .2rem;
    flex-shrink: 0;
}

.landing-footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .82rem;
}

.landing-footer-rights {
    color: var(--muted);
    font-size: .82rem;
}

@keyframes landingFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes landingHeroGlowA {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: .85;
    }
    50% {
        transform: translate(-6%, 8%) scale(1.08);
        opacity: 1;
    }
    100% {
        transform: translate(5%, -4%) scale(.96);
        opacity: .9;
    }
}

@keyframes landingHeroGlowB {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: .8;
    }
    50% {
        transform: translate(8%, -6%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-4%, 5%) scale(.94);
        opacity: .85;
    }
}

@keyframes landingHeroRipple {
    0% {
        transform: scale(1);
        opacity: .7;
    }
    70% {
        opacity: .25;
    }
    100% {
        transform: scale(1.12);
        opacity: 0;
    }
}

@media (max-width: 991.98px) {
    .landing-hero {
        min-height: calc(100vh - var(--nav-h));
        align-items: flex-end;
        padding: 2.25rem 0 calc(22vh - 90px);
    }

    .landing-brand {
        font-size: clamp(2.1rem, 9vw, 2.8rem);
        margin-bottom: .55rem;
    }

    .landing-headline {
        font-size: 1.15rem;
        margin-bottom: .75rem;
    }

    .landing-lead {
        font-size: .95rem;
        margin-bottom: 1.25rem;
    }

    .landing-hero::after {
        background:
            linear-gradient(0deg, rgba(15, 17, 21, .68) 0%, rgba(15, 17, 21, .4) 48%, rgba(15, 17, 21, .26) 100%);
    }

    .landing-preview-stats {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero-copy,
    .landing-hero-cta,
    .landing-preview,
    .pipe-icon {
        animation: none;
    }
}

.avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-3);
}

.list-item-app {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--border);
    border-radius: 10px;
    transition: background .15s ease, padding .15s ease;
}

.list-item-app:last-child { border-bottom: 0; }

a.list-item-app,
.list-item-app:has(a) {
    text-decoration: none;
    color: inherit;
}

.list-item-app:hover,
.list-item-app:focus-within {
    background: var(--accent-soft);
    padding-inline: .65rem;
}

.btn-accent:disabled,
.btn-accent.disabled,
.btn-ghost:disabled,
.btn-ghost.disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-accent:disabled::after,
.btn-accent.disabled::after {
    animation: none;
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn-accent::after {
        animation: none;
        content: none;
    }
}

.form-control[type="file"] {
    padding: .55rem .75rem;
    line-height: 1.4;
    color: var(--muted);
}

.form-control[type="file"]::file-selector-button {
    margin-inline-end: .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-3);
    color: var(--text);
    padding: .35rem .75rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.badge-soft.success { color: var(--success); background: rgba(61, 214, 140, .12); }
.badge-soft.danger { color: var(--danger); background: rgba(255, 92, 92, .12); }
.badge-soft.info { color: var(--info); background: rgba(90, 176, 255, .12); }
.badge-soft.muted { color: var(--muted); background: rgba(184, 192, 206, .12); }

.note-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .9rem;
    margin-bottom: .75rem;
}

.progress {
    background: var(--bg);
    height: 8px;
    border-radius: 999px;
}

.progress-bar {
    background: var(--accent);
}

.text-muted-app { color: var(--muted) !important; }

.card,
.card-body,
.card-app,
.card-app .card-body {
    color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text);
}

.guide-section,
.guide-section p,
.guide-section li,
.guide-section strong,
.guide-section h2,
.guide-section h3,
.guide-section h6,
.guide-workflow-box,
.guide-workflow-box h3,
.guide-workflow-box li,
.guide-feature strong,
.guide-check-item,
.guide-tip,
.guide-tip span {
    color: var(--text);
}

.guide-section .text-muted-app,
.guide-feature .text-muted-app,
.accordion-body.text-muted-app {
    color: var(--text-secondary) !important;
}

.table-app td {
    color: var(--text);
}

@media (min-width: 992px) {
    .app-shell { padding-bottom: 1.5rem; }
}

.dropdown-menu {
    background: var(--bg-2);
    border: 1px solid var(--border);
}

.dropdown-item { color: var(--text); }
.dropdown-item:hover { background: var(--bg-3); color: var(--accent); }

.pagination .page-link {
    background: var(--bg-2);
    border-color: var(--border);
    color: var(--text);
}

.pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #111;
}

.pagination .page-link:hover {
    background: var(--bg-3);
    color: var(--accent);
}

.guide-toc .h6 {
    color: var(--text);
}

.guide-toc .guide-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.guide-nav a {
    display: block;
    padding: .45rem .65rem;
    border-radius: 8px;
    color: var(--muted);
    font-size: .85rem;
    transition: .15s ease;
}

.guide-nav a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.guide-section .card-body {
    padding: 1.25rem 1.35rem;
}

.guide-badge,
.guide-step {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 999px;
    margin-bottom: .75rem;
}

.guide-badge {
    background: rgba(90, 176, 255, .15);
    color: var(--info);
}

.guide-step {
    background: var(--accent-soft);
    color: var(--accent);
}

.guide-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .85rem;
}

.guide-steps,
.guide-list {
    padding-right: 1.2rem;
    color: var(--text);
}

.guide-steps li,
.guide-list li {
    margin-bottom: .55rem;
    line-height: 1.7;
}

.guide-tip {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--accent-soft);
    border: 1px solid rgba(255, 212, 0, .25);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-top: 1rem;
    font-size: .9rem;
    color: var(--text-secondary);
}

.guide-tip i {
    color: var(--accent);
    margin-top: .15rem;
}

.guide-feature {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .85rem;
    height: 100%;
}

.guide-feature i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}

.guide-workflow-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    height: 100%;
}

.guide-accordion .accordion-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px !important;
    margin-bottom: .5rem;
    overflow: hidden;
    color: var(--text);
}

.guide-accordion .accordion-button {
    background: transparent;
    color: var(--text) !important;
    box-shadow: none;
    font-size: .92rem;
    font-weight: 600;
}

.guide-accordion .accordion-button:not(.collapsed) {
    background: var(--bg-3);
    color: var(--accent) !important;
}

.guide-accordion .accordion-button::after {
    filter: invert(1);
}

.guide-accordion .accordion-body {
    background: var(--bg);
    color: var(--text-secondary);
}

.guide-checklist {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.guide-check-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    margin: 0;
}

.guide-check-item:hover {
    border-color: var(--accent);
}

.guide-check-item input {
    margin: 0;
    flex-shrink: 0;
}

/* ─── Bootstrap dark harmonization ─── */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-color: #9aa3b5;
    --bs-heading-color: var(--text);
    --bs-emphasis-color: #f3f5f9;
    --bs-border-color: var(--border);
    --bs-card-bg: var(--bg-2);
    --bs-card-color: var(--text);
    --bs-accordion-bg: var(--bg-2);
    --bs-accordion-color: var(--text);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-btn-bg: var(--bg-2);
    --bs-accordion-active-color: var(--accent);
    --bs-accordion-active-bg: var(--bg-3);
    --bs-dropdown-bg: var(--bg-2);
    --bs-dropdown-color: var(--text);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--bg-3);
    --bs-dropdown-link-hover-color: var(--accent);
    --bs-dropdown-divider-bg: var(--border);
    --bs-pagination-bg: var(--bg-2);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-color: var(--text);
    --bs-pagination-hover-bg: var(--bg-3);
    --bs-pagination-hover-color: var(--accent);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-active-color: #111;
    --bs-table-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: rgba(255, 255, 255, .03);
    --bs-form-valid-color: var(--success);
    --bs-form-invalid-color: var(--danger);
}

.accordion-item {
    background: var(--bg-2);
    border-color: var(--border) !important;
    color: var(--text);
}

.accordion-button::after {
    filter: invert(1) brightness(1.2);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

hr,
.dropdown-divider {
    border-color: var(--border) !important;
    opacity: 1;
}

.form-select option,
.form-select optgroup {
    background: var(--bg-2);
    color: var(--text);
}

.form-control:disabled,
.form-select:disabled {
    background: var(--bg-3);
    color: var(--muted);
    opacity: 1;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success);
}

.invalid-feedback,
.valid-feedback {
    color: var(--danger);
}

.valid-feedback {
    color: var(--success);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text);
    border-color: var(--border);
}

.table thead th {
    color: var(--muted);
}

/* ─── Persian datepicker (dark) ─── */
.datepicker-plot-area {
    font-family: "Vazirmatn", sans-serif !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5) !important;
}

.datepicker-plot-area * {
    color: var(--text);
}

.datepicker-plot-area .datepicker-day-view .table-days td span,
.datepicker-plot-area .datepicker-year-view .year-item,
.datepicker-plot-area .datepicker-month-view .month-item {
    background-color: transparent !important;
    color: var(--text) !important;
    border: none !important;
    text-shadow: none !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.disabled span,
.datepicker-plot-area .datepicker-year-view .year-item-disable,
.datepicker-plot-area .datepicker-month-view .month-item-disable {
    background-color: var(--bg) !important;
    color: var(--muted) !important;
    opacity: .55;
}

.datepicker-plot-area .datepicker-day-view .table-days td span.other-month {
    color: var(--muted) !important;
    opacity: .45;
}

.datepicker-plot-area .datepicker-day-view .table-days td.today span {
    background-color: var(--bg-3) !important;
    color: var(--accent) !important;
    box-shadow: inset 0 0 0 1px var(--accent);
}

.datepicker-plot-area .datepicker-day-view .table-days td.selected span,
.datepicker-plot-area .datepicker-year-view .year-item.selected,
.datepicker-plot-area .datepicker-month-view .month-item.selected {
    background-color: var(--accent) !important;
    color: #111 !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span:hover,
.datepicker-plot-area .datepicker-year-view .year-item:hover,
.datepicker-plot-area .datepicker-month-view .month-item:hover {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}

.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell {
    color: var(--muted) !important;
    font-weight: 600 !important;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-next,
.datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
    background-color: var(--bg-3) !important;
    color: var(--text) !important;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-next:hover,
.datepicker-plot-area .datepicker-navigator .pwt-btn-switch:hover,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev:hover {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}

.datepicker-plot-area .toolbox .pwt-btn-submit,
.datepicker-plot-area .toolbox .pwt-btn-calendar,
.datepicker-plot-area .toolbox .pwt-btn-today {
    background-color: var(--bg-3) !important;
    color: var(--accent) !important;
}

.datepicker-plot-area .toolbox .pwt-btn-submit:hover,
.datepicker-plot-area .toolbox .pwt-btn-calendar:hover,
.datepicker-plot-area .toolbox .pwt-btn-today:hover {
    background-color: var(--accent-soft) !important;
}

.datepicker-plot-area .datepicker-time-view {
    background: var(--bg-3) !important;
    border-top: 1px solid var(--border) !important;
}

.datepicker-plot-area .datepicker-time-view input,
.datepicker-plot-area .datepicker-time-view .down-btn,
.datepicker-plot-area .datepicker-time-view .up-btn {
    color: var(--text) !important;
}

.datepicker-plot-area .datepicker-time-view .down-btn:hover,
.datepicker-plot-area .datepicker-time-view .up-btn:hover {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}

.datepicker-container.pwt-mobile-view .datepicker-plot-area {
    background: var(--bg) !important;
}

.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time {
    background: rgba(15, 17, 21, .94) !important;
    border: 0 !important;
}

/* ─── یادآوری‌ها / اعلان‌ها ─── */
.reminder-bell-btn,
.topbar-icon-btn {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reminder-bell-icon,
.topbar-icon-btn i {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--text);
}

.topbar-icon-btn.is-active,
.topbar-icon-btn.is-active i {
    color: var(--accent);
}

.marketplace-card {
    border: 1px solid var(--border);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.marketplace-card-ready {
    border-color: rgba(255, 212, 0, .35);
}

.marketplace-card-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.15rem;
}

.marketplace-points {
    font-weight: 600;
    color: var(--accent);
    font-size: .92rem;
}

.admin-alert-banner {
    border: 1px solid rgba(255, 180, 0, .35);
    background: rgba(255, 212, 0, .08);
    border-radius: .75rem;
    padding: .85rem 1rem;
}

.topbar-icon-btn .reminder-badge {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translate(20%, -20%);
}

.reminder-badge {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    transform: translate(-20%, -20%);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    line-height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid var(--bg-2);
    box-sizing: content-box;
    z-index: 1;
    pointer-events: none;
}

.reminder-dropdown {
    width: min(92vw, 360px);
    max-height: 70vh;
    overflow: hidden;
}

.reminder-dropdown-head,
.reminder-dropdown-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
}

.reminder-dropdown-foot {
    border-bottom: 0;
    border-top: 1px solid var(--border);
}

.reminder-dropdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
}

.reminder-dropdown-list {
    max-height: 320px;
    overflow-y: auto;
}

.reminder-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: .15s ease;
}

.reminder-item:hover {
    background: var(--bg-3);
    color: var(--text);
}

.reminder-item:last-child {
    border-bottom: 0;
}

.reminder-item-cat {
    font-size: .72rem;
    color: var(--muted);
}

.reminder-item-title {
    font-weight: 600;
    font-size: .9rem;
}

.reminder-item-sub {
    font-size: .78rem;
    color: var(--text-secondary);
}

.reminder-item-danger {
    border-right: 3px solid var(--danger);
}

.reminder-item-warning {
    border-right: 3px solid var(--accent);
}

.reminder-item-info {
    border-right: 3px solid var(--info);
}

.reminder-modal-content {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
}

.reminder-modal-content .modal-header,
.reminder-modal-content .modal-footer {
    background: var(--bg-2);
}

/* ─── صفحه قوانین ─── */
.legal-card {
    max-width: 720px;
}

.legal-body {
    padding-left: .25rem;
}

.legal-section {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.legal-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.legal-heading {
    color: var(--accent);
    font-weight: 700;
    margin-bottom: .5rem;
}

.legal-body p,
.legal-body li {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.75;
}

.legal-body ul {
    padding-right: 1.2rem;
    margin-bottom: .5rem;
}

/* ─── اولویت پیگیری (Engagement) ─── */
.engagement-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.engagement-badge-sm {
    padding: .2rem .45rem;
    font-size: .72rem;
}

.engagement-badge-sm span {
    display: none;
}

.engagement-badge i {
    font-size: 1em;
    line-height: 1;
}

.engagement-hot {
    background: rgba(255, 140, 40, .15);
    color: #ff9a3c;
}

.engagement-warm {
    background: rgba(61, 214, 140, .15);
    color: var(--success);
}

.engagement-neutral {
    background: rgba(154, 163, 181, .15);
    color: var(--muted);
}

.engagement-cold {
    background: rgba(90, 176, 255, .15);
    color: var(--info);
}

.engagement-at_risk {
    background: rgba(255, 92, 92, .2);
    color: var(--danger);
}

.engagement-vip {
    background: var(--accent-soft);
    color: var(--accent);
}

.engagement-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.engagement-option {
    margin: 0;
    cursor: pointer;
}

.engagement-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.engagement-option-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 72px;
    padding: .55rem .5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    transition: .15s ease;
}

.engagement-option-box i {
    font-size: 1.15rem;
}

.engagement-option-input:checked + .engagement-option-box {
    border-color: currentColor;
    box-shadow: 0 0 0 2px rgba(255, 212, 0, .12);
}

.engagement-option-input:checked + .engagement-hot { color: #ff9a3c; background: rgba(255, 140, 40, .12); }
.engagement-option-input:checked + .engagement-warm { color: var(--success); background: rgba(61, 214, 140, .12); }
.engagement-option-input:checked + .engagement-neutral { color: var(--text); background: var(--bg-3); }
.engagement-option-input:checked + .engagement-cold { color: var(--info); background: rgba(90, 176, 255, .12); }
.engagement-option-input:checked + .engagement-at_risk { color: var(--danger); background: rgba(255, 92, 92, .15); }
.engagement-option-input:checked + .engagement-vip { color: var(--accent); background: var(--accent-soft); }

.engagement-option:hover .engagement-option-box {
    border-color: var(--accent);
}

/* ─── کارت مخاطب ─── */
.contact-card {
    display: block;
    height: 100%;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.contact-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.contact-card-body {
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 100%;
    align-items: center;
    text-align: center;
}

.contact-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    margin-bottom: .2rem;
    flex-shrink: 0;
}

.contact-card-icon.engagement-hot {
    background: rgba(255, 140, 40, .15);
    color: #ff9a3c;
}

.contact-card-icon.engagement-warm {
    background: rgba(61, 214, 140, .15);
    color: var(--success);
}

.contact-card-icon.engagement-neutral {
    background: rgba(154, 163, 181, .15);
    color: var(--muted);
}

.contact-card-icon.engagement-cold {
    background: rgba(90, 176, 255, .15);
    color: var(--info);
}

.contact-card-icon.engagement-at_risk {
    background: rgba(255, 92, 92, .2);
    color: var(--danger);
}

.contact-card-icon.engagement-vip {
    background: var(--accent-soft);
    color: var(--accent);
}

.contact-card-name {
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.35;
    word-break: break-word;
}

.contact-card-engagement {
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
}

.contact-card-meta {
    font-size: .75rem;
    color: var(--muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.contact-card-contact {
    font-size: .78rem;
    color: var(--text-secondary);
    margin-top: auto;
    padding-top: .25rem;
    direction: ltr;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.contact-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
    justify-content: center;
}

.contact-card-foot .badge-success-soft,
.contact-card-foot .badge-muted-soft {
    font-size: .68rem;
    padding: .15rem .45rem;
}

/* —— سند فاکتور —— */
.invoice-doc-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.invoice-doc-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.invoice-doc-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
    padding: .25rem;
}

.invoice-doc-seller-name {
    font-size: 1.15rem;
    font-weight: 700;
}

.invoice-doc-type {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
}

.invoice-doc-parties {
    margin-bottom: .25rem;
}

.invoice-party {
    height: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .02);
}

.invoice-party-title {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .45rem;
}

.invoice-party-name {
    font-weight: 700;
    margin-bottom: .35rem;
}

.invoice-doc-table thead th {
    white-space: nowrap;
    border-bottom-color: var(--border);
}

.invoice-doc-table tfoot td {
    border-top-color: var(--border);
}

.invoice-doc-total td {
    border-top: 2px solid var(--accent) !important;
}

.invoice-doc-notes {
    padding: .75rem 1rem;
    border: 1px dashed var(--border);
    border-radius: .65rem;
}

.invoice-doc-signs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.invoice-sign-box {
    border: 1px solid var(--border);
    border-radius: .65rem;
    padding: .85rem 1rem;
    min-height: 140px;
}

.invoice-sign-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .65rem;
}

.invoice-sign-media {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: .75rem;
    min-height: 90px;
}

.invoice-stamp {
    max-width: 110px;
    max-height: 110px;
    object-fit: contain;
}

.invoice-signature {
    max-width: 140px;
    max-height: 70px;
    object-fit: contain;
}

.invoice-sign-placeholder {
    align-self: center;
}

@media (max-width: 575.98px) {
    .invoice-doc-signs {
        grid-template-columns: 1fr;
    }
}

@media print {
    .no-print,
    .topbar,
    .app-sidebar,
    .bottom-nav,
    .page-help-btn,
    .alert,
    .skip-link,
    .app-brand-footer {
        display: none !important;
    }

    .app-shell,
    .app-body,
    .app-main,
    .page-wrap,
    .container-fluid {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #111 !important;
    }

    body,
    html {
        background: #fff !important;
        color: #111 !important;
    }

    .invoice-doc.card-app {
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #111 !important;
    }

    .invoice-doc .text-muted-app,
    .invoice-party-title,
    .invoice-sign-label {
        color: #555 !important;
    }

    .invoice-party,
    .invoice-sign-box,
    .invoice-doc-notes {
        border-color: #ccc !important;
        background: #fff !important;
    }

    .invoice-doc-type {
        color: #111 !important;
    }

    .invoice-doc a {
        color: #111 !important;
        text-decoration: none !important;
    }

    .invoice-doc-total td {
        border-top-color: #111 !important;
    }
}


/* —— Contact hub tabs —— */
.contact-hub-tabs {
    border-bottom-color: var(--border);
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .15rem;
}

.contact-hub-tabs .nav-link {
    color: var(--muted);
    border: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: .85rem;
    padding: .55rem .7rem;
}

.contact-hub-tabs .nav-link:hover {
    color: var(--text);
    border-color: transparent;
}

.contact-hub-tabs .nav-link.active {
    color: var(--accent);
    background: transparent;
    border-bottom-color: var(--accent);
}

.contact-hub-tabs .badge-soft {
    font-size: .7rem;
    margin-right: .25rem;
}

/* —— Confirm modal —— */
.confirm-modal-content {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
}

.confirm-modal-content .modal-header,
.confirm-modal-content .modal-footer {
    border-color: var(--border) !important;
}

.confirm-modal-content .btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #111;
    font-weight: 700;
}

/* —— Pipeline stage select —— */
.deal-chip-stage {
    margin: 0;
}

.deal-stage-select {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
    font-size: .75rem;
    padding: .25rem .5rem;
}

/* ─── UI QA refinements ─── */
.topbar-user-btn {
    max-width: min(42vw, 12rem);
}

.topbar-user-name {
    display: inline-block;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.bottom-nav-more {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    height: 100%;
    color: var(--muted);
    text-decoration: none;
    font-size: .7rem;
}

.bottom-nav-more:hover,
.bottom-nav-more.active,
.bottom-nav-more:focus-visible {
    color: var(--accent);
}

.bottom-nav a:focus-visible,
.bottom-nav-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
}

.avatar-md {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--bg-3);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.profile-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--text);
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--border);
}

.profile-file-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.profile-file-row .form-control {
    flex: 1;
    min-width: 0;
}

.error-icon {
    width: 4rem;
    height: 4rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.75rem;
}

.priority-high { color: var(--danger); font-weight: 700; }
.priority-medium { color: var(--accent); font-weight: 600; }
.priority-low { color: var(--muted); }

.invoice-status-draft { color: var(--muted); background: rgba(184, 192, 206, .12); }
.invoice-status-sent { color: var(--info); background: rgba(90, 176, 255, .12); }
.invoice-status-paid { color: var(--success); background: rgba(61, 214, 140, .12); }
.invoice-status-cancelled { color: var(--danger); background: rgba(255, 92, 92, .12); }
.invoice-status-converted { color: var(--accent); background: var(--accent-soft); }

.report-section-title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 .85rem;
}

.stat-card-accent {
    border-color: rgba(255, 212, 0, .28);
    background:
        linear-gradient(160deg, rgba(255, 212, 0, .08), transparent 55%),
        linear-gradient(160deg, var(--bg-2), var(--bg-3));
}

.legal-card {
    max-width: min(820px, 100%);
    max-height: none;
}

.legal-body {
    max-height: none;
    overflow: visible;
}

.badge-soft.status-new,
.badge-soft.stage-new,
.badge-soft.status-contacted,
.badge-soft.stage-qualified,
.badge-soft.status-qualified,
.badge-soft.stage-proposal,
.badge-soft.status-converted,
.badge-soft.stage-won,
.badge-soft.status-lost,
.badge-soft.stage-lost,
.badge-soft.stage-negotiation,
.badge-soft.invoice-status-draft,
.badge-soft.invoice-status-sent,
.badge-soft.invoice-status-paid,
.badge-soft.invoice-status-cancelled,
.badge-soft.invoice-status-converted {
    border-radius: 999px;
    padding: .35rem .65rem;
    font-weight: 600;
}

.list-avatar-lg {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
    border-radius: 14px;
}

@media (max-width: 575.98px) {
    .report-bar-value {
        font-size: .62rem;
        line-height: 1.2;
        word-break: break-word;
    }

    .report-hbar-label {
        min-width: 4.25rem;
        font-size: .75rem;
    }
}

.note-body {
    white-space: pre-wrap;
    color: var(--text-secondary);
    line-height: 1.7;
}

.note-box {
    transition: border-color .15s ease;
}

.note-box:hover {
    border-color: rgba(255, 212, 0, .35);
}

.guide-toc.sticky-lg-top {
    top: calc(var(--nav-h) + 1rem);
}

.guide-nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Progressive disclosure: keep create forms calm */
.form-more {
    margin-top: 1rem;
}

.form-more-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: start;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.form-more-toggle:hover,
.form-more-toggle:focus-visible {
    border-color: rgba(255, 212, 0, .45);
    background: rgba(255, 212, 0, .04);
    color: var(--accent);
    outline: none;
}

.form-more-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .92rem;
}

.form-more-hint {
    color: var(--muted);
    font-size: .78rem;
}

.form-more-icon-open { display: none; }
.form-more-toggle.is-open .form-more-icon-closed { display: none; }
.form-more-toggle.is-open .form-more-icon-open { display: inline-block; }

.form-more-body {
    margin-top: .85rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.form-more-collapse:not(.show) .form-more-body {
    display: none;
}

/* Missions */
.mission-intro .mission-progress-label {
    font-size: .8rem;
    color: var(--muted);
}

.mission-progress-count {
    font-weight: 700;
    color: var(--text);
}

.mission-progress-percent {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--accent);
}

.mission-progress-bar {
    height: .65rem;
    background: var(--bg-3);
    border-radius: 999px;
    overflow: hidden;
}

.mission-progress-bar .progress-bar {
    background: var(--accent);
}

.mission-current {
    border-color: rgba(90, 176, 255, .35);
    box-shadow: 0 0 0 1px rgba(90, 176, 255, .12);
}

.mission-complete-banner {
    border-color: rgba(120, 200, 120, .35);
}

.mission-complete-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(120, 200, 120, .15);
    color: #7cc87c;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mission-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-3);
    color: var(--muted);
    flex-shrink: 0;
}

.mission-icon-active {
    background: var(--accent-soft);
    color: var(--accent);
}

.mission-card.is-done {
    opacity: .78;
}

.mission-card.is-current {
    border-color: rgba(90, 176, 255, .3);
}

.mission-status {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
    background: var(--bg-3);
    color: var(--muted);
    font-size: .85rem;
}

.mission-card.is-done .mission-status {
    background: rgba(120, 200, 120, .15);
    color: #7cc87c;
}

.mission-card.is-current .mission-status {
    background: var(--accent-soft);
    color: var(--accent);
}

.mission-index {
    font-size: .75rem;
    font-weight: 700;
}

.mission-state-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--muted);
    white-space: nowrap;
}

.mission-card.is-done .mission-state-badge {
    background: rgba(120, 200, 120, .15);
    color: #7cc87c;
}

.mission-card.is-current .mission-state-badge {
    background: var(--accent-soft);
    color: var(--accent);
}

.mission-mini-progress {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.mission-mini-progress .progress {
    flex: 1;
    height: .4rem;
    background: var(--bg-3);
    border-radius: 999px;
    overflow: hidden;
}

.mission-mini-progress .progress-bar {
    background: var(--accent);
}

.mission-steps {
    margin-bottom: 0;
}

.mission-coach-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(90, 176, 255, .15);
    color: var(--info);
    flex-shrink: 0;
}

.mission-coach-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--info);
}

.mission-focus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.mission-focus-chip {
    display: inline-flex;
    align-items: center;
    padding: .45rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .82rem;
    transition: .15s ease;
}

.mission-focus-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.mission-focus-chip.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.mission-step-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.02);
    margin-bottom: .45rem;
    cursor: pointer;
}

.mission-step-check:hover {
    border-color: rgba(90, 176, 255, .35);
}

.mission-step-check .form-check-input {
    margin-top: .2rem;
    flex-shrink: 0;
}

.mission-step-check:has(.mission-step-input:checked) {
    border-color: rgba(120, 200, 120, .4);
    background: rgba(120, 200, 120, .08);
}

.mission-interactive-steps.is-all-checked .mission-steps-hint {
    color: var(--accent);
}

.mission-expand-btn {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: right;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.mission-expand-btn:hover {
    color: var(--accent);
}

.mission-expand-icon {
    font-size: .7rem;
    opacity: .7;
}

.mission-card.is-snoozed {
    opacity: .72;
    border-style: dashed;
}

.mission-card.is-snoozed .mission-status {
    color: var(--warning, #e0b35a);
}

.mission-celebrate {
    position: sticky;
    top: .75rem;
    z-index: 20;
    margin-bottom: 1rem;
}

.mission-celebrate-inner {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: rgba(120, 200, 120, .16);
    border: 1px solid rgba(120, 200, 120, .35);
    color: #9fd89f;
    font-weight: 700;
}

.mission-celebrate.is-hiding {
    opacity: 0;
    transition: opacity .35s ease;
}

.mission-phase-chip {
    padding: .65rem .75rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-2);
}

.mission-phase-chip.is-done {
    border-color: rgba(120, 200, 120, .4);
    background: rgba(120, 200, 120, .08);
}

.mission-phase-head {
    padding: .25rem .15rem;
}

.mission-card.is-locked {
    opacity: .62;
}

.mission-card.is-locked .mission-status {
    color: var(--muted);
}

.mission-alert {
    border-color: rgba(224, 179, 90, .4);
}

.mission-alert-danger {
    border-color: rgba(220, 90, 90, .45);
    box-shadow: 0 0 0 1px rgba(220, 90, 90, .08);
}

.mission-alert-warning {
    border-color: rgba(224, 179, 90, .45);
}

.mission-mistakes {
    padding: .75rem .9rem;
    border-radius: 10px;
    background: rgba(220, 90, 90, .08);
    border: 1px solid rgba(220, 90, 90, .2);
}

.mission-dashboard-card {
    border-color: rgba(90, 176, 255, .28);
}

.mission-page-hint {
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(90, 176, 255, .35);
    background: rgba(90, 176, 255, .08);
}

.mission-page-hint-urgent {
    border-color: rgba(220, 90, 90, .4);
    background: rgba(220, 90, 90, .08);
}

.mission-page-hint-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--info);
}

.mission-page-hint-urgent .mission-page-hint-label {
    color: #e07a7a;
}

.mission-progress-toast {
    border-color: rgba(120, 200, 120, .35);
}

.mission-why-now {
    color: var(--info);
}

.mission-page-hint-weekly {
    border-color: rgba(160, 120, 255, .35);
    background: rgba(160, 120, 255, .08);
}

.mission-weekly-done {
    opacity: .75;
    border-color: rgba(120, 200, 120, .35);
}

.mission-field-highlight {
    position: relative;
    border-radius: 10px;
    outline: 1px dashed rgba(90, 176, 255, .45);
    outline-offset: 4px;
    padding: .15rem .25rem;
    transition: .15s ease;
}

.mission-field-highlight.is-focused-mission {
    outline-color: var(--accent);
    background: rgba(90, 176, 255, .06);
}

.mission-inline-tip {
    font-size: .75rem;
    color: var(--info);
    margin-top: .35rem;
}

.mission-field-code {
    font-size: .72rem;
    color: var(--accent);
}