.zfel-app {
    --zfel-ink: #18211c;
    --zfel-muted: #59645c;
    --zfel-line: #dce2d8;
    --zfel-lime: #d7ff00;
    box-sizing: border-box;
    width: min(1180px, 94%);
    margin: 36px auto 64px;
    padding: clamp(20px, 4vw, 44px);
    border: 1px solid #e4e9df;
    border-radius: 24px;
    background: #f7f9f3;
    color: var(--zfel-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    isolation: isolate;
}
.zfel-app *, .zfel-app *::before, .zfel-app *::after { box-sizing: border-box; }
.zfel-app [hidden] { display: none !important; }
.zfel-page[hidden] { display: none !important; }
.zfel-app :is(h1,h2,h3,p) { margin: 0; color: inherit; font-family: inherit; }
.zfel-app :is(button,input,select,textarea) { font: inherit; letter-spacing: normal; text-transform: none; }
.zfel-app :is(button,input,select,textarea,a,summary):focus-visible { outline: 3px solid #354b22; outline-offset: 4px; }
.zfel-app a { color: #314b13; text-decoration: underline; text-underline-offset: 3px; }
.zfel-app .zfel-header { display: flex; flex-direction: column; gap: 28px; margin-bottom: 24px; }
.zfel-app .zfel-eyebrow { margin-bottom: 10px; color: #4c5a38; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.zfel-app .zfel-heading { max-width: 20ch; font-size: clamp(29px, 4vw, 44px); font-weight: 750; line-height: 1.15; letter-spacing: -.035em; }
.zfel-app .zfel-subtitle { margin-top: 12px; color: var(--zfel-muted); }
.zfel-app .zfel-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.zfel-app .zfel-toolbar > .zfel-field { flex: 1 1 290px; }
.zfel-app .zfel-field { min-width: 0; }
.zfel-app .zfel-label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 700; color: var(--zfel-ink); }
.zfel-app .zfel-hint { margin: 7px 0 0; color: var(--zfel-muted); font-size: 12px; line-height: 1.5; }
.zfel-app .zfel-input, .zfel-app .zfel-select {
    display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0;
    padding: 11px 13px; border: 1px solid #a9b5a4; border-radius: 10px;
    background: #fff; color: var(--zfel-ink); box-shadow: none; line-height: 1.4; color-scheme: light;
}
.zfel-app .zfel-select { padding-right: 35px; appearance: auto; }
.zfel-app textarea.zfel-input { min-height: 78px; resize: vertical; }
.zfel-app .zfel-input::placeholder { color: #75806f; opacity: 1; }
.zfel-app .zfel-input[aria-invalid="true"] { border: 2px solid #ae3232; }
.zfel-app #zfel-wristband { max-width: 420px; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.zfel-app .zfel-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; max-width: 100%; margin: 0; padding: 11px 18px;
    border: 1px solid #bac5b3; border-radius: 10px; background: #fff; color: var(--zfel-ink);
    box-shadow: none; font-size: 14px; font-weight: 700; line-height: 1.4; cursor: pointer; text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.zfel-app .zfel-button:hover { background: #edf1e7; border-color: #718362; color: var(--zfel-ink); }
.zfel-app .zfel-button--primary { background: var(--zfel-lime); border-color: #a3c300; color: #1c260a; }
.zfel-app .zfel-button--primary:hover { background: #c8ee00; border-color: #869f00; color: #1c260a; }
.zfel-app .zfel-button--quiet { background: #fff; }
.zfel-app .zfel-button--danger { background: #fff5f3; border-color: #dcb1a9; color: #8b2922; }
.zfel-app .zfel-button--danger:hover { background: #fae7e3; border-color: #ad5d50; color: #7a211b; }
.zfel-app :is(button,input,select,textarea):disabled { opacity: .55; cursor: not-allowed; }
.zfel-app .zfel-status { margin: 0 0 20px; padding: 13px 16px; border: 1px solid #d8e2c8; border-radius: 10px; background: #edf4e3; color: #314127; overflow-wrap: anywhere; font-size: 14px; }
.zfel-app .zfel-status:empty { display: none; }
.zfel-app .zfel-status--error { background: #fff0ed; border-color: #e4b9b0; color: #852c23; }
.zfel-app .zfel-status--success { background: #edf5df; border-color: #bdcea5; color: #2f4a16; }
.zfel-app .zfel-status--loading { background: #f0f2ec; border-color: #d7decf; color: #536047; }
.zfel-app .zfel-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0 0 24px; }
.zfel-app .zfel-summary-item { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--zfel-line); border-radius: 12px; background: #fff; }
.zfel-app .zfel-summary-item strong { font-size: 26px; line-height: 1.15; font-weight: 750; font-variant-numeric: tabular-nums; }
.zfel-app .zfel-summary-item span { color: var(--zfel-muted); font-size: 12px; }
.zfel-app .zfel-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 0; padding: 5px; border: 1px solid var(--zfel-line); border-radius: 14px 14px 0 0; background: #edf1e8; }
.zfel-app .zfel-tab { flex: 1 0 auto; min-height: 46px; margin: 0; padding: 11px 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #536149; box-shadow: none; font-size: 14px; font-weight: 700; line-height: 1.4; cursor: pointer; }
.zfel-app .zfel-tab:hover { color: var(--zfel-ink); background: #f8fbf3; }
.zfel-app .zfel-tab[aria-selected="true"] { background: #fff; border-color: #ccd8bd; color: #1f3011; box-shadow: 0 2px 4px #2031110a; }
.zfel-app .zfel-panel { min-height: 270px; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--zfel-line); border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
.zfel-app .zfel-panel > * + * { margin-top: 22px; }
.zfel-app .zfel-section-title { font-size: 21px; line-height: 1.3; font-weight: 750; letter-spacing: -.02em; }
.zfel-app .zfel-form { display: flex; align-items: flex-start; gap: 12px; }
.zfel-app .zfel-form > .zfel-field { flex: 1 1 240px; }
.zfel-app .zfel-form > .zfel-button { flex: 0 0 auto; margin-top: 28px; }
.zfel-app .zfel-empty { padding: 28px 20px; border: 1px dashed #d0d9c9; border-radius: 12px; background: #fafbf8; color: var(--zfel-muted); text-align: center; line-height: 1.6; }
.zfel-app .zfel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: 14px; }
.zfel-app .zfel-game-card { display: flex; gap: 16px; min-width: 0; padding: 16px; border: 1px solid var(--zfel-line); border-radius: 13px; background: #fff; overflow-wrap: anywhere; }
.zfel-app .zfel-game-main { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.zfel-app .zfel-game-main > .zfel-field { width: 100%; }
.zfel-app .zfel-game-title { font-size: 17px; font-weight: 750; line-height: 1.4; letter-spacing: -.015em; }
.zfel-app .zfel-cover { display: flex; align-items: center; justify-content: center; flex: 0 0 90px; width: 90px; height: 108px; padding: 7px; border-radius: 8px; background: #f5f6f1; color: #7a8473; font-size: 10px; text-align: center; overflow: hidden; }
.zfel-app .zfel-cover img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; object-fit: contain; box-shadow: none; }
.zfel-app .zfel-meta { color: var(--zfel-muted); font-size: 12px; line-height: 1.5; }
.zfel-app .zfel-counter { color: #30451d; font-size: 13px; font-weight: 700; }
.zfel-app .zfel-badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border: 1px solid #d7e1ca; border-radius: 6px; background: #f0f5e9; color: #46612b; font-size: 11px; font-weight: 700; line-height: 1.45; }
.zfel-app .zfel-badge--warning { background: #fff7dc; border-color: #e6d49a; color: #785812; }
.zfel-app .zfel-badge--danger { background: #fff0ed; border-color: #e7bab2; color: #8f3228; }
.zfel-app .zfel-selected { display: flex; gap: 20px; padding: 22px; border: 2px solid #a8bd83; border-radius: 14px; background: #f9fceF; }
.zfel-app .zfel-selected > .zfel-cover { flex-basis: 120px; width: 120px; height: 145px; background: #fff; }
.zfel-app .zfel-selected .zfel-game-title { font-size: 21px; }
.zfel-app .zfel-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.zfel-app .zfel-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zfel-app .zfel-loan-filters .zfel-button { min-height: 40px; padding: 8px 12px; font-size: 12px; }
.zfel-app .zfel-loan-filters .zfel-button[aria-pressed="true"] { color: #253813; border-color: #9eb57b; background: #edf5dd; }
.zfel-app .zfel-loans { display: flex; flex-direction: column; gap: 14px; }
.zfel-app .zfel-loan-card { display: grid; grid-template-columns: 80px minmax(160px, 1fr) minmax(220px,1.25fr); gap: 18px; align-items: start; padding: 20px; border: 1px solid var(--zfel-line); border-radius: 13px; background: #fff; }
.zfel-app .zfel-loan-card > .zfel-cover { width: 80px; height: 96px; }
.zfel-app .zfel-loan-main { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.zfel-app .zfel-loan-card > .zfel-actions { width: 100%; }
.zfel-app .zfel-loan-card .zfel-actions > .zfel-field { width: 100%; }
.zfel-app .zfel-wristband { color: #3d4e2b; font-size: 12px; font-weight: 800; letter-spacing: .025em; font-variant-numeric: tabular-nums; }
.zfel-app .zfel-note { color: var(--zfel-muted); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.zfel-app .zfel-banner { padding: 12px 16px; border: 1px solid #d9dfd2; border-radius: 10px; background: #f1f3ed; color: #536148; font-size: 13px; }
.zfel-app .zfel-setup { padding: 18px; border: 1px solid #e2d2c9; border-radius: 12px; background: #fffaf7; }
.zfel-app .zfel-setup summary { cursor: pointer; color: #7a4431; font-size: 14px; font-weight: 700; }
.zfel-app .zfel-setup > :not(summary) { margin-top: 15px; }
.zfel-app .zfel-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.zfel-app .zfel-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #657f39; }
.zfel-app .zfel-divider { width: 100%; height: 1px; margin: 28px 0; border: 0; background: var(--zfel-line); }
.zfel-app .zfel-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 18px; border-top: 1px solid var(--zfel-line); }
.zfel-app .zfel-pagination .zfel-meta { text-align: center; }

/* The owner and sign-in forms supplied by PHP sit outside the application shell. */
.zfel-login-card, .zfel-access {
    box-sizing: border-box; width: min(700px, 94%); margin: 36px auto; padding: clamp(22px, 4vw, 36px);
    border: 1px solid #dce2d8; border-radius: 20px; background: #f7f9f3; color: #18211c;
    font-family: inherit; font-size: 15px; line-height: 1.55; text-align: left;
}
.zfel-login-card { max-width: 520px; }
.zfel-page .zfel-login-card h1 { margin: 0 0 16px; color: #18211c; font-family: inherit; font-size: clamp(26px,3vw,34px); font-weight: 750; line-height: 1.2; letter-spacing: -.025em; text-transform: none; }
.zfel-page .zfel-login-card label { display: block; margin: 0 0 6px; color: #18211c; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; text-transform: none; }
.zfel-page .zfel-login-card input:not([type="checkbox"]):not([type="hidden"]):not([type="submit"]) { display: block; width: 100%; min-height: 48px; margin: 6px 0 0; padding: 11px 13px; border: 1px solid #a9b5a4; border-radius: 10px; background: #fff; color: #18211c; box-shadow: none; font: inherit; line-height: 1.4; }
.zfel-access { max-width: 1180px; width: 94%; }
:is(.zfel-login-card,.zfel-access) *, :is(.zfel-login-card,.zfel-access) *::before, :is(.zfel-login-card,.zfel-access) *::after { box-sizing: border-box; }
:is(.zfel-login-card,.zfel-access) :is(h1,h2,h3,p,label,legend) { color: inherit; font-family: inherit; text-transform: none; }
:is(.zfel-login-card,.zfel-access) :is(h1,h2,h3) { line-height: 1.25; letter-spacing: -.025em; }
:is(.zfel-login-card,.zfel-access) :is(h1,h2) { font-size: clamp(24px,3vw,32px); }
:is(.zfel-login-card,.zfel-access) form { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 20px 0 0; }
:is(.zfel-login-card,.zfel-access) label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
:is(.zfel-login-card,.zfel-access) :is(input,select,textarea,button) { font: inherit; letter-spacing: normal; text-transform: none; }
:is(.zfel-login-card,.zfel-access) :is(input:not([type="checkbox"]):not([type="hidden"]):not([type="submit"]),select,textarea) {
    display: block; width: 100%; min-width: 0; min-height: 48px; margin: 6px 0 0; padding: 11px 13px;
    border: 1px solid #a9b5a4; border-radius: 10px; background: #fff; color: #18211c; box-shadow: none; color-scheme: light;
}
:is(.zfel-login-card,.zfel-access) input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: middle; accent-color: #657f39; }
:is(.zfel-login-card,.zfel-access) label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; font-weight: 500; }
:is(.zfel-login-card,.zfel-access) fieldset { min-width: 0; margin: 0; padding: 14px 16px; border: 1px solid #d5decc; border-radius: 10px; }
:is(.zfel-login-card,.zfel-access) legend { width: auto; padding: 0 6px; font-size: 14px; font-weight: 700; }
:is(.zfel-login-card,.zfel-access) a { color: #314b13; text-underline-offset: 3px; }
.zfel-primary, :is(.zfel-login-card,.zfel-access) button[type="submit"], :is(.zfel-login-card,.zfel-access) input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 11px 18px;
    border: 1px solid #a3c300; border-radius: 10px; background: #d7ff00; color: #1c260a; box-shadow: none;
    font: inherit; font-weight: 700; line-height: 1.4; text-transform: none; cursor: pointer;
}
.zfel-primary:hover, :is(.zfel-login-card,.zfel-access) button[type="submit"]:hover { border-color: #869f00; background: #c8ee00; color: #1c260a; }
.zfel-message { margin: 16px 0; padding: 13px 16px; border: 1px solid #bdcea5; border-radius: 10px; background: #edf5df; color: #2f4a16; font-size: 14px; line-height: 1.6; }
.zfel-error, .zfel-message.zfel-error { margin: 16px 0; padding: 13px 16px; border: 1px solid #e4b9b0; border-radius: 10px; background: #fff0ed; color: #852c23; font-size: 14px; line-height: 1.6; }
.zfel-muted { color: #59645c; font-size: 13px; line-height: 1.6; }
.zfel-logout { display: flex; align-items: center; justify-content: flex-end; gap: 12px; width: min(1180px,94%); margin: 24px auto 0; font-family: inherit; }
.zfel-logout form { margin: 0; }
.zfel-logout button { min-height: 42px; margin: 0; padding: 9px 16px; border: 1px solid #bac5b3; border-radius: 10px; background: #fff; color: #18211c; box-shadow: none; font: inherit; font-size: 13px; font-weight: 700; text-transform: none; cursor: pointer; }
:is(.zfel-login-card,.zfel-access,.zfel-logout) :is(button,input,select,textarea,a):focus-visible, .zfel-primary:focus-visible { outline: 3px solid #354b22; outline-offset: 4px; }
:is(.zfel-login-card,.zfel-access,.zfel-logout) :is(button,input,select,textarea):disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 950px) {
    .zfel-app .zfel-grid { grid-template-columns: 1fr; }
    .zfel-app .zfel-loan-card { grid-template-columns: 80px minmax(0,1fr); }
    .zfel-app .zfel-loan-card > .zfel-actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .zfel-app { width: 96%; margin: 20px auto 40px; padding: 16px; border-radius: 16px; }
    .zfel-app .zfel-header { gap: 20px; }
    .zfel-app .zfel-toolbar { gap: 8px; }
    .zfel-app .zfel-toolbar > .zfel-field { flex-basis: 100%; }
    .zfel-app .zfel-toolbar > .zfel-button { flex: 1 1 auto; font-size: 12px; padding: 9px 10px; }
    .zfel-app .zfel-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .zfel-app .zfel-summary-item { padding: 12px; }
    .zfel-app .zfel-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
    .zfel-app .zfel-tab { width: 100%; min-width: 0; padding: 10px 12px; font-size: 12px; }
    .zfel-app .zfel-tab:last-child:nth-child(3) { grid-column: 1 / -1; }
    .zfel-app .zfel-panel { padding: 16px 12px; }
    .zfel-app .zfel-form { flex-direction: column; align-items: stretch; gap: 10px; }
    .zfel-app .zfel-form > .zfel-field { flex: 0 1 auto; }
    .zfel-app .zfel-form > .zfel-button { width: 100%; margin-top: 0; }
    .zfel-app .zfel-game-card { padding: 13px; gap: 12px; }
    .zfel-app .zfel-cover { width: 72px; flex-basis: 72px; height: 90px; }
    .zfel-app .zfel-selected { padding: 14px; gap: 12px; }
    .zfel-app .zfel-selected > .zfel-cover { flex-basis: 72px; width: 72px; height: 90px; }
    .zfel-app .zfel-selected .zfel-game-title { font-size: 18px; }
    .zfel-app .zfel-selected .zfel-actions .zfel-button { width: 100%; }
    .zfel-app .zfel-loan-card { padding: 14px; gap: 12px; grid-template-columns: 64px minmax(0,1fr); }
    .zfel-app .zfel-loan-card > .zfel-cover { width: 64px; height: 80px; }
    .zfel-app .zfel-loan-card .zfel-inline { width: 100%; }
    .zfel-app .zfel-loan-card .zfel-inline > .zfel-button { flex: 1 1 100%; }
    .zfel-app .zfel-game-title { font-size: 15px; }
    .zfel-app .zfel-section-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .zfel-app .zfel-button { transition: none; } }