/* Ощадна книжка — v2. Тема: паперова книжка з зеленою обкладинкою і золотою монетою. */
:root {
    --paper: #f3efe4;
    --card: #fffdf6;
    --ink: #23301f;
    --muted: #75816e;
    --line: #ddd5bf;
    --cover: #14532d;
    --cover-2: #0b3d20;
    --gold: #c9971c;
    --gold-2: #f0c14b;
    --danger: #b0432f;
    --ok: #2f7d4f;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(35, 48, 31, .06), 0 10px 24px -14px rgba(35, 48, 31, .28);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--paper);
    background-image: radial-gradient(1100px 420px at 50% -180px, rgba(20, 83, 45, .10), transparent 70%);
    background-repeat: no-repeat;
}
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .01em; }
h1 { font-size: 1.7rem; margin: 0 0 1rem; }
h2 { font-size: 1.12rem; margin: 0 0 .8rem; }
a { color: var(--cover); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* ── Шапка ─────────────────────────────── */
.topbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 18px;
    background: linear-gradient(180deg, var(--cover), var(--cover-2));
    color: #f4eeda;
    border-bottom: 3px solid var(--gold);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.topbar__brand { display: flex; align-items: center; gap: 10px; font-family: Georgia, serif; font-size: 1.06rem; font-weight: 700; letter-spacing: .02em; }
.topbar__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ffe9a8, var(--gold-2) 45%, var(--gold) 78%, #8a6210);
    color: #5c3d00; font-family: Georgia, serif; font-size: 17px; font-weight: 700;
    border: 1px solid #8a6210;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 2px 4px rgba(0, 0, 0, .35);
}
.topbar__nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.topbar__nav a {
    color: #efe6c8; text-decoration: none; font-size: .92rem;
    padding: 6px 11px; border-radius: 999px; transition: background .15s;
}
.topbar__nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── Перемикач мови ────────────────────── */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .15); }
.lang-switch a {
    padding: 3px 10px; border-radius: 999px; text-decoration: none;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em;
    color: #e5dcb9; transition: background .15s, color .15s;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a.is-active { background: var(--gold-2); color: #4a3200; }
.auth-page .lang-switch { position: absolute; top: 16px; right: 16px; background: rgba(20, 83, 45, .12); border-color: var(--line); }
.auth-page .lang-switch a { color: var(--muted); }
.auth-page .lang-switch a:hover { color: var(--ink); }

/* ── Каркас сторінки ───────────────────── */
.page { max-width: 780px; margin: 0 auto; padding: 26px 16px 56px; }
.page--narrow { max-width: 520px; }
.page > section + section { margin-top: 18px; }

/* ── Картка балансу (обкладинка книжки) ── */
.balance-card {
    position: relative;
    text-align: center;
    padding: 26px 20px 20px;
    border-radius: var(--radius);
    color: #f6efd8;
    background:
        radial-gradient(700px 220px at 50% -60px, rgba(240, 193, 75, .22), transparent 70%),
        linear-gradient(160deg, #1a6338, var(--cover) 45%, var(--cover-2));
    border: 1px solid #0a301a;
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(240, 193, 75, .35), inset 0 0 0 5px rgba(0, 0, 0, .12), inset 0 0 0 6px rgba(240, 193, 75, .3);
}
.balance-card__label { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; color: #d8ecc9; opacity: .85; }
.balance-card__usd { margin: .3rem 0 0; font-family: Georgia, serif; font-size: 2.7rem; font-weight: 700; color: #ffe9a8; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums; }
.balance-card__uah { margin: .1rem 0 .9rem; font-size: 1.12rem; color: #cfe4c0; font-variant-numeric: tabular-nums; }
.balance-card__split { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding-top: .8rem; border-top: 1px dashed rgba(240, 193, 75, .45); }
.split { font-size: .95rem; font-variant-numeric: tabular-nums; }
.split small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.split--plus { color: #b7f0c3; }
.split--minus { color: #f3b8a6; }
.balance-card__rate { margin: .9rem 0 0; font-size: .78rem; color: #bcd6ad; opacity: .9; }

/* ── Картки ────────────────────────────── */
.week-card, .entry-card, .history-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
}
.entry-card { border-left: 4px solid var(--cover); }
.entry-card--expense { border-left-color: var(--danger); }

.week-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.week-card__count { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress { height: 12px; border-radius: 999px; background: #e9e2cd; border: 1px solid var(--line); overflow: hidden; }
.progress__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--gold-2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: width .5s ease;
}
.week-card__sub { margin: .7rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.week-card__spent { margin: .2rem 0 0; color: var(--danger); font-size: .92rem; font-variant-numeric: tabular-nums; }
.stamp-badge {
    display: inline-block; margin: .7rem 0 0; padding: 4px 12px;
    border: 2px solid var(--ok); border-radius: 999px; transform: rotate(-2deg);
    color: var(--ok); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
    background: rgba(47, 125, 79, .08);
}

/* ── Форми ─────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; }
.form--inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.form label, .form .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form__grow { flex: 1 1 180px; }
.form label > span, .form .field > span:first-child { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.form input, .form select {
    font: inherit; color: var(--ink);
    padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form select:focus { outline: none; border-color: var(--cover); box-shadow: 0 0 0 3px rgba(20, 83, 45, .16); }
.amount-row { display: flex; gap: 6px; }
.amount-row input { flex: 1 1 90px; min-width: 0; }
.curr-select { flex: 0 0 auto; font-weight: 700; }
.hint { margin: .5rem 0 0; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.btn {
    font: inherit; font-weight: 700; cursor: pointer;
    padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
    transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 1px; }
.btn--primary { background: linear-gradient(180deg, #1a6338, var(--cover)); color: #f6efd8; border-color: #0a301a; box-shadow: 0 2px 6px -2px rgba(20, 83, 45, .6); }
.btn--primary:hover { background: linear-gradient(180deg, #1d7040, #10482a); }
.btn--danger { background: linear-gradient(180deg, #c25642, var(--danger)); color: #fdf1ea; border-color: #7f2c1c; box-shadow: 0 2px 6px -2px rgba(176, 67, 47, .6); }
.btn--danger:hover { background: linear-gradient(180deg, #cc5f4a, #9c3826); }

.alert { padding: 9px 13px; border-radius: 10px; font-size: .92rem; border: 1px solid transparent; }
.alert--ok { background: #e6f2e4; border-color: #bcd9b8; color: #245d38; }
.alert--error { background: #fbe9e4; border-color: #ecc4b8; color: #8c3220; }

/* ── Таблиці-відомості ─────────────────── */
.ledger { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ledger th {
    text-align: left; padding: 7px 10px;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
    border-bottom: 2px solid var(--cover);
}
.ledger td { padding: 8px 10px; border-bottom: 1px dashed var(--line); }
.ledger tbody tr:hover { background: rgba(20, 83, 45, .05); }
.negative { color: var(--danger); }
.empty { color: var(--muted); font-style: italic; }
.footer-note { margin-top: 26px; text-align: center; font-size: .8rem; color: var(--muted); }

/* ── Сторінки входу/реєстрації ─────────── */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card {
    width: 100%; max-width: 380px; text-align: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    border-top: 6px solid var(--cover);
    padding: 30px 26px 26px;
    box-shadow: var(--shadow), inset 0 6px 0 -5px var(--gold);
}
.auth-card h1 { font-size: 1.5rem; margin: .3rem 0 0; }
.auth-card__stamp {
    width: 58px; height: 58px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ffe9a8, var(--gold-2) 45%, var(--gold) 78%, #8a6210);
    border: 1px solid #8a6210;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), 0 4px 10px -3px rgba(0, 0, 0, .4);
    color: #5c3d00; font-family: Georgia, serif; font-size: 30px; font-weight: 700;
}
.tagline { margin: .3rem 0 1.3rem; color: var(--muted); font-size: .92rem; }
.auth-card .form { text-align: left; }
.auth-switch { margin-top: 1.2rem; font-size: .9rem; color: var(--muted); }

/* ── Адмінка ───────────────────────────── */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin-stat {
    background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold);
    border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.admin-stat__value { margin: 0; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-stat__label { margin: .15rem 0 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.admin-table-wrap { overflow-x: auto; }
.admin-actions form { display: inline-flex; gap: 10px; align-items: center; }
.btn-link { background: none; border: none; padding: 0; font: inherit; font-size: .88rem; color: var(--cover); text-decoration: underline; cursor: pointer; }
.btn-link:hover { color: #0b3d20; }
.btn-link--danger { color: var(--danger); }
.btn-link--danger:hover { color: #7f2c1c; }
.tag-you { font-size: .7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 5px; }

/* ── Ціль та заморожений капітал ───────── */
.balance-card__frozen {
    margin: .6rem 0 0; font-size: .78rem; color: #d8ecc9; opacity: .85;
}
.goal-card { border-left: 4px solid var(--gold); }
.goal-card .progress__fill { background: linear-gradient(90deg, var(--cover), #1a6338); }

/* ── Дрібниці ──────────────────────────── */
@media (max-width: 560px) {
    .form--inline { flex-direction: column; align-items: stretch; }
    .balance-card__usd { font-size: 2.2rem; }
    .topbar { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}