/*
 * Both panels — /e-ticket/admin (agents, parks, stakeholders) and /admin
 * (Super Admin, Admin) — in the "Daylight" look: white and light grey
 * surfaces, RTEAN green for every action, the logo's yellow/green/red as
 * a thin band, Public Sans, and a dark mode built from the same tokens.
 *
 * Plain CSS loaded by App\Support\PanelTheme (HEAD_END render hook): the
 * deploy runs no `npm run build`, so a compiled Filament theme would
 * never reach the server. Every standard Filament component is themed
 * here, so a new screen built from normal components needs nothing of
 * its own. The ek-* classes are the park panel's own views (dashboard,
 * wallet card, funding card, ledger, phone check, settings).
 */

.fi-body {
    --ek-ground: #f5f7f5;
    --ek-surface: #ffffff;
    --ek-surface-2: #f8faf8;
    --ek-sunken: #eef2ef;
    --ek-line: #e1e6e2;
    --ek-line-strong: #b9c4bd;
    --ek-ink: #0e1a14;
    --ek-ink-soft: #2f3d35;
    --ek-muted: #5b6660;
    --ek-green: #007a45;
    --ek-green-hover: #00663a;
    --ek-on-green: #ffffff;
    --ek-green-deep: #0b5d36;
    --ek-soft: #e3f2e9;
    --ek-soft-ink: #0b5d36;
    --ek-yellow: #ffcb01;
    --ek-red: #d3161b;
    --ek-red-soft: #fde4e4;
    --ek-amber: #a86a00;
    --ek-amber-soft: #fff4d1;
    --ek-card: #0e1a14;
    --ek-card-2: #17261e;
    --ek-card-line: #2a3b31;
    --ek-card-ink: #f1f7f3;
    --ek-card-muted: #a7bbb0;
    --ek-tri: linear-gradient(90deg, #ffcb01 0 33.33%, #01a85a 33.33% 66.66%, #fe0002 66.66%);
    --ek-shadow: 0 1px 2px rgba(14, 26, 20, .05), 0 12px 32px -22px rgba(14, 26, 20, .35);
    --ek-shadow-lg: 0 30px 60px -28px rgba(14, 26, 20, .45);
    --ek-ring: 0 0 0 4px rgba(0, 122, 69, .18);
    --ek-ease: cubic-bezier(.16, 1, .3, 1);
    --ek-radius: 16px;
}
.dark .fi-body {
    --ek-ground: #0b1210;
    --ek-surface: #121b17;
    --ek-surface-2: #16211c;
    --ek-sunken: #0f1714;
    --ek-line: #24332b;
    --ek-line-strong: #3a4c42;
    --ek-ink: #e6eee9;
    --ek-ink-soft: #c3d1c8;
    --ek-muted: #96a99e;
    --ek-green: #2fbf71;
    --ek-green-hover: #4fd08a;
    --ek-on-green: #04140b;
    --ek-green-deep: #8fe0b4;
    --ek-soft: #133325;
    --ek-soft-ink: #8fe0b4;
    --ek-red: #ff6b6b;
    --ek-red-soft: #3a1416;
    --ek-amber: #f2b84b;
    --ek-amber-soft: #33270d;
    --ek-card: #0f2a1d;
    --ek-card-2: #153526;
    --ek-card-line: #24493a;
    --ek-shadow: 0 0 0 1px #1d2a23, 0 14px 32px -24px rgba(0, 0, 0, .8);
    --ek-shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, .9);
    --ek-ring: 0 0 0 4px rgba(47, 191, 113, .22);
}

.fi-body ::selection { background: var(--ek-yellow); color: #0e1a14; }
.fi-body.fi-body { background: var(--ek-ground); color: var(--ek-ink); }
[x-cloak] { display: none !important; }

/* ---------- Headings ---------- */
.fi-body .fi-header-heading { font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.fi-body .fi-header-subheading { color: var(--ek-muted); }
.fi-body .fi-section-header-heading { font-weight: 700; letter-spacing: -.01em; }

/* ---------- The thin tricolour band: top bar, sidebar, dialogs ---------- */
.fi-body .fi-topbar,
.fi-body .fi-sidebar-header { border-top: 4px solid transparent; border-image: var(--ek-tri) 1; }

/* ---------- Top bar ---------- */
.fi-body .fi-topbar {
    background: color-mix(in srgb, var(--ek-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: none;
    border-bottom: 1px solid var(--ek-line);
    min-height: 4.25rem;
}
.fi-body .fi-topbar-end { gap: .6rem; }
.fi-body .fi-topbar-database-notifications-btn {
    width: 2.6rem; height: 2.6rem;
    border-radius: 999px !important;
    background: var(--ek-sunken);
    color: var(--ek-ink) !important;
    transition: background-color .2s ease, transform .2s var(--ek-ease);
}
.fi-body .fi-topbar-database-notifications-btn:hover { background: var(--ek-soft); color: var(--ek-soft-ink) !important; }
.fi-body .fi-topbar-database-notifications-btn:active { transform: scale(.94); }
.fi-body .fi-topbar-database-notifications-btn .fi-badge { background: var(--ek-red) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--ek-surface); }

.ek-whoami { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; padding: 0 .15rem 0 .75rem; }
.ek-whoami b { font-weight: 700; font-size: .9rem; color: var(--ek-ink); }
.ek-whoami span { font-size: .78rem; color: var(--ek-muted); }
@media (max-width: 640px) { .ek-whoami { display: none; } }
.fi-body .fi-user-menu-trigger { border-radius: 999px; padding: 2px; box-shadow: 0 0 0 2px var(--ek-soft); transition: transform .2s var(--ek-ease), box-shadow .2s ease; }
.fi-body .fi-user-menu-trigger:hover { box-shadow: 0 0 0 2px var(--ek-green); }
.fi-body .fi-user-menu-trigger:active { transform: scale(.95); }
.fi-body .fi-user-avatar { width: 2.4rem !important; height: 2.4rem !important; }

/* ---------- Brand ---------- */
.ek-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ek-ink); }
.ek-brand img { width: 40px; height: 40px; border-radius: 50%; background: #fff; flex: none; transition: transform .5s var(--ek-ease); }
.ek-brand:hover img { transform: rotate(-8deg); }
.ek-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.ek-brand-text b { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; }
.ek-brand-text small { font-size: .74rem; font-weight: 600; color: var(--ek-muted); white-space: nowrap; }
.fi-panel-park .ek-brand { cursor: pointer; }

/* ---------- Sidebar ---------- */
.fi-body .fi-sidebar.fi-main-sidebar { background: var(--ek-surface); border-inline-end: 1px solid var(--ek-line); }
.fi-body .fi-sidebar-header { background: var(--ek-surface); box-shadow: none; border-bottom: 1px solid var(--ek-line); }
.fi-body .fi-sidebar-item-btn { border-radius: 10px; transition: background-color .2s ease, color .2s ease; }
.fi-body .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--ek-ink-soft); font-weight: 600; }
.fi-body .fi-sidebar-item-btn .fi-icon { color: var(--ek-muted); transition: color .2s ease, transform .3s var(--ek-ease); }
.fi-body .fi-sidebar-item-btn:hover { background: var(--ek-sunken); }
.fi-body .fi-sidebar-item-btn:hover .fi-icon { transform: translateX(1px); }
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--ek-soft); box-shadow: inset 3px 0 0 var(--ek-green); }
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon { color: var(--ek-soft-ink); font-weight: 700; }
.fi-body .fi-sidebar-group-label { color: var(--ek-muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fi-body .fi-sidebar-group-collapse-btn { color: var(--ek-muted); }
.fi-body .fi-sidebar-close-overlay { background: rgba(4, 20, 11, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* ---------- Buttons ---------- */
.fi-body .fi-btn { font-weight: 700; border-radius: 10px; min-height: 2.6rem; padding-inline: 1rem; transition: background-color .2s ease, transform .2s var(--ek-ease), box-shadow .2s ease; }
.fi-body .fi-btn:active { transform: scale(.98); }
.fi-body .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) { background: var(--ek-green) !important; color: var(--ek-on-green) !important; box-shadow: 0 8px 18px -12px rgba(0, 122, 69, .8); }
.fi-body .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) * { color: var(--ek-on-green) !important; }
.fi-body .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover { background: var(--ek-green-hover) !important; transform: translateY(-1px); }
.fi-body .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) { background: #c4161b !important; color: #fff !important; }
.fi-body .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) * { color: #fff !important; }
.fi-body .fi-btn:not(.fi-color):not(.fi-link),
.fi-body .fi-btn.fi-color-gray:not(.fi-link) { background: var(--ek-surface) !important; color: var(--ek-ink) !important; box-shadow: inset 0 0 0 1.5px var(--ek-line-strong) !important; }
.fi-body .fi-btn.fi-color-gray:not(.fi-link):hover { box-shadow: inset 0 0 0 1.5px var(--ek-green) !important; color: var(--ek-green) !important; }
.fi-body .fi-link { font-weight: 700; }
.fi-body .fi-btn.pin-locked, .fi-body .fi-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: saturate(.6); }
.fi-body .ek-scan-btn { background: var(--ek-soft) !important; color: var(--ek-soft-ink) !important; border: 0 !important; border-radius: 10px !important; padding: .65rem 1.1rem !important; font-weight: 700 !important; }
.fi-body .ek-scan-btn:hover { background: var(--ek-green) !important; color: var(--ek-on-green) !important; }

/* ---------- Focus ---------- */
.fi-body :focus { outline: none; }
.fi-body :is(button, a, [role=button], .fi-icon-btn, .fi-sidebar-item-btn, .fi-sidebar-group-btn, .fi-user-menu-trigger):focus-visible {
    outline: 2px solid var(--ek-green) !important;
    outline-offset: 2px;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* ---------- Sections, cards ---------- */
.fi-body .fi-section:not(.fi-section-not-contained) { border-radius: var(--ek-radius); background: var(--ek-surface); box-shadow: var(--ek-shadow) !important; --tw-ring-shadow: 0 0 #0000; }
.fi-body .fi-section-header-description { color: var(--ek-muted); }

/* ---------- Fields ---------- */
.fi-body .fi-fo-field-label-content { font-weight: 600; }
.fi-body .fi-fo-field-label-required-mark { color: var(--ek-red); }
.fi-body .fi-input-wrp,
.fi-body .fi-select-input-btn {
    border-radius: 10px !important;
    background: var(--ek-surface) !important;
    box-shadow: inset 0 0 0 1.5px var(--ek-line-strong) !important;
    min-height: 2.85rem;
    transition: box-shadow .2s ease;
}
.fi-body .fi-input-wrp:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ek-green) 50%, var(--ek-line-strong)) !important; }
.fi-body .fi-input-wrp:focus-within,
.fi-body .fi-select-input-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--ek-green), var(--ek-ring) !important; }
.fi-body .fi-input-wrp.fi-invalid,
.fi-body .fi-fo-field:has(.fi-fo-field-wrp-error-message) .fi-input-wrp { box-shadow: inset 0 0 0 2px var(--ek-red) !important; }
.fi-body .fi-fo-field-wrp-error-message { font-weight: 600; }
.fi-body :is(.fi-input, .fi-select-input, .fi-input-wrp input, .fi-input-wrp select, .fi-input-wrp textarea, textarea.fi-input) { color: var(--ek-ink); caret-color: var(--ek-green); -webkit-text-fill-color: currentColor; }
.fi-body :is(.fi-input, .fi-input-wrp input, .fi-input-wrp textarea)::placeholder { color: var(--ek-muted); opacity: .85; -webkit-text-fill-color: var(--ek-muted); }
.dark .fi-body .fi-input-wrp select option { background: var(--ek-surface); color: var(--ek-ink); }
.fi-body .fi-input-wrp input:-webkit-autofill { -webkit-text-fill-color: var(--ek-ink); box-shadow: inset 0 0 0 1000px var(--ek-surface); caret-color: var(--ek-green); }
.fi-body :is(.fi-input, .fi-input-wrp input):disabled { opacity: 1; color: var(--ek-muted); -webkit-text-fill-color: var(--ek-muted); cursor: not-allowed; }
.fi-body .fi-input-wrp-prefix, .fi-body .fi-input-wrp-suffix { color: var(--ek-muted); font-weight: 600; }
.fi-body .fi-checkbox-input { border-radius: 5px; }
.fi-body .fi-checkbox-input:checked { background-color: var(--ek-green) !important; }
.fi-body .fi-toggle:not(.fi-toggle-off) { background-color: var(--ek-green) !important; }

/* The 4-box transaction PIN (filament/pin-input.blade.php). */
.fi-body :is([data-pin-box], .pin-group input[type=text]) {
    width: 3.25rem !important; height: 3.6rem !important;
    border-radius: 12px !important; border: 0 !important;
    background: var(--ek-surface) !important;
    box-shadow: inset 0 0 0 1.5px var(--ek-line-strong) !important;
    font: 800 1.6rem/1 'Public Sans', sans-serif !important;
    text-align: center; color: var(--ek-ink) !important;
    transition: box-shadow .2s ease, transform .2s var(--ek-ease), background-color .2s ease;
}
.fi-body :is([data-pin-box], .pin-group input[type=text]).is-filled { background: var(--ek-soft) !important; box-shadow: inset 0 0 0 1.5px var(--ek-green) !important; }
.fi-body :is([data-pin-box], .pin-group input[type=text]):focus { outline: none; box-shadow: inset 0 0 0 2px var(--ek-green), var(--ek-ring) !important; transform: translateY(-1px); }
.fi-body .pin-field { position: relative; overflow: hidden; padding-top: 18px; background: var(--ek-surface-2); box-shadow: inset 0 0 0 1px var(--ek-line); border-radius: 18px; }
.fi-body .pin-field::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ek-tri); }
.fi-body .pin-field-label { font-weight: 700; color: var(--ek-ink); }
.fi-body .pin-field-toggle { color: var(--ek-ink); box-shadow: inset 0 0 0 1.5px var(--ek-line-strong); }
.fi-body .pin-field .pin-box { width: 3.5rem !important; height: 3.9rem !important; font-size: 1.8rem !important; caret-color: var(--ek-green); }
.fi-body .pin-field .pin-box.is-filled { background: var(--ek-soft) !important; box-shadow: inset 0 0 0 2px var(--ek-green) !important; }
.fi-body .pin-field .pin-box.is-active { box-shadow: inset 0 0 0 2px var(--ek-green), var(--ek-ring) !important; transform: translateY(-2px); }
.fi-body .pin-field-dots i.on { background: var(--ek-green); }
.fi-body .pin-field-foot { color: var(--ek-muted); }
@media (max-width: 380px) { .fi-body .pin-field .pin-box { width: 3rem !important; height: 3.5rem !important; } }

/* ---------- Modals ---------- */
.fi-body .fi-modal-close-overlay { background: rgba(4, 20, 11, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fi-body .fi-modal:not(.fi-modal-slide-over) .fi-modal-window {
    border-radius: 22px; overflow: hidden;
    box-shadow: var(--ek-shadow-lg);
    max-height: calc(100dvh - 2rem);
    display: flex; flex-direction: column;
}
.fi-body .fi-modal:not(.fi-modal-slide-over) .fi-modal-window::before { content: ''; display: block; flex: none; height: 4px; background: var(--ek-tri); }
.fi-body .fi-modal:not(.fi-modal-slide-over) .fi-modal-window > .fi-modal-header,
.fi-body .fi-modal:not(.fi-modal-slide-over) .fi-modal-window > .fi-modal-footer { flex: none; }
.fi-body .fi-modal:not(.fi-modal-slide-over) .fi-modal-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fi-body .fi-modal:not(.fi-modal-slide-over) .fi-modal-footer { border-top: 1px solid var(--ek-line); }
.fi-body .fi-modal-heading { font-weight: 800; letter-spacing: -.015em; font-size: 1.3rem; }
.fi-body .fi-modal-description { color: var(--ek-muted); }
.fi-body .fi-modal-icon-bg { background: var(--ek-soft) !important; }
.fi-body .fi-modal-icon-bg .fi-icon { color: var(--ek-soft-ink) !important; }
.fi-body .fi-modal-footer-actions .fi-btn { min-height: 2.85rem; padding-inline: 1.3rem; }
@media (prefers-reduced-motion: no-preference) {
    .fi-body .fi-modal:not(.fi-modal-slide-over) .fi-modal-window { animation: ek-dialog-in .32s var(--ek-ease); }
}
@keyframes ek-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .fi-body .fi-modal:not(.fi-modal-slide-over) .fi-modal-window { max-height: calc(100dvh - 1rem); border-radius: 18px; }
    .fi-body .fi-modal-footer-actions { flex-wrap: wrap; }
    .fi-body .fi-modal-footer-actions .fi-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Tables ---------- */
.fi-body .fi-ta-ctn { border-radius: var(--ek-radius); overflow: hidden; background: var(--ek-surface); box-shadow: var(--ek-shadow) !important; --tw-ring-shadow: 0 0 #0000; }
.fi-body .fi-ta-header-cell,
.fi-body .fi-ta-header-cell-sort-btn { font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .04em; color: var(--ek-muted) !important; }
.fi-body .fi-ta-header-cell { background: var(--ek-surface-2); }
.fi-body .fi-ta-row { transition: background-color .15s ease; }
.fi-body .fi-ta-row:hover { background: var(--ek-surface-2); }
.fi-body .fi-ta-empty-state-icon-bg { background: var(--ek-soft) !important; }
.fi-body .fi-ta-empty-state-icon-bg .fi-icon { color: var(--ek-soft-ink) !important; }
.fi-body .fi-ta-empty-state-heading { font-weight: 700; }
.fi-body .fi-tabs { border-radius: 12px; background: var(--ek-sunken); box-shadow: none; padding: .25rem; }
.fi-body .fi-tabs-item { border-radius: 9px; }
.fi-body .fi-tabs-item.fi-active { background: var(--ek-surface); box-shadow: var(--ek-shadow); }
.fi-body .fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--ek-soft-ink); }
.fi-body .fi-pagination-item.fi-active .fi-pagination-item-btn { background: var(--ek-soft); color: var(--ek-soft-ink); }

/* ---------- Stat cards ---------- */
.fi-body .fi-wi-stats-overview-stat {
    position: relative; overflow: hidden;
    border-radius: var(--ek-radius); background: var(--ek-surface);
    box-shadow: var(--ek-shadow) !important; --tw-ring-shadow: 0 0 #0000;
    transition: transform .3s var(--ek-ease), box-shadow .3s var(--ek-ease);
}
.fi-body .fi-wi-stats-overview-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ek-green); opacity: .9; }
.fi-body .fi-wi-stats-overview-stat:hover { transform: translateY(-2px); }
.fi-body .fi-wi-stats-overview-stat-label { font-size: .8rem; font-weight: 600; color: var(--ek-muted); }
.fi-body .fi-wi-stats-overview-stat-value { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- Badges, dropdowns, breadcrumbs ---------- */
.fi-body .fi-badge { border-radius: 999px; font-weight: 700; }
.fi-body .fi-breadcrumbs-item-label { font-weight: 600; }
.fi-body .fi-dropdown-panel { border-radius: 14px; overflow: hidden; box-shadow: var(--ek-shadow-lg) !important; }
.fi-body .fi-user-menu .fi-dropdown-panel { min-width: 17rem; }
.fi-body .fi-user-menu .fi-dropdown-panel::before { content: ''; display: block; height: 4px; background: var(--ek-tri); }
.fi-body .fi-user-menu .fi-theme-switcher { margin: .25rem; padding: .25rem; border-radius: 12px; background: var(--ek-sunken); gap: .25rem; }
.fi-body .fi-user-menu .fi-theme-switcher-btn { border-radius: 9px; }
.fi-body .fi-user-menu .fi-theme-switcher-btn.fi-active { background: var(--ek-surface) !important; color: var(--ek-green) !important; box-shadow: var(--ek-shadow); }
.fi-body .fi-user-menu .fi-dropdown-list-item { border-radius: 10px; }

/* ---------- Toasts ---------- */
.fi-body .fi-no:not(.fi-no-database) .fi-no-notification {
    border-radius: 14px !important;
    background: var(--ek-card) !important;
    color: var(--ek-card-ink) !important;
    box-shadow: var(--ek-shadow-lg) !important;
    --tw-ring-shadow: 0 0 #0000;
    overflow: hidden;
}
.fi-body .fi-no:not(.fi-no-database) .fi-no-notification::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ek-tri); }
.fi-body .fi-no:not(.fi-no-database) .fi-no-notification-title { color: var(--ek-card-ink) !important; font-weight: 700; }
.fi-body .fi-no:not(.fi-no-database) .fi-no-notification-body,
.fi-body .fi-no:not(.fi-no-database) .fi-no-notification-close-btn { color: var(--ek-card-muted) !important; }

/* ---------- Notifications slide-over ---------- */
.fi-body .fi-modal-slide-over .fi-modal-window { background: var(--ek-ground); }
.fi-body .fi-no-database .fi-modal-header { border-top: 4px solid transparent; border-image: var(--ek-tri) 1; }
.fi-body .fi-no-database .fi-no-notification { margin: .45rem .85rem; border-radius: 14px !important; background: var(--ek-surface) !important; box-shadow: var(--ek-shadow) !important; --tw-ring-shadow: 0 0 #0000; }
.fi-body .fi-no-database .fi-no-notification-unread-ctn { box-shadow: inset 4px 0 0 var(--ek-green); }

/* ---------- Sign in: the form beside an RTEAN bus ---------- */
.fi-body .fi-simple-layout { min-height: 100dvh; background: var(--ek-ground); }
.fi-body .fi-simple-main-ctn { position: relative; z-index: 1; padding: 1.5rem 1rem; }
.fi-body .fi-simple-main {
    margin-block: auto;
    max-width: 27rem; width: 100%;
    background: var(--ek-surface);
    border-radius: 24px;
    padding: 2rem 1.75rem 1.75rem !important;
    box-shadow: var(--ek-shadow-lg) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border-top: 4px solid transparent;
    border-image: var(--ek-tri) 1;
}
.fi-body .fi-simple-header { gap: .5rem; }
.fi-body .fi-simple-header .fi-logo { height: auto !important; margin-bottom: .35rem; }
.fi-body .fi-simple-header .ek-brand { flex-direction: column; gap: .6rem; text-align: center; }
.fi-body .fi-simple-header .ek-brand img { width: 76px; height: 76px; }
.fi-body .fi-simple-header .ek-brand-text b { font-size: 1.15rem; }
.fi-body .fi-simple-header-heading { font-weight: 800; letter-spacing: -.02em; font-size: 1.5rem; }
.fi-body .fi-simple-header-subheading { color: var(--ek-muted); }
.fi-body .fi-simple-page .fi-sc-form .fi-btn.fi-color-primary { width: 100%; min-height: 3rem; font-size: 1rem; }
@media (min-width: 1024px) {
    .fi-body .fi-simple-layout::after {
        content: '';
        position: fixed; top: 0; right: 0; bottom: 0; width: 46vw;
        background:
            linear-gradient(180deg, rgba(11, 93, 54, .12) 0%, rgba(7, 42, 26, .82) 100%),
            #0b5d36 url('/images/landing/rtean-bus-1200.webp') 38% 50% / cover no-repeat;
    }
    .fi-body .fi-simple-layout::before {
        content: 'On the road with RTEAN';
        position: fixed; z-index: 1; right: 3rem; bottom: 2.5rem; width: calc(46vw - 6rem);
        color: #fff; font: 800 2.2rem/1.05 'Public Sans', sans-serif; letter-spacing: -.02em;
        pointer-events: none;
    }
    .fi-body .fi-simple-main-ctn { width: 54vw; margin-inline-end: auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .fi-body .fi-simple-layout .ek-powered { position: relative; z-index: 1; width: 54vw; margin-inline-end: auto; }
}
@media (prefers-reduced-motion: no-preference) {
    .fi-body .fi-simple-main { animation: ek-rise-once .6s var(--ek-ease) both; }
}
.fi-body .ek-login-back {
    display: inline-flex !important; align-items: center; gap: .45rem !important;
    padding: .5rem .95rem .5rem .7rem; margin-bottom: .25rem;
    border-radius: 999px;
    background: var(--ek-sunken); color: var(--ek-ink) !important;
    font-weight: 700 !important; font-size: .9rem; text-decoration: none;
    transition: background-color .2s ease;
}
.fi-body .ek-login-back:hover { background: var(--ek-soft); color: var(--ek-soft-ink) !important; }
.fi-body .ek-login-back svg { width: 18px; height: 18px; transition: transform .25s var(--ek-ease); }
.fi-body .ek-login-back:hover svg { transform: translateX(-3px); }

/* =====================================================================
   The park panel's own views
   ===================================================================== */

/* ---------- Dashboard: action keys ---------- */
.ek-acts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .75rem; }
.ek-slab {
    display: flex; align-items: center; justify-content: center; gap: .65rem;
    min-height: 4.4rem; padding: .75rem 1rem;
    border-radius: 16px; border: 0;
    font: 700 1.05rem/1.2 'Public Sans', sans-serif;
    cursor: pointer; text-decoration: none;
    transition: transform .25s var(--ek-ease), box-shadow .25s var(--ek-ease), background-color .2s ease;
}
.ek-slab:hover { transform: translateY(-2px); }
.ek-slab:active { transform: scale(.98); }
.ek-slab svg { width: 26px; height: 26px; flex: none; }
.ek-slab-dark { background: var(--ek-green); color: var(--ek-on-green); box-shadow: 0 14px 28px -16px rgba(0, 122, 69, .8); }
.ek-slab-dark:hover { background: var(--ek-green-hover); }
.ek-slab-line { background: var(--ek-surface); color: var(--ek-ink); box-shadow: var(--ek-shadow), inset 0 0 0 1px var(--ek-line); }
.ek-slab-line svg { color: var(--ek-green); background: var(--ek-soft); border-radius: 10px; padding: 6px; width: 36px; height: 36px; }
.ek-slab-line:hover { box-shadow: var(--ek-shadow), inset 0 0 0 1.5px var(--ek-green); }

.ek-row { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; margin-top: 1rem; align-items: start; }
.ek-panel { background: var(--ek-surface); border-radius: var(--ek-radius); padding: 1.15rem 1.25rem 1.25rem; box-shadow: var(--ek-shadow); }
.ek-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ek-panel-head h2 { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.ek-panel-head span { font-size: .85rem; color: var(--ek-muted); font-weight: 600; }

/* Today's bays. */
.ek-bays { margin-top: .9rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.ek-bay {
    position: relative;
    min-height: 6rem;
    border-radius: 14px;
    background: var(--ek-surface-2);
    color: var(--ek-ink);
    padding: .6rem .7rem;
    display: flex; flex-direction: column; justify-content: space-between;
    text-align: left; border: 0; cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--ek-line), inset 4px 0 0 var(--ek-green);
    transition: transform .25s var(--ek-ease), box-shadow .25s var(--ek-ease);
}
.ek-bay:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--ek-green), inset 4px 0 0 var(--ek-green), var(--ek-shadow); }
.ek-bay.is-old { box-shadow: inset 0 0 0 1px var(--ek-line), inset 4px 0 0 var(--ek-line-strong); color: var(--ek-muted); }
.ek-bay-code { align-self: flex-start; background: var(--ek-soft); color: var(--ek-soft-ink); font: 800 .78rem/1 ui-monospace, monospace; letter-spacing: .08em; padding: .28rem .45rem; border-radius: 6px; }
.ek-bay-plate { font-weight: 800; font-size: 1.02rem; letter-spacing: .03em; }
.ek-bay-meta { font-size: .74rem; font-weight: 600; color: var(--ek-muted); }
.ek-bay-open {
    background: transparent; box-shadow: none;
    border: 2px dashed var(--ek-line-strong); color: var(--ek-muted);
    align-items: center; justify-content: center; gap: .25rem; text-align: center;
    font-weight: 700; font-size: .9rem;
}
.ek-bay-open:hover { border-color: var(--ek-green); color: var(--ek-green); box-shadow: none; }
.ek-bay-open svg { width: 22px; height: 22px; }
.ek-empty { margin-top: .9rem; color: var(--ek-muted); font-weight: 600; }

/* The wallet card: dark ink, the balance large, one filled action. */
.ek-wallet {
    position: relative; overflow: hidden;
    background: radial-gradient(120% 90% at 100% 0%, rgba(1, 168, 90, .28), transparent 60%), var(--ek-card);
    color: var(--ek-card-ink);
    border-radius: 20px;
    padding: 1.2rem 1.3rem 1.3rem;
    box-shadow: 0 22px 44px -26px rgba(4, 20, 11, .8);
}
.ek-wallet::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ek-tri); }
.ek-wallet-k { font-size: .78rem; font-weight: 600; color: var(--ek-card-muted); }
.ek-wallet-v { font: 800 2.6rem/1.05 'Public Sans', sans-serif; letter-spacing: -.03em; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.ek-wallet-m { margin-top: .5rem; font-size: .85rem; color: var(--ek-card-muted); display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.ek-wallet-m b { color: var(--ek-card-ink); }
.ek-wallet-acts { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.ek-wallet-acts .fi-btn { flex: 1 1 auto; justify-content: center; }
.fi-body .ek-wallet .ek-wallet-acts > .fi-btn.fi-btn { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--ek-card-line) !important; }
.fi-body .ek-wallet .ek-wallet-acts > .fi-btn.fi-btn, .fi-body .ek-wallet .ek-wallet-acts > .fi-btn.fi-btn * { color: var(--ek-card-ink) !important; }
.fi-body .ek-wallet .ek-wallet-acts > .fi-btn.fi-btn:hover { background: var(--ek-card-2) !important; }
.fi-body .ek-wallet .ek-wallet-acts > .fi-btn.fi-btn:first-child { flex-basis: 100%; background: #2fbf71 !important; box-shadow: 0 10px 22px -14px rgba(47, 191, 113, .9) !important; }
.fi-body .ek-wallet .ek-wallet-acts > .fi-btn.fi-btn:first-child, .fi-body .ek-wallet .ek-wallet-acts > .fi-btn.fi-btn:first-child * { color: #04140b !important; }
.fi-body .ek-wallet .ek-wallet-acts > .fi-btn.fi-btn:first-child:hover { background: #4fd08a !important; }

.ek-stats { margin-top: .75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ek-stat { background: var(--ek-surface); border-radius: 14px; padding: .8rem 1rem; box-shadow: var(--ek-shadow); }
.ek-stat b { display: block; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ek-stat span { font-size: .8rem; font-weight: 600; color: var(--ek-muted); }

.ek-result { margin-top: 1rem; }
.ek-result-grid { margin-top: .75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem 1.25rem; }
.ek-result-grid small { display: block; font-size: .74rem; font-weight: 600; color: var(--ek-muted); }
.ek-result-grid div > span { font-weight: 700; }
.ek-on { color: var(--ek-green); } .ek-off { color: var(--ek-red); } .ek-warn { color: var(--ek-amber); }

.ek-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.ek-table th { text-align: left; font-size: .75rem; font-weight: 700; color: var(--ek-muted); padding: .6rem .75rem; border-bottom: 1px solid var(--ek-line); background: var(--ek-surface-2); }
.ek-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--ek-line); }
.ek-table .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ek-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.ek-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ek-in { background: var(--ek-soft); color: var(--ek-soft-ink); }
.ek-out { background: var(--ek-red-soft); color: var(--ek-red); }

@media (max-width: 1100px) { .ek-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .ek-acts { grid-template-columns: minmax(0, 1fr); }
    .ek-bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Funding account: the bank card ---------- */
.ek-cards { display: grid; gap: .85rem; }
.ek-card {
    position: relative; overflow: hidden;
    border-radius: 20px;
    padding: 1.1rem 1.2rem 1.15rem;
    color: var(--ek-card-ink);
    background: radial-gradient(120% 90% at 100% 0%, rgba(255, 203, 1, .2), transparent 55%), var(--ek-card);
    box-shadow: inset 0 0 0 1px var(--ek-card-line), 0 18px 34px -22px rgba(0, 0, 0, .8);
}
.ek-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ek-tri); }
.ek-card-top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.ek-card-bank { font-weight: 700; font-size: .95rem; }
.ek-card-brand { font-weight: 800; font-size: .78rem; letter-spacing: .12em; color: var(--ek-yellow); }
.ek-card-label { font-size: .72rem; font-weight: 600; color: var(--ek-card-muted); }
.ek-card-number { margin: .2rem 0 .9rem; font: 800 1.85rem/1.1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #ffffff; }
.ek-card-number [data-copy] { cursor: copy; }
.ek-card-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; padding-bottom: .6rem; }
.ek-card-name { font-weight: 700; font-size: .95rem; }
.ek-card-btns { display: flex; gap: .4rem; }
.ek-card-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 0; background: var(--ek-card-2); color: var(--ek-card-ink); cursor: pointer; transition: background-color .2s ease, transform .2s var(--ek-ease); }
.ek-card-btn:hover { background: var(--ek-card-line); }
.ek-card-btn:active { transform: scale(.94); }
.ek-card-btn svg { width: 18px; height: 18px; }
.ek-card-copyall { width: 100%; margin: .4rem 0 .6rem; padding: .75rem; border-radius: 10px; border: 0; background: #2fbf71; color: #04140b; font-weight: 800; font-size: .98rem; cursor: pointer; transition: background-color .2s ease; }
.ek-card-copyall:hover { background: #4fd08a; }
.ek-card-note { font-size: .82rem; color: var(--ek-muted); text-align: center; margin-top: .2rem; }
.ek-cards.is-compact .ek-card { padding: .85rem .95rem .95rem; background: var(--ek-card-2); }
.ek-cards.is-compact .ek-card-top { margin-bottom: .5rem; }
.ek-cards.is-compact .ek-card-number { font-size: 1.4rem; margin-bottom: .4rem; }
.ek-wallet-account { margin-top: .9rem; }

/* ---------- Wallet ledger ---------- */
.ek-ledger { margin-top: 1rem; }
.ek-tabs { margin-top: .8rem; display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 12px; background: var(--ek-sunken); }
.ek-tab { border: 0; background: transparent; padding: .5rem .95rem; border-radius: 9px; font-weight: 700; font-size: .88rem; color: var(--ek-muted); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.ek-tab:hover { color: var(--ek-ink); }
.ek-tab.is-on { background: var(--ek-surface); color: var(--ek-soft-ink); box-shadow: var(--ek-shadow); }
.ek-day { margin: 1.1rem 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ek-muted); }
.ek-ledger-list { list-style: none; margin: 0; padding: 0; }
.ek-entry { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .85rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--ek-line); }
.ek-entry:last-child { border-bottom: 0; }
.ek-entry-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; }
.ek-entry-icon svg { width: 18px; height: 18px; }
.ek-entry-icon.is-in { background: var(--ek-soft); color: var(--ek-soft-ink); }
.ek-entry-icon.is-out { background: var(--ek-sunken); color: var(--ek-ink); }
.ek-entry.is-pending .ek-entry-icon { background: var(--ek-amber-soft); color: var(--ek-amber); }
.ek-entry.is-dead { opacity: .62; }
.ek-entry-title { font-weight: 700; }
.ek-entry-sub { font-size: .85rem; color: var(--ek-muted); overflow-wrap: anywhere; }
.ek-ref { margin-top: .25rem; display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: 0; font: 600 .75rem ui-monospace, monospace; color: var(--ek-muted); cursor: copy; }
.ek-ref:hover { color: var(--ek-ink); }
.ek-ref svg { width: 12px; height: 12px; }
.ek-entry-acts { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ek-chip { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; }
.ek-chip.is-pending { background: var(--ek-amber-soft); color: var(--ek-amber); }
.ek-chip.is-dead { background: var(--ek-sunken); color: var(--ek-muted); }
.ek-mini { font-weight: 700; font-size: .78rem; padding: .32rem .65rem; border-radius: 8px; border: 0; background: var(--ek-sunken); color: var(--ek-ink); cursor: pointer; text-decoration: none; }
.ek-mini:hover { background: var(--ek-line); }
.ek-mini.is-go { background: var(--ek-green); color: var(--ek-on-green); }
.ek-mini.is-danger { background: var(--ek-red-soft); color: var(--ek-red); }
.ek-entry-amt { text-align: right; white-space: nowrap; }
.ek-entry-amt b { display: block; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ek-entry-amt b.is-in { color: var(--ek-green); }
.ek-entry-amt small { font-size: .74rem; color: var(--ek-muted); }
.ek-more { margin-top: .75rem; width: 100%; padding: .7rem; border-radius: 10px; border: 2px dashed var(--ek-line-strong); background: transparent; font-weight: 700; color: var(--ek-muted); cursor: pointer; }
.ek-more:hover { border-color: var(--ek-green); color: var(--ek-green); }
.ek-ledger-empty { margin-top: 1.25rem; display: grid; justify-items: center; gap: .3rem; padding: 1.5rem 0; text-align: center; color: var(--ek-muted); }
.ek-ledger-empty svg { width: 36px; height: 36px; }
.ek-ledger-empty b { color: var(--ek-ink); }
@media (max-width: 560px) {
    .ek-entry { grid-template-columns: 2.25rem minmax(0, 1fr); }
    .ek-entry-amt { grid-column: 2; text-align: left; }
}

/* ---------- Settings: the account's own details ---------- */
.ek-profile { position: relative; overflow: hidden; border-radius: 20px; background: var(--ek-surface); color: var(--ek-ink); padding: 1.3rem 1.35rem 1.15rem; box-shadow: var(--ek-shadow); }
.ek-profile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ek-tri); }
.ek-profile-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.ek-profile-avatar { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--ek-soft); color: var(--ek-soft-ink); font-weight: 800; font-size: 1.2rem; }
.ek-profile h2 { font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.ek-profile-head p { margin-top: .25rem; color: var(--ek-muted); font-weight: 600; font-size: .92rem; }
.ek-profile-badge { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--ek-soft); color: var(--ek-soft-ink); font-weight: 700; font-size: .75rem; }
.ek-profile-badge svg { width: 14px; height: 14px; }
.ek-profile-grid { margin: 1.1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.ek-profile-grid div { background: var(--ek-surface-2); box-shadow: inset 0 0 0 1px var(--ek-line); border-radius: 12px; padding: .7rem .85rem; }
.ek-profile-grid dt { font-size: .74rem; font-weight: 600; color: var(--ek-muted); }
.ek-profile-grid dd { margin: .2rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.ek-profile-grid dd.is-empty { color: var(--ek-muted); font-weight: 600; font-style: italic; }
.ek-profile-note { margin: .9rem 0 .5rem; font-size: .85rem; color: var(--ek-muted); }
.ek-profile-note a { color: var(--ek-green); font-weight: 700; text-underline-offset: 3px; }

/* ---------- Owner's phone check (Register a bus) ---------- */
.ek-otp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.ek-otp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.ek-otp-phone small { display: block; font-size: .74rem; font-weight: 600; color: var(--ek-muted); }
.ek-otp-phone b { font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; }
.ek-otp-send, .ek-otp-verify { border: 0; cursor: pointer; border-radius: 10px; padding: .75rem 1.25rem; font-weight: 700; font-size: .98rem; transition: background-color .2s ease, transform .2s var(--ek-ease), opacity .2s ease; }
.ek-otp-send { background: var(--ek-soft); color: var(--ek-soft-ink); }
.ek-otp-send:hover:not(:disabled) { background: var(--ek-green); color: var(--ek-on-green); }
.ek-otp-verify { background: var(--ek-green); color: var(--ek-on-green); justify-self: start; min-width: 12rem; }
.ek-otp-verify:hover:not(:disabled) { background: var(--ek-green-hover); }
.ek-otp-send:active, .ek-otp-verify:active { transform: scale(.98); }
.ek-otp-send:disabled, .ek-otp-verify:disabled { opacity: .45; cursor: not-allowed; }
.ek-otp-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1rem; border-radius: 14px; background: var(--ek-surface-2); box-shadow: inset 0 0 0 1px var(--ek-line); }
.ek-otp-label { font-weight: 700; font-size: .92rem; }
/* Every box stays on one row: they share the width and shrink on a narrow phone rather than wrap. */
.ek-otp-boxes { display: flex; gap: clamp(.3rem, 1.6vw, .5rem); flex-wrap: nowrap; max-width: 21rem; }
.ek-otp-boxes input {
    flex: 1 1 0; width: 0; min-width: 0; max-width: 3rem; height: 3.5rem; padding: 0;
    border: 0; border-radius: 10px;
    background: var(--ek-surface); box-shadow: inset 0 0 0 1.5px var(--ek-line-strong);
    text-align: center; font: 800 1.55rem/1 'Public Sans', sans-serif; color: var(--ek-ink);
    outline: none; transition: box-shadow .2s ease, transform .2s var(--ek-ease);
}
.ek-otp-boxes input:focus { box-shadow: inset 0 0 0 2px var(--ek-green), var(--ek-ring); transform: translateY(-1px); }
.ek-otp-hint { font-size: .82rem; color: var(--ek-muted); }
.ek-otp-demo { padding: .7rem .85rem; border-radius: 10px; background: var(--ek-amber-soft); font-size: .88rem; }
.ek-otp-demo-code { margin-left: .25rem; font: 800 1.15rem ui-monospace, monospace; letter-spacing: .18em; cursor: copy; }
.ek-otp-done { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: 14px; background: var(--ek-soft); color: var(--ek-soft-ink); }
.ek-otp-done b { display: block; font-weight: 800; font-size: 1.05rem; }
.ek-otp-done span { font-size: .9rem; font-weight: 600; }
.ek-otp-tick { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ek-green); color: var(--ek-on-green); flex: none; }
.ek-otp-tick svg { width: 1.3rem; height: 1.3rem; }
@media (max-width: 420px) { .ek-otp-entry { padding: .85rem .75rem; } .ek-otp-boxes input { height: 3.1rem; font-size: 1.35rem; } .ek-otp-verify { min-width: 0; width: 100%; } }

/* The QR sticker section while the owner's phone is not yet verified. */
.fi-body .ek-locked { opacity: .55; filter: grayscale(.4); pointer-events: none; }
.fi-body .ek-locked .fi-section-header-heading::after { content: ' · locked'; color: var(--ek-amber); font-size: .85em; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* Each section rises into place as it scrolls into view. Pure CSS
       (scroll-driven animation), so Livewire re-renders never replay it;
       where unsupported, everything simply shows. */
    @supports (animation-timeline: view()) {
        .fi-body .ek-reveal { animation: ek-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    }
    .fi-body .ek-bay { animation: ek-bay-in .45s var(--ek-ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
    .fi-body .ek-acts > * { animation: ek-rise-once .55s var(--ek-ease) backwards; }
    .fi-body .ek-acts > *:nth-child(2) { animation-delay: 60ms; }
    .fi-body .ek-acts > *:nth-child(3) { animation-delay: 120ms; }
    .fi-body .fi-wi-stats-overview-stat { animation: ek-rise-once .5s var(--ek-ease) backwards; }
    .fi-body .fi-wi-stats-overview-stat:nth-child(2) { animation-delay: 50ms; }
    .fi-body .fi-wi-stats-overview-stat:nth-child(3) { animation-delay: 100ms; }
    .fi-body .fi-wi-stats-overview-stat:nth-child(4) { animation-delay: 150ms; }
}
@keyframes ek-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ek-rise-once { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ek-bay-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }