:root { --bank-blue:#173b8f; --bank-cyan:#14a9df; --bank-yellow:#f8c62c; --bank-ink:#10203e; --bank-bg:#f3f6fb; }
* { box-sizing:border-box; }
body.bank-body { margin:0; min-height:100vh; font-family:Inter,system-ui,sans-serif; color:var(--bank-ink); background:var(--bank-bg); }
.bank-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px,42%) 1fr; }
.bank-brand { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; padding:clamp(2rem,5vw,5rem); color:white; background:linear-gradient(145deg,#102d72,#1969c7); overflow:hidden; }
.bank-brand::after { content:""; position:absolute; width:34rem; height:34rem; right:-12rem; bottom:-12rem; border:7rem solid rgba(248,198,44,.18); border-radius:50%; }
.bank-logo { position:relative; z-index:1; width:min(260px,70%); filter:brightness(0) invert(1); }
.bank-brand-copy { position:relative; z-index:1; max-width:550px; }
.bank-brand-copy h1 { margin:0 0 1rem; font:800 clamp(2.4rem,5vw,5rem)/.98 Outfit,sans-serif; }
.bank-brand-copy p { max-width:480px; color:rgba(255,255,255,.78); font-size:1.05rem; line-height:1.7; }
.simulation-label { position:relative; z-index:1; display:inline-flex; align-items:center; gap:.5rem; width:max-content; padding:.6rem 1rem; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.simulation-label::before { content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--bank-yellow); }
.auth-pane { display:grid; place-items:center; padding:2rem; }
.auth-card { width:min(100%,520px); padding:clamp(1.7rem,4vw,3rem); border:1px solid #e5eaf3; border-radius:28px; background:white; box-shadow:0 24px 70px rgba(20,48,94,.1); }
.auth-card h2 { margin:.4rem 0 .6rem; font:800 clamp(1.8rem,4vw,2.6rem)/1.1 Outfit,sans-serif; }
.auth-card>.lead { margin:0 0 2rem; color:#68748a; line-height:1.6; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1rem; }
.field.full { grid-column:1/-1; }
.field label { font-size:.83rem; font-weight:700; }
.field input,.field select { width:100%; min-height:50px; padding:.85rem 1rem; border:1px solid #dce2ec; border-radius:13px; background:#fbfcfe; color:var(--bank-ink); font:inherit; outline:none; transition:.2s; }
.field input:focus,.field select:focus { border-color:var(--bank-cyan); box-shadow:0 0 0 4px rgba(20,169,223,.12); }
.bank-button { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:.85rem 1.2rem; border:0; border-radius:14px; background:var(--bank-blue); color:white; font:700 .95rem Inter,sans-serif; cursor:pointer; transition:.25s; }
.bank-button:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(23,59,143,.22); }
.bank-button.secondary { background:#e9f5fb; color:var(--bank-blue); }
.auth-links { margin-top:1.5rem; text-align:center; color:#68748a; font-size:.9rem; }
.auth-links a { color:var(--bank-blue); font-weight:700; text-decoration:none; }
.form-message { display:none; margin:0 0 1rem; padding:.8rem 1rem; border-radius:10px; font-size:.88rem; line-height:1.45; }
.form-message.show { display:block; }.form-message.error { background:#fff0f0; color:#a11f2d; }.form-message.success { background:#eafaf1; color:#17653a; }
.security-note { margin-top:1.2rem; padding:1rem; border-radius:12px; background:#fff9df; color:#66520c; font-size:.78rem; line-height:1.5; }
.back-site { position:relative; z-index:1; color:rgba(255,255,255,.8); font-size:.9rem; font-weight:700; text-decoration:none; }.back-site:hover{color:white}.auth-kicker{color:var(--bank-blue);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.check-field{display:flex;align-items:flex-start;gap:.65rem;margin:0 0 1rem;color:#667085;font-size:.82rem;line-height:1.45}.check-field input{margin-top:.2rem}.setup-warning{margin-bottom:1rem;padding:.9rem 1rem;border:1px solid #f3d078;border-radius:12px;background:#fff8dd;color:#735c00;font-size:.85rem;line-height:1.5}.setup-warning[hidden]{display:none}.sidebar-note{margin-top:1.5rem;padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:rgba(255,255,255,.65);font-size:.75rem;line-height:1.5}.panel-actions{display:flex;gap:.65rem;flex-wrap:wrap}.panel-actions .bank-button{width:auto}.panel-card.full{grid-column:1/-1}

.app-layout { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }
.app-sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:1.5rem; background:#102d72; color:white; }
.app-sidebar img { width:190px; filter:brightness(0) invert(1); margin-bottom:2.5rem; }
.app-nav { display:grid; gap:.55rem; }.app-nav a { padding:.85rem 1rem; border-radius:12px; color:rgba(255,255,255,.75); text-decoration:none; font-weight:600; }.app-nav a.active,.app-nav a:hover { background:rgba(255,255,255,.12); color:white; }
.logout-button { margin-top:auto; border:1px solid rgba(255,255,255,.25); background:transparent; }
.app-main { min-width:0; padding:clamp(1.25rem,4vw,3rem); }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; }.app-header h1 { margin:0; font:800 clamp(1.8rem,4vw,2.8rem) Outfit,sans-serif; }.app-header p { margin:.4rem 0 0; color:#718096; }
.balance-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1rem; }.balance-card { min-height:170px; padding:1.5rem; border:1px solid #e3e8f1; border-radius:22px; background:white; box-shadow:0 10px 35px rgba(27,55,100,.06); }.balance-card.primary { color:white; background:linear-gradient(135deg,#173b8f,#168fd0); }.balance-card span { display:block; margin-bottom:1.2rem; color:#748096; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.balance-card.primary span { color:rgba(255,255,255,.72); }.balance-card strong { font:800 clamp(1.8rem,4vw,2.7rem) Outfit,sans-serif; }.balance-card small { display:block; margin-top:.7rem; color:#8290a6; }.balance-card.primary small { color:rgba(255,255,255,.7); }
.dashboard-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem; margin-top:1.25rem; }.panel-card { padding:1.5rem; border:1px solid #e3e8f1; border-radius:22px; background:white; }.panel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }.panel-head h2 { margin:0; font:700 1.25rem Outfit,sans-serif; }
.transaction-list { display:grid; gap:.65rem; }.transaction { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem; border-radius:13px; background:#f7f9fc; }.transaction-info strong,.transaction-info small { display:block; }.transaction-info small { margin-top:.25rem; color:#8792a5; }.amount.positive { color:#13824e; }.amount.negative { color:#b83245; }
.simulator-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.sim-result { display:grid; gap:.8rem; padding:1.2rem; border-radius:16px; background:#eff7ff; }.sim-row { display:flex; justify-content:space-between; gap:1rem; }.sim-row strong { color:var(--bank-blue); }.sim-payment { margin:.35rem 0; font:800 2rem Outfit,sans-serif; color:var(--bank-blue); }
.account-chip { padding:.55rem .9rem; border-radius:999px; background:#e8f5fb; color:var(--bank-blue); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.payment-progress-card { margin-top:1.25rem; padding:1.5rem; border:1px solid #e3e8f1; border-radius:22px; background:white; box-shadow:0 10px 35px rgba(27,55,100,.05); }
.payment-progress-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.payment-progress-head h2{margin:.25rem 0 0;font:700 1.25rem Outfit,sans-serif}.payment-progress-head>strong{font:800 1.8rem Outfit,sans-serif;color:var(--bank-blue)}
.payment-progress-track { height:12px; margin:1.1rem 0 1.4rem; overflow:hidden; border-radius:999px; background:#e9eef6; }.payment-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--bank-blue),var(--bank-cyan));transition:width .5s ease}
.goal-form { display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:end; gap:1rem; }.goal-form .field{margin:0}.goal-form .bank-button{width:auto;min-width:170px}
.upload-help { margin:-.3rem 0 1rem; color:#7b8799; font-size:.75rem; }
.payment-list { display:grid; gap:.7rem; }.payment-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid #e9edf4;border-radius:14px;background:#f9fbfd}.payment-row-main strong,.payment-row-main small{display:block}.payment-row-main small{margin-top:.3rem;color:#7d899b;font-size:.78rem;line-height:1.4}.payment-row-value{text-align:right}.payment-row-value>strong{display:block;color:var(--bank-blue)}.receipt-link{margin-top:.35rem;padding:0;border:0;background:none;color:var(--bank-cyan);font:700 .75rem Inter,sans-serif;cursor:pointer}.receipt-link:hover{text-decoration:underline}.empty-state{display:grid;gap:.35rem;padding:2rem 1rem;border:1px dashed #ccd5e3;border-radius:14px;text-align:center;color:#7b8799}.empty-state strong{color:var(--bank-ink)}
@media(max-width:900px){.bank-shell{grid-template-columns:1fr}.bank-brand{min-height:320px}.app-layout{grid-template-columns:1fr}.app-sidebar{position:static;height:auto}.app-nav{grid-template-columns:repeat(3,1fr)}.logout-button{margin-top:1rem}.balance-grid,.dashboard-grid{grid-template-columns:1fr}.app-sidebar img{margin-bottom:1rem}}
@media(max-width:600px){.form-grid,.simulator-grid,.goal-form{grid-template-columns:1fr}.auth-pane{padding:1rem}.auth-card{border-radius:20px}.app-nav{grid-template-columns:1fr 1fr}.app-header{align-items:flex-start;flex-direction:column}.goal-form .bank-button{width:100%}.payment-row{align-items:flex-start;flex-direction:column}.payment-row-value{text-align:left}}