/* ═══════════════════════════════════════════
   DATORII v2 — Fullscreen Tab Layout
   iPhone 17 Pro Max · iOS 26 · Cloudflare
   ═══════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;

  /* NO TEXT SELECTION — anywhere in the app */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  /* Prevent iOS callout on long press */
  -webkit-touch-callout: none;
}

/* Allow selection only in input fields */
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

:root {
  /* Colors */
  --bg:          #070710;
  --bg-card:     #0f0f1c;
  --bg-card2:    #141426;
  --glass:       rgba(255,255,255,0.04);
  --glass2:      rgba(255,255,255,0.07);

  --gold:        #c8a96e;
  --gold-l:      #e8c98a;
  --gold-dim:    rgba(200,169,110,0.15);
  --gold-glow:   rgba(200,169,110,0.28);

  --give:        #e07070;
  --give-l:      #f08888;
  --give-dim:    rgba(224,112,112,0.12);
  --give-glow:   rgba(224,112,112,0.22);

  --recv:        #5bc48a;
  --recv-l:      #6ed99a;
  --recv-dim:    rgba(91,196,138,0.12);
  --recv-glow:   rgba(91,196,138,0.22);

  --txt:         #f0f0f8;
  --txt2:        #8888aa;
  --txt3:        #44445a;

  --border:      rgba(255,255,255,0.06);
  --border2:     rgba(255,255,255,0.11);

  --r-sm: 10px;  --r-md: 16px;
  --r-lg: 22px;  --r-xl: 30px;

  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --snap:   cubic-bezier(0.25, 1, 0.5, 1);

  /* Safe areas — iPhone Dynamic Island */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  height: -webkit-fill-available;
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'DM Sans', sans-serif;
  height: 100dvh;
  height: -webkit-fill-available;
  overflow: hidden;          /* Body never scrolls — panels scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

.hidden { display: none !important; }

/* ═══════════════════════════════════════════
   AUTH
   ═══════════════════════════════════════════ */
.auth-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  padding-top: calc(var(--sat) + 24px);
  padding-bottom: calc(var(--sab) + 24px);
  z-index: 100;
}

.auth-bg {
  position: absolute; inset: 0;
  background: var(--bg); overflow: hidden;
}

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  animation: orbFloat 9s ease-in-out infinite;
}
.orb-1 { width:420px;height:420px;background:radial-gradient(circle,rgba(200,169,110,.18) 0%,transparent 70%);top:-120px;left:-120px;animation-delay:0s; }
.orb-2 { width:360px;height:360px;background:radial-gradient(circle,rgba(123,107,176,.18) 0%,transparent 70%);bottom:-80px;right:-80px;animation-delay:-3.5s; }
.orb-3 { width:260px;height:260px;background:radial-gradient(circle,rgba(91,196,138,.12) 0%,transparent 70%);top:55%;left:60%;animation-delay:-6.5s; }
@keyframes orbFloat {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(28px,-18px) scale(1.06)}
  66%{transform:translate(-18px,28px) scale(.95)}
}

.grid-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size: 60px 60px;
}

.auth-card {
  position: relative; z-index: 1;
  background: rgba(13,13,28,.88);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-xl);
  padding: 48px 36px 40px;
  width: 100%; max-width: 370px;
  box-shadow: 0 32px 80px rgba(0,0,0,.65);
  text-align: center;
  animation: authIn .8s var(--spring) both;
}
@keyframes authIn {
  from{opacity:0;transform:translateY(44px) scale(.94)}
  to{opacity:1;transform:none}
}

.auth-logo { display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:40px; }

.logo-mark { width:64px;height:64px;animation:logoSpin .7s var(--spring) .15s both; }
.logo-mark.small { width:26px;height:26px;animation:none; }
@keyframes logoSpin {
  from{opacity:0;transform:scale(0) rotate(-160deg)}
  to{opacity:1;transform:none}
}

.auth-title {
  font-family:'Syne',sans-serif;font-size:2.6rem;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--gold-l),var(--gold),#9d8fd4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation: fadeUp .5s var(--ease) .3s both;
}
.auth-sub {
  color:var(--txt2);font-size:.88rem;font-weight:300;letter-spacing:.01em;
  animation: fadeUp .5s var(--ease) .4s both;
}
@keyframes fadeUp {
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.google-btn {
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:15px 24px;
  background:var(--glass2);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:500;
  cursor:pointer;transition:all .22s var(--ease);
  animation: fadeUp .5s var(--ease) .5s both;
  position:relative;overflow:hidden;
}
.google-btn::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(200,169,110,.09),rgba(123,107,176,.09));
  opacity:0;transition:opacity .22s;
}
.google-btn:hover::before{opacity:1}
.google-btn:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.3)}
.google-btn:active{transform:scale(.97)}
.auth-note{margin-top:18px;color:var(--txt3);font-size:.76rem;animation:fadeUp .5s var(--ease) .6s both}

/* ═══════════════════════════════════════════
   APP SHELL — fixed-height layout
   ═══════════════════════════════════════════ */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: -webkit-fill-available;
  overflow: hidden;
}

/* ─── HEADER ─── */
.header {
  flex-shrink: 0;
  background: rgba(7,7,16,.92);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding-top: var(--sat);
  z-index: 30;
}

.header-inner {
  display:flex;align-items:center;justify-content:space-between;
  padding: 12px 18px;
}

.header-logo { display:flex;align-items:center;gap:9px; }
.app-name {
  font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--gold-l),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.header-right { display:flex;align-items:center;gap:8px; }

.calendar-icon-btn {
  width:36px;height:36px;border-radius:11px;
  background:var(--glass);border:1px solid var(--border);
  color:var(--gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--ease);
}
.calendar-icon-btn:hover{background:var(--gold-dim);border-color:rgba(200,169,110,.3)}
.calendar-icon-btn:active{transform:scale(.93)}

.user-avatar {
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--gold-dim);object-fit:cover;
}

.signout-btn {
  width:34px;height:34px;border-radius:10px;
  background:var(--glass);border:1px solid var(--border);
  color:var(--txt3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--ease);
}
.signout-btn:hover{color:var(--give);border-color:var(--give-dim);background:var(--give-dim)}
.signout-btn:active{transform:scale(.93)}

/* ─── SUMMARY STRIP ─── */
.summary-strip {
  display:flex;align-items:center;justify-content:space-between;
  padding: 10px 18px 12px;
  gap: 8px;
}

.summary-pill {
  display:flex;flex-direction:column;gap:2px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:8px 14px;
  flex:1;
}
.give-pill { border-left: 2px solid var(--give); }
.receive-pill { border-right: 2px solid var(--recv); text-align:right; }

.pill-label { font-size:.65rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.08em;font-weight:500; }
.pill-amount { font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.02em; }
.give-pill .pill-amount { color:var(--give-l); }
.receive-pill .pill-amount { color:var(--recv-l); }

.summary-balance {
  display:flex;flex-direction:column;align-items:center;gap:2px;
  flex-shrink:0;
}
.balance-label { font-size:.6rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.08em; }
.balance-value { font-family:'Syne',sans-serif;font-size:.82rem;font-weight:700;color:var(--txt2); }
.balance-value.positive { color:var(--recv-l); }
.balance-value.negative { color:var(--give-l); }

/* ─── TAB BAR ─── */
.tab-bar {
  display:flex;align-items:center;
  padding: 0 14px 0;
  gap: 4px;
  position: relative;
  border-top: 1px solid var(--border);
}

.tab-btn {
  flex: 1;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding: 11px 12px;
  background:none;border:none;
  font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;
  color:var(--txt3);
  cursor:pointer;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color .2s var(--ease);
  position:relative;z-index:1;
}
.tab-btn.active { color:var(--txt); }
.tab-btn:active { opacity:.7; }

.tab-dot {
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  transition:all .3s var(--ease);
}
.give-dot-tab { background:var(--give); }
.receive-dot-tab { background:var(--recv); }
.tab-btn:not(.active) .tab-dot { opacity:.4; }

.tab-count {
  font-size:.7rem;font-weight:600;
  background:var(--glass2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1px 7px;
  min-width:20px;text-align:center;
  transition:all .2s;
}
.tab-btn.active .tab-count { background:var(--glass2); }

/* Sliding underline indicator */
.tab-indicator {
  position:absolute;
  bottom:0;left:14px;
  height:2px;border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,var(--give),var(--give-l));
  width:calc(50% - 14px);
  transition:transform .3s var(--snap), background .3s var(--ease);
  transform:translateX(0);
}
.tab-indicator.right {
  background:linear-gradient(90deg,var(--recv),var(--recv-l));
  transform:translateX(calc(100% + 4px));
}

/* ═══════════════════════════════════════════
   PANELS — fullscreen, JS-controlled via .active class
   ═══════════════════════════════════════════ */
.panels-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.panel {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: transform .32s var(--snap);
  will-change: transform;
  pointer-events: none;
}

/* Active panel is always visible, no pointer-events issues */
.panel.active {
  transform: translateX(0);
  pointer-events: all;
}

/* Inactive give panel goes left when receive is active */
.panel[data-panel="give"].slide-left {
  transform: translateX(-100%);
}


.panel-scroll {
  height:100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 14px 14px 0;
  scroll-behavior: smooth;
}

/* Scrollbar */
.panel-scroll::-webkit-scrollbar { width:3px; }
.panel-scroll::-webkit-scrollbar-track { background:transparent; }
.panel-scroll::-webkit-scrollbar-thumb { background:var(--glass2);border-radius:3px; }

.panel-bottom-spacer { height: calc(var(--sab) + 90px); }

/* ─── DEBT LIST ─── */
.debt-list {
  display:flex;flex-direction:column;gap:9px;
}

/* ─── EMPTY STATE ─── */
.empty-state {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 20px;gap:10px;
  animation:fadeUp .4s var(--ease) both;
}
.empty-emoji { font-size:2.6rem;animation:emptyBob 3s ease-in-out infinite; }
@keyframes emptyBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.empty-text { color:var(--txt2);font-size:.92rem;font-weight:500; }
.empty-sub  { color:var(--txt3);font-size:.78rem; }

/* ─── DEBT CARD ─── */
.debt-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: cardIn .3s var(--spring) both;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  /* iOS momentum & no-select already set globally */
}

.debt-card:active { transform:scale(.985); background:var(--bg-card2); }

@keyframes cardIn {
  from{opacity:0;transform:translateX(-12px) scale(.97)}
  to{opacity:1;transform:none}
}

/* Left accent bar */
.debt-card::before {
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:3px;
  transition:width .18s var(--ease);
}
.give-card::before    { background:var(--give); }
.receive-card::before { background:var(--recv); }

/* Card swipe — actions revealed on swipe left */
.card-inner {
  display:flex;align-items:center;gap:12px;width:100%;
  transition:transform .25s var(--snap);
}

.card-info { flex:1;min-width:0;display:flex;flex-direction:column;gap:5px; }

.card-name {
  font-size:.94rem;font-weight:500;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.card-date {
  font-size:.72rem;color:var(--txt3);
  display:flex;align-items:center;gap:4px;
}
.card-date.overdue { color:var(--give);font-weight:500; }
.card-date.soon    { color:var(--gold); }

.card-amount {
  font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.02em;
  flex-shrink:0;
}
.give-card    .card-amount { color:var(--give-l); }
.receive-card .card-amount { color:var(--recv-l); }

/* Swipe actions — revealed on swipe left */
.card-actions {
  position:absolute;right:0;top:0;bottom:0;
  display:flex;align-items:center;gap:0;
  transform:translateX(100%);
  transition:transform .25s var(--snap);
}

.debt-card.swiped .card-inner   { transform:translateX(-130px); }
.debt-card.swiped .card-actions { transform:translateX(0); }

.swipe-action {
  width:65px;height:100%;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  font-size:.62rem;font-weight:600;letter-spacing:.04em;
  cursor:pointer;border:none;
  transition:opacity .15s;
  color:#fff;
}
.swipe-action:active { opacity:.75; }
.swipe-edit   { background:rgba(123,107,176,.8); }
.swipe-delete { background:rgba(224,112,112,.85);border-radius:0 var(--r-md) var(--r-md) 0; }

/* ─── HISTORY ─── */
.history-toggle {
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:10px;
  padding:10px 14px;
  background:none;border:1px dashed var(--border);border-radius:var(--r-md);
  color:var(--txt3);font-family:'DM Sans',sans-serif;font-size:.76rem;
  cursor:pointer;transition:all .2s var(--ease);
}
.history-toggle:hover { color:var(--txt2);border-color:var(--border2); }
.history-toggle:active { opacity:.7; }

.history-list {
  display:flex;flex-direction:column;gap:6px;margin-top:8px;
}

.history-card {
  background:var(--glass);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 13px;
  display:flex;align-items:center;gap:10px;
  opacity:.5;transition:opacity .18s;
  animation:cardIn .25s var(--ease) both;
}
.history-card:hover { opacity:.75; }

.history-name {
  flex:1;font-size:.8rem;color:var(--txt2);
  text-decoration:line-through;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-amount { font-family:'Syne',sans-serif;font-size:.8rem;font-weight:600;color:var(--txt3);flex-shrink:0; }

.restore-btn {
  padding:4px 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--glass);
  color:var(--txt3);font-size:.7rem;cursor:pointer;
  transition:all .18s var(--ease);flex-shrink:0;
}
.restore-btn:hover { color:var(--recv-l);border-color:var(--recv-dim);background:var(--recv-dim); }
.restore-btn:active { transform:scale(.95); }

/* ─── FAB ADD ─── */
.fab-add {
  position:fixed;
  bottom: calc(var(--sab) + 26px);
  right: 22px;
  width:58px;height:58px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--gold),var(--gold-l));
  border:none;color:#07070f;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px var(--gold-glow), 0 4px 12px rgba(0,0,0,.4);
  transition:all .3s var(--spring);
  z-index:40;
  animation:fabIn .6s var(--spring) .3s both;
}
@keyframes fabIn {
  from{opacity:0;transform:scale(0) rotate(-90deg)}
  to{opacity:1;transform:none}
}
.fab-add:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 12px 32px var(--gold-glow)}
.fab-add:active{transform:scale(.92);}

/* ═══════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════ */
.modal-overlay {
  position:fixed;inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  padding:20px;
  padding-bottom:calc(var(--sab) + 20px);
  animation:overlayIn .2s var(--ease) both;
}
@keyframes overlayIn { from{opacity:0}to{opacity:1} }

.modal-overlay.hidden { display:none !important; }

.modal-card {
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);
  width:100%;max-width:480px;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(0,0,0,.7);
  animation:modalIn .38s var(--spring) both;
}
@keyframes modalIn {
  from{opacity:0;transform:translateY(56px) scale(.95)}
  to{opacity:1;transform:none}
}

.modal-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px 16px;
  border-bottom:1px solid var(--border);
}
.modal-title {
  font-family:'Syne',sans-serif;font-size:1.08rem;font-weight:700;letter-spacing:-.02em;
}
.modal-close {
  width:32px;height:32px;border-radius:9px;
  background:var(--glass);border:1px solid var(--border);
  color:var(--txt2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s var(--ease);
}
.modal-close:hover { background:var(--glass2);color:var(--txt); }
.modal-close:active { transform:scale(.9); }

.modal-body {
  padding:18px 22px;
  display:flex;flex-direction:column;gap:15px;
}

.field-group { display:flex;flex-direction:column;gap:6px; }
.field-label { font-size:.74rem;font-weight:500;color:var(--txt2);text-transform:uppercase;letter-spacing:.07em; }

.field-input {
  background:var(--glass);border:1px solid var(--border);border-radius:var(--r-md);
  padding:13px 15px;color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:.95rem;
  transition:all .18s var(--ease);width:100%;outline:none;
  -webkit-appearance:none;appearance:none;
}
.field-input:focus {
  border-color:rgba(200,169,110,.5);
  background:rgba(200,169,110,.04);
  box-shadow:0 0 0 3px rgba(200,169,110,.09);
}
.field-input::placeholder { color:var(--txt3); }
input[type="date"].field-input { color-scheme:dark; }

.amount-wrap { position:relative; }
.amount-input { padding-right:54px; }
.currency-badge {
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:.72rem;font-weight:600;color:var(--gold);letter-spacing:.05em;
  pointer-events:none;
}

.modal-footer {
  display:flex;gap:10px;padding:15px 22px 20px;
  border-top:1px solid var(--border);
}

.btn-cancel {
  flex:1;padding:13px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--border);color:var(--txt2);
  font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:500;
  cursor:pointer;transition:all .18s var(--ease);
}
.btn-cancel:hover { background:var(--glass2);color:var(--txt); }
.btn-cancel:active { transform:scale(.97); }

.btn-save {
  flex:2;padding:13px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--gold),var(--gold-l));
  border:none;color:#07070f;
  font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:all .22s var(--ease);
}
.btn-save:hover { transform:translateY(-1px);box-shadow:0 6px 20px var(--gold-glow); }
.btn-save:active { transform:scale(.97); }
.btn-save:disabled { opacity:.6;transform:none; }

/* Confirm modal */
.confirm-card { padding:32px 24px 24px;text-align:center;max-width:320px; }
.confirm-icon { font-size:2.6rem;margin-bottom:12px;animation:shake .5s var(--ease) .1s both; }
@keyframes shake {
  0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}
}
.confirm-title { font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700;margin-bottom:8px; }
.confirm-text  { color:var(--txt2);font-size:.84rem;margin-bottom:22px;line-height:1.55; }
.confirm-actions { display:flex;gap:10px; }
.btn-delete {
  flex:2;padding:13px;border-radius:var(--r-md);
  background:var(--give-dim);border:1px solid rgba(224,112,112,.3);color:var(--give-l);
  font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:all .18s var(--ease);
}
.btn-delete:hover { background:rgba(224,112,112,.22);box-shadow:0 4px 16px var(--give-glow); }
.btn-delete:active { transform:scale(.97); }

/* Calendar modal */
.cal-card { max-width:430px; }
.calendar-container { padding:14px 18px 18px; }

.cal-nav { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.cal-nav-btn {
  width:34px;height:34px;border-radius:10px;
  background:var(--glass);border:1px solid var(--border);color:var(--txt2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .18s var(--ease);
}
.cal-nav-btn:hover { background:var(--glass2);color:var(--txt); }
.cal-nav-btn:active { transform:scale(.9); }

.cal-month-label {
  font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:-.01em;
  text-transform:capitalize;
}

.cal-weekdays {
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px;
}
.cal-weekdays span {
  text-align:center;font-size:.64rem;font-weight:600;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.06em;padding:3px 0;
}

.cal-grid {
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:14px;
}

.cal-day {
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:.78rem;color:var(--txt2);
  position:relative;cursor:default;transition:all .15s;
}
.cal-day.today {
  background:var(--gold-dim);color:var(--gold-l);font-weight:700;
  box-shadow:0 0 0 1.5px rgba(200,169,110,.2);
}
.cal-day.has-event { cursor:pointer; }
.cal-day.has-event:hover { background:var(--glass2); }
.cal-day.has-event:active { transform:scale(.9); }
.cal-day.other-month { opacity:.22; }

.event-dots {
  position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  display:flex;gap:2px;
}
.cal-dot { width:5px;height:5px;border-radius:50%;display:inline-block; }
.give-dot    { background:var(--give); }
.receive-dot { background:var(--recv); }

.cal-legend {
  display:flex;align-items:center;gap:10px;
  font-size:.72rem;color:var(--txt2);margin-bottom:12px;
}

.cal-events { display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto; }

.cal-event-item {
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:var(--glass);border:1px solid var(--border);border-radius:var(--r-sm);
  animation:fadeUp .2s var(--ease) both;
}
.cal-event-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.cal-event-name { flex:1;font-size:.8rem;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cal-event-amount { font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;flex-shrink:0; }
.cal-event-item.give    .cal-event-amount { color:var(--give-l); }
.cal-event-item.receive .cal-event-amount { color:var(--recv-l); }
.cal-no-events { text-align:center;color:var(--txt3);font-size:.78rem;padding:14px; }

/* ─── TOAST ─── */
.toast {
  position:fixed;
  bottom:calc(var(--sab) + 88px);
  left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--bg-card2);
  border:1px solid var(--border2);border-radius:30px;
  padding:10px 22px;font-size:.84rem;color:var(--txt);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  z-index:300;opacity:0;
  transition:all .28s var(--spring);
  pointer-events:none;white-space:nowrap;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

/* ─── Center modal on wider screens ─── */
@media (min-width:600px) {
  .modal-overlay { align-items:center; }
}