@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg:#08050f;
  --bg-elevated:#130a26;
  --bg-sunken:#1a0d30;
  --bg-sheet:#150c28;
  --border: rgba(157,78,221,0.22);
  --border-strong: rgba(157,78,221,0.4);
  --text:#e8e4f1;
  --text-muted:#a196b8;
  --text-faint:#6c6280;
  --accent:#a768f0;
  --accent-strong:#c396fb;
  --accent-soft: rgba(157,78,221,0.16);
  --cyan:#3fd8ff;
  --success:#3ecf72;
  --success-soft: rgba(62,207,114,0.14);
  --warning:#f5a524;
  --warning-soft: rgba(245,165,36,0.14);
  --critical:#f2596b;
  --critical-soft: rgba(242,89,107,0.14);

  --font-display:'Sora','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  user-select:none;
}
input, textarea{user-select:text;}
h1,h2,h3{font-family:var(--font-display); margin:0; text-wrap:balance;}
p{margin:0;}
button{font-family:inherit; color:inherit;}
::selection{background:var(--accent-soft);}

#app{
  position:relative;
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  overflow:hidden;
}

.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding: calc(var(--safe-top) + 20px) 22px calc(var(--safe-bottom) + 20px);
  animation: screen-in 0.32s cubic-bezier(.22,.9,.32,1);
}
[hidden]{display:none !important;}
@keyframes screen-in{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .screen{animation:none;}
}

.brand-lockup{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
.brand-logo{width:128px; height:128px; border-radius:28px; object-fit:cover; margin-bottom:6px;}
.brand-logo:not([src]), .brand-logo[src=""]{display:none;}
.brand-mark{
  font-family:var(--font-display); font-weight:700; font-size:2.1rem; letter-spacing:-0.01em;
  background:linear-gradient(135deg, var(--accent-strong), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-slogan{color:var(--text-muted); font-size:0.92rem; font-style:italic;}
.brand-powered{color:var(--text-faint); font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase;}

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:14px; padding:15px 18px;
  font-family:var(--font-body); font-weight:600; font-size:0.98rem;
  cursor:pointer; transition:transform 0.12s ease, opacity 0.12s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:linear-gradient(135deg, var(--accent), #7c3aed); color:#fff; box-shadow:0 6px 20px rgba(157,78,221,0.35);}
.btn-ghost{background:var(--bg-sunken); color:var(--text); border:1px solid var(--border);}
.btn-text{background:transparent; color:var(--text-muted); padding:10px;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.45; pointer-events:none;}

.card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:18px; flex-shrink:0;}

.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:0.8rem; color:var(--text-muted); font-weight:500;}
.field input, .field textarea{
  background:var(--bg-sunken); border:1px solid var(--border); border-radius:12px;
  padding:13px 14px; color:var(--text); font-size:1rem; font-family:var(--font-body);
  outline:none;
}
.field input:focus, .field textarea:focus{border-color:var(--border-strong);}

.pin-dots{display:flex; gap:14px; justify-content:center; margin:8px 0;}
.pin-dot{width:16px; height:16px; border-radius:50%; border:2px solid var(--border-strong); transition:all 0.15s ease;}
.pin-dot.filled{background:var(--accent); border-color:var(--accent); box-shadow:0 0 12px rgba(167,104,240,0.6);}

.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:auto;}
.keypad button{
  aspect-ratio:1; border-radius:50%; border:1px solid var(--border); background:var(--bg-elevated);
  color:var(--text); font-size:1.4rem; font-family:var(--font-mono);
}
.keypad button:active{background:var(--bg-sunken);}
.keypad button.keypad-action{border:none; background:transparent; color:var(--text-muted); font-size:1rem;}

.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.topbar .greet{display:flex; flex-direction:column;}
.topbar .greet .name{font-family:var(--font-display); font-weight:600; font-size:1.05rem;}
.topbar .greet .date{font-size:0.75rem; color:var(--text-muted); font-family:var(--font-mono);}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:1.1rem;
}

.dashboard-scroll{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding-bottom:110px; -webkit-overflow-scrolling:touch;}

.networth-card{
  background:linear-gradient(150deg, var(--bg-elevated), var(--bg-sunken));
  border:1px solid var(--border-strong); border-radius:20px; padding:22px;
  position:relative; overflow:hidden; flex-shrink:0;
}
.networth-card::after{
  content:""; position:absolute; top:-40%; right:-20%; width:70%; height:140%;
  background:radial-gradient(circle, rgba(167,104,240,0.18), transparent 70%);
}
.networth-label{font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); display:flex; align-items:center; gap:8px;}
.networth-amount{font-family:var(--font-display); font-weight:700; font-size:2.1rem; margin-top:6px; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}
.networth-amount.hidden-amount{filter:blur(10px); user-select:none;}
.networth-breakdown{display:flex; gap:16px; margin-top:14px; font-size:0.8rem; color:var(--text-muted); position:relative;}
.networth-breakdown span b{color:var(--text); font-variant-numeric:tabular-nums;}
.eye-toggle{background:none; border:none; color:var(--text-muted); font-size:1rem; cursor:pointer; padding:2px;}

.section-title{font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:2px;}

.pnl-card .pnl-tabs{display:flex; gap:6px; margin:10px 0 14px;}
.pnl-tab{
  flex:1; text-align:center; padding:7px; border-radius:9px; font-size:0.8rem; font-weight:600;
  background:var(--bg-sunken); color:var(--text-muted); border:1px solid transparent;
}
.pnl-tab.active{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--border-strong);}
.pnl-value{font-family:var(--font-display); font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums;}
.pnl-value.positive{color:var(--success);}
.pnl-value.negative{color:var(--critical);}
.empty-state{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:20px 10px; color:var(--text-muted); font-size:0.85rem;
}
.empty-state .icon{font-size:1.6rem;}

.position-row{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--border); font-size:0.85rem;}
.position-row:first-of-type{border-top:none;}

.cashflow-split{display:flex; gap:12px;}
.cashflow-col{flex:1; border-radius:14px; padding:14px; }
.cashflow-col.income{background:var(--success-soft);}
.cashflow-col.expense{background:var(--critical-soft);}
.cashflow-col .cf-label{font-size:0.75rem; color:var(--text-muted); margin-bottom:4px;}
.cashflow-col .cf-amount{font-family:var(--font-display); font-weight:700; font-size:1.15rem; font-variant-numeric:tabular-nums;}
.cashflow-col.income .cf-amount{color:var(--success);}
.cashflow-col.expense .cf-amount{color:var(--critical);}

.bottom-bar{
  position:absolute; left:0; right:0; bottom:0; height:calc(74px + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:rgba(19,10,38,0.88); backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around;
}
.tab-btn{background:none; border:none; color:var(--text-faint); font-size:1.3rem; display:flex; flex-direction:column; align-items:center; gap:2px;}
.tab-btn.active{color:var(--accent-strong);}
.tab-btn span{font-size:0.62rem; font-weight:600;}
.fab{
  width:58px; height:58px; border-radius:50%; border:none; margin-top:-30px;
  background:linear-gradient(135deg, var(--accent), #7c3aed); color:#fff; font-size:1.8rem;
  box-shadow:0 8px 24px rgba(157,78,221,0.5);
  display:flex; align-items:center; justify-content:center;
}
.fab:active{transform:scale(0.94);}

.sheet-backdrop{
  position:absolute; inset:0; background:rgba(4,2,10,0.6); opacity:0; pointer-events:none; transition:opacity 0.25s ease; z-index:30;
}
.sheet-backdrop.open{opacity:1; pointer-events:auto;}
.bottom-sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:31;
  background:var(--bg-sheet); border-radius:24px 24px 0 0; border:1px solid var(--border);
  padding:10px 22px calc(24px + var(--safe-bottom));
  transform:translateY(100%); transition:transform 0.28s cubic-bezier(.22,.9,.32,1);
  max-height:88%; overflow-y:auto;
}
.bottom-sheet.open{transform:translateY(0);}
.sheet-handle{width:36px; height:4px; border-radius:2px; background:var(--border-strong); margin:8px auto 16px;}

.amount-input{
  font-family:var(--font-display); font-size:2.2rem; font-weight:700; text-align:center;
  background:transparent; border:none; color:var(--text); width:100%; outline:none;
  font-variant-numeric:tabular-nums;
}
.category-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0;}
.category-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px;
  border-radius:14px; background:var(--bg-sunken); border:1px solid transparent; color:var(--text-muted);
  font-size:0.68rem; text-align:center;
}
.category-chip .emoji{font-size:1.4rem;}
.category-chip.selected{border-color:var(--accent); background:var(--accent-soft); color:var(--text);}

.settings-row{
  display:flex; align-items:center; justify-content:space-between; padding:14px 0;
  border-bottom:1px solid var(--border); font-size:0.92rem;
}
.settings-row:last-child{border-bottom:none;}
.settings-row .row-label{display:flex; align-items:center; gap:10px;}
.chip-toggle{display:flex; background:var(--bg-sunken); border-radius:100px; padding:3px; gap:2px;}
.chip-toggle button{border:none; background:transparent; color:var(--text-muted); padding:6px 12px; border-radius:100px; font-size:0.78rem; font-weight:600;}
.chip-toggle button.active{background:var(--accent); color:#fff;}
.status-dot{width:8px; height:8px; border-radius:50%; background:var(--text-faint);}
.status-dot.on{background:var(--success);}

.inapp-banner{
  display:flex; gap:12px; align-items:flex-start; margin-top:22px;
  background:var(--warning-soft); border:1px solid rgba(245,165,36,0.4); border-radius:14px; padding:16px;
}
.inapp-banner-icon{font-size:1.3rem; flex-shrink:0;}
.inapp-banner-title{font-weight:700; font-size:0.92rem; margin-bottom:4px;}
.inapp-banner-text{font-size:0.84rem; color:var(--text-muted); line-height:1.5;}
.inapp-banner-text b{color:var(--text);}

.install-guide{display:flex; flex-direction:column; gap:14px; margin-top:22px;}
.install-step{display:flex; gap:12px; align-items:flex-start; background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:14px;}
.install-step .num{
  width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; flex-shrink:0; font-family:var(--font-mono);
}
.install-step p{font-size:0.86rem; color:var(--text-muted); line-height:1.5;}
.install-step b{color:var(--text);}

.toast{
  position:absolute; left:22px; right:22px; bottom:calc(90px + var(--safe-bottom));
  background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:14px;
  padding:13px 16px; font-size:0.86rem; text-align:center; z-index:50;
  opacity:0; transform:translateY(8px); transition:all 0.2s ease; pointer-events:none;
}
.toast.show{opacity:1; transform:translateY(0);}

.spinner{
  width:20px; height:20px; border-radius:50%; border:2.5px solid var(--border);
  border-top-color:var(--accent-strong); animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.lock-face{
  display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:14vh;
}
.lock-face .avatar{
  width:74px; height:74px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--cyan));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:#0a0614;
  margin-bottom:6px;
}
.link-row{display:flex; align-items:center; gap:10px; padding:14px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px;}
.link-row .icon{font-size:1.3rem;}
.link-row .grow{flex:1;}
.link-row .title{font-size:0.9rem; font-weight:600; color:var(--text); text-align:left;}
.link-row .sub{font-size:0.76rem; color:var(--text-muted);}