/* ══════════════════════════════════════════════
   HISABIO v2 — Full Stylesheet
══════════════════════════════════════════════ */
:root {
  --clr-primary:    #1A73E8;
  --clr-primary-dk: #1557B0;
  --clr-secondary:  #E8F0FE;
  --clr-green:      #4CAF50;
  --clr-yellow:     #F4B400;
  --clr-red:        #DB4437;
  --clr-bg:         #F7F9FC;
  --clr-surface:    #FFFFFF;
  --clr-border:     #E0E7F0;
  --clr-text:       #1C2B3A;
  --clr-text-muted: #6B7C93;
  --clr-text-light: #A0AEC0;
  --clr-shadow:     rgba(26,115,232,0.08);
  --clr-shadow-md:  rgba(26,115,232,0.16);
  --nav-height:     60px;
  --radius:         14px;
  --radius-sm:      8px;
  --transition:     0.2s ease;
  --font-main:      'DM Sans', sans-serif;
  --font-mono:      'DM Mono', monospace;
}
body.dark-mode {
  --clr-bg:         #0F1623;
  --clr-surface:    #1A2535;
  --clr-border:     #2A3A50;
  --clr-text:       #E2EAF4;
  --clr-text-muted: #7B92AA;
  --clr-shadow:     rgba(0,0,0,0.3);
  --clr-secondary:  #1E2D45;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-main);background:var(--clr-bg);color:var(--clr-text);font-size:14px;line-height:1.6;transition:background 0.3s,color 0.3s;min-height:100vh}
input,select,textarea,button{font-family:var(--font-main);font-size:14px}
a{color:var(--clr-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ── LANDING PAGE ── */
.landing-page{background:var(--clr-bg);min-height:100vh}
.landing-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:var(--clr-surface);border-bottom:1px solid var(--clr-border);position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:0.75rem}
.landing-nav-links{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.landing-nav-links a{color:var(--clr-text-muted);font-weight:500;font-size:13px;padding:4px 8px;border-radius:6px;transition:color 0.2s}
.landing-nav-links a:hover{color:var(--clr-primary);text-decoration:none}
.hero-section{text-align:center;padding:5rem 2rem 4rem;max-width:700px;margin:0 auto}
.hero-badge{display:inline-block;background:var(--clr-secondary);color:var(--clr-primary);font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;margin-bottom:1.5rem}
.hero-title{font-size:clamp(2.2rem,6vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:1rem;color:var(--clr-text)}
.hero-accent{color:var(--clr-primary)}
.hero-sub{font-size:1.05rem;color:var(--clr-text-muted);max-width:520px;margin:0 auto 2rem;line-height:1.7}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.hero-stat strong{font-size:1.2rem;font-weight:700;color:var(--clr-primary)}
.hero-stat span{font-size:11px;color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:0.06em}
.section-heading{text-align:center;font-size:1.5rem;font-weight:700;margin-bottom:2rem;color:var(--clr-text)}
.features-section{padding:4rem 2rem;background:var(--clr-surface)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto}
.feature-card{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius);padding:1.5rem;transition:transform 0.2s,box-shadow 0.2s}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--clr-shadow-md)}
.feat-icon{font-size:2rem;margin-bottom:0.75rem}
.feature-card h3{font-size:0.95rem;font-weight:700;margin-bottom:0.5rem}
.feature-card p{font-size:13px;color:var(--clr-text-muted);line-height:1.6}
.pricing-section{padding:4rem 2rem}
.pricing-grid{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;max-width:800px;margin:0 auto}
.price-card{background:var(--clr-surface);border:1.5px solid var(--clr-border);border-radius:var(--radius);padding:2rem;min-width:280px;max-width:340px;flex:1;position:relative}
.price-card-pro{border-color:var(--clr-primary);box-shadow:0 4px 24px var(--clr-shadow-md)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--clr-primary);color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px}
.price-tier{font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--clr-text-muted);margin-bottom:0.5rem}
.price-amount{font-size:2rem;font-weight:800;color:var(--clr-text);margin-bottom:0.25rem}
.price-amount span{font-size:1rem;font-weight:400;color:var(--clr-text-muted)}
.price-duration{font-size:12px;color:var(--clr-text-muted);margin-bottom:1.25rem}
.price-features{list-style:none;display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.5rem}
.price-features li{font-size:13px;color:var(--clr-text-muted)}
.landing-footer{background:var(--clr-surface);border-top:1px solid var(--clr-border);padding:2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.landing-footer p{font-size:12px;color:var(--clr-text-muted)}

/* ── LOGO ── */
.logo-wrap{display:flex;align-items:center;gap:0.5rem}
.logo-icon{width:34px;height:34px;background:var(--clr-primary);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0}
.logo-text{font-size:1.15rem;font-weight:700;color:var(--clr-primary);letter-spacing:-0.5px}

/* ── AUTH MODAL ── */
.auth-tab-row{display:flex;background:var(--clr-bg);margin:0 1.5rem;border-radius:var(--radius-sm);padding:3px;gap:3px}
.auth-tab{flex:1;background:transparent;border:none;border-radius:6px;padding:7px;font-weight:600;font-size:13px;color:var(--clr-text-muted);cursor:pointer;transition:all 0.2s}
.auth-tab.active{background:var(--clr-primary);color:#fff}
.auth-body{display:flex;flex-direction:column;gap:1rem}
.auth-link{text-align:center;font-size:12px;color:var(--clr-text-muted)}
.pass-wrap{position:relative;display:flex;align-items:center}
.pass-wrap input{flex:1;border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:9px 40px 9px 12px;background:var(--clr-surface);color:var(--clr-text);outline:none}
.pass-wrap input:focus{border-color:var(--clr-primary)}
.show-pass{position:absolute;right:8px;background:none;border:none;cursor:pointer;font-size:1rem;opacity:0.6}
.show-pass:hover{opacity:1}

/* ── TOP NAV ── */
.topnav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:var(--clr-surface);border-bottom:1px solid var(--clr-border);display:flex;align-items:center;padding:0 1.25rem;gap:1rem;z-index:100;box-shadow:0 2px 12px var(--clr-shadow)}
.topnav-left{display:flex;align-items:center;gap:0.5rem;min-width:140px}
.topnav-center{display:flex;align-items:center;gap:0.25rem;flex:1;overflow-x:auto;scrollbar-width:none}
.topnav-center::-webkit-scrollbar{display:none}
.nav-tab{background:transparent;border:none;color:var(--clr-text-muted);font-size:13px;font-weight:500;padding:6px 14px;border-radius:20px;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.nav-tab:hover{background:var(--clr-secondary);color:var(--clr-primary)}
.nav-tab.active{background:var(--clr-primary);color:#fff}
.topnav-right{display:flex;align-items:center;gap:0.75rem;min-width:200px;justify-content:flex-end}
.btn-icon{background:var(--clr-secondary);border:none;border-radius:var(--radius-sm);width:34px;height:34px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.btn-icon:hover{background:var(--clr-border)}
.month-selector-wrap select{background:var(--clr-secondary);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:5px 10px;color:var(--clr-primary);font-weight:600;font-size:13px;cursor:pointer;outline:none}
.tier-badge{background:var(--clr-yellow);color:#333;font-size:10px;font-weight:800;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:0.05em}

/* ── MAIN ── */
.app-main{margin-top:var(--nav-height);padding:1.5rem 1.5rem 5rem;max-width:1200px;margin-left:auto;margin-right:auto;margin-top:calc(var(--nav-height) + 0px)}
.tab-section{display:none;animation:fadeIn 0.25s ease}
.tab-section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── DASHBOARD CARDS ── */
.cards-scroll-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;overflow-x:auto;padding-bottom:0.5rem}
@media(max-width:1100px){.cards-scroll-wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards-scroll-wrap{grid-template-columns:repeat(2,280px);display:flex;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.dash-card{scroll-snap-align:start;min-width:280px}}
.dash-card{background:var(--clr-surface);border-radius:var(--radius);padding:1.25rem;box-shadow:0 2px 16px var(--clr-shadow);border:1px solid var(--clr-border);transition:transform 0.2s,box-shadow 0.2s,border-color 0.5s,background 0.5s}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--clr-shadow-md)}
.card-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--clr-text-muted);margin-bottom:0.75rem}
.card-balance{position:relative;overflow:hidden}
.card-amount{font-size:2rem;font-weight:700;font-family:var(--font-mono);color:var(--clr-text);line-height:1.1;margin-bottom:0.75rem;transition:color 0.5s}
.card-sub-row{display:flex;gap:1rem;margin-bottom:0.75rem}
.card-sub-item{font-size:12px;color:var(--clr-text-muted)}
.income-sub strong{color:var(--clr-green)}
.expense-sub strong{color:var(--clr-red)}
.balance-bar-wrap{height:5px;background:var(--clr-border);border-radius:99px;overflow:hidden;margin-bottom:0.35rem}
.balance-bar{height:100%;border-radius:99px;transition:width 0.6s ease,background 0.5s}
.balance-pct{font-size:11px;color:var(--clr-text-muted)}
.balance-emoji{font-size:1.4rem;margin-top:0.4rem;min-height:1.8rem;transition:all 0.3s}
.chart-wrap{height:140px;position:relative;margin-bottom:0.75rem}
.top-cats{font-size:12px}
.top-cat-item{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--clr-border);color:var(--clr-text-muted)}
.top-cat-item:last-child{border-bottom:none}
.top-cat-item span:last-child{font-weight:600;color:var(--clr-text)}
.invest-stats{font-size:12px}
.invest-stat-row{display:flex;justify-content:space-between;padding:3px 0}
.invest-stat-row .stat-val{font-weight:600;color:var(--clr-primary)}
.weekly-content{font-size:13px}
.weekly-item{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;border-bottom:1px solid var(--clr-border)}
.weekly-item:last-child{border-bottom:none}
.weekly-icon{font-size:1.1rem;flex-shrink:0}
.weekly-text{color:var(--clr-text-muted);line-height:1.4}
.weekly-text strong{color:var(--clr-text)}

/* ── SECTION BLOCK ── */
.section-block{background:var(--clr-surface);border-radius:var(--radius);padding:1.5rem;box-shadow:0 2px 16px var(--clr-shadow);border:1px solid var(--clr-border);margin-bottom:1.5rem}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:0.5rem}
.section-title{font-size:1.05rem;font-weight:700;color:var(--clr-text)}
.section-desc{color:var(--clr-text-muted);font-size:13px;margin-bottom:1rem}
.btn-text{background:none;border:none;color:var(--clr-primary);font-size:13px;cursor:pointer;font-weight:500}
.btn-text:hover{text-decoration:underline}

/* ── TRANSACTIONS ── */
.tx-list{display:flex;flex-direction:column;gap:0.5rem}
.tx-item{display:flex;align-items:center;gap:1rem;padding:0.75rem 1rem;background:var(--clr-bg);border-radius:var(--radius-sm);border:1px solid var(--clr-border);transition:background 0.2s}
.tx-item:hover{background:var(--clr-secondary)}
.tx-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.tx-icon.income{background:rgba(76,175,80,0.12)}
.tx-icon.expense{background:rgba(219,68,55,0.1)}
.tx-info{flex:1;min-width:0}
.tx-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-meta{font-size:11px;color:var(--clr-text-muted)}
.tx-amount{font-weight:700;font-family:var(--font-mono);font-size:14px;white-space:nowrap}
.tx-amount.income{color:var(--clr-green)}
.tx-amount.expense{color:var(--clr-red)}
.tx-actions{display:flex;gap:0.25rem;opacity:0;transition:opacity 0.2s}
.tx-item:hover .tx-actions{opacity:1}
.tx-btn{background:none;border:none;cursor:pointer;font-size:0.85rem;padding:4px 6px;border-radius:4px;transition:background 0.2s;color:var(--clr-text-light)}
.tx-btn:hover{background:var(--clr-border)}
.tx-btn.edit:hover{color:var(--clr-primary)}
.tx-btn.del:hover{color:var(--clr-red)}
.tx-empty{text-align:center;color:var(--clr-text-muted);padding:2rem;font-size:13px}
.filter-row{display:flex;gap:0.5rem}
.filter-row select{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:5px 10px;color:var(--clr-text);font-size:12px;outline:none;cursor:pointer}

/* ── BUDGET ── */
.budget-total-card{background:var(--clr-secondary);border-radius:var(--radius);padding:1.25rem;border:1px solid var(--clr-border);margin-bottom:1rem}
.budget-total-card label{display:block;font-weight:600;font-size:13px;margin-bottom:0.75rem}
.budget-input-row{display:flex;align-items:center;gap:0.5rem}
.currency-prefix{font-weight:700;color:var(--clr-primary);font-size:1rem}
.budget-input-row input{flex:1;border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--clr-surface);color:var(--clr-text);font-size:15px;font-weight:600;outline:none;max-width:200px}
.budget-input-row input:focus{border-color:var(--clr-primary)}
.budget-used-row{margin-top:0.75rem;font-size:12px;color:var(--clr-text-muted)}
.budget-bar-wrap{height:6px;background:var(--clr-border);border-radius:99px;overflow:hidden;margin:6px 0 4px}
.budget-bar{height:100%;border-radius:99px;transition:width 0.5s,background 0.3s}
.cat-budget-list{display:flex;flex-direction:column;gap:0.6rem}
.cat-budget-item{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:0.75rem 1rem}
.cat-budget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.35rem}
.cat-budget-name{font-weight:600;font-size:13px}
.cat-budget-amounts{font-size:12px;color:var(--clr-text-muted)}

/* ── INVESTMENT ── */
.inv-type-tabs{display:flex;gap:0.35rem;flex-wrap:wrap;margin-bottom:1.5rem}
.inv-type-btn{background:var(--clr-bg);border:1.5px solid var(--clr-border);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;color:var(--clr-text-muted);transition:all 0.2s;white-space:nowrap}
.inv-type-btn.active{background:var(--clr-primary);border-color:var(--clr-primary);color:#fff}
.inv-card{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}
.inv-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem}
.inv-card-title{font-weight:700;font-size:0.95rem}
.inv-format-tag{background:var(--clr-secondary);color:var(--clr-primary);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase}
.inv-kpi-row{display:flex;gap:0.75rem;flex-wrap:wrap;margin-bottom:1rem}
.inv-kpi{flex:1;min-width:110px;background:var(--clr-surface);border-radius:var(--radius-sm);padding:0.75rem;border:1px solid var(--clr-border)}
.inv-kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--clr-text-muted);margin-bottom:3px}
.inv-kpi-val{font-size:1.1rem;font-weight:700;font-family:var(--font-mono);color:var(--clr-primary)}
.phase-table-wrap{overflow-x:auto;margin-top:1rem}
.phase-table{width:100%;border-collapse:collapse;font-size:12px}
.phase-table th{background:var(--clr-secondary);padding:6px 10px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--clr-text-muted);white-space:nowrap}
.phase-table td{padding:7px 10px;border-bottom:1px solid var(--clr-border);white-space:nowrap}
.phase-table tr:last-child td{border-bottom:none}
.phase-table tr:hover td{background:var(--clr-secondary)}
.status-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase}
.status-due{background:rgba(244,180,0,0.15);color:#b8860b}
.status-done{background:rgba(76,175,80,0.15);color:var(--clr-green)}
.status-received{background:rgba(26,115,232,0.12);color:var(--clr-primary)}
.status-pending{background:rgba(219,68,55,0.1);color:var(--clr-red)}
.chart-wrap-full{height:220px;position:relative;margin-top:1rem}
.inv-actions{display:flex;gap:0.5rem;flex-wrap:wrap}

/* ── REPORTS ── */
.email-settings-card{background:var(--clr-secondary);border-radius:var(--radius);padding:1.5rem;border:1px solid var(--clr-border);margin-bottom:1rem}
.email-info-box{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:1rem;font-size:12px;color:var(--clr-text-muted);margin-top:1rem;line-height:1.8}
.email-info-box strong{color:var(--clr-text)}
.report-actions{display:flex;gap:0.75rem;margin-bottom:1rem}
.report-textarea{width:100%;height:320px;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:1rem;color:var(--clr-text);font-family:var(--font-mono);font-size:11px;resize:vertical;outline:none}

/* ── FORMS ── */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
@media(max-width:640px){.form-grid-2{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:0.4rem}
.form-group label{font-size:12px;font-weight:600;color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:0.05em}
.form-group input,.form-group select,.form-group textarea{border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:9px 12px;background:var(--clr-surface);color:var(--clr-text);outline:none;transition:border-color 0.2s}
.form-group input:focus,.form-group select:focus{border-color:var(--clr-primary);box-shadow:0 0 0 3px rgba(26,115,232,0.1)}

/* ── BUTTONS ── */
.btn-primary{background:var(--clr-primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 20px;font-weight:600;cursor:pointer;transition:background 0.2s,transform 0.1s;font-size:13px}
.btn-primary:hover{background:var(--clr-primary-dk)}
.btn-primary:active{transform:scale(0.98)}
.btn-primary.btn-sm{padding:6px 14px;font-size:12px}
.btn-primary.btn-lg{padding:13px 28px;font-size:15px;border-radius:10px}
.btn-outline{background:transparent;border:1.5px solid var(--clr-border);border-radius:var(--radius-sm);padding:9px 18px;color:var(--clr-text);font-weight:500;cursor:pointer;transition:all 0.2s;font-size:13px}
.btn-outline:hover{border-color:var(--clr-primary);color:var(--clr-primary);background:var(--clr-secondary)}
.btn-outline.btn-sm{padding:6px 14px;font-size:12px}
.btn-outline.btn-lg{padding:12px 26px;font-size:15px;border-radius:10px}
.btn-danger{background:transparent;border:1.5px solid var(--clr-red);border-radius:var(--radius-sm);padding:9px 18px;color:var(--clr-red);font-weight:500;cursor:pointer;transition:all 0.2s;font-size:13px}
.btn-danger:hover{background:rgba(219,68,55,0.08)}
.data-actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.file-upload-label{cursor:pointer}

/* ── FAB ── */
.fab{position:fixed;bottom:2rem;right:2rem;width:54px;height:54px;background:var(--clr-primary);color:#fff;border:none;border-radius:50%;font-size:1.8rem;cursor:pointer;box-shadow:0 4px 20px rgba(26,115,232,0.4);display:flex;align-items:center;justify-content:center;transition:transform 0.2s,box-shadow 0.2s;z-index:99;line-height:1}
.fab:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(26,115,232,0.5)}
.fab:active{transform:scale(0.96)}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,22,35,0.55);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center;padding:1rem;animation:overlayIn 0.2s ease}
.modal-overlay.active{display:flex}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--clr-surface);border-radius:var(--radius);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,0.25);animation:modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1);max-height:92vh;overflow-y:auto;position:relative}
.modal-sm{max-width:380px}
@keyframes modalIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem 0}
.modal-header h3{font-size:1rem;font-weight:700}
.modal-close{background:var(--clr-bg);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:0.85rem;color:var(--clr-text-muted);display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.modal-close:hover{background:var(--clr-border)}
.modal-body{padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.modal-footer{padding:0 1.5rem 1.5rem;display:flex;gap:0.75rem;justify-content:flex-end}
.type-toggle{display:flex;background:var(--clr-bg);border-radius:var(--radius-sm);padding:3px;gap:3px}
.type-btn{flex:1;background:transparent;border:none;border-radius:6px;padding:8px;cursor:pointer;font-weight:600;font-size:13px;color:var(--clr-text-muted);transition:all 0.2s}
.type-btn.active{background:var(--clr-primary);color:#fff}
.amount-input-wrap{display:flex;align-items:center;gap:0.5rem;border:1.5px solid var(--clr-border);border-radius:var(--radius-sm);padding:0 12px;background:var(--clr-surface);transition:border-color 0.2s}
.amount-input-wrap:focus-within{border-color:var(--clr-primary);box-shadow:0 0 0 3px rgba(26,115,232,0.1)}
.amount-input-wrap input{border:none;padding:10px 0;outline:none;flex:1;font-size:1.1rem;font-weight:700;font-family:var(--font-mono);background:transparent;color:var(--clr-text)}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:0.5rem}
.np-btn{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:background 0.2s;color:var(--clr-text)}
.np-btn:hover{background:var(--clr-secondary)}
.np-btn:active{background:var(--clr-border)}
.np-special{color:var(--clr-primary)}

/* ── MEME MODAL ── */
.meme-modal{text-align:center;overflow:hidden}
.meme-content{padding:2rem 1.5rem 0}
.meme-emoji{font-size:4rem;display:block;margin-bottom:0.75rem;animation:bounce 0.6s ease infinite alternate}
.meme-title{font-size:1.1rem;font-weight:800;color:var(--clr-text);margin-bottom:0.5rem}
.meme-text{font-size:13px;color:var(--clr-text-muted);line-height:1.7;margin-bottom:0.5rem}
.meme-tag{font-size:11px;color:var(--clr-text-light);font-style:italic}
@keyframes bounce{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-8px) rotate(5deg)}}
.meme-bg-strip{height:6px;background:linear-gradient(90deg,var(--clr-primary),var(--clr-yellow),var(--clr-red));margin-bottom:0}

/* ── TOAST ── */
.toast{position:fixed;bottom:5.5rem;left:50%;transform:translateX(-50%) translateY(20px);background:#1C2B3A;color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:all 0.3s;z-index:999;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── MOBILE NAV ── */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:58px;background:var(--clr-surface);border-top:1px solid var(--clr-border);z-index:98;overflow-x:auto;scrollbar-width:none}
.mobile-bottom-nav::-webkit-scrollbar{display:none}
.mobile-bottom-nav-inner{display:flex;height:100%;min-width:max-content;padding:0 0.75rem}
.mobile-nav-btn{background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 1rem;font-size:10px;font-weight:600;color:var(--clr-text-muted);cursor:pointer;gap:2px;transition:color 0.2s;white-space:nowrap}
.mobile-nav-btn .mn-icon{font-size:1.2rem}
.mobile-nav-btn.active{color:var(--clr-primary)}
@media(max-width:768px){.app-main{padding:1rem 1rem 5rem}.topnav{padding:0 1rem}.topnav-center{display:none}.topnav-right{flex:1;justify-content:flex-end}.card-amount{font-size:1.5rem}.mobile-bottom-nav{display:block}}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--clr-border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--clr-text-muted)}
@media print{.topnav,.fab,.mobile-bottom-nav,.modal-overlay,.landing-page{display:none!important}body{background:white}.app-main{margin-top:0;padding:0}.tab-section{display:block!important}}
CSSEOF