@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Lato:wght@300;400;700&family=Share+Tech+Mono&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#0d1117;
    --bg2:#161b22;
    --bg3:#21262d;
    --panel:#161b22;
    --green:#4CAF50;
    --green2:#66BB6A;
    --green-light:#1a2e1a;
    --green-mid:#2d4a2d;
    --gold:#f0b830;
    --gold2:#f5c842;
    --gold-light:#2a2010;
    --gold-mid:#4a3a10;
    --accent:#ff6b6b;
    --warn:#ff9800;
    --blue:#58a6ff;
    --purple:#bc8cff;
    --text:#e6edf3;
    --text-mid:#b0c8b0;
    --text-dim:#7d8590;
    --text-light:#484f58;
    --border:#30363d;
    --border2:#3d444d;
    --neon:#4CAF50;
    --shadow:0 2px 16px rgba(0,0,0,0.4);
    --shadow-lg:0 8px 40px rgba(0,0,0,0.6);
    --font-head:'Playfair Display','Georgia',serif;
    --font-body:'Lato','Helvetica Neue',sans-serif;
    --font-mono:'Share Tech Mono',monospace;
}

html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;overflow-x:hidden}
.app{max-width:1400px;margin:0 auto;padding:0 16px 60px}

/* ── LOGIN ───────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-box{background:var(--bg2);border:1.5px solid var(--border);border-radius:16px;padding:40px;width:100%;max-width:380px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:16px}
.login-title{font-family:var(--font-head);font-size:1.6rem;font-weight:700;color:var(--green);text-align:center;margin-bottom:6px}
.login-sub{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-dim);text-align:center;letter-spacing:2px;margin-bottom:28px;text-transform:uppercase}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
#fin-nav{position:sticky;top:0;z-index:1000;background:rgba(13,17,23,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:16px}
.fin-nav-inner{max-width:1400px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;gap:12px}
.fin-nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.fin-nav-logo img{height:44px;width:auto;object-fit:contain}
.fin-nav-title{font-family:var(--font-mono);font-size:0.65rem;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;border-left:1px solid var(--border2);padding-left:12px}
@media(max-width:600px){.fin-nav-title{display:none}}
.fin-nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.fin-nav-user{font-family:var(--font-body);font-size:0.82rem;font-weight:700;color:var(--text)}
.fin-nav-period{font-family:var(--font-mono);font-size:0.72rem;color:var(--green);background:var(--green-light);border:1px solid var(--green-mid);padding:3px 10px;border-radius:8px}
.logout-btn{background:transparent;border:1.5px solid var(--border2);color:var(--text-dim);font-family:var(--font-body);font-size:0.75rem;font-weight:700;padding:5px 12px;cursor:pointer;border-radius:16px;transition:all 0.2s;text-transform:uppercase;letter-spacing:1px}
.logout-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── TABS ─────────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:2px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs-mobile-select{display:none;width:100%;margin-bottom:16px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-body);font-size:0.9rem;padding:10px 12px;outline:none}
@media(max-width:600px){.tabs{display:none}.tabs-mobile-select{display:block}}
.tab{font-family:var(--font-body);font-size:0.72rem;font-weight:700;letter-spacing:0.5px;padding:10px 16px;cursor:pointer;color:var(--text-dim);border:none;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all 0.2s;background:transparent;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.tab:hover{color:var(--green)}
.tab.active{color:var(--green);border-bottom-color:var(--green)}
.tab-content{display:none}
.tab-content.active{display:block}

/* ── PANELS ──────────────────────────────────────────────────────────────── */
.panel{background:var(--panel);border:1.5px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.panel-title{font-family:var(--font-body);font-size:0.7rem;font-weight:700;letter-spacing:2px;color:var(--green);margin-bottom:14px;display:flex;align-items:center;gap:8px;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}

/* ── INPUTS ──────────────────────────────────────────────────────────────── */
.input-group{margin-bottom:12px}
.input-group label{display:block;font-family:var(--font-body);font-size:0.72rem;font-weight:700;color:var(--green);letter-spacing:0.5px;margin-bottom:4px;text-transform:uppercase}
.input-group input,.input-group select,.input-group textarea{width:100%;background:var(--bg3);border:1.5px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font-body);font-size:1rem;padding:10px 13px;outline:none;transition:border-color 0.2s;appearance:none;-webkit-appearance:none}
.input-group input:focus,.input-group select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(76,175,80,0.15)}
.input-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234CAF50' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
.calc-btn{width:100%;padding:13px;background:var(--green);border:none;color:#fff;font-family:var(--font-body);font-size:0.9rem;font-weight:700;letter-spacing:1px;cursor:pointer;border-radius:10px;transition:all 0.2s;margin-top:8px;text-transform:uppercase}
.calc-btn:hover{background:var(--green2)}
.calc-grid{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.calc-grid{grid-template-columns:1fr}}

/* ── SCROLLBARS ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
* { scrollbar-width: thin; scrollbar-color: var(--border2) var(--bg2); }

/* ── STAT CARDS ──────────────────────────────────────────────────────────── */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:900px){.stat-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dash-bottom{grid-template-columns:1fr !important}}
.stat-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:16px;position:relative;overflow:hidden;transition:border-color 0.2s}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.stat-card.income::before{background:var(--green)}
.stat-card.expense::before{background:var(--accent)}
.stat-card.net::before{background:var(--gold)}
.stat-card.fund::before{background:var(--blue)}
.stat-card.crypto::before{background:var(--purple)}
.stat-card.goal::before{background:var(--gold)}
.stat-card:hover{border-color:var(--border2)}
.stat-card-label{font-family:var(--font-body);font-size:0.65rem;font-weight:700;color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.stat-card-value{font-family:var(--font-head);font-size:1.6rem;font-weight:900;line-height:1.1;margin-bottom:4px}
.stat-card.income .stat-card-value{color:var(--green)}
.stat-card.expense .stat-card-value{color:var(--accent)}
.stat-card.net .stat-card-value{color:var(--gold)}
.stat-card.fund .stat-card-value{color:var(--blue)}
.stat-card.crypto .stat-card-value{color:var(--purple)}
.stat-card-sub{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-dim)}

/* ── TABLES ──────────────────────────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:0.82rem}
.data-table th{background:var(--bg3);color:var(--green);font-weight:700;font-size:0.68rem;letter-spacing:1px;text-transform:uppercase;padding:10px 12px;text-align:left;border-bottom:2px solid var(--border2);white-space:nowrap}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.data-table tr:hover td{background:var(--bg3)}
.data-table tr:last-child td{border-bottom:none}
@media(max-width:600px){
    .data-table thead{display:none}
    .data-table tr{display:block;background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;margin-bottom:10px;padding:12px}
    .data-table td{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:0.8rem}
    .data-table td:last-child{border-bottom:none}
    .data-table td::before{content:attr(data-label);font-size:0.68rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;flex-shrink:0;margin-right:8px}
}

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge{display:inline-block;font-size:0.65rem;font-weight:700;padding:3px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
.badge-income{background:#1a2e1a;color:var(--green);border:1px solid var(--green-mid)}
.badge-expense{background:#2e1a1a;color:var(--accent);border:1px solid #4a2020}
.badge-crypto{background:#1a1a2e;color:var(--purple);border:1px solid #2d2d4a}
.badge-farm{background:#1a2a1a;color:var(--green2);border:1px solid var(--green-mid)}
.badge-salary{background:#1a2030;color:var(--blue);border:1px solid #2d3a50}

/* ── EDIT / DELETE BUTTONS ───────────────────────────────────────────────── */
.edit-btn{background:transparent;border:1.5px solid var(--border2);color:var(--text-dim);font-family:var(--font-body);font-size:0.72rem;font-weight:700;padding:4px 10px;cursor:pointer;border-radius:8px;transition:all 0.2s;text-transform:uppercase}
.edit-btn:hover{border-color:var(--green);color:var(--green)}
.delete-btn{background:transparent;border:1.5px solid var(--border2);color:var(--text-dim);font-family:var(--font-body);font-size:0.72rem;font-weight:700;padding:4px 10px;cursor:pointer;border-radius:8px;transition:all 0.2s;text-transform:uppercase}
.delete-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── MODAL ───────────────────────────────────────────────────────────────── */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:2000;display:none;align-items:center;justify-content:center}
#modal-overlay.open{display:flex}
#modal-box{background:var(--bg2);border:1.5px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;margin:16px;box-shadow:var(--shadow-lg)}
#modal-title{font-family:var(--font-body);font-size:0.82rem;font-weight:700;color:var(--green);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}
.modal-close{cursor:pointer;color:var(--text-dim);font-size:1.2rem;line-height:1;transition:color 0.2s}
.modal-close:hover{color:var(--accent)}
.modal-btns{display:flex;gap:10px;margin-top:16px}
.modal-btns button{flex:1}
.btn-cancel{width:100%;padding:12px;background:transparent;border:1.5px solid var(--border2);color:var(--text-dim);font-family:var(--font-body);font-size:0.88rem;font-weight:700;cursor:pointer;border-radius:10px;transition:all 0.2s;text-transform:uppercase}
.btn-cancel:hover{border-color:var(--accent);color:var(--accent)}

/* ── CRYPTO TICKER ───────────────────────────────────────────────────────── */
.crypto-ticker{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ticker-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px}
.ticker-coin{font-family:var(--font-mono);font-size:0.72rem;font-weight:700;color:var(--text-dim);letter-spacing:1px}
.ticker-price{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--purple)}
.ticker-ves{font-family:var(--font-mono);font-size:0.68rem;color:var(--text-dim);margin-top:2px}

/* ── BAR CHART ───────────────────────────────────────────────────────────── */
.bar-row{display:grid;grid-template-columns:120px 1fr 80px;align-items:center;gap:8px;font-family:var(--font-body);font-size:0.75rem;margin-bottom:6px}
.bar-label{color:var(--text-dim);text-align:right;font-size:0.72rem}
.bar-track{background:var(--bg3);border-radius:4px;height:10px;overflow:hidden;border:1px solid var(--border)}
.bar-fill{height:100%;border-radius:4px;transition:width 0.5s ease;min-width:2px}
.bar-fill.income{background:var(--green)}
.bar-fill.expense{background:var(--accent)}
.bar-fill.crypto{background:var(--purple)}
.bar-val{color:var(--text);text-align:right;font-weight:700;font-size:0.72rem}

/* ── FUND CARDS ──────────────────────────────────────────────────────────── */
.fund-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media(max-width:700px){.fund-grid{grid-template-columns:1fr}}
.fund-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:16px}
.fund-card-name{font-family:var(--font-head);font-size:0.95rem;font-weight:700;color:var(--text);margin-bottom:8px}
.fund-card-balance{font-family:var(--font-head);font-size:1.4rem;font-weight:900;color:var(--blue);margin-bottom:6px}
.fund-card-target{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-dim);margin-bottom:10px}
.fund-progress{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-bottom:12px}
.fund-progress-fill{height:100%;background:var(--blue);border-radius:3px;transition:width 0.5s}

/* ── PERIOD SELECTOR ─────────────────────────────────────────────────────── */
.period-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.period-bar select{background:var(--bg3);border:1.5px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font-mono);font-size:0.82rem;padding:6px 12px;outline:none;cursor:pointer}
.period-bar select:focus{border-color:var(--green)}
.period-label{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-dim);letter-spacing:1px}

/* ── RESULT ROW ──────────────────────────────────────────────────────────── */
.result-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg3);border-radius:8px;font-family:var(--font-body);font-size:0.82rem;margin-bottom:4px;border:1px solid var(--border)}
.result-row span:first-child{color:var(--text-dim)}
.result-row span:last-child{font-weight:700;color:var(--green)}
.result-row.total{background:var(--green-light);border:1.5px solid var(--green-mid)}
.result-row.total span{color:var(--green)!important}
.result-section-title{font-family:var(--font-body);font-size:0.7rem;font-weight:700;letter-spacing:2px;color:var(--green);margin-bottom:8px;padding-bottom:6px;border-bottom:1.5px solid var(--border);text-transform:uppercase}

@keyframes flash{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.flash{animation:flash 0.3s ease forwards}