/* Alerts Center — local-scoped styles, uses project theme variables */
                    .ac-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 30px; }
                    .ac-page-header { padding: 0 20px; }
                    .ac-page-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
                    .ac-page-header-left .bc-page-title {
                        margin: 0; min-width: 0;
                        overflow: hidden; text-overflow: ellipsis;
                    }
                    .ac-page-header-actions { display: flex; gap: 8px; }

                    .ac-hero {
                        background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(249,115,22,.06));
                        border: 1px solid var(--border);
                        border-radius: 14px;
                        padding: 18px 22px;
                        margin-bottom: 18px;
                        display: flex; align-items: center; gap: 18px;
                    }
                    .ac-hero-icon {
                        flex-shrink: 0;
                        width: 56px; height: 56px; border-radius: 14px;
                        background: linear-gradient(135deg, #ef4444, #f97316);
                        color: #fff; display: flex; align-items: center; justify-content: center;
                        font-size: 24px; box-shadow: 0 8px 24px rgba(239,68,68,.25);
                    }
                    .ac-hero-text { flex: 1; min-width: 0; }
                    .ac-hero h2 { margin: 0 0 4px; font-size: 18px; color: var(--text); }
                    .ac-hero p  { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }

                    .ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 10px; margin-bottom: 18px; }
                    .ac-stat {
                        background: var(--surface); border: 1px solid var(--border);
                        border-radius: 12px; padding: 12px 14px;
                    }
                    .ac-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
                    .ac-stat-value { font-size: 22px; font-weight: 600; margin-top: 2px; color: var(--text); }
                    .ac-stat-value.warn { color: var(--accent-red); }
                    .ac-stat-value.ok   { color: var(--accent-green); }
                    .ac-stat-value small { font-size: 12px; color: var(--text-muted); font-weight: 400; }

                    /* Rule card */
                    .ac-rule-card {
                        background: var(--surface);
                        border: 1px solid var(--border);
                        border-left: 4px solid var(--accent-blue);
                        border-radius: 12px;
                        padding: 14px 18px;
                        margin-bottom: 12px;
                        transition: box-shadow .15s, transform .15s;
                    }
                    .ac-rule-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.05); }
                    .ac-rule-card.disabled { border-left-color: var(--text-muted); opacity: .7; }
                    .ac-rule-card.type-project_underlogged          { border-left-color: #ef4444; }
                    .ac-rule-card.type-user_project_underlogged     { border-left-color: #f97316; }
                    .ac-rule-card.type-user_disproportionate_share  { border-left-color: #8b5cf6; }
                    /* Multi-type rule gets gradient stripe */
                    .ac-rule-card.types-multi {
                        border-left-color: transparent;
                        box-shadow: inset 4px 0 0 0 transparent;
                        background-image: linear-gradient(180deg, #ef4444 0%, #f97316 50%, #8b5cf6 100%);
                        background-repeat: no-repeat;
                        background-size: 4px 100%;
                        background-position: -4px 0;
                        border-left-width: 4px; border-left-style: solid;
                    }

                    /* Wrapper holds chip-input + dropdown together (click-outside boundary) */
                    .ac-picker-wrap { position: relative; }

                    /* Preview block — laid out in clean stacked rows */
                    .ac-preview-bar {
                        display: grid;
                        grid-template-columns: 1fr auto;
                        align-items: end;
                        gap: 12px;
                        padding: 14px 16px;
                        background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(139,92,246,.04));
                        border: 1px solid var(--border);
                        border-radius: 12px;
                    }
                    .ac-preview-asof { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
                    .ac-preview-asof-label {
                        font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                        color: var(--text-muted); font-weight: 600;
                        display: flex; align-items: center; gap: 6px;
                    }
                    .ac-preview-asof-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
                    .ac-preview-asof input[type="date"] {
                        border: 1px solid var(--border);
                        background: var(--surface); color: var(--text);
                        font-size: 13px; padding: 7px 10px; border-radius: 6px;
                        color-scheme: light dark;
                        min-width: 140px;
                    }
                    .ac-preview-presets { display: flex; gap: 4px; flex-wrap: wrap; }
                    .ac-preview-presets .btn { padding: 4px 10px; font-size: 11px; min-height: 0; }
                    .ac-preview-bar > .btn { align-self: stretch; min-width: 140px; }

                    .ac-preview-result {
                        margin-top: 14px;
                        padding: 14px 16px;
                        background: var(--surface);
                        border: 1px solid var(--border);
                        border-radius: 12px;
                    }
                    .ac-preview-badge {
                        margin-bottom: 10px; padding: 8px 12px; font-size: 12px;
                        background: rgba(139,92,246,.12); color: #6d28d9;
                        border-radius: 8px;
                        display: flex; align-items: center; gap: 8px;
                    }
                    [data-theme="dark"] .ac-preview-badge, .dark .ac-preview-badge {
                        background: rgba(139,92,246,.2); color: #c4b5fd;
                    }
                    .ac-preview-result .ac-result-head {
                        display: flex; flex-wrap: wrap; gap: 16px;
                        padding: 12px 14px;
                        background: var(--bg);
                        border-radius: 8px;
                        font-size: 12px;
                        color: var(--text-secondary);
                    }
                    .ac-preview-result .ac-result-head > span {
                        display: inline-flex; align-items: baseline; gap: 6px;
                    }
                    .ac-preview-result .ac-result-num {
                        font-size: 18px; font-weight: 700; color: var(--text);
                    }
                    .ac-preview-empty {
                        display: flex; flex-direction: column; align-items: center;
                        padding: 28px 16px; text-align: center;
                        color: var(--accent-green);
                    }
                    .ac-preview-empty i { font-size: 32px; margin-bottom: 10px; opacity: .8; }
                    .ac-preview-empty-text { font-size: 14px; font-weight: 500; }
                    .ac-preview-table-wrap {
                        margin-top: 12px;
                        border: 1px solid var(--border);
                        border-radius: 8px;
                        overflow-x: auto;
                    }
                    .ac-preview-table {
                        width: 100%; border-collapse: collapse; font-size: 13px;
                        background: var(--surface);
                    }
                    .ac-preview-table th, .ac-preview-table td { padding: 10px 12px; vertical-align: middle; }
                    .ac-preview-table thead th {
                        background: var(--bg);
                        position: sticky; top: 0;
                        font-size: 10px; font-weight: 600;
                        text-transform: uppercase; letter-spacing: .04em;
                        color: var(--text-muted);
                        text-align: left;
                        border-bottom: 1px solid var(--border);
                    }
                    .ac-preview-table th.sortable { cursor: pointer; user-select: none; }
                    .ac-preview-table th.sortable:hover { color: var(--text); background: var(--border-light); }
                    .ac-preview-table tbody tr { border-top: 1px solid var(--border-light); transition: background .12s; }
                    .ac-preview-table tbody tr:hover { background: var(--bg); }
                    .ac-preview-table td { color: var(--text); }
                    .ac-preview-table td.def { color: var(--accent-red); font-weight: 600; }

                    /* Mail preview block — prominent so the user actually notices it.
                       Body of the iframe is intentionally white (it's an email preview), the
                       chrome around it respects the project theme. */
                    .ac-mailpreview {
                        margin-top: 18px;
                        border: 1px solid var(--border);
                        border-radius: 12px;
                        background: var(--surface);
                        overflow: hidden;
                    }
                    .ac-mailpreview-head {
                        display: flex; align-items: center; gap: 8px;
                        padding: 10px 14px;
                        background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(168,85,247,.08));
                        border-bottom: 1px solid var(--border);
                        font-size: 13px; color: var(--text);
                    }
                    .ac-mailpreview-head i { color: #6366f1; }
                    .ac-mailpreview-hint { color: var(--text-muted); font-weight: 400; font-size: 12px; }
                    .ac-mailpreview-tabs {
                        display: flex; gap: 0;
                        padding: 8px 8px 0;
                        background: var(--bg);
                        border-bottom: 1px solid var(--border);
                    }
                    .ac-mailpreview-tab {
                        flex: 1;
                        padding: 10px 12px;
                        background: transparent;
                        border: 0; border-bottom: 2px solid transparent;
                        cursor: pointer;
                        font-size: 13px; color: var(--text-secondary);
                        font-weight: 500;
                    }
                    .ac-mailpreview-tab:hover { color: var(--text); }
                    .ac-mailpreview-tab.active {
                        color: var(--accent-blue);
                        border-bottom-color: var(--accent-blue);
                        background: var(--surface);
                    }
                    /* The iframe holding the rendered email — sits on a tinted "page" with
                       a thin shadow so it reads as an email card on dark themes too. */
                    .ac-mailpreview-pane {
                        background: var(--bg);
                        padding: 12px;
                    }
                    .ac-mailpreview-page {
                        background: #fff;
                        border-radius: 6px;
                        box-shadow: 0 4px 12px rgba(0,0,0,.18);
                        overflow: hidden;
                    }
                    .ac-mailpreview-headers {
                        padding: 10px 14px;
                        background: #f8fafc;
                        border-bottom: 1px solid #e5e7eb;
                        font-size: 12px;
                        color: #1f2937;
                    }
                    .ac-mailpreview-frame { width: 100%; border: 0; background: #fff; display: block; }
                    .ac-mailpreview-missing {
                        display: flex; gap: 12px; align-items: flex-start;
                        padding: 18px;
                        color: var(--text-secondary);
                        font-size: 13px;
                        background: var(--bg);
                        border-radius: 6px;
                    }
                    .ac-mailpreview-missing > i { color: var(--accent-yellow); font-size: 20px; margin-top: 2px; }
                    .ac-mailpreview-missing code {
                        background: var(--border-light); padding: 1px 6px; border-radius: 4px;
                        font-size: 12px; color: var(--text);
                    }

                    /* Clickable project name → opens billing settings in new tab */
                    .ac-project-link {
                        color: var(--accent-blue); text-decoration: none;
                        display: inline-flex; align-items: center; gap: 4px;
                    }
                    .ac-project-link:hover { text-decoration: underline; }
                    .ac-project-link i { font-size: 9px; opacity: .55; }

                    /* Severity bar — visual "how big a problem" indicator */
                    .ac-severity-col { width: 160px; }
                    .ac-severity-bar {
                        height: 8px; border-radius: 4px;
                        background: var(--border-light); border: 1px solid var(--border);
                        overflow: hidden;
                        min-width: 80px;
                    }
                    .ac-severity-fill {
                        height: 100%;
                        transition: width .2s ease, background-color .2s ease;
                    }
                    .ac-severity-label {
                        font-size: 10px; font-weight: 600;
                        margin-top: 4px;
                        text-transform: uppercase; letter-spacing: .03em;
                    }

                    /* Mobile cards (hidden on desktop) */
                    .ac-preview-cards { display: none; }
                    .ac-preview-card {
                        background: var(--surface);
                        border: 1px solid var(--border);
                        border-radius: 10px;
                        padding: 14px;
                        margin-top: 12px;
                    }
                    .ac-preview-card-head { margin-bottom: 10px; }
                    .ac-preview-card-title {
                        display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                        margin-bottom: 4px;
                    }
                    .ac-preview-card-title strong { word-break: break-word; }
                    .ac-preview-card-user { font-size: 12px; color: var(--text-secondary); }
                    .ac-preview-card-stats {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 8px 14px;
                        margin-top: 10px;
                    }
                    .ac-preview-card-stats > div { display: flex; flex-direction: column; }
                    .ac-preview-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
                    .ac-preview-stat-value { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; }

                    @media (max-width: 720px) {
                        .ac-preview-bar { grid-template-columns: 1fr; }
                        .ac-preview-bar > .btn { width: 100%; }

                        /* Swap table for cards on phones */
                        .ac-preview-table-wrap { display: none; }
                        .ac-preview-cards { display: block; }
                    }

                    /* User picker dropdown — matches project's bc-user-dropdown-menu pattern */
                    .ac-picker {
                        margin-top: 4px;
                        background: var(--surface);
                        border: 1px solid var(--border);
                        border-radius: var(--radius);
                        box-shadow: var(--shadow-md);
                        max-height: 280px;
                        overflow: auto;
                    }
                    .ac-picker-row {
                        display: flex; align-items: center; gap: 10px;
                        padding: 10px 12px;
                        cursor: pointer;
                        font-size: 13px;
                        color: var(--text);
                        border-bottom: 1px solid var(--border-light);
                        transition: background .12s;
                    }
                    .ac-picker-row:last-child { border-bottom: 0; }
                    .ac-picker-row:hover { background: var(--bg); }
                    .ac-picker-row.selected { background: rgba(59,130,246,.08); }
                    .ac-picker-owner .ac-picker-row.selected { background: rgba(139,92,246,.08); }
                    .ac-picker-check { font-size: 14px; color: var(--accent-blue); flex-shrink: 0; }
                    .ac-picker-check-purple { color: #8b5cf6; }
                    .ac-picker-main { flex: 1; min-width: 0; }
                    .ac-picker-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
                    .ac-picker-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
                    .ac-picker-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 12px; }

                    /* Badges (role / activity hints in the picker) */
                    .ac-badge {
                        flex-shrink: 0;
                        font-size: 10px; font-weight: 600;
                        padding: 2px 7px; border-radius: 999px;
                        background: var(--bg); color: var(--text-secondary);
                        border: 1px solid var(--border);
                        text-transform: uppercase; letter-spacing: .04em;
                    }
                    .ac-badge-admin {
                        background: rgba(220,38,38,.12); color: var(--accent-red);
                        border-color: rgba(220,38,38,.3);
                    }

                    /* Multi-select type-card checkbox indicator */
                    .ac-type-card { position: relative; }
                    .ac-type-check {
                        position: absolute; top: 8px; right: 10px;
                        color: var(--accent-blue); font-size: 16px; opacity: .35;
                    }
                    .ac-type-card.sel .ac-type-check { opacity: 1; }

                    .ac-rule-head {
                        display: flex; align-items: flex-start; justify-content: space-between;
                        gap: 14px;
                    }
                    .ac-rule-title { flex: 1; min-width: 0; }
                    .ac-rule-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
                    .ac-rule-name {
                        margin: 0; font-size: 15px; color: var(--text);
                        overflow-wrap: anywhere; word-break: break-word;
                    }
                    .ac-rule-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
                    .ac-rule-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
                    .ac-rule-btns { display: flex; gap: 6px; flex-wrap: wrap; }

                    /* Date as-of picker pill */
                    .ac-asof {
                        display: inline-flex; gap: 4px; align-items: center;
                        background: var(--bg); padding: 3px 8px; border-radius: 8px;
                        border: 1px solid var(--border); color: var(--text-muted);
                        font-size: 12px;
                    }
                    .ac-asof > i { font-size: 11px; color: var(--text-muted); }
                    .ac-asof input[type="date"] {
                        border: 0; background: transparent; font-size: 12px; padding: 2px;
                        min-width: 110px; color: var(--text); color-scheme: light dark;
                    }
                    .ac-asof-back {
                        background: none; border: 0; color: var(--text-secondary);
                        cursor: pointer; padding: 2px 6px; font-size: 11px; border-radius: 4px;
                    }
                    .ac-asof-back:hover { background: var(--border-light); color: var(--text); }

                    .ac-pill {
                        display: inline-flex; align-items: center; gap: 4px;
                        padding: 3px 9px; border-radius: 999px; font-size: 11px;
                        background: var(--bg); color: var(--text-secondary);
                        border: 1px solid var(--border);
                        white-space: nowrap;
                    }
                    .ac-pill i { font-size: 10px; }
                    .ac-pill-on  { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.3); }
                    .ac-pill-off { background: rgba(148,163,184,.12); color: var(--text-muted); }

                    /* Type cards (in editor) */
                    .ac-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
                    .ac-type-card {
                        cursor: pointer; user-select: none;
                        border: 2px solid var(--border); border-radius: 12px;
                        padding: 14px 12px; text-align: center;
                        background: var(--surface);
                        transition: border-color .15s, transform .1s, background .15s;
                    }
                    .ac-type-card:hover { transform: translateY(-1px); }
                    .ac-type-card.sel { border-color: var(--accent-blue); background: rgba(59,130,246,.06); }
                    .ac-type-card .ac-type-ico {
                        width: 42px; height: 42px; border-radius: 12px; margin: 0 auto 8px;
                        display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
                    }
                    .ac-type-card.t1 .ac-type-ico { background: linear-gradient(135deg, #ef4444, #f97316); }
                    .ac-type-card.t2 .ac-type-ico { background: linear-gradient(135deg, #f97316, #fbbf24); }
                    .ac-type-card.t3 .ac-type-ico { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
                    .ac-type-card h4 { margin: 0 0 4px; font-size: 13px; }
                    .ac-type-card p  { margin: 0; font-size: 11px; color: var(--text-muted); }

                    /* Slider */
                    .ac-slider-row { display: flex; align-items: center; gap: 14px; }
                    .ac-slider {
                        -webkit-appearance: none; appearance: none;
                        flex: 1; height: 8px; border-radius: 999px;
                        background: linear-gradient(to right, #10b981 0%, #fbbf24 50%, #ef4444 100%);
                        outline: none;
                    }
                    .ac-slider::-webkit-slider-thumb {
                        -webkit-appearance: none; appearance: none;
                        width: 22px; height: 22px; border-radius: 50%;
                        background: #fff; border: 2px solid var(--accent-blue);
                        box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer;
                    }
                    .ac-slider::-moz-range-thumb {
                        width: 22px; height: 22px; border-radius: 50%;
                        background: #fff; border: 2px solid var(--accent-blue);
                        box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer;
                    }
                    .ac-slider-value {
                        font-variant-numeric: tabular-nums;
                        min-width: 72px; text-align: right;
                        font-size: 20px; font-weight: 600; color: var(--text);
                    }
                    .ac-slider-value small { font-size: 12px; color: var(--text-muted); font-weight: 400; }

                    /* Day-of-week picker */
                    .ac-dow { display: flex; gap: 6px; flex-wrap: wrap; }
                    .ac-dow-btn {
                        flex: 1; min-width: 42px;
                        padding: 8px 4px; border-radius: 8px;
                        border: 1.5px solid var(--border); background: var(--surface);
                        cursor: pointer; font-size: 12px; font-weight: 500;
                        color: var(--text-muted); transition: all .12s;
                    }
                    .ac-dow-btn:hover { border-color: var(--accent-blue); color: var(--text); }
                    .ac-dow-btn.sel { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }

                    /* Recipient chips */
                    .ac-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); min-height: 42px; align-items: center; }
                    .ac-chip {
                        display: inline-flex; align-items: center; gap: 6px;
                        padding: 4px 8px 4px 10px; background: rgba(59,130,246,.1); color: var(--accent-blue);
                        border-radius: 999px; font-size: 12px; border: 1px solid rgba(59,130,246,.2);
                    }
                    .ac-chip button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font-size: 14px; }
                    .ac-chips input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font-size: 13px; padding: 4px; color: var(--text); }
                    .ac-chips input::placeholder { color: var(--text-muted); }

                    /* Scope chips */
                    .ac-chip-inc {
                        background: rgba(16,185,129,.18);
                        color: #047857;
                        border-color: rgba(16,185,129,.45);
                        font-weight: 500;
                    }
                    .ac-chip-exc {
                        background: rgba(239,68,68,.18);
                        color: #b91c1c;
                        border-color: rgba(239,68,68,.45);
                        font-weight: 500;
                    }
                    [data-theme="dark"] .ac-chip-inc, .dark .ac-chip-inc, .theme-dark .ac-chip-inc {
                        background: rgba(16,185,129,.22); color: #6ee7b7; border-color: rgba(16,185,129,.55);
                    }
                    [data-theme="dark"] .ac-chip-exc, .dark .ac-chip-exc, .theme-dark .ac-chip-exc {
                        background: rgba(239,68,68,.22); color: #fca5a5; border-color: rgba(239,68,68,.55);
                    }

                    /* Tag exclusion pills (toggle buttons) */
                    .ac-tag-pill {
                        display: inline-flex; align-items: center; gap: 6px;
                        padding: 6px 10px; border-radius: 999px;
                        background: var(--surface); color: var(--text-secondary);
                        border: 1.5px solid var(--border);
                        cursor: pointer; font-size: 12px; font-weight: 500;
                        transition: all .12s;
                    }
                    .ac-tag-pill:hover { border-color: var(--tag-color, var(--accent-blue)); color: var(--text); }
                    .ac-tag-pill.active {
                        background: rgba(239,68,68,.15);
                        color: var(--accent-red);
                        border-color: var(--accent-red);
                    }

                    /* Recipient chip variants — readable in both light and dark themes */
                    .ac-chip-mgr {
                        background: rgba(245,158,11,.18);
                        color: #d97706;
                        border-color: rgba(245,158,11,.45);
                        font-weight: 500;
                    }
                    .ac-chip-own {
                        background: rgba(139,92,246,.18);
                        color: #8b5cf6;
                        border-color: rgba(139,92,246,.45);
                        font-weight: 500;
                    }
                    /* Slightly brighter text in dark theme so the chip pops on dark surface */
                    [data-theme="dark"] .ac-chip-mgr,
                    .dark .ac-chip-mgr,
                    .theme-dark .ac-chip-mgr {
                        background: rgba(245,158,11,.22);
                        color: #fbbf24;
                        border-color: rgba(245,158,11,.55);
                    }
                    [data-theme="dark"] .ac-chip-own,
                    .dark .ac-chip-own,
                    .theme-dark .ac-chip-own {
                        background: rgba(139,92,246,.22);
                        color: #c4b5fd;
                        border-color: rgba(139,92,246,.55);
                    }
                    /* Last-ditch fallback if browser is in dark color-scheme */
                    @media (prefers-color-scheme: dark) {
                        body:not(.theme-light):not([data-theme="light"]) .ac-chip-mgr {
                            background: rgba(245,158,11,.22);
                            color: #fbbf24;
                            border-color: rgba(245,158,11,.55);
                        }
                        body:not(.theme-light):not([data-theme="light"]) .ac-chip-own {
                            background: rgba(139,92,246,.22);
                            color: #c4b5fd;
                            border-color: rgba(139,92,246,.55);
                        }
                    }

                    /* Recipients radio cards */
                    .ac-rcpt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
                    .ac-rcpt-card {
                        cursor: pointer; border: 1.5px solid var(--border); border-radius: 10px;
                        padding: 10px 12px; background: var(--surface);
                        display: flex; align-items: center; gap: 10px; transition: all .12s;
                    }
                    .ac-rcpt-card:hover { border-color: var(--accent-blue); }
                    .ac-rcpt-card.sel { border-color: var(--accent-blue); background: rgba(59,130,246,.06); }
                    .ac-rcpt-card i { font-size: 18px; color: var(--accent-blue); }

                    /* Toggle row */
                    .ac-toggle-row {
                        display: flex; align-items: center; justify-content: space-between;
                        padding: 10px 12px; border-radius: 10px; background: var(--bg);
                        border: 1px solid var(--border);
                    }
                    .ac-toggle-row + .ac-toggle-row { margin-top: 8px; }
                    .ac-toggle-row strong { font-size: 13px; }
                    .ac-toggle-row small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

                    /* Editor modal — flex column with internal body scroll so header/footer always stay visible */
                    /* z-index 10000 because the mobile bottom-nav (bc-bottom-nav) sits at 9999 and was overlapping our footer */
                    .ac-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 10000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
                    .ac-modal {
                        background: var(--surface);
                        width: min(1200px, 90vw);
                        max-height: 92vh;
                        border-radius: 16px;
                        box-shadow: 0 30px 80px rgba(0,0,0,.35);
                        display: flex; flex-direction: column;
                        overflow: hidden;
                    }
                    .ac-modal-hdr {
                        flex: 0 0 auto;
                        background: var(--surface);
                        padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
                        display: flex; align-items: center; justify-content: space-between;
                    }
                    .ac-modal-hdr h3 { margin: 0; font-size: 17px; }
                    .ac-modal-body { padding: 20px 22px; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
                    .ac-modal-ftr {
                        flex: 0 0 auto;
                        background: var(--surface);
                        padding: 14px 22px; border-top: 1px solid var(--border);
                        display: flex; gap: 8px; justify-content: flex-end;
                        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
                    }
                    .ac-section-title {
                        font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
                        color: var(--text-muted); margin: 18px 0 8px; font-weight: 600;
                    }
                    .ac-section-title:first-child { margin-top: 0; }

                    /* Result panel */
                    .ac-result { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
                    .ac-result-head { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
                    .ac-result-num { font-weight: 600; font-size: 18px; }
                    .ac-result table { width: 100%; margin-top: 10px; font-size: 12px; border-collapse: collapse; }
                    .ac-result th, .ac-result td { padding: 6px 8px; }
                    .ac-result th { text-align: left; background: rgba(0,0,0,.03); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
                    .ac-result tr { border-top: 1px solid var(--border); }
                    .ac-result td.def { color: var(--accent-red); font-weight: 600; }

                    /* Per-user threshold row (works on desktop, stacks on mobile) */
                    .ac-thr-row {
                        display: grid;
                        grid-template-columns: minmax(140px,1.2fr) 2fr minmax(120px,auto) auto;
                        align-items: center;
                        gap: 12px;
                        padding: 8px 0;
                        border-bottom: 1px dashed var(--border);
                    }
                    .ac-thr-row:last-child { border-bottom: 0; }
                    .ac-thr-name { font-size: 13px; }
                    .ac-thr-slider { height: 6px; }
                    .ac-thr-value { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }

                    /* Small spacing between form-label and the input below it */
                    .ac-modal-body .form-label + .form-input,
                    .ac-modal-body .form-label + select.form-input,
                    .ac-modal-body .form-label + input { margin-top: 4px; }
                    .ac-modal-body .form-label { font-size: 12px; color: var(--text-muted); margin-bottom: 0; }

                    /* Page-level wrapper extra padding on small screens */
                    @media (max-width: 720px) {
                        /* Stack 3-column grids on mobile */
                        .ac-type-grid, .ac-rcpt-grid { grid-template-columns: 1fr; }

                        /* Hero: center & wrap, shrink icon */
                        .ac-hero {
                            flex-direction: column; text-align: center;
                            padding: 16px 18px; gap: 10px;
                            margin-bottom: 14px;
                        }
                        .ac-hero-icon { width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }
                        .ac-hero h2 { font-size: 16px; }
                        .ac-hero p  { font-size: 12px; line-height: 1.5; max-width: 32em; margin: 0 auto; }

                        /* Stats: 2 columns instead of 3 */
                        .ac-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
                        .ac-stat-value { font-size: 18px; }

                        /* Page header: tight padding so app gets max width on phones */
                        .ac-page-header { padding: 0 10px; margin-bottom: 12px; }
                        .ac-page-header .bc-page-title { font-size: 17px; }
                        .ac-wrap { padding: 0 8px 30px; }
                        .ac-hero { padding: 14px 12px; }
                        .ac-stats { gap: 6px; }
                        .ac-stat { padding: 10px 12px; }

                        /* Rule cards: tighter padding, head stacks (title row + actions below) */
                        .ac-rule-card { padding: 10px 12px; }
                        .ac-rule-head { flex-direction: column; align-items: stretch; gap: 10px; }
                        .ac-rule-actions { flex-direction: column; align-items: stretch; gap: 8px; }
                        .ac-asof { width: 100%; justify-content: space-between; }
                        .ac-asof input[type="date"] { flex: 1; min-width: 0; }
                        .ac-rule-btns { width: 100%; gap: 6px; }
                        .ac-rule-btns .btn { flex: 1 1 auto; padding: 8px 10px; }
                        .ac-rule-card .ac-pill { font-size: 10px; padding: 2px 7px; }
                        .ac-rule-card .ac-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

                        /* Editor modal: full-screen sheet style on small phones */
                        .ac-modal-overlay { padding: 0; align-items: stretch; }
                        .ac-modal {
                            width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh;
                            border-radius: 0; box-shadow: none;
                        }
                        .ac-modal-hdr { padding: 12px 12px 10px; }
                        .ac-modal-hdr h3 { font-size: 15px; }
                        .ac-modal-body { padding: 12px 12px 16px; flex: 1 1 auto; }
                        .ac-modal-ftr  { padding: 10px 12px; }

                        /* Section titles get a touch more breathing room */
                        .ac-section-title { margin: 20px 0 10px; }

                        /* Sliders: chunkier thumb for fat fingers */
                        .ac-slider { height: 10px; }
                        .ac-slider::-webkit-slider-thumb { width: 26px; height: 26px; }
                        .ac-slider::-moz-range-thumb { width: 26px; height: 26px; }
                        .ac-slider-value { min-width: 60px; font-size: 18px; }

                        /* Day-of-week buttons sit better at 2-per-row */
                        .ac-dow-btn { flex: 1 1 calc(50% - 4px); padding: 10px 6px; font-size: 13px; }

                        /* Toggle rows wrap nicely; toggle stays inline */
                        .ac-toggle-row { padding: 12px 14px; gap: 10px; }
                        .ac-toggle-row strong { font-size: 13px; }
                        .ac-toggle-row small { font-size: 11px; line-height: 1.5; margin-top: 4px; }

                        /* Recipient cards: bigger touch target */
                        .ac-rcpt-card { padding: 12px 14px; }
                        .ac-rcpt-card i { font-size: 22px; min-width: 22px; text-align: center; }

                        /* Chip picker stays usable */
                        .ac-chips { padding: 8px; min-height: 48px; }
                        .ac-chip { font-size: 13px; padding: 5px 8px 5px 11px; }
                        .ac-chips input { min-width: 100%; font-size: 14px; padding: 6px 4px; }

                        /* Per-user threshold rows: stack as 2 rows (name+value on top, slider full-width below) */
                        .ac-thr-row {
                            grid-template-columns: 1fr auto auto;
                            grid-template-areas: "name value undo" "slider slider slider";
                            gap: 6px 10px;
                            padding: 12px 0;
                        }
                        .ac-thr-name   { grid-area: name; }
                        .ac-thr-value  { grid-area: value; text-align: right; }
                        .ac-thr-slider { grid-area: slider; height: 10px; }
                        .ac-thr-row .btn { grid-area: undo; }

                        /* Result detail table: smaller font, hide some cols if very narrow */
                        .ac-result { padding: 10px 12px; }
                        .ac-result-head { gap: 10px 14px; font-size: 12px; }
                        .ac-result-num { font-size: 16px; }
                        .ac-result table { font-size: 11px; }
                        .ac-result th, .ac-result td { padding: 5px 5px; }
                    }

                    /* Very narrow phones — squeeze paddings even more so content owns the screen */
                    @media (max-width: 480px) {
                        .ac-stats { grid-template-columns: 1fr; }
                        .ac-modal-body { padding: 10px 10px 14px; }
                        .ac-modal-hdr  { padding: 10px 10px 8px; }
                        .ac-modal-ftr  { padding: 8px 10px; }
                        .ac-wrap { padding: 0 6px 30px; }
                        .ac-page-header { padding: 0 8px; margin-bottom: 10px; }
                        .ac-hero { padding: 12px 10px; }
                        .ac-rule-card { padding: 10px 10px; }
                        .ac-hero p { font-size: 12px; }
                        .ac-section-title { font-size: 10px; }
                        .ac-new-rule-label { display: none; } /* keep just "+" on tight phones */
                    }