/* V152 — FinSave-inspired modular banking UI, AXE red/white edition.
   Presentation layer only: existing PHP, MySQL queries and progress logic are preserved. */
:root{
 --ui-red:#c8102e;--ui-red-2:#e12b49;--ui-red-soft:#fff0f2;--ui-ink:#17191f;
 --ui-muted:#747b86;--ui-line:#e8e9ed;--ui-bg:#f3f4f6;--ui-card:#fff;
 --ui-shadow:0 12px 34px rgba(22,28,38,.055);--ui-radius:22px;
}
html{background:var(--ui-bg);scroll-behavior:smooth}
body{color:var(--ui-ink)}
.sf-layout{background:var(--ui-bg);grid-template-columns:252px minmax(0,1fr)}
.sf-side{position:sticky;top:0;height:100vh;border-right:1px solid var(--ui-line);padding:25px 17px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px)}
.sf-brand{min-height:54px}
.sf-brand-mark{background:linear-gradient(145deg,var(--ui-red-2),#a90025);box-shadow:0 8px 18px #c8102e24}
.sf-nav{gap:6px}
.sf-nav a{border-radius:14px;padding:12px 13px;font-weight:650;transition:background .18s,color .18s,transform .18s}
.sf-nav a:hover{transform:translateX(2px);background:#fff3f4}
.sf-nav a.active{background:var(--ui-red-soft);color:var(--ui-red)}
.sf-side-foot{font-size:10px;letter-spacing:.02em}
.sf-main{padding:25px clamp(17px,3vw,42px) 42px}
.sf-topbar{align-items:center;margin-bottom:24px}
.sf-topbar h1{font-size:clamp(22px,2.1vw,29px);font-weight:760;letter-spacing:-.045em}
.sf-crumb{font-size:11px}
.sf-profile{border-radius:15px;box-shadow:0 4px 14px #141a2410}
.sf-card,.mt-panel,.card{border-radius:var(--ui-radius);border:1px solid var(--ui-line);box-shadow:var(--ui-shadow)}
.sf-card{padding:22px;background:var(--ui-card)}
.sf-card h2{font-weight:760}
.sf-kicker{letter-spacing:.14em}
.sf-red-card{background:linear-gradient(135deg,#e51e3d 0%,#c8102e 65%,#9f0b24 100%);border:0}
.sf-progress{height:9px;background:#f2e5e8;border-radius:99px}
.sf-progress i{background:linear-gradient(90deg,#c8102e,#f06a7e)}
.sf-pill{border-radius:999px}
.sf-link{border-radius:13px;background:var(--ui-red);box-shadow:0 7px 16px #c8102e20}
.sf-link:hover{filter:brightness(.96);transform:translateY(-1px)}
.sf-periods button,.admin-tab{border-radius:11px}
.sf-periods button.active,.admin-tab.is-active{background:var(--ui-red);color:#fff}
.sf-conversion-highlight{background:linear-gradient(135deg,#e51e3d,#c8102e 72%,#9f0b24)!important;border-radius:22px}
.sf-console-page{background:#fff!important;color:#20232a!important;border:1px solid var(--ui-line);border-radius:22px;box-shadow:var(--ui-shadow)}
.sf-console-page .sf-console-head{border-color:#eceef1}
.sf-console-page .sf-kicker,.sf-console-page .sf-muted{color:#747b86}
.sf-console-page pre,.sf-console-page code,.sf-console-page .sf-console-output{background:#17191f;color:#f4f5f7;border-radius:14px}
.sf-mobile-nav{box-shadow:0 -8px 28px #1018280d}
.sf-mobile-nav a{border-radius:12px}
.sf-mobile-nav a.active{background:#fff0f2}
button,input,select,textarea{font:inherit}
button{transition:filter .16s,transform .16s}
button:hover{filter:brightness(.98)}
input,select,textarea{border-radius:12px;border:1px solid #dfe2e7;background:#fff}
input:focus,select:focus,textarea:focus{outline:3px solid #c8102e18;border-color:#d35a6e}
.admin.app{max-width:1100px;padding:26px 22px 60px}
.admin-head{padding:18px 20px;background:#fff;border:1px solid var(--ui-line);border-radius:20px;box-shadow:var(--ui-shadow)}
.admin-head h1{font-size:27px;letter-spacing:-.04em}
.admin-head>a{padding:10px 14px;border-radius:11px;background:var(--ui-red-soft);text-decoration:none;font-weight:800}
.card.form{padding:26px}
.admin-tabbar{display:flex;gap:8px;flex-wrap:wrap;padding:6px;background:#f4f5f7;border-radius:15px}
.admin-tab{width:auto;padding:11px 15px;border:0;background:transparent;color:#626a75;font-weight:750}
.admin-tab.is-active{box-shadow:0 5px 12px #c8102e24}
.admin-tab-panel{padding-top:8px}
.form h2,.logo-section h2{padding-top:16px;border-top:1px solid var(--ui-line);font-size:16px}
label{color:#363b44}
input,select,textarea{padding:12px 13px}
button[type=submit],.form button{background:var(--ui-red);border-radius:12px}
.success{background:#eff8f2;color:#176b3a;border-color:#cce8d4}
.error{background:#fff0f2;color:#a30d29;border-color:#f1c6ce}
.manual-box,.admin-progress{background:#fafafb;border:1px solid var(--ui-line);border-radius:16px}
.market-terminal{background:#f3f4f6!important;color:#17191f!important;font-family:Inter,Arial,sans-serif!important}
.mt-topbar{background:#fff!important;color:#17191f!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:0 5px 20px #15192308}
.mt-brand strong,.mt-intro h1,.mt-panel-head h2{color:#17191f!important}
.mt-brand small,.mt-head-status,.mt-intro p,.mt-kicker{color:#747b86!important}
.mt-brand-mark{background:var(--ui-red)!important;border-color:var(--ui-red)!important;color:#fff!important}
.mt-main{max-width:1600px}
.mt-commandline{background:#17191f!important;border:1px solid #17191f!important;color:#f5f6f8!important;border-radius:13px}
.mt-prompt,.mt-command-state{color:#ff647b!important}
.mt-ticker-strip{border:1px solid var(--ui-line)!important;background:#fff!important;border-radius:14px}
.mt-panel{background:#fff!important;border-color:var(--ui-line)!important;border-radius:20px!important;box-shadow:var(--ui-shadow)}
.mt-tag{background:#fff0f2!important;color:var(--ui-red)!important;border-color:#f4cbd2!important;border-radius:99px}
.mt-close{background:var(--ui-red)!important;color:#fff!important;border-color:var(--ui-red)!important;border-radius:12px}
.mt-footer{border-color:var(--ui-line)!important;color:#747b86!important}
.mt-footer p{color:#747b86!important}
.ui-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 13px;border:1px solid var(--ui-line);border-radius:13px;background:#fff;color:#252a32;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
.ui-theme-toggle i{color:var(--ui-red)}
.ui-theme-toggle:hover{background:var(--ui-red-soft);border-color:#f2c6cf}
.ui-theme-slot{display:flex;align-items:center;gap:10px}
body.ui-dark{--ui-ink:#edf0f4;--ui-muted:#9ba4b0;--ui-line:#2a3039;--ui-bg:#101318;--ui-card:#191e25;--ui-shadow:0 14px 36px #0005;background:var(--ui-bg);color:var(--ui-ink)}
body.ui-dark .sf-side,body.ui-dark .sf-card,body.ui-dark .card,body.ui-dark .admin-head,body.ui-dark .mt-topbar,body.ui-dark .mt-panel{background:#191e25!important;color:#edf0f4!important;border-color:#2a3039!important}
body.ui-dark .sf-layout,body.ui-dark .sf-main,body.ui-dark .market-terminal{background:#101318!important;color:#edf0f4!important}
body.ui-dark .sf-nav a{color:#b3bbc5}
body.ui-dark .sf-nav a.active,body.ui-dark .sf-nav a:hover,body.ui-dark .sf-mobile-nav a.active{background:#35151d;color:#ff7185}
body.ui-dark .sf-profile,body.ui-dark .ui-theme-toggle,body.ui-dark input,body.ui-dark select,body.ui-dark textarea{background:#11161c;color:#edf0f4;border-color:#343c47}
body.ui-dark .sf-muted,body.ui-dark .sf-crumb,body.ui-dark .sf-kicker,body.ui-dark .sf-list-copy small,body.ui-dark .mt-intro p,body.ui-dark .mt-kicker{color:#9ba4b0!important}
body.ui-dark .sf-list-row,body.ui-dark .sf-console-head{border-color:#2a3039}
body.ui-dark .sf-console-page{background:#191e25!important;color:#edf0f4!important;border-color:#2a3039}
body.ui-dark .admin-tabbar,body.ui-dark .manual-box,body.ui-dark .admin-progress{background:#11161c;border-color:#343c47}
body.ui-dark .admin-tab{color:#c4cbd4}
body.ui-dark .admin-tab.is-active{background:var(--ui-red);color:#fff}
body.ui-dark .mt-brand strong,body.ui-dark .mt-intro h1,body.ui-dark .mt-panel-head h2{color:#edf0f4!important}
body.ui-dark .mt-brand small,body.ui-dark .mt-head-status{color:#9ba4b0!important}
body.ui-dark .mt-tag{background:#35151d!important;color:#ff7185!important;border-color:#5c2834!important}
body.ui-dark .sf-mobile-nav{background:rgba(25,30,37,.94);border-color:#2a3039}
body.ui-dark .sf-mobile-nav a{color:#aab3bf}
body.ui-dark .sf-mobile-nav a.active{color:#ff7185}
body.ui-dark .success{background:#14251c;color:#9be0b5;border-color:#28583d}
body.ui-dark .error{background:#35151d;color:#ff9aaa;border-color:#6a2b3b}
@media(max-width:850px){
 .sf-side{display:none}
 .sf-main{padding-bottom:105px}
 .admin.app{padding:12px 10px 40px}
 .admin-head{padding:15px;gap:12px}
 .card.form{padding:17px}
 .ui-theme-toggle{min-height:36px;padding:8px 10px}
}
@media(max-width:560px){
 .ui-theme-toggle .ui-theme-label{display:none}
 .sf-topbar{align-items:flex-start}
 .sf-topbar-left{min-width:0}
 .sf-topbar h1{font-size:21px}
 .mt-main{padding:14px 10px}
 .mt-topbar{padding:0 10px!important}
 .mt-brand strong{font-size:10px}
}

/* V153 — AJAX navigation, touch gestures, bottom sheet and resilient feedback. */
.ui-navigation-loading{position:fixed;z-index:9999;top:12px;left:50%;transform:translate(-50%,-18px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-ink);box-shadow:0 10px 30px rgba(20,25,35,.15);font-size:12px;font-weight:750;transition:opacity .18s,transform .18s}
.ui-navigation-loading.is-visible{opacity:1;transform:translate(-50%,0)}
.ui-loading-dot{width:8px;height:8px;border-radius:50%;background:var(--ui-red);box-shadow:0 0 0 5px var(--ui-red-soft);animation:uiPulse 1s infinite}
@keyframes uiPulse{50%{box-shadow:0 0 0 9px transparent}}
.ui-feedback-toast{position:fixed;z-index:10000;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:min(92vw,560px);padding:13px 15px;border:1px solid var(--ui-line);border-radius:15px;background:var(--ui-card);color:var(--ui-ink);box-shadow:0 12px 35px rgba(0,0,0,.18);font-size:12px}
.ui-feedback-toast button{border:0;border-radius:10px;background:var(--ui-red);color:#fff;padding:9px 12px;font-weight:800;cursor:pointer}
.ui-sheet-trigger{display:none;align-items:center;gap:8px;border:1px solid var(--ui-line);border-radius:13px;background:var(--ui-card);color:var(--ui-ink);padding:10px 13px;font-size:12px;font-weight:800;cursor:pointer}
.ui-sheet-trigger i{color:var(--ui-red)}
.ui-bottom-sheet{position:fixed;z-index:9990;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:12px;background:rgba(15,18,24,.0);pointer-events:none;transition:background .2s}
.ui-bottom-sheet.is-open{background:rgba(15,18,24,.48);pointer-events:auto}
.ui-bottom-sheet-panel{width:min(100%,560px);max-height:min(78vh,720px);overflow:auto;padding:10px 18px calc(20px + env(safe-area-inset-bottom));border:1px solid var(--ui-line);border-radius:25px 25px 18px 18px;background:var(--ui-card);color:var(--ui-ink);transform:translateY(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 -12px 45px rgba(0,0,0,.15)}
.ui-bottom-sheet.is-open .ui-bottom-sheet-panel{transform:translateY(0)}
.ui-sheet-handle{width:42px;height:5px;border-radius:99px;background:#c7cbd2;margin:2px auto 15px}
.ui-sheet-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;font-size:17px}
.ui-sheet-close{width:34px;height:34px;border:0;border-radius:50%;background:var(--ui-bg);color:var(--ui-ink);font-size:24px;line-height:1;cursor:pointer}
.ui-sheet-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ui-sheet-links a{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px;border:1px solid var(--ui-line);border-radius:14px;color:var(--ui-ink);text-decoration:none;font-size:12px;font-weight:750}
.ui-sheet-links a i{color:var(--ui-red);width:22px;text-align:center}
.sf-main{touch-action:pan-y;overscroll-behavior-x:contain}
.sf-card{transition:transform .18s,box-shadow .18s}
.sf-card.ui-card-ready{animation:uiCardIn .24s ease both}
@keyframes uiCardIn{from{opacity:.82;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
body.ui-dark .ui-navigation-loading,body.ui-dark .ui-feedback-toast,body.ui-dark .ui-bottom-sheet-panel{background:#171b22;color:#edf0f4;border-color:#2a3039}
body.ui-dark .ui-sheet-close{background:#252b35;color:#edf0f4}
body.ui-dark .ui-sheet-links a{color:#edf0f4;border-color:#303744}
@media(max-width:850px){.ui-sheet-trigger{display:inline-flex}.sf-topbar{flex-wrap:wrap}.ui-sheet-links{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.ui-sheet-links{grid-template-columns:1fr}.ui-feedback-toast{width:calc(100% - 24px);justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.ui-navigation-loading,.ui-bottom-sheet-panel,.sf-card.ui-card-ready{animation:none;transition:none}}

/* V154 — live database freshness indicator */
.v154-live-indicator{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 11px;margin:0 0 12px;border:1px solid var(--ui-line,#e8e9ed);border-radius:999px;background:var(--ui-card,#fff);color:var(--ui-muted,#747b86);font-size:10px;font-weight:700;box-shadow:0 4px 14px rgba(20,25,35,.035)}
.v154-live-dot{width:7px;height:7px;border-radius:50%;background:#1e9b68;box-shadow:0 0 0 3px rgba(30,155,104,.12)}
.v154-live-indicator.is-error .v154-live-dot{background:#c8102e;box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.v154-live-indicator time{font-variant-numeric:tabular-nums;color:var(--ui-ink,#17191f);opacity:.7}
body.ui-dark .v154-live-indicator{background:#191b20;border-color:#30333a;color:#aeb4bf}body.ui-dark .v154-live-indicator time{color:#f2f3f5}
@media(max-width:640px){.v154-live-indicator{margin:0 0 10px;font-size:9px;padding:7px 9px}}