/*
 * Frontend / Agent + Premium Auth design layer
 * - Premium indigo design language for Agent surfaces
 * - Premium shell, card, and segmented portal switch shared by every
 *   user / merchant / agent auth page
 * All values come from public/frontend/css/_variables.css tokens.
 */

/* ===================================================================
 * 1. Agent buttons
 * =================================================================*/
.btn-agent {
    color: var(--front-color-white);
    background: var(--front-gradient-agent);
    border: 1px solid var(--front-color-agent);
    box-shadow: var(--front-shadow-agent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-agent:hover,
.btn-agent:focus,
.btn-agent:active {
    color: var(--front-color-white);
    background: var(--front-color-agent-hover);
    border-color: var(--front-color-agent-hover);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-agent:disabled,
.btn-agent.disabled {
    opacity: 0.65;
    transform: none;
}

.dashboard-user-layout .btn-agent {
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    border-color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    box-shadow: 0 10px 20px -16px rgba(var(--front-color-primary-rgb), 0.72);
}

.dashboard-user-layout .btn-agent:hover,
.dashboard-user-layout .btn-agent:focus,
.dashboard-user-layout .btn-agent:active {
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-hover, var(--front-color-primary-hover, var(--main-color, var(--front-color-primary))));
    border-color: var(--dashboard-primary-button-hover, var(--front-color-primary-hover, var(--main-color, var(--front-color-primary))));
    box-shadow: 0 10px 20px -17px rgba(var(--front-color-primary-rgb), 0.68);
    filter: none;
    transform: none;
}

.dashboard-user-layout .btn-light-agent,
.dashboard-user-layout .btn-outline-agent,
.dashboard-user-layout .btn-counter-account-edit {
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: rgba(var(--front-color-primary-rgb), 0.08);
    border-color: rgba(var(--front-color-primary-rgb), 0.18);
    box-shadow: none;
}

.dashboard-user-layout .btn-light-agent:hover,
.dashboard-user-layout .btn-light-agent:focus,
.dashboard-user-layout .btn-outline-agent:hover,
.dashboard-user-layout .btn-outline-agent:focus,
.dashboard-user-layout .btn-counter-account-edit:hover,
.dashboard-user-layout .btn-counter-account-edit:focus {
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    border-color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
}

.dashboard-user-layout .btn-counter-account-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.25rem;
    padding-inline: 0.85rem;
    border-radius: 8px;
    font-weight: 800;
    text-transform: none;
}

.btn-outline-agent {
    color: var(--front-color-agent);
    background: transparent;
    border: 1px solid var(--front-color-agent);
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-outline-agent:hover,
.btn-outline-agent:focus {
    color: var(--front-color-white);
    background: var(--front-color-agent);
    border-color: var(--front-color-agent);
}

.btn-light-agent {
    color: var(--front-color-agent);
    background: var(--front-color-agent-soft);
    border: 1px solid var(--front-color-agent-soft-border);
}

.btn-light-agent:hover,
.btn-light-agent:focus {
    color: var(--front-color-white);
    background: var(--front-color-agent);
    border-color: var(--front-color-agent);
}

/* ===================================================================
 * 2. Agent text + background helpers
 * =================================================================*/
.text-agent { color: var(--front-color-agent) !important; }
.text-agent-dark { color: var(--front-color-agent-dark) !important; }

.bg-agent { background: var(--front-color-agent) !important; color: var(--front-color-white); }
.bg-agent-soft { background: var(--front-color-agent-soft) !important; color: var(--front-color-agent-dark); }
.bg-agent-gradient { background: var(--front-gradient-agent) !important; color: var(--front-color-white); }

/* ===================================================================
 * 3. Agent badges
 * =================================================================*/
.badge-agent {
    color: var(--front-color-white);
    background: var(--front-gradient-agent);
    padding: 0.45em 0.9em;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: var(--front-shadow-agent);
}

.badge-agent-soft {
    color: var(--front-color-agent-dark);
    background: var(--front-color-agent-soft);
    border: 1px solid var(--front-color-agent-soft-border);
    padding: 0.4em 0.85em;
    border-radius: 999px;
    font-weight: 600;
}

/* ===================================================================
 * 4. Premium auth shell — wraps every auth page (user / merchant / agent)
 *
 *    Two layout modes:
 *    .auth-shell           → flex-centered (login, forgot, reset)
 *    .auth-shell.is-long   → block flow (register) — always scrolls
 *
 *    Long pages deliberately use block layout instead of flex so the
 *    document body grows naturally and the page is always scrollable.
 * =================================================================*/
.auth-shell {
    min-height: 100vh;
    width: 100%;
    padding: 1.6rem 1rem;
    position: relative;
    /* Do NOT set overflow on the shell — the body handles scroll. Setting
     * overflow-x here implicitly turned overflow-y into 'auto', which made
     * the shell its own scroll container and prevented the page from
     * growing for tall content (e.g. merchant register). */
    background:
        radial-gradient(circle at 20% 10%, rgba(var(--front-color-primary-rgb), 0.08), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(var(--front-color-agent-rgb), 0.07), transparent 40%),
        var(--front-color-bg);
}

/* Centered card on every shell — works in both flex and block modes */
.auth-shell > .auth-card {
    margin-left: auto;
    margin-right: auto;
}

/* Short pages: flex-centered vertically + horizontally */
.auth-shell:not(.is-long) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Long pages (registration): plain block layout — body grows, page scrolls */
.auth-shell.is-long {
    display: block;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .auth-shell.is-long {
        padding-top: 2.2rem;
        padding-bottom: 2.2rem;
    }
}

/* Mobile-app feel under 576px */
@media (max-width: 575.98px) {
    .auth-shell {
        padding: 0.75rem 0.65rem;
    }

    .auth-shell:not(.is-long) {
        justify-content: flex-start;
    }

    .auth-shell.is-long {
        padding-top: 0.85rem;
        padding-bottom: 1rem;
    }
}

/* ===================================================================
 * 5. Premium auth card (mobile app feel on small, contained on desktop)
 * =================================================================*/
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--front-color-card);
    border: 1px solid var(--front-color-border);
    border-radius: 18px;
    box-shadow: 0 16px 42px -28px rgba(var(--front-color-black-rgb), 0.22);
    padding: 1.5rem 1.45rem 1.45rem;
    position: relative;
    overflow: hidden;
}

.auth-card.is-wide { max-width: 558px; }
.auth-card.is-x-wide { max-width: 720px; }

@media (max-width: 575.98px) {
    .auth-card {
        border-radius: 15px;
        padding: 1.1rem 0.95rem;
    }
}

/* Top brand stripe — picks up role accent via .is-* modifier */
.auth-card.has-accent::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    pointer-events: none;
}

.auth-card.has-accent.is-user::before {
    background: var(--front-gradient-user);
}

.auth-card.has-accent.is-merchant::before {
    background: var(--front-gradient-merchant);
}

.auth-card.has-accent.is-agent::before {
    background: var(--front-gradient-agent);
}

/* Auth header block */
.auth-card .auth-head {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 1.1rem;
    padding-top: 0.05rem;
}

.auth-card .auth-head .auth-logo {
    display: block;
    height: 40px;
    max-height: 40px;
    max-width: 40px;
    object-fit: cover;
    object-position: left center;
    width: 40px;
    margin: 0 auto 0.5rem;
}

.auth-card .auth-head .auth-title {
    font-size: var(--front-font-xl);
    font-weight: 800;
    margin: 0 0 0.22rem;
    color: var(--front-color-heading);
    letter-spacing: 0;
}

.auth-card .auth-head .auth-title.is-agent {
    color: var(--front-color-agent);
}

.auth-card.is-user .auth-head .auth-title {
    color: var(--front-color-user);
}

.auth-card.is-merchant .auth-head .auth-title {
    color: var(--front-color-merchant);
}

.auth-card .auth-head .auth-subtitle {
    font-size: var(--front-font-sm);
    color: var(--front-color-muted);
    margin: 0 0 0.65rem;
    line-height: 1.45;
}

/* Auth role badge — pill */
.auth-card .auth-head .auth-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    font-size: var(--front-font-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (max-width: 575.98px) {
    .auth-card .auth-head {
        margin-bottom: 1rem;
        padding-top: 0.12rem;
    }

    .auth-card .auth-head .auth-logo {
        height: 38px;
        max-height: 38px;
        max-width: 38px;
        width: 38px;
        margin-bottom: 0.45rem;
    }

    .auth-card .auth-head .auth-title {
        line-height: 1.25;
        margin-bottom: 0.25rem;
    }
}

.auth-role-badge.is-user {
    color: var(--front-color-user);
    background: rgba(var(--front-color-user-rgb), 0.1);
    border: 1px solid rgba(var(--front-color-user-rgb), 0.2);
}

.auth-role-badge.is-merchant {
    color: var(--front-color-merchant);
    background: rgba(var(--front-color-merchant-rgb), 0.1);
    border: 1px solid rgba(var(--front-color-merchant-rgb), 0.2);
}

.auth-role-badge.is-agent {
    color: var(--front-color-white);
    background: var(--front-gradient-agent);
    box-shadow: var(--front-shadow-agent);
}

/* Form polish inside auth card — softer corners, premium focus */
.auth-card .form-control,
.auth-card .form-select,
.auth-card .input-group-text {
    min-height: 42px;
    border-radius: 9px;
    border-color: var(--front-color-border);
    font-size: var(--front-font-base);
}

.auth-card .form-control,
.auth-card .form-select {
    padding: 0.52rem 0.72rem;
}

.auth-card .form-label {
    color: var(--front-color-heading);
    font-size: var(--front-font-base);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.42rem;
}

.auth-card .mb-3 {
    margin-bottom: 0.85rem !important;
}

.auth-card .my-3 {
    margin-top: 0.68rem !important;
    margin-bottom: 0.82rem !important;
}

.auth-card .row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0.82rem;
}

.auth-card .input-group > .form-control,
.auth-card .input-group > .form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.auth-card .input-group > .input-group-text:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--front-color-surface);
    justify-content: center;
    min-width: 38px;
    padding-left: 0.62rem;
    padding-right: 0.62rem;
}

.auth-card .input-group > .input-group-text:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.auth-card .form-control:focus,
.auth-card .form-select:focus {
    box-shadow: 0 0 0 0.14rem rgba(var(--front-color-user-rgb), 0.14);
    border-color: var(--front-color-user);
}

.auth-card.is-merchant .form-control:focus,
.auth-card.is-merchant .form-select:focus {
    box-shadow: 0 0 0 0.14rem rgba(var(--front-color-merchant-rgb), 0.14);
    border-color: var(--front-color-merchant);
}

.auth-card.is-agent .form-control:focus,
.auth-card.is-agent .form-select:focus {
    box-shadow: 0 0 0 0.14rem rgba(var(--front-color-agent-rgb), 0.14);
    border-color: var(--front-color-agent);
}

/* Section heading inside auth card (e.g. "Personal Information") */
.auth-card .auth-section-heading {
    font-size: var(--front-font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--front-color-muted);
    margin: 0.35rem 0 0.65rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--front-color-border-soft);
}

.auth-card.is-agent .auth-section-heading {
    color: var(--front-color-agent);
    border-bottom-color: var(--front-color-agent-soft-border);
}

/* Submit button stretches full width inside auth card — standard height */
.auth-card .btn-submit-auth {
    width: 100%;
    min-height: 40px;
    border-radius: 9px;
    padding: 0.45rem 1rem;
    font-size: var(--front-font-base);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.35;
    box-shadow: 0 7px 18px -14px rgba(var(--front-color-black-rgb), 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.auth-card .btn-submit-auth:hover {
    transform: none;
    filter: brightness(1.04);
    box-shadow: 0 8px 18px -15px rgba(var(--front-color-black-rgb), 0.45);
}

.auth-card .btn-submit-auth.mt-4 {
    margin-top: 1rem !important;
}

.auth-card.is-user .btn-primary,
.auth-card.is-user .btn-submit-auth {
    background: var(--front-gradient-user);
    border-color: var(--front-color-user);
    color: var(--front-color-white);
    box-shadow: var(--front-shadow-user);
}

.auth-card.is-user .btn-primary:hover,
.auth-card.is-user .btn-submit-auth:hover {
    background: var(--front-color-user-hover);
    border-color: var(--front-color-user-hover);
    color: var(--front-color-white);
}

.auth-card.is-user .text-primary {
    color: var(--front-color-user) !important;
}

.auth-card.is-merchant .btn-success,
.auth-card.is-merchant .btn-submit-auth {
    background: var(--front-gradient-merchant);
    border-color: var(--front-color-merchant);
    color: var(--front-color-white);
    box-shadow: var(--front-shadow-merchant);
}

.auth-card.is-merchant .btn-success:hover,
.auth-card.is-merchant .btn-submit-auth:hover {
    background: var(--front-color-merchant-hover);
    border-color: var(--front-color-merchant-hover);
    color: var(--front-color-white);
}

.auth-card.is-merchant .text-success {
    color: var(--front-color-merchant) !important;
}

/* Auth divider line + helper text */
.auth-card .auth-divider {
    border-top: 1px solid var(--front-color-border-soft);
    margin: 0.9rem 0 0.68rem;
}

.auth-card .auth-helper-text {
    text-align: center;
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.48rem;
}

.auth-card > p.text-center {
    color: var(--front-color-text);
    font-size: var(--front-font-base);
    line-height: 1.4;
    margin-top: 1rem !important;
    margin-bottom: 0.55rem !important;
}

/* ===================================================================
 * 6. Premium portal switch — compact segmented pill
 *    (Three connected pills inside one rounded container.)
 * =================================================================*/
.auth-portal-switch {
    display: flex;
    background: var(--front-color-surface);
    border: 1px solid var(--front-color-border);
    border-radius: 999px;
    padding: 0.22rem;
    gap: 0.18rem;
}

.auth-portal-switch .portal-tile {
    flex: 1 1 33%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 34px;
    padding: 0.38rem 0.45rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--front-color-muted);
    background: transparent;
    border: 0;
    font-weight: 600;
    font-size: var(--front-font-xs);
    letter-spacing: 0.01em;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.auth-portal-switch .portal-tile i {
    font-size: var(--front-font-base);
    line-height: 1;
}

.auth-portal-switch .portal-tile:hover {
    color: var(--front-color-text);
    background: var(--front-color-card);
}

/* Active states pick up role color */
.auth-portal-switch .portal-tile.is-user.is-active {
    background: var(--front-gradient-user);
    color: var(--front-color-white);
    box-shadow: 0 5px 12px -8px rgba(var(--front-color-user-rgb), 0.48);
    transform: none;
}

.auth-portal-switch .portal-tile.is-merchant.is-active {
    background: var(--front-gradient-merchant);
    color: var(--front-color-white);
    box-shadow: 0 5px 12px -8px rgba(var(--front-color-merchant-rgb), 0.48);
    transform: none;
}

.auth-portal-switch .portal-tile.is-agent.is-active {
    background: var(--front-gradient-agent);
    color: var(--front-color-white);
    box-shadow: 0 5px 12px -8px rgba(var(--front-color-agent-rgb), 0.48);
    transform: none;
}

/* On very small phones use shorter labels — handled by HTML d-sm-inline + d-inline d-sm-none switches */
@media (max-width: 575.98px) {
    .auth-portal-switch {
        padding: 0.18rem;
    }

    .auth-portal-switch .portal-tile {
        min-height: 32px;
        padding: 0.36rem 0.3rem;
        font-size: var(--front-font-2xs);
        gap: 0.26rem;
    }

    .auth-portal-switch .portal-tile i {
        font-size: var(--front-font-sm);
    }
}

/* ===================================================================
 * 7. Agent register premium hero
 * =================================================================*/
.agent-register-hero {
    background: var(--front-gradient-agent);
    color: var(--front-color-white);
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    margin-bottom: 1.25rem;
    box-shadow: var(--front-shadow-agent);
}

.agent-register-hero,
.agent-register-hero p,
.agent-register-hero .hero-eyebrow,
.agent-register-hero .hero-title,
.agent-register-hero .hero-sub {
    color: var(--front-color-white);
}

.agent-register-hero .hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--front-font-2xs);
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 0.3rem;
}

.agent-register-hero .hero-title {
    font-size: var(--front-font-lg);
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.agent-register-hero .hero-sub {
    margin: 0;
    opacity: 0.95;
    font-size: var(--front-font-sm);
    line-height: 1.5;
}

/* ===================================================================
 * 8. Agent dashboard pill button + form focus context
 * =================================================================*/
.btn-edit.btn-edit-agent {
    background: var(--front-gradient-agent);
    color: var(--front-color-white);
    border: 1px solid var(--front-color-agent);
}

.btn-edit.btn-edit-agent:hover {
    background: var(--front-color-agent-hover);
    color: var(--front-color-white);
}

.agent-context .form-control:focus,
.agent-context .form-select:focus {
    border-color: var(--front-color-agent);
    box-shadow: 0 0 0 0.2rem rgba(var(--front-color-agent-rgb), 0.18);
}

/* ===================================================================
 * 9. Hide-on-mobile / show-on-mobile portal labels (for ultra compact)
 * =================================================================*/
.auth-portal-switch .label-full { display: inline; }
.auth-portal-switch .label-short { display: none; }

@media (max-width: 359.98px) {
    .auth-portal-switch .label-full { display: none; }
    .auth-portal-switch .label-short { display: inline; }
}

/* ===================================================================
 * 10. Scroll safety net for auth pages
 *
 *     If any ancestor (theme reset, custom DB-loaded CSS, plugin styles)
 *     accidentally locks the auth-content div to viewport height or
 *     hidden overflow, scroll on long pages dies. The rules below force
 *     the auth wrapper chain back into normal block flow with visible
 *     overflow so the document body can grow with content. The
 *     `body > .auth-content` selector keeps specificity scoped to the
 *     auth-only layout so dashboard pages are not affected.
 * =================================================================*/
body > .auth-content {
    display: block;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow: visible;
    position: static;
}

body > .auth-content > .auth-shell {
    height: auto;
    overflow: visible;
}

body > .auth-content > .auth-shell.is-long {
    display: block;
    height: auto;
    overflow: visible;
}

html.frontend-auth-html {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body.frontend-auth-layout {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
}

/* ===================================================================
 * 11. Agent operations console
 * =================================================================*/
.agent-console {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.agent-console__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.agent-stat,
.agent-action-panel,
.agent-ledger-panel,
.agent-pending-callout {
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    background: var(--front-color-white);
    border-radius: 8px;
}

.agent-stat {
    min-height: 6rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}

.agent-stat__label {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.agent-stat strong {
    color: var(--front-color-heading);
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.2;
}

.agent-action-grid,
.agent-ledger-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.agent-action-panel {
    padding: 1rem;
}

.agent-action-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.agent-action-panel__head h3,
.agent-ledger-panel__head h3 {
    margin: 0;
    color: var(--front-color-heading);
    font-size: 1rem;
    font-weight: 800;
}

.agent-action-panel__head p {
    margin: 0.2rem 0 0;
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
}

.agent-action-icon {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.6rem;
    color: var(--front-color-white);
    background: var(--front-gradient-agent);
    border-radius: 8px;
}

.agent-action-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--front-color-white);
    font-size: 1rem;
    line-height: 1;
}

.agent-action-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.agent-pending-callout {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--front-color-agent-soft);
    color: var(--front-color-agent-dark);
}

.agent-pending-callout i {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    color: var(--front-color-agent);
    background: var(--front-color-white);
    border-radius: 8px;
}

.agent-pending-callout strong,
.agent-pending-callout span {
    display: block;
}

.agent-pending-callout span {
    margin-top: 0.15rem;
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
}

.agent-ledger-panel {
    padding: 1rem;
}

.agent-ledger-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.agent-ledger-panel__head span {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--front-color-agent);
    background: var(--front-color-agent-soft);
    border-radius: 999px;
    font-weight: 800;
}

.agent-ledger-row {
    min-height: 4.25rem;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(var(--front-color-primary-rgb), 0.08);
}

.agent-ledger-row:first-of-type {
    border-top: 0;
}

.agent-ledger-row__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--front-color-white);
    border-radius: 8px;
}

.agent-ledger-row strong,
.agent-ledger-row span {
    display: block;
}

.agent-ledger-row strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
}

.agent-ledger-row span {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
}

@media (max-width: 991.98px) {
    .agent-console__stats,
    .agent-action-grid,
    .agent-ledger-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .agent-console__stats,
    .agent-action-grid,
    .agent-ledger-grid {
        grid-template-columns: 1fr;
    }

    .agent-ledger-row {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .agent-ledger-row .text-end {
        grid-column: 2;
        text-align: left !important;
    }
}

/* ===================================================================
 * 12. Single-account agent workspace
 * =================================================================*/
.agent-application {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.agent-application-hero,
.agent-command-panel,
.agent-application-note,
.agent-field-summary,
.agent-account-card {
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 8px;
    background: var(--front-color-white);
}

.agent-application-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-color: rgba(var(--front-color-agent-rgb), 0.16);
    background:
        linear-gradient(135deg, rgba(var(--front-color-agent-rgb), 0.1), rgba(var(--front-color-primary-rgb), 0.035)),
        var(--front-color-white);
    box-shadow: 0 12px 26px -24px rgba(var(--front-color-agent-rgb), 0.45);
}

.agent-application-hero__intro {
    min-width: 0;
    max-width: 38rem;
}

.agent-application-hero__eyebrow,
.agent-command-panel__eyebrow,
.agent-section-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--front-color-agent);
    font-size: var(--front-font-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.agent-application-hero h2,
.agent-command-panel h2 {
    color: var(--front-color-heading);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0.3rem 0 0.28rem;
}

.agent-application-hero p,
.agent-command-panel p {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    line-height: 1.5;
    margin: 0;
    max-width: 46rem;
}

.agent-process-rail {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.agent-process-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 7.4rem;
    min-height: 3.25rem;
    padding: 0.5rem 0.58rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--front-color-agent-rgb), 0.14);
    background: rgba(var(--front-color-white-rgb), 0.78);
}

.agent-process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(100% + 0.15rem);
    top: 50%;
    width: 0.25rem;
    height: 1px;
    background: rgba(var(--front-color-agent-rgb), 0.28);
}

.agent-process-step span {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.75rem;
    border-radius: 8px;
    color: var(--front-color-agent);
    background: var(--front-color-agent-soft);
    font-weight: 800;
    line-height: 1;
}

.agent-process-step.is-active span {
    color: var(--front-color-white);
    background: var(--front-color-agent);
}

.agent-process-step strong,
.agent-process-step small {
    display: block;
    line-height: 1.2;
}

.agent-process-step strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-xs);
    font-weight: 800;
}

.agent-process-step small {
    color: var(--front-color-muted);
    font-size: var(--front-font-2xs);
    margin-top: 0.18rem;
}

.agent-application-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(5.4rem, 1fr));
    gap: 0.5rem;
    min-width: min(100%, 18rem);
}

.agent-application-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-height: 5.2rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(var(--front-color-white-rgb), 0.78);
    border: 1px solid rgba(var(--front-color-agent-rgb), 0.14);
}

.agent-application-step span {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--front-color-white);
    background: var(--front-color-agent);
    font-weight: 800;
    line-height: 1;
}

.agent-application-step strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
}

.agent-application-note {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    min-height: 0;
    background: rgba(var(--front-color-agent-rgb), 0.07);
    border-color: rgba(var(--front-color-agent-rgb), 0.12);
}

.agent-application-note__icon {
    width: 2.05rem;
    height: 2.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.05rem;
    color: var(--front-color-white);
    background: var(--front-color-agent);
    border-radius: 8px;
    box-shadow: 0 8px 18px -14px rgba(var(--front-color-agent-rgb), 0.9);
    overflow: hidden;
    text-align: center;
}

.agent-application-note__icon i {
    color: var(--front-color-white) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    margin: 0;
}

.agent-application-note__icon i::before {
    display: block;
    line-height: 1;
}

.agent-upload-hint i {
    color: var(--front-color-agent);
}

.agent-application-logo .avatar-upload {
    min-height: 9.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px dashed rgba(var(--front-color-agent-rgb), 0.24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--front-color-agent-rgb), 0.045), rgba(var(--front-color-primary-rgb), 0.025)),
        var(--front-color-white);
    overflow: hidden;
}

.agent-application-logo .avatar-upload::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.38), rgba(var(--front-color-white-rgb), 0));
}

.agent-application-logo .avatar-edit {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 2;
}

.agent-application-logo .avatar-edit label {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--front-color-agent-rgb), 0.18);
    background: var(--front-color-white);
    border-radius: 8px;
    box-shadow: 0 8px 18px -16px rgba(var(--front-color-black-rgb), 0.45);
}

.agent-application-logo .avatar-preview {
    position: relative;
    z-index: 1;
    width: 6.35rem;
    height: 6.35rem;
    border-radius: 8px;
    background: rgba(var(--front-color-white-rgb), 0.76);
    border: 1px solid rgba(var(--front-color-agent-rgb), 0.1);
    box-shadow: 0 12px 24px -22px rgba(var(--front-color-agent-rgb), 0.7);
}

.agent-application-logo .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-size: 82%;
    background-repeat: no-repeat;
    background-position: center;
}

.agent-application-main {
    display: grid;
    grid-template-columns: minmax(14.5rem, 18rem) minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.9rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(var(--front-color-primary-rgb), 0.025), rgba(var(--front-color-white-rgb), 0)),
        var(--front-color-white);
}

.agent-application-main--edit {
    grid-template-columns: minmax(13rem, 16.5rem) minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.78rem;
}

.agent-application-logo,
.agent-application-fields {
    min-width: 0;
}

.agent-application-logo {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.agent-logo-uploader {
    min-width: 0;
}

.agent-application-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.agent-field-title span,
.agent-field-title strong,
.agent-field-title small {
    display: block;
}

.agent-field-title span {
    color: var(--front-color-agent);
    font-size: var(--front-font-2xs);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.agent-field-title strong {
    color: var(--front-color-heading);
    font-size: 0.95rem;
    font-weight: 800;
    margin-top: 0.15rem;
}

.agent-field-title small,
.agent-upload-hint span {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
}

.agent-upload-hint {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.48rem 0.62rem;
    border-radius: 8px;
    background: var(--front-color-surface);
    border: 1px solid var(--front-color-border-soft);
}

.agent-demo-request {
    display: grid;
    gap: 0.18rem;
    padding: 0.62rem 0.68rem;
    border: 1px solid rgba(var(--front-color-agent-rgb), 0.12);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--front-color-agent-rgb), 0.055), rgba(20, 184, 166, 0.035)),
        var(--front-color-white);
}

.agent-demo-request span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--front-color-agent);
    font-size: var(--front-font-2xs);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.agent-demo-request strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
    font-weight: 800;
    line-height: 1.25;
}

.agent-demo-request small {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.agent-currency-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.agent-currency-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-currency-grid--edit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-currency-card__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.agent-currency-card {
    min-height: 3.65rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.58rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 8px;
    background: var(--front-color-white);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.agent-currency-card:hover {
    border-color: rgba(var(--front-color-agent-rgb), 0.34);
    background: rgba(var(--front-color-agent-rgb), 0.035);
}

.agent-currency-card__mark {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.7rem;
    color: transparent;
    border: 1px solid rgba(var(--front-color-agent-rgb), 0.18);
    border-radius: 8px;
    background: var(--front-color-surface);
}

.agent-currency-card__mark i {
    font-size: 0.75rem;
    line-height: 1;
}

.agent-currency-card__body {
    min-width: 0;
}

.agent-currency-card__body strong,
.agent-currency-card__body small {
    display: block;
}

.agent-currency-card__body strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-xs);
    font-weight: 800;
}

.agent-currency-card__body small {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    margin-top: 0.08rem;
    overflow-wrap: anywhere;
}

.agent-currency-card__input:checked + .agent-currency-card {
    border-color: rgba(var(--front-color-agent-rgb), 0.46);
    background: rgba(var(--front-color-agent-rgb), 0.08);
    box-shadow: 0 10px 20px -19px rgba(var(--front-color-agent-rgb), 0.7);
}

.agent-currency-card__input:checked + .agent-currency-card .agent-currency-card__mark {
    color: var(--front-color-white);
    background: var(--front-color-agent);
    border-color: var(--front-color-agent);
}

.agent-application-note > div > strong,
.agent-application-note > div > span {
    display: block;
}

.agent-application-note > div > strong {
    color: var(--front-color-heading);
    font-weight: 800;
}

.agent-application-note > div > span {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    line-height: 1.45;
    margin-top: 0.12rem;
}

.agent-application-note--compact {
    padding: 0.62rem 0.68rem;
}

.agent-application-form {
    display: block;
}

.agent-application-form .form-label {
    color: var(--front-color-heading);
    font-size: var(--front-font-xs);
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.agent-application-form .form-control,
.agent-application-form .form-select {
    min-height: 2.65rem;
    border-color: rgba(var(--front-color-agent-rgb), 0.16);
    border-radius: 8px;
    background-color: var(--front-color-white);
}

.agent-application-form textarea.form-control {
    min-height: 5.8rem;
    resize: vertical;
}

.agent-application-form .form-control:focus,
.agent-application-form .form-select:focus {
    border-color: var(--front-color-agent);
    box-shadow: 0 0 0 0.18rem rgba(var(--front-color-agent-rgb), 0.12);
}

.agent-application-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 0.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(var(--front-color-primary-rgb), 0.08);
}

.agent-application-actions strong,
.agent-application-actions span {
    display: block;
}

.agent-application-actions strong {
    color: var(--front-color-heading);
    font-weight: 800;
}

.agent-application-actions span {
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
    margin-top: 0.12rem;
}

.agent-application-actions .btn {
    min-height: 2.55rem;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
}

.dashboard-user-layout .agent-service-card {
    border-color: rgba(var(--front-color-primary-rgb), 0.1);
    box-shadow: none;
}

.agent-command-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.agent-command-panel--collapsible {
    display: block;
}

.agent-command-panel__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
}

.agent-command-panel__summary::-webkit-details-marker {
    display: none;
}

.agent-command-panel__summary:focus-visible {
    outline: 2px solid rgba(var(--front-color-primary-rgb), 0.28);
    outline-offset: 4px;
    border-radius: 12px;
}

.agent-command-panel__identity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.agent-command-panel__logo,
.agent-command-panel__empty-icon {
    width: 4.25rem;
    height: 4.25rem;
    flex: 0 0 4.25rem;
    border-radius: 8px;
}

.agent-command-panel__logo {
    object-fit: cover;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    background: var(--front-color-white);
}

.agent-command-panel__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--front-color-agent);
    background: var(--front-color-agent-soft);
    font-size: 1.45rem;
}

.agent-command-panel__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.3rem;
    padding: 0 0.72rem;
    flex: 0 0 auto;
    border-radius: 999px;
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: rgba(var(--front-color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    font-size: var(--front-font-xs);
    font-weight: 700;
    line-height: 1;
}

.agent-command-panel__toggle i {
    font-size: 0.72rem;
    transition: transform 0.18s ease;
}

.agent-command-panel__toggle-label--open,
.agent-command-panel--collapsible[open] .agent-command-panel__toggle-label--closed {
    display: none;
}

.agent-command-panel--collapsible[open] .agent-command-panel__toggle-label--open {
    display: inline;
}

.agent-command-panel--collapsible[open] .agent-command-panel__toggle i {
    transform: rotate(180deg);
}

.agent-command-panel__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(5.6rem, 1fr));
    gap: 0.5rem;
    width: min(100%, 31rem);
}

.agent-command-panel--collapsible .agent-command-panel__facts {
    width: 100%;
    margin-top: 0.85rem;
}

@media (min-width: 576px) {
    .agent-command-panel--collapsible:not([open]) > .agent-command-panel__facts {
        display: grid;
    }

    .agent-command-panel--collapsible .agent-command-panel__summary {
        cursor: default;
    }

    .agent-command-panel--collapsible .agent-command-panel__toggle {
        display: none;
    }
}

.agent-command-panel__facts div {
    min-height: 4.25rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--front-color-surface);
    border: 1px solid var(--front-color-border-soft);
}

.agent-command-panel__facts span,
.agent-account-card__meta span {
    display: block;
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    font-weight: 700;
}

.agent-command-panel__facts strong,
.agent-account-card__meta strong {
    display: block;
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
    font-weight: 800;
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
}

.agent-command-panel--success {
    border-color: rgba(25, 135, 84, 0.22);
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.08), var(--front-color-white));
}

.agent-command-panel--info,
.agent-command-panel--neutral {
    border-color: rgba(var(--front-color-agent-rgb), 0.18);
}

.agent-command-panel--warning {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), var(--front-color-white));
}

.agent-command-panel--danger {
    border-color: rgba(220, 53, 69, 0.22);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.08), var(--front-color-white));
}

.agent-field-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.75rem;
    background: var(--front-color-surface);
}

.agent-field-summary--large {
    min-height: 6.25rem;
}

.agent-field-summary--compact {
    min-height: 0;
    padding: 0.62rem;
    background:
        linear-gradient(135deg, rgba(var(--front-color-agent-rgb), 0.08), rgba(var(--front-color-primary-rgb), 0.035)),
        var(--front-color-white);
}

.agent-field-summary__icon {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    flex: 0 0 2.4rem;
    color: var(--front-color-white);
    background: var(--front-color-agent);
    border-radius: 8px;
    overflow: hidden;
}

.agent-field-summary__icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--front-color-white);
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

.agent-field-summary__icon svg,
.agent-field-summary__svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.18rem !important;
    height: 1.18rem !important;
    display: block;
    color: var(--front-color-white);
    stroke: currentColor;
    margin: 0;
    transform: translate(-50%, -50%);
}

.agent-field-summary__icon i::before {
    display: block;
    line-height: 1;
}

.agent-field-summary__logo {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 2.4rem;
    object-fit: contain;
    padding: 0.2rem;
    border: 1px solid rgba(var(--front-color-agent-rgb), 0.14);
    border-radius: 8px;
    background: var(--front-color-white);
}

.agent-field-summary strong,
.agent-field-summary span {
    display: block;
}

.agent-field-summary strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
    font-weight: 800;
}

.agent-field-summary span {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.agent-form-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--front-color-agent-dark);
    background: var(--front-color-agent-soft);
    border: 1px solid var(--front-color-agent-soft-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    font-size: var(--front-font-sm);
}

.agent-field-help {
    display: block;
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    line-height: 1.4;
    margin-top: 0.32rem;
}

.agent-otp-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.55rem;
    margin-top: 1rem;
}

.agent-otp-actions .btn {
    min-height: 2.6rem;
}

.agent-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.agent-section-head h3 {
    color: var(--front-color-heading);
    font-size: 1rem;
    font-weight: 800;
    margin: 0.15rem 0 0;
}

.agent-account-card {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 5.25rem;
    padding: 0.85rem;
}

.agent-account-card img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
}

.agent-account-card__main strong,
.agent-account-card__main span {
    display: block;
}

.agent-account-card__main strong {
    color: var(--front-color-heading);
    font-weight: 800;
}

.agent-account-card__main span {
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.agent-account-card__status {
    justify-self: end;
}

@media (max-width: 991.98px) {
    .agent-application-hero,
    .agent-command-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-command-panel__facts {
        width: 100%;
    }

    .agent-process-rail {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .agent-process-step {
        min-width: 0;
    }

    .agent-application-main {
        grid-template-columns: 1fr;
    }

    .agent-currency-grid,
    .agent-currency-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-currency-grid--edit {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .agent-application-steps,
    .agent-command-panel__facts {
        grid-template-columns: 1fr;
    }

    .agent-process-step:not(:last-child)::after {
        display: none;
    }

    .agent-currency-grid,
    .agent-currency-grid--compact,
    .agent-currency-grid--edit {
        grid-template-columns: 1fr;
    }

    .agent-application-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-account-card {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .agent-account-card__meta,
    .agent-account-card__status {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 575.98px) {
    .dashboard-user-layout .agent-service-card {
        margin-bottom: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .dashboard-user-layout .agent-service-card > .card-body,
    .dashboard-user-layout .agent-service-card > .card-main {
        padding: 0.72rem 0.62rem 5.25rem;
        background: var(--front-color-bg);
    }

    .dashboard-user-layout .agent-service-card .user-feature-header {
        margin: 0 0 0.65rem;
        padding: 0.78rem 0.82rem;
        border-radius: 16px;
        box-shadow: none;
    }

    .dashboard-user-layout .agent-service-card .user-feature-header__actions .btn {
        box-shadow: none;
    }

    .agent-application-hero,
    .agent-application-main {
        padding: 0.75rem;
    }

    .agent-process-step {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.32rem;
        min-height: 4rem;
        padding: 0.52rem;
    }

    .agent-process-step span {
        width: 1.55rem;
        height: 1.55rem;
        flex-basis: 1.55rem;
        font-size: var(--front-font-xs);
    }

    .agent-process-step small {
        display: none;
    }

    .agent-application-logo .avatar-upload {
        min-height: 8.25rem;
    }

    .agent-application-logo .avatar-preview {
        width: 5.4rem;
        height: 5.4rem;
    }

    .agent-command-panel--collapsible {
        padding: 0.76rem;
        border-radius: 16px;
        box-shadow: none;
    }

    .agent-command-panel--collapsible .agent-command-panel__summary {
        align-items: center;
        gap: 0.65rem;
    }

    .agent-command-panel__identity {
        align-items: flex-start;
    }

    .agent-command-panel--collapsible .agent-command-panel__identity {
        align-items: center;
        gap: 0.68rem;
    }

    .agent-command-panel__logo,
    .agent-command-panel__empty-icon {
        width: 3.5rem;
        height: 3.5rem;
        flex-basis: 3.5rem;
    }

    .agent-command-panel--collapsible .agent-command-panel__logo,
    .agent-command-panel--collapsible .agent-command-panel__empty-icon {
        width: 3rem;
        height: 3rem;
        flex-basis: 3rem;
        border-radius: 12px;
    }

    .agent-command-panel--collapsible .agent-command-panel__eyebrow {
        font-size: var(--front-font-2xs);
    }

    .agent-command-panel--collapsible h2 {
        font-size: 1rem;
        margin: 0.18rem 0 0.12rem;
    }

    .agent-command-panel--collapsible p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .agent-command-panel__toggle {
        width: 2.28rem;
        min-width: 2.28rem;
        padding: 0;
    }

    .agent-command-panel__toggle-label {
        display: none !important;
    }

    .agent-command-panel--collapsible .agent-command-panel__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.48rem;
        margin-top: 0.7rem;
        padding-top: 0.7rem;
        border-top: 1px solid rgba(var(--front-color-primary-rgb), 0.08);
    }

    .agent-command-panel__facts div {
        min-height: 3.65rem;
        padding: 0.62rem;
        border-radius: 12px;
    }
}

/* ===================================================================
 * Agent tools tabs + static QR cash-out
 * =================================================================*/
.agent-tool-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.42rem;
    margin-bottom: 0.9rem;
    padding: 0.45rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 14px;
    background: rgba(var(--front-color-white-rgb), 0.82);
    box-shadow: none;
    overflow: hidden;
}

.agent-tool-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 2.72rem;
    min-width: 0;
    padding: 0.55rem 0.72rem;
    border-radius: 12px;
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

.agent-tool-tab i {
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.85rem;
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: rgba(var(--front-color-primary-rgb), 0.08);
    border-radius: 10px;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease;
}

.agent-tool-tab span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-tool-tab:hover {
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: rgba(var(--front-color-primary-rgb), 0.07);
}

.agent-tool-tab:hover i {
    background: rgba(var(--front-color-primary-rgb), 0.12);
}

.agent-tool-tab.is-active {
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    box-shadow: none;
}

.agent-tool-tab.is-active i {
    color: var(--front-color-white);
    background: rgba(var(--front-color-white-rgb), 0.18);
}

.agent-tool-tab strong {
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: var(--front-color-white);
    font-size: var(--front-font-2xs);
}

.agent-tool-pane {
    min-width: 0;
}

.agent-console--overview {
    gap: 0;
}

.agent-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    gap: 0.75rem;
}

.agent-overview-panel {
    min-width: 0;
    padding: 0.92rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 8px;
    background: var(--front-color-white);
    box-shadow: 0 14px 32px -30px rgba(var(--front-color-black-rgb), 0.34);
}

.agent-overview-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
    min-width: 0;
    margin-bottom: 0.78rem;
}

.agent-overview-panel__head > div {
    min-width: 0;
    flex: 1 1 auto;
}

.agent-overview-panel__head h3,
.agent-overview-panel__head p {
    margin: 0;
}

.agent-overview-panel__head h3 {
    color: var(--front-color-heading);
    font-size: 1rem;
    font-weight: 850;
}

.agent-overview-panel__head p {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    line-height: 1.45;
    margin-top: 0.16rem;
}

.agent-overview-panel__icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.4rem;
    border-radius: 8px;
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
}

.agent-overview-panel__icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--front-color-white);
    font-size: 1rem;
    line-height: 1;
}

.agent-overview-link {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    flex: 0 0 auto;
    padding: 0.45rem 0.68rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.16);
    border-radius: 8px;
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: rgba(var(--front-color-primary-rgb), 0.045);
    font-size: var(--front-font-xs);
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.agent-overview-link:hover,
.agent-overview-link:focus {
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    transform: translateY(-1px);
}

.agent-overview-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.agent-overview-kpi {
    min-height: 4.65rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.78rem;
    border: 1px solid var(--front-color-border-soft);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.045), rgba(var(--front-color-white-rgb), 0)),
        var(--front-color-surface);
}

.agent-overview-kpi span,
.agent-overview-kpi strong,
.agent-overview-request-row strong,
.agent-overview-request-row span {
    display: block;
}

.agent-overview-kpi span {
    color: var(--front-color-muted);
    font-size: var(--front-font-2xs);
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.agent-overview-kpi strong {
    color: var(--front-color-heading);
    font-size: clamp(1.05rem, 1.6vw, 1.34rem);
    line-height: 1.15;
}

.agent-overview-request-list {
    display: flex;
    flex-direction: column;
}

.agent-overview-request-row {
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 4.1rem;
    padding: 0.68rem 0;
    border-top: 1px solid var(--front-color-border-soft);
}

.agent-overview-request-row:first-child {
    border-top: 0;
    padding-top: 0.2rem;
}

.agent-overview-request-row__icon {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: rgba(var(--front-color-primary-rgb), 0.08);
    border-radius: 8px;
}

.agent-overview-request-row__main {
    min-width: 0;
}

.agent-overview-request-row strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
}

.agent-overview-request-row span {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    overflow-wrap: anywhere;
}

.agent-overview-request-row__amount {
    text-align: right;
}

.agent-qr-workspace,
.agent-qr-checkout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.92fr) minmax(0, 1.08fr);
    gap: 1rem;
    align-items: stretch;
}

.agent-qr-card,
.agent-print-qr-card,
.agent-qr-guide-card,
.agent-qr-checkout__merchant,
.agent-qr-checkout__form,
.agent-pending-qr-panel {
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 8px;
    background: var(--front-color-white);
    box-shadow: none;
}

.agent-qr-card,
.agent-qr-guide-card,
.agent-qr-checkout__merchant,
.agent-qr-checkout__form,
.agent-pending-qr-panel {
    padding: 1rem;
}

.agent-qr-card__body {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.agent-qr-card__icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3rem;
    border-radius: 8px;
    color: var(--front-color-white);
    background: var(--front-gradient-agent);
    font-size: 1.1rem;
}

.agent-qr-card h3,
.agent-qr-guide-card h3,
.agent-qr-checkout h2 {
    margin: 0;
    color: var(--front-color-heading);
    font-size: 1.05rem;
    font-weight: 800;
}

.agent-qr-card p,
.agent-qr-guide-card p,
.agent-qr-checkout p {
    margin: 0.28rem 0 0.85rem;
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
    line-height: 1.5;
}

.agent-pending-qr-panel {
    min-width: 0;
}

.agent-pending-qr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.4rem;
    padding: 0.72rem 0;
    border-top: 1px solid var(--front-color-border-soft);
}

.agent-pending-qr-row:first-of-type {
    border-top: 0;
}

.agent-pending-qr-row__main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.agent-pending-qr-row strong,
.agent-pending-qr-row span {
    display: block;
}

.agent-pending-qr-row strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
}

.agent-pending-qr-row span {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    overflow-wrap: anywhere;
}

.agent-pending-qr-row__amount {
    text-align: right;
}

.agent-print-qr-card {
    padding: 1rem;
    text-align: center;
}

.agent-print-qr-card--merged {
    display: grid;
    grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.agent-print-qr-card__code {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: min(100%, 22rem);
    padding: 1rem;
    border: 1px dashed rgba(var(--front-color-agent-rgb), 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(var(--front-color-agent-rgb), 0.045), rgba(var(--front-color-white-rgb), 0)),
        var(--front-color-white);
}

.agent-print-qr-card__code svg {
    width: min(100%, 16.75rem);
    height: auto;
}

.agent-qr-poster {
    width: min(100%, 24rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 0.78rem;
    padding: 1rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.14);
    border-radius: 8px;
    color: var(--front-color-heading);
    background:
        linear-gradient(180deg, rgba(var(--front-color-primary-rgb), 0.05), rgba(var(--front-color-white-rgb), 0) 48%),
        var(--front-color-white);
    box-shadow: none;
    text-align: center;
}

.agent-qr-poster__top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.62rem;
    border-bottom: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
}

.agent-qr-poster__top span {
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    font-size: var(--front-font-2xs);
    font-weight: 850;
    text-transform: uppercase;
}

.agent-qr-poster__top strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
    font-weight: 850;
}

.agent-qr-poster__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 18.8rem);
    aspect-ratio: 1;
    padding: 0.75rem;
    border: 1px dashed rgba(var(--front-color-primary-rgb), 0.18);
    border-radius: 8px;
    background: var(--front-color-white);
}

.agent-qr-poster__code svg {
    width: 100%;
    height: auto;
}

.agent-qr-poster__identity strong,
.agent-qr-poster__identity span,
.agent-qr-poster__assurance strong,
.agent-qr-poster__assurance span {
    display: block;
}

.agent-qr-poster__identity strong {
    color: var(--front-color-heading);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.25;
}

.agent-qr-poster__identity span {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    margin-top: 0.15rem;
}

.agent-qr-poster__steps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
}

.agent-qr-poster__steps span {
    min-height: 2.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.35rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 8px;
    color: var(--front-color-muted);
    background: var(--front-color-surface);
    font-size: var(--front-font-2xs);
    font-weight: 800;
}

.agent-qr-poster__steps b {
    width: 1.22rem;
    height: 1.22rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.22rem;
    border-radius: 50%;
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    font-size: var(--front-font-2xs);
    line-height: 1;
}

.agent-qr-poster__assurance {
    width: 100%;
    padding: 0.68rem 0.75rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.055), rgba(var(--front-color-white-rgb), 0)),
        var(--front-color-white);
}

.agent-qr-poster__assurance strong {
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    font-size: var(--front-font-2xs);
    font-weight: 850;
    text-transform: uppercase;
}

.agent-qr-poster__assurance span {
    color: var(--front-color-muted);
    font-size: var(--front-font-2xs);
    font-weight: 700;
    margin-top: 0.16rem;
}

.agent-qr-poster-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.agent-qr-poster-info div {
    min-height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.16rem;
    padding: 0.65rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 8px;
    background: var(--front-color-surface);
}

.agent-qr-poster-info span,
.agent-qr-poster-info strong {
    display: block;
}

.agent-qr-poster-info span {
    color: var(--front-color-muted);
    font-size: var(--front-font-2xs);
    font-weight: 850;
    text-transform: uppercase;
}

.agent-qr-poster-info strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-xs);
    font-weight: 850;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.agent-print-qr-card__details {
    min-width: 0;
}

.agent-print-qr-card__details > span {
    display: inline-flex;
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    font-size: var(--front-font-2xs);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.agent-print-qr-card__details h3 {
    color: var(--front-color-heading);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0.25rem 0 0.35rem;
}

.agent-print-qr-card__details p {
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
    line-height: 1.5;
    margin: 0 0 0.85rem;
}

.agent-print-qr-card__caption strong,
.agent-print-qr-card__caption span {
    display: block;
}

.agent-print-qr-card__caption strong {
    color: var(--front-color-heading);
    font-weight: 800;
}

.agent-print-qr-card__caption span,
.agent-qr-guide-card span {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
}

.agent-print-qr-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.agent-print-qr-card__actions form {
    margin: 0;
}

.agent-qr-regenerate-modal .modal-content {
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 8px;
    background: var(--front-color-white);
    box-shadow: none;
    overflow: hidden;
}

.agent-qr-regenerate-modal .modal-header,
.agent-qr-regenerate-modal .modal-footer {
    border-color: rgba(var(--front-color-primary-rgb), 0.1);
}

.agent-qr-regenerate-modal .modal-header {
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.07), rgba(var(--front-color-white-rgb), 0)),
        var(--front-color-white);
}

.agent-qr-regenerate-modal .modal-body {
    padding: 1rem;
}

.agent-qr-regenerate-modal .modal-footer {
    gap: 0.55rem;
    padding: 0.85rem 1rem;
}

.agent-qr-regenerate-modal__title {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
    min-width: 0;
}

.agent-qr-regenerate-modal__title > span {
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.55rem;
    border-radius: 8px;
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
}

.agent-qr-regenerate-modal__title > span i {
    color: var(--front-color-white);
    font-size: 1rem;
    line-height: 1;
}

.agent-qr-regenerate-modal__title strong,
.agent-qr-regenerate-modal__title small,
.agent-qr-regenerate-warning strong,
.agent-qr-regenerate-warning span {
    display: block;
}

.agent-qr-regenerate-modal__title strong {
    color: var(--front-color-heading);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.25;
}

.agent-qr-regenerate-modal__title small {
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    line-height: 1.4;
    margin-top: 0.18rem;
}

.agent-qr-regenerate-warning {
    padding: 0.85rem;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
}

.agent-qr-regenerate-warning strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
    font-weight: 850;
}

.agent-qr-regenerate-warning span {
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
    line-height: 1.55;
    margin-top: 0.24rem;
}

.agent-qr-regenerate-checklist {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.agent-qr-regenerate-checklist div {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.58rem;
    min-height: 2.8rem;
    padding: 0.58rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 8px;
    background: var(--front-color-surface);
}

.agent-qr-regenerate-checklist i {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    font-size: 0.88rem;
    line-height: 1;
}

.agent-qr-regenerate-checklist span {
    color: var(--front-color-heading);
    font-size: var(--front-font-xs);
    font-weight: 750;
    line-height: 1.4;
}

.agent-qr-guide-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.agent-qr-guide-card > span {
    color: var(--front-color-agent);
    font-weight: 800;
    text-transform: uppercase;
}

.agent-qr-checkout__merchant {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.agent-qr-checkout__merchant img {
    width: 4.25rem;
    height: 4.25rem;
    object-fit: contain;
    flex: 0 0 4.25rem;
    padding: 0.22rem;
    border: 1px solid rgba(var(--front-color-agent-rgb), 0.14);
    border-radius: 8px;
    background: var(--front-color-white);
}

.agent-qr-checkout__merchant span {
    display: inline-flex;
    color: var(--front-color-agent);
    font-size: var(--front-font-2xs);
    font-weight: 800;
    text-transform: uppercase;
}

.agent-cashout-checkout {
    min-width: 0;
}

.agent-qr-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.agent-qr-header-actions .btn {
    min-height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    white-space: nowrap;
}

.agent-cashout-counter-panel,
.agent-cashout-form-panel {
    min-width: 0;
}

.agent-cashout-counter-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 25rem;
    padding: 1rem;
    overflow: hidden;
    border-color: rgba(var(--front-color-primary-rgb), 0.16);
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.075), rgba(var(--front-color-agent-rgb), 0.028)),
        var(--front-color-white);
}

.agent-cashout-counter-panel__badge,
.agent-cashout-counter-panel__identity,
.agent-cashout-wallet-strip,
.agent-cashout-checklist {
    position: relative;
    z-index: 1;
}

.agent-cashout-counter-panel__badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.45rem 0.62rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: rgba(var(--front-color-white-rgb), 0.82);
    font-size: var(--front-font-2xs);
    font-weight: 850;
    line-height: 1;
}

.agent-cashout-counter-panel__badge span {
    color: currentColor;
    font-size: inherit;
    text-transform: uppercase;
}

.agent-cashout-counter-panel__identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.agent-cashout-counter-panel__identity img {
    width: 4.7rem;
    height: 4.7rem;
    flex: 0 0 4.7rem;
}

.agent-cashout-counter-panel__identity span {
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
}

.agent-cashout-counter-panel__identity h2 {
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.agent-cashout-counter-panel__identity p {
    margin-bottom: 0;
}

.agent-cashout-wallet-strip {
    display: grid;
    gap: 0.48rem;
    padding: 0.8rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--front-color-white-rgb), 0.74);
}

.agent-cashout-wallet-strip > span {
    color: var(--front-color-muted);
    font-size: var(--front-font-2xs);
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.agent-cashout-wallet-strip div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.agent-cashout-wallet-strip strong {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    color: var(--front-color-heading);
    background: var(--front-color-white);
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    font-size: var(--front-font-xs);
    font-weight: 800;
}

.agent-cashout-checklist {
    padding: 0.86rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 8px;
    background: var(--front-color-white);
}

.agent-cashout-checklist__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--front-color-heading);
    font-size: var(--front-font-sm);
    font-weight: 850;
    margin-bottom: 0.62rem;
}

.agent-cashout-checklist__head i {
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
}

.agent-cashout-checklist ul {
    display: grid;
    gap: 0.52rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.agent-cashout-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.48rem;
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    line-height: 1.45;
}

.agent-cashout-checklist li i {
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    flex: 0 0 auto;
    line-height: 1.45;
}

.agent-cashout-checklist li span {
    display: block;
    color: var(--front-color-muted);
    font-size: var(--front-font-xs);
    font-weight: 600;
    text-transform: none;
}

.agent-cashout-form-panel {
    padding: 1rem;
}

.agent-cashout-form-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
    margin-bottom: 1rem;
}

.agent-cashout-form-panel__head > span {
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.55rem;
    border-radius: 8px;
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
}

.agent-cashout-form-panel__head h3,
.agent-cashout-form-panel__head p {
    margin: 0;
}

.agent-cashout-form-panel__head h3 {
    color: var(--front-color-heading);
    font-size: 1.03rem;
    font-weight: 850;
}

.agent-cashout-form-panel__head p {
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
    line-height: 1.45;
    margin-top: 0.16rem;
}

.agent-qr-form .form-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--front-color-heading);
    font-size: var(--front-font-xs);
    font-weight: 800;
}

.agent-qr-form .form-label span {
    color: var(--front-color-muted);
    font-size: var(--front-font-2xs);
    font-weight: 800;
    text-transform: uppercase;
}

.agent-cashout-fields .form-control,
.agent-cashout-fields .form-select {
    min-height: 2.85rem;
    border-color: rgba(var(--front-color-primary-rgb), 0.16);
    border-radius: 8px;
    font-size: var(--front-font-sm);
}

.agent-cashout-fields .form-control:focus,
.agent-cashout-fields .form-select:focus {
    border-color: rgba(var(--front-color-primary-rgb), 0.34) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--front-color-primary-rgb), 0.08) !important;
}

.agent-qr-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--front-color-border-soft);
}

.agent-cashout-submit {
    padding: 0.82rem;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.055), rgba(var(--front-color-white-rgb), 0)),
        var(--front-color-surface);
}

.agent-cashout-submit__copy {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.agent-cashout-submit__copy > i {
    width: 2.28rem;
    height: 2.28rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.28rem;
    border-radius: 8px;
    color: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    background: var(--front-color-white);
}

.agent-cashout-submit .btn {
    min-width: 12.25rem;
    min-height: 2.85rem;
    white-space: nowrap;
}

.agent-qr-confirm strong,
.agent-qr-confirm span {
    display: block;
}

.agent-qr-confirm strong {
    color: var(--front-color-heading);
    font-weight: 800;
}

.agent-qr-confirm span {
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
}

@media (max-width: 991.98px) {
    .agent-qr-workspace,
    .agent-qr-checkout,
    .agent-overview-grid,
    .agent-print-qr-card--merged {
        grid-template-columns: 1fr;
    }

    .agent-print-qr-card--merged {
        text-align: center;
    }

    .agent-cashout-counter-panel {
        min-height: auto;
    }

    .agent-print-qr-card__actions {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .agent-tool-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin: 0 0 0.85rem;
        padding: 0.55rem;
        border-radius: 16px;
        background: rgba(var(--front-color-white-rgb), 0.9);
    }

    .agent-tool-tab {
        justify-content: flex-start;
        min-height: 3rem;
        padding: 0.58rem 0.62rem;
        font-size: var(--front-font-xs);
    }

    .agent-tool-tab:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .agent-tool-tab i {
        width: 1.9rem;
        height: 1.9rem;
        flex-basis: 1.9rem;
        border-radius: 11px;
    }

    .agent-tool-tab span {
        white-space: normal;
        line-height: 1.18;
    }

    .agent-tool-tab strong {
        margin-left: auto;
    }

    .agent-tool-tab.is-active {
        background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    }

    .agent-overview-kpis {
        grid-template-columns: 1fr;
    }

    .agent-overview-panel__head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .agent-overview-link {
        width: 100%;
    }

    .agent-overview-request-row {
        grid-template-columns: 2.45rem minmax(0, 1fr);
        align-items: flex-start;
    }

    .agent-overview-request-row__amount {
        grid-column: 2;
        text-align: left;
    }

    .agent-cashout-counter-panel,
    .agent-cashout-form-panel {
        padding: 0.82rem;
    }

    .agent-qr-header-actions {
        justify-content: stretch;
        width: 100%;
    }

    .agent-qr-header-actions .btn {
        flex: 1 1 9rem;
    }

    .agent-cashout-counter-panel__identity,
    .agent-cashout-form-panel__head,
    .agent-cashout-submit__copy {
        align-items: flex-start;
    }

    .agent-cashout-counter-panel__identity img {
        width: 4rem;
        height: 4rem;
        flex-basis: 4rem;
    }

    .agent-cashout-wallet-strip div {
        gap: 0.35rem;
    }

    .agent-qr-poster-info {
        grid-template-columns: 1fr;
    }

    .agent-pending-qr-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .agent-pending-qr-row__amount {
        text-align: left;
    }

    .agent-print-qr-card__actions,
    .agent-qr-confirm,
    .agent-qr-regenerate-modal .modal-footer,
    .agent-otp-actions {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .agent-print-qr-card__actions .btn,
    .agent-qr-confirm .btn,
    .agent-qr-regenerate-modal .modal-footer .btn,
    .agent-otp-actions .btn {
        width: 100%;
    }
}