/* Troškovnik — stilovi (mobile-first) */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --bg: #f2f5f9;
  --card: #ffffff;
  --card-2: #f7f9fc;
  --text: #0e1a2b;
  --muted: #66768a;
  --line: #e4e9f0;
  --accent: #0b7bd4;
  --accent-2: #19c3e6;
  --accent-soft: #c4e2f6;
  --accent-text: #ffffff;
  --navy: #0b2545;
  --good: #15944a;
  --bad: #d92d2d;
  --warn: #c97a06;
  --shadow: 0 1px 2px rgba(15, 30, 50, .04), 0 4px 16px rgba(15, 30, 50, .05);
  --radius: 18px;
  --radius-sm: 12px;
  --tabbar-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06101d; --card: #0d1a2c; --card-2: #112238; --text: #e7eef7; --muted: #8b9db3; --line: #1b2b42;
    --accent: #3cb4f2; --accent-2: #33d6f0; --accent-soft: #1b3b5e; --accent-text: #04121f;
    --good: #34c46f; --bad: #f05252; --warn: #f0a52a; --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #06101d; --card: #0d1a2c; --card-2: #112238; --text: #e7eef7; --muted: #8b9db3; --line: #1b2b42;
  --accent: #3cb4f2; --accent-2: #33d6f0; --accent-soft: #1b3b5e; --accent-text: #04121f;
  --good: #34c46f; --bad: #f05252; --warn: #f0a52a; --shadow: none; color-scheme: dark;
}

*, *::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.45; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 15px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
small { font-size: 12.5px; }
code { background: var(--card-2); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.mt { margin-top: 12px; }
.pad { padding: 14px 16px; }
.pad-x { padding: 0 4px; margin: 0 0 12px; }
.warn-text { color: var(--warn); }
.dim { opacity: .55; }

/* ---------- Okvir ---------- */
.page { max-width: 680px; margin: 0 auto; padding: 12px 14px 24px; }
body.has-nav .page { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px; max-width: 680px; margin: 0 auto;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 750; font-size: 17px; letter-spacing: -.02em; }
.brand img { border-radius: 8px; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0;
  background: transparent; color: var(--text); cursor: pointer; flex: none;
}
.icon-btn:active { background: var(--card-2); }
.icon-btn.danger { color: var(--bad); }
.icon-btn .dot {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg);
}
.avatar {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.avatar.big { width: 56px; height: 56px; font-size: 19px; }

/* Donja navigacija */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  max-width: 680px; margin: 0 auto; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) { .tabbar { bottom: 12px; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding-bottom: 0; height: var(--tabbar-h); } }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 550; padding: 6px 0; }
.tabbar a.on { color: var(--accent); }
.tabbar a.on .ic { stroke-width: 2.4; }
.tabbar .fab {
  justify-self: center; width: 54px; height: 54px; border-radius: 18px; margin-top: -22px; padding: 0; justify-content: center;
  background: linear-gradient(140deg, var(--accent-2), var(--accent)); color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 5px var(--bg);
}
.tabbar .fab .ic { width: 26px; height: 26px; stroke-width: 2.6; }

/* ---------- Kartice i redovi ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
a.card { display: block; color: inherit; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 6px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.card-head h2 .ic { width: 18px; height: 18px; color: var(--accent); }
.link { font-size: 13.5px; font-weight: 600; }
.section-title { margin: 20px 4px 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.row {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; color: inherit; min-height: 60px;
  border-top: 1px solid var(--line); background: none; width: 100%; text-align: left;
}
.card > .row:first-child, .card-head + .row, .card .row:first-child { border-top: 0; }
.card-head + .row { border-top: 0; }
a.row:active, summary.row:active { background: var(--card-2); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; }
.row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.row-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta .ic { width: 13px; height: 13px; }
.row-time { font-size: 12px; color: var(--muted); flex: none; }
.row > .ic { color: var(--muted); width: 18px; height: 18px; }
.mini { display: inline-flex; color: var(--muted); }
.mini .ic { width: 14px; height: 14px; }
.who { color: var(--accent); font-weight: 600; }
.amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.amt.pending { color: var(--warn); }
.amt.muted { font-weight: 500; color: var(--muted); font-size: 13.5px; }
.amt-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cat-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; flex: none; font-size: 19px;
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 22%, transparent);
}
.menu-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--card-2); color: var(--accent); flex: none; }
.ok-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); vertical-align: -3px; }
.ok-dot .ic { width: 12px; height: 12px; stroke-width: 3; }
.bar { display: block; height: 5px; border-radius: 3px; background: var(--card-2); overflow: hidden; margin-top: 5px; }
.bar i { display: block; height: 100%; border-radius: 3px; }

/* Delta */
.delta { display: inline-flex; align-items: center; gap: 1px; font-size: 11.5px; font-weight: 700; padding: 1px 6px 1px 4px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.delta .ic { width: 12px; height: 12px; stroke-width: 2.8; }
.delta.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, transparent); }
.delta.good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.delta.flat { color: var(--muted); background: var(--card-2); padding: 1px 6px; }

.pill { display: inline-block; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill-ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.pill-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.pill-muted { color: var(--muted); background: var(--card-2); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 20px 20px 18px; margin-bottom: 14px; color: #eaf6ff;
  background: radial-gradient(120% 140% at 100% 0%, #1f8fe0 0%, rgba(31, 143, 224, 0) 55%), linear-gradient(150deg, #0b2a50 0%, #0a1f3c 100%);
  box-shadow: 0 10px 30px rgba(8, 30, 60, .25);
}
.hero::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .35), rgba(34, 211, 238, 0) 70%);
}
.hero-label { font-size: 13px; opacity: .75; font-weight: 550; }
.hero-amount { font-size: 34px; font-weight: 750; letter-spacing: -.03em; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; opacity: .9; position: relative; z-index: 1; }
.hero .delta.bad { color: #ffb4b4; background: rgba(255, 90, 90, .18); }
.hero .delta.good { color: #9ff0bf; background: rgba(60, 220, 130, .16); }
.hero .delta.flat { color: #d7e7f7; background: rgba(255, 255, 255, .12); }
.hero-pending { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 600; }
.hero-pending .ic { width: 16px; height: 16px; color: #ffd27a; }

/* Mesec */
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 12px; }
.month-pick { flex: 1; display: flex; justify-content: center; }
.month-pick label { position: relative; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 17px; padding: 6px 10px; border-radius: 12px; cursor: pointer; }
.month-pick label .ic { width: 16px; height: 16px; color: var(--muted); }
.month-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* Segmentirani prekidač */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--card); border-radius: 14px; margin-bottom: 14px; border: 1px solid var(--line); }
.seg button, .seg label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 6px; border-radius: 10px; cursor: pointer; position: relative; }
.seg .ic { width: 16px; height: 16px; }
.seg button.on, .seg label:has(input:checked) { background: var(--accent); color: var(--accent-text); }
.seg-static { margin-bottom: 0; }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg label span { display: inline-flex; align-items: center; gap: 6px; }

/* Zbirni red */
.sumbar { display: flex; gap: 10px; margin-bottom: 14px; }
.sumbar > div { flex: 1; background: var(--card); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); min-width: 0; }
.sumbar small { display: block; color: var(--muted); font-weight: 550; }
.sumbar strong { display: block; font-size: 14.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }

/* Filteri */
.filters { display: flex; gap: 8px; margin-bottom: 12px; }
.filters select { flex: 0 0 44%; }
.search { flex: 1; position: relative; display: flex; align-items: center; }
.search .ic { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--muted); }
.search input { padding-left: 36px; }

.day { margin-bottom: 10px; }
.day-head { display: flex; justify-content: space-between; padding: 10px 16px 2px; font-size: 12.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.day-head + .row { border-top: 0; }

/* Računi */
.bill .pay-form { display: flex; gap: 6px; align-items: center; }
.pay-amount { width: 96px !important; padding: 8px 10px !important; text-align: right; font-weight: 650; }
.bill.paid .row-title { color: var(--muted); }
.bill.upcoming { opacity: .7; }
.shake { animation: shake .35s; border-color: var(--bad) !important; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Donut */
.donut-wrap { position: relative; height: 220px; margin: 6px 16px 10px; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center small { color: var(--muted); }
.donut-center strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.chart-box { position: relative; height: 220px; padding: 4px 12px 14px; }

/* KPI */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin: 10px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kpis > div { background: var(--card); padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.kpis small { color: var(--muted); }
.kpis strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.kpis strong.small { font-size: 13.5px; }
.insight { margin: 12px 16px 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; }
.insight.bad { background: color-mix(in srgb, var(--bad) 9%, transparent); }
.insight.good { background: color-mix(in srgb, var(--good) 10%, transparent); }
.cmp-form { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 0 16px; }
.cmp-form input { width: auto; padding: 7px 10px; }
.total-row { background: var(--card-2); }

/* ---------- Forme ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 12px; outline: none; transition: border-color .15s, box-shadow .15s; min-height: 46px;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
input[type=color] { padding: 4px; height: 46px; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366768a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 34px; }

.amount-field { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 18px 12px 8px; }
.amount-field input { border: 0; background: none; box-shadow: none !important; font-size: 44px; font-weight: 750; text-align: center; flex: 1; min-width: 0; max-width: 75%; padding: 0; letter-spacing: -.03em; font-variant-numeric: tabular-nums; min-height: 0; }
.amount-field span { font-size: 18px; font-weight: 650; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; font-weight: 550; transition: all .12s; }
.chip > span i { font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); font-size: 15px; }
.chip input:checked + span { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--card)); box-shadow: 0 0 0 1px var(--c, var(--accent)); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); }
.chip-add > span { border-style: dashed; color: var(--muted); }
.chips-view { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; }
.chip.static { cursor: default; }

.toggles { padding: 4px 0; }
.card.toggles { padding: 4px 16px; }
.switch { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; }
.switch + .switch, .toggles > div .switch { border-top: 1px solid var(--line); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line); transition: background .18s; order: 2; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s; }
.switch input:checked + .sw { background: var(--accent); }
.switch input:checked + .sw::after { transform: translateX(18px); }
.switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch > span:last-child { flex: 1; display: flex; flex-direction: column; }
.switch small { color: var(--muted); }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
.checklist + .checklist { margin-top: 8px; }
@media (max-width: 380px) { .checklist { grid-template-columns: 1fr; } }

.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-grid label { position: relative; cursor: pointer; }
.type-grid input { position: absolute; opacity: 0; }
.type-grid span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; text-align: center; }
.type-grid b { font-size: 22px; font-weight: 400; }
.type-grid input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: 0 0 0 1px var(--accent); color: var(--accent); }

.cat-form { display: flex; gap: 10px; align-items: flex-end; }
.cat-form .grow { flex: 1; }
.emoji-field { width: 64px; }
.emoji-field input { text-align: center; font-size: 20px; padding: 8px 4px; }
.color-field { width: 58px; }
.add-box summary { cursor: pointer; font-weight: 650; color: var(--accent); display: flex; align-items: center; gap: 6px; list-style: none; }
.add-box summary::-webkit-details-marker, .cat-item summary::-webkit-details-marker { display: none; }
.cat-item summary { list-style: none; cursor: pointer; }
.cat-item + .cat-item summary { border-top: 1px solid var(--line); }
.cat-item[open] summary { background: var(--card-2); }

.link-form { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.link-ic { color: var(--accent); }

/* ---------- Dugmad ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-weight: 650; font-size: 15px;
  padding: 11px 16px; min-height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer;
  transition: transform .08s, filter .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(140deg, var(--accent-2) -30%, var(--accent) 70%); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .btn-primary { color: var(--accent-text); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; min-height: 36px; font-size: 13.5px; border-radius: 11px; }
.btn-sm .ic { width: 16px; height: 16px; }
.btn-ghost { background: none; border-color: transparent; color: var(--muted); }
.btn-ghost-danger { background: none; border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
.actions { display: flex; flex-direction: column; gap: 8px; }
.danger-zone { margin-top: 18px; }

/* ---------- Naslovi stranica ---------- */
.page-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; min-height: 42px; }
.page-head h1 { flex: 1; font-size: 20px; }
.page-head .icon-btn:first-child { margin-left: -8px; }

/* ---------- Poruke ---------- */
.alert { padding: 11px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 12px; }
.alert-error { background: color-mix(in srgb, var(--bad) 11%, var(--card)); color: var(--bad); }
.alert-ok { background: color-mix(in srgb, var(--good) 12%, var(--card)); color: var(--good); }
.alert-warn { background: color-mix(in srgb, var(--warn) 13%, var(--card)); color: var(--warn); }
.toast {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50; max-width: calc(100% - 28px); width: max-content;
  padding: 11px 16px; border-radius: 14px; background: var(--navy); color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2); transition: opacity .3s, transform .3s; animation: drop .25s ease-out;
}
.toast-error { background: var(--bad); }
.toast.hide { opacity: 0; transform: translate(-50%, -10px); pointer-events: none; }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -12px); } }

.empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--card); color: var(--accent); box-shadow: var(--shadow); }
.empty-ic .ic { width: 28px; height: 28px; }
.empty p { max-width: 340px; margin: 0; }

/* ---------- Prijava ---------- */
body.bare { background: radial-gradient(100% 60% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg); min-height: 100vh; }
.auth { max-width: 400px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 4px 30px; text-align: center; }
.auth-logo { border-radius: 24px; box-shadow: 0 12px 30px rgba(10, 60, 120, .3); }
.auth h1 { margin-top: 14px; font-size: 26px; }
.auth > p { margin: 4px 0 20px; }
.auth .card { text-align: left; }
.auth-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks .ok { color: var(--good); } .checks .bad { color: var(--bad); }
.checks .ic { width: 16px; height: 16px; }
pre.code { margin: 0; padding: 10px 12px; background: var(--card-2); border-radius: 10px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

/* ---------- Meni / profil ---------- */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 8px 4px 18px; }
.profile-head > div { display: flex; flex-direction: column; gap: 2px; }
.profile-head strong { font-size: 18px; }
.profile-head .ic { width: 14px; height: 14px; }
.menu .row { min-height: 58px; }
.notif.unread .row-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.notif.read { opacity: .7; }
.notif .row-meta { white-space: normal; }

/* ---------- Vozila ---------- */
.vehicle-card { padding: 14px 16px; }
.vc-head { display: flex; align-items: center; gap: 12px; }
.vc-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(140deg, #0b2a50, #1f6fb8); color: #bfeaff; flex: none; }
.vc-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vc-title strong { font-size: 16px; }
.vc-title small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; border: 1.5px solid var(--text); background: var(--card); letter-spacing: .04em; white-space: nowrap; }
.plate.big { font-size: 14px; }
.vc-km { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; font-weight: 650; font-size: 14px; }
.vc-km .ic { width: 17px; height: 17px; color: var(--accent); }
.vc-km .muted { font-weight: 500; font-size: 13px; }
.vc-status { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vc-status > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.vc-status small { color: var(--muted); font-weight: 550; }

.vehicle-hero { padding: 16px; }
.vh-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vh-row > div { display: flex; flex-direction: column; }
.vh-km { font-size: 32px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vh-km span { font-size: 16px; color: var(--muted); font-weight: 600; }
.km-form { display: flex; gap: 8px; margin-top: 14px; }
.km-form input { flex: 1; }
.km-form .btn { flex: none; }

.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 400px) { .status-grid { grid-template-columns: 1fr; } }
.status-grid .card { margin-bottom: 0; }
.status-card { padding: 14px; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--line); }
.status-card.s-ok { border-top-color: var(--good); }
.status-card.s-soon { border-top-color: var(--warn); }
.status-card.s-due { border-top-color: var(--bad); }
.sc-head { display: flex; align-items: center; gap: 8px; }
.sc-head span { font-size: 20px; }
.status-card p { margin: 0; }
.status-card .btn { align-self: flex-start; }
.progress { height: 7px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 4px; background: var(--good); }
.s-soon .progress i { background: var(--warn); }
.s-due .progress i { background: var(--bad); }
.sc-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.sc-dl dt { color: var(--muted); }
.sc-dl dd { margin: 0; font-weight: 600; text-align: right; }

.type-filter { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 10px; scrollbar-width: none; }
.type-filter::-webkit-scrollbar { display: none; }
.type-filter a { flex: none; padding: 6px 11px; border-radius: 999px; background: var(--card-2); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.type-filter a.on { background: var(--accent); color: var(--accent-text); }
:root:not([data-theme="dark"]) .type-filter a.on { color: #fff; }

.timeline { list-style: none; margin: 0; padding: 4px 16px 0; position: relative; }
.timeline li { position: relative; padding-left: 50px; }
.timeline li::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline li:first-child::before { top: 20px; }
.timeline li:last-child::before { bottom: calc(100% - 20px); }
.timeline a { display: block; color: inherit; padding: 10px 0; }
.tl-dot { position: absolute; left: 0; top: 8px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: var(--card-2); border: 2px solid var(--card); z-index: 1; }
.t-small { background: #fef3c7; } .t-big { background: #e0e7ff; } .t-tires { background: #e2e8f0; } .t-registration { background: #dcfce7; } .t-repair { background: #fee2e2; }
:root[data-theme="dark"] .tl-dot { filter: saturate(.6) brightness(.5); }
.tl-head { display: flex; justify-content: space-between; gap: 8px; }
.tl-body p { margin: 4px 0 0; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tags span { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--card-2); color: var(--muted); font-weight: 550; }

@media (min-width: 700px) {
  .page { padding-top: 18px; }
  .hero-amount { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===================== v2 ===================== */
.good-text { color: var(--good); }
.bad-text { color: var(--bad); }
.grid3 { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 10px; }
body.no-scroll { overflow: hidden; }

/* Brzi unos — sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(4, 12, 24, .45); opacity: 0; transition: opacity .2s; }
.sheet-backdrop.open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 680px; margin: 0 auto; background: var(--card);
  border-radius: 24px 24px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .22s ease-out;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
}
.sheet.open { transform: none; }
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 14px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px; border-radius: 16px; background: var(--card-2); color: var(--text); font-size: 13px; font-weight: 600; text-align: center; }
.quick-grid a:active { transform: scale(.97); }
.q-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff; }
.q-ic .ic { width: 22px; height: 22px; }
.q-blue { background: linear-gradient(140deg, #19c3e6, #0b7bd4); } .q-cyan { background: linear-gradient(140deg, #22d3ee, #0891b2); }
.q-indigo { background: linear-gradient(140deg, #818cf8, #4f46e5); } .q-green { background: linear-gradient(140deg, #4ade80, #16a34a); }
.q-amber { background: linear-gradient(140deg, #fbbf24, #d97706); } .q-slate { background: linear-gradient(140deg, #94a3b8, #475569); }

/* SMS */
.sms-quick { padding: 6px 8px 6px 12px; }
.sms-quick-row { display: flex; align-items: flex-start; gap: 8px; }
.sms-quick-ic { color: var(--accent); padding-top: 12px; }
.sms-quick textarea { border: 0; box-shadow: none !important; background: none; padding: 11px 0; min-height: 44px; resize: none; font-size: 15px; }
.sms-quick .sms-go { margin: 4px 0 6px; }
.sms-preview:empty { display: none; }
.sms-preview { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
.sms-chip { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--card)); font-size: 13.5px; }
.sms-chip b { grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; }
.sms-chip span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-chip small { color: var(--muted); }
.sms-item { overflow: visible; }
.sms-item.dup { opacity: .75; }
.sms-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--line); }
.sms-head input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.sms-body { padding: 12px 16px 16px; }
.dup-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 16px; font-size: 13px; color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.dup-note .ic { width: 16px; height: 16px; }
.fx-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.rule-badge { font-style: normal; display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 11px; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); padding: 1px 7px; border-radius: 6px; }
.rule-badge .ic { width: 11px; height: 11px; stroke-width: 3; }

/* Skeniranje */
.capture-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.cap-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; text-align: center; cursor: pointer; line-height: 1.2; }
.cap-btn small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.cap-btn .ic { width: 24px; height: 24px; color: var(--accent); }
.cap-btn:active { transform: scale(.97); }
.scan-status { padding: 10px 14px; border-radius: 12px; font-size: 14px; margin: 8px 0; background: var(--card); border: 1px solid var(--line); }
.scan-status.ok { background: color-mix(in srgb, var(--good) 10%, var(--card)); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.scan-status.warn { background: color-mix(in srgb, var(--warn) 10%, var(--card)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.scanner { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: relative; width: min(70vw, 300px); aspect-ratio: 1; border-radius: 24px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); border: 3px solid rgba(255, 255, 255, .9); }
.scan-frame::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: #22d3ee; box-shadow: 0 0 12px #22d3ee; animation: scanline 1.8s ease-in-out infinite; }
@keyframes scanline { 0%, 100% { top: 12%; } 50% { top: 88%; } }
.scan-hint { position: absolute; top: calc(24px + env(safe-area-inset-top)); left: 16px; right: 16px; text-align: center; color: #fff; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.scan-close { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .92); color: #111; border: 0; }
.merchant-remember { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); font-size: 13.5px; }
.fx-box summary { cursor: pointer; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; list-style: none; font-size: 14px; }
.fx-box summary::-webkit-details-marker { display: none; }
.flash { animation: flashbg 1.2s; }
@keyframes flashbg { 0% { background: color-mix(in srgb, var(--good) 25%, transparent); } }

/* Novčani tok */
.cashflow .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 10px; }
.cf-grid a { display: flex; flex-direction: column; color: inherit; padding: 10px 12px; border-radius: 14px; background: var(--card-2); }
.cf-grid small, .cf-result small { color: var(--muted); font-weight: 550; font-size: 12px; }
.cf-grid strong { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cf-grid em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.cf-bar { display: flex; height: 10px; margin: 0 16px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--good) 30%, var(--card-2)); }
.cf-bar i { display: block; height: 100%; }
.cf-exp { background: var(--bad); opacity: .85; }
.cf-sav { background: var(--warn); }
.cf-result { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 12px 16px 12px; }
.cf-result > * { display: flex; flex-direction: column; color: inherit; min-width: 0; }
.cf-result strong { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cf-goals { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: none; }
.cf-goals::-webkit-scrollbar { display: none; }
.cf-goals a { flex: 0 0 auto; min-width: 150px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; color: inherit; background: color-mix(in srgb, var(--c) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); font-size: 13px; }
.cf-goals b { font-variant-numeric: tabular-nums; }
.goal-progress i { background: var(--c, var(--good)) !important; }

/* Štednja */
.hero-green { background: radial-gradient(120% 140% at 100% 0%, #16a34a 0%, rgba(22, 163, 74, 0) 55%), linear-gradient(150deg, #0b3a2c 0%, #0a2a22 100%); }
.goals { display: flex; flex-direction: column; }
.goal-card { padding: 14px 16px; }
.goal-head { display: flex; align-items: center; gap: 12px; }
.goal-head .cat-ic { --c: inherit; background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.goal-card .progress, .goal-hero .progress { margin-top: 12px; height: 8px; }
.goal-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.goal-hero .insight { margin: 12px 0 0; }
.quick-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line); background: var(--card-2); color: var(--text); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.amount-field.income input { color: var(--good); }

/* 2FA */
.sec-status { display: flex; align-items: center; gap: 12px; color: var(--text); }
.sec-status > .ic:first-child { width: 36px; height: 36px; padding: 7px; border-radius: 12px; background: var(--card-2); color: var(--muted); }
.sec-status.on > .ic:first-child { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.sec-status > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sec-status small { color: var(--muted); }
a.sec-link { display: block; color: inherit; }
.totp-qr { width: 220px; max-width: 100%; margin: 0 auto; background: #fff; padding: 6px; border-radius: 14px; }
.totp-qr svg { display: block; width: 100%; height: auto; }
.secret { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.secret code { font-size: 15px; letter-spacing: .06em; padding: 6px 10px; }
.otp-input { font-size: 26px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.codes { columns: 2; padding-left: 22px; margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 15px; line-height: 1.9; }
.codes-card { border: 2px dashed var(--warn); }
@media print { .topbar, .tabbar, .page-head, form, .card:not(.codes-card) { display: none !important; } }
.sms-item.off .sms-body, .sms-item.off .dup-note { display: none; }
.sms-item.off { opacity: .6; }
.amount-field input { flex: 0 1 auto; width: 3ch; min-width: 2ch; max-width: 80%; field-sizing: content; text-align: center; }

/* ===================== v3: događaji + IPS ===================== */
.quick-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-grid a { font-size: 12px; padding: 12px 2px; }
.q-violet { background: linear-gradient(140deg, #c084fc, #7c3aed); } .q-dark { background: linear-gradient(140deg, #334155, #0f172a); }
.hero-violet { background: radial-gradient(120% 140% at 100% 0%, #7c3aed 0%, rgba(124, 58, 237, 0) 55%), linear-gradient(150deg, #24154a 0%, #170f33 100%); }
.hero-violet .hero-amount { font-size: 28px; }
.muted-light { opacity: .7; font-weight: 500; }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs a { flex: 1 0 auto; text-align: center; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.tabs a.on { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .tabs a.on { color: var(--accent-text); }
.debt { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.card-head + .debt { border-top: 0; }
.debt.mine { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.debt-line { display: flex; align-items: center; gap: 6px; }
.debt-who { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34%; }
.debt-arrow { color: var(--muted); display: inline-flex; }
.debt-arrow .ic { width: 16px; height: 16px; }
.debt-line .amt { margin-left: auto; }
.debt .btn-row { justify-content: flex-end; }
.bal-bar { position: relative; display: block; height: 6px; margin-top: 6px; background: var(--card-2); border-radius: 3px; }
.bal-bar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.bal-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.bal-bar.pos i { left: 50%; background: var(--good); }
.bal-bar.neg i { right: 50%; background: var(--bad); }
.split-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-btn { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.payer-list { display: flex; flex-wrap: wrap; gap: 8px; }
.person { position: relative; cursor: pointer; }
.person input { position: absolute; opacity: 0; pointer-events: none; }
.person > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: 13.5px; }
.person .avatar { width: 28px; height: 28px; font-size: 11px; background: var(--card-2); color: var(--muted); }
.person input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: 0 0 0 1px var(--accent); }
.person input:checked + span .avatar { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.payer-amt { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 10px; font-weight: 600; }
.payer-amt input { text-align: right; }
.split-info { margin: 0; font-weight: 650; color: var(--accent); }
.import-card { border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.sms-inline { position: fixed; inset: 0; z-index: 70; background: rgba(4, 12, 24, .45); display: flex; align-items: flex-end; padding: 12px; }
.sms-inline .card { width: 100%; max-width: 640px; margin: 0 auto calc(env(safe-area-inset-bottom)); }
.public-head { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 17px; margin: 6px 0 14px; }
.public-head img { border-radius: 9px; }

.ips-overlay { position: fixed; inset: 0; z-index: 90; background: #fff; color: #0b1220; display: flex; align-items: center; justify-content: center; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.ips-sheet { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ips-head { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.ips-badge { background: #0b2545; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; }
.ips-qr { width: min(86vw, 380px); background: #fff; }
.ips-qr svg { display: block; width: 100%; height: auto; }
.ips-amount { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ips-meta { font-size: 14px; color: #475569; }
.ips-hint { font-size: 13px; color: #64748b; margin: 0; }
.ips-overlay .btn { background: #f1f5f9; color: #0b1220; border-color: #e2e8f0; }
.ips-inline { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ips-inline .ips-qr { width: min(78vw, 300px); padding: 8px; border-radius: 14px; }
.ips-inline .ips-meta { color: var(--muted); }

/* ===================== Desktop raspored (≥ 1024 px) ===================== */
.sidebar, .tb-title, .tb-new, .tb-settings, .dd-user { display: none; }
.sheet-title { font-weight: 700; font-size: 15px; margin: 0 4px 12px; }
.dash-grid { display: flex; flex-direction: column; }
.dash-main, .dash-side { display: contents; }
.cols-2 > div > .section-title.first { margin-top: 0; }

/* padajući meniji (obaveštenja, korisnik) */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; }
.dd > summary::-webkit-details-marker { display: none; }
.dd-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 250px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(8, 20, 40, .16);
  animation: ddin .14s ease-out;
}
@keyframes ddin { from { opacity: 0; transform: translateY(-4px); } }
.dd-panel > a, .dd-panel .dd-logout { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 550; width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; text-align: left; }
.dd-panel > a:hover, .dd-panel .dd-logout:hover { background: var(--card-2); }
.dd-panel .ic { width: 17px; height: 17px; color: var(--muted); }
.dd-logout { color: var(--bad) !important; }
.dd-logout .ic { color: var(--bad) !important; }
.dd-wide { width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.dd-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dd-head .link-btn { font-size: 12.5px; }
.dd-notif-item { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13px; }
.dd-notif-item:hover { background: var(--card-2); }
.dd-notif-item strong { font-size: 13.5px; }
.dd-notif-item span { color: var(--muted); }
.dd-notif-item small { color: var(--muted); font-size: 11.5px; }
.dd-notif-item.unread { box-shadow: inset 3px 0 0 var(--accent); }
.dd-foot { display: block; text-align: center; padding: 10px; font-weight: 600; font-size: 13.5px; }
.dd-theme { display: flex; align-items: center; gap: 4px; padding: 8px 10px; margin: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.dd-theme span { flex: 1; }
.dd-theme button { width: 32px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.dd-theme button .ic { width: 15px; height: 15px; }
.dd-theme button.on { background: var(--accent); color: #fff; border-color: transparent; }
@media (max-width: 1023px) {
  .dd-notif .dd-panel { position: fixed; left: 12px; right: 12px; top: calc(60px + env(safe-area-inset-top)); width: auto; }
}

@media (min-width: 1024px) {
  :root { --sb-w: 252px; }
  html.sb-mini { --sb-w: 76px; }
  body.shell { background: var(--bg); }
  body.has-nav .page { padding-bottom: 48px; }
  .tabbar, .tb-avatar-m, .topbar .brand { display: none !important; }

  /* levi meni */
  .sidebar {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: var(--sb-w); z-index: 35;
    padding: 18px 14px 14px; color: #c9d7ea; overflow-y: auto; overflow-x: hidden; transition: width .18s;
    background: radial-gradient(140% 60% at 0% 0%, rgba(31, 143, 224, .22), transparent 60%), linear-gradient(180deg, #0b1d36 0%, #081427 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
  }
  .sb-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 750; font-size: 18px; letter-spacing: -.02em; padding: 2px 6px 18px; white-space: nowrap; }
  .sb-brand img { border-radius: 10px; flex: none; box-shadow: 0 4px 14px rgba(25, 195, 230, .25); }
  .sb-new {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; margin-bottom: 18px; border: 0; border-radius: 13px; cursor: pointer;
    background: linear-gradient(140deg, #19c3e6, #0b7bd4); color: #fff; font: inherit; font-weight: 700; font-size: 14.5px; white-space: nowrap;
    box-shadow: 0 8px 20px rgba(11, 123, 212, .35);
  }
  .sb-new:hover { filter: brightness(1.07); }
  .sb-new kbd { margin-left: auto; font: 600 11px var(--font); background: rgba(255, 255, 255, .22); padding: 2px 6px; border-radius: 5px; }
  .sb-nav { display: flex; flex-direction: column; gap: 14px; flex: 1; }
  .sb-group { display: flex; flex-direction: column; gap: 2px; }
  .sb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #6f86a6; padding: 0 10px 6px; white-space: nowrap; }
  .sb-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; color: #c9d7ea; font-size: 14.5px; font-weight: 550; white-space: nowrap; }
  .sb-nav a .ic { width: 19px; height: 19px; color: #8aa3c4; }
  .sb-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .sb-nav a.on { background: rgba(60, 180, 242, .16); color: #fff; }
  .sb-nav a.on .ic { color: #4cc3f5; }
  .sb-nav a.on::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #4cc3f5; }
  .sb-badge { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; background: #ef4444; color: #fff; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
  .sb-collapse { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: #6f86a6; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
  .sb-collapse:hover { background: rgba(255, 255, 255, .06); color: #c9d7ea; }
  .sb-collapse .ic { width: 18px; height: 18px; transition: transform .18s; }
  html.sb-mini .sidebar { padding-left: 12px; padding-right: 12px; }
  html.sb-mini .sb-brand span, html.sb-mini .sb-new span, html.sb-mini .sb-new kbd, html.sb-mini .sb-label, html.sb-mini .sb-nav a span, html.sb-mini .sb-collapse span { display: none; }
  html.sb-mini .sb-new, html.sb-mini .sb-nav a, html.sb-mini .sb-collapse { justify-content: center; }
  html.sb-mini .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-mini .sb-collapse .ic { transform: rotate(180deg); }
  html.sb-mini .sb-badge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; font-size: 10px; }
  html.sb-mini .sb-nav a.on::before { left: -12px; }

  /* glavni deo */
  .main-col { margin-left: var(--sb-w); min-height: 100vh; transition: margin-left .18s; }
  .topbar {
    max-width: none; margin: 0; padding: 12px 32px; gap: 16px; border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 85%, transparent);
  }
  .tb-title { display: block; flex: 1; font-size: 19px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { gap: 8px; }
  .tb-new { display: inline-flex; margin-right: 6px; }
  .tb-settings { display: inline-grid; }
  .icon-btn:hover { background: var(--card-2); }
  .dd-user { display: block; }
  .tb-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 14px; margin-left: 4px; }
  .tb-user:hover, .dd-user[open] .tb-user { background: var(--card-2); }
  .tb-user .avatar { width: 36px; height: 36px; }
  .tb-user-txt { display: flex; flex-direction: column; line-height: 1.2; }
  .tb-user-txt strong { font-size: 14px; }
  .tb-user-txt small { color: var(--muted); font-size: 12px; }
  .tb-user > .ic { width: 16px; height: 16px; color: var(--muted); }

  .page { max-width: 920px; padding: 26px 32px 48px; }
  .page.wide { max-width: 1320px; }
  .page-head h1 { font-size: 24px; }
  .page-head .icon-btn:first-child { margin-left: -6px; }
  .toast { top: 76px; left: calc(50% + var(--sb-w) / 2); }

  /* interakcija mišem */
  a.row:hover, summary.row:hover, a.card:hover { background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
  a.card { transition: transform .12s, box-shadow .12s; }
  a.card:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(15, 30, 50, .08); }
  .btn:hover { filter: brightness(1.04); }
  .chip:hover > span, .person:hover > span, .cap-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

  /* pregled: dve kolone */
  .dash-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
  .dash-toolbar .month-nav { margin: 0; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
  .dash-toolbar .month-pick { flex: none; }
  .dash-toolbar .month-pick label { min-width: 170px; justify-content: center; }
  .dash-toolbar .seg { margin: 0 0 0 auto; width: 300px; }
  .dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .dash-main, .dash-side { display: flex; flex-direction: column; gap: 0; }
  .dash-item > .card, .dash-item > .hero, .dash-item > form.card { margin-bottom: 20px; }
  .hero { padding: 26px 28px 24px; }
  .hero-amount { font-size: 44px; }
  .donut-wrap { height: 250px; }
  .cf-grid strong { font-size: 22px; }

  /* opšte mreže */
  .cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .cols-2 > .card { margin-bottom: 0; }
  .cards-grid, .page.wide .goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; align-items: start; margin-bottom: 18px; }
  .cards-grid > .card, .page.wide .goals > .card { margin-bottom: 0; }
  .status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sumbar > div { padding: 14px 16px; }
  .sumbar strong { font-size: 20px; }
  .chart-box { height: 280px; }
  .page.wide .month-nav { max-width: 420px; }
  .capture-bar { gap: 12px; }

  /* brzi unos kao modal na sredini */
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(620px, 92vw); max-width: none; margin: 0; border-radius: 24px; padding: 20px 22px 22px;
    transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform .18s ease-out, opacity .18s; }
  .sheet.open { transform: translate(-50%, -50%); opacity: 1; }
  .sheet-grip { display: none; }
  .sheet-title { font-size: 18px; margin-bottom: 16px; }
  .quick-grid a { padding: 18px 6px; font-size: 13.5px; }
  .quick-grid a:hover { background: color-mix(in srgb, var(--accent) 8%, var(--card-2)); }
  .scanner .scan-frame { width: 340px; }
}
@media (min-width: 1440px) {
  .dash-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
  .month-nav { width: fit-content; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
  .month-nav .month-pick label { min-width: 170px; justify-content: center; }
  .seg:not(.seg-static) { width: 320px; }
  .page.wide .month-nav { max-width: none; }
  .tb-user:focus { outline: none; }
  .tb-user:focus-visible, .dd > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .page > .month-nav + .seg { margin-top: -2px; }
}

/* ===================== v4: valute, štednja ===================== */
.cur-btn { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 8px 0 10px; border-radius: 11px; font-weight: 750; font-size: 13px; letter-spacing: .03em; color: var(--text); border: 1px solid var(--line); background: var(--card); }
.cur-btn .ic { width: 14px; height: 14px; color: var(--muted); }
.cur-list { display: flex; flex-direction: column; padding: 4px; }
.cur-list button { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 6px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.cur-list button:hover { background: var(--card-2); }
.cur-list button.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cur-list button:disabled { opacity: .45; cursor: not-allowed; }
.cur-list small { color: var(--muted); font-size: 11.5px; }
.cur-note { margin: 0; padding: 8px 14px 12px; color: var(--muted); font-size: 11.5px; border-top: 1px solid var(--line); }
.dd-cur .dd-panel { min-width: 290px; padding: 0; }
@media (max-width: 1023px) { .dd-cur .dd-panel { position: fixed; left: 12px; right: 12px; top: calc(60px + env(safe-area-inset-top)); width: auto; } }
.orig { font-size: 11.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-cur { gap: 6px; align-items: center; }
.amount-cur select { width: auto; min-height: 0; border: 1px solid var(--line); border-radius: 12px; font-size: 18px; font-weight: 700; color: var(--muted); padding: 6px 30px 6px 10px; background-color: var(--card); }
.fx-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--card)); font-size: 13.5px; }
.fx-line input { width: 110px; min-height: 36px; padding: 6px 10px; font-weight: 650; }
.fx-line small { flex-basis: 100%; }
.mode-seg span { font-size: 13.5px; }
.chip-btn.on { background: var(--accent); color: #fff; border-color: transparent; }
.hist-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.hist-row span { display: flex; flex-direction: column; }
.hist-row small { color: var(--muted); font-size: 12px; }
.hist-row input { width: 140px; text-align: right; }
.cf-transfer { padding: 0 16px 12px; }
.cf-transfer > summary { list-style: none; display: inline-flex; }
.cf-transfer > summary::-webkit-details-marker { display: none; }
.cf-transfer[open] > summary { display: none; }
.cf-transfer-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 8%, var(--card-2)); }
.cf-transfer-form select { flex: 1 1 160px; width: auto; min-height: 40px; }
.cf-amt { display: flex; align-items: center; gap: 6px; flex: 0 1 170px; }
.cf-amt input { min-height: 40px; text-align: right; }
.cf-amt b { color: var(--muted); font-size: 13px; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
@media (max-width: 600px) { .hide-m { display: none; } }
.fx-eq { flex-basis: 100%; font-size: 15px; }

.rec-row { flex-wrap: wrap; }
.rec-months { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 52px; }
.rec-months .pill { display: inline-flex; align-items: center; gap: 4px; }
.rec-months .pill .ic { width: 13px; height: 13px; stroke-width: 3; }
.rec-months .btn-sm { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
.rec-pay { display: inline-flex; }