/* ===========================
   FLOW BUDGET v5.0 — Luxury Fintech
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg: #0C0F14;
  --sf: rgba(201,168,76,0.03);
  --bd: rgba(201,168,76,0.1);
  --ac: #C9A84C;
  --neg: #E07A5F;
  --tx: #EEEEF0;
  --tx2: #8A8D98;
  --tx3: #52555E;
  --glass: rgba(255,255,255,0.025);
  --glass2: rgba(255,255,255,0.055);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--tx)}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;text-rendering:optimizeLegibility}
input,select,button{font-family:inherit;outline:none}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(0.7)}
::-webkit-scrollbar{display:none}
.mono{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;letter-spacing:-0.03em}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes goldPulse{0%,100%{box-shadow:0 4px 20px rgba(201,168,76,0.2)}50%{box-shadow:0 4px 32px rgba(201,168,76,0.45)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes ambientPulse{0%,100%{opacity:0.2}50%{opacity:0.45}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}
@keyframes btnPop{0%{transform:scale(1)}50%{transform:scale(0.93)}100%{transform:scale(1)}}
@keyframes glowSweep{0%{left:-40%}100%{left:140%}}
.fade-in{animation:fadeIn 0.3s ease both}
.slide-up{animation:slideUp 0.4s ease both}
.btn-pop{animation:btnPop 0.15s ease}

/* Layout */
#app{height:100%;display:flex;flex-direction:column;max-width:480px;margin:0 auto;position:relative;overflow:hidden}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:80px;transition:opacity 0.2s ease,transform 0.25s ease}
.scroll.swipe-left{opacity:0;transform:translateX(-40px)}
.scroll.swipe-right{opacity:0;transform:translateX(40px)}
.scroll.swipe-in{opacity:1;transform:translateX(0)}
.content-wrap{padding:0 20px}

/* Ambient Glow Orbs */
.bg-glow{position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(100px);animation:ambientPulse 8s ease-in-out infinite}
.bg-glow-1{width:320px;height:320px;top:-100px;right:-100px;background:var(--ac);opacity:0.15}
.bg-glow-2{width:260px;height:260px;bottom:8%;left:-80px;background:var(--ac);opacity:0.08;animation-delay:4s}

/* Tab Bar */
.tabs{display:flex;border-top:1px solid var(--bd);padding:8px 0 max(12px,env(safe-area-inset-bottom));background:rgba(12,15,20,0.88);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);flex-shrink:0}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:6px 0}
.tabs .ico{font-size:20px;transition:all 0.2s}
.tabs .lbl{font-size:10px;font-weight:600;letter-spacing:0.04em;transition:all 0.2s}
.tab-active .ico{filter:none}
.tab-inactive .ico{filter:grayscale(1) opacity(0.35)}
.tab-active .lbl{color:var(--ac);text-shadow:0 0 12px rgba(201,168,76,0.4)}
.tab-inactive .lbl{color:var(--tx3)}

/* Cards — Glass Morphism */
.card{
  background:linear-gradient(145deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  padding:16px;margin-bottom:12px;
  position:relative;overflow:hidden;
}
.card::before{content:'';position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent)}

/* Hero Card */
.hero-card{
  background:linear-gradient(145deg,rgba(201,168,76,0.07),rgba(255,255,255,0.02),rgba(201,168,76,0.025));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(201,168,76,0.18);
  border-radius:var(--r-xl);
  padding:28px 24px;margin-bottom:14px;text-align:center;
  position:relative;overflow:hidden;
  box-shadow:0 0 24px rgba(201,168,76,0.12),0 0 60px rgba(201,168,76,0.04);
  animation:breathe 6s ease-in-out infinite;
}
.hero-card::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent)}
.hero-card::after{content:'';position:absolute;bottom:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.15),transparent)}
/* Sweeping light effect on hero */
.hero-card .sweep{position:absolute;top:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent);animation:glowSweep 6s ease-in-out infinite;pointer-events:none}
.hero-amount{font-size:52px;font-weight:700;letter-spacing:-2px;line-height:1}
.hero-amount.positive{color:var(--ac);text-shadow:0 0 40px rgba(201,168,76,0.3)}
.hero-amount.negative{color:var(--neg);text-shadow:0 0 40px rgba(224,122,95,0.3)}

/* Rows */
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(145deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.05);border-radius:var(--r-md);margin-bottom:6px;cursor:pointer;text-align:left;width:100%;transition:background 0.2s}
.row:active{background:rgba(255,255,255,0.06)}

/* Scheduled Item Rows */
.si-row{display:flex;align-items:center;gap:10px;padding:14px;background:linear-gradient(145deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.05);border-radius:var(--r-md);margin-bottom:8px;cursor:pointer;text-align:left;width:100%;transition:background 0.2s}
.si-row:active{background:rgba(255,255,255,0.06)}
.si-icon{width:38px;height:38px;border-radius:var(--r-sm);background:linear-gradient(145deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.si-status{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.si-meta{font-size:11px;color:var(--tx3);display:flex;align-items:center;gap:6px;margin-top:2px}
.si-badge{display:inline-flex;padding:2px 7px;border-radius:6px;font-size:9px;font-weight:700;letter-spacing:0.03em}

/* Collapsible Sections */
.collapse-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(145deg,rgba(255,255,255,0.035),rgba(255,255,255,0.012));
  border:1px solid var(--bd);border-radius:var(--r-md);
  padding:14px 16px;cursor:pointer;margin-bottom:8px;
  position:relative;overflow:hidden;transition:all 0.2s;
}
.collapse-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)}
.collapse-btn:active{background:rgba(255,255,255,0.06)}
.collapse-btn.open{border-radius:var(--r-md) var(--r-md) 0 0;margin-bottom:0;border-bottom-color:transparent}
.collapse-title{font-size:14px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:8px}
.collapse-arrow{font-size:11px;color:var(--tx3);transition:transform 0.3s ease}
.collapse-btn.open .collapse-arrow{transform:rotate(180deg)}
.collapse-content{border:1px solid var(--bd);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);margin-bottom:8px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.02));animation:fadeIn 0.25s ease}
.pro-badge{font-size:10px;background:rgba(201,168,76,0.15);color:var(--ac);padding:2px 8px;border-radius:6px;font-weight:600}

/* Gauges */
.gauge-track{height:6px;background:rgba(255,255,255,0.04);border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.gauge-fill{height:100%;border-radius:3px;transition:width 0.6s cubic-bezier(0.25,0.46,0.45,0.94);position:relative}
.gauge-fill::after{content:'';position:absolute;top:0;right:0;bottom:0;width:20px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3));border-radius:0 3px 3px 0}

/* Fine Lines */
.fine-line{height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.2),transparent);margin:16px 0}

/* Buttons */
button{transition:transform 0.15s ease,opacity 0.15s ease}
button:active{opacity:0.85;transform:scale(0.97)}
.gold-btn{display:block;width:100%;padding:16px;background:linear-gradient(135deg,#B8963F,#D4AF55,#F5E6A3,#D4AF55);background-size:200% 200%;color:#0C0F14;border:none;border-radius:var(--r-md);font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(201,168,76,0.25);text-align:center;text-decoration:none;position:relative;overflow:hidden}
.gold-btn::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);animation:shimmer 3s ease-in-out infinite}
.add-btn{background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.2);border-radius:var(--r-sm);color:var(--ac);font-size:12px;padding:6px 14px;cursor:pointer;font-weight:600;transition:background 0.2s}
.add-btn:active{background:rgba(201,168,76,0.12)}

/* FAB */
.fab{position:absolute;bottom:76px;right:20px;width:56px;height:56px;border-radius:28px;background:linear-gradient(135deg,#B8963F,#D4AF55,#F5E6A3,#D4AF55,#B8963F);background-size:300% 300%;border:none;color:#0C0F14;font-size:28px;font-weight:300;cursor:pointer;box-shadow:0 4px 20px rgba(201,168,76,0.35);display:flex;align-items:center;justify-content:center;z-index:100;animation:goldPulse 3s ease-in-out infinite}
.fab:active{transform:scale(0.9)!important}

/* Fields */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;color:var(--tx2);margin-bottom:6px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase}
.field input,.field select{width:100%;padding:13px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;color:var(--tx);font-size:15px;transition:border-color 0.3s,box-shadow 0.3s}
.field input:focus,.field select:focus{border-color:rgba(201,168,76,0.5);box-shadow:0 0 0 3px rgba(201,168,76,0.08),0 0 12px rgba(201,168,76,0.08)}

/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{padding:8px 14px;border-radius:20px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all 0.2s}

/* Toggle */
.toggle{width:44px;height:26px;border-radius:13px;border:none;cursor:pointer;position:relative;transition:background 0.25s}
.toggle .dot{width:20px;height:20px;border-radius:10px;background:#fff;position:absolute;top:3px;transition:left 0.2s;box-shadow:0 1px 4px rgba(0,0,0,0.4)}

/* Numpad */
.numpad{background:rgba(12,15,20,0.97);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:24px 24px 0 0;padding:16px;padding-bottom:24px;border-top:1px solid rgba(255,255,255,0.06)}
.numpad .display{text-align:center;padding:16px 0 20px;font-size:44px;font-weight:700;color:var(--ac);letter-spacing:-1px;text-shadow:0 0 30px rgba(201,168,76,0.15)}
.numpad .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.numpad .grid button{border-radius:var(--r-md);padding:18px;font-size:20px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))}

/* Toast */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:rgba(18,21,28,0.92);color:var(--tx);padding:12px 28px;border-radius:50px;font-size:13px;font-weight:500;z-index:2000;pointer-events:none;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.06);animation:slideUp 0.3s ease}

/* Modals */
.modal{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:var(--bg)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd)}
.modal-body{flex:1;overflow:auto;padding:0 20px calc(160px + env(safe-area-inset-bottom))}
.inline-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn 0.2s ease}
.inline-modal-box{background:linear-gradient(145deg,rgba(20,23,30,1),rgba(12,15,20,1));border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:24px;width:calc(100% - 48px);max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,0.5);position:relative;overflow:hidden}
.inline-modal-box::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.25),transparent)}

/* Amount button */
.amt-btn{width:100%;background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.06);border-radius:var(--r-md);padding:14px;text-align:center;cursor:pointer;margin-bottom:16px;position:relative;overflow:hidden}
.amt-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)}

/* Typography helpers */
.sec-title{font-size:14px;font-weight:700;color:var(--tx);letter-spacing:-0.01em}
.stat-label{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.stat-value{font-weight:700;margin-top:3px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 2px}
.gold-text{background:linear-gradient(135deg,#C9A84C,#F5E6A3);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.page-title{font-size:22px;font-weight:700;color:var(--tx)}

/* Sub-tabs (still used in ledger filter) */
.sub-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;margin-bottom:12px}
.sub-tab{padding:8px 16px;border-radius:24px;font-size:12px;cursor:pointer;white-space:nowrap;flex-shrink:0;font-weight:600}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-day{padding:8px 2px;border-radius:var(--r-sm);font-size:12px;min-height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cal-dot{width:5px;height:5px;border-radius:50%}

/* Help system */
.help-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:9px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:var(--tx3);font-size:10px;font-weight:700;cursor:pointer;margin-left:6px;flex-shrink:0;vertical-align:middle;line-height:1}
.help-drop{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:var(--r-md);padding:14px;margin:8px 0 12px;font-size:13px;color:var(--tx2);line-height:1.6}
.help-drop b{color:var(--tx);font-weight:600}

/* Tablet / iPad */
@media(min-width:600px){
  #app{max-width:680px}
  .content-wrap{padding:0 28px}
  .card{padding:20px;border-radius:20px}
  .hero-card{padding:32px 28px;border-radius:26px}
  .row,.si-row{padding:16px 18px;border-radius:16px;margin-bottom:8px}
  .si-icon{width:42px;height:42px;border-radius:12px;font-size:20px}
  .tabs{padding:12px 0 max(16px,env(safe-area-inset-bottom))}
  .tabs .ico{font-size:24px}.tabs .lbl{font-size:11px}
  .fab{width:64px;height:64px;border-radius:32px;font-size:32px;bottom:84px;right:28px}
  .modal-body{padding:0 32px calc(160px + env(safe-area-inset-bottom))}
  .modal-head{padding:20px 32px}
  .numpad{border-radius:28px 28px 0 0;padding:20px}
  .numpad .display{font-size:52px}
  .numpad .grid{gap:10px}.numpad .grid button{padding:22px;font-size:22px;border-radius:16px}
  .field{margin-bottom:18px}.field label{font-size:12px;margin-bottom:8px}
  .field input,.field select{padding:16px 18px;font-size:16px;border-radius:var(--r-md)}
  .collapse-btn{padding:16px 18px}
  .collapse-content{padding:20px}
}
@media(min-width:900px){#app{max-width:820px}.content-wrap{padding:0 40px}.card{padding:24px;border-radius:22px;margin-bottom:16px}}
@media(min-width:1024px){body{background:#000}#app{max-width:480px;border-left:1px solid rgba(255,255,255,0.04);border-right:1px solid rgba(255,255,255,0.04);box-shadow:0 0 80px rgba(0,0,0,0.5)}.content-wrap{padding:0 20px}}

/* === Light Theme Overrides === */
body.light-theme .tabs { background: rgba(245,245,250,0.92); border-top-color: rgba(0,0,0,0.08); }
body.light-theme .card { background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
body.light-theme .card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); }
body.light-theme .hero-card { background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6)); border-color: rgba(0,0,0,0.1); box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
body.light-theme .hero-card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); }
body.light-theme .row, body.light-theme .si-row { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.06); }
body.light-theme .collapse-btn { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.08); }
body.light-theme .collapse-content { background: rgba(255,255,255,0.4); border-color: rgba(0,0,0,0.06); }
body.light-theme .numpad { background: rgba(255,255,255,0.97); border-top-color: rgba(0,0,0,0.08); }
body.light-theme .numpad .grid button { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
body.light-theme .toast { background: rgba(255,255,255,0.95); box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06); }
body.light-theme .modal { background: var(--bg); }
body.light-theme .inline-modal-box { background: linear-gradient(145deg, #FFFFFF, #F5F5FA); border-color: rgba(0,0,0,0.1); }
body.light-theme .field input, body.light-theme .field select { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); }
body.light-theme .gauge-track { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.04); }
body.light-theme .fine-line { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); }
body.light-theme .bg-glow { display: none; }
body.light-theme .si-icon { background: rgba(0,0,0,0.04); }
body.light-theme .help-drop { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
body.light-theme .fab { color: #fff; }
body.light-theme .gold-btn { color: #fff; }

/* Warm Sand light theme */
body.warm-theme .tabs { background: rgba(250,246,240,0.92); border-top-color: rgba(120,80,40,0.1); }
body.warm-theme .card { background: linear-gradient(145deg, rgba(255,252,245,0.8), rgba(250,246,240,0.5)); border-color: rgba(120,80,40,0.08); }
body.warm-theme .hero-card { background: linear-gradient(145deg, rgba(255,252,245,0.9), rgba(250,246,240,0.6)); border-color: rgba(184,134,11,0.15); }
body.warm-theme .row, body.warm-theme .si-row { background: rgba(255,252,245,0.6); border-color: rgba(120,80,40,0.06); }
body.warm-theme .collapse-btn { background: rgba(255,252,245,0.7); border-color: rgba(120,80,40,0.08); }
body.warm-theme .bg-glow { display: none; }
body.warm-theme .numpad { background: rgba(250,246,240,0.97); }
body.warm-theme .fab { color: #2C1810; }
body.warm-theme .gold-btn { color: #2C1810; }

/* === Additional Animations === */
@keyframes cardEntry { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 20px rgba(201,168,76,0.08); } 50% { box-shadow: 0 0 35px rgba(201,168,76,0.18); } }
@keyframes subtleBounce { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 60% { transform: scale(0.97); } 100% { transform: scale(1); } }
@keyframes numberPop { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dotPulse { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.4); opacity: 1; } }

/* Staggered card entries */
.card { animation: cardEntry 0.35s ease both; }
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.1s; }
.card:nth-child(4) { animation-delay: 0.15s; }
.card:nth-child(5) { animation-delay: 0.2s; }

/* Rows animate in */
.row, .si-row { animation: slideRight 0.25s ease both; }
.row:nth-child(2), .si-row:nth-child(2) { animation-delay: 0.03s; }
.row:nth-child(3), .si-row:nth-child(3) { animation-delay: 0.06s; }
.row:nth-child(4), .si-row:nth-child(4) { animation-delay: 0.09s; }
.row:nth-child(5), .si-row:nth-child(5) { animation-delay: 0.12s; }

/* Hero pulse on the whole card */
.hero-card { animation: breathe 6s ease-in-out infinite, pulseGlow 4s ease-in-out infinite; }

/* Number pop when values change */
.hero-amount { animation: numberPop 0.4s ease both; }

/* Status dots pulse */
.si-status { animation: dotPulse 2s ease-in-out infinite; }

/* FAB hover/focus glow */
.fab:focus { box-shadow: 0 4px 30px rgba(201,168,76,0.5), 0 0 60px rgba(201,168,76,0.15); }

/* Collapse content slide */
.collapse-content { animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Toast entrance with bounce */
.toast { animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Tab press feedback */
.tabs button:active .ico { transform: scale(0.85); transition: transform 0.1s; }

/* Gauge fill glow */
.gauge-fill { box-shadow: 0 0 8px var(--ac); }

/* Gold button press */
.gold-btn:active { transform: scale(0.96) !important; box-shadow: 0 2px 12px rgba(201,168,76,0.3); }

/* === Enhanced Responsive — Tablet / iPad / Desktop === */
@media (min-width: 600px) {
  .hero-amount { font-size: 60px; }
  .stat-label { font-size: 11px; }
  .sec-title { font-size: 16px; }
  .page-title { font-size: 26px; }
  .collapse-title { font-size: 15px; }
  .inline-modal-box { max-width: 420px; padding: 28px; }
}

@media (min-width: 768px) {
  #app { max-width: 720px; }
  .content-wrap { padding: 0 32px; }
  .hero-card { padding: 36px 32px; border-radius: 28px; }
  .hero-amount { font-size: 64px; }
  .numpad .display { font-size: 56px; }
  .numpad .grid button { padding: 24px; font-size: 24px; }
  .modal-body { padding: 0 36px calc(180px + env(safe-area-inset-bottom)); }
  .modal-head { padding: 22px 36px; }
}

@media (min-width: 1200px) {
  body { background: #000; }
  #app {
    max-width: 500px;
    border-left: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 0 100px rgba(0,0,0,0.6), 0 0 1px rgba(255,255,255,0.05);
    border-radius: 0;
  }
}

@media (min-width: 1400px) {
  #app { max-width: 520px; }
}

/* Light theme desktop */
@media (min-width: 1024px) {
  body.light-theme { background: #E8E8ED; }
  body.warm-theme { background: #E8E0D0; }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .bg-glow { display: none; }
}

/* === Themed Background Patterns === */
/* Rendered via .bg-pattern div inside #app */
.bg-pattern {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.scroll, .tabs, .fab, .modal, .inline-modal, .toast {
  position: relative;
  z-index: 1;
}

/* Midnight Gold — diagonal gold lines */
.theme-midnight .bg-pattern {
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 60px,
    rgba(201,168,76,0.025) 60px,
    rgba(201,168,76,0.025) 61px
  );
}

/* Deep Ocean — wave radials */
.theme-ocean .bg-pattern {
  background:
    radial-gradient(ellipse 600px 200px at 20% 80%, rgba(79,193,233,0.06), transparent),
    radial-gradient(ellipse 500px 150px at 80% 20%, rgba(79,193,233,0.05), transparent),
    radial-gradient(ellipse 400px 180px at 50% 50%, rgba(79,193,233,0.03), transparent);
}

/* Emerald — organic circles */
.theme-forest .bg-pattern {
  background:
    radial-gradient(circle 200px at 15% 25%, rgba(123,198,126,0.07), transparent),
    radial-gradient(circle 300px at 85% 75%, rgba(123,198,126,0.05), transparent),
    radial-gradient(circle 150px at 60% 10%, rgba(123,198,126,0.04), transparent);
}

/* Rose — petal glows */
.theme-rose .bg-pattern {
  background:
    radial-gradient(circle 250px at 80% 20%, rgba(212,132,154,0.07), transparent),
    radial-gradient(circle 200px at 20% 80%, rgba(212,132,154,0.05), transparent);
}

/* Neon Pulse — Tron grid */
.theme-neon .bg-pattern {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(0,245,212,0.025) 80px, rgba(0,245,212,0.025) 81px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(0,245,212,0.025) 80px, rgba(0,245,212,0.025) 81px);
}

/* Cyberpunk — diagonal neon X */
.theme-cyber .bg-pattern {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(255,46,170,0.03) 50px, rgba(255,46,170,0.03) 51px),
    repeating-linear-gradient(-45deg, transparent, transparent 50px, rgba(255,46,170,0.02) 50px, rgba(255,46,170,0.02) 51px);
}

/* Rose Gold — warm spots */
.theme-rosegold .bg-pattern {
  background:
    radial-gradient(circle 300px at 70% 30%, rgba(232,168,124,0.06), transparent),
    radial-gradient(circle 200px at 30% 70%, rgba(232,168,124,0.04), transparent);
}

/* Aurora — northern lights bands */
.theme-aurora .bg-pattern {
  background:
    linear-gradient(170deg, transparent 30%, rgba(127,219,202,0.05) 45%, transparent 55%),
    linear-gradient(200deg, transparent 50%, rgba(127,219,202,0.035) 60%, transparent 70%),
    radial-gradient(ellipse 500px 200px at 50% 40%, rgba(127,219,202,0.04), transparent);
}

/* Slate — diagonal texture */
.theme-slate .bg-pattern {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(148,163,184,0.025) 40px,
    rgba(148,163,184,0.025) 41px
  );
}

/* Platinum VIP — diamond crosshatch */
.theme-platinum .bg-pattern {
  background:
    repeating-linear-gradient(60deg, transparent, transparent 30px, rgba(212,175,85,0.03) 30px, rgba(212,175,85,0.03) 31px),
    repeating-linear-gradient(-60deg, transparent, transparent 30px, rgba(212,175,85,0.02) 30px, rgba(212,175,85,0.02) 31px);
}

/* Light themes — no pattern */
.theme-light .bg-pattern, .theme-warm .bg-pattern { display: none; }