html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
button { touch-action: manipulation; }

.hero-pattern {
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 18px 18px;
}

.nav-btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: 1rem; background: rgb(255 255 255 / .12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
  transition: background .15s, transform .1s;
}
.nav-btn:hover { background: rgb(255 255 255 / .2); }
.nav-btn:active { transform: scale(.94); }

.seg { display: flex; gap: .25rem; padding: .25rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px #fee2e2, 0 4px 16px -4px rgba(127,29,29,.10); }
.seg-btn { flex: 1; white-space: nowrap; padding: .5rem .85rem; border-radius: .8rem; font-size: .85rem; font-weight: 500; color: #64748b; transition: all .15s; }
.seg-btn span { font-size: .72rem; opacity: .75; }
.seg-btn:hover { color: #b91c1c; }
.seg-btn.is-active { background: #dc2626; color: #fff; box-shadow: 0 4px 12px -2px rgba(220,38,38,.45); }

.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 9999px; }

.dock-btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 4.25rem; padding: .45rem .75rem; border-radius: .85rem; font-size: .7rem; font-weight: 500; color: #475569; transition: background .15s, transform .1s; }
.dock-btn:hover { background: #fef2f2; color: #b91c1c; }
.dock-btn:active { transform: scale(.94); }

.skeleton { border-radius: 1rem; background: linear-gradient(90deg, #fef2f2 25%, #fee2e2 50%, #fef2f2 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Member card */
.m-card { transition: transform .15s, box-shadow .2s, background-color .2s; animation: pop .25s ease-out both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

.check-btn { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; flex-shrink: 0; transition: all .18s; }
.check-btn:active { transform: scale(.9); }
.check-btn[data-state="unpaid"] { background: #fff; box-shadow: inset 0 0 0 2px #fecaca; color: transparent; }
.check-btn[data-state="unpaid"]:hover { box-shadow: inset 0 0 0 2px #f87171; color: #fca5a5; }
.check-btn[data-state="paid"] { background: #10b981; color: #fff; box-shadow: 0 6px 14px -4px rgba(16,185,129,.6); }
.check-btn[data-state="advance"] { background: #0ea5e9; color: #fff; box-shadow: 0 6px 14px -4px rgba(14,165,233,.6); }
.check-btn.is-busy { pointer-events: none; opacity: .6; }
.check-btn.is-busy::after { content: ""; position: absolute; inset: .8rem; border-radius: 9999px; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.check-btn.is-busy svg { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }

/* History table */
.scroll-thin { scrollbar-width: thin; scrollbar-color: #fecaca transparent; }
.h-sticky { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 #fee2e2; }
.h-cell { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin: auto; border-radius: .65rem; transition: transform .1s, box-shadow .15s; }
button.h-cell:hover { box-shadow: 0 0 0 2px #fca5a5; }
button.h-cell:active { transform: scale(.88); }
.h-paid { background: #10b981; color: #fff; }
.h-advance { background: #0ea5e9; color: #fff; }
.h-unpaid { background: #fef2f2; color: #fca5a5; }
.h-future.h-unpaid { background: #f8fafc; color: #cbd5e1; }

/* Modal: bottom sheet on mobile, centered dialog on desktop */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(69 10 10 / .45); backdrop-filter: blur(3px); animation: fade .2s ease-out; }
.modal-panel { position: relative; width: 100%; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 1.5rem 1.5rem 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sheet .28s cubic-bezier(.2,.9,.3,1); box-shadow: 0 -10px 40px -10px rgba(0,0,0,.3); }
@media (min-width: 640px) {
  .modal { align-items: center; padding: 1.5rem; }
  .modal-panel { max-width: 28rem; border-radius: 1.5rem; animation: zoom .2s ease-out; padding-bottom: 0; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes sheet { from { transform: translateY(100%); } }
@keyframes zoom { from { opacity: 0; transform: scale(.95); } }

.field { width: 100%; height: 3rem; border-radius: .9rem; background: #fff; box-shadow: inset 0 0 0 1.5px #e2e8f0; padding: 0 1rem; font-size: 1rem; outline: none; transition: box-shadow .15s; }
.field:focus { box-shadow: inset 0 0 0 2px #ef4444; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 3rem; padding: 0 1.25rem; border-radius: .9rem; font-weight: 600; font-size: .95rem; transition: all .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-primary { background: #dc2626; color: #fff; box-shadow: 0 6px 16px -6px rgba(220,38,38,.7); }
.btn-primary:hover { background: #b91c1c; }
.btn-ghost { background: #f1f5f9; color: #334155; }
.btn-ghost:hover { background: #e2e8f0; }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }

.icon-btn { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; color: #64748b; transition: all .15s; flex-shrink: 0; }
.icon-btn:hover { background: #fef2f2; color: #b91c1c; }
.icon-btn:active { transform: scale(.9); }
.icon-btn:disabled { opacity: .3; pointer-events: none; }

.toast { pointer-events: auto; display: flex; align-items: center; gap: .5rem; max-width: 26rem; padding: .7rem 1rem; border-radius: 1rem; font-size: .875rem; font-weight: 500; color: #fff; box-shadow: 0 12px 30px -8px rgba(0,0,0,.35); animation: toastIn .25s ease-out; }
.toast.out { animation: toastOut .2s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

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