/*
 * Zillion Pocket Theme Tokens
 *
 * The shared visual foundation for employee, administrator, and authentication
 * screens. Use semantic tokens rather than introducing new literal colors.
 */

:root {
    color-scheme: light;

    /* Typography */
    --zp-font-sans: Poppins, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Brand greens */
    --zp-green-900: #075c35;
    --zp-green-800: #08642c;
    --zp-green-700: #087a46;
    --zp-green-600: #10843c;
    --zp-green-500: #0b9253;
    --zp-green-300: #b8f4d0;
    --zp-green-100: #e8f7ef;
    --zp-green-50: #f4f8f5;

    /* Neutral surfaces and text */
    --zp-ink: #1f2933;
    --zp-ink-strong: #10251a;
    --zp-muted: #68796f;
    --zp-muted-soft: #718178;
    --zp-page: #eef1f5;
    --zp-page-soft: #f4f8f5;
    --zp-surface: #ffffff;
    --zp-surface-soft: #f8fcf9;
    --zp-line: #e3e3e0;
    --zp-line-green: #cfe0d6;

    /* Semantic feedback */
    --zp-success: #047857;
    --zp-success-soft: #e8f7ef;
    --zp-danger: #b91c1c;
    --zp-danger-soft: #fff1f2;
    --zp-warning: #9b6215;
    --zp-warning-soft: #fff9ef;
    --zp-info: #128477;

    /* High-contrast foregrounds for actions and semantic surfaces */
    --zp-on-brand: #ffffff;
    --zp-on-strong: #ffffff;
    --zp-action-secondary-text: #075c35;
    --zp-success-strong: #05603f;
    --zp-danger-strong: #991b1b;
    --zp-warning-strong: #79480b;
    --zp-info-strong: #0c665d;
    --zp-disabled-text: #45594d;

    /* Legacy aliases retained for existing templates */
    --brand: var(--zp-green-700);
    --brand-dark: var(--zp-green-900);
    --ink: var(--zp-ink);
    --muted: var(--zp-muted);
    --line: var(--zp-line);
    --page: var(--zp-page);
    --surface: var(--zp-surface);
    --credit: #00a76f;
    --debit: #c7254e;

    /* Shape, elevation, and interaction */
    --zp-radius-sm: 8px;
    --zp-radius-md: 12px;
    --zp-radius-lg: 20px;
    --zp-shadow-card: 0 12px 28px rgba(15, 23, 42, .08);
    --zp-shadow-elevated: 0 20px 42px rgba(13, 55, 35, .14);
    --zp-focus-ring: 0 0 0 3px rgba(8, 122, 70, .28);
    --zp-phone-standard-height: 780px;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--zp-font-sans);
}

:focus-visible {
    outline: 3px solid rgba(8, 122, 70, .35);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
 * Application-wide alignment layer
 *
 * These rules are intentionally scoped to shared layout markers and standalone
 * page classes so feature-specific layouts retain their function and hierarchy.
 */

body[data-ui-refresh="mobile-wallet"],
body[data-ui-refresh="desktop-workspace"],
body.zp-auth-page,
body.zp-utility-page,
body.zp-welcome-page {
    background: var(--zp-page);
    color: var(--zp-ink);
}

body[data-ui-refresh="mobile-wallet"] .phone-shell.mobile-wallet-shell {
    background: var(--zp-page-soft);
    box-shadow: 0 24px 72px rgba(13, 55, 35, .14);
}

body[data-ui-refresh="desktop-workspace"] .sidebar {
    border-right-color: rgba(8, 122, 70, .10);
    background: rgba(255, 255, 255, .92);
}

body[data-ui-refresh="desktop-workspace"] .topbar,
body[data-ui-refresh="desktop-workspace"] .card,
body[data-ui-refresh="mobile-wallet"] .card {
    border-color: rgba(8, 122, 70, .10);
    background: var(--zp-surface);
}

body[data-ui-refresh="desktop-workspace"] .card,
body[data-ui-refresh="mobile-wallet"] .card {
    box-shadow: var(--zp-shadow-card);
}

body[data-ui-refresh="mobile-wallet"] input:not([type="checkbox"]),
body[data-ui-refresh="mobile-wallet"] select,
body[data-ui-refresh="mobile-wallet"] textarea,
body[data-ui-refresh="desktop-workspace"] input:not([type="checkbox"]),
body[data-ui-refresh="desktop-workspace"] select,
body[data-ui-refresh="desktop-workspace"] textarea {
    border-color: var(--zp-line-green);
    color: var(--zp-ink-strong);
}

body[data-ui-refresh="mobile-wallet"] input:focus,
body[data-ui-refresh="mobile-wallet"] select:focus,
body[data-ui-refresh="mobile-wallet"] textarea:focus,
body[data-ui-refresh="desktop-workspace"] input:focus,
body[data-ui-refresh="desktop-workspace"] select:focus,
body[data-ui-refresh="desktop-workspace"] textarea:focus {
    border-color: var(--zp-green-700);
    box-shadow: var(--zp-focus-ring);
}

body.zp-auth-page,
body.zp-utility-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
}

.zp-auth-page .phone {
    width: min(390px, 100%);
    min-height: min(var(--zp-phone-standard-height), calc(100dvh - 48px));
}

.zp-auth-page .phone,
.zp-auth-page .phone-shell,
.zp-utility-page .panel {
    border-color: rgba(8, 122, 70, .12);
    background: var(--zp-page-soft);
    box-shadow: var(--zp-shadow-elevated);
}

.zp-auth-page header {
    background: linear-gradient(145deg, var(--zp-green-900), var(--zp-green-700) 56%, #16a160);
}

.zp-auth-page .card,
.zp-auth-page main,
.zp-utility-page .panel {
    border-color: rgba(8, 122, 70, .10);
    border-radius: var(--zp-radius-lg);
}

.zp-auth-page .primary,
.zp-auth-page .submit-btn,
.zp-utility-page .primary {
    background: linear-gradient(135deg, var(--zp-green-700), var(--zp-green-500));
}

.zp-auth-page .secondary,
.zp-utility-page .secondary {
    border-color: var(--zp-line-green);
    background: var(--zp-surface-soft);
    color: var(--zp-green-700);
}

.zp-welcome-page {
    background: var(--zp-page) !important;
    color: var(--zp-ink) !important;
}

.zp-welcome-page a:not([class*="dark:"]) {
    color: var(--zp-green-700);
}

@media (max-width: 800px) {
    body.zp-auth-page,
    body.zp-utility-page {
        padding: 0;
    }

    .zp-auth-page .phone,
    .zp-auth-page .phone-shell {
        width: 100%;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .zp-utility-page .panel {
        width: min(390px, calc(100% - 36px));
    }
}

/*
 * Shared component alignment
 * These rules intentionally follow the theme tokens so pages inheriting the
 * mobile or desktop layouts receive one consistent control language.
 */
body[data-ui-refresh="mobile-wallet"] .phone-shell,
body[data-ui-refresh="desktop-workspace"] .desktop-shell {
    background: var(--zp-page-soft);
}

body[data-ui-refresh="mobile-wallet"] .app-header,
body[data-ui-refresh="desktop-workspace"] .app-header {
    background: linear-gradient(145deg, var(--zp-green-900), var(--zp-green-700) 56%, var(--zp-green-500));
}

body[data-ui-refresh="mobile-wallet"] .card,
body[data-ui-refresh="desktop-workspace"] .card,
body[data-ui-refresh="desktop-workspace"] .topbar {
    border-color: rgba(8, 122, 70, .10);
    border-radius: var(--zp-radius-lg);
    background: var(--zp-surface);
    box-shadow: var(--zp-shadow-card);
}

body[data-ui-refresh="mobile-wallet"] input:not([type="checkbox"]):not([type="radio"]),
body[data-ui-refresh="mobile-wallet"] select,
body[data-ui-refresh="mobile-wallet"] textarea,
body[data-ui-refresh="desktop-workspace"] input:not([type="checkbox"]):not([type="radio"]),
body[data-ui-refresh="desktop-workspace"] select,
body[data-ui-refresh="desktop-workspace"] textarea {
    border-color: var(--zp-line-green);
    border-radius: var(--zp-radius-md);
    background: var(--zp-surface);
    color: var(--zp-ink-strong);
}

body[data-ui-refresh="mobile-wallet"] input:not([type="checkbox"]):not([type="radio"]):focus,
body[data-ui-refresh="mobile-wallet"] select:focus,
body[data-ui-refresh="mobile-wallet"] textarea:focus,
body[data-ui-refresh="desktop-workspace"] input:not([type="checkbox"]):not([type="radio"]):focus,
body[data-ui-refresh="desktop-workspace"] select:focus,
body[data-ui-refresh="desktop-workspace"] textarea:focus {
    border-color: var(--zp-green-700);
    box-shadow: var(--zp-focus-ring);
}

body[data-ui-refresh] .primary,
body[data-ui-refresh] .submit-btn,
body[data-ui-refresh] .logout-btn,
body[data-ui-refresh] .modal-close {
    border-color: var(--zp-green-700);
    background: var(--zp-green-700);
    color: var(--zp-on-brand) !important;
}

body[data-ui-refresh] .primary:hover,
body[data-ui-refresh] .submit-btn:hover,
body[data-ui-refresh] .logout-btn:hover,
body[data-ui-refresh] .modal-close:hover {
    border-color: var(--zp-green-900);
    background: var(--zp-green-900);
}

body[data-ui-refresh] .secondary,
body[data-ui-refresh] .signup-btn {
    border-color: var(--zp-line-green);
    background: var(--zp-surface-soft);
    color: var(--zp-action-secondary-text) !important;
}

body[data-ui-refresh] .secondary:hover,
body[data-ui-refresh] .signup-btn:hover {
    border-color: var(--zp-green-700);
    background: var(--zp-green-100);
}

body[data-ui-refresh] .success,
body[data-ui-refresh] .success-box,
body[data-ui-refresh] .status-box,
body[data-ui-refresh] .status-badge.approved,
body[data-ui-refresh] .status-badge.closed {
    border-color: var(--zp-success);
    background: var(--zp-success-soft);
    color: var(--zp-success-strong);
}

body[data-ui-refresh] .error,
body[data-ui-refresh] .error-box,
body[data-ui-refresh] .danger {
    border-color: var(--zp-danger);
    background: var(--zp-danger-soft);
    color: var(--zp-danger-strong);
}

body[data-ui-refresh] .warning,
body[data-ui-refresh] .status-badge.pending {
    border-color: var(--zp-warning);
    background: var(--zp-warning-soft);
    color: var(--zp-warning-strong);
}

body[data-ui-refresh] .status-badge {
    border: 1px solid currentColor;
    border-radius: 999px;
    font-weight: 800;
}

body[data-ui-refresh] a:not(.danger) {
    color: var(--zp-green-700);
}

body[data-ui-refresh] button:focus-visible,
body[data-ui-refresh] a:focus-visible,
body[data-ui-refresh] input:focus-visible,
body[data-ui-refresh] select:focus-visible,
body[data-ui-refresh] textarea:focus-visible {
    outline-color: var(--zp-green-700);
}

/* Shared interaction rhythm for action controls across desktop, mobile, and auth views. */
body[data-ui-refresh] :is(.action-btn, .action-link, .primary, .secondary, .submit-btn, .signup-btn, .logout-btn, .modal-close) {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

body[data-ui-refresh] :is(.action-btn, .action-link, .primary, .secondary, .submit-btn, .signup-btn, .logout-btn, .modal-close):not(:disabled):hover {
    transform: translateY(-1px);
}

body[data-ui-refresh] :is(button, .action-btn, .action-link)[disabled],
body[data-ui-refresh] :is(.action-btn, .action-link)[aria-disabled="true"] {
    box-shadow: none;
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}

body[data-ui-refresh] :is(.action-btn, .action-link, .primary, .secondary, .submit-btn, .signup-btn, .logout-btn) {
    min-height: 40px;
}

body.zp-auth-page .error,
body.zp-auth-page .error-box {
    border-color: var(--zp-danger);
    background: var(--zp-danger-soft);
    color: var(--zp-danger);
}

body.zp-auth-page .status,
body.zp-auth-page .status-box {
    border-color: var(--zp-success);
    background: var(--zp-success-soft);
    color: var(--zp-success-strong);
}

body.zp-auth-page input:not([type="checkbox"]):not([type="radio"]) {
    border-color: var(--zp-line-green);
    color: var(--zp-ink-strong);
}

body.zp-auth-page input:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--zp-green-700);
    box-shadow: var(--zp-focus-ring);
}

body.zp-auth-page .primary,
body.zp-auth-page .submit-btn {
    background: var(--zp-green-700);
    color: var(--zp-on-brand) !important;
}

body.zp-auth-page .secondary {
    border-color: var(--zp-line-green);
    background: var(--zp-surface-soft);
    color: var(--zp-action-secondary-text) !important;
}

body.zp-utility-page .panel {
    border-color: var(--zp-line-green);
    background: var(--zp-surface);
}

body.zp-utility-page .primary {
    background: var(--zp-green-700);
    color: var(--zp-on-brand) !important;
}

body.zp-utility-page .secondary {
    border-color: var(--zp-line-green);
    background: var(--zp-surface-soft);
    color: var(--zp-action-secondary-text) !important;
}

/* Desktop workspace navigation and actions */
body[data-ui-refresh="desktop-workspace"] .sidebar {
    border-right-color: rgba(8, 122, 70, .10);
    background: var(--zp-surface);
}

body[data-ui-refresh="desktop-workspace"] .nav-section-title {
    color: var(--zp-muted-soft);
}

body[data-ui-refresh="desktop-workspace"] .nav-item {
    color: var(--zp-ink);
}

body[data-ui-refresh="desktop-workspace"] .nav-item:hover {
    border-color: var(--zp-line-green);
    background: var(--zp-green-50);
    color: var(--zp-green-700);
}

body[data-ui-refresh="desktop-workspace"] .nav-item.active {
    border-color: var(--zp-line-green);
    background: var(--zp-green-100);
    color: var(--zp-green-700);
}

body[data-ui-refresh="desktop-workspace"] .nav-item-mark,
body[data-ui-refresh="desktop-workspace"] .nav-icon {
    color: var(--zp-muted-soft);
}

body[data-ui-refresh="desktop-workspace"] .nav-item.active .nav-item-mark,
body[data-ui-refresh="desktop-workspace"] .nav-item.active .nav-icon,
body[data-ui-refresh="desktop-workspace"] .nav-item:hover .nav-item-mark,
body[data-ui-refresh="desktop-workspace"] .nav-item:hover .nav-icon {
    color: var(--zp-green-700);
}

body[data-ui-refresh="desktop-workspace"] .action-btn:not(.secondary):not(.warning):not(.danger),
body[data-ui-refresh="desktop-workspace"] .action-link:not(.secondary):not(.warning):not(.danger) {
    border-color: var(--zp-green-700);
    background: var(--zp-green-700);
    color: var(--zp-on-brand) !important;
}

body[data-ui-refresh="desktop-workspace"] .action-btn.secondary,
body[data-ui-refresh="desktop-workspace"] .action-link.secondary {
    border-color: var(--zp-line-green);
    background: var(--zp-surface-soft);
    color: var(--zp-action-secondary-text) !important;
}

body[data-ui-refresh="desktop-workspace"] .action-btn.warning,
body[data-ui-refresh="desktop-workspace"] .action-link.warning {
    border-color: var(--zp-warning);
    background: var(--zp-warning-soft);
    color: var(--zp-warning-strong) !important;
}

body[data-ui-refresh="desktop-workspace"] .action-btn.danger,
body[data-ui-refresh="desktop-workspace"] .action-link.danger {
    border-color: var(--zp-danger);
    background: var(--zp-danger-soft);
    color: var(--zp-danger-strong) !important;
}

body[data-ui-refresh="desktop-workspace"] .table-shell {
    border-color: var(--zp-line);
    background: var(--zp-surface);
    overflow-x: auto;
}

body[data-ui-refresh="desktop-workspace"] details > summary {
    width: fit-content;
    color: var(--zp-action-secondary-text);
    font-weight: 800;
    cursor: pointer;
}

body[data-ui-refresh="desktop-workspace"] details[open] > summary {
    margin-bottom: 14px;
}

body[data-ui-refresh="desktop-workspace"] th,
body[data-ui-refresh="desktop-workspace"] td {
    border-bottom-color: var(--zp-line);
}

/* Mobile wallet navigation, forms, and task actions */
body[data-ui-refresh="mobile-wallet"] .form-card,
body[data-ui-refresh="mobile-wallet"] .form-panel {
    border-color: var(--zp-line-green);
    background: var(--zp-surface);
    box-shadow: var(--zp-shadow-card);
}

body[data-ui-refresh="mobile-wallet"] .bottom-nav {
    border-color: var(--zp-line-green);
    background: var(--zp-surface);
}

body[data-ui-refresh="mobile-wallet"] .nav-item,
body[data-ui-refresh="mobile-wallet"] .nav-label {
    color: var(--zp-muted);
}

body[data-ui-refresh="mobile-wallet"] .nav-item.active,
body[data-ui-refresh="mobile-wallet"] .nav-item.active .nav-icon,
body[data-ui-refresh="mobile-wallet"] .nav-item.active .nav-label {
    color: var(--zp-green-700);
}

body[data-ui-refresh="mobile-wallet"] .status-badge.rejected,
body[data-ui-refresh="mobile-wallet"] .status-badge.mismatch {
    border-color: var(--zp-danger);
    background: var(--zp-danger-soft);
    color: var(--zp-danger);
}

body[data-ui-refresh="mobile-wallet"] .status-badge.submitted,
body[data-ui-refresh="mobile-wallet"] .status-badge.matched,
body[data-ui-refresh="mobile-wallet"] .status-badge.in_review {
    border-color: var(--zp-info);
    background: color-mix(in srgb, var(--zp-info) 10%, var(--zp-surface));
    color: var(--zp-info-strong);
}

body[data-ui-refresh="mobile-wallet"] .status-badge.need_more_information,
body[data-ui-refresh="mobile-wallet"] .status-badge.pending {
    border-color: var(--zp-warning);
    background: var(--zp-warning-soft);
    color: var(--zp-warning-strong);
}

body[data-ui-refresh="mobile-wallet"] .status-badge.completed {
    border-color: var(--zp-success);
    background: var(--zp-success-soft);
    color: var(--zp-success-strong);
}

/* Reusable employee page-title header */
body[data-ui-refresh="mobile-wallet"] .zp-page-title-header {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    width: 100%;
    min-height: 86px;
    margin: 0;
    padding: max(14px, env(safe-area-inset-top)) 22px 14px;
    overflow: hidden;
    border: 0;
    border-radius: 0 0 28px 28px;
    background:
        radial-gradient(circle at 72% -36%, rgba(167, 255, 199, .28) 0 29%, transparent 30%),
        radial-gradient(circle at 83% 120%, rgba(255, 255, 255, .13) 0 26%, transparent 27%),
        linear-gradient(122deg, var(--zp-green-900), var(--zp-green-700) 58%, var(--zp-green-500));
    box-shadow: 0 15px 26px rgba(8, 122, 70, .22);
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-header::before,
body[data-ui-refresh="mobile-wallet"] .zp-page-title-header::after {
    position: absolute;
    z-index: 0;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-header::before {
    top: -73px;
    right: 48px;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-header::after {
    right: -48px;
    bottom: -78px;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-back,
body[data-ui-refresh="mobile-wallet"] .zp-page-title-mark,
body[data-ui-refresh="mobile-wallet"] .zp-page-title-profile,
body[data-ui-refresh="mobile-wallet"] .zp-page-title {
    position: relative;
    z-index: 1;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-back,
body[data-ui-refresh="mobile-wallet"] .zp-page-title-mark,
body[data-ui-refresh="mobile-wallet"] .zp-page-title-profile {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    color: var(--zp-on-brand) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-back {
    justify-self: start;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-profile {
    justify-self: end;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: var(--zp-on-brand);
    text-decoration: none;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-profile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-back:hover {
    background: rgba(255, 255, 255, .24);
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-back svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title {
    margin: 0;
    color: var(--zp-on-brand);
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1;
    text-align: center;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-mark {
    justify-self: end;
    font-size: 14px;
    font-weight: 850;
}

/* Use a quieter marker when a title needs less visual emphasis, such as Records. */
body[data-ui-refresh="mobile-wallet"] .zp-page-title-mark.is-compact {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    font-size: 11px;
}

body[data-ui-refresh="mobile-wallet"] .zp-page-title-header + .content {
    padding-top: 22px;
}

@media (max-width: 380px) {
    body[data-ui-refresh="mobile-wallet"] .zp-page-title-header {
        width: 100%;
        min-height: 78px;
        margin: 0;
        border-radius: 0 0 24px 24px;
    }

    body[data-ui-refresh="mobile-wallet"] .zp-page-title-back,
    body[data-ui-refresh="mobile-wallet"] .zp-page-title-mark,
    body[data-ui-refresh="mobile-wallet"] .zp-page-title-profile {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }
}

/* Employee Home application tools */
body[data-ui-refresh="mobile-wallet"] .home-tools {
    margin: 18px 0 4px;
}

body[data-ui-refresh="mobile-wallet"] .home-tools-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 11px;
}

body[data-ui-refresh="mobile-wallet"] .home-tools-kicker {
    margin: 0 0 3px;
    color: var(--zp-green-700);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-ui-refresh="mobile-wallet"] .home-tools-heading h2 {
    margin: 0;
    color: var(--zp-text-strong);
    font-size: 21px;
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.12;
}

body[data-ui-refresh="mobile-wallet"] .home-tools-heading > span {
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--zp-green-50);
    color: var(--zp-green-700);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body[data-ui-refresh="mobile-wallet"] .home-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    align-items: center;
    min-height: 86px;
    gap: 10px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--zp-border);
    border-radius: 17px;
    background: var(--zp-surface);
    box-shadow: 0 8px 18px rgba(13, 55, 35, .06);
    color: var(--zp-text-strong);
    isolation: isolate;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card::before {
    position: absolute;
    z-index: -1;
    top: -50px;
    right: -46px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    opacity: .05;
    transition: opacity .18s ease, transform .22s ease;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card > span:nth-child(2) {
    min-width: 0;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card strong,
body[data-ui-refresh="mobile-wallet"] .home-tool-card small {
    display: block;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card strong {
    color: var(--zp-text-strong);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -.015em;
    line-height: 1.2;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card small {
    margin-top: 4px;
    overflow: hidden;
    color: var(--zp-text-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card > b {
    color: currentColor;
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    transition: transform .18s ease;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, currentColor 12%, white);
    color: currentColor;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.1;
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card.tone-fuel { color: #087a46; }
body[data-ui-refresh="mobile-wallet"] .home-tool-card.tone-toll { color: #a15b00; }
body[data-ui-refresh="mobile-wallet"] .home-tool-card.tone-topup { color: #147a68; }
body[data-ui-refresh="mobile-wallet"] .home-tool-card.tone-records { color: #3d6175; }
body[data-ui-refresh="mobile-wallet"] .home-tool-card.tone-history { color: #5665a7; }
body[data-ui-refresh="mobile-wallet"] .home-tool-card.tone-vehicle { color: #287f58; }
body[data-ui-refresh="mobile-wallet"] .home-tool-card.tone-inbox { color: #8b5c2f; }
body[data-ui-refresh="mobile-wallet"] .home-tool-card.tone-profile { color: #7d568f; }

body[data-ui-refresh="mobile-wallet"] .home-tool-card:hover,
body[data-ui-refresh="mobile-wallet"] .home-tool-card:focus-visible,
body[data-ui-refresh="mobile-wallet"] .home-tool-card.is-pressed {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 7%, white);
    box-shadow: 0 12px 23px color-mix(in srgb, currentColor 22%, transparent);
    transform: translateY(-2px);
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card:hover::before,
body[data-ui-refresh="mobile-wallet"] .home-tool-card:focus-visible::before,
body[data-ui-refresh="mobile-wallet"] .home-tool-card.is-pressed::before {
    opacity: .11;
    transform: scale(1.12);
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card:hover .home-tool-icon,
body[data-ui-refresh="mobile-wallet"] .home-tool-card:focus-visible .home-tool-icon,
body[data-ui-refresh="mobile-wallet"] .home-tool-card.is-pressed .home-tool-icon {
    background: var(--zp-green-700);
    color: var(--zp-on-brand);
    transform: scale(1.04);
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card:hover > b,
body[data-ui-refresh="mobile-wallet"] .home-tool-card:focus-visible > b,
body[data-ui-refresh="mobile-wallet"] .home-tool-card.is-pressed > b {
    transform: translateX(2px);
}

body[data-ui-refresh="mobile-wallet"] .home-tool-card:focus-visible {
    outline: 3px solid color-mix(in srgb, currentColor 40%, white);
    outline-offset: 2px;
}

@media (max-width: 380px) {
    body[data-ui-refresh="mobile-wallet"] .home-tools-grid { gap: 8px; }

    body[data-ui-refresh="mobile-wallet"] .home-tool-card {
        grid-template-columns: 38px minmax(0, 1fr) 13px;
        min-height: 78px;
        gap: 8px;
        padding: 10px;
        border-radius: 15px;
    }

    body[data-ui-refresh="mobile-wallet"] .home-tool-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    body[data-ui-refresh="mobile-wallet"] .home-tool-card strong { font-size: 12px; }
    body[data-ui-refresh="mobile-wallet"] .home-tool-card small { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-ui-refresh="mobile-wallet"] .home-tool-card,
    body[data-ui-refresh="mobile-wallet"] .home-tool-card::before,
    body[data-ui-refresh="mobile-wallet"] .home-tool-card > b,
    body[data-ui-refresh="mobile-wallet"] .home-tool-icon {
        transition: none;
    }
}

/* Signed wallet amount presentation */
.amount-credit,
.amount-debit {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
}

.amount-credit {
    color: var(--credit) !important;
}

.amount-debit {
    color: var(--debit) !important;
}

/* Mobile keyboard and overflow safety. Keep Safari from zooming focused controls and contain all form surfaces. */
@media (max-width: 800px) {
    html {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    select,
    textarea {
        min-width: 0;
        max-width: 100%;
        font-size: 16px !important;
    }

    textarea {
        resize: vertical;
    }

    input:not([type="hidden"]):focus,
    select:focus,
    textarea:focus {
        scroll-margin-block: 24px 42vh;
    }

    form,
    fieldset,
    .field,
    .form-panel,
    .form-card,
    .input-row,
    .unit-row,
    .auth-input-shell {
        min-width: 0;
        max-width: 100%;
    }

    body:has(input:focus, select:focus, textarea:focus) .bottom-nav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    }
}

@media (max-width: 800px) {
    .unit-row > :first-child,
    .input-row > :first-child,
    .field-grid > *,
    .auth-input-shell > :is(input, select, textarea) {
        min-width: 0;
    }

    .input-label-row,
    .login-actions {
        min-width: 0;
    }
}

/* Standard user-avatar system: consistent portrait crops, fallback initials, and reusable size variants. */
.zp-user-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--zp-green-800), var(--zp-green-500));
    box-shadow: 0 5px 14px rgba(6, 79, 42, .24);
    color: var(--zp-on-brand);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

.zp-user-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.zp-user-avatar > span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.zp-user-avatar.zp-user-avatar--header {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.zp-user-avatar.zp-user-avatar--home {
    width: 38px;
    height: 38px;
    font-size: 13px;
}

.zp-user-avatar.zp-user-avatar--hero {
    width: 68px;
    height: 68px;
    border-width: 3px;
    font-size: 26px;
}

.zp-user-avatar.zp-user-avatar--card {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

.zp-user-avatar.zp-user-avatar--sidebar {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.zp-user-avatar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .86), var(--zp-focus-ring);
}

.zp-user-avatar.zp-user-avatar--stack {
    width: 28px;
    height: 28px;
    border-width: 2px;
    font-size: 10px;
}