@font-face {
    font-family: "Vazir";
    src: url("/fonts/VAZIR.TTF") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazir";
    src: url("/fonts/VAZIR-MEDIUM-FD.TTF") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Work management */
.work-board { overflow-x: auto; padding-bottom: .75rem; }
.work-board-track { display: flex; gap: 1rem; min-width: max-content; align-items: flex-start; }
.work-stage { width: 310px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: .8rem; }
.work-stage > header { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.work-stage > header .badge { margin-inline-start: auto; }
.stage-dot { width: .65rem; height: .65rem; border-radius: 50%; }
.work-stage-items { display: grid; align-content:start; gap: .75rem; min-height:80px; padding:.2rem; border-radius:.75rem; transition:background-color .15s ease,box-shadow .15s ease; }
.work-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .8rem; padding: .85rem; box-shadow: 0 3px 12px rgba(0,0,0,.04); }
.work-card-drag-handle { display:grid; place-items:center; width:1.75rem; height:1.75rem; padding:0; border:0; border-radius:.45rem; color:var(--bs-secondary-color); background:transparent; cursor:grab; touch-action:none; }
.work-card-drag-handle:hover { color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.09); }.work-card-drag-handle:active{cursor:grabbing}
.work-card.is-dragging { opacity:.45; transform:rotate(.5deg); }.work-card.is-submitting{opacity:.55;pointer-events:none}
.work-stage.is-drop-target .work-stage-items { background:rgba(var(--bs-primary-rgb),.08); box-shadow:inset 0 0 0 2px rgba(var(--bs-primary-rgb),.35); }
.work-card h3 { font-size: .95rem; margin: .7rem 0 .4rem; }
.work-card p { color: var(--bs-secondary-color); font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.work-assignees { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.work-assignees span { font-size: .72rem; padding: .15rem .45rem; background: var(--bs-tertiary-bg); border-radius: 2rem; }
.priority-critical { background:#dc3545; color:#fff; }.priority-high { background:#fd7e14; color:#fff; }.priority-normal { background:#e7f1ff; color:#0d6efd; }.priority-low { background:#e9ecef; color:#495057; }
.metric-card { height:100%; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-inline-start:4px solid #6c757d; border-radius:.8rem; padding:1rem; display:flex; flex-direction:column; gap:.35rem; }
.metric-card span { color:var(--bs-secondary-color); font-size:.82rem; }.metric-card strong { font-size:1.55rem; }.metric-card.success{border-inline-start-color:#198754}.metric-card.danger{border-inline-start-color:#dc3545}.metric-card.info{border-inline-start-color:#0dcaf0}
.trend-chart { height:230px; display:flex; gap:3px; align-items:flex-end; border-bottom:1px solid var(--bs-border-color); padding-top:1rem; overflow-x:auto; }
.trend-column { height:100%; min-width:12px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
.trend-value { width:70%; min-height:3px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#4f8cff,#165dca); }
.trend-column small { font-size:.58rem; color:var(--bs-secondary-color); }
.analytics-rates { display:grid; gap:1rem; }.analytics-rates > div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--bs-border-color);padding-bottom:.7rem}.analytics-rates strong{color:var(--bs-primary)}
.insight-list { list-style:none; padding:0; display:grid; gap:.85rem; }
.report-entry { background:var(--bs-tertiary-bg); }
.check-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.55rem; max-height:260px; overflow:auto; border:1px solid var(--bs-border-color); border-radius:.75rem; padding:.75rem; background:var(--bs-body-bg); }
.check-picker-compact { max-height:190px; }
.check-picker-item { display:flex; align-items:center; gap:.65rem; padding:.6rem .7rem; border:1px solid var(--bs-border-color); border-radius:.65rem; cursor:pointer; background:var(--bs-tertiary-bg); transition:border-color .15s,background-color .15s; }
.check-picker-item:hover { border-color:var(--bs-primary); }
.check-picker-item:has(input:checked) { border-color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.09); }
.check-picker-item input { flex:0 0 auto; margin:0; }
.check-picker-item span { min-width:0; display:flex; flex-direction:column; }
.check-picker-item strong { font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.check-picker-item small { color:var(--bs-secondary-color); font-size:.72rem; }
.persian-date-field {
    position: relative;
    width: 100%;
}

.persian-date-field > .bi-calendar3 {
    position: absolute;
    z-index: 4;
    left: .55rem;
    right: auto;
    top: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border-radius: .5rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .08);
    cursor: pointer;
    pointer-events: auto;
    transition: color .15s ease, background-color .15s ease;
}

.persian-date-field > .bi-calendar3:hover {
    color: #fff;
    background: var(--bs-primary);
}

.persian-date-field > .persian-datepicker-input {
    min-height: 42px;
    padding-left: 2.8rem;
    padding-right: .85rem;
    direction: ltr;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: .035em;
    cursor: pointer;
    background-color: var(--bs-body-bg);
    background-image: none !important;
}

.persian-date-field > .persian-datepicker-input::placeholder {
    direction: rtl;
    text-align: right;
    letter-spacing: 0;
    color: var(--bs-secondary-color);
    opacity: .72;
}

.persian-date-field > .persian-datepicker-input:disabled + input,
.persian-date-field > .persian-datepicker-input:disabled {
    cursor: not-allowed;
}
.modal-dialog-scrollable > form.modal-content { max-height:calc(100vh - 3.5rem); }
.modal-dialog-scrollable > form.modal-content > .modal-body { overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.persian-date-field > .persian-datepicker-input:focus {
    border-color: rgba(var(--bs-primary-rgb), .65);
    box-shadow: 0 0 0 .22rem rgba(var(--bs-primary-rgb), .12);
}

.persian-date-field:focus-within > .bi-calendar3 {
    color: #fff;
    background: var(--bs-primary);
}

.datepicker-container {
    z-index: 1090 !important;
    direction: ltr;
}

.datepicker-plot-area {
    left: 0 !important;
    right: auto !important;
    width: 320px !important;
    min-width: 320px !important;
    padding: .8rem !important;
    overflow: hidden;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 1rem !important;
    background: var(--bs-body-bg) !important;
    box-shadow: 0 20px 55px rgba(15, 23, 42, .22) !important;
    font-family: inherit !important;
    direction: rtl;
}

.datepicker-plot-area * {
    box-sizing: border-box;
    font-family: inherit !important;
}

.datepicker-plot-area .datepicker-navigator {
    display: flex;
    align-items: center;
    gap: .25rem;
    height: auto !important;
    padding: .25rem;
    margin-bottom: .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}

.datepicker-plot-area .datepicker-navigator [class*="pwt-btn"] {
    float: none !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: .55rem !important;
    color: var(--bs-body-color) !important;
    background: transparent !important;
    transition: color .15s ease, background-color .15s ease;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-switch {
    flex: 1;
    width: auto !important;
    font-weight: 700;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-next,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
    flex: 0 0 38px;
    width: 38px !important;
    font-size: 1rem;
}

.datepicker-plot-area .datepicker-navigator [class*="pwt-btn"]:hover {
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), .11) !important;
}

.datepicker-plot-area .datepicker-day-view .month-grid-box {
    border: 0 !important;
}

.datepicker-plot-area .datepicker-day-view .month-grid-box .header {
    background: transparent !important;
}

.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell {
    height: 32px !important;
    line-height: 32px !important;
    color: var(--bs-secondary-color) !important;
    font-size: .76rem;
    font-weight: 600;
}

.datepicker-plot-area .datepicker-day-view .table-days {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 2px;
}

.datepicker-plot-area .datepicker-day-view .table-days td {
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.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 {
    height: 36px !important;
    line-height: 36px !important;
    border-radius: .6rem !important;
    color: var(--bs-body-color) !important;
    background: transparent !important;
    text-shadow: none !important;
    transition: color .15s ease, background-color .15s ease;
}

.datepicker-plot-area .datepicker-year-view .year-item,
.datepicker-plot-area .datepicker-month-view .month-item {
    margin: 2px !important;
    width: calc(33.333% - 4px) !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 {
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), .11) !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.today span {
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), .08) !important;
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.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 {
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand), var(--accent)) !important;
    box-shadow: 0 5px 12px rgba(var(--bs-primary-rgb), .2);
}

.datepicker-plot-area .datepicker-day-view .table-days td.other-month span,
.datepicker-plot-area .datepicker-day-view .table-days td span.other-month,
.datepicker-plot-area .month-item-disable,
.datepicker-plot-area .year-item-disable,
.datepicker-plot-area .datepicker-day-view .table-days td.disabled span {
    color: var(--bs-tertiary-color) !important;
    opacity: .42;
    cursor: not-allowed !important;
}

.datepicker-plot-area .toolbox {
    display: flex;
    gap: .4rem;
    height: auto !important;
    padding-top: .65rem;
    margin-top: .55rem;
    border-top: 1px solid var(--bs-border-color);
}

.datepicker-plot-area .toolbox [class*="pwt-btn"] {
    float: none !important;
    flex: 1;
    width: auto !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: .55rem !important;
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), .08) !important;
}

.datepicker-plot-area .toolbox [class*="pwt-btn"]:hover {
    color: #fff !important;
    background: var(--bs-primary) !important;
}
.workflow-stage-row { background:var(--bs-tertiary-bg); transition:opacity .15s ease,box-shadow .15s ease; }
.workflow-stage-row.is-dragging { opacity:.5; box-shadow:0 10px 24px rgba(0,0,0,.12); }
.stage-handle { display:flex; align-items:center; gap:.35rem; color:var(--bs-secondary-color); padding-bottom:.55rem; cursor:grab; user-select:none; }.stage-handle:active{cursor:grabbing}
.stage-number { display:inline-grid; place-items:center; width:1.65rem; height:1.65rem; border-radius:50%; background:var(--bs-primary); color:#fff; font-size:.75rem; }
.board-switcher { width:auto; min-width:170px; }
@media (max-width:575.98px){.datepicker-plot-area{width:min(320px,calc(100vw - 24px))!important;min-width:min(320px,calc(100vw - 24px))!important}.board-switcher{min-width:145px}}

@font-face { font-family:"Peyda"; src:url("/fonts/PeydaWeb-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Peyda"; src:url("/fonts/PeydaWeb-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Peyda"; src:url("/fonts/PeydaWeb-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Peyda"; src:url("/fonts/PeydaWeb-Black.ttf") format("truetype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"IranYekan"; src:url("/fonts/IRANYEKANREGULAR.TTF") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IranSans"; src:url("/fonts/irsans.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"NotoSans"; src:url("/fonts/NotoSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 76px;
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    --brand-soft: #eef2ff;
    --accent: #06b6d4;
    --success: #10b981;
    --sidebar-bg: #11182b;
    --sidebar-bg-hover: rgba(255, 255, 255, .08);
    --sidebar-text: #b8c1d8;
    --sidebar-text-active: #ffffff;
    --page-bg: #f5f7fb;
    --surface-border: #e8ecf3;
    --surface-shadow: 0 8px 24px rgba(30, 41, 59, .055);
    --surface-bg: #ffffff;
    --heading-color: #111827;
    --muted-color: #6b7280;
    --app-font-family: "Vazir", Tahoma, "Segoe UI", sans-serif;
}

html[data-user-font="Peyda"] { --app-font-family:"Peyda",Tahoma,"Segoe UI",sans-serif; }
html[data-user-font="IranYekan"] { --app-font-family:"IranYekan",Tahoma,"Segoe UI",sans-serif; }
html[data-user-font="IranSans"] { --app-font-family:"IranSans",Tahoma,"Segoe UI",sans-serif; }
html[data-user-font="NotoSans"] { --app-font-family:"NotoSans",Tahoma,"Segoe UI",sans-serif; }
html { font-size:var(--user-font-size,16px); }
html[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #1e1e1e;
    --bs-body-color: #d4d4d4;
    --bs-emphasis-color: #f1f1f1;
    --bs-secondary-bg: #2d2d30;
    --bs-tertiary-bg: #252526;
    --bs-border-color: #3c3c3c;
    --page-bg: #1e1e1e;
    --surface-bg: #252526;
    --surface-border: #3c3c3c;
    --surface-shadow: 0 8px 24px rgba(0,0,0,.24);
    --heading-color: #f1f1f1;
    --muted-color: #a9a9a9;
    --brand: #3794ff;
    --brand-dark: #007acc;
    --brand-soft: #2a2d2e;
    --accent: #4ec9b0;
    --sidebar-bg: #181818;
    --sidebar-bg-hover: rgba(255,255,255,.075);
    --sidebar-text: #c8c8c8;
}

.app-shell.section-bale {
    --brand: #0284c7;
    --brand-dark: #0369a1;
    --brand-soft: #e0f2fe;
    --accent: #14b8a6;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--app-font-family);
    background-color: var(--page-bg);
    margin: 0;
}

/* ---------- Auth (login) shell ---------- */
.auth-shell {
    background: linear-gradient(135deg, #3b1e8a 0%, #6d28d9 45%, #dc2626 100%);
}

.auth-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 1rem;
    padding: 2.25rem 2rem;
    box-shadow: 0 20px 50px rgba(17, 24, 39, 0.35);
}

.auth-card .auth-icon {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: .5rem;
    margin: 0 auto 1rem;
}

.auth-card .auth-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- App shell ---------- */
.app-shell {
    min-height: 100vh;
    overflow-x: hidden;
}

.app-frame {
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    background:
        radial-gradient(circle at 15% 0, rgba(79, 70, 229, .28), transparent 34%),
        linear-gradient(180deg, #11182b 0%, #151d33 100%);
    position: sticky;
    top: 0;
    align-self: flex-start;
    z-index: 1040;
    overflow: hidden;
    transition: transform .25s ease, width .25s ease, min-width .25s ease, opacity .2s ease;
}

.sidebar-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1.35rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .025);
}

.sidebar-close,
.sidebar-toggle,
.sidebar-backdrop {
    display: none;
}

.sidebar-close {
    color: #fff;
    margin-inline-start: auto;
    padding: .35rem;
}

.sidebar-brand img {
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    object-fit: cover;
}

.sidebar-nav {
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.2); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }

.sidebar-nav .nav-link,
.sidebar-footer .nav-link {
    color: var(--sidebar-text);
    padding: .65rem .9rem;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .93rem;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-nav .nav-link i,
.sidebar-footer .nav-link i {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
}

.sidebar-nav .nav-link:hover,
.sidebar-footer .nav-link:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-active);
}

.sidebar-nav .nav-link.active {
    background: linear-gradient(100deg, var(--brand), var(--accent));
    color: #fff;
    box-shadow: 0 8px 20px rgba(2, 132, 199, .18);
}

.nav-group-toggle {
    cursor: pointer;
    justify-content: flex-start;
}

.nav-group-toggle .nav-group-caret {
    margin-inline-start: auto;
    font-size: .8rem;
    width: auto;
    transition: transform .2s ease;
}

.nav-group-toggle[aria-expanded="true"] .nav-group-caret {
    transform: rotate(180deg);
}

.nav-group-items {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-inline-start: 1.15rem;
    margin-top: .2rem;
    position: relative;
}

.nav-group-items::before {
    content: "";
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    inset-inline-start: .55rem;
    width: 1px;
    background: rgba(255, 255, 255, .08);
}

.nav-sub-link {
    font-size: .87rem;
    padding: .5rem .8rem !important;
}

.sidebar-footer {
    flex: 0 0 auto;
    padding: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.main-area {
    min-width: 0;
    width: calc(100% - var(--sidebar-width));
    transition: width .25s ease;
}

.topbar {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid var(--surface-border);
    backdrop-filter: blur(14px);
    padding: 1rem 1.75rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.page-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #374151;
    font-size: .9rem;
    padding: .4rem .6rem;
    border-radius: .6rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

.user-chip:hover {
    background: #f3f4f6;
}

.user-chip i:first-child {
    font-size: 1.4rem;
    color: var(--brand);
}

.content-area {
    padding: 1.75rem;
}

.min-w-0 {
    min-width: 0;
}

.center-page {
    min-height: calc(100vh - 12rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-page > .card,
.center-page > .auth-card {
    width: 100%;
}

/* ---------- Shared components ---------- */
.card {
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    box-shadow: var(--surface-shadow);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--surface-border);
    border-radius: 1rem 1rem 0 0 !important;
    padding: 1.1rem 1.35rem;
    font-weight: 700;
    color: #111827;
}

.card-body {
    padding: 1.35rem;
}

.table thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6b7280;
    background: #f8fafc;
    border-bottom-width: 1px;
    font-weight: 600;
}

.table td, .table th {
    vertical-align: middle;
    padding: .85rem 1rem;
}

.table tbody tr {
    transition: background-color .15s ease;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--brand-soft);
}

.form-control,
.form-select {
    min-height: 42px;
    border-color: #dbe1ea;
    border-radius: .7rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 14%, transparent);
}

.btn {
    border-radius: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
}
.btn > .bi { margin: 0!important; line-height: 1; }
.validation-summary-valid,.field-validation-valid:empty { display:none!important; }
.nav-subsection-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1rem .35rem;
    color: #b8c6df;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.nav-subsection-title i {
    color: #67e8f9;
    font-size: .82rem;
}

.nav-subsection-title:not(:first-child) {
    margin-top: .3rem;
    border-top: 1px solid rgba(184, 198, 223, .14);
}

.filter-card {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--brand) 16%, white);
    background: linear-gradient(135deg, #fff 55%, var(--brand-soft));
}

.filter-card .card-body {
    position: relative;
}

.list-export-toolbar .btn {
    min-width: 2.35rem;
    background: #fff;
}
.filter-switch { min-height:42px; display:flex; align-items:center; gap:.45rem; padding:.55rem .75rem; border:1px solid #dbe1ea; border-radius:.7rem; background:#fff; }.filter-switch .form-check-input { margin:0; float:none; }

.table-responsive {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c7cbd4 transparent;
}

.table-responsive::-webkit-scrollbar {
    height: .45rem;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #c7cbd4;
    border-radius: 999px;
}

.table-responsive > .table {
    margin-bottom: 0;
}

.table .no-export,
.table td:has(.btn),
.table td:has(form) {
    white-space: nowrap;
}

.responsive-pagination {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.responsive-pagination .pagination {
    width: max-content;
    min-width: 100%;
}

.badge-permission {
    background: #eef2ff;
    color: var(--brand-dark);
    border: 1px solid #e0e7ff;
    border-radius: .5rem;
    padding: .35rem .6rem;
    font-size: .78rem;
    font-weight: 500;
}

.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-brand:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.pagination .page-link {
    color: var(--brand);
}

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

.pagination .page-item.disabled .page-link {
    color: #adb5bd;
}

.permission-group {
    border: 1px solid #eef0f4;
    border-radius: .75rem;
    padding: 1rem 1.1rem;
    margin-bottom: .85rem;
}

.permission-group .permission-group-title {
    font-weight: 700;
    color: #111827;
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.form-label {
    font-weight: 600;
    color: #374151;
    font-size: .9rem;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.empty-state i {
    font-size: 2.5rem;
    color: #c7d2fe;
    margin-bottom: .75rem;
    display: block;
}

/* ---------- Bale analytics ---------- */
.metric-card { overflow: hidden; position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30,41,59,.1); }
.metric-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, var(--brand), var(--accent)); }
.metric-card::after { content: ""; position: absolute; width: 82px; height: 82px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); opacity: .07; inset-inline-end: -26px; top: -28px; }
.metric-card .card-body > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: .8rem; background: var(--brand-soft); }
.activity-chart { height: 220px; display: flex; gap: 3px; align-items: end; border-bottom: 1px solid #e5e7eb; padding-top: 1rem; overflow-x: auto; }
.activity-column { height: 100%; flex: 1 0 12px; min-width: 12px; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 4px; }
.activity-column small { font-size: .6rem; color: #9ca3af; }
.activity-bar { width: 75%; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand), #818cf8); }
.bale-message-cell { width: 430px; max-width: 430px; }
.bale-message-preview { display: block; width: 100%; max-width: 430px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bale-post-text { white-space: pre-wrap; line-height: 2; }
.bale-comment { padding: 1rem 0; border-bottom: 1px solid #eef0f4; }
.bale-comment:last-child { border-bottom: 0; }
.bale-replied-message { padding: .65rem .8rem; border-right: 3px solid #adb5bd; border-radius: .35rem; background: #f8f9fa; color: #495057; line-height: 1.8; }
.dashboard-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem; border-radius: 1rem; color: #fff; background: linear-gradient(125deg, #312e81, #4f46e5 58%, #7c3aed); box-shadow: 0 12px 30px rgba(79,70,229,.2); }
.dashboard-hero::after { content: ""; position: absolute; width: 260px; height: 260px; inset-inline-end: -80px; top: -130px; border-radius: 50%; background: rgba(255,255,255,.09); }
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero h2 { margin: .45rem 0; font-size: clamp(1.35rem,2.5vw,2rem); font-weight: 700; }
.dashboard-hero p { margin: 0; color: rgba(255,255,255,.78); }
.dashboard-eyebrow { font-size: .78rem; letter-spacing: .04em; color: #c7d2fe; }
.dashboard-metric { overflow: hidden; position: relative; transition: transform .18s ease,box-shadow .18s ease; border: 0; }
a:hover .dashboard-metric { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(17,24,39,.1); }
.dashboard-metric::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; inset-inline-end: -35px; top: -35px; opacity: .08; background: currentColor; }
.dashboard-metric-primary { color: #4f46e5; }.dashboard-metric-success { color: #198754; }.dashboard-metric-info { color: #0891b2; }.dashboard-metric-warning { color: #d97706; }.dashboard-metric-danger { color: #dc3545; }
.dashboard-metric-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: .75rem; font-size: 1.35rem; background: currentColor; color: #fff; }
.dashboard-metric-value { margin-top: 1rem; color: #111827; font-size: 1.8rem; font-weight: 800; }
.dashboard-metric .fw-bold { color: #374151; }
.dashboard-stacked-chart { height: 260px; display: flex; align-items: end; gap: clamp(4px,1vw,12px); padding-top: 1rem; border-bottom: 1px solid #e5e7eb; }
.dashboard-stack-column { height: 100%; flex: 1; min-width: 10px; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: .4rem; }
.dashboard-stack-column small { color: #9ca3af; font-size: .65rem; }
.dashboard-stack-bars { width: 70%; min-height: 3px; display: flex; flex-direction: column; justify-content: end; overflow: hidden; border-radius: .35rem .35rem 0 0; background: #eef2ff; }
.dashboard-stack-bars span { min-height: 3px; }.dashboard-stack-bars .users,.dashboard-chart-legend .users::before { background: #4f46e5; }.dashboard-stack-bars .requests,.dashboard-chart-legend .requests::before { background: #f59e0b; }.dashboard-stack-bars .reports,.dashboard-chart-legend .reports::before { background: #10b981; }
.dashboard-chart-legend { display: flex; flex-wrap: wrap; gap: .8rem; color: #6b7280; font-size: .72rem; }
.dashboard-chart-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: .3rem; border-radius: 50%; }
.request-donut-wrap { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.request-donut { --cancelled:#9ca3af; width: 150px; height: 150px; padding: 16px; border-radius: 50%; background: conic-gradient(#f59e0b 0 var(--pending),#10b981 var(--pending) calc(var(--pending) + var(--approved)),#ef4444 calc(var(--pending) + var(--approved)) calc(var(--pending) + var(--approved) + var(--rejected)),var(--cancelled) 0); }
.request-donut > div { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #fff; }
.request-donut strong { font-size: 1.55rem; }.request-donut small { color: #6b7280; }
.request-status-list { min-width: 150px; }.request-status-list > div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .45rem; padding: .32rem 0; font-size: .82rem; }.request-status-list .dot { width: 8px; height: 8px; border-radius: 50%; }.dot.pending { background:#f59e0b }.dot.approved { background:#10b981 }.dot.rejected { background:#ef4444 }.dot.cancelled { background:#9ca3af }
.dashboard-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.dashboard-shortcuts a { display: flex; align-items: center; gap: .65rem; min-height: 64px; padding: .75rem; border: 1px solid #e5e7eb; border-radius: .7rem; color: #374151; text-decoration: none; background: #fff; transition: .15s ease; }
.dashboard-shortcuts a:hover { color: var(--brand); border-color: #c7d2fe; background: #eef2ff; transform: translateY(-2px); }.dashboard-shortcuts i { font-size: 1.2rem; color: var(--brand); }
.dashboard-setting-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: .65rem; color: var(--brand); background: #eef2ff; font-size: 1.15rem; }
.bale-insight-card { height: 100%; display: flex; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--surface-border); border-radius: 1rem; background: linear-gradient(135deg,#fff,var(--brand-soft)); box-shadow: var(--surface-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.bale-insight-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30,41,59,.1); }
.bale-insight-card > i { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: .8rem; color: #fff; background: linear-gradient(135deg,var(--brand),var(--accent)); box-shadow: 0 8px 18px color-mix(in srgb,var(--brand) 24%,transparent); font-size: 1.25rem; }.bale-insight-card strong { display:block; color:#111827; font-size:1.2rem; }.bale-insight-card span { color:#6b7280; font-size:.75rem; }
.bale-stacked-activity { height: 260px; display:flex; align-items:end; gap:clamp(3px,.8vw,9px); border-bottom:1px solid #e5e7eb; }
.bale-activity-day { flex:1; min-width:7px; height:100%; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:.4rem; }.bale-activity-day small,.bale-event-day small { color:#9ca3af; font-size:.6rem; }.bale-activity-stack { display:flex; flex-direction:column; justify-content:end; width:68%; min-height:3px; overflow:hidden; border-radius:.3rem .3rem 0 0; background:#eef2ff; }.bale-activity-stack span { min-height:2px; }.bale-activity-stack .posts,.bale-legend-dot.posts { background:#4f46e5; }.bale-activity-stack .comments,.bale-legend-dot.comments { background:#22c55e; }
.bale-legend-dot { display:inline-block; width:8px; height:8px; margin-inline-end:.3rem; border-radius:50%; }.bale-legend-dot.joins { background:#10b981; }.bale-legend-dot.leaves { background:#ef4444; }
.bale-progress-list { display:flex; flex-direction:column; gap:1rem; }.bale-progress-list .progress,.bale-rank-list .progress { height:7px; background:#eef2ff; }.bale-progress-list .progress-bar { border-radius:20px; background:linear-gradient(90deg,#4f46e5,#06b6d4); }
.bale-line-chart { height:300px; direction:ltr; }.bale-line-chart svg { width:100%; height:100%; overflow:visible; }.bale-chart-grid { stroke:#e5e7eb; stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:4 4; }.bale-member-line { fill:none; stroke:#10b981; stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }.bale-member-point { fill:#10b981; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; }.bale-chart-text { fill:#6b7280; font-size:11px; font-family:"Vazir",sans-serif; }
.bale-member-events-chart { height:260px; display:flex; align-items:end; gap:clamp(2px,.5vw,6px); border-bottom:1px solid #e5e7eb; }.bale-event-day { height:100%; flex:1; min-width:5px; display:flex; flex-direction:column; align-items:center; justify-content:end; gap:.35rem; }.event-bars { display:flex; align-items:end; justify-content:center; gap:1px; width:90%; height:calc(100% - 20px); }.event-bars span { width:45%; min-height:0; border-radius:3px 3px 0 0; }.event-bars .joins { background:#10b981; }.event-bars .leaves { background:#ef4444; }
.bale-rank-list { display:flex; flex-direction:column; gap:.9rem; }.bale-rank-list > div { display:flex; align-items:center; gap:.65rem; }.bale-rank-list .rank { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; color:#4f46e5; background:#eef2ff; font-size:.75rem; font-weight:700; }.bale-rank-list .progress-bar { background:linear-gradient(90deg,#f59e0b,#f97316); border-radius:20px; }
.bale-thread-comment { border-inline-start: 3px solid #e0e7ff; padding-inline-start: 1rem; }
.bale-media-container { margin-bottom: 1rem; max-width: 760px; }
.bale-message-media { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: .75rem; background: #111827; }
.bale-sticker-container img { display:block; width:min(180px,100%); max-height:180px; object-fit:contain; }
.bale-revision-item { padding:1rem; border:1px solid #f1e4bd; border-radius:.75rem; background:#fffbeb; }.bale-revision-item + .bale-revision-item { margin-top:.75rem; }
.bale-user-profile-header { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.bale-user-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 3px solid #eef2ff; box-shadow: 0 4px 12px rgba(17,24,39,.12); }
.bale-user-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand), #818cf8); color: #fff; font-size: 2.25rem; font-weight: 700; }
.bale-profile-details dt { color: #6b7280; font-weight: 500; }
.bale-profile-details dd { font-weight: 600; overflow-wrap: anywhere; }
.member-history-chart { width: 100%; height: 320px; overflow: hidden; direction: ltr; }
.member-history-chart svg { width: 100%; height: 100%; overflow: visible; }
.member-chart-grid { stroke: #e5e7eb; stroke-width: 1; vector-effect: non-scaling-stroke; }
.member-chart-line { fill: none; stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.member-chart-point { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.member-chart-point.growth { fill: #198754; }
.member-chart-point.loss { fill: #dc3545; }
.member-chart-point.neutral { fill: #6c757d; }
.member-chart-label { fill: #6b7280; font-family: "Vazir", Tahoma, sans-serif; font-size: 11px; }

/* ---------- Help center ---------- */
.help-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
    margin-bottom: 1rem;
    border-radius: 1.15rem;
    color: #fff;
    background: linear-gradient(125deg, #312e81, var(--brand) 55%, var(--accent));
    box-shadow: 0 16px 38px rgba(49, 46, 129, .2);
}
.help-hero::after { content:""; position:absolute; width:270px; height:270px; inset-inline-end:-80px; top:-135px; border-radius:50%; background:rgba(255,255,255,.1); }
.help-hero > * { position:relative; z-index:1; }
.help-eyebrow { display:inline-flex; align-items:center; gap:.45rem; margin-bottom:.7rem; color:rgba(255,255,255,.82); font-size:.82rem; }
.help-hero h2 { margin:0 0 .55rem; font-size:clamp(1.45rem,3vw,2rem); font-weight:900; }
.help-hero p { max-width:720px; margin:0; color:rgba(255,255,255,.82); line-height:1.9; }
.help-hero-stat { flex:0 0 auto; min-width:120px; display:flex; flex-direction:column; align-items:center; padding:1rem; border:1px solid rgba(255,255,255,.18); border-radius:1rem; background:rgba(255,255,255,.1); backdrop-filter:blur(8px); }
.help-hero-stat strong { font-size:2rem; line-height:1.2; }.help-hero-stat span{font-size:.75rem;color:rgba(255,255,255,.8)}
.help-search-wrap { position:relative; display:flex; align-items:center; gap:.6rem; padding:.65rem .75rem; margin-bottom:1.25rem; border:1px solid var(--surface-border); border-radius:.9rem; background:var(--surface-bg); box-shadow:var(--surface-shadow); }
.help-search-wrap > i { flex:0 0 auto; margin-inline-start:.35rem; color:var(--brand); font-size:1.1rem; }
.help-search-wrap .form-control { min-height:38px; padding:0; border:0; background:transparent; box-shadow:none; }
.help-layout { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:start; gap:1.25rem; }
.help-section-nav { position:sticky; top:5.7rem; display:flex; flex-direction:column; gap:.3rem; padding:.8rem; border:1px solid var(--surface-border); border-radius:1rem; background:var(--surface-bg); box-shadow:var(--surface-shadow); }
.help-section-nav > strong { padding:.35rem .55rem .65rem; color:var(--heading-color); }
.help-section-nav a { display:flex; align-items:center; gap:.55rem; padding:.6rem .65rem; border-radius:.65rem; color:var(--muted-color); font-size:.84rem; text-decoration:none; transition:background-color .15s,color .15s; }
.help-section-nav a:hover { color:var(--brand); background:var(--brand-soft); }
.help-section-nav a i { color:var(--brand); }.help-section-nav a small{margin-inline-start:auto;display:grid;place-items:center;min-width:1.5rem;height:1.5rem;border-radius:50%;background:var(--bs-tertiary-bg);font-size:.65rem}
.help-content { min-width:0; display:grid; gap:1.25rem; }
.help-section { scroll-margin-top:6rem; padding:1rem; border:1px solid var(--surface-border); border-radius:1rem; background:var(--surface-bg); box-shadow:var(--surface-shadow); }
.help-section > header { display:flex; align-items:center; gap:.8rem; padding:.25rem .25rem 1rem; }
.help-section-icon { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:.8rem; color:#fff; background:linear-gradient(135deg,var(--brand),var(--accent)); font-size:1.15rem; }
.help-section h3 { margin:0 0 .2rem; color:var(--heading-color); font-size:1.05rem; font-weight:800; }.help-section header p{margin:0;color:var(--muted-color);font-size:.78rem}
.help-section-intro { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:0 0 .8rem; }
.help-section-intro > div { display:flex; align-items:flex-start; gap:.7rem; padding:.8rem .9rem; border:1px solid var(--surface-border); border-radius:.8rem; background:var(--bs-tertiary-bg); }
.help-section-intro > div > i { flex:0 0 34px; display:grid; place-items:center; width:34px; height:34px; border-radius:.65rem; color:var(--brand); background:var(--brand-soft); }
.help-section-intro span { min-width:0; display:flex; flex-direction:column; gap:.2rem; }.help-section-intro b{color:var(--heading-color);font-size:.78rem}.help-section-intro small{color:var(--muted-color);font-size:.72rem;line-height:1.8}
.help-flow-map { display:flex; align-items:stretch; gap:.45rem; padding:.85rem; margin:0 0 1rem; overflow-x:auto; border:1px solid color-mix(in srgb,var(--brand) 20%,var(--surface-border)); border-radius:.85rem; background:color-mix(in srgb,var(--brand) 4%,var(--surface-bg)); }
.help-flow-map > div { position:relative; flex:1 0 128px; min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; padding:.65rem .45rem; border:1px solid var(--surface-border); border-radius:.75rem; background:var(--surface-bg); text-align:center; }
.help-flow-map > div > span { position:absolute; inset-block-start:.4rem; inset-inline-start:.45rem; display:grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; color:#fff; background:var(--brand); font-size:.62rem; font-weight:800; }
.help-flow-map > div > i { margin-bottom:.2rem; color:var(--brand); font-size:1.25rem; }.help-flow-map b{color:var(--heading-color);font-size:.77rem}.help-flow-map small{color:var(--muted-color);font-size:.64rem;line-height:1.5}
.help-flow-map > .help-flow-arrow { flex:0 0 auto; align-self:center; color:var(--brand); font-size:.8rem; }
.help-accordion { display:grid; gap:.6rem; }
.help-accordion .accordion-item { overflow:hidden; border:1px solid var(--surface-border); border-radius:.8rem; background:var(--surface-bg); }
.help-accordion .accordion-button { gap:.7rem; padding:.85rem 1rem; color:var(--heading-color); background:var(--surface-bg); box-shadow:none; text-align:right; }
.help-accordion .accordion-button:not(.collapsed) { color:var(--brand); background:var(--brand-soft); }
.help-accordion .accordion-button::after { margin-right:auto; margin-left:0; }
.help-accordion .accordion-button > i { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:.65rem; color:var(--brand); background:var(--brand-soft); }
.help-accordion .accordion-button > span { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.18rem; }
.help-accordion .accordion-button b { font-size:.9rem; }.help-accordion .accordion-button small{color:var(--muted-color);font-size:.72rem;font-weight:400;line-height:1.7}
.help-accordion .accordion-body { padding:1rem 1.1rem 1.1rem; border-top:1px solid var(--surface-border); }
.help-steps { list-style:none; display:grid; gap:.75rem; padding:0; margin:0 0 1rem; }
.help-steps li { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:.7rem; }
.help-steps li > span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--brand); font-size:.72rem; font-weight:800; }
.help-steps p { margin:.25rem 0 0; color:var(--bs-body-color); font-size:.84rem; line-height:1.8; }
.help-note { display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .8rem; margin-bottom:1rem; border:1px solid color-mix(in srgb,#f59e0b 32%,var(--surface-border)); border-radius:.7rem; color:var(--bs-body-color); background:color-mix(in srgb,#f59e0b 9%,var(--surface-bg)); font-size:.78rem; line-height:1.7; }
.help-note i { flex:0 0 auto; color:#d97706; font-size:1rem; }.help-direct-link{margin-inline-start:auto}
.help-empty { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:3rem; color:var(--muted-color); text-align:center; }.help-empty i{font-size:2rem;color:var(--brand)}.help-empty strong{color:var(--heading-color)}

/* ---------- Bale insights ---------- */
.insights-hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.6rem 1.8rem; border-radius:1rem; color:#fff; background:linear-gradient(120deg,#075985,#0284c7 52%,#14b8a6); box-shadow:0 14px 32px rgba(2,132,199,.2); }
.insights-hero::after { content:""; position:absolute; width:220px; height:220px; inset-inline-end:-60px; top:-100px; border-radius:50%; background:rgba(255,255,255,.1); }
.insights-hero > * { position:relative; z-index:1; }.insights-hero h2 { margin:.4rem 0; font-size:clamp(1.3rem,2.5vw,1.9rem); font-weight:800; }.insights-hero p { margin:0; color:rgba(255,255,255,.82); }.insights-hero > i { font-size:3.2rem; opacity:.9; }
.insights-section-title { display:flex; align-items:center; gap:.75rem; margin:1.5rem 0 .8rem; }.insights-section-title > i { display:grid; place-items:center; width:42px; height:42px; border-radius:.8rem; color:#fff; background:linear-gradient(135deg,var(--brand),var(--accent)); }.insights-section-title h3 { margin:0; font-size:1.05rem; font-weight:800; color:#172033; }.insights-section-title span { color:#6b7280; font-size:.75rem; }
.insights-term-cloud { display:flex; flex-wrap:wrap; gap:.55rem; }.insight-term { display:grid; grid-template-columns:auto auto; align-items:center; gap:.15rem .45rem; padding:.55rem .75rem; border:1px solid color-mix(in srgb,var(--brand) 18%,white); border-radius:.75rem; background:var(--brand-soft); color:#334155; }.insight-term small { grid-column:1/-1; color:#64748b; font-size:.62rem; }.insight-term strong { font-size:.82rem; }.insight-term b { display:grid; place-items:center; min-width:1.5rem; height:1.5rem; border-radius:999px; color:#fff; background:var(--brand); font-size:.68rem; }
.insight-rate { margin-bottom:.2rem; color:var(--brand); font-size:2rem; font-weight:800; }.insights-scroll-table { max-height:360px; overflow:auto; }

@media (min-width: 992px) {
    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        color: #374151;
        font-size: 1.55rem;
        border-radius: .55rem;
    }
    .sidebar-toggle:hover { color:var(--brand); background:var(--brand-soft); }
    .sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed-width);
        min-width: var(--sidebar-collapsed-width);
        transform: none;
        opacity: 1;
        overflow-x: hidden;
        pointer-events: auto;
    }
    .sidebar-collapsed .main-area { width:calc(100% - var(--sidebar-collapsed-width)); }
    .sidebar-collapsed .sidebar-brand { justify-content:center; gap:0; padding-inline:.75rem; }
    .sidebar-collapsed .sidebar-brand > span,
    .sidebar-collapsed .sidebar-close,
    .sidebar-collapsed .sidebar-nav .nav-link > span,
    .sidebar-collapsed .sidebar-footer .nav-link > span,
    .sidebar-collapsed .nav-group-caret,
    .sidebar-collapsed .nav-group > .collapse,
    .sidebar-collapsed .nav-subsection-title { display:none !important; }
    .sidebar-collapsed .sidebar-nav { padding-inline:.55rem; }
    .sidebar-collapsed .sidebar-footer { padding-inline:.55rem; }
    .sidebar-collapsed .sidebar-nav .nav-link,
    .sidebar-collapsed .sidebar-footer .nav-link {
        width:100%;
        min-height:44px;
        justify-content:center;
        gap:0;
        padding:.65rem !important;
    }
    .sidebar-collapsed .sidebar-nav .nav-link i,
    .sidebar-collapsed .sidebar-footer .nav-link i { width:1.35rem; margin:0 !important; font-size:1.15rem; }
}

@media (max-width: 991.98px) {
    .app-frame {
        display: block !important;
    }

    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        height: 100dvh;
        transform: translateX(110%);
        box-shadow: -12px 0 35px rgba(17, 24, 39, .28);
    }

    .sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-close,
    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-toggle {
        color: #374151;
        font-size: 1.55rem;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border-radius: .55rem;
    }

    .sidebar-toggle:hover {
        background: #f3f4f6;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: rgba(17, 24, 39, .48);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .sidebar-open .sidebar-backdrop {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .sidebar-open {
        overflow: hidden;
    }

    .main-area {
        width: 100%;
    }

    .topbar {
        padding: .75rem 1rem;
    }

    .page-title {
        font-size: 1rem;
    }

    .content-area {
        padding: 1rem;
    }

    .user-chip span,
    .user-chip .bi-chevron-down {
        display: none;
    }

    .center-page {
        min-height: calc(100dvh - 8rem);
    }

    .help-layout { grid-template-columns:1fr; }
    .help-section-nav { position:static; flex-direction:row; overflow-x:auto; }
    .help-section-nav > strong { display:none; }
    .help-section-nav a { flex:0 0 auto; white-space:nowrap; }
}

@media (max-width: 575.98px) {
    :root {
        --sidebar-width: min(86vw, 290px);
    }

    .content-area {
        padding: .75rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header.d-flex {
        flex-wrap: wrap;
        gap: .65rem;
    }

    .card-header.d-flex > .d-flex {
        max-width: 100%;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .list-export-toolbar {
        margin-inline-start: 0 !important;
    }

    .table td,
    .table th {
        padding: .7rem .75rem;
    }

    .table-responsive > .table:has(thead th:nth-child(4)) {
        min-width: 34rem;
    }

    .table-responsive > .table:has(thead th:nth-child(5)) {
        min-width: 43rem;
    }

    .table-responsive > .table:has(thead th:nth-child(6)) {
        min-width: 50rem;
    }

    .table-responsive > .table:has(thead th:nth-child(7)) {
        min-width: 60rem;
    }

    .table-responsive > .table th,
    .table-responsive > .table td:not(.bale-message-cell) {
        white-space: nowrap;
    }

    .table-responsive > .table td.bale-message-cell {
        min-width: 14rem;
    }

    .bale-message-cell .bale-message-preview {
        max-width: 230px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .list-group-item-action .d-flex.justify-content-between,
    .bale-comment .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .list-group-item-action .bale-message-preview {
        flex: 1 1 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .responsive-pagination {
        padding-bottom: .35rem;
    }

    .responsive-pagination .page-link {
        min-width: 2.35rem;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-backdrop {
        transition: none;
    }
}

/* ---------- Per-user appearance ---------- */
.user-menu-toggle { display:grid; place-items:center; width:30px; height:30px; border-radius:.5rem; color:var(--muted-color); }
.user-menu-toggle:hover { color:var(--brand); background:color-mix(in srgb,var(--brand) 9%,transparent); }
.appearance-modal { overflow:hidden; border:1px solid var(--surface-border); border-radius:1.1rem; }
.appearance-setting-group { margin-bottom:1.35rem; }
.appearance-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.appearance-choice { position:relative; cursor:pointer; }
.appearance-choice input { position:absolute; opacity:0; pointer-events:none; }
.appearance-choice > span { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:108px; padding:.85rem; border:1px solid var(--surface-border); border-radius:.85rem; background:var(--surface-bg); transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.appearance-choice > span > i { margin-bottom:.4rem; color:var(--brand); font-size:1.45rem; }
.appearance-choice > span > b { font-size:.95rem; }
.appearance-choice > span > small { margin-top:.2rem; color:var(--muted-color); font-size:.7rem; }
.appearance-choice:hover > span { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 45%,var(--surface-border)); }
.appearance-choice input:checked + span { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,var(--surface-bg)); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent); }
.appearance-choice input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--brand) 35%,transparent); outline-offset:2px; }
.font-vazir > span { font-family:"Vazir",sans-serif; }
.font-peyda > span { font-family:"Peyda",sans-serif; }
.font-iranyekan > span { font-family:"IranYekan",sans-serif; }
.font-iransans > span { font-family:"IranSans",sans-serif; }
.font-notosans > span { font-family:"NotoSans",sans-serif; }
#appearanceFontSizeValue { color:var(--brand); font-weight:700; font-size:.82rem; }

html[data-bs-theme="dark"] .sidebar {
    background:
        radial-gradient(circle at 15% 0, rgba(55,148,255,.11), transparent 32%),
        linear-gradient(180deg,#181818 0%,#202020 100%);
}
html[data-bs-theme="dark"] .topbar { background:rgba(37,37,38,.96); }
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu { background-color:var(--surface-bg); }
html[data-bs-theme="dark"] .page-title,
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .permission-group .permission-group-title,
html[data-bs-theme="dark"] .dashboard-metric-value,
html[data-bs-theme="dark"] .bale-insight-card strong,
html[data-bs-theme="dark"] .insights-section-title h3 { color:var(--heading-color); }
html[data-bs-theme="dark"] .user-chip,
html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] .dashboard-metric .fw-bold { color:#d4d4d4; }
html[data-bs-theme="dark"] .user-chip:hover { background:#333333; }
html[data-bs-theme="dark"] .sidebar-toggle { color:#cccccc; }
html[data-bs-theme="dark"] .sidebar-toggle:hover { color:#fff; background:#333333; }
html[data-bs-theme="dark"] .sidebar-nav .nav-link.active {
    border-inline-start:3px solid var(--brand);
    background:#37373d;
    box-shadow:none;
}

/* ---------- Bale growth command center ---------- */
.growth-command-center { border:1px solid color-mix(in srgb,var(--brand) 22%,var(--surface-border)); border-radius:1.1rem; padding:1rem; background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 8%,var(--surface-bg)),var(--surface-bg)); }
.growth-summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.35rem .35rem .2rem; }
.growth-summary p { color:var(--heading-color); line-height:1.9; }
.growth-summary > i { flex:0 0 auto; display:grid; place-items:center; width:54px; height:54px; border-radius:1rem; color:#fff; font-size:1.45rem; background:linear-gradient(135deg,var(--brand),var(--accent)); box-shadow:0 10px 22px color-mix(in srgb,var(--brand) 24%,transparent); }
.growth-recommendation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.growth-recommendation { display:flex; gap:.75rem; padding:.9rem; border:1px solid var(--surface-border); border-radius:.85rem; background:var(--surface-bg); }
.growth-recommendation > i { flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; border-radius:.7rem; color:var(--brand); background:var(--brand-soft); font-size:1.05rem; }
.growth-recommendation strong { color:var(--heading-color); }
.growth-recommendation p { margin:.35rem 0 0; color:var(--muted-color); font-size:.8rem; line-height:1.8; }
.growth-recommendation-danger { border-color:color-mix(in srgb,#dc3545 35%,var(--surface-border)); }
.growth-recommendation-danger > i { color:#dc3545; background:color-mix(in srgb,#dc3545 12%,transparent); }
.growth-recommendation-warning > i { color:#d97706; background:color-mix(in srgb,#f59e0b 14%,transparent); }
.growth-recommendation-success > i { color:#059669; background:color-mix(in srgb,#10b981 14%,transparent); }
.growth-score { display:inline-grid; place-items:center; min-width:42px; height:32px; padding:0 .45rem; border-radius:.7rem; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--brand),var(--accent)); }
.conversation-intent { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:118px; padding:.8rem; text-align:center; border:1px solid var(--surface-border); border-radius:.85rem; background:color-mix(in srgb,var(--brand) 4%,var(--surface-bg)); }
.conversation-intent strong { color:var(--brand); font-size:1.45rem; }
.conversation-intent span { margin-top:.2rem; color:var(--heading-color); font-weight:700; }
.conversation-intent small { margin-top:.25rem; color:var(--muted-color); }
.conversation-intent-button { appearance:none; color:inherit; font:inherit; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.conversation-intent-button:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 55%,var(--surface-border)); box-shadow:0 .5rem 1.25rem color-mix(in srgb,var(--brand) 12%,transparent); }
.conversation-intent-button:focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 35%,transparent); outline-offset:2px; }
.conversation-intent-button em { margin-top:.55rem; color:var(--brand); font-size:.78rem; font-style:normal; font-weight:700; }
.intent-message-list .list-group-item { background:transparent; }
.intent-message-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; }
@media (max-width:767.98px) { .growth-recommendation-grid { grid-template-columns:1fr; } .growth-summary > i { display:none; } }
@media (max-width:767.98px) { .help-section-intro { grid-template-columns:1fr; } }
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .list-export-toolbar .btn,
html[data-bs-theme="dark"] .filter-switch { background:var(--surface-bg); }
html[data-bs-theme="dark"] .filter-card,
html[data-bs-theme="dark"] .bale-insight-card { background:linear-gradient(135deg,var(--surface-bg) 55%,#2d2d30); }
html[data-bs-theme="dark"] .table thead th { color:#b7b7b7; background:#2d2d30; }
html[data-bs-theme="dark"] .dashboard-shortcuts a { color:#d4d4d4; border-color:var(--surface-border); background:var(--surface-bg); }
html[data-bs-theme="dark"] .dashboard-shortcuts a:hover { color:#fff; background:#333333; }
html[data-bs-theme="dark"] .request-donut > div { background:var(--surface-bg); }
html[data-bs-theme="dark"] .bale-replied-message { color:#d4d4d4; background:#2d2d30; }
html[data-bs-theme="dark"] .bale-revision-item { border-color:#5b5135; background:#302d24; }
html[data-bs-theme="dark"] .insight-term { color:#d4d4d4; border-color:#454545; }
html[data-bs-theme="dark"] .text-muted { color:var(--muted-color) !important; }
html[data-bs-theme="dark"] .app-shell.section-bale {
    --brand:#0284c7;
    --brand-dark:#0369a1;
    --brand-soft:#2b3032;
    --accent:#14b8a6;
}
html[data-bs-theme="dark"] .app-shell.section-bale .sidebar {
    background:
        radial-gradient(circle at 15% 0,rgba(2,132,199,.14),transparent 32%),
        linear-gradient(180deg,#181818 0%,#202020 100%);
}
html[data-bs-theme="dark"] .app-shell.section-bale .sidebar-nav .nav-link.active {
    color:#fff;
    border-inline-start:0;
    background:linear-gradient(100deg,#0284c7,#14b8a6);
    box-shadow:0 8px 20px rgba(2,132,199,.18);
}

@media (max-width:575.98px) {
    .appearance-choice-grid { grid-template-columns:1fr; }
    .appearance-choice > span { min-height:88px; }
    .topbar-user-actions .user-chip span { display:none; }
}
.external-column-chart { height:260px; display:flex; align-items:flex-end; gap:clamp(4px,1vw,14px); overflow-x:auto; padding:1rem .25rem 0; border-bottom:1px solid var(--bs-border-color); }
.external-column { height:100%; min-width:34px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:.45rem; }
.external-column > span { width:min(30px,75%); min-height:3px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--brand),#16a085); transition:height .2s ease; }
.external-column small { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bs-secondary-color); font-size:.68rem; }
.external-horizontal-chart { display:flex; flex-direction:column; gap:.85rem; }
.external-horizontal-chart > div label { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.3rem; font-size:.78rem; }
.external-horizontal-chart > div label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.external-horizontal-chart > div i { display:block; height:9px; background:var(--bs-tertiary-bg); border-radius:999px; overflow:hidden; }
.external-horizontal-chart > div i span { display:block; height:100%; min-width:2px; border-radius:inherit; background:linear-gradient(90deg,var(--brand),#20c997); }
.analytics-question { border:1px solid var(--bs-border-color); border-radius:14px; padding:1rem; height:100%; background:var(--bs-body-bg); }
.analytics-question header { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.analytics-question header span,.analytics-root span { color:var(--bs-secondary-color); font-size:.78rem; }
.analytics-root { border:1px solid var(--bs-border-color); border-radius:12px; padding:.75rem; display:flex; flex-direction:column; gap:.25rem; height:100%; }
.referral-network-graph { height:min(68vh,680px); min-height:480px; direction:ltr; overflow:hidden; border:1px solid var(--bs-border-color); border-radius:14px; background:var(--bs-tertiary-bg); }
.referral-network-graph canvas { outline:none; }
.referral-network-graph.is-animating { cursor:progress; }
.referral-network-graph.is-animating canvas { pointer-events:none; }
.external-analytics-loading { height:100%; display:flex; align-items:center; justify-content:center; gap:.55rem; color:var(--bs-secondary-color); font-size:.82rem; }
.referral-timeline-details summary { cursor:pointer; color:var(--brand); font-size:.82rem; font-weight:600; }
.referral-timeline { position:relative; display:flex; flex-direction:column; gap:1rem; }
.referral-timeline::before { content:""; position:absolute; inset-block:1.5rem; inset-inline-start:1.25rem; width:2px; background:color-mix(in srgb,var(--brand) 30%,var(--bs-border-color)); }
.referral-timeline-step { position:relative; display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.85rem; }
.referral-timeline-marker { z-index:1; display:flex; align-items:flex-start; justify-content:center; padding-top:.65rem; }
.referral-timeline-marker span { display:grid; place-items:center; width:2.15rem; height:2.15rem; border-radius:50%; color:#fff; background:var(--brand); border:3px solid var(--bs-body-bg); box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 30%,var(--bs-border-color)); font-size:.78rem; font-weight:700; }
.referral-timeline-content { min-width:0; padding:.85rem; border:1px solid var(--bs-border-color); border-radius:12px; background:var(--bs-tertiary-bg); }
.referral-timeline-content header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.referral-timeline-content header small { color:var(--bs-secondary-color); }
.referral-timeline-users { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem; }
.referral-timeline-users article { min-width:0; padding:.55rem .65rem; border-radius:9px; background:var(--bs-body-bg); }
.referral-timeline-users article span,.referral-timeline-users article small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.referral-timeline-users article span { font-size:.82rem; font-weight:600; }
.referral-timeline-users article small { margin-top:.2rem; color:var(--bs-secondary-color); font-size:.7rem; }
.activity-heatmap-scroll { width:100%; overflow-x:auto; padding-bottom:.35rem; }
.activity-heatmap { direction:ltr; width:100%; min-width:760px; }
.heatmap-hours,.heatmap-row { display:grid; grid-template-columns:88px minmax(624px,1fr); gap:.65rem; align-items:center; }
.heatmap-hours { margin-bottom:.35rem; color:var(--bs-secondary-color); font-size:.62rem; text-align:center; }
.heatmap-hours > div { display:grid; grid-template-columns:repeat(24,minmax(24px,1fr)); gap:3px; }
.heatmap-row { margin-bottom:5px; }
.heatmap-row label { direction:rtl; margin:0; padding-inline-end:.25rem; color:var(--bs-secondary-color); font-size:.72rem; text-align:right; white-space:nowrap; }
.heatmap-row > div { display:grid; grid-template-columns:repeat(24,minmax(24px,1fr)); gap:3px; }
.heatmap-row span,.heatmap-legend i { display:grid; place-items:center; min-height:28px; border:1px solid color-mix(in srgb,var(--bs-border-color) 70%,transparent); border-radius:4px; background:color-mix(in srgb,var(--brand) calc(var(--heat) * 88%),var(--bs-tertiary-bg)); }
.heatmap-row span small { color:color-mix(in srgb,var(--bs-body-color) calc((1 - var(--heat)) * 100%),#fff); font-size:.6rem; font-weight:600; }
.heatmap-legend { display:flex; justify-content:flex-end; align-items:center; gap:.3rem; color:var(--bs-secondary-color); font-size:.7rem; }
.heatmap-legend i { width:18px; min-height:18px; }
.analytics-user-tabs { gap:.4rem; overflow-x:auto; flex-wrap:nowrap; }
.analytics-user-tabs .nav-link { white-space:nowrap; border:1px solid var(--bs-border-color); color:var(--bs-body-color); }
.analytics-user-tabs .nav-link.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.analytics-profile-metric { height:100%; padding:.75rem; border:1px solid var(--bs-border-color); border-radius:10px; background:var(--bs-tertiary-bg); }
.analytics-profile-metric span,.analytics-profile-metric strong { display:block; }
.analytics-profile-metric span { color:var(--bs-secondary-color); font-size:.75rem; }
.analytics-profile-metric strong { margin-top:.25rem; font-size:1.15rem; }
.analytics-profile-competition { height:100%; padding:.9rem; border:1px solid var(--bs-border-color); border-radius:12px; }
.analytics-profile-competition header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.75rem; }
.analytics-profile-competition header small,.analytics-profile-competition footer { color:var(--bs-secondary-color); font-size:.72rem; }
.analytics-profile-actions { display:flex; flex-wrap:wrap; gap:.45rem; }
.analytics-profile-actions span,.analytics-profile-actions button { padding:.3rem .55rem; border:1px solid transparent; border-radius:999px; color:var(--bs-body-color); background:var(--bs-tertiary-bg); font:inherit; font-size:.75rem; }
.analytics-profile-actions button { cursor:pointer; }
.analytics-profile-actions button:hover,.analytics-profile-actions button:focus-visible { border-color:var(--brand); color:var(--brand); }
.analytics-profile-competition footer { margin-top:.7rem; }
.external-activity-items { display:grid; gap:.75rem; }
.external-activity-items article { display:grid; gap:.55rem; padding:.85rem; border:1px solid var(--bs-border-color); border-radius:10px; background:var(--bs-tertiary-bg); }
.external-activity-comment { padding:.65rem; border-right:3px solid var(--brand); background:var(--bs-body-bg); white-space:pre-wrap; }
.external-activity-modal-dialog { width:96vw; max-width:1600px; height:calc(100vh - 2rem); margin:1rem auto; }
.external-activity-modal-dialog .modal-content { height:100%; }
.modal-header .btn-close.external-activity-modal-close { margin:0 !important; margin-inline-start:auto !important; flex:0 0 auto; }
.external-activity-answer-table td { min-width:110px; }
.external-activity-answer-table td:first-child { min-width:220px; white-space:normal; }
.external-activity-media-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
.external-activity-media-card { overflow:hidden; border:1px solid var(--bs-border-color); border-radius:11px; background:var(--bs-tertiary-bg); }
.external-activity-media-card img { display:block; width:100%; height:auto; max-height:calc(100vh - 180px); object-fit:contain; background:#0f172a; }
.external-activity-media-card video { display:block; width:100%; min-height:min(56vw,360px); max-height:calc(100vh - 180px); background:#000; }
.external-activity-media-card audio { display:block; width:100%; min-height:54px; }
.external-activity-audio-card { padding:1.25rem; }
.external-activity-media-unavailable { display:grid; place-items:center; min-height:150px; padding:1rem; color:var(--bs-secondary-color); background:var(--bs-body-bg); text-align:center; }
.external-activity-media-unavailable i { display:block; margin-bottom:.35rem; font-size:1.5rem; }
.external-activity-media-meta { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.55rem .7rem; }
@media (max-width:767.98px) {
    .external-activity-modal-dialog { width:auto; height:calc(100vh - 1rem); margin:.5rem; }
    .external-activity-media-card img,.external-activity-media-card video { max-height:calc(100vh - 150px); }
}