:root {
    --bg: #5b4427;
    --surface: #dcc79d;
    --surface-soft: #d1b27a;
    --surface-blue: #cfaf77;
    --border: #9f7d48;
    --border-strong: #6a4e27;
    --text: #23180d;
    --muted: #4e3d22;
    --muted-2: #6a5431;
    --primary: #c49536;
    --primary-dark: #6f5216;
    --primary-soft: #d4b16b;
    --green: #40612b;
    --green-soft: #e5f0db;
    --amber: #8c5f0f;
    --amber-soft: #e3c98d;
    --red: #933c26;
    --red-soft: #f7e6de;
    --blue: #6f5327;
    --blue-soft: #ddc28e;
    --panel: #4d3820;
    --panel-soft: #594227;
    --panel-soft-2: #674b2a;
    --panel-text: #f2e5c7;
    --panel-muted: #d6c39b;
    --panel-border: #7f6133;
    --shadow: 0 14px 34px rgba(22, 14, 6, .20);
    --radius: 14px;
}

* { box-sizing: border-box; }
html { background: linear-gradient(180deg, #61492b 0%, #4b371f 100%); }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 14%, rgba(255,255,255,.045) 0 0.28rem, transparent 0.34rem),
        radial-gradient(circle at 78% 10%, rgba(255,255,255,.03) 0 0.2rem, transparent 0.26rem),
        radial-gradient(circle at 36% 72%, rgba(255,255,255,.025) 0 0.22rem, transparent 0.28rem),
        repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, rgba(0,0,0,.010) 2px 4px),
        linear-gradient(180deg, #644b2a 0%, #513a20 58%, #45311b 100%);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
    background: #c8ab72;
    border: 1px solid var(--border);
    border-radius: .45rem;
    padding: .08rem .35rem;
    color: #5a472f;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 248px;
    padding: 1.25rem 1rem;
    border-right: 1px solid #5f4723;
    background: linear-gradient(180deg, #3c2c19 0%, #2d2113 100%);
    box-shadow: 8px 0 28px rgba(24, 15, 6, .22);
    z-index: 5;
}
.brand { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.brand.large { justify-content: center; margin-bottom: 1.1rem; }
.brand strong { display: block; font-size: 1rem; letter-spacing: -.01em; color: #f5e9cf; }
.brand small { display: block; color: #cdb590; margin-top: .1rem; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .8rem;
    color: #2d2113;
    background: linear-gradient(135deg, #f0c86b, var(--primary));
    box-shadow: 0 10px 24px rgba(122, 82, 22, .35);
}

.brand-logo {
    overflow: hidden;
    padding: .16rem;
    background: rgba(240, 200, 107, .14);
}
.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.brand.large .brand-mark {
    width: 3rem;
    height: 3rem;
}

.sidebar nav { display: grid; gap: .85rem; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem .8rem;
    border-radius: .65rem;
    color: #dbc7a0;
    font-weight: 600;
}
.sidebar nav a.active,
.sidebar nav a:hover {
    background: rgba(240, 200, 107, .18);
    color: #fff3d7;
    text-decoration: none;
}
.sidebar nav a.active { box-shadow: inset 3px 0 0 #f0c86b; }

.app-shell { margin-left: 248px; padding: 1.4rem 1.6rem 2.2rem; max-width: 1680px; position: relative; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.topbar h1 { margin: 0; font-size: 1.85rem; letter-spacing: -.03em; color: #ecdcb8; text-shadow: 0 1px 0 rgba(0,0,0,.28); }
.topbar p { margin: .25rem 0 0; color: #ead8b5; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.topbar-actions { display: flex; align-items: end; gap: .7rem; }

.page-backdrop {
    background: rgba(0, 0, 0, .08);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 18px;
    padding: 1rem;
}

.card, .notice-card, .login-card, .metric, .transaction-card, .workflow-card, .summary-tile, .filter-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--panel-text);
}
.card, .notice-card { padding: 1.05rem; margin-bottom: 1rem; }
.login-card { width: min(470px, 100%); padding: 2rem; }
.notice-card { border-color: #9f7d48; background: linear-gradient(180deg, #6a4c27, #533c1f); }
.card h2, .notice-card h2 { margin: 0 0 .75rem; font-size: 1.05rem; letter-spacing: -.01em; color: var(--panel-text); }
.card > p:first-of-type, .notice-card > p:first-of-type { margin-top: 0; color: var(--panel-muted); }
.muted { color: var(--panel-muted); }
.empty { color: var(--panel-muted); text-align: center; padding: 1.25rem; }
.warning-text { color: var(--amber); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.metric { padding: 1rem; position: relative; overflow: hidden; }
.metric::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #e1b85a, var(--primary));
}
.metric span { display: block; color: #d9caa6; font-size: .84rem; font-weight: 700; }
.metric strong { display: block; font-size: 1.65rem; margin-top: .35rem; color: var(--panel-text); letter-spacing: -.03em; }
.metric small { display: block; color: var(--panel-muted); margin-top: .25rem; }

.grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 1rem; align-items: start; }
.page-grid .side-panel { position: sticky; top: 1rem; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.workflow-card { display: block; padding: 1rem; color: var(--panel-text); }
.workflow-card:hover { text-decoration: none; border-color: #a78245; background: linear-gradient(180deg, rgba(224,196,144,.75), rgba(202,169,104,.55)); transform: translateY(-1px); }
.workflow-card span { display: block; color: #d8c497; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.workflow-card strong { display: block; margin: .25rem 0; font-size: 1.1rem; color: var(--panel-text); }
.workflow-card small { color: var(--panel-muted); }

.queue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.queue-grid a {
    padding: .85rem;
    border: 1px solid var(--panel-border);
    border-radius: .85rem;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--panel-soft);
    color: var(--panel-text);
}
.queue-grid a:hover { text-decoration: none; border-color: #a78245; background: linear-gradient(180deg, #d3b87f, var(--primary-soft)); }
.queue-grid strong { display: block; font-size: 1.6rem; color: #f0c86b; }
.queue-grid span { color: var(--panel-muted); }

.status-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: .8rem 0 1rem; }
.summary-tile { padding: .85rem; box-shadow: none; }
.summary-tile span { display: block; color: #d8c497; font-size: .82rem; font-weight: 700; }
.summary-tile strong { display: block; margin-top: .2rem; font-size: 1.35rem; letter-spacing: -.02em; }
.status-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .9rem; }
.status-tabs a {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .38rem .68rem;
    color: #5a472e;
    background: var(--surface);
    font-size: .88rem;
    font-weight: 650;
}
.status-tabs a.active, .status-tabs a:hover { background: var(--primary-soft); border-color: #d2ad61; color: var(--primary-dark); text-decoration: none; }

.flash { padding: .8rem 1rem; border-radius: .85rem; margin-bottom: 1rem; border: 1px solid; box-shadow: var(--shadow); }
.flash.success { background: var(--green-soft); border-color: #ace3cc; color: #0b5f41; }
.flash.error { background: var(--red-soft); border-color: #f2bbb5; color: var(--red); }
.flash.warning { background: var(--amber-soft); border-color: #f5d28c; color: var(--amber); }

button, input, select, textarea { font: inherit; }
input, select, textarea {
    width: 100%;
    margin-top: .25rem;
    padding: .62rem .7rem;
    color: var(--text);
    background: #e0c796;
    border: 1px solid var(--border-strong);
    border-radius: .55rem;
    outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #c79b44; box-shadow: 0 0 0 3px rgba(184,137,45,.16); }
textarea { min-height: 5rem; resize: vertical; }
label { color: var(--muted); font-size: .9rem; font-weight: 650; }
.button {
    appearance: none;
    border: 1px solid var(--border-strong);
    background: #d2b178;
    color: #4f3b20;
    border-radius: .55rem;
    padding: .62rem .85rem;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
}
.button.primary { background: linear-gradient(180deg, #d4aa49, var(--primary)); border-color: #9e7726; color: #2f220f; }
.button.ghost { background: rgba(255,255,255,.03); color: #f0d7a4; }
.button.small { font-size: .82rem; padding: .42rem .55rem; }
.button:hover { filter: brightness(.98); text-decoration: none; }
.button.danger { border-color: #e7a19a; background: var(--red-soft); color: var(--red); }
.full-button { display: block; width: 100%; text-align: center; margin: 1rem 0; }

.stacked-form { display: grid; gap: .8rem; }
.stacked-form.compact { gap: .65rem; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.grid-form .wide { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; align-items: end; grid-column: 1 / -1; gap: .5rem; }

/* Keep profile/user detail fields visually aligned. */
.profile-form {
    align-items: start;
}
.profile-form label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.profile-form input,
.profile-form select,
.profile-form textarea {
    margin-top: 0;
}
.profile-form label small {
    display: block;
    margin-top: .15rem;
    line-height: 1.25;
}
.profile-form .form-actions {
    align-self: end;
}

.inline-form { display: flex; align-items: end; gap: .5rem; }
.filter-form { display: flex; align-items: end; flex-wrap: wrap; gap: .6rem; }
.filter-form label { min-width: 160px; }
.filter-panel { padding: .75rem; margin-bottom: .85rem; box-shadow: none; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--panel-soft); }
.row-action { display: inline; }
.actions-cell { display: flex; gap: .35rem; flex-wrap: wrap; }
.full-width { display: block; margin-top: .75rem; }

.quick-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.quick-form-grid details { border: 1px solid var(--border); border-radius: .85rem; padding: .85rem; background: var(--surface-soft); }
details summary { cursor: pointer; color: var(--primary-dark); margin: .15rem 0 .8rem; font-weight: 800; }
.section-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: .8rem; }
.section-header h2 { margin-bottom: 0; }
.pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .35rem .65rem;
    color: #5a472e;
    background: var(--surface-soft);
    font-weight: 700;
    font-size: .84rem;
}

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: .85rem; }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: #d5bb8a; }
th, td { padding: .74rem .65rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; background: var(--surface-soft); }
tr:last-child td { border-bottom: 0; }
td small { display: block; color: var(--muted); margin-top: .15rem; }
.right { text-align: right; }
.amount { font-variant-numeric: tabular-nums; font-weight: 800; color: #3f2d16; }

.badge { display: inline-flex; border-radius: 999px; padding: .25rem .55rem; font-size: .78rem; border: 1px solid var(--border); background: var(--surface-soft); font-weight: 800; white-space: nowrap; }
.badge-pending { color: var(--blue); border-color: #d8c29b; background: var(--blue-soft); }
.badge-received-by-admin, .badge-paid-by-admin { color: var(--amber); border-color: #f3d397; background: var(--amber-soft); }
.badge-reconciled-to-treasury, .badge-paid-from-treasury, .badge-reimbursed, .badge-posted, .badge-completed { color: var(--green); border-color: #bfe7d0; background: var(--green-soft); }
.badge-cancelled, .badge-voided, .badge-reversed { color: var(--red); border-color: #f2bbb5; background: var(--red-soft); }

.transaction-list { display: grid; gap: .65rem; }
.transaction-card { padding: 0; overflow: hidden; box-shadow: none; }
.transaction-card summary { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; margin: 0; }
.transaction-card summary small { display: block; color: var(--panel-muted); margin-top: .18rem; }
.ledger-lines { padding: 0 1rem 1rem; }
.notice-inline { margin-top: .75rem; padding: .75rem .85rem; border: 1px solid #f5d28c; border-radius: .75rem; background: var(--amber-soft); }
.danger-zone { margin-top: .9rem; border-top: 1px solid #f1c0bb; padding-top: .65rem; }
.danger-zone summary { color: var(--red); margin: 0 0 .6rem; }

.user-pill, .acting-admin-pill {
    min-width: 185px;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(62,40,14,.08);
}
.user-pill span, .user-pill small, .acting-admin-pill span, .acting-admin-pill small { display: block; color: var(--muted); font-size: .75rem; }
.user-pill strong, .acting-admin-pill strong { display: block; color: var(--text); font-size: .95rem; margin: .1rem 0; }
.acting-admin-pill.locked { border-color: #d2ad61; background: var(--primary-soft); }
.fallback-login { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.config-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; }
.config-grid div { border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-soft); padding: .75rem; min-width: 0; }
.config-grid span { display: block; color: var(--muted); font-size: .8rem; margin-bottom: .25rem; }
.config-grid strong { display: block; color: var(--text); overflow-wrap: anywhere; font-size: .88rem; }

.login-card, .card, .metric, .transaction-card, .workflow-card, .summary-tile, .filter-panel, .notice-card {
    background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

th { background: #c7ab76; }

.user-pill, .acting-admin-pill {
    background: linear-gradient(180deg, #d5bb8a, var(--surface));
}

@media (max-width: 1180px) {
    .metric-grid, .workflow-grid, .status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.two, .page-grid { grid-template-columns: 1fr; }
    .page-grid .side-panel { position: static; }
    .quick-form-grid { grid-template-columns: 1fr; }
    .config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .sidebar { position: static; width: auto; border-right: 0; border-bottom: 1px solid #5f4723; }
    .sidebar nav { grid-template-columns: 1fr; }
    .app-shell { margin-left: 0; padding: 1rem; }
    .topbar, .topbar-actions, .filter-form { display: grid; }
    .metric-grid, .workflow-grid, .status-summary, .grid-form, .queue-grid, .config-grid { grid-template-columns: 1fr; }
    .section-header { display: block; }
    .user-pill, .acting-admin-pill { width: 100%; }
}

.nav-section {
    display: grid;
    gap: .22rem;
}
.nav-section-label {
    padding: .25rem .8rem .12rem;
    color: #a98e64;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.nav-section + .nav-section {
    padding-top: .55rem;
    border-top: 1px solid rgba(240, 200, 107, .12);
}
.nav-section-new {
    padding-bottom: .15rem;
}
.sidebar nav a.nav-external::after {
    content: "↗";
    margin-left: auto;
    color: #f0c86b;
    font-size: .78rem;
}

.nav-new {
    position: relative;
}
.nav-new-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .55rem;
    padding: .72rem .8rem;
    border: 0;
    border-radius: .65rem;
    color: #dbc7a0;
    background: transparent;
    cursor: default;
    font-weight: 700;
    text-align: left;
}
.nav-new-trigger::after {
    content: "›";
    color: #f0c86b;
    font-size: 1.15rem;
    line-height: 1;
}
.nav-new.active .nav-new-trigger,
.nav-new:hover .nav-new-trigger,
.nav-new:focus-within .nav-new-trigger {
    background: rgba(240, 200, 107, .18);
    color: #fff3d7;
    box-shadow: inset 3px 0 0 #f0c86b;
}
.nav-new-menu {
    position: absolute;
    left: calc(100% + .5rem);
    top: 0;
    z-index: 20;
    min-width: 245px;
    display: none;
    padding: .45rem;
    border: 1px solid #6d5127;
    border-radius: .85rem;
    background: linear-gradient(180deg, #3c2c19 0%, #2d2113 100%);
    box-shadow: 0 18px 36px rgba(24, 15, 6, .28);
}
.nav-new:hover .nav-new-menu,
.nav-new:focus-within .nav-new-menu {
    display: grid;
    gap: .2rem;
}
.sidebar nav .nav-new-menu a {
    color: #dbc7a0;
    border-radius: .55rem;
    padding: .58rem .65rem;
}
.sidebar nav .nav-new-menu a:hover {
    background: rgba(240, 200, 107, .18);
    color: #fff3d7;
}
.form-page-card {
    max-width: 920px;
}
.request-source-details {
    border: 1px solid var(--border);
    border-radius: .85rem;
    padding: .85rem;
    background: var(--surface-soft);
}
.nested-form {
    margin-top: .75rem;
}
.compact-workflow {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .nav-new-menu {
        position: static;
        min-width: 0;
        margin-top: .25rem;
        box-shadow: none;
    }
    .nav-new:hover .nav-new-menu,
    .nav-new:focus-within .nav-new-menu {
        display: grid;
    }
}

tr:hover td { background: rgba(91, 62, 24, .08); }

.inline-edit { position: relative; }
.inline-edit summary { list-style: none; margin: 0; }
.inline-edit summary::-webkit-details-marker { display: none; }
.account-edit-form,
.api-key-edit-form {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 30;
    width: 320px;
    padding: .75rem;
    border: 1px solid var(--border-strong);
    border-radius: .85rem;
    background: #cfb482;
    box-shadow: 0 18px 34px rgba(62, 40, 14, .22);
}

@media (max-width: 760px) {
    .account-edit-form,
.api-key-edit-form { position: static; width: 100%; margin-top: .5rem; }
}

.user-edit summary,
.user-history summary { margin-bottom: .45rem; }
.history-list { display: grid; gap: .5rem; min-width: 230px; }
.history-row {
    border: 1px solid var(--panel-border);
    border-radius: .7rem;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--panel-soft);
    padding: .6rem .7rem;
    color: var(--panel-text);
}
.history-row strong { display: inline-block; margin-right: .35rem; }
.history-row small { display: block; margin-top: .2rem; color: var(--panel-muted); }
.badge-active, .badge-current { color: var(--green); border-color: #b9d7a7; background: var(--green-soft); }
.badge-archived { color: var(--muted); border-color: var(--border); background: var(--surface-soft); }

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.detail-header h2 { margin: .35rem 0 .2rem; font-size: 1.35rem; }
.detail-header-actions { display: grid; justify-items: end; gap: .45rem; }
.detail-amount { font-size: 1.55rem; }
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.detail-grid div {
    border: 1px solid var(--panel-border);
    border-radius: .75rem;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--panel-soft);
    padding: .7rem;
    min-width: 0;
    color: var(--panel-text);
}
.detail-grid span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
    margin-bottom: .25rem;
}
.detail-grid strong { overflow-wrap: anywhere; }
.detail-actions { display: grid; gap: .65rem; }
.detail-actions .row-action { display: block; }
.detail-actions .button { width: 100%; text-align: center; }
.detail-json { margin-top: .85rem; }
.detail-json summary { margin-bottom: .5rem; }
.detail-json pre, .audit-json-grid pre {
    white-space: pre-wrap;
    overflow-x: auto;
    background: #cdb27c;
    border: 1px solid var(--border);
    border-radius: .65rem;
    padding: .75rem;
    color: var(--text);
    font-size: .82rem;
}
.audit-list { display: grid; gap: .65rem; }
.audit-card {
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface-soft);
    overflow: hidden;
}
.audit-card summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .9rem;
    margin: 0;
}
.audit-card summary small { display: block; color: var(--muted); margin-top: .15rem; }
.audit-json-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: 0 .9rem .9rem;
}
.audit-json-grid span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: .25rem;
}
@media (max-width: 760px) {
    .detail-header { display: block; }
    .detail-header-actions { justify-items: start; margin-top: .75rem; }
    .detail-grid, .audit-json-grid { grid-template-columns: 1fr; }
}

.report-filter-form {
    margin-top: .75rem;
}
.report-tabs {
    margin-top: .2rem;
}
.report-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: .85rem;
    padding: .8rem .9rem;
    border: 1px solid var(--border-strong);
    border-radius: .85rem;
    background: linear-gradient(180deg, #cfb37d, #c2a263);
}
.report-total span {
    color: var(--muted);
    font-weight: 800;
}
.report-total strong,
.report-grand-total {
    font-size: 1.35rem;
}
.report-net-card {
    border-color: var(--border-strong);
}

.scope-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .4rem;
}
.scope-check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .65rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface-soft);
    color: var(--text);
}
.scope-check input {
    width: auto;
    margin: .22rem 0 0;
}
.scope-check span,
.scope-check small {
    display: block;
}
.scope-code {
    display: inline-block;
    margin: .08rem .12rem .08rem 0;
}

.scope-grid-compact {
    grid-template-columns: 1fr;
    max-height: 320px;
    overflow: auto;
    padding-right: .2rem;
}
.scope-grid-compact .scope-check {
    padding: .5rem;
}
@media (max-width: 760px) {
    .scope-grid { grid-template-columns: 1fr; }
}


/* Public API documentation */
.api-docs-page {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), var(--bg);
}
.api-docs-shell {
    width: min(1320px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.4rem 0 2.5rem;
}
.api-docs-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #3c2c19, #2d2113);
    color: #f5e9cf;
    box-shadow: var(--shadow);
}
.api-docs-hero h1 { margin: .3rem 0 .2rem; font-size: 2rem; letter-spacing: -.03em; }
.api-docs-hero p { margin: 0; color: #dbc7a0; }
.api-docs-back { color: #f0c86b; font-weight: 800; }
.api-docs-version {
    min-width: 110px;
    padding: .75rem;
    border: 1px solid rgba(240,200,107,.45);
    border-radius: .9rem;
    background: rgba(240,200,107,.12);
    text-align: center;
}
.api-docs-version span { display: block; color: #dbc7a0; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.api-docs-version strong { display: block; font-size: 1.35rem; color: #fff3d7; }
.api-docs-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.api-docs-toc { position: sticky; top: 1rem; padding: 1rem; display: grid; gap: .25rem; }
.api-docs-toc h2 { margin-bottom: .45rem; }
.api-docs-toc a {
    padding: .45rem .55rem;
    border-radius: .55rem;
    color: var(--primary-dark);
    font-weight: 750;
}
.api-docs-toc a:hover { background: var(--primary-soft); text-decoration: none; }
.api-docs-content { display: grid; gap: 1rem; }
.api-doc-section { margin-bottom: 0; }
.api-doc-section h2 { font-size: 1.25rem; }
.api-doc-section h3 { margin: 1rem 0 .45rem; font-size: 1rem; }
.api-doc-section pre {
    overflow-x: auto;
    padding: .85rem;
    border: 1px solid #b89558;
    border-radius: .85rem;
    background: #2d2113;
    color: #f5e9cf;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.api-doc-section pre code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}
.api-kv { display: grid; gap: .55rem; margin: 1rem 0 0; }
.api-kv div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: .8rem; align-items: start; }
.api-kv dt { color: var(--muted); font-weight: 850; }
.api-kv dd { margin: 0; }
@media (max-width: 980px) {
    .api-docs-grid { grid-template-columns: 1fr; }
    .api-docs-toc { position: static; }
    .api-docs-hero { align-items: flex-start; flex-direction: column; }
}

.api-log-body {
    margin: 0;
    padding: .9rem;
    max-height: 520px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: #24190e;
    color: #f2e6c8;
    font-size: .86rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.api-log-body code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

/* Discord/settings polish */
.login-card .brand strong,
.login-card .brand.large strong,
.setup-card .brand strong {
    color: var(--text);
    text-shadow: none;
}
.login-card .brand small,
.login-card .brand.large small,
.setup-card .brand small {
    color: var(--muted);
}
.login-card .brand-logo,
.setup-card .brand-logo {
    background: rgba(45, 33, 19, .12);
    box-shadow: 0 8px 20px rgba(45, 28, 9, .22);
}
.form-help,
label small.form-help {
    display: block;
    margin-top: .35rem;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}
.config-grid small {
    display: block;
    margin-top: .25rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.aligned-form label {
    display: block;
}


.login-card {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), #d9c294;
}
.login-card .brand strong {
    color: #2b1f12;
}
.login-card .brand small {
    color: #846734;
}
.login-card p,
.login-card .muted {
    color: #46361f;
}
.login-card .button.primary {
    color: #24180b;
}
.card, .metric, .transaction-card, .workflow-card, .summary-tile, .filter-panel, table {
    backdrop-filter: none;
}
.queue-grid a, .request-source-details, .user-pill, .acting-admin-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), var(--surface-soft);
}
.sidebar nav a, .nav-new-trigger {
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.flash {
    box-shadow: 0 10px 20px rgba(16,10,4,.14);
}


.card p,
.notice-card p,
.metric p,
.metric small,
.transaction-card p,
.transaction-card strong,
.workflow-card p,
.summary-tile p,
.filter-panel p {
    color: var(--panel-muted);
}
.card label,
.notice-card label,
.login-card label,
.metric label,
.transaction-card label,
.workflow-card label,
.summary-tile label,
.filter-panel label {
    color: var(--panel-muted);
}
.card .section-header h2,
.transaction-card .section-header h2,
.filter-panel h3,
.card h3,
.card strong,
.transaction-card summary strong,
.detail-header h2,
.detail-amount {
    color: var(--panel-text);
}
.card a,
.workflow-card a,
.transaction-card a,
.filter-panel a {
    color: #f0c86b;
}
.card .button,
.notice-card .button,
.metric .button,
.transaction-card .button,
.workflow-card .button,
.summary-tile .button,
.filter-panel .button {
    color: #2f220f;
}
.login-card {
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), #4f3920;
}
.login-card .brand strong,
.login-card h1,
.login-card h2 {
    color: var(--panel-text);
}
.login-card .brand small,
.login-card p,
.login-card .muted {
    color: var(--panel-muted);
}
.metric-grid .metric,
.workflow-grid .workflow-card,
.status-summary .summary-tile,
.quick-form-grid > *,
.queue-grid a,
.transaction-card,
.history-row,
.detail-grid div {
    box-shadow: 0 8px 18px rgba(12, 8, 3, .18);
}


/* Final UI pass: unify all tiles/subtiles as dark panels with light text */
:root {
    --page-bg: #594124;
    --panel-strong: #4a351e;
    --panel-mid: #584125;
    --panel-soft-override: #62492a;
    --panel-edge: #8c6a36;
    --panel-title: #f5ead0;
    --panel-copy: #e2d0ab;
    --panel-copy-soft: #c8b184;
}

body {
    background:
        radial-gradient(circle at 20% 14%, rgba(255,255,255,.03) 0 0.28rem, transparent 0.34rem),
        radial-gradient(circle at 78% 10%, rgba(255,255,255,.02) 0 0.2rem, transparent 0.26rem),
        radial-gradient(circle at 36% 72%, rgba(255,255,255,.018) 0 0.22rem, transparent 0.28rem),
        repeating-linear-gradient(135deg, rgba(255,255,255,.01) 0 2px, rgba(0,0,0,.009) 2px 4px),
        linear-gradient(180deg, #6a5030 0%, #584125 58%, #4b361f 100%);
}

/* Primary panels */
.card,
.notice-card,
.login-card,
.metric,
.transaction-card,
.workflow-card,
.summary-tile,
.filter-panel,
.quick-form-grid > *,
.quick-form-grid details,
.queue-grid a,
.request-source-details,
.history-row,
.detail-grid div,
.audit-card,
.scope-check,
.config-grid div,
.account-edit-form,
.api-key-edit-form,
.report-total,
.nested-form,
.form-page-card,
.detail-json pre,
.audit-json-grid pre,
.user-history,
.user-edit,
.profile-rsns,
.source-app-card,
.api-log-summary .summary-tile,
.api-log-card {
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--panel-strong) !important;
    border-color: var(--panel-edge) !important;
    color: var(--panel-title) !important;
}

/* Secondary nested panels */
.queue-grid a,
.request-source-details,
.history-row,
.detail-grid div,
.audit-card,
.scope-check,
.config-grid div,
.quick-form-grid details,
.report-total,
.detail-json pre,
.audit-json-grid pre {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--panel-mid) !important;
}

/* Text colours on dark tiles */
.card h2, .card h3, .card h4,
.notice-card h2, .notice-card h3,
.metric strong,
.workflow-card strong,
.summary-tile strong,
.transaction-card summary strong,
.detail-header h2,
.detail-amount,
.report-total strong,
.report-grand-total,
.config-grid strong,
.detail-grid strong,
.audit-card strong,
.history-row strong,
.table-wrap strong,
.card strong,
.workflow-card,
.transaction-card,
.summary-tile,
.metric,
.filter-panel,
.quick-form-grid details,
.queue-grid a {
    color: var(--panel-title) !important;
}

.card p,
.notice-card p,
.metric p,
.metric small,
.metric span,
.workflow-card span,
.workflow-card small,
.summary-tile span,
.summary-tile p,
.transaction-card p,
.transaction-card small,
.filter-panel p,
.filter-panel label,
.card label,
.notice-card label,
.metric label,
.transaction-card label,
.workflow-card label,
.summary-tile label,
.quick-form-grid details p,
.queue-grid span,
.history-row small,
.audit-card small,
.audit-json-grid span,
.detail-grid span,
.config-grid span,
.report-total span,
.detail-json summary,
.audit-card summary,
.table-wrap small,
td small {
    color: var(--panel-copy) !important;
}

/* Queue tiles / subtile numbers */
.queue-grid strong,
.metric-grid .metric strong,
.status-summary .summary-tile strong {
    color: #fff2d2 !important;
}

/* Tables as dark subtiles */
.table-wrap {
    border-color: var(--panel-edge) !important;
    background: var(--panel-mid) !important;
}

table {
    background: var(--panel-mid) !important;
    color: var(--panel-title) !important;
}

th {
    background: #71532d !important;
    color: #f0dfbb !important;
    border-bottom-color: var(--panel-edge) !important;
}

td {
    color: var(--panel-title) !important;
    border-bottom-color: rgba(201, 170, 107, .28) !important;
}

tr:hover td {
    background: rgba(255,255,255,.04) !important;
}

.amount { color: #fff1ce !important; }
.right .amount { color: #fff1ce !important; }

/* Forms inside dark tiles */
.card input,
.card select,
.card textarea,
.notice-card input,
.notice-card select,
.notice-card textarea,
.filter-panel input,
.filter-panel select,
.filter-panel textarea,
.login-card input,
.login-card select,
.login-card textarea,
.transaction-card input,
.transaction-card select,
.transaction-card textarea {
    background: #dec594;
    color: #24190d;
    border-color: #8e6b35;
}

/* Buttons/links inside dark tiles stay readable */
.card .button,
.notice-card .button,
.metric .button,
.transaction-card .button,
.workflow-card .button,
.summary-tile .button,
.filter-panel .button,
.quick-form-grid .button,
.table-wrap .button {
    color: #2f220f !important;
}

.card a,
.notice-card a,
.workflow-card a,
.transaction-card a,
.filter-panel a,
.queue-grid a {
    color: #f0c86b;
}

/* Hover states for dark tiles */
.workflow-card:hover,
.queue-grid a:hover,
.status-tabs a:hover,
.status-tabs a.active {
    background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
}

/* Keep top info pills readable but more in-theme */
.user-pill,
.acting-admin-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)), #d0b178 !important;
    color: #281d10 !important;
}
.user-pill strong,
.acting-admin-pill strong { color: #281d10 !important; }

/* Login panel final readability */
.login-card {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), #4d3820 !important;
}
.login-card .brand strong,
.login-card h1,
.login-card h2,
.login-card strong {
    color: var(--panel-title) !important;
}
.login-card .brand small,
.login-card p,
.login-card .muted,
.login-card label {
    color: var(--panel-copy) !important;
}

/* Quick actions / details blocks */
.request-source-details,
.detail-grid div,
.audit-card,
.history-row,
.scope-check {
    box-shadow: 0 8px 18px rgba(12, 8, 3, .18);
}


/* Final small UI fixes: readable danger zones, status tabs, and nested sand panels */
.danger-zone,
details.danger-zone {
    margin-top: .9rem;
    border: 1px solid #a85a3a !important;
    border-radius: .85rem;
    padding: .8rem .9rem !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), #4f271d !important;
    color: #f6dfcf !important;
}
.danger-zone h2,
.danger-zone h3,
.danger-zone strong,
.danger-zone summary {
    color: #ffd9c8 !important;
}
.danger-zone p,
.danger-zone .muted,
.danger-zone label,
.danger-zone small {
    color: #e8c2b0 !important;
}
.danger-zone textarea,
.danger-zone input,
.danger-zone select {
    background: #e2c79a !important;
    color: #24190d !important;
    border-color: #b16d47 !important;
}
.danger-zone .button.danger {
    background: linear-gradient(180deg, #c35b3a, #8f3824) !important;
    border-color: #d78363 !important;
    color: #fff3ec !important;
}

.status-tabs {
    gap: .5rem;
}
.status-tabs a,
.report-tabs a {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), #4f3920 !important;
    border: 1px solid #8c6a36 !important;
    color: #f0dfbb !important;
    box-shadow: 0 4px 10px rgba(12, 8, 3, .14);
}
.status-tabs a:hover,
.status-tabs a:focus,
.report-tabs a:hover,
.report-tabs a:focus {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), #614827 !important;
    border-color: #c79b44 !important;
    color: #fff2d2 !important;
    text-decoration: none;
}
.status-tabs a.active,
.report-tabs a.active {
    background: linear-gradient(180deg, #d6b65e, #b8892d) !important;
    border-color: #f0c86b !important;
    color: #24190d !important;
}

/* Catch remaining old sandy subtiles and keep their text readable. */
.queue-grid a,
.quick-form-grid details,
.request-source-details,
.history-row,
.detail-grid div,
.audit-card,
.scope-check,
.config-grid div,
.report-total,
.notice-inline,
.pill,
.table-wrap,
table,
tbody,
thead,
tr,
.api-log-card,
.source-app-card {
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), #4f3920 !important;
    border-color: #8c6a36 !important;
    color: #f5ead0 !important;
}
th {
    background: #6b4e2a !important;
    color: #f3e3c3 !important;
}
td {
    background: transparent !important;
    color: #f5ead0 !important;
}
td small,
.table-wrap small,
.queue-grid span,
.quick-form-grid details p,
.request-source-details p,
.history-row small,
.detail-grid span,
.audit-card small,
.config-grid span,
.report-total span,
.notice-inline,
.pill {
    color: #dfcaa2 !important;
}
.queue-grid strong,
.quick-form-grid details strong,
.detail-grid strong,
.config-grid strong,
.report-total strong,
.amount {
    color: #fff1ce !important;
}
tr:hover td {
    background: rgba(255,255,255,.045) !important;
}

/* When account switching is locked, the acting-admin pill is intentionally hidden in PHP.
   Keep this class only for installations where switching is enabled and custom markup is added later. */
.acting-admin-pill.locked {
    display: none !important;
}