:root{
  --green:#569816;
  --greenSoft: #eaf3e1;
  --text:#111;
  --muted:#666;
  --bg:#f4f5f7;
  --card:#fff;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --radius: 16px;
  --danger:#d32f2f;
  --dangerSoft: rgba(211,47,47,.12);
}
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); }
.phone{ max-width:520px; margin:0 auto; min-height:100vh; padding:14px 14px 110px 14px; box-sizing:border-box; }

.topbar{ display:flex; align-items:flex-start; justify-content:space-between; padding:6px 4px 26px 4px; margin-bottom:8px; }
.logoWrap img{ height:70px; width:auto; display:block; }
.settingsLink{ font-size:18px; color:var(--muted); cursor:pointer; padding-top:14px; }
.settingsLink:hover{ text-decoration:underline; }

.dayRow{ display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 10px 0; }
.navArrow{
  width:54px; height:54px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:var(--shadow);
  text-decoration:none; color:var(--text);
  user-select:none; font-size:30px;
}

.pill{
  background:var(--green);
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  box-shadow:var(--shadow);
  font-size:20px;
  letter-spacing:.2px;
}
.pill.danger{ background: var(--danger); }

.limitLine{
  text-align:center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.msg{ margin:10px 0 0 0; padding:12px; border-radius:14px; font-size:18px; }
.msg.err{ background:#ffecec; border:1px solid #ffb8b8; color:#7a1111; }
.msg.ok{ background:#e9f8ee; border:1px solid #bfe8c9; color:#155724; }

.listCard{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-top:16px; }

/* Swipe container */
.swipeWrap{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.06);
  touch-action: pan-y;
}
.swipeBg{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  background: transparent;
  z-index: 0;
}
.deleteBtn{
  width: 96px;
  height: 100%;
  background: var(--danger);
  color:#fff;
  border:none;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}

.swipeContent{
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;

  transform: translateX(0px);
  transition: transform .18s ease;

  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  align-items:flex-start;
  background:#fff;
}

.swipeWrap:nth-child(even) .swipeContent{ background: var(--greenSoft); }

.title{ font-size:14px; font-weight:900; margin-bottom:2px; }
.sub{ font-size:12px; color:var(--muted); }
.right{ text-align:right; white-space:nowrap; }
.amt{ font-size:14px; font-weight:900; }
.eur{ font-size:11px; color:var(--muted); margin-top:2px; }
.empty{ padding:14px; color:var(--muted); font-size:13px; }

.fab{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  width:66px; height:66px; border-radius:999px;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:40px; border:none; box-shadow:var(--shadow);
  cursor:pointer; z-index:9999;
}

/* MODAL */
.modalOverlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  display:none; justify-content:center;
  align-items:flex-start;
  padding:14px; padding-top:70px;
  box-sizing:border-box; z-index:10000;
}
.modal{
  width:100%; max-width:520px;
  max-height: calc(100vh - 140px);
  height: min(78vh, calc(100vh - 140px));
  background:#fff; border-radius:18px; box-shadow:var(--shadow);
  padding:14px; display:flex; flex-direction:column;
  box-sizing:border-box; overflow:hidden;
}
.modalHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.modalTitle{ font-size:20px; font-weight:900; }
.closeBtn{ border:none; background:transparent; font-size:28px; cursor:pointer; color:var(--muted); }
.modalBody{ flex:1 1 auto; overflow:auto; padding-right:2px; }
.modalFooter{ flex:0 0 auto; padding-top:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:#fff; }

label{ display:block; font-size:12px; color:var(--muted); margin:12px 0 8px 0; }
input, select{
  width:100%; padding:12px; border:1px solid #ddd; border-radius:14px;
  font-size:16px; box-sizing:border-box; outline:none;
}
input:focus, select:focus{ border-color: rgba(86,152,22,.55); }

.btn{
  width:100%; padding:14px; border:none; border-radius:18px;
  background:var(--green); color:#fff; font-size:22px; font-weight:900; cursor:pointer;
}

.results{ margin-top:8px; height:240px; overflow:auto; border:1px solid #eee; border-radius:14px; padding:6px; }
.resultItem{
  padding:10px; border-radius:12px; cursor:pointer;
  display:flex; justify-content:space-between; gap:10px; align-items:center;
}
.resultItem:hover{ background:#f2f7ec; }
.codePill{ font-weight:900; color:var(--green); background:rgba(86,152,22,.10); padding:6px 10px; border-radius:999px; font-size:12px; white-space:nowrap; }
.nameText{ font-size:14px; color:var(--text); }
.selectedBadge{ font-size:12px; color:#fff; background:var(--green); padding:6px 10px; border-radius:999px; white-space:nowrap; }
.hint{ font-size:12px; color:var(--muted); margin-top:8px; }

/* Settings list */
.settingsList{ border:1px solid #eee; border-radius:14px; overflow:hidden; }
.settingsItem{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 12px; cursor:pointer; background:#fff; border-bottom:1px solid #eee;
}
.settingsItem:last-child{ border-bottom:none; }
.settingsItem:hover{ background: rgba(86,152,22,.06); }
.settingsKey{ font-size:14px; color:var(--muted); }
.settingsVal{ font-size:16px; font-weight:900; color:var(--text); display:flex; align-items:center; gap:10px; }
.chev{ color:var(--muted); font-size:20px; }
.backRow{ display:flex; align-items:center; gap:10px; margin:2px 0 10px 0; }
.backBtn{
  border:none; background:#f3f3f3; border-radius:12px;
  padding:10px 12px; cursor:pointer; font-weight:800;
}

/* Categories editor rows */
.catRowLeft{ display:flex; flex-direction:column; gap:2px; }
.catName{ font-size:14px; font-weight:900; }
.catSub{ font-size:12px; color:var(--muted); }
.catActions{ display:flex; align-items:center; gap:10px; }
.editBtn{
  border:none; background:rgba(86,152,22,.10);
  color:var(--green); font-weight:900;
  padding:8px 10px; border-radius:12px; cursor:pointer;
  font-size:12px;
}

/* ------------------------------
   Add expense: Category tiles
------------------------------ */
.catGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:6px;
}
.catTile{
  border:2px solid rgba(0,0,0,.16);
  border-radius:16px;
  padding:18px 12px;
  font-weight:900;
  font-size:22px;
  line-height:1.05;
  text-align:center;
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  background:#f3f3f3;
  color:#111;
  user-select:none;
}
.catTile:active{ transform: translateY(1px); }
.catTile.selected{
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(86,152,22,.20), 0 10px 18px rgba(0,0,0,.12);
}

/* Tile color palette (up to 8) */
.catTile.c1{ background:#FFE066; } /* yellow */
.catTile.c2{ background:#7DB0B9; } /* teal */
.catTile.c3{ background:#6FA8DC; } /* blue */
.catTile.c4{ background:#D9A6BE; } /* pink */
.catTile.c5{ background:#E57F6A; } /* red/orange */
.catTile.c6{ background:#F4C38A; } /* orange */
.catTile.c7{ background:#B6ACD8; } /* purple */
.catTile.c8{ background:#3A86C6; color:#fff; } /* strong blue */

/* Spread expense UI */
.spreadBox{
  margin-top: 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.spreadRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0;
}

.spreadRow input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0 2px 0 0;
}

.spreadText{
  font-size: 14px;
  color: var(--text);
  font-weight: 700;
}

#spreadDays{
  width: 88px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 16px;
}

#spreadDays:disabled{
  opacity: .55;
  background: #f5f5f5;
}

.spreadHint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}