:root{
  --bg:#f2f3f7;
  --card:#ffffff;
  --ink:#1c1f26;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#1f6feb;
  --brand-d:#1857c4;
  --green:#1a8e4b;
  --green-bg:#e7f6ee;
  --red:#d23b3b;
  --red-bg:#fdecec;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --radius:16px;
}

:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#1f1f24;
  --card:#2b2b31;
  --ink:#e9e9ed;
  --muted:#a2a2ab;
  --line:#3c3c44;
  --brand:#3b82f6;
  --brand-d:#2f6fe0;
  --green:#3ad07f;
  --green-bg:#17331f;
  --red:#f06b6b;
  --red-bg:#3a2020;
  --shadow:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
}

/* ---------- Przycisk motywu (sama ikona) ---------- */
.topbar-right{display:flex; align-items:center; gap:14px;}
.theme-btn{
  background:transparent; border:0; color:#fff; padding:0; margin:0;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:0; opacity:.95;
}
.theme-btn:active{transform:scale(.92);}
.theme-btn svg{display:block; width:22px; height:22px;}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Pasek górny ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--brand);
  color:#fff;
  padding-top:env(safe-area-inset-top);
  box-shadow:var(--shadow);
}
.topbar-in{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; max-width:680px; margin:0 auto;
}
.brand{font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:7px;}
.brand svg{width:20px; height:20px; display:block;}
.topbar-user{color:#fff; text-decoration:none; font-size:14px; opacity:.95; display:inline-flex; align-items:center; gap:4px;}

/* ---------- Układ ---------- */
.wrap{
  max-width:680px; margin:0 auto; padding:16px;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.card{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; margin-bottom:14px;
}
.empty{text-align:center; color:var(--muted);}

/* ---------- Zakładki Wydatki / Terminarz ---------- */
.tabs{display:flex; gap:8px; margin-bottom:14px;}
.tab{
  flex:1; text-align:center; padding:11px 8px; border-radius:12px;
  background:var(--card); color:var(--muted); text-decoration:none;
  font-weight:600; font-size:13px; box-shadow:var(--shadow);
}
.tab.active{background:var(--brand); color:#fff;}

/* ---------- Nawigacja miesięcy ---------- */
.monthnav{display:flex; align-items:center; justify-content:space-between; padding:8px 10px;}
.monthlabel{font-weight:700; font-size:15px; text-transform:capitalize;}
.navbtn{
  text-decoration:none; color:var(--brand); font-size:24px; line-height:1;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border-radius:12px;
}
.navbtn:active{background:var(--bg);}

/* ---------- Statystyki ---------- */
.stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:14px;}
.stat{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 10px; text-align:center;}
.stat-l{display:block; font-size:10px; color:var(--muted); margin-bottom:4px;}
.stat-v{display:block; font-weight:700; font-size:12px;}
.stat-in .stat-v{color:var(--green);}
.stat-out .stat-v{color:var(--red);}

/* ---------- Filtr ---------- */
.filter{display:flex; align-items:center; gap:10px; padding:12px 16px;}
.filter-l{color:var(--muted); font-size:11px;}
.filter select{flex:1;}

/* ---------- Lista transakcji ---------- */
.txlist{list-style:none; margin:0; padding:0;}
.tx{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px; margin-bottom:10px; display:flex; align-items:flex-start; gap:14px;
}
.tx-amount{
  font-weight:700; font-size:15px; white-space:nowrap;
  min-width:82px; flex-shrink:0; padding-top:1px;
}
.tx-amount.plus{color:var(--green);}
.tx-amount.minus{color:var(--red);}
.tx-main{flex:1; min-width:0;}
.tx-date{font-size:11px; color:var(--muted);}
.tx-name{font-weight:600; font-size:14px; margin-top:2px; word-break:break-word;}
.tx-grp{font-size:12px; color:var(--muted); margin-top:3px;}
.tx-user{font-size:12px; color:var(--muted); margin-top:1px;}
.tx-note{margin-top:8px; font-size:12px; color:var(--ink); background:var(--bg); padding:6px 10px; border-radius:10px; word-break:break-word;}
.tx-actions{display:flex; flex-direction:column; gap:6px; flex-shrink:0;}
.iconbtn{
  border:none; background:var(--bg); color:var(--ink);
  width:40px; height:40px; border-radius:12px; font-size:14px;
  display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer;
}
.iconbtn.danger{color:var(--red);}
.iconbtn.add{background:var(--green); color:#fff; font-size:22px; font-weight:300;}
.iconbtn:active{transform:scale(.95);}
.tx-actions form{margin:0;}

/* ---------- Przycisk dodawania (FAB) ---------- */
.fab{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom));
  width:60px; height:60px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:27px; font-weight:300;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 6px 16px rgba(31,111,235,.45); z-index:30;
}
.fab:active{background:var(--brand-d);}

/* ---------- Formularze ---------- */
label{display:block; font-size:11px; color:var(--muted); margin-bottom:14px;}
input[type=text],input[type=password],input[type=date],select,textarea{
  width:100%; margin-top:6px; padding:13px 12px;
  font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:12px; -webkit-appearance:none; appearance:none;
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,111,235,.15);}
textarea{resize:vertical;}

.form-h,.login-h{font-size:16px; margin:0 0 14px;}

/* Przełącznik Wydatek/Przychód */
.seg{display:flex; background:var(--bg); border-radius:12px; padding:4px; margin-bottom:16px;}
.seg-opt{flex:1; margin:0;}
.seg-opt input{position:absolute; opacity:0; pointer-events:none;}
.seg-opt span{
  display:block; text-align:center; padding:10px; border-radius:9px;
  font-size:12px; color:var(--muted); font-weight:600;
}
.seg-opt input:checked + span{background:var(--card); color:var(--ink); box-shadow:var(--shadow);}
.seg-opt:first-child input:checked + span{color:var(--red);}
.seg-opt:last-child input:checked + span{color:var(--green);}

.form-actions{display:flex; gap:10px; margin-top:6px;}
.form-actions .btn{flex:1;}

/* ---------- Przyciski ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 18px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; width:100%;
}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:active{background:var(--brand-d);}
.btn-ghost{background:var(--bg); color:var(--ink);}

/* ---------- Logowanie ---------- */
.login{max-width:380px; margin:8vh auto 0;}
.hint{font-size:11px; color:var(--muted); text-align:center; margin:14px 0 0;}

/* ---------- Alerty ---------- */
.alert{
  background:var(--red-bg); color:var(--red); border:1px solid #f3c2c2;
  padding:12px 14px; border-radius:12px; margin-bottom:14px; font-size:12px;
}