/* ===================================================
   NHÀ MÈO 🐱 — style.css
   Theme: Mèo cute | Beige + Olive Green
   Mobile-first, PWA-ready
   =================================================== */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }

/* ── DESIGN TOKENS (Beige + Olive) ── */
:root {
  /* 🐾 Beige palette */
  --bg:      #F7F1E3;
  --bg2:     #EDE5D0;
  --bg3:     #E3D9BE;
  --surface: #FEFCF5;
  --surface2:#FAF7ED;
  --border:  rgba(107,124,59,0.18);
  --border2: rgba(80,95,40,0.32);

  /* Text */
  --text:    #2C2A1E;
  --text2:   #6B6042;
  --text3:   #A09070;

  /* 🌿 Olive green */
  --grad:    linear-gradient(135deg, #6B7C3B 0%, #A4B56A 100%);
  --accent:  #6B7C3B;
  --accent2: #5C6B2E;
  --accent3: #A4B56A;

  /* Status */
  --green:    #4A6B2A;
  --green-bg: rgba(74,107,42,0.1);
  --red:      #B85C3A;
  --red-bg:   rgba(184,92,58,0.09);
  --yellow:   #C4922A;
  --yellow-bg:rgba(196,146,42,0.1);
  --blue:     #4A8FA8;
  --blue-bg:  rgba(74,143,168,0.1);

  /* Layout */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow:    0 4px 24px rgba(80,90,40,0.13);
  --shadow-sm: 0 2px 10px rgba(80,90,40,0.08);

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

/* ── BASE ── */
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Olive ambient gradient */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 5% 5%, rgba(107,124,59,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 95% 85%, rgba(164,181,106,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(196,146,42,0.04) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* ── SCREENS ── */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; z-index: 1; }
.screen.active { display: flex; }

/* ════════════════════════════════
   🐱 LOGIN SCREEN
   ════════════════════════════════ */
.login-deco {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.deco-circle {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.4;
}
.c1 { width:300px;height:300px; background:radial-gradient(#6B7C3B,transparent); top:-90px;left:-80px; }
.c2 { width:220px;height:220px; background:radial-gradient(#A4B56A,transparent); bottom:100px;right:-70px; }
.c3 { width:180px;height:180px; background:radial-gradient(#C4922A,transparent); bottom:-50px;left:25%; opacity:0.25; }

/* Paw print decorations */
.paw-decor {
  position: absolute; font-size: 18px; opacity: 0.12; pointer-events: none;
  animation: pawFloat 4s ease-in-out infinite;
}
.paw-decor:nth-child(1) { top:15%; right:8%;  animation-delay: 0s; }
.paw-decor:nth-child(2) { top:40%; left:5%;  animation-delay: 1s; }
.paw-decor:nth-child(3) { bottom:20%; right:12%; animation-delay: 2s; font-size:14px; }
.paw-decor:nth-child(4) { top:65%; left:15%; animation-delay: 0.5s; font-size:12px; }

@keyframes pawFloat {
  0%,100% { transform: translateY(0) rotate(-10deg); opacity: 0.12; }
  50% { transform: translateY(-10px) rotate(10deg); opacity: 0.2; }
}

.login-container {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100dvh; padding:24px 24px calc(24px + var(--safe-bot));
}

.login-header { text-align:center; margin-bottom:32px; }
.app-icon {
  font-size:72px; margin-bottom:12px;
  filter: drop-shadow(0 6px 24px rgba(107,124,59,0.4));
  animation: catBounce 2.5s ease-in-out infinite;
  display: block;
}

/* ── 2 mèo tròn mix nhau ── */
.cats-duo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
  height: 90px;
  position: relative;
}
.cat-duo-item {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(107,124,59,0.35);
  box-shadow: 0 8px 28px rgba(107,124,59,0.30),
              0 2px 8px rgba(0,0,0,0.12);
  position: absolute;
  bottom: 0;
  flex-shrink: 0;
  background: #F0EAD6;
}
.cat-duo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-duo-left {
  left: 50%;
  transform: translateX(-90px);
  animation: catBounceL 2.8s ease-in-out infinite;
  z-index: 2;
}
.cat-duo-right {
  left: 50%;
  transform: translateX(14px);
  animation: catBounceR 2.6s ease-in-out infinite 0.4s;
  z-index: 1;
}
/* Bounce animations cho từng con — lệch pha */
@keyframes catBounceL {
  0%,100% { bottom: 0;    rotate: -4deg; }
  30%     { bottom: 18px; rotate: 3deg; }
  60%     { bottom: 8px;  rotate: -2deg; }
}
@keyframes catBounceR {
  0%,100% { bottom: 0;    rotate: 3deg; }
  35%     { bottom: 14px; rotate: -4deg; }
  65%     { bottom: 6px;  rotate: 2deg; }
}
@keyframes catBounce {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  30%     { transform: translateY(-14px) rotate(2deg); }
  60%     { transform: translateY(-6px) rotate(-1deg); }
}

.app-title {
  font-family: 'Nunito', sans-serif;
  font-size:30px; font-weight:800;
  background: var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:6px;
  position: relative;
}
/* Cat whisker decoration on title */
.app-title::before,
.app-title::after {
  content: '〜';
  font-size: 14px;
  -webkit-text-fill-color: var(--accent3);
  opacity: 0.7;
  vertical-align: middle;
}
.app-sub { color:var(--text2); font-size:14px; }

/* Login form card */
.login-form-card {
  width:100%; max-width:360px; margin:0 auto;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:20px; padding:24px 20px;
  box-shadow:var(--shadow);
  position: relative;
}
/* Cat ear decoration on top of card */
.login-form-card::before,
.login-form-card::after {
  content: '';
  position: absolute;
  top: -14px; width: 0; height: 0;
  border-style: solid;
}
.login-form-card::before {
  left: 24px;
  border-width: 0 14px 16px 0;
  border-color: transparent var(--accent) transparent transparent;
  border-radius: 2px;
}
.login-form-card::after {
  left: 42px;
  border-width: 16px 14px 0 0;
  border-color: var(--accent) transparent transparent transparent;
  border-radius: 2px;
}

/* Password input */
.password-wrap {
  display:flex; align-items:center;
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--radius); overflow:hidden; transition:border-color 0.2s;
}
.password-wrap:focus-within { border-color:var(--accent); }
.password-input {
  flex:1; background:none; border:none; outline:none;
  font-family:inherit; font-size:16px; color:var(--text);
  padding:13px 14px; width:100%;
}
.password-input::placeholder { color:var(--text3); }
.pw-toggle {
  background:none; border:none; padding:0 14px;
  font-size:18px; cursor:pointer; color:var(--text2);
  flex-shrink:0;
}

.pin-error {
  text-align:center; color:var(--red); font-size:13px;
  font-weight:500; margin-top:8px; min-height:18px;
}

/* ════════════════════════════════
   🐱 APP HEADER
   ════════════════════════════════ */
.app-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + var(--safe-top)) 18px 10px;
  background:var(--surface); border-bottom:1.5px solid var(--border);
  flex-shrink:0; box-shadow:var(--shadow-sm); position:relative; z-index:10;
}
.header-left  { display:flex; align-items:center; gap:10px; }
.header-right { display:flex; align-items:center; gap:8px; }

.header-avatar {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; border:2px solid var(--border2);
  box-shadow:var(--shadow-sm);
}
.header-greeting { font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
.header-name { font-size:15px; font-weight:700; font-family:'Playfair Display',serif; }

.month-badge {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:999px; padding:5px 12px;
  font-size:12px; font-weight:600; color:var(--text2);
}

.icon-btn {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--radius-xs); color:var(--text2);
  font-size:16px; width:36px; height:36px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.icon-btn:active { transform:scale(0.9); }

/* ════════════════════════════════
   PAGES
   ════════════════════════════════ */
.page { display:none; flex:1; overflow:hidden; }
.page.active { display:flex; flex-direction:column; }
.page-scroll {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 14px 0; overscroll-behavior:contain;
}
.bottom-space { height:90px; }

/* ════════════════════════════════
   🐾 BOTTOM NAV
   ════════════════════════════════ */
.bottom-nav {
  display:flex; align-items:center; justify-content:space-around;
  padding:6px 16px calc(6px + var(--safe-bot));
  background:var(--surface); border-top:1.5px solid var(--border);
  flex-shrink:0; box-shadow:0 -2px 14px rgba(80,90,40,0.1);
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer; padding:8px 4px;
  border-radius:var(--radius-sm); transition:all 0.2s; color:var(--text3);
  font-family:inherit; min-height:54px; justify-content:center;
}
.nav-btn.active { color:var(--accent); }
.nav-btn.active .nav-icon {
  transform:scale(1.2);
  filter: drop-shadow(0 2px 6px rgba(107,124,59,0.4));
}
.nav-icon { font-size:22px; transition:all 0.25s; }
.nav-label { font-size:10px; font-weight:700; letter-spacing:0.2px; }

.add-center-btn {
  flex:none; width:58px; height:58px;
  background:var(--grad); border-radius:50%;
  margin-top:-18px; border:3px solid var(--surface);
  box-shadow:0 4px 20px rgba(107,124,59,0.5);
  transition:all 0.2s; position:relative;
}
.add-center-btn:active { transform:scale(0.92) rotate(-10deg); }
.add-center-btn.active { color:var(--accent); background:var(--bg2) !important; }
.add-plus {
  font-size:26px; font-weight:300; color:white; line-height:1;
}

/* ════════════════════════════════
   🌟 HERO CARD
   ════════════════════════════════ */
.hero-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:20px; padding:22px 20px 16px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.hero-card::before {
  content:''; position:absolute; top:0;left:0;right:0; height:3px;
  background:var(--grad); border-radius:20px 20px 0 0;
}
/* Sleeping cat decoration */
.hero-card::after {
  content: '🐱';
  position: absolute; bottom:10px; right:14px;
  font-size:28px; opacity:0.18;
  animation: catSleep 3s ease-in-out infinite;
}
@keyframes catSleep {
  0%,100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.1); }
}

.hero-label {
  font-size:12px; color:var(--text2); font-weight:600;
  text-transform:uppercase; letter-spacing:0.8px; margin-bottom:6px;
}
.hero-amount {
  font-family:'Playfair Display',serif;
  font-size:38px; font-weight:800; letter-spacing:-1px;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:14px;
}
.hero-members { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.member-chip {
  display:flex; align-items:center; gap:6px;
  background:var(--bg2); border:1px solid var(--border);
  padding:5px 10px; border-radius:999px;
}
.member-chip-avatar {
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.member-chip-name  { font-size:11px; color:var(--text2); }
.member-chip-amount{ font-size:11px; font-weight:700; color:var(--text); }

.hero-progress-wrap {
  height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; margin-bottom:6px;
}
.hero-progress-bar { height:100%; background:var(--grad); border-radius:3px; transition:width 0.6s ease; }
.hero-progress-label { font-size:11px; color:var(--text3); }

/* ════════════════════════════════
   SECTION HEADERS
   ════════════════════════════════ */
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin:0 2px 10px; padding-bottom:6px;
  border-bottom:1.5px solid var(--border);
}
.section-header span { font-family:'Playfair Display',serif; font-size:16px; font-weight:700; color:var(--text); }
.text-btn { background:none; border:none; color:var(--accent); font-size:13px; font-family:inherit; cursor:pointer; font-weight:700; }

/* ════════════════════════════════
   PERSON BREAKDOWN
   ════════════════════════════════ */
.person-breakdown { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.person-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.person-row-avatar {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; flex-shrink:0;
}
.person-row-name { flex:1; font-size:14px; font-weight:600; }
.person-row-bar { height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.person-row-bar-fill { height:100%; border-radius:3px; transition:width 0.5s; }
.person-row-amount { font-size:14px; font-weight:700; text-align:right; flex-shrink:0; min-width:80px; }

/* ════════════════════════════════
   CATEGORY BREAKDOWN
   ════════════════════════════════ */
.cat-breakdown { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.cat-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.cat-row-icon { font-size:20px; width:26px; text-align:center; flex-shrink:0; }
.cat-row-info { flex:1; min-width:0; }
.cat-row-name { font-size:13px; font-weight:600; }
.cat-row-bar-wrap { height:4px; background:var(--bg3); border-radius:2px; margin-top:4px; }
.cat-row-bar { height:100%; border-radius:2px; transition:width 0.5s; }
.cat-row-amount { font-size:13px; font-weight:700; flex-shrink:0; text-align:right; }

/* ════════════════════════════════
   TRANSACTION LIST
   ════════════════════════════════ */
.tx-list { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.tx-item {
  display:flex; align-items:center; gap:10px;
  padding:13px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:border-color 0.2s;
}
.tx-cat-icon {
  width:40px; height:40px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.tx-info { flex:1; min-width:0; }
.tx-note { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-meta { font-size:11px; color:var(--text2); margin-top:2px; }
.tx-right { text-align:right; flex-shrink:0; }
.tx-amount { font-size:15px; font-weight:700; color:var(--red); }
.tx-date-sm { font-size:10px; color:var(--text3); margin-top:2px; }
.tx-del-btn {
  background:var(--red-bg); border:none; border-radius:var(--radius-xs);
  color:var(--red); font-size:13px; padding:6px 9px; cursor:pointer; flex-shrink:0;
}

/* ════════════════════════════════
   PLANNED LIST
   ════════════════════════════════ */
.planned-list { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.plan-item {
  display:flex; align-items:center; gap:10px;
  padding:13px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.plan-item.done { opacity:0.5; }
.plan-check {
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--border2); display:flex; align-items:center;
  justify-content:center; cursor:pointer; flex-shrink:0; transition:all 0.2s;
  font-size:13px;
}
.plan-check.checked { background:var(--green); border-color:var(--green); color:white; }
.plan-info { flex:1; min-width:0; }
.plan-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-meta  { font-size:11px; color:var(--text2); margin-top:2px; }
.plan-right { text-align:right; flex-shrink:0; }
.plan-amount{ font-size:14px; font-weight:700; color:var(--yellow); }
.plan-due   { font-size:10px; color:var(--text3); margin-top:2px; }
.plan-overdue { color:var(--red) !important; font-weight:600; }
.plan-del-btn { background:none; border:none; color:var(--text3); font-size:15px; cursor:pointer; flex-shrink:0; padding:4px; }

/* ════════════════════════════════
   FILTER BAR
   ════════════════════════════════ */
.filter-bar { display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap; }
.filter-select {
  flex:1; min-width:90px; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-family:inherit; font-size:13px; padding:9px 10px;
  outline:none; cursor:pointer; -webkit-appearance:none;
}
.filter-select:focus { border-color:var(--accent); }

/* ════════════════════════════════
   🐾 FORMS
   ════════════════════════════════ */
.form-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:20px; padding:18px; box-shadow:var(--shadow);
}
.form-title {
  font-family:'Playfair Display',serif;
  font-size:20px; font-weight:700; margin-bottom:18px; color:var(--text);
}
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:11px; font-weight:700;
  color:var(--text2); text-transform:uppercase;
  letter-spacing:0.6px; margin-bottom:7px;
}
.opt { font-size:10px; color:var(--text3); text-transform:none; letter-spacing:0; font-weight:400; }

.amount-wrap {
  display:flex; align-items:center;
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--radius); overflow:hidden; transition:border-color 0.2s;
}
.amount-wrap:focus-within { border-color:var(--accent); }
.amount-input {
  flex:1; background:none; border:none; color:var(--text);
  font-family:inherit; font-size:26px; font-weight:700;
  padding:12px 14px; outline:none; width:100%;
}
.amount-unit { font-size:16px; font-weight:600; color:var(--text2); padding-right:14px; }

.quick-amounts { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.quick-btn {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:999px; color:var(--accent);
  font-family:inherit; font-size:12px; font-weight:700; padding:5px 12px;
  cursor:pointer; transition:all 0.15s;
}
.quick-btn:active { background:var(--accent); border-color:var(--accent); color:white; transform:scale(0.95); }

/* Category picker */
.cat-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.cat-pick-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px; background:var(--bg2);
  border:2px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; transition:all 0.15s; font-family:inherit;
}
.cat-pick-btn.selected { border-color:var(--accent); background:rgba(107,124,59,0.1); }
.cat-pick-icon { font-size:22px; }
.cat-pick-name { font-size:9px; color:var(--text2); text-align:center; line-height:1.2; font-weight:600; }
.cat-pick-btn.selected .cat-pick-name { color:var(--accent); }

/* User picker */
.user-picker { display:flex; gap:8px; }
.user-pick-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:11px 6px; background:var(--bg2);
  border:2px solid var(--border); border-radius:var(--radius);
  cursor:pointer; transition:all 0.15s; font-family:inherit;
}
.user-pick-btn.selected { border-color:var(--accent); background:rgba(107,124,59,0.08); }
.user-pick-avatar {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700;
}
.user-pick-name { font-size:11px; color:var(--text2); font-weight:600; }
.user-pick-btn.selected .user-pick-name { color:var(--accent); }

.text-input {
  width:100%; background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--radius); color:var(--text);
  font-family:inherit; font-size:15px; padding:12px 14px;
  outline:none; transition:border-color 0.2s; -webkit-appearance:none;
}
.text-input:focus { border-color:var(--accent); }
input[type="date"].text-input::-webkit-calendar-picker-indicator { opacity:0.5; cursor:pointer; }

.submit-btn {
  width:100%; background:var(--grad); border:none; border-radius:var(--radius);
  color:white; font-family:inherit; font-size:16px; font-weight:700;
  padding:16px; cursor:pointer; transition:all 0.2s;
  box-shadow:0 4px 18px rgba(107,124,59,0.45); letter-spacing:0.3px;
  position: relative; overflow: hidden;
}
.submit-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  border-radius: inherit;
}
.submit-btn:active { transform:scale(0.98); opacity:0.9; }

/* ── EMPTY STATE ── */
.empty-state {
  text-align:center; color:var(--text3); font-size:14px;
  padding:28px 16px; line-height:1.7;
}
.empty-state::before { content: '🐱'; display:block; font-size:36px; margin-bottom:8px; }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:calc(88px + var(--safe-bot)); left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--accent2); color:white;
  padding:11px 20px 11px 16px; border-radius:999px; font-size:13px; font-weight:600;
  opacity:0; transition:all 0.3s; pointer-events:none; white-space:nowrap;
  z-index:1000; box-shadow:0 8px 32px rgba(80,90,40,0.35);
}
.toast::before { content: '🐾 '; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── LOADING (Cat Paw) ── */
.loading-overlay {
  position:fixed; inset:0; background:rgba(247,241,227,0.88);
  display:flex; align-items:center; justify-content:center;
  z-index:500; opacity:0; pointer-events:none; transition:opacity 0.2s;
  flex-direction: column; gap:12px;
}
.loading-overlay.active { opacity:1; pointer-events:all; }
.spinner {
  font-size:44px;
  animation: catSpin 0.8s ease-in-out infinite;
  display: block;
}
.spinner::before { content: '🐾'; }
@keyframes catSpin {
  0%   { transform: rotate(-15deg) scale(1); }
  25%  { transform: rotate(15deg) scale(1.1); }
  50%  { transform: rotate(-15deg) scale(1); }
  75%  { transform: rotate(15deg) scale(0.95); }
  100% { transform: rotate(-15deg) scale(1); }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

/* ════════════════════════════════
   PHONE INPUT
   ════════════════════════════════ */
.phone-input-wrap {
  display:flex; align-items:center; gap:10px;
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color 0.2s; padding-left:14px;
}
.phone-input-wrap:focus-within { border-color:var(--accent); }
.phone-flag { font-size:22px; flex-shrink:0; }
.phone-input {
  flex:1; background:none; border:none; outline:none;
  font-family:inherit; font-size:22px; font-weight:600;
  color:var(--text); padding:14px 14px 14px 6px;
  letter-spacing:1px; width:100%;
}
.phone-input::placeholder { color:var(--text3); font-weight:400; }

/* ════════════════════════════════
   🐱 ACCOUNT / SETTINGS PAGE
   ════════════════════════════════ */
.account-profile-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:20px; padding:24px 20px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center;
  gap:8px; margin-bottom:4px;
  position:relative; overflow:hidden;
}
.account-profile-card::before {
  content:''; position:absolute; top:0;left:0;right:0; height:3px;
  background:var(--grad); border-radius:20px 20px 0 0;
}
/* Paw print watermark */
.account-profile-card::after {
  content: '🐾';
  position: absolute; bottom:10px; right:16px;
  font-size:32px; opacity:0.08;
}
.account-avatar-wrap { position:relative; display:inline-block; }
.account-avatar {
  width:80px; height:80px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:38px; border:3px solid var(--border2);
  box-shadow:var(--shadow);
}
.account-name {
  font-family:'Playfair Display',serif;
  font-size:22px; font-weight:700; color:var(--text);
}
.account-phone {
  font-size:14px; color:var(--text2); font-weight:500;
  background:var(--bg2); padding:5px 14px; border-radius:999px;
  border:1.5px solid var(--border);
}
.avatar-edit-btn {
  position:absolute; bottom:-2px; right:-2px;
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface);
  color:white; font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:transform 0.2s;
}
.avatar-edit-btn:active { transform:scale(0.9); }

/* ════════════════════════════════
   SETTINGS MENU
   ════════════════════════════════ */
.settings-menu {
  display:flex; flex-direction:column; gap:8px;
  margin-top:14px;
}
.settings-item {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--radius);
  cursor:pointer; font-family:inherit; text-align:left;
  box-shadow:var(--shadow-sm); transition:all 0.2s;
  width:100%;
}
.settings-item:active { transform:scale(0.98); border-color:var(--accent); background:rgba(107,124,59,0.04); }
.settings-item.danger:active { border-color:var(--red); }
.settings-icon { font-size:22px; width:32px; text-align:center; flex-shrink:0; }
.settings-info { flex:1; }
.settings-label { font-size:15px; font-weight:600; color:var(--text); }
.settings-sub { font-size:12px; color:var(--text2); margin-top:2px; }
.settings-item.danger .settings-label { color:var(--red); }
.settings-arrow { color:var(--text3); font-size:22px; font-weight:300; }

/* ════════════════════════════════
   SETTINGS PANELS
   ════════════════════════════════ */
.settings-panel { display:none; }
.settings-panel.active { display:block; }

.panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2px 14px;
  font-family:'Playfair Display',serif;
  font-size:18px; font-weight:700; color:var(--text);
}
.panel-back {
  background:none; border:none; color:var(--accent);
  font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; padding:6px 0; display:flex; align-items:center; gap:4px;
}
.panel-back:active { opacity:0.7; }

/* ════════════════════════════════
   🖼 AVATAR PICKER
   ════════════════════════════════ */
.avatar-picker-wrap { margin-top:14px; }
.avatar-tabs {
  display:flex; gap:8px; margin-bottom:14px;
  border-bottom:1.5px solid var(--border); padding-bottom:10px;
}
.avatar-tab {
  background:none; border:none; font-family:inherit;
  font-size:14px; font-weight:600; color:var(--text2);
  padding:6px 14px; border-radius:999px; cursor:pointer;
  transition:all 0.2s;
}
.avatar-tab.active {
  background:rgba(107,124,59,0.12); color:var(--accent);
  border:1.5px solid rgba(107,124,59,0.3);
}
.avatar-tab-content { display:none; }
.avatar-tab-content.active { display:block; }

.emoji-grid {
  display:grid; grid-template-columns:repeat(8,1fr); gap:8px;
  margin-bottom:14px;
}
.emoji-btn {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--radius-xs); font-size:22px;
  aspect-ratio:1; cursor:pointer; transition:all 0.15s;
  display:flex; align-items:center; justify-content:center;
}
.emoji-btn:active { transform:scale(0.85); border-color:var(--accent); background:rgba(107,124,59,0.12); }

.photo-upload-area {
  background:var(--bg2); border:2px dashed var(--border2);
  border-radius:var(--radius); padding:24px 16px;
  text-align:center; cursor:pointer; transition:all 0.2s;
}
.photo-upload-area:active { border-color:var(--accent); }
.photo-preview span { font-size:40px; }
.photo-preview p { color:var(--text2); font-size:14px; margin-top:8px; }
.photo-hint { font-size:11px; color:var(--text3) !important; margin-top:4px !important; }

.btn-cancel-avatar {
  width:100%; background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--radius); color:var(--text2);
  font-family:inherit; font-size:14px; font-weight:600;
  padding:12px; cursor:pointer; margin-top:10px;
  transition:all 0.2s;
}
.btn-cancel-avatar:active { background:var(--bg3); }

/* ════════════════════════════════
   🐱 CAT ANIMATIONS
   ════════════════════════════════ */
@keyframes tailWag {
  0%,100% { transform: rotate(-12deg) translateX(0); }
  50%     { transform: rotate(12deg) translateX(2px); }
}

@keyframes pawPrint {
  0%   { opacity:0; transform: scale(0.5) rotate(-20deg); }
  30%  { opacity:0.3; transform: scale(1.1) rotate(5deg); }
  100% { opacity:0; transform: scale(0.8) rotate(10deg) translateY(-20px); }
}

/* Paw print trail effect on nav active */
.nav-btn.active::after {
  content: '🐾';
  position: absolute;
  font-size: 10px;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: pawPrint 0.5s ease forwards;
}
.nav-btn { position: relative; }

/* Cat ear on hero card */
.hero-card .cat-ear-left,
.hero-card .cat-ear-right {
  position: absolute;
  top: -8px; width: 0; height: 0;
  border-style: solid; pointer-events: none;
}

/* ── ADDITIONAL STYLES ── */
.quick-reset-btn {
  background: var(--red-bg); border: 1.5px solid var(--red);
  border-radius: 999px; color: var(--red);
  font-family: inherit; font-size: 12px; font-weight: 800; padding: 5px 12px;
  cursor: pointer; transition: all 0.15s;
}
.quick-reset-btn:active { background: var(--red); color: white; transform: scale(0.95); }

.quick-btn-plan {
  background: var(--bg2); border: 1.5px solid var(--border);
  border-radius: 999px; color: var(--accent);
  font-family: inherit; font-size: 11px; font-weight: 700; padding: 4px 10px;
  cursor: pointer; transition: all 0.15s;
}
.quick-btn-plan:active { background: var(--accent); color: white; transform: scale(0.95); }

/* Settlement Card Style (Cute chat-bubble design) */
.settlement-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
}
.settlement-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--surface2); border-radius: var(--radius-sm);
  border: 1px dashed rgba(107,124,59,0.25);
  animation: popIn 0.3s ease;
}
.settlement-item .avatar-flow {
  display: flex; align-items: center; gap: 8px;
}
.settlement-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.settlement-arrow { font-size: 14px; color: var(--accent); animation: arrowSlide 1s infinite alternate; }
.settlement-amount {
  font-size: 14px; font-weight: 700; color: var(--accent);
}
.settlement-text { font-size: 12px; color: var(--text2); font-weight: 500; }

@keyframes arrowSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(4px); }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.96) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── QUICK PLAN SUGGESTIONS ── */
.quick-plans { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.quick-plan-btn {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:999px; color:var(--text);
  font-family:inherit; font-size:11px; font-weight:600; padding:4px 10px;
  cursor:pointer; transition:all 0.15s;
}
.quick-plan-btn:active { background:var(--accent); color:white; transform:scale(0.95); }

/* ── MINI AVATAR IN LISTS ── */
.user-avatar-mini {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-block; vertical-align: middle;
  margin-right: 4px; font-size: 10px; text-align: center; line-height: 18px;
  background-size: cover; background-position: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
  flex-shrink: 0;
}

/* ── MULTI SELECT USER PICKER ── */
.user-pick-btn.selected-share {
  border-color: var(--accent);
  background: rgba(107,124,59,0.12);
  opacity: 1;
}
.user-pick-btn.unselected-share {
  opacity: 0.45;
  filter: grayscale(0.5);
  border-color: var(--border);
}

/* ── SETTLEMENT SUMMARY TABLE ── */
.settlement-summary-table {
  width: 100%; border-collapse: collapse; margin-bottom: 12px;
  font-size: 13px; color: var(--text);
}
.settlement-summary-table th, .settlement-summary-table td {
  padding: 6px 8px; text-align: left;
}
.settlement-summary-table th {
  font-weight: 700; color: var(--text2); border-bottom: 1.5px solid var(--border);
}
.settlement-summary-table td {
  border-bottom: 1px dashed var(--border);
}
.settlement-summary-table tr:last-child td {
  border-bottom: none;
}
.settlement-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700;
}
.settlement-badge.plus { background: var(--green-bg); color: var(--green); }
.settlement-badge.minus { background: var(--red-bg); color: var(--red); }

/* ── CUSTOM CONFIRM MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 16px 64px rgba(0,0,0,0.25);
  padding: 28px 24px 20px;
  max-width: 320px; width: 90%;
  text-align: center;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.modal-overlay.active .modal-box {
  transform: scale(1) translateY(0);
}

.modal-emoji {
  font-size: 40px; margin-bottom: 10px;
  animation: modalBounce 0.5s ease;
}
@keyframes modalBounce {
  0% { transform: scale(0.3) rotate(-10deg); }
  60% { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.modal-title {
  font-size: 16px; font-weight: 800; color: var(--text);
  margin-bottom: 6px;
}
.modal-msg {
  font-size: 13px; color: var(--text2);
  margin-bottom: 20px; line-height: 1.5;
}

.modal-actions {
  display: flex; gap: 10px;
}
.modal-actions button {
  flex: 1; padding: 11px 0; border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all 0.15s;
}
.modal-btn-cancel {
  background: var(--bg2); color: var(--text2);
}
.modal-btn-cancel:active { transform: scale(0.95); }
.modal-btn-confirm {
  background: var(--red); color: white;
}
.modal-btn-confirm:active { transform: scale(0.95); background: #a04e30; }

/* ── HISTORY SUMMARY BAR ── */
.history-summary {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 0 0 12px;
  box-shadow: var(--shadow-sm);
}
.history-summary-label {
  font-size: 12px; color: var(--text2); font-weight: 600;
}
.history-summary-total {
  font-size: 18px; font-weight: 800; color: var(--accent);
}
.history-summary-count {
  font-size: 11px; color: var(--text3); margin-top: 2px;
}

/* ── MY BALANCE CARD (Cá nhân hóa) ── */
.my-balance-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  border: 2px solid transparent;
}
.my-balance-card.positive {
  border-color: rgba(74,107,42,0.3);
  background: linear-gradient(135deg, rgba(74,107,42,0.06), var(--surface));
}
.my-balance-card.negative {
  border-color: rgba(184,92,58,0.3);
  background: linear-gradient(135deg, rgba(184,92,58,0.06), var(--surface));
}
.my-balance-card.zero {
  border-color: rgba(107,124,59,0.2);
}
.my-balance-emoji { font-size: 32px; margin-bottom: 6px; }
.my-balance-label { font-size: 12px; color: var(--text2); font-weight: 600; margin-bottom: 4px; }
.my-balance-amount {
  font-size: 28px; font-weight: 900; letter-spacing: -0.5px;
}
.my-balance-amount.positive { color: var(--green); }
.my-balance-amount.negative { color: var(--red); }
.my-balance-amount.zero { color: var(--text2); }
.my-balance-hint { font-size: 11px; color: var(--text3); margin-top: 6px; }

/* ── BALANCE MINI CARDS (Tổng nợ cả nhà) ── */
.balance-cards {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.balance-mini-card {
  flex: 1;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}
.balance-mini-card.is-me {
  border: 1.5px solid var(--accent);
  background: rgba(107,124,59,0.05);
}
.balance-mini-avatar {
  width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; background-size: cover; background-position: center;
}
.balance-mini-name { font-size: 11px; color: var(--text2); font-weight: 600; margin-bottom: 2px; }
.balance-mini-amount { font-size: 13px; font-weight: 800; }
.balance-mini-amount.pos { color: var(--green); }
.balance-mini-amount.neg { color: var(--red); }
.balance-mini-amount.zero { color: var(--text3); }

/* ── PENDING PAYMENTS (Chờ xác nhận) ── */
.pending-section { margin-bottom: 12px; }
.pending-item {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
  border-left: 3px solid var(--yellow);
  box-shadow: var(--shadow-sm);
}
.pending-badge {
  display: inline-block;
  background: var(--yellow-bg); color: var(--yellow);
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
}
.pending-info { flex: 1; min-width: 0; }
.pending-note { font-size: 13px; font-weight: 600; color: var(--text); }
.pending-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.pending-amount { font-size: 15px; font-weight: 800; color: var(--yellow); }
.pending-actions { display: flex; gap: 6px; margin-top: 6px; }
.btn-confirm-pay {
  background: var(--green); color: white;
  border: none; border-radius: var(--radius-xs); padding: 7px 14px;
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all 0.15s;
}
.btn-confirm-pay:active { transform: scale(0.95); }
.btn-reject-pay {
  background: var(--bg2); color: var(--text2);
  border: none; border-radius: var(--radius-xs); padding: 7px 10px;
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* ── CAT BREAKDOWN PERSON DETAIL ── */
.cat-row-persons {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px; padding-left: 2px;
}
.cat-person-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--text2); font-weight: 600;
  background: var(--bg2); border-radius: 99px; padding: 2px 8px 2px 2px;
}
.cat-person-avatar {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; background-size: cover; background-position: center;
}

/* ── SETTLEMENT TRANSFER ARROW (gọn) ── */
.settlement-transfers { margin-top: 8px; }
.transfer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.transfer-row:last-child { border-bottom: none; }
.transfer-arrow { color: var(--accent); font-weight: 800; }
.transfer-amount { margin-left: auto; font-weight: 800; color: var(--accent); }