:root {
    --bg: #f7f7fb;
    --bg-2: #eef1f8;
    --card: rgba(255, 255, 255, 0.96);
    --card-solid: #ffffff;
    --text: #182132;
    --muted: #667085;
    --line: #e6e8ef;
    --line-strong: #d8dce8;
    --accent: #6f5bd3;
    --accent-2: #b86aa3;
    --accent-3: #5b7cfa;
    --danger: #c62828;
    --success: #1f8f4e;
    --warning: #c27a18;
    --info: #4b5565;
    --shadow: 0 14px 32px rgba(26, 35, 60, 0.10);
    --shadow-soft: 0 8px 18px rgba(26, 35, 60, 0.07);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100%;
    margin: 0;
    padding: 28px;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 0% 0%, rgba(111, 91, 211, 0.08), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(184, 106, 163, 0.08), transparent 28%),
        linear-gradient(180deg, #fafbff 0%, #f3f5fb 100%);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(111, 91, 211, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 91, 211, 0.03) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 78%);
}

a {
    color: #5d4bc5;
    text-decoration: none;
    font-weight: 560;
}
a:hover { color: #8b4d88; }

h1 {
    margin: 0 0 18px;
    font-size: 33px;
    line-height: 1.15;
    letter-spacing: -0.035em;
}
h2 {
    margin: 28px 0 14px;
    font-size: 21px;
    letter-spacing: -0.02em;
}
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

.page-shell,
body > form,
body > table,
body > p,
body > .section,
body > .warning,
body > .error,
body > .success,
body > .quick-filters,
body > .search-form,
body > .pagination,
body > .summary { max-width: 1480px; }

.top-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 18px;
    padding: 12px;
    border: 1px solid rgba(111, 91, 211, 0.14);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}
.top-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 12px;
}
.top-links a:hover {
    border-color: rgba(111, 91, 211, 0.30);
    background: linear-gradient(135deg, rgba(111, 91, 211, .06), rgba(184, 106, 163, .06));
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card-solid);
    box-shadow: var(--shadow-soft);
    font-size: 13px;
}
th, td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
}
th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #475467;
    background: linear-gradient(180deg, #fbfbfe, #f5f6fb);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbff; }

code {
    display: inline-block;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid rgba(111, 91, 211, 0.10);
    border-radius: 8px;
    color: #2e3550;
    background: #f7f7fc;
    word-break: break-all;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

form, .search-form, .rules-card, .warning, .error, .success, .section { border-radius: var(--radius); }
body > form, .search-form, .rules-card, .section {
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}
.form-row { margin-bottom: 16px; }
label {
    display: block;
    margin-bottom: 7px;
    color: #253047;
    font-weight: 620;
}
input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 92px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
input:focus, textarea:focus, select:focus {
    border-color: rgba(111, 91, 211, .55);
    box-shadow: 0 0 0 4px rgba(111, 91, 211, .08);
}
input[type="checkbox"] {
    width: 17px; height: 17px; accent-color: var(--accent); vertical-align: middle;
}
.checkbox-row label { display: inline; margin-left: 6px; font-weight: 560; }

button, .button, .search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: white;
    background: linear-gradient(135deg, #6f5bd3, #9c6db0);
    box-shadow: 0 6px 16px rgba(111, 91, 211, .16);
    font-size: 12px;
    font-weight: 620;
    cursor: pointer;
}
button:hover, .button:hover {
    transform: translateY(-1px);
    filter: brightness(1.01);
}
.delete-button, .danger-button, .cleanup-link { color: var(--danger) !important; }
.danger-button, .delete-button {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(198, 40, 40, .18);
    color: var(--danger) !important;
    background: #fff5f5;
    box-shadow: none;
    font-size: 12px;
}
.secondary-button {
    color: #334155 !important;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
}

.warning {
    margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(194, 122, 24, .20); background: #fff9ef; color: #8a5a12;
}
.error {
    margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(198, 40, 40, .18); background: #fff1f1; color: #a12626;
}
.success {
    margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(31, 143, 78, .18); background: #edf9f2; color: #1f7a45;
}
.help, .small, .badge, .template-preview { color: var(--muted); font-size: 12px; }
.enabled, .status-final-success { color: var(--success); font-weight: 700; }
.disabled, .status-final-failed { color: var(--danger); font-weight: 700; }
.status, .rules-count {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--info);
    font-weight: 700;
    white-space: nowrap;
}
.status-active { background: #fff6e9; color: var(--warning); }
.status-final-success { background: #edf9f2; }
.status-final-failed { background: #fff1f1; }
.status-muted { background: #f3f4f6; color: #667085; }

.quick-filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
}
.quick-filters a, .pagination a, .pagination span {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 7px 11px;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .85);
    color: #475467; box-shadow: 0 4px 10px rgba(26, 35, 60, 0.05); font-size: 12px;
}
.quick-filters a.active, .pagination span.current {
    border-color: rgba(111, 91, 211, 0.20);
    color: #2f2b52;
    background: linear-gradient(135deg, rgba(111, 91, 211, .12), rgba(184, 106, 163, .12));
}
.quick-filters a.active .badge { color: #475467; }
.search-form {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px;
}
.search-form input[type="text"] { width: min(520px, 100%); }
.search-form select { width: auto; min-width: 170px; }
.search-form .small { flex-basis: 100%; }
.pagination {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0;
}
.summary { margin: 12px 0; color: #344054; font-weight: 620; }
.actions, .delete-form, .inline-form { white-space: nowrap; }
.delete-form, .inline-form, .inline-procx-check-form { display: inline; }
.file-id { max-width: 650px; word-break: break-all; }

.dashboard { max-width: 1180px; margin: 0 auto; }
.hero {
    display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-bottom: 22px;
    padding: 24px; border: 1px solid rgba(111, 91, 211, 0.12); border-radius: 28px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
    box-shadow: var(--shadow);
}
.brand { display: flex; gap: 16px; align-items: center; }
.brand-logo {
    width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 10px 22px rgba(111, 91, 211, .18); background: #120d25; border: 3px solid #fff;
}
.eyebrow {
    margin-bottom: 7px; color: #6f5bd3; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hero p { margin: 0; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.dashboard-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.dashboard-card {
    min-height: 152px; padding: 18px; border: 1px solid rgba(111, 91, 211, .12); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-soft);
}
.dashboard-card.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(111, 91, 211, .06), rgba(184, 106, 163, .06)), #fff;
}
.dashboard-card h2 { margin: 0 0 8px; font-size: 18px; }
.dashboard-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.45; }
.ip-value {
    display: inline-flex; align-items: center; padding: 12px 14px; border-radius: 16px; color: #344054;
    background: linear-gradient(135deg, rgba(111, 91, 211, .10), rgba(184, 106, 163, .08));
    font-family: "SFMono-Regular", Consolas, monospace; font-size: 18px; font-weight: 760;
}
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-card {
    width: min(440px, 100%); padding: 28px; border: 1px solid rgba(111, 91, 211, .14); border-radius: 28px; background: var(--card); box-shadow: var(--shadow);
}
.login-card .brand { margin-bottom: 20px; }

@media (max-width: 980px) {
    body { padding: 18px; }
    .hero { grid-template-columns: 1fr; }
    .hero-actions { justify-content: flex-start; }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-card.featured { grid-column: span 2; }
    table { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-card.featured { grid-column: span 1; }
    h1 { font-size: 28px; }
}


.status, .rules-count { font-weight: 720; }
.enabled, .disabled, .status-final-success, .status-final-failed { font-weight: 720; }
h1, h2 { font-weight: 680; }
label { font-weight: 620; }

/* v4 refinements */
.dashboard-card,
.dashboard-card:hover {
    color: var(--text);
}

.dashboard-card h2,
.dashboard-card:hover h2 {
    color: var(--text);
}

.dashboard-card .button.secondary-button,
.dashboard-card .button.secondary-button:hover,
.hero-actions .button.secondary-button,
.hero-actions .button.secondary-button:hover {
    color: #334155 !important;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
}

.operation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 1480px;
}

.operation-card {
    margin-top: 0;
}

.operation-card form {
    box-shadow: none;
    border: 0;
    padding: 0;
    background: transparent;
}

@media (max-width: 900px) {
    .operation-grid {
        grid-template-columns: 1fr;
    }
}


.bot-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #f8fafc;
    color: #475467;
    font-size: 13px;
    font-weight: 650;
}

.bot-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #98a2b3;
}

.bot-status-up {
    border-color: rgba(31, 143, 78, .20);
    background: #edf9f2;
    color: #1f7a45;
}

.bot-status-up .bot-status-dot {
    background: var(--success);
}

.bot-status-warning {
    border-color: rgba(194, 122, 24, .22);
    background: #fff9ef;
    color: #8a5a12;
}

.bot-status-warning .bot-status-dot {
    background: var(--warning);
}

.bot-status-down {
    border-color: rgba(198, 40, 40, .20);
    background: #fff1f1;
    color: #a12626;
}

.bot-status-down .bot-status-dot {
    background: var(--danger);
}

.bot-status-unknown {
    border-color: rgba(102, 112, 133, .22);
    background: #f3f4f6;
    color: #667085;
}

.bot-status-details {
    margin-bottom: 12px;
    word-break: break-word;
}


/* v10 safe UI polish: lighter statuses, softer tables, nicer copyable IDs */
table {
    border: 1px solid rgba(214, 218, 230, 0.72);
    box-shadow: 0 8px 22px rgba(26, 35, 60, 0.055);
}

th,
td {
    border-bottom: 1px solid rgba(226, 230, 240, 0.78);
}

tbody tr:hover {
    background: rgba(247, 248, 252, 0.75);
}

.status,
.rules-count {
    font-weight: 560;
    border: 1px solid rgba(214, 218, 230, 0.70);
    box-shadow: none;
}

.status-active {
    border-color: rgba(194, 122, 24, .18);
    background: #fff8ee;
    color: #9a6518;
}

.status-final-success {
    border-color: rgba(31, 143, 78, .16);
    background: #effaf4;
    color: #257a4b;
    font-weight: 560;
}

.status-final-failed {
    border-color: rgba(198, 40, 40, .16);
    background: #fff3f3;
    color: #b33131;
    font-weight: 560;
}

.status-muted {
    border-color: rgba(102, 112, 133, .14);
    background: #f5f6f8;
    color: #697386;
    font-weight: 520;
}

.enabled,
.disabled {
    font-weight: 560;
}

code {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid rgba(203, 209, 225, 0.72);
    border-radius: 9px;
    background: #fbfbfe;
    color: #29334d;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 450;
    line-height: 1.45;
    word-break: break-all;
    cursor: copy;
}

code:hover {
    border-color: rgba(111, 91, 211, .32);
    background: #f7f5ff;
}

code::after {
    content: "copy";
    margin-left: 7px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #eef0f7;
    color: #667085;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 10px;
    font-weight: 520;
    letter-spacing: .01em;
    opacity: 0;
    transition: opacity .12s ease;
}

code:hover::after {
    opacity: 1;
}

code.copied {
    border-color: rgba(31, 143, 78, .35);
    background: #effaf4;
}

code.copied::after {
    content: "copied";
    opacity: 1;
    color: #257a4b;
    background: #dff5e8;
}

.id-list {
    display: grid;
    gap: 5px;
}

td .small {
    font-weight: 400;
}

.actions a {
    font-weight: 540;
}


/* v11 actions/table layout polish */
.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin-top: 12px;
    border-radius: var(--radius);
}

.table-wrap table {
    margin-top: 0;
    min-width: 1500px;
}

.cases-table {
    min-width: 1700px;
}

.providers-table,
.merchants-table {
    min-width: 1600px;
}

th,
td {
    font-weight: 400;
}

th {
    font-weight: 560;
}

.actions {
    white-space: nowrap;
    vertical-align: top;
}

.actions a {
    font-weight: 500;
    font-size: 12px;
}

.actions .button,
.actions button,
.id-actions .button,
.id-actions button {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 520;
}

.id-cell {
    min-width: 150px;
}

.id-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.id-actions form {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.action-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.action-links a {
    padding: 4px 7px;
    border: 1px solid rgba(214, 218, 230, .8);
    border-radius: 8px;
    background: #fff;
    color: #475467;
}

.action-links a:hover {
    border-color: rgba(111, 91, 211, .28);
    background: #f7f5ff;
}

.delete-form {
    margin-left: 0;
}

.delete-button {
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 520;
}

code {
    white-space: nowrap;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

code:hover {
    max-width: none;
    overflow: visible;
}

code::after {
    content: "";
    width: 0;
    margin-left: 0;
    padding: 0;
}

code:hover::after {
    content: "";
    opacity: 0;
}

code.copied::after {
    content: "✓";
    width: auto;
    margin-left: 7px;
    padding: 1px 5px;
    opacity: 1;
    color: #257a4b;
    background: #dff5e8;
    border-radius: 999px;
}

.status,
.rules-count,
.enabled,
.disabled {
    font-weight: 520;
}

.template-preview {
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.id-list {
    display: grid;
    gap: 5px;
    min-width: max-content;
}


/* v12: make management buttons slightly distinct from copyable ID fields */
.action-links a,
.id-actions a,
.id-actions button,
.delete-button,
.danger-button {
    border: 1px solid rgba(111, 91, 211, 0.26);
    background: linear-gradient(180deg, #ffffff 0%, #f3f1ff 100%);
    color: #4b3fb0 !important;
    box-shadow: 0 3px 8px rgba(26, 35, 60, 0.06);
}

.action-links a:hover,
.id-actions a:hover,
.id-actions button:hover {
    border-color: rgba(111, 91, 211, 0.40);
    background: linear-gradient(180deg, #ffffff 0%, #ebe8ff 100%);
    color: #3f3399 !important;
}

.delete-button,
.danger-button {
    border-color: rgba(198, 40, 40, 0.24);
    background: linear-gradient(180deg, #ffffff 0%, #fff0f0 100%);
    color: #b33131 !important;
}

.delete-button:hover,
.danger-button:hover {
    border-color: rgba(198, 40, 40, 0.38);
    background: linear-gradient(180deg, #ffffff 0%, #ffe7e7 100%);
}

.action-links {
    gap: 6px;
}

.action-links a,
.id-actions a {
    font-size: 11px;
    font-weight: 540;
}

code {
    border-color: rgba(203, 209, 225, 0.72);
    background: #fbfbfe;
    box-shadow: none;
}


/* v13: very subtle diagonal purple admin background strokes */
body {
    background:
        repeating-linear-gradient(
            128deg,
            rgba(111, 91, 211, 0.045) 0px,
            rgba(111, 91, 211, 0.045) 1px,
            transparent 1px,
            transparent 42px
        ),
        radial-gradient(circle at 18% 12%, rgba(176, 126, 255, 0.082), transparent 34%),
        radial-gradient(circle at 86% 8%, rgba(230, 120, 190, 0.060), transparent 30%),
        var(--bg);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        repeating-linear-gradient(
            128deg,
            transparent 0px,
            transparent 86px,
            rgba(150, 120, 255, 0.039) 86px,
            rgba(150, 120, 255, 0.039) 88px,
            transparent 88px,
            transparent 168px
        );
}

.container,
.login-card,
.card,
.dashboard-card,
form,
table {
    position: relative;
}



/* v15: softer outlined control buttons */
button,
.button,
a.button,
input[type="submit"],
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid rgba(111, 91, 211, 0.28);
    background: #f6f3ff;
    color: #5546b8;
    font-size: 13px;
    font-weight: 520;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(43, 54, 85, 0.05);
    text-decoration: none;
}

button:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: #f1edff;
    border-color: rgba(111, 91, 211, 0.4);
    color: #4d3fb0;
    box-shadow: 0 4px 10px rgba(43, 54, 85, 0.06);
}

button:active,
.button:active,
a.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(1px);
}

.secondary-button,
a.secondary-button {
    background: #f8f7fd;
    border-color: rgba(111, 91, 211, 0.24);
    color: #6155ad;
}

.secondary-button:hover,
a.secondary-button:hover {
    background: #f2f0fb;
    border-color: rgba(111, 91, 211, 0.36);
    color: #51479b;
}

.search-form button,
.search-form .button,
.search-form input[type="submit"] {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 520;
}

.action-links a,
.id-actions a,
.id-actions button,
.delete-button,
.danger-button {
    border-width: 1px;
    box-shadow: 0 2px 6px rgba(43, 54, 85, 0.04);
    font-weight: 520 !important;
}

.action-links a,
.id-actions a {
    background: #f7f4ff;
    color: #5446b7 !important;
}

.action-links a:hover,
.id-actions a:hover {
    background: #f1edff;
}

.delete-button,
.danger-button {
    background: #fff4f4;
    color: #b33a3a !important;
    border-color: rgba(198, 40, 40, 0.2);
}

.delete-button:hover,
.danger-button:hover {
    background: #ffecec;
    border-color: rgba(198, 40, 40, 0.32);
}


/* v16: rules/template action buttons */
.rules-button,
.template-button,
.rule-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(111, 91, 211, 0.26);
    background: #f7f4ff;
    color: #5446b7 !important;
    font-size: 11px;
    font-weight: 520;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(43, 54, 85, 0.04);
    cursor: pointer;
}

.rules-button:hover,
.template-button:hover,
.rule-action-button:hover {
    background: #f1edff;
    border-color: rgba(111, 91, 211, 0.40);
    color: #4d3fb0 !important;
}

.rule-disable-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(194, 122, 24, 0.30);
    background: #fff8e8;
    color: #986316 !important;
    font-size: 11px;
    font-weight: 520;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(43, 54, 85, 0.04);
    cursor: pointer;
}

.rule-disable-button:hover {
    background: #fff2d2;
    border-color: rgba(194, 122, 24, 0.44);
    color: #83510f !important;
}

.existing-rules-table .inline-form,
.rule-actions .inline-form {
    display: inline-flex;
    padding: 0;
    margin: 0 5px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.existing-rules-table td {
    vertical-align: middle;
}

.rules-count {
    min-width: 28px;
}

.template-preview .template-button {
    max-width: 320px;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* v17: plain rules count + white outlined search/reset buttons */
.rules-count {
    display: inline;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #667085;
    box-shadow: none;
    font-size: 13px;
    font-weight: 400;
    cursor: default;
    pointer-events: none;
}

.rules-count:hover {
    background: transparent;
    border: 0;
    color: #667085;
}

.search-form button,
.search-form .button,
.search-form a.button,
.search-form input[type="submit"],
.search-form input[type="button"] {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid rgba(111, 91, 211, 0.30);
    background: #ffffff;
    color: #5546b8 !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 7px rgba(43, 54, 85, 0.035);
}

.search-form button:hover,
.search-form .button:hover,
.search-form a.button:hover,
.search-form input[type="submit"]:hover,
.search-form input[type="button"]:hover {
    border-color: rgba(111, 91, 211, 0.44);
    background: #fbfaff;
    color: #4d3fb0 !important;
    box-shadow: 0 3px 9px rgba(43, 54, 85, 0.05);
}

.search-form .secondary-button,
.search-form a.secondary-button {
    background: #ffffff;
    color: #6155ad !important;
    border-color: rgba(111, 91, 211, 0.28);
}

.search-form .secondary-button:hover,
.search-form a.secondary-button:hover {
    background: #fbfaff;
    border-color: rgba(111, 91, 211, 0.40);
}


/* v18: reset button same size as search, yellow text */
.search-form a.secondary-button,
.search-form .secondary-button {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid rgba(194, 122, 24, 0.30);
    background: #ffffff;
    color: #986316 !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 2px 7px rgba(43, 54, 85, 0.035);
}

.search-form a.secondary-button:hover,
.search-form .secondary-button:hover {
    background: #fffaf0;
    border-color: rgba(194, 122, 24, 0.44);
    color: #83510f !important;
    box-shadow: 0 3px 9px rgba(43, 54, 85, 0.05);
}


/* v19: make Reset exactly like Search size/system, but yellow text/accent */
.search-form a.secondary-button,
.search-form .secondary-button,
.search-form a[href*="reset"],
.search-form a[href*="Reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px !important;
    height: 34px;
    padding: 7px 13px !important;
    box-sizing: border-box;
    border-radius: 10px !important;
    border: 1px solid rgba(194, 122, 24, 0.32) !important;
    background: #ffffff !important;
    color: #986316 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 7px rgba(43, 54, 85, 0.035) !important;
    text-decoration: none;
}

.search-form a.secondary-button:hover,
.search-form .secondary-button:hover,
.search-form a[href*="reset"]:hover,
.search-form a[href*="Reset"]:hover {
    background: #fffaf0 !important;
    border-color: rgba(194, 122, 24, 0.44) !important;
    color: #83510f !important;
    box-shadow: 0 3px 9px rgba(43, 54, 85, 0.05) !important;
}

.search-form button,
.search-form input[type="submit"] {
    min-height: 34px !important;
    height: 34px;
    padding: 7px 13px !important;
    box-sizing: border-box;
}


/* v20 real fix: Search and Reset are identical size; Reset has yellow text/accent */
.search-form button[type="submit"],
.search-form button,
.search-form input[type="submit"],
.search-form .reset-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 7px 13px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 7px rgba(43, 54, 85, 0.035) !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

.search-form button[type="submit"],
.search-form button,
.search-form input[type="submit"] {
    border: 1px solid rgba(111, 91, 211, 0.30) !important;
    background: #ffffff !important;
    color: #5546b8 !important;
}

.search-form button[type="submit"]:hover,
.search-form button:hover,
.search-form input[type="submit"]:hover {
    border-color: rgba(111, 91, 211, 0.44) !important;
    background: #fbfaff !important;
    color: #4d3fb0 !important;
}

.search-form .reset-button {
    margin-left: 8px !important;
    border: 1px solid rgba(194, 122, 24, 0.32) !important;
    background: #ffffff !important;
    color: #986316 !important;
}

.search-form .reset-button:hover {
    border-color: rgba(194, 122, 24, 0.44) !important;
    background: #fffaf0 !important;
    color: #83510f !important;
}

/* Keep rules number plain, not a button */
.rules-count {
    display: inline !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #667085 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    cursor: default !important;
    pointer-events: none !important;
}


/* v23: subtle vertical separators between table columns */
th,
td {
    border-right: 1px solid rgba(214, 218, 230, 0.58);
}

th:last-child,
td:last-child {
    border-right: 0;
}

thead th {
    border-right-color: rgba(203, 209, 225, 0.68);
}

tbody td {
    border-right-color: rgba(226, 230, 240, 0.72);
}

.table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
}


/* v25: case related settings links */
.settings-link {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 8px;
    border: 1px solid rgba(111, 91, 211, 0.24);
    background: #ffffff;
    color: #5546b8;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.settings-link:hover {
    background: #f7f4ff;
    border-color: rgba(111, 91, 211, 0.38);
    color: #4d3fb0;
}

/* v33: merchant message templates editor */
.template-editor-row textarea {
    min-height: 130px;
    white-space: pre-wrap;
}

.template-editor-row pre {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    white-space: pre-wrap;
    word-break: break-word;
}

.inline-close-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    flex-wrap: nowrap;
}

.compact-select {
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 10px;
    background: #ffffff;
    color: #2d2540;
    font-size: 13px;
}

.manual-close-panel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid rgba(220, 38, 38, 0.16);
    border-radius: 14px;
    background: rgba(254, 242, 242, 0.72);
    flex-wrap: wrap;
}

.inline-procx-check-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.case-action-panels {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.procx-check-panel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(111, 91, 211, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
    flex-wrap: wrap;
}

.procx-status-result {
    padding: 14px 16px;
    margin: 0 0 18px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.82);
}

.procx-status-result h2 {
    margin-top: 0;
}

.procx-status-success {
    border-color: rgba(31, 143, 78, .20);
    background: #edf9f2;
}

.procx-status-warning {
    border-color: rgba(194, 122, 24, .24);
    background: #fff9ef;
}

.procx-status-error {
    border-color: rgba(198, 40, 40, .20);
    background: #fff1f1;
}

.payment-state-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.25;
    border: 1px solid var(--line);
    white-space: nowrap;
}

.payment-state-completed {
    color: var(--success);
    background: #edf9f2;
    border-color: rgba(31, 143, 78, .20);
}

.payment-state-declined {
    color: var(--danger);
    background: #fff1f1;
    border-color: rgba(198, 40, 40, .20);
}

.payment-state-pending {
    color: var(--warning);
    background: #fff6e9;
    border-color: rgba(194, 122, 24, .24);
}

.payment-state-muted {
    color: #667085;
    background: #f3f4f6;
    border-color: rgba(102, 112, 133, .18);
}

.inline-case-result {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.35;
    max-width: 260px;
    word-break: normal;
    white-space: normal;
}

.inline-case-result:empty {
    display: none;
}

.inline-case-result-success {
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.inline-case-result-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.inline-case-result-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.inline-case-result-loading {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    color: #5b21b6;
}


/* v39: lighter Payment column and inline ProcX status coloring */
.payment-cell,
.payment-cell code,
.payment-cell .payment-state-badge {
    font-weight: 400;
}

.payment-state-inline {
    display: inline;
    font-weight: 700;
}