/* ═══════════════════════════════════════════════════════════════════════════
   Budżet Domowy — Material Design 3, nowa odsłona (etap 1: kolory, przyciski, ikony)
   Jeden akcent: szmaragd. Pomarańcz tylko dla wydatków i przekroczeń.
   Motyw jasny i ciemny; wybór: automatyczny / jasny / ciemny.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Kolory: schemat jasny ────────────────────────────────────────────── */
  --primary:              #0B7A66;
  --on-primary:           #FFFFFF;
  --primary-container:    #CDEFE6;
  --on-primary-container: #00382D;

  --secondary:            #4A635C;
  --on-secondary:         #FFFFFF;
  --secondary-container:  #D6EAE3;
  --on-secondary-container:#0B2B24;

  --tertiary:             #2E6285;
  --on-tertiary:          #FFFFFF;
  --tertiary-container:   #D6E8F5;
  --on-tertiary-container:#0B2638;

  --error:                #BA1A1A;
  --on-error:             #FFFFFF;
  --error-container:      #FFDAD6;
  --on-error-container:   #410002;

  --surface:              #F3F5F4;
  --on-surface:           #0F1513;
  --surface-variant:      #DDE5E2;
  --on-surface-variant:   #56625E;

  --surface-lowest:       #FFFFFF;
  --surface-low:          #FFFFFF;
  --surface-cont:         #EDF1EF;
  --surface-high:         #E7EEEB;
  --surface-highest:      #DDE5E2;

  --outline:              #6F7B77;
  --outline-variant:      #D3DCD8;

  --inverse-surface:      #26302D;
  --inverse-on-surface:   #ECF2F0;

  --scrim:                rgba(10, 14, 13, 0.45);

  /* Kolory znaczeniowe: pieniądze wchodzą / wychodzą */
  --income:               #06604F;
  --income-container:     #CDEFE6;
  --expense:              #B54708;
  --expense-soft:         #B54708;
  --warn:                 #8C6D00;
  --over-container:       #FCE6D4;
  --on-over-container:    #5A2200;

  /* Cienie — delikatne, tylko w motywie jasnym (FAB także w ciemnym) */
  --elev-1: 0 1px 2px rgba(15,21,19,.06), 0 1px 3px rgba(15,21,19,.08);
  --elev-2: 0 2px 8px rgba(15,21,19,.10);
  --elev-3: 0 6px 18px rgba(15,21,19,.20);

  /* Aliasy zgodności — używane w stylach inline w JS */
  --green:    var(--income);
  --red:      var(--expense);
  --red-soft: var(--expense);
  --teal:     var(--income);
  --orange:   var(--warn);
  --dim:      var(--on-surface-variant);
  --faint:    var(--outline);
  --bg:       var(--surface);
  --card:     var(--surface-low);
  --border:   var(--outline-variant);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Typografia */
  --font-body:    "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Sora", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Kształty */
  --r-xs: 4px;  --r-s: 8px;  --r-m: 12px;  --r-l: 16px;  --r-card: 20px;  --r-xl: 28px;  --r-full: 999px;

  color-scheme: light;
}

/* ── Schemat ciemny ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:              #5DDBBE;
    --on-primary:           #00382D;
    --primary-container:    #10493D;
    --on-primary-container: #B8F2E3;

    --secondary:            #B2CCC4;
    --on-secondary:         #1D352F;
    --secondary-container:  #1E3F37;
    --on-secondary-container:#CDEFE6;

    --tertiary:             #9FCBEA;
    --on-tertiary:          #0B3350;
    --tertiary-container:   #1D3F57;
    --on-tertiary-container:#D6E8F5;

    --error:                #FFB4AB;
    --on-error:             #690005;
    --error-container:      #93000A;
    --on-error-container:   #FFDAD6;

    --surface:              #0A0E0D;
    --on-surface:           #ECF2F0;
    --surface-variant:      #2E3834;
    --on-surface-variant:   #A3B0AB;

    --surface-lowest:       #070A09;
    --surface-low:          #141A18;
    --surface-cont:         #171E1C;
    --surface-high:         #1F2825;
    --surface-highest:      #283230;

    --outline:              #7C8A85;
    --outline-variant:      #2E3834;

    --inverse-surface:      #ECF2F0;
    --inverse-on-surface:   #1B2220;

    --scrim:                rgba(0, 0, 0, 0.6);

    --income:               #5DDBBE;
    --income-container:     #10493D;
    --expense:              #FFB47A;
    --expense-soft:         #FFB47A;
    --warn:                 #E8C349;
    --over-container:       #4A2A10;
    --on-over-container:    #FFDCC2;

    --elev-1: none; --elev-2: none; --elev-3: 0 6px 18px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --primary:              #5DDBBE;
  --on-primary:           #00382D;
  --primary-container:    #10493D;
  --on-primary-container: #B8F2E3;

  --secondary:            #B2CCC4;
  --on-secondary:         #1D352F;
  --secondary-container:  #1E3F37;
  --on-secondary-container:#CDEFE6;

  --tertiary:             #9FCBEA;
  --on-tertiary:          #0B3350;
  --tertiary-container:   #1D3F57;
  --on-tertiary-container:#D6E8F5;

  --error:                #FFB4AB;
  --on-error:             #690005;
  --error-container:      #93000A;
  --on-error-container:   #FFDAD6;

  --surface:              #0A0E0D;
  --on-surface:           #ECF2F0;
  --surface-variant:      #2E3834;
  --on-surface-variant:   #A3B0AB;

  --surface-lowest:       #070A09;
  --surface-low:          #141A18;
  --surface-cont:         #171E1C;
  --surface-high:         #1F2825;
  --surface-highest:      #283230;

  --outline:              #7C8A85;
  --outline-variant:      #2E3834;

  --inverse-surface:      #ECF2F0;
  --inverse-on-surface:   #1B2220;

  --scrim:                rgba(0, 0, 0, 0.6);

  --income:               #5DDBBE;
  --income-container:     #10493D;
  --expense:              #FFB47A;
  --expense-soft:         #FFB47A;
  --warn:                 #E8C349;
  --over-container:       #4A2A10;
  --on-over-container:    #FFDCC2;

  --elev-1: none; --elev-2: none; --elev-3: 0 6px 18px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ═══ Podstawy ═════════════════════════════════════════════════════════ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; min-height: 100dvh; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input  { font-family: inherit; }

#root {
  max-width: 480px; margin: 0 auto; position: relative;
  background: var(--surface); min-height: 100dvh;
}

:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

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

/* ═══ Ekran startowy ═══════════════════════════════════════════════════ */
.splash {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
}
.splash-mark { line-height: 0; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--surface-highest); border-top-color: var(--primary);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ Ekrany pełnoekranowe ═════════════════════════════════════════════ */
.center-screen {
  min-height: 100dvh; display: flex; flex-direction: column;
  justify-content: center; padding: 32px 24px;
  padding-top: calc(32px + var(--safe-t));
}
.hero-emoji { margin-bottom: 20px; }
.logo { border-radius: 24%; }
.h1 {
  font-family: var(--font-display);
  font-size: 28px; line-height: 36px; font-weight: 700;
  letter-spacing: -.02em; text-align: center; margin: 0 0 8px;
  color: var(--on-surface);
}
.tagline {
  font-family: var(--font-display);
  font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.01em;
  color: var(--primary); text-align: center; margin: -2px 0 16px;
}
.sub {
  font-size: 14px; line-height: 20px; letter-spacing: .25px;
  color: var(--on-surface-variant); text-align: center; margin: 0 0 32px;
}

/* ═══ Pola tekstowe (M3 outlined) ══════════════════════════════════════ */
.label {
  display: block; font-size: 12px; line-height: 16px; letter-spacing: .5px;
  font-weight: 500; color: var(--on-surface-variant); margin-bottom: 8px;
}
.input {
  width: 100%; padding: 15px 16px; border-radius: var(--r-m);
  background: var(--surface-lowest); color: var(--on-surface);
  border: 1px solid var(--outline); outline: none;
  font-size: 16px; line-height: 24px; letter-spacing: .5px;
  transition: border-color .15s, border-width .15s;
}
.input:focus { border-color: var(--primary); border-width: 2px; padding: 14px 15px; }
.input::placeholder { color: var(--outline); }
.input.big { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; padding: 14px 16px; }
.input.big:focus { padding: 13px 15px; }
.input.code {
  text-align: center; font-size: 24px; font-weight: 500;
  letter-spacing: 8px; text-transform: uppercase;
}
.mb-sm { margin-bottom: 12px; } .mb-md { margin-bottom: 20px; } .mb-lg { margin-bottom: 28px; }

/* ═══ Przyciski (M3) ═══════════════════════════════════════════════════ */
.btn {
  position: relative; overflow: hidden;
  width: 100%; min-height: 48px; padding: 12px 24px;
  border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary);
  font-size: 15px; font-weight: 700; letter-spacing: 0;
  box-shadow: none; transition: box-shadow .15s, background-color .15s;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0; transition: opacity .12s;
}
.btn:hover::after { opacity: .08; }
.btn:active::after { opacity: .12; }
.btn:disabled {
  background: color-mix(in srgb, var(--on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--on-surface) 38%, transparent);
  cursor: default;
}
.btn:disabled::after { opacity: 0; }

.btn.green { background: var(--income); color: var(--surface-lowest); }
.btn.ghost {
  background: transparent; color: var(--primary);
  border: 1px solid var(--outline);
}
.btn.danger {
  background: transparent; color: var(--error);
  border: 1px solid var(--outline); min-height: 44px; font-size: 14px;
}

.link-btn {
  width: 100%; min-height: 44px; padding: 12px;
  color: var(--primary); font-size: 14px; font-weight: 700;
  letter-spacing: 0; text-align: center; border-radius: var(--r-full);
}
.link-btn.accent { color: var(--primary); }

/* ═══ Chipy filtrujące (M3) ════════════════════════════════════════════ */
.pill-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.pill-row::-webkit-scrollbar { display: none; }
.pill-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
  position: relative; display: inline-flex; align-items: center;
  flex-shrink: 0; min-height: 36px; padding: 7px 16px;
  border-radius: var(--r-m);
  background: transparent; color: var(--on-surface-variant);
  border: 1px solid var(--outline);
  font-size: 14px; font-weight: 600; letter-spacing: 0;
  white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.pill.active {
  background: var(--secondary-container) !important;
  color: var(--on-secondary-container);
  border-color: transparent; font-weight: 700;
}
.pill.has-x { padding-right: 34px; }
.pill-x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: inherit; opacity: .75; font-size: 16px; line-height: 1;
  padding: 4px; border-radius: 50%;
}
.pill-x:hover { opacity: 1; }

/* ═══ Awatary ══════════════════════════════════════════════════════════ */
.ava {
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  border-width: 0; border-style: solid;
}
.ava-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.ava-opt {
  width: 56px; height: 56px; border-radius: 50%; font-size: 26px;
  border: 2px solid transparent; background: var(--surface-high);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .12s;
}
.ava-opt:active { transform: scale(.94); }

/* ═══ Górny pasek ══════════════════════════════════════════════════════ */
.topbar {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 8px 8px 4px; padding-top: calc(8px + var(--safe-t));
  background: var(--surface);
}
.month-nav {
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--on-surface-variant); font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.month-nav:hover { background: var(--surface-high); }
.month-label { min-width: 96px; text-align: center; }
.month-label b {
  display: block; font-family: var(--font-display); font-size: 18px; line-height: 24px;
  font-weight: 600; letter-spacing: -.01em; color: var(--on-surface);
}
.month-label span { display: block; font-size: 12px; color: var(--on-surface-variant); }

.members-chip {
  display: flex; align-items: center; gap: 2px; min-height: 36px;
  background: var(--surface-low); border-radius: var(--r-full);
  padding: 4px 12px 4px 6px;
  color: var(--on-surface-variant); font-size: 12px; font-weight: 500;
}
.members-chip .ava { box-shadow: 0 0 0 2px var(--surface); }
.members-chip .ava + .ava { margin-left: -8px; }

.income-chip {
  min-height: 36px; padding: 6px 16px 6px 12px; border-radius: var(--r-full);
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* ═══ Karta podsumowania ═══════════════════════════════════════════════ */
.summary {
  margin: 4px 16px 16px; padding: 20px;
  background: var(--surface-low); color: var(--on-surface);
  border-radius: var(--r-xl); box-shadow: var(--elev-1);
}
.summary-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  color: var(--on-surface-variant);
}
.code-badge {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-radius: var(--r-s); padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.summary-grid small {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: 0;
  color: var(--on-surface-variant); margin-bottom: 2px;
}
.summary-grid b { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.hr {
  height: 1px; margin-bottom: 16px;
  background: var(--outline-variant);
}
.bal-row { display: flex; justify-content: space-between; align-items: baseline; }
.bal-row span { font-size: 14px; font-weight: 600; color: var(--on-surface-variant); }
.bal-row b { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.03em; }

.bar {
  margin-top: 16px; height: 8px; border-radius: var(--r-full);
  background: var(--surface-high);
  overflow: hidden;
}
.bar > div { height: 8px; border-radius: var(--r-full); transition: width .4s cubic-bezier(.2,0,0,1); }

/* ═══ Karty kategorii ══════════════════════════════════════════════════ */
.content { padding: 0 16px 120px; }
.section-title {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--on-surface); margin: 4px 0 12px;
}
.section-title button {
  color: var(--primary); font-family: var(--font-body); font-size: 14px; font-weight: 700;
  min-height: 40px; padding: 6px 8px; border-radius: var(--r-s); margin-right: -8px;
}

.cat {
  background: var(--surface-low); border-radius: var(--r-card);
  margin-bottom: 10px; overflow: hidden; box-shadow: var(--elev-1);
  transition: background-color .15s;
}
.cat-head {
  display: flex; align-items: center; width: 100%;
  min-height: 60px; padding: 12px 16px; text-align: left;
  color: var(--on-surface);
}
.cat-head > .icon {
  font-size: 20px; margin-right: 14px;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--surface-high);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-head .name { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.cat-head .amt { font-size: 16px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cat-head .chev { margin-left: 10px; color: var(--on-surface-variant); font-size: 11px; }
.cat-body {
  border-top: 1px solid var(--outline-variant);
  padding: 8px 16px 16px;
}

.row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; min-height: 40px; padding: 6px 0;
}
.row + .row { border-top: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent); }
.row .k { font-size: 14px; color: var(--on-surface-variant); letter-spacing: .25px; }
.row .v { font-size: 14px; font-weight: 700; color: var(--on-surface); font-variant-numeric: tabular-nums; }

.author-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.author-tag {
  border-radius: var(--r-s); padding: 4px 10px;
  font-size: 12px; font-weight: 500;
}

.add-in-cat {
  width: 100%; min-height: 40px; margin-top: 12px; padding: 10px;
  border-radius: var(--r-full); font-size: 14px; font-weight: 700;
  background: var(--surface-high); color: var(--primary);
}

.empty { color: var(--on-surface-variant); font-size: 14px; margin: 8px 0; }
.empty-big {
  color: var(--on-surface-variant); font-size: 14px;
  text-align: center; margin-top: 56px; line-height: 1.6;
}

/* ═══ Lista wpisów ═════════════════════════════════════════════════════ */
.entry {
  display: flex; align-items: center; gap: 16px;
  min-height: 72px; padding: 10px 4px;
}
.entry + .entry { border-top: 1px solid var(--outline-variant); }
.entry-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.entry-mid { flex: 1; min-width: 0; }
.entry-mid .t {
  font-size: 16px; font-weight: 400; letter-spacing: .15px;
  color: var(--on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entry-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.entry-meta .who {
  border-radius: var(--r-xs); padding: 2px 7px;
  font-size: 11px; font-weight: 500;
}
.entry-meta .when { color: var(--on-surface-variant); font-size: 12px; }
.entry-right { text-align: right; flex-shrink: 0; }
.entry-right .a { font-size: 16px; font-weight: 700; color: var(--expense); font-variant-numeric: tabular-nums; }
.entry-right button {
  color: var(--on-surface-variant); font-size: 13px;
  padding: 4px 8px; margin-right: -8px; border-radius: var(--r-s);
}
.entry-right button:hover { background: var(--surface-high); color: var(--error); }

/* ═══ Domownicy ════════════════════════════════════════════════════════ */
.member { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 10px 4px; }
.member + .member { border-top: 1px solid var(--outline-variant); }
.member .n { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.member .n em { color: var(--on-surface-variant); font-weight: 400; font-size: 13px; font-style: normal; }
.member .s { color: var(--on-surface-variant); font-size: 13px; margin-top: 2px; }

.invite-card {
  background: var(--tertiary-container); color: var(--on-tertiary-container);
  border-radius: var(--r-xl); padding: 24px; margin-top: 24px;
}
.invite-card .lab { font-size: 12px; font-weight: 500; letter-spacing: .5px; margin-bottom: 8px; opacity: .8; }
.invite-code {
  font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: 8px;
  margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.invite-card .hint { font-size: 13px; line-height: 1.5; margin-bottom: 16px; opacity: .85; }
.invite-btn {
  width: 100%; min-height: 44px; border-radius: var(--r-full);
  background: var(--tertiary); color: var(--on-tertiary);
  font-size: 14px; font-weight: 700;
}

/* ═══ FAB (M3) ═════════════════════════════════════════════════════════ */
.fab {
  position: fixed; right: 16px;
  bottom: calc(96px + var(--safe-b));
  width: 56px; height: 56px; border-radius: var(--r-l);
  background: var(--primary); color: var(--on-primary);
  font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-3); z-index: 40;
  transition: transform .12s;
}
:root[data-theme="dark"] .fab,
.fab { border: 0; }
.fab:active { transform: scale(.92); }
@media (min-width: 481px) { .fab { right: calc(50vw - 240px + 16px); } }

/* ═══ Dolna nawigacja (M3 navigation bar) ══════════════════════════════ */
.nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; display: flex;
  background: var(--surface-low); border-top: 1px solid var(--outline-variant);
  padding: 12px 0 calc(16px + var(--safe-b));
  z-index: 40;
}
.nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--on-surface-variant); font-size: 12px; font-weight: 600;
  letter-spacing: 0; padding: 0;
}
.nav button .ic {
  font-size: 20px; line-height: 1;
  width: 64px; height: 32px; border-radius: var(--r-l);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s cubic-bezier(.2,0,0,1);
}
.nav button.on { color: var(--on-surface); font-weight: 700; }
.nav button.on .ic { background: var(--primary-container); color: var(--on-primary-container); }

/* ═══ Arkusze dolne (M3 bottom sheet) ══════════════════════════════════ */
.sheet-backdrop {
  position: fixed; inset: 0; background: var(--scrim);
  z-index: 100; animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 101;
  background: var(--surface-low); color: var(--on-surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  max-height: 90dvh; overflow-y: auto;
  padding-bottom: calc(32px + var(--safe-b));
  animation: slideUp .25s cubic-bezier(.05,.7,.1,1);
}
@keyframes slideUp { from { transform: translate(-50%, 100%) } to { transform: translate(-50%, 0) } }
.sheet-grab {
  width: 32px; height: 4px; border-radius: var(--r-full);
  background: var(--on-surface-variant); opacity: .4;
  margin: 16px auto 0;
}
.sheet-inner { padding: 16px 24px 0; }

.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sheet-head .who { display: flex; align-items: center; gap: 12px; }
.sheet-head .who b { font-family: var(--font-display); font-size: 18px; font-weight: 600; display: block; letter-spacing: -.01em; }
.sheet-head .who small { font-size: 13px; color: var(--on-surface-variant); }
.edit-btn {
  min-height: 36px; padding: 8px 14px; border-radius: var(--r-full);
  background: var(--surface-high); color: var(--on-surface-variant);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.sheet-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }

.quick-row { display: flex; gap: 8px; margin-bottom: 24px; }
.quick-row button {
  flex: 1; min-height: 40px; padding: 8px 4px;
  border-radius: var(--r-m); border: 1px solid var(--outline-variant);
  color: var(--on-surface); font-size: 14px; font-weight: 600;
  transition: background-color .15s;
}
.quick-row button:hover { background: var(--surface-high); }
.quick-row.green button { border-color: transparent; background: var(--income-container); color: var(--income); font-size: 13px; }

/* ═══ Segmentowany przełącznik (M3 segmented button) ═══════════════════ */
.tabs {
  display: flex; margin-bottom: 20px;
  border: 1px solid var(--outline); border-radius: var(--r-full); overflow: hidden;
}
.tabs button {
  flex: 1; min-height: 40px; padding: 8px 6px;
  color: var(--on-surface); font-size: 13px; font-weight: 600;
  transition: background-color .15s;
}
.tabs button + button { border-left: 1px solid var(--outline); }
.tabs button.on { background: var(--primary-container); color: var(--on-primary-container); font-weight: 700; }

/* ═══ Edytor kategorii ═════════════════════════════════════════════════ */
.cat-edit-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  background: var(--surface-high); border: 0; border-radius: var(--r-m);
  padding: 12px 14px; min-height: 56px;
}
.cat-edit-row .i { font-size: 20px; }
.cat-edit-row .n { flex: 1; font-size: 15px; font-weight: 700; }
.cat-edit-row .c { font-size: 12px; color: var(--on-surface-variant); }
.cat-edit-row .del {
  background: transparent; border: 1px solid var(--outline);
  border-radius: var(--r-full); color: var(--error);
  font-size: 13px; font-weight: 500; padding: 6px 14px; min-height: 32px;
}

.icon-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; scrollbar-width: none; }
.icon-row::-webkit-scrollbar { display: none; }
.icon-opt {
  width: 48px; height: 48px; border-radius: var(--r-m); flex-shrink: 0; font-size: 22px;
  background: var(--surface-high); border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s, border-color .15s;
}
.icon-opt.on { background: var(--primary-container); border-color: var(--primary); }

.color-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.color-opt {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--outline-variant);
  transition: transform .12s;
}
.color-opt.on { border-color: var(--surface-low); box-shadow: 0 0 0 3px var(--primary); }

.add-inline { display: flex; gap: 12px; align-items: stretch; }
.add-inline .input { flex: 1; }
.add-inline button {
  width: 56px; flex-shrink: 0; border-radius: var(--r-l);
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 24px; font-weight: 400;
}

/* ═══ Komunikaty ═══════════════════════════════════════════════════════ */
.banner {
  border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 16px;
  font-size: 14px; line-height: 20px; border: 0;
}
.banner.err { background: var(--error-container); color: var(--on-error-container); }
.banner.ok  { background: var(--income-container); color: var(--income); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(104px + var(--safe-b));
  min-height: 48px; display: flex; align-items: center;
  background: var(--inverse-surface); color: var(--inverse-on-surface);
  padding: 14px 20px; border-radius: var(--r-m);
  font-size: 14px; font-weight: 400; letter-spacing: .25px;
  box-shadow: var(--elev-3); z-index: 300; white-space: nowrap;
  animation: toastIn .2s cubic-bezier(.05,.7,.1,1);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px) } to { opacity: 1; transform: translate(-50%, 0) } }

.install-hint {
  margin: 0 16px 12px; background: var(--secondary-container);
  color: var(--on-secondary-container); border: 0;
  border-radius: var(--r-m); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.install-hint p { margin: 0; flex: 1; font-size: 13px; line-height: 1.45; }
.install-hint .go {
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--r-full); min-height: 36px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.install-hint .x {
  color: var(--on-secondary-container); font-size: 18px;
  width: 32px; height: 32px; border-radius: 50%; opacity: .7;
}

/* ═══ Zakładka Analiza ═════════════════════════════════════════════════ */
.an-loading {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  color: var(--on-surface-variant); font-size: 14px; padding: 48px 0;
}

.an-range { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; }
.an-range button {
  min-height: 36px; padding: 6px 14px; border-radius: var(--r-m);
  border: 1px solid var(--outline-variant); color: var(--on-surface);
  font-size: 13px; font-weight: 600; transition: background-color .15s;
}
.an-range button.on {
  background: var(--primary-container); color: var(--on-primary-container); font-weight: 700;
  border-color: transparent;
}
.an-export {
  background: var(--income-container) !important; color: var(--income) !important;
  border-color: transparent !important;
}
.an-export:disabled { opacity: .38; }

.an-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.an-card { background: var(--surface-low); border-radius: var(--r-card); padding: 16px; box-shadow: var(--elev-1); }
.an-card small {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .4px;
  color: var(--on-surface-variant); margin-bottom: 4px;
}
.an-card b { display: block; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.02em; }
.an-card span { display: block; font-size: 11px; color: var(--on-surface-variant); margin-top: 2px; }

.an-tabs { margin-bottom: 20px; }

.an-legend { display: flex; gap: 20px; margin-bottom: 12px; font-size: 13px; color: var(--on-surface-variant); }
.an-legend span { display: flex; align-items: center; gap: 7px; }
.an-legend i { width: 12px; height: 12px; border-radius: var(--r-xs); display: inline-block; }

.an-chart {
  background: var(--surface-low); border-radius: var(--r-card);
  padding: 16px 12px 10px; margin-bottom: 16px; box-shadow: var(--elev-1);
}
.an-chart svg { width: 100%; height: 150px; display: block; }
.an-xaxis { display: flex; margin-top: 6px; }
.an-xaxis span { flex: 1; text-align: center; font-size: 11px; color: var(--on-surface-variant); }

.an-note { font-size: 13px; line-height: 1.55; color: var(--on-surface-variant); margin: 0 0 20px; }
.an-note b { color: var(--on-surface); font-weight: 500; }

.an-table { background: var(--surface-low); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--elev-1); }
.an-tr {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 8px; padding: 12px 16px; font-size: 13px; align-items: center;
  font-variant-numeric: tabular-nums;
}
.an-tr + .an-tr { border-top: 1px solid var(--outline-variant); }
.an-tr span:not(:first-child) { text-align: right; }
.an-tr span:first-child { color: var(--on-surface); }
.an-th {
  font-size: 12px; font-weight: 500; letter-spacing: .4px;
  color: var(--on-surface-variant); background: var(--surface-high);
}
.an-th span:first-child { color: var(--on-surface-variant); }
.an-tr-item { grid-template-columns: 1.5fr .9fr .5fr .8fr; }
.an-tr-item span:first-child {
  display: flex; align-items: center; gap: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.an-cat { margin-bottom: 18px; }
.an-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.an-cat-head .ic { font-size: 18px; }
.an-cat-head .nm { flex: 1; font-weight: 700; }
.an-cat-head .pc { color: var(--on-surface-variant); font-size: 13px; min-width: 34px; text-align: right; }
.an-cat-head .sm { font-weight: 500; min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.an-cat-bar { background: var(--surface-high); border-radius: var(--r-full); height: 10px; overflow: hidden; }
.an-cat-bar > div { height: 10px; border-radius: var(--r-full); transition: width .4s cubic-bezier(.2,0,0,1); }
.an-cat-sub { font-size: 12px; color: var(--on-surface-variant); margin-top: 5px; }

/* ═══ Pozycje cykliczne ════════════════════════════════════════════════ */
.rec-banner {
  margin: 0 16px 12px; display: flex; align-items: center; gap: 14px;
  background: var(--secondary-container); color: var(--on-secondary-container);
  border: 0; border-radius: var(--r-m); padding: 14px 16px;
}
.rec-banner-txt { flex: 1; min-width: 0; }
.rec-banner-txt b { display: block; font-size: 14px; font-weight: 500; }
.rec-banner-txt span { display: block; font-size: 12px; margin-top: 3px; opacity: .8; }
.rec-banner-btn {
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--r-full); min-height: 40px; padding: 10px 22px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.rec-banner-btn:disabled { opacity: .5; }

.rec-intro { font-size: 13px; line-height: 1.55; color: var(--on-surface-variant); margin: 0 0 16px; }
.rec-hint { font-size: 12px; line-height: 1.55; color: var(--on-surface-variant); margin: 20px 0 0; }

.rec-sum {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--primary-container); color: var(--on-primary-container);
  border: 0; border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 20px;
}
.rec-sum span { font-size: 13px; font-weight: 500; }
.rec-sum b { font-family: var(--font-display); font-size: 18px; font-weight: 700; }

.rec-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  background: var(--surface-high); border: 0; border-radius: var(--r-m);
  padding: 10px 12px; min-height: 56px;
}
.rec-row .ic { font-size: 18px; }
.rec-row .nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.rec-row .nm em {
  display: block; font-style: normal; font-size: 12px;
  color: var(--on-surface-variant); font-weight: 400; margin-top: 2px;
}
.rec-amt {
  width: 92px; text-align: right; background: var(--surface-lowest);
  border: 1px solid var(--outline); border-radius: var(--r-s);
  color: var(--on-surface); font-size: 15px; font-weight: 700;
  padding: 8px 10px; outline: none;
}
.rec-amt:focus { border-color: var(--primary); border-width: 2px; padding: 7px 9px; }
.rec-del {
  color: var(--on-surface-variant); font-size: 16px;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
}
.rec-del:hover { background: var(--error-container); color: var(--on-error-container); }

.rec-tag { font-style: normal; font-size: 12px; margin-left: 6px; opacity: .8; }

/* ═══ Wybór motywu ═════════════════════════════════════════════════════ */
.theme-card {
  background: var(--surface-low); border-radius: var(--r-card);
  padding: 16px; margin-top: 24px; box-shadow: var(--elev-1);
}
.theme-card .lab {
  font-size: 14px; font-weight: 700; color: var(--on-surface); margin-bottom: 4px;
}
.theme-card .hint { font-size: 13px; color: var(--on-surface-variant); margin: 0 0 14px; }
.theme-seg { margin-bottom: 0; }

/* ═══ Ikony konturowe ══════════════════════════════════════════════════ */
.icon { display: block; flex-shrink: 0; }

/* Elementy, które łączą ikonę z etykietą */
.btn, .income-chip, .invite-btn, .edit-btn, .an-export,
.tabs button, .an-tabs button, .section-title button, .nav button .ic {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn { display: flex; }
.tabs button, .an-tabs button { gap: 6px; }
.section-title button { gap: 4px; }
.pill { gap: 7px; }
.pill .pill-ic { opacity: .9; }

.month-nav, .rec-del, .pill-x, .install-hint .x, .cat-head .chev {
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-head .chev { color: var(--on-surface-variant); }

.hero-emoji, .splash-mark {
  color: var(--primary);
  display: flex; justify-content: center;
}

/* Ikona kategorii w kółku */
.cat-head > .icon { color: var(--on-surface); }
.entry-icon .icon { opacity: .95; }

/* Wybór ikony w edytorze */
.icon-opt { color: var(--on-surface-variant); }
.icon-opt.on { color: var(--on-primary-container); }

/* Znacznik pozycji cyklicznej */
.rec-tag {
  display: inline-flex; vertical-align: -2px;
  margin-left: 6px; color: var(--primary); opacity: 1;
}

/* ═══ Awatar z inicjałem ═══════════════════════════════════════════════ */
.ava {
  font-weight: 700; letter-spacing: 0; line-height: 1;
  border: 0; color: #fff; user-select: none;
}
.ava-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.ava-opt {
  width: 52px; height: 52px; border-radius: 50%;
  color: #fff; font-size: 20px; font-weight: 500;
  border: 0; box-shadow: 0 0 0 0 transparent;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .15s, transform .12s;
}
.ava-opt.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--primary); }
.ava-opt:active { transform: scale(.94); }

/* Inicjał w zestawieniu osób (Analiza) */
.an-ava {
  width: 22px; height: 22px; border-radius: 50%; color: #fff;
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ═══ Link do automatyzacji (okno „Dodaj wydatek") ═══════════════════════ */
.link-copy {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 12px;
  background: none; border: 0; border-radius: var(--r-full);
  color: var(--primary); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: center;
}
.link-copy:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.link-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ Podpowiedzi: pasek (Kategorie), karuzela (Analiza), arkusz ════════ */
.ins { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ins-row { display: flex; align-items: center; justify-content: space-between; }
.ins-h2 {
  margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -.01em; color: var(--on-surface);
}
.ins-link {
  display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 0 0 8px;
  background: none; border: 0; color: var(--primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ins-empty {
  margin: 0; padding: 16px; border-radius: var(--r-card);
  background: var(--surface-low); color: var(--on-surface-variant); font-size: 14px; line-height: 1.5;
}

/* Karuzela — stała wysokość, przewijana w bok */
.ins-track {
  display: flex; gap: 10px; margin: 0 -16px; padding: 2px 16px 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ins-track::-webkit-scrollbar { display: none; }
.ins-mini {
  flex-shrink: 0; width: min(272px, 78vw); box-sizing: border-box; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; text-align: left;
  background: var(--surface-low); border: 0; border-radius: var(--r-card); box-shadow: var(--elev-1);
  color: var(--on-surface); font: inherit; cursor: pointer;
}
.ins-mini.is-over { background: var(--over-container); color: var(--on-over-container); box-shadow: none; }
.ins-mini-head { display: flex; align-items: center; gap: 10px; }
.ins-mini-head b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.ins-mini-head .ins-tile { width: 32px; height: 32px; border-radius: 10px; }
.ins-mini-body {
  font-size: 13px; line-height: 1.45; color: var(--on-surface-variant);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ins-mini.is-over .ins-mini-body, .ins-mini.is-over .ins-mini-date { color: var(--on-over-container); }
.ins-mini-date { font-size: 12px; color: var(--on-surface-variant); }
.ins-dots { display: flex; justify-content: center; gap: 6px; }
.ins-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--outline-variant); transition: width .15s; }
.ins-dots span.on { width: 18px; background: var(--primary); }

/* Pasek z pilną podpowiedzią na ekranie Kategorie */
.ins-banner {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); min-height: 56px;
  margin: 0 16px 12px; padding: 10px 12px 10px 14px; box-sizing: border-box;
  background: var(--over-container); color: var(--on-over-container);
  border: 0; border-radius: var(--r-l); font: inherit; text-align: left; cursor: pointer;
}
.ins-banner span { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.35; }

/* Karty (arkusz) */
.ins-card {
  display: flex; gap: 14px; padding: 16px; margin-bottom: 10px;
  background: var(--surface-low); border-radius: var(--r-card); box-shadow: var(--elev-1);
  touch-action: pan-y; position: relative;
}
.ins-card.is-over { background: var(--over-container); box-shadow: none; }
.ins-card.is-over .ins-txt b, .ins-card.is-over .ins-txt > span, .ins-card.is-over .ins-date { color: var(--on-over-container); }
.ins-card.is-resolved { background: none; box-shadow: none; border: 1px solid var(--outline-variant); }
.ins-card.is-hidden { background: none; box-shadow: none; border: 1px dashed var(--outline); }
.ins-card.is-hidden .ins-txt b { color: var(--on-surface-variant); }
.ins-card.is-resolved .ins-txt b { color: var(--on-surface-variant); }
.ins-tile {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.ins-tile.warn { background: var(--over-container); color: var(--on-over-container); }
.ins-tile.over { background: var(--expense); color: var(--surface-low); }
.ins-tile.info { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.ins-tile.good { background: var(--primary-container); color: var(--on-primary-container); }
.ins-tile.done { background: var(--surface-highest); color: var(--on-surface-variant); }
.ins-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ins-txt b { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--on-surface); }
.ins-txt > span { font-size: 13px; line-height: 1.45; color: var(--on-surface-variant); }
.ins-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.ins-stats div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--surface-high); }
.ins-stats small { font-size: 11px; color: var(--on-surface-variant); }
.ins-stats b { font-size: 14px; font-weight: 700; }
.ins-txt > .ins-cause { color: var(--on-surface); margin-top: 2px; }
.ins-cause b { font-size: 13px; }
.ins-chip {
  align-self: flex-start; margin-top: 6px; padding: 4px 10px; border-radius: var(--r-s);
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 12px; font-weight: 700; font-style: normal;
}
.ins-action {
  align-self: flex-start; display: flex; align-items: center; gap: 6px; margin-top: 8px;
  min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-full);
  background: var(--primary-container); color: var(--on-primary-container);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ins-txt > .ins-date { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--on-surface-variant); }

/* Arkusz „Wszystkie podpowiedzi" */
.ins-month { display: flex; align-items: center; gap: 2px; margin: 2px 0 2px -12px; }
.ins-month b { font-size: 15px; font-weight: 700; }
.ins-month button {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: var(--on-surface); cursor: pointer;
}
.ins-month button:disabled { opacity: .3; cursor: default; }
.ins-sub { margin: 0 0 12px; font-size: 13px; color: var(--on-surface-variant); }
.ins-note {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--tertiary-container); color: var(--on-tertiary-container); font-size: 13px; line-height: 1.45;
}
.ins-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ins-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--on-surface); }
.ins-head span { font-size: 13px; color: var(--on-surface-variant); }

/* ═══ Leftmo 1.5: zakładka Podpowiedzi, Domownicy z awatarów ════════════ */
.nav button .ic { position: relative; }
.nav-dot {
  position: absolute; top: 3px; right: 17px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--expense); border: 2px solid var(--surface-low); box-sizing: content-box;
}
.ins-page { padding-top: calc(10px + var(--safe-t)); }
.ins-tabhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin-bottom: 10px; }
.ins-tabhead h1 {
  margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: -.02em; color: var(--on-surface);
}
.ins-seg { margin-bottom: 12px; }
.ins-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; min-height: 20px; }
.ins-foot .ins-date { margin-top: 0; }
.ins-txt > .ins-foot .ins-date { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--on-surface-variant); }
.ins-card.is-over .ins-foot .ins-date, .ins-card.is-over .ins-hide { color: var(--on-over-container); }
.ins-hide, .ins-restore {
  display: flex; align-items: center; gap: 4px; min-height: 44px; margin: -12px -8px -12px auto; padding: 0 8px;
  background: none; border: 0; border-radius: var(--r-full);
  color: var(--primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.ins-restore {
  margin: -6px -4px -6px auto; padding: 0 14px 0 10px;
  background: var(--primary-container); color: var(--on-primary-container);
}
.ins-swipe { position: relative; margin-bottom: 10px; border-radius: var(--r-card); overflow: hidden; background: var(--on-surface-variant); }
.ins-swipe > .ins-card { margin-bottom: 0; }
.ins-reveal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0 24px; color: var(--surface-low); font-size: 14px; font-weight: 700;
}
.ins-reveal::before {
  content: ""; position: absolute; left: 24px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%);
}
.ins-months {
  display: flex; flex-direction: column; margin-bottom: 14px; overflow: hidden;
  background: var(--surface-low); border-radius: var(--r-card); box-shadow: var(--elev-1);
}
.ins-months button {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 12px 0 16px;
  background: none; border: 0; border-top: 1px solid var(--outline-variant);
  color: var(--on-surface); font: inherit; text-align: left; cursor: pointer;
}
.ins-months button:first-child { border-top: 0; }
.ins-months button > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ins-months b { font-size: 15px; font-weight: 700; }
.ins-months small { font-size: 12px; color: var(--on-surface-variant); }
.ins-months button > svg { color: var(--on-surface-variant); }
.ins-export {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-card);
  background: var(--tertiary-container); color: var(--on-tertiary-container);
}
.ins-export b { font-size: 15px; font-weight: 700; }
.ins-export span { font-size: 13px; line-height: 1.45; }
.ins-export button {
  align-self: flex-start; display: flex; align-items: center; gap: 6px; margin-top: 4px;
  min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-full);
  background: var(--tertiary); color: var(--on-tertiary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ins-export button:disabled { opacity: .5; cursor: default; }
.ins-export small { font-size: 12px; }
.snackbar {
  position: fixed; left: 16px; right: 16px; bottom: calc(96px + var(--safe-b)); z-index: 30;
  display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box;
  padding: 6px 8px 6px 16px; border-radius: 14px;
  background: var(--inverse-surface); color: var(--inverse-on-surface); box-shadow: var(--elev-3);
}
.snackbar span { flex: 1; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snackbar button {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-full); background: none;
  color: var(--primary-container); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
/* Nagłówek pełnego ekranu ze strzałką wstecz */
.page-head { display: flex; align-items: center; gap: 4px; min-height: 48px; margin: 0 0 12px -10px; }
.page-head h1 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--on-surface); }
.page-head span { font-size: 12px; color: var(--on-surface-variant); }
.page-top { padding: calc(10px + var(--safe-t)) 16px 0 16px; margin-left: 0; }
.icon-btn {
  width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: var(--on-surface); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-high); }
.budget-name { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 12px; }
.budget-name small { font-size: 13px; font-weight: 600; color: var(--on-surface-variant); }
.budget-name h2 {
  margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -.02em; color: var(--on-surface);
}
.ins-swipe .ins-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ═══ Leftmo 1.6: ukrywanie kwot, kolejność kategorii, przewodnik ═══════════ */
.summary { position: relative; }
.summary-grid { padding-right: 34px; }
.eye-btn {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--on-surface-variant); cursor: pointer;
}
.eye-btn:hover { background: var(--surface-high); }
.eye-btn.on { background: var(--primary-container); color: var(--on-primary-container); }
.masked-note {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 18px;
  border-radius: var(--r-card); background: var(--surface-low); box-shadow: var(--elev-1); color: var(--on-surface-variant);
}
.masked-note span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; }
.masked-note b { color: var(--on-surface); font-size: 15px; }

/* Kolejność kategorii: przytrzymaj i przeciągnij */
.cat { position: relative; }
.cat-head { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cat-head .grip { display: flex; margin: 0 -6px 0 6px; color: var(--outline); }
.cat.dragging { box-shadow: var(--elev-3); outline: 2px solid var(--primary); transition: none; }
.content.is-dragging .cat:not(.dragging) { opacity: .7; }

/* Zmiana nazwy kategorii w edytorze */
.cat-name-input {
  min-width: 0; border: 0; border-bottom: 1.5px dashed var(--outline); border-radius: 0; padding: 4px 0;
  background: transparent; color: var(--on-surface); font: inherit; font-size: 15px; font-weight: 700; outline: none;
}
.cat-name-input:focus { border-bottom: 2px solid var(--primary); }

/* Przewodnik */
.tour-layer { position: fixed; inset: 0; z-index: 200; }
.tour-scrim, .tour-block { position: fixed; inset: 0; }
.tour-scrim { background: rgba(10, 14, 13, .55); }
.tour-hole {
  position: fixed; border-radius: 22px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(10, 14, 13, .62); outline: 3px solid #5DDBBE; outline-offset: 2px;
}
.tour-bubble {
  position: fixed; left: 16px; right: 16px; max-width: 420px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px;
  background: var(--surface-low); color: var(--on-surface); box-shadow: 0 20px 40px rgba(0,0,0,.28);
}
.tour-arrow { position: absolute; width: 16px; height: 16px; background: var(--surface-low); transform: rotate(45deg); border-radius: 3px; }
.tour-arrow.up { top: -8px; }
.tour-arrow.down { bottom: -8px; }
.tour-head { display: flex; align-items: center; justify-content: space-between; }
.tour-step { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--primary); }
.tour-step i { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; }
.tour-skip, .tour-text {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-full); background: none;
  color: var(--primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.tour-skip { margin: -12px -8px -12px 0; color: var(--on-surface-variant); font-size: 13px; }
.tour-bubble h2, .tour-invite h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.tour-bubble p, .tour-invite p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); }
.tour-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-high); font-size: 13px; line-height: 1.45; color: var(--on-surface-variant); }
.tour-note svg { flex-shrink: 0; color: var(--primary); }
.tour-example { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface-high); }
.tour-example small { font-size: 11px; font-weight: 700; color: var(--on-surface-variant); }
.tour-example b { font-size: 14px; }
.tour-example em { align-self: flex-start; font-style: normal; padding: 4px 9px; border-radius: 8px; background: var(--primary-container); color: var(--on-primary-container); font-size: 12px; font-weight: 800; }
.tour-tonal, .tour-primary, .tour-next {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--r-full); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.tour-tonal { background: var(--primary-container); color: var(--on-primary-container); }
.tour-primary { background: var(--primary); color: var(--on-primary); min-height: 54px; font-size: 16px; }
.tour-next { min-height: 44px; background: var(--primary); color: var(--on-primary); font-size: 14px; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; }
.tour-nav { display: flex; align-items: center; gap: 4px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--outline-variant); }
.tour-dots i.on { width: 18px; background: var(--primary); }
.tour-welcome, .tour-invite {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px; padding: 12px 22px calc(24px + var(--safe-b)) 22px;
  border-radius: 28px 28px 0 0; background: var(--surface-low); color: var(--on-surface);
}
.tour-grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--outline-variant); }
.tour-welcome h1 { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.tour-welcome p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--on-surface-variant); }
.tour-welcome small { text-align: center; font-size: 12px; color: var(--on-surface-variant); }
.tour-plan { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tour-plan li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-high); font-size: 15px; font-weight: 700; }
.tour-plan b { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 13px; display: flex; align-items: center; justify-content: center; }
.tour-end {
  position: fixed; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); max-width: 400px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 24px 22px; text-align: center;
  border-radius: 28px; background: var(--surface-low); color: var(--on-surface); box-shadow: 0 24px 48px rgba(0,0,0,.3);
}
.tour-end h2 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.tour-end p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--on-surface-variant); }
.tour-end .tour-primary { align-self: stretch; }
.tour-check { width: 64px; height: 64px; border-radius: 20px; background: var(--primary-container); color: var(--on-primary-container); display: flex; align-items: center; justify-content: center; }
.tour-code { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; border-radius: 20px; background: var(--tertiary-container); color: var(--on-tertiary-container); }
.tour-code small { font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.tour-code b { font-family: var(--font-display); font-size: 32px; letter-spacing: 8px; }
.tour-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.snackbar.with-fab { right: 88px; }
.snackbar.with-fab span { white-space: normal; line-height: 1.3; }