/* =========================================================
   GastosTracker — one light, cozy theme
   Sage paper, forest accent, rosewood for spending, honey for attention.
   Mobile target: Xiaomi 12 Pro (≈412 × 915 CSS px).
   ========================================================= */

:root {
    --bg: #eef1ea;
    --surface: #fbfcf8;
    --surface-2: #f4f6f0;
    --sunk: #e6eae1;
    --ink: #262c27;
    --ink-2: #59615a;
    --muted: #8a9389;
    --line: #dde2d6;
    --line-strong: #c9d0c1;

    --accent: #4a7559;
    --accent-ink: #ffffff;
    --accent-soft: #e1ebdd;
    --accent-hover: #3d6249;

    --expense: #a8475a;
    --expense-soft: #f6e4e6;
    --income: #3b8556;
    --income-soft: #e0efe4;
    --honey: #b9862a;
    --honey-soft: #f7ecd4;

    --paper: #fffef9;            /* ticket */
    --shadow-sm: 0 1px 2px rgba(48, 64, 44, .06);
    --shadow: 0 2px 6px rgba(48, 64, 44, .06), 0 12px 32px -12px rgba(48, 64, 44, .18);
    --shadow-lg: 0 24px 64px -16px rgba(38, 52, 36, .35);

    --r-sm: 8px;
    --r: 14px;
    --r-lg: 20px;

    --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;

    --sidebar: 236px;
    --tabbar: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
mark { background: var(--honey-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
code { font-family: var(--mono); font-size: .85em; background: var(--sunk); padding: .1em .35em; border-radius: 5px; }
small, .small { font-size: .8125rem; }
.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8;
        stroke-linecap: round; stroke-linejoin: round; }
svg.i-sm { width: 15px; height: 15px; }

/* ---------- App shell ---------- */

.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.sidebar {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 1.25rem;
    padding: 1.25rem .875rem;
    border-right: 1px solid var(--line);
    background: var(--surface-2);
}

.brand { display: flex; align-items: center; gap: .625rem; padding: .25rem .5rem; color: var(--ink); font-weight: 700; font-size: 1.0625rem; }
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink); font-size: .9rem; font-weight: 800;
}

.nav { display: grid; gap: 2px; }
.nav a {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .625rem; border-radius: 10px;
    color: var(--ink-2); font-weight: 550;
}
.nav a:hover { background: var(--sunk); color: var(--ink); text-decoration: none; }
.nav a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.nav a.active svg { color: var(--accent); }
.nav .count {
    margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--honey-soft); color: var(--honey); font-size: .75rem; font-weight: 700; text-align: center;
}

.sidebar-actions { margin-top: auto; display: grid; gap: .375rem; }
.sidebar-actions .btn { justify-content: flex-start; }
.sidebar-foot { display: flex; gap: .25rem; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1rem max(2rem, calc((100% - 1280px) / 2 + 2rem));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar h1 { margin-right: auto; }

.page { padding: .5rem 2rem 3rem; display: grid; gap: 1.5rem; align-content: start; max-width: 1280px; width: 100%; margin-inline: auto; }

.tabbar { display: none; }

/* ---------- Buttons & controls ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 38px; padding: 0 .875rem;
    border: 1px solid var(--line-strong); border-radius: 11px;
    background: var(--surface); color: var(--ink);
    font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer;
    transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--sunk); color: var(--ink); }
.btn.danger { color: var(--expense); }
.btn.danger:hover { background: var(--expense-soft); border-color: var(--expense); }
.btn.sm { min-height: 30px; padding: 0 .625rem; font-size: .8125rem; border-radius: 9px; }
.btn.icon { padding: 0; width: 38px; }
.btn.icon.sm { width: 30px; }
.btn.block { width: 100%; }

kbd {
    font-family: var(--font); font-size: .6875rem; font-weight: 700; color: var(--muted);
    border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
    padding: 0 .3rem; background: var(--surface);
}
.btn kbd { margin-left: auto; }

input[type=text], input[type=search], input[type=number], input[type=date], input[type=password], select, textarea {
    width: 100%; min-height: 40px; padding: .5rem .75rem;
    border: 1px solid var(--line-strong); border-radius: 11px;
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: .9375rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=color] { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }

label.field { display: grid; gap: .3rem; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
label.check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.form-grid { display: grid; gap: .875rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.form-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .25rem; }
.form-actions .spacer { margin-right: auto; }

/* Segmented control and chips */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--sunk); border-radius: 12px; }
.seg a, .seg button {
    padding: .35rem .7rem; border-radius: 9px; border: 0; background: none;
    color: var(--ink-2); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.seg a:hover, .seg button:hover { color: var(--ink); text-decoration: none; }
.seg .on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.chips { display: flex; gap: .375rem; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .4rem .25rem .7rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-hover); font-size: .8125rem; font-weight: 600;
}
.chip a { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: inherit; }
.chip a:hover { background: rgba(0, 0, 0, .07); text-decoration: none; }

/* Period control */
.period { display: flex; align-items: center; gap: .25rem; }
.period-label {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 38px; padding: 0 .875rem;
    border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface);
    font: inherit; font-weight: 650; font-size: .875rem; color: var(--ink); cursor: pointer;
}
.period-label:hover { border-color: var(--muted); }
.period-label svg { color: var(--accent); }

/* ---------- Surfaces ---------- */

.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; }
.box.flush { padding: 0; overflow: hidden; }
.box-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.box-head h2 { margin-right: auto; }
.box.flush .box-head { padding: 1.25rem 1.25rem 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.grid-3-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; }

/* Headline figures: spending is the hero */
.figures { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 1rem; }
.figure {
    display: grid; gap: .25rem; align-content: start;
    padding: 1.125rem 1.25rem; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
    color: inherit; text-align: left; font: inherit; cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
a.figure:hover, button.figure:hover { border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; }
.figure .label { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.figure .value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure .delta { font-size: .8125rem; color: var(--ink-2); }
.figure.hero { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.figure.hero .label, .figure.hero .delta { color: rgba(255, 255, 255, .82); }
.figure.hero .value { font-size: 2.25rem; }
.figure.attention { background: var(--honey-soft); border-color: #ecd9ae; }
.up { color: var(--expense); font-weight: 650; }
.down { color: var(--income); font-weight: 650; }
.figure.hero .up, .figure.hero .down { color: #fff; }

.amount { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.amount.neg { color: var(--ink); }
.amount.pos { color: var(--income); }

/* Category badge */
.cat {
    display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
    padding: .15rem .55rem .15rem .45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--c, var(--muted)) 13%, var(--surface));
    color: color-mix(in srgb, var(--c, var(--muted)) 70%, var(--ink));
    font-size: .78rem; font-weight: 650; border: 0; font-family: inherit; cursor: pointer;
}
.cat .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; }
.cat.none { --c: var(--honey); background: var(--honey-soft); color: var(--honey); }
.cat:hover { filter: brightness(.97); }

.source { font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 5px; color: #fff; }
.source.revolut { background: #2b2f36; }
.source.caixabank { background: #0a79a8; }

.pill { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: var(--sunk); color: var(--ink-2); }
.pill.work { background: #e3e9f3; color: #3d5a80; }
.pill.internal { background: var(--sunk); color: var(--muted); }

/* ---------- Transaction list ---------- */

.tx-list { display: grid; }
.tx-day { padding: .75rem 1.25rem .35rem; font-size: .78rem; font-weight: 700; color: var(--muted);
          display: flex; justify-content: space-between; }
.tx {
    display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto auto; gap: .875rem; align-items: center;
    padding: .625rem 1.25rem; border-top: 1px solid var(--line);
    cursor: pointer; transition: background .1s;
}
.tx-day + .tx { border-top: 0; }
.tx.compact { grid-template-columns: 40px minmax(0, 1fr) auto; }
.tx:hover { background: var(--surface-2); }
.tx.focused { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tx.selected { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.tx .select { display: grid; place-items: center; }
.tx-icon {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem;
    background: color-mix(in srgb, var(--c, var(--muted)) 14%, var(--surface));
}
.tx-main { min-width: 0; display: grid; gap: .1rem; }
.tx-desc { font-weight: 600; }
.tx-meta { display: flex; gap: .4rem; align-items: center; font-size: .78rem; color: var(--muted); min-width: 0; flex-wrap: wrap; }
.tx .amount { text-align: right; min-width: 90px; }
.tx .more { opacity: 0; }
.tx:hover .more, .tx.focused .more { opacity: 1; }
.tx.internal .tx-desc, .tx.internal .amount { color: var(--muted); }

.list-foot { padding: 1rem; display: flex; justify-content: center; border-top: 1px solid var(--line); }

/* Bulk bar */
.bulkbar {
    position: fixed; z-index: 40; left: 50%; bottom: 1.25rem; transform: translate(-50%, 140%);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center;
    padding: .5rem .5rem .5rem 1rem; border-radius: 16px;
    background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
    transition: transform .2s ease; max-width: calc(100vw - 1.5rem);
}
.bulkbar.show { transform: translate(-50%, 0); }
.bulkbar select { min-height: 34px; width: auto; max-width: 220px; background: #3a423b; color: #fff; border-color: #4c564d; font-size: .8125rem; }
.bulkbar .btn { min-height: 34px; background: #3a423b; border-color: #4c564d; color: #fff; }
.bulkbar .btn:hover { background: #4b554c; }

/* Toolbar above lists */
.toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.toolbar .search { position: relative; flex: 1 1 260px; }
.toolbar .search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.toolbar .search input { padding-left: 2.25rem; }
.badge-count { background: var(--accent); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .4rem; }

.sum-strip { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; padding: .25rem .25rem 0; }
.sum-strip .big { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- Ranked bars (categories, merchants) ---------- */

.rank { display: grid; }
.rank-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: center;
    padding: .625rem .5rem; border-radius: 12px; cursor: pointer; color: inherit;
}
.rank-row:hover { background: var(--surface-2); text-decoration: none; }
.rank-name { display: flex; align-items: center; gap: .5rem; font-weight: 600; min-width: 0; }
.rank-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.rank-sub { font-size: .78rem; color: var(--muted); font-weight: 500; }
.bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--accent)); }
.bar.budget span.over { background: var(--expense); }

.chart { position: relative; height: 260px; min-width: 0; overflow: hidden; }
.chart canvas { max-width: 100%; }
.chart.tall { height: 340px; }
.chart.short { height: 180px; }

.empty { padding: 2.5rem 1rem; text-align: center; color: var(--ink-2); display: grid; gap: .75rem; justify-items: center; }

/* Tables (settings) */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th { text-align: left; font-size: .75rem; color: var(--muted); font-weight: 700; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: var(--surface-2); }
.table .r { text-align: right; }
.table .num { white-space: nowrap; }

/* Tabs */
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .6rem .9rem; color: var(--ink-2); font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }

/* Category tree */
.tree { display: grid; gap: .75rem; }
.tree-group { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.tree-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .6rem .875rem; cursor: pointer; }
.tree-item:hover { background: var(--surface-2); }
.tree-item.parent { font-weight: 650; }
.tree-item.child { padding-left: 2rem; border-top: 1px solid var(--line); font-size: .9rem; }

/* ---------- Modal / bottom sheet ---------- */

dialog.modal {
    width: min(620px, calc(100vw - 2rem)); max-height: min(88vh, 900px);
    padding: 0; border: 0; border-radius: 22px;
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
    overflow: hidden;
}
dialog.modal.wide { width: min(860px, calc(100vw - 2rem)); }
dialog.modal::backdrop { background: rgba(38, 48, 36, .38); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modal-in .18s ease-out; display: flex; flex-direction: column; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modal-body { overflow-y: auto; overscroll-behavior: contain; }
.modal-loading { padding: 3rem; display: grid; place-items: center; }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sheet-handle { display: none; }

.panel { display: grid; gap: 1.25rem; padding: 1.5rem; }
.panel-head { display: flex; align-items: flex-start; gap: .75rem; padding: 1.25rem 1.5rem 0; }
.panel-head .titles { margin-right: auto; min-width: 0; display: grid; gap: .25rem; }
.panel-head h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.panel-nav { display: flex; gap: .25rem; }
.panel-section { display: grid; gap: .625rem; }
.panel-section > h3 { font-size: .8125rem; color: var(--ink-2); font-weight: 700; }
.panel-error { padding: 2rem; text-align: center; color: var(--expense); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.stat { padding: .75rem .875rem; border-radius: 14px; background: var(--surface-2); display: grid; gap: .1rem; }
.stat .k { font-size: .75rem; color: var(--ink-2); font-weight: 600; }
.stat .v { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.actions-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.mini-list .tx { padding: .5rem .25rem; grid-template-columns: 36px minmax(0, 1fr) auto; }
.mini-list .tx-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; }

/* The ticket: a transaction shown as a till receipt */
.ticket {
    position: relative; margin: 0 auto; width: 100%; max-width: 380px;
    padding: 1.5rem 1.375rem 1.75rem; background: var(--paper);
    font-family: var(--mono); font-size: .8125rem; color: #3b3a35;
    box-shadow: 0 1px 0 #ece9df, var(--shadow);
    --zig: radial-gradient(circle at 8px 0, transparent 7px, var(--paper) 7.5px);
}
.ticket::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
    background: var(--zig); background-size: 16px 10px; background-repeat: repeat-x;
}
.ticket-shop { text-align: center; font-weight: 600; font-size: .9375rem; letter-spacing: .02em; overflow-wrap: anywhere; }
.ticket-sub { text-align: center; color: #85827a; margin-top: .25rem; }
.ticket hr { border: 0; border-top: 1.5px dashed #cfcabd; margin: .875rem 0; }
.ticket-line { display: flex; justify-content: space-between; gap: 1rem; }
.ticket-line span:first-child { color: #85827a; }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.375rem; font-weight: 600; }
.ticket-total.pos { color: var(--income); }

.tx-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; align-items: start; }
.tx-panel .side { display: grid; gap: 1.125rem; }

.toggle-row { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border: 1px solid var(--line); border-radius: 12px; }
.toggle-row .t { margin-right: auto; display: grid; }
.toggle-row .t small { color: var(--muted); }

/* ---------- Command palette ---------- */

dialog.palette {
    width: min(640px, calc(100vw - 1.5rem)); margin-top: 12vh; padding: 0; border: 0;
    border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); color: var(--ink);
}
dialog.palette::backdrop { background: rgba(38, 48, 36, .3); backdrop-filter: blur(2px); }
.palette-input { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--line); }
.palette-input svg { color: var(--muted); }
.palette-input input { border: 0; box-shadow: none; padding: 0; min-height: 32px; font-size: 1.0625rem; background: transparent; }
.palette-input input:focus { box-shadow: none; }
.palette-results { max-height: 56vh; overflow-y: auto; padding: .375rem; }
.palette-group { padding: .5rem .75rem .25rem; font-size: .75rem; font-weight: 700; color: var(--muted); }
.palette-item {
    display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .75rem;
    border: 0; border-radius: 11px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.palette-item .grow { flex: 1; min-width: 0; }
.palette-item .hint { color: var(--muted); font-size: .8125rem; }
.palette-item.active, .palette-item:hover { background: var(--accent-soft); text-decoration: none; }
.palette-foot { display: flex; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--muted); }

/* ---------- Context menu ---------- */

.menu {
    position: fixed; z-index: 90; min-width: 230px; padding: .375rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
    animation: modal-in .12s ease-out;
}
.menu button, .menu a {
    display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .625rem;
    border: 0; background: none; border-radius: 9px; font: inherit; font-size: .875rem; color: var(--ink); cursor: pointer; text-align: left;
}
.menu button:hover, .menu a:hover { background: var(--surface-2); text-decoration: none; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: .3rem 0; }

/* ---------- Toasts & background jobs ---------- */

.toasts { position: fixed; z-index: 100; right: 1.25rem; bottom: 1.25rem; display: grid; gap: .5rem; justify-items: end; pointer-events: none; }
.toast {
    pointer-events: auto; display: flex; align-items: center; gap: .625rem; max-width: 420px;
    padding: .7rem 1rem; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
    font-size: .875rem; animation: toast-in .2s ease-out;
}
.toast.error { background: var(--expense); }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: all .2s; }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: #9fd3ae; flex: none; }
.toast.error .dot { background: #fff; }
.toast.info .dot { background: var(--honey-soft); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.job {
    pointer-events: auto; width: 320px; padding: .875rem 1rem; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: .5rem;
}
.job-title { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .875rem; }
.job-text { font-size: .8125rem; color: var(--ink-2); }
.progress { height: 5px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.progress span { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--accent); animation: slide 1.2s ease-in-out infinite; }
.progress.done span { width: 100%; animation: none; background: var(--income); }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- Import ---------- */

.dropzone {
    display: grid; justify-items: center; gap: .375rem; padding: 2rem 1rem; text-align: center;
    border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2);
    color: var(--ink-2); cursor: pointer; transition: all .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.dropzone svg { width: 28px; height: 28px; color: var(--accent); }
.import-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.import-item {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .75rem; align-items: center;
    padding: .625rem .75rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
    animation: modal-in .2s ease-out;
}
.import-item .name { font-weight: 600; font-size: .875rem; overflow-wrap: anywhere; }
.import-item .detail { font-size: .78rem; color: var(--ink-2); margin-top: .125rem; }
.import-item.invalid { border-color: var(--expense); }
.import-item.invalid .detail { color: var(--expense); }
.check-anim path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .35s .1s ease-out forwards; }
.bank-badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff;
              animation: pop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.bank-revolut { background: #2b2f36; }
.bank-caixabank { background: #0a79a8; }
.status-pill { font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.status-pill.importing { background: var(--honey-soft); color: var(--honey); }
.status-pill.done { background: var(--income-soft); color: var(--income); }
.status-pill.error { background: var(--expense-soft); color: var(--expense); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

.drop-overlay {
    position: fixed; inset: 0; z-index: 120; display: none; place-items: center;
    background: rgba(74, 117, 89, .16); backdrop-filter: blur(4px);
}
.drop-overlay.show { display: grid; }
.drop-overlay div { padding: 2rem 2.5rem; border-radius: 24px; background: var(--surface); border: 2px dashed var(--accent);
                    font-weight: 700; font-size: 1.125rem; box-shadow: var(--shadow-lg); }

.coverage { display: grid; gap: .5rem; }
.coverage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding: .75rem .875rem; border-radius: 14px; background: var(--surface-2); }
.coverage-row .state { font-weight: 700; font-size: .8125rem; }
.coverage-row .state.ok { color: var(--income); }
.coverage-row .state.gap { color: var(--honey); }

/* ---------- Login ---------- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(380px, 100%); display: grid; gap: 1.25rem; padding: 2rem; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.alert { padding: .7rem .9rem; border-radius: 12px; background: var(--expense-soft); color: var(--expense); font-size: .875rem; font-weight: 600; }

/* ---------- Mobile: Xiaomi 12 Pro and similar (≤ 760px) ---------- */

@media (max-width: 1100px) {
    .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .figure.hero { grid-column: 1 / -1; }
    .grid-3-1 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { display: none; }
    .main { padding-bottom: calc(var(--tabbar) + var(--safe-bottom) + .5rem); }

    .topbar { padding: .75rem 1rem .625rem; gap: .5rem; }
    .topbar h1 { font-size: 1.375rem; }
    .topbar .desktop-only { display: none; }
    .topbar .period { order: 3; width: 100%; }
    .topbar .period-label { flex: 1; justify-content: center; min-height: 44px; }
    .topbar .period .btn.icon { width: 44px; min-height: 44px; }

    .page { padding: .25rem 1rem 1.5rem; gap: 1rem; }
    .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .box { padding: 1rem; border-radius: 18px; }
    .box.flush .box-head { padding: 1rem 1rem 0; }

    .figures { gap: .625rem; }
    .figure { padding: .875rem 1rem; border-radius: 18px; }
    .figure .value { font-size: 1.25rem; }
    .figure.hero .value { font-size: 2rem; }

    .btn { min-height: 44px; }
    .btn.sm { min-height: 36px; }
    .btn.icon { width: 44px; }
    input[type=text], input[type=search], input[type=number], input[type=date], input[type=password], select { min-height: 46px; font-size: 16px; }

    .tx { grid-template-columns: 40px minmax(0, 1fr) auto; gap: .75rem; padding: .7rem 1rem; }
    .tx-list.selecting .tx.compact { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .tx .select, .tx .more { display: none; }
    .tx.selecting .select { display: grid; }
    .tx-list.selecting .tx { grid-template-columns: auto 40px minmax(0, 1fr) auto; }
    .tx-list.selecting .tx .select { display: grid; }
    .tx .amount { min-width: 0; }
    .tx-day { padding: .75rem 1rem .25rem; }
    .toolbar .search { flex-basis: 0; }
    .sum-strip { gap: 1.25rem; }
    .sum-strip .big { font-size: 1.25rem; }

    .chart { height: 220px; }
    .chart.tall { height: 280px; }

    .tabbar {
        position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
        height: calc(var(--tabbar) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
        background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px);
        border-top: 1px solid var(--line);
    }
    .tabbar a, .tabbar button {
        position: relative; display: grid; justify-items: center; gap: 2px; padding: .4rem 0;
        border: 0; background: none; font: inherit; font-size: .6875rem; font-weight: 650; color: var(--muted);
    }
    .tabbar a.active { color: var(--accent); }
    .tabbar a:hover { text-decoration: none; }
    .tabbar svg.i { width: 22px; height: 22px; }
    .tabbar .fab {
        width: 50px; height: 50px; margin: -18px auto 0; border-radius: 17px; display: grid; place-items: center;
        background: var(--accent); color: #fff; box-shadow: 0 8px 20px -6px rgba(74, 117, 89, .7);
    }
    .tabbar .count { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; padding: 0 4px; border-radius: 999px;
                     background: var(--honey); color: #fff; font-size: .625rem; line-height: 16px; }

    /* Modals become bottom sheets */
    dialog.modal, dialog.modal.wide {
        width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 24px 24px 0 0;
        padding-bottom: var(--safe-bottom);
    }
    dialog.modal[open] { animation: sheet-in .24s cubic-bezier(.2, .9, .3, 1); }
    @keyframes sheet-in { from { transform: translateY(100%); } }
    .sheet-handle { display: block; width: 40px; height: 5px; border-radius: 999px; background: var(--line-strong); margin: .5rem auto 0; flex: none; }
    .panel { padding: 1rem 1rem 1.5rem; gap: 1rem; }
    .panel-head { padding: .75rem 1rem 0; }
    .tx-panel { grid-template-columns: 1fr; padding: 1rem; }
    .ticket { max-width: none; }

    dialog.palette { margin-top: .75rem; width: calc(100vw - 1rem); }
    .palette-results { max-height: 60vh; }
    .palette-foot { display: none; }

    .toasts { left: .75rem; right: .75rem; bottom: calc(var(--tabbar) + var(--safe-bottom) + .75rem); justify-items: stretch; }
    .toast, .job { max-width: none; width: auto; }
    .bulkbar { bottom: calc(var(--tabbar) + var(--safe-bottom) + .75rem); width: calc(100vw - 1rem); }
    .bulkbar select { flex: 1; max-width: none; }

    .table.stack thead { display: none; }
    .table.stack tr { display: grid; grid-template-columns: 1fr auto; padding: .5rem 0; border-bottom: 1px solid var(--line); }
    .table.stack td { border: 0; padding: .15rem .25rem; }
    .hide-mobile { display: none !important; }
}

@media (min-width: 761px) {
    .show-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}