/* פנקס — סגנון ledger ירוק-כסף על רקע ירקרק-אפור, טיפוגרפיה Frank Ruhl Libre למספרים */
:root {
    --bg: #F2F4F1; --surface: #FFFFFF; --ink: #1B2A26; --muted: #5E6B66;
    --line: #DDE3DE; --green: #0F6B57; --expense: #B4552D; --gold: #A5842B;
    --blue: #2F5FA8; --ok: #2F7D5B; --err: #B4485B;
    --radius: 14px; --shadow: 0 1px 3px rgba(27,42,38,.07), 0 6px 18px rgba(27,42,38,.05);
}
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: 'Assistant', sans-serif; font-size: 16px; line-height: 1.55;
}
h1, h2, h3, .num, .pts { font-family: 'Frank Ruhl Libre', serif; }
h1 { font-size: 1.7rem; margin: .2em 0; } h2 { font-size: 1.25rem; margin: 1.6em 0 .4em; }
a { color: var(--green); }

/* ---- ניווט עליון (דק) ---- */
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}
.brand { font-family: 'Frank Ruhl Libre', serif; font-weight: 900; font-size: 1.2rem; letter-spacing: .02em; }
.brand span { color: var(--green); margin: 0 4px; }
.brand.big { font-size: 1.7rem; text-align: center; margin-bottom: 18px; }
.icon-link { color: var(--muted); display: grid; place-items: center; padding: 6px; border-radius: 10px; }
.icon-link:hover { background: var(--bg); color: var(--ink); }
.icon-link svg { width: 20px; height: 20px; }

/* ---- סרגל ניווט תחתון (סגנון אפליקציית מובייל) ---- */
.bottom-nav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
    display: flex; align-items: flex-end; justify-content: space-around;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(27,42,38,.06);
}
.bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 600;
    padding: 4px 14px; border-radius: 12px; transition: color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a.active { color: var(--green); background: #E6F1EC; }
.bottom-nav a:active { transform: scale(.93); }
.bottom-nav .fab {
    width: 54px; height: 54px; border-radius: 50%; margin-top: -26px;
    background: linear-gradient(155deg, #16876C, #0B4F40);
    color: #fff; display: grid; place-items: center; padding: 0;
    box-shadow: 0 6px 16px rgba(15,107,87,.4), 0 0 0 5px var(--surface);
}
.bottom-nav .fab svg { width: 24px; height: 24px; }
.bottom-nav .fab.active { background: linear-gradient(155deg, #0B4F40, #063429); }
.bottom-nav .fab:active { transform: scale(.92); }

main { max-width: 1080px; margin: 0 auto; padding: 22px 20px 110px; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 4px 18px 18px; }
@media (prefers-reduced-motion: reduce) { .bottom-nav a, .bottom-nav .fab { transition: none; } }

/* ---- כותרת מחזור (eyebrow + טווח) ---- */
.cycle-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cyc-eyebrow { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cyc-nav { text-decoration: none; font-weight: 700; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--green); transition: transform .1s; }
.cyc-nav:active { transform: scale(.94); }
.cyc-nav.dis { color: var(--muted); pointer-events: none; }

.cycle-windows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.cycle-windows.single { grid-template-columns: 1fr; }
.cw-card {
    background: var(--surface); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 3px; border-inline-start: 4px solid var(--green);
}
.cw-card.cw-paybox { border-inline-start-color: var(--blue); }
.cw-lbl { font-size: .78rem; font-weight: 700; color: var(--muted); }
.cw-range { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: 1.15rem; }
.cw-total { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: 1rem; color: var(--expense); margin-top: 2px; }
@media (max-width: 560px) { .cycle-windows { grid-template-columns: 1fr; } }

/* ---- כרטיס Hero (העמוד הראשי) — האלמנט החתום: כריכת פנקס ---- */
.hero-card {
    background: linear-gradient(160deg, #12503F 0%, #0B3A2F 55%, #082A22 100%);
    border-radius: 22px; padding: 26px 24px 22px; color: #EFF3EE;
    box-shadow: 0 10px 28px rgba(8,42,34,.28); position: relative; overflow: hidden;
}
.hero-card::before { /* מרקם עדין של קווי פנקס */
    content: ''; position: absolute; inset: 0; opacity: .06; pointer-events: none;
    background: repeating-linear-gradient(180deg, transparent 0 27px, #fff 27px 28px);
}
.hero-top { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.hero-lbl { font-size: .82rem; opacity: .75; font-weight: 600; }
.hero-num { font-family: 'Frank Ruhl Libre', serif; font-weight: 900; font-size: 2.6rem; letter-spacing: -.01em; }
.hero-chips { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
    flex: 1; min-width: 100px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
}
.chip-lbl { font-size: .74rem; opacity: .7; }
.chip-num { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: 1.15rem; }
.chip-num.expense { color: #F3A583; } .chip-num.income { color: #8FDCAE; }
.num.expense, .amt.expense { color: var(--expense); } .num.income, .amt.income { color: var(--ok); }

/* ---- כרטיסי אשראי מיוחדים (האלמנט החתום) ---- */
.special-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 22px 0; }
.ccard {
    border-radius: 18px; padding: 20px 22px; color: #fff; box-shadow: var(--shadow);
    position: relative; overflow: hidden; min-height: 190px;
}
.ccard::after { /* פס מגנטי מרומז */
    content: ''; position: absolute; inset-inline: 0; top: 52px; height: 30px; background: rgba(255,255,255,.09);
}
.ccard.flyall { background: linear-gradient(135deg, #3E3413, #6B5A1E 55%, #8A7527); }
.ccard.paybox { background: linear-gradient(135deg, #14263F, #23446E 55%, #2F5FA8); }
.ccard-top { display: flex; justify-content: space-between; font-weight: 700; position: relative; z-index: 1; }
.ccard-num { font-family: monospace; letter-spacing: .12em; opacity: .85; }
.ccard-main { margin: 26px 0 10px; position: relative; z-index: 1; }
.pts { font-size: 2.3rem; font-weight: 900; display: block; }
.pts-lbl { opacity: .85; font-size: .85rem; }
.ccard-detail { font-size: .85rem; opacity: .95; position: relative; z-index: 1; display: grid; gap: 2px; }
.ccard .fine { opacity: .7; font-size: .78rem; }
.ccard .warn { color: #FFD9A0; font-weight: 600; }
.ccard .ok { color: #B9F0CE; font-weight: 600; }
.pb-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; margin: 6px 0 10px; }
.pb-fill { height: 100%; background: linear-gradient(90deg, #7FD8A8, #B9F0CE); border-radius: 999px; transition: width .6s; }

/* ---- גרפים ---- */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chart-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.chart-box.wide { grid-column: 1 / -1; }
.chart-box h3 { margin: 0 0 12px; }
.chart-box canvas { max-height: 260px; }
.legend { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 5px; font-size: .88rem; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legend b { margin-inline-start: auto; font-family: 'Frank Ruhl Libre', serif; }

/* ---- טבלאות ---- */
.tbl { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: .92rem; }
.tbl th { text-align: right; background: #E9EEE9; padding: 10px 12px; font-size: .82rem; color: var(--muted); }
.tbl td { padding: 9px 12px; border-top: 1px solid var(--line); }
.tbl .amt { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; white-space: nowrap; }
.credit-row { background: #F4FAF6; }
.tag { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: .74rem; white-space: nowrap; }
.fine { color: var(--muted); font-size: .8rem; }

/* ---- טפסים ---- */
.btn { background: var(--green); color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; box-shadow: 0 3px 10px rgba(15,107,87,.28); transition: transform .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.96); box-shadow: 0 1px 4px rgba(15,107,87,.28); }
.btn.sm { padding: 6px 14px; font-size: .85rem; box-shadow: none; }
input, select { font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters-sum { margin-inline-start: auto; color: var(--muted); }
.cat-sel { font-size: .82rem; padding: 4px 8px; }
.cat-sel.saved { border-color: var(--ok); box-shadow: 0 0 0 2px rgba(47,125,91,.25); }
.cat-sel.errored { border-color: var(--err); }

.upload-form { display: grid; gap: 14px; max-width: 460px; }
.dropzone { border: 2px dashed var(--green); border-radius: var(--radius); padding: 34px; text-align: center; cursor: pointer; background: var(--surface); display: grid; gap: 6px; font-weight: 600; }
.dropzone input { display: none; }
.dropzone .fname { color: var(--muted); font-weight: 400; }

.settings-form { display: grid; gap: 14px; max-width: 460px; background: var(--surface); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); }
.field { display: grid; gap: 4px; }
.field label { font-weight: 700; font-size: .9rem; }
.card-row { display: flex; gap: 10px; align-items: center; background: var(--surface); padding: 10px 14px; border-radius: 10px; margin-bottom: 8px; box-shadow: var(--shadow); flex-wrap: wrap; }
.card-row input[type=text] { flex: 1; min-width: 160px; }

/* ---- הודעות ---- */
.note { color: var(--muted); font-size: .9rem; }
.err { color: var(--err); font-weight: 700; }
.ok-box { background: #E8F5EC; border: 1px solid #BCE0C8; color: var(--ok); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.empty { text-align: center; padding: 60px 20px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---- כניסה ---- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-box { background: var(--surface); padding: 36px; border-radius: 18px; box-shadow: var(--shadow); display: grid; gap: 12px; width: min(340px, 90vw); }
.login-box input { padding: 12px; }
.login-box button { background: var(--green); color: #fff; border: 0; border-radius: 999px; padding: 11px; font: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 720px) {
    .charts { grid-template-columns: 1fr; }
    .tbl { font-size: .82rem; } .tbl td, .tbl th { padding: 7px 8px; }
    main { padding: 18px 12px 50px; }
}
@media (prefers-reduced-motion: reduce) { .pb-fill { transition: none; } }

/* ---- תובנות (צפי, אשתקד, קבועות/משתנות) ---- */
.insight-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.insight { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; display: grid; gap: 3px; }
.insight .lbl { color: var(--muted); font-size: .82rem; }
.insight .num { font-size: 1.45rem; font-weight: 700; }
.fv-bar { height: 12px; border-radius: 999px; background: #DCE7E0; overflow: hidden; margin: 6px 0 2px; }
.fv-fixed { height: 100%; background: var(--blue); border-radius: 999px 0 0 999px; }

/* ---- תקציבים ---- */
.budgets { margin: 18px 0; }
.budget-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.budget-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.budget-name i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.budget-bar { height: 12px; border-radius: 999px; background: #E6ECE7; overflow: hidden; }
.budget-fill { height: 100%; background: var(--green); border-radius: 999px; }
.budget-fill.over { background: var(--err); }
.budget-nums { font-family: 'Frank Ruhl Libre', serif; font-size: .88rem; white-space: nowrap; }
.budget-nums.expense { color: var(--err); font-weight: 700; }

/* ---- טבלה פנימית + כפתור משני ---- */
.tbl.inner { box-shadow: none; }
.btn.ghost { background: var(--surface); color: var(--green); border: 1.5px solid var(--green); }
.field.row { display: grid; grid-template-columns: 1fr 130px auto; align-items: center; gap: 8px; }
code { background: #E9EEE9; padding: 2px 7px; border-radius: 6px; font-size: .8rem; direction: ltr; display: inline-block; word-break: break-all; }
@media (max-width: 720px) { .budget-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---- התעלמות ומחיקה ---- */
.ignored-row { opacity: .45; }
.ignored-tag { background: #F4E3E3; color: var(--err); border-color: #E7C6C6; }
.row-actions { white-space: nowrap; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; cursor: pointer; font-size: .9rem; margin-inline-start: 4px; }
.icon-btn:hover { background: var(--bg); }
.delete-btn:hover { border-color: var(--err); }

/* ---- עמוד התאמת בנק ---- */
.ok { color: var(--ok); font-weight: 600; }
.warn { color: #A66A1E; font-weight: 600; }
.bank-row {
    background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 16px;
    margin-bottom: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.bank-row.unmatched { border-inline-start: 4px solid #C99A3B; }
.bank-row.just-added { animation: bank-flash 1.6s ease-out; }
@keyframes bank-flash { from { background: #E6F1EC; } to { background: var(--surface); } }
.bank-main { display: flex; align-items: center; gap: 10px; }
.bank-amount { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: 1.1rem; }
.bank-match-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.bank-del { margin-inline-start: 4px; }
@media (prefers-reduced-motion: reduce) { .bank-row.just-added { animation: none; } }