/* =========================================================
   HissaPatti — design tokens
   ========================================================= */
:root{
  --primary:#7c3aed;
  --primary-2:#a78bfa;
  --secondary:#06b6d4;
  --pink:#ec4899;
  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;

  --bg:#f5f4fb;
  --bg-2:#ffffff;
  --card:rgba(255,255,255,0.72);
  --card-solid:#ffffff;
  --border:rgba(17,24,39,0.08);
  --text:#111827;
  --text-dim:#6b7280;
  --text-faint:#9ca3af;

  --grad-primary:linear-gradient(135deg,#7c3aed 0%,#4f46e5 45%,#06b6d4 100%);
  --grad-warm:linear-gradient(135deg,#ec4899 0%,#7c3aed 100%);
  --grad-mint:linear-gradient(135deg,#10b981 0%,#06b6d4 100%);
  --shadow-soft:0 8px 30px rgba(76,29,149,0.10);
  --shadow-lift:0 16px 40px rgba(76,29,149,0.18);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --font-display:'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --dur:.45s;
  --ease:cubic-bezier(.16,1,.3,1);
}

html[data-theme="dark"]{
  --bg:#0a0a16;
  --bg-2:#0f0f20;
  --card:rgba(30,27,55,0.6);
  --card-solid:#15132a;
  --border:rgba(255,255,255,0.08);
  --text:#f3f2fb;
  --text-dim:#a6a3c4;
  --text-faint:#716e91;
  --shadow-soft:0 8px 30px rgba(0,0,0,0.35);
  --shadow-lift:0 20px 50px rgba(0,0,0,0.5);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-0.02em;}
p{margin:0;}
button{font-family:inherit;}
.hidden{display:none !important;}
.muted{color:var(--text-dim);}
.small{font-size:.85rem;}
a{color:inherit;}
kbd{background:var(--border); padding:2px 7px; border-radius:6px; font-size:.72rem; font-family:var(--font-body); color:var(--text-dim);}

/* =========================================================
   Background decor
   ========================================================= */
.bg-decor{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; will-change:transform;}
.blob-a{width:520px; height:520px; background:var(--grad-primary); top:-160px; left:-120px; animation:driftA 22s ease-in-out infinite;}
.blob-b{width:420px; height:420px; background:var(--grad-mint); bottom:-140px; right:-100px; animation:driftB 26s ease-in-out infinite;}
.blob-c{width:340px; height:340px; background:var(--grad-warm); top:40%; left:60%; animation:driftC 30s ease-in-out infinite; opacity:.22;}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,80px) scale(1.15)}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-40px) scale(1.1)}}
@keyframes driftC{0%,100%{transform:translate(0,0)}50%{transform:translate(-90px,50px)}}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  position:relative; overflow:hidden;
  border:none; cursor:pointer; border-radius:999px;
  padding:11px 20px; font-weight:600; font-size:.92rem;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--grad-primary); color:#fff; box-shadow:0 6px 20px rgba(124,58,237,.35); background-size:160% 160%;}
.btn-primary:hover{box-shadow:0 10px 28px rgba(124,58,237,.45); transform:translateY(-2px); background-position:100% 0;}
.btn-outline{background:transparent; color:var(--text); border:1.5px solid var(--border); backdrop-filter:blur(6px);}
.btn-outline:hover{border-color:var(--primary); color:var(--primary); transform:translateY(-2px);}
.btn-ghost{background:transparent; border:none; color:var(--text-dim); padding:8px;}
.btn-text{background:none; border:none; color:var(--primary); padding:8px 4px; font-weight:600;}
.btn-lg{padding:14px 26px; font-size:1rem;}
.btn-block{width:100%;}
.btn .ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:ripple .6s ease-out;}
@keyframes ripple{to{transform:scale(3); opacity:0;}}

.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--card); backdrop-filter:blur(10px); cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center; color:var(--text);
  transition:transform .2s var(--ease), background .2s;
  position:relative;
}
.icon-btn:hover{transform:translateY(-2px) scale(1.05); background:var(--card-solid);}
.icon-btn.has-badge .badge{
  position:absolute; top:-2px; right:-2px; background:var(--danger); color:#fff;
  font-size:.62rem; min-width:16px; height:16px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:700; padding:0 3px;
}

/* =========================================================
   Landing
   ========================================================= */
.screen{min-height:100vh; width:100%;}
.landing{max-width:1240px; margin:0 auto; padding:0 28px 40px;}
.landing-nav{display:flex; align-items:center; justify-content:space-between; padding:26px 0;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-name{font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-0.02em;}
.landing-nav-actions{display:flex; align-items:center; gap:10px;}

.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:50px 0 30px; min-height:60vh;}
.eyebrow-pill{
  display:inline-block; padding:7px 16px; border-radius:999px; background:var(--card);
  border:1px solid var(--border); font-size:.82rem; font-weight:600; color:var(--primary);
  margin-bottom:22px; opacity:0; animation:riseIn .7s var(--ease) .1s forwards;
}
.hero-title{font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1.06; font-weight:800; opacity:0; animation:riseIn .8s var(--ease) .22s forwards;}
.grad-text{background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-sub{margin-top:20px; font-size:1.08rem; color:var(--text-dim); max-width:480px; line-height:1.6; opacity:0; animation:riseIn .8s var(--ease) .34s forwards;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; opacity:0; animation:riseIn .8s var(--ease) .46s forwards;}
.demo-pill{
  margin-top:22px; display:inline-flex; align-items:center; gap:9px; background:var(--card);
  border:1px solid var(--border); padding:9px 18px 9px 12px; border-radius:999px; cursor:pointer;
  color:var(--text); font-weight:600; font-size:.88rem; backdrop-filter:blur(10px);
  opacity:0; animation:riseIn .8s var(--ease) .58s forwards; transition:transform .2s var(--ease);
}
.demo-pill:hover{transform:translateY(-2px);}
.demo-dot{width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:pulseDot 1.8s infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55);}70%{box-shadow:0 0 0 8px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}}
@keyframes riseIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}

.hero-visual{position:relative; height:460px; display:flex; align-items:center; justify-content:center;}
.phone-frame{
  width:250px; height:400px; border-radius:34px; background:var(--card-solid);
  border:1px solid var(--border); box-shadow:var(--shadow-lift); padding:18px;
  opacity:0; animation:riseIn .9s var(--ease) .3s forwards; position:relative; z-index:2;
}
.phone-glass{
  height:100%; border-radius:22px; background:var(--grad-primary); padding:20px; color:#fff;
  display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden;
}
.phone-glass::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.28), transparent 55%);}
.mini-header{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:.92rem;}
.mini-pill{background:rgba(255,255,255,.22); padding:4px 10px; border-radius:999px; font-size:.7rem;}
.mini-balance{margin-top:auto;}
.mini-label{font-size:.78rem; opacity:.85;}
.mini-amount{display:block; font-size:2.1rem; font-weight:800; font-family:var(--font-display);}
.mini-bar{height:8px; border-radius:999px; background:rgba(255,255,255,.25); overflow:hidden;}
.mini-bar-fill{height:100%; width:68%; background:#fff; border-radius:999px; animation:growBar 1.6s var(--ease) .6s both;}
@keyframes growBar{from{width:0;}}

.float-card{
  position:absolute; background:var(--card-solid); border:1px solid var(--border);
  padding:10px 14px; border-radius:14px; box-shadow:var(--shadow-soft); font-size:.82rem;
  font-weight:600; display:flex; flex-direction:column; gap:2px; opacity:0;
}
.float-card b{font-size:.9rem;}
.fc-1{top:6%; left:0; animation:riseIn .7s var(--ease) .7s forwards, floaty 5s ease-in-out 1.3s infinite;}
.fc-2{bottom:22%; left:-6%; animation:riseIn .7s var(--ease) .85s forwards, floaty 6s ease-in-out 1.4s infinite;}
.fc-3{top:12%; right:-4%; animation:riseIn .7s var(--ease) 1s forwards, floaty 5.6s ease-in-out 1.6s infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.avatar-orbit{position:absolute; bottom:2%; right:8%;}
.orb-avatar{
  width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.8rem; border:2px solid var(--bg-2); position:relative; margin-left:-10px;
  opacity:0; animation:riseIn .6s var(--ease) forwards;
}
.oa-1{background:#ec4899; animation-delay:1.1s;}
.oa-2{background:#06b6d4; animation-delay:1.22s;}
.oa-3{background:#f59e0b; animation-delay:1.34s;}

.landing-strip{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding:26px 0 10px;
  border-top:1px solid var(--border); margin-top:20px;
}
.strip-item{color:var(--text-dim); font-size:.9rem; padding:8px 4px;}
.strip-item b{color:var(--text); font-family:var(--font-display);}

/* =========================================================
   Brand footer
   ========================================================= */
.brand-footer{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  padding:22px 12px 10px; font-size:.82rem; color:var(--text-faint); font-weight:600;
}
.footer-heart{
  color:var(--danger); display:inline-block; font-size:.9rem;
  animation:footerHeartbeat 1.6s ease-in-out infinite;
}
@keyframes footerHeartbeat{
  0%,100%{transform:scale(1);}
  15%{transform:scale(1.35);}
  30%{transform:scale(1);}
  45%{transform:scale(1.25);}
  60%{transform:scale(1);}
}
.footer-link{
  position:relative; font-weight:800; text-decoration:none; background:var(--grad-primary);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:footerGradientMove 4s ease-in-out infinite;
  transition:transform .2s var(--ease);
  display:inline-block;
}
.footer-link:hover{transform:translateY(-1px);}
.footer-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--grad-primary); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.footer-link:hover::after{transform:scaleX(1); transform-origin:left;}
@keyframes footerGradientMove{
  0%,100%{background-position:0% center;}
  50%{background-position:100% center;}
}

/* =========================================================
   Modals
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,8,20,.5); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
  animation:fadeIn .25s var(--ease);
}
@keyframes fadeIn{from{opacity:0;}}
.modal{
  background:var(--card-solid); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; width:100%; max-width:440px; max-height:88vh; overflow-y:auto; position:relative;
  box-shadow:var(--shadow-lift); animation:modalIn .35s var(--ease);
}
.modal-wide{max-width:560px;}
@keyframes modalIn{from{opacity:0; transform:translateY(24px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);}}
.modal-close{
  position:absolute; top:16px; right:16px; background:var(--bg); border:none; width:32px; height:32px;
  border-radius:50%; cursor:pointer; color:var(--text-dim); font-size:.9rem;
}
.modal h2{margin-bottom:18px; font-size:1.4rem;}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-size:.85rem; font-weight:600; color:var(--text-dim);}
.field input, .field select{
  padding:11px 13px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.95rem; font-weight:500; font-family:var(--font-body);
  transition:border .2s;
}
.field input:focus, .field select:focus{outline:none; border-color:var(--primary);}
.field-label{display:block; font-size:.85rem; font-weight:600; color:var(--text-dim); margin-bottom:8px;}
.field-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:.85rem;}
.field-row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.checkbox{display:flex; align-items:center; gap:6px; color:var(--text-dim); font-weight:500;}
.link-muted{color:var(--primary); text-decoration:none; font-weight:600;}

.auth-tabs{display:flex; gap:6px; background:var(--bg); padding:4px; border-radius:999px; margin-bottom:22px;}
.auth-tab{flex:1; padding:9px; border:none; background:transparent; border-radius:999px; cursor:pointer; font-weight:600; color:var(--text-dim);}
.auth-tab.active{background:var(--card-solid); color:var(--text); box-shadow:var(--shadow-soft);}
.auth-divider{text-align:center; margin:16px 0; position:relative; color:var(--text-faint); font-size:.8rem;}
.auth-divider::before,.auth-divider::after{content:""; position:absolute; top:50%; width:40%; height:1px; background:var(--border);}
.auth-divider::before{left:0;} .auth-divider::after{right:0;}

.success-state{text-align:center; padding:20px 0;}
.success-burst{font-size:3rem; animation:burst .6s var(--ease);}
@keyframes burst{0%{transform:scale(0);} 60%{transform:scale(1.3);} 100%{transform:scale(1);}}

/* =========================================================
   App shell
   ========================================================= */
.app{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
.sidebar{
  background:var(--card); backdrop-filter:blur(16px); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:22px 16px; gap:26px; position:sticky; top:0; height:100vh;
}
.brand-sidebar{padding-left:6px;}
.side-nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.side-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; border:none;
  background:transparent; color:var(--text-dim); font-weight:600; font-size:.92rem; cursor:pointer; text-align:left;
  transition:background .2s, color .2s, transform .2s;
}
.side-link .si{width:20px; text-align:center; color:var(--text-faint); font-size:1rem;}
.side-link:hover{background:var(--border); color:var(--text);}
.side-link.active{background:var(--grad-primary); color:#fff;}
.side-link.active .si{color:#fff;}
.side-footer{display:flex; flex-direction:column; gap:10px;}
.cmdk-hint{display:flex; justify-content:space-between; align-items:center; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:9px 12px; cursor:pointer; color:var(--text-dim); font-size:.8rem; font-weight:600;}

.main-col{display:flex; flex-direction:column; min-height:100vh;}
.topbar{
  display:flex; align-items:center; gap:14px; padding:14px 26px; position:sticky; top:0; z-index:20;
  background:var(--card); backdrop-filter:blur(16px); border-bottom:1px solid var(--border);
}
.search-fake{
  flex:1; max-width:420px; display:flex; align-items:center; gap:10px; background:var(--bg);
  border:1px solid var(--border); padding:10px 14px; border-radius:999px; color:var(--text-faint);
  cursor:pointer; font-size:.88rem; transition:border .2s;
}
.search-fake:hover{border-color:var(--primary);}
.search-fake kbd{margin-left:auto;}
.topbar-actions{display:flex; align-items:center; gap:10px; margin-left:auto;}
.avatar-btn{background:none; border:none; cursor:pointer; padding:0;}
.avatar{
  border-radius:50%; background:var(--grad-primary); color:#fff; display:inline-flex; align-items:center;
  justify-content:center; font-weight:700; font-family:var(--font-display); flex-shrink:0;
}
.avatar-sm{width:36px; height:36px; font-size:.85rem;}
.avatar-lg{width:52px; height:52px; font-size:1.2rem;}
.avatar-xs{width:26px; height:26px; font-size:.65rem; border:2px solid var(--card-solid); margin-left:-8px;}

.views{padding:24px 28px 90px; max-width:1180px; width:100%; margin:0 auto;}
.view-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.view-title-row h1{font-size:1.6rem;}

/* =========================================================
   Dashboard cards
   ========================================================= */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px;
  backdrop-filter:blur(14px); position:relative; overflow:hidden; box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  opacity:0; transform:translateY(14px); animation:cardIn .6s var(--ease) forwards;
}
.stat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);}
@keyframes cardIn{to{opacity:1; transform:translateY(0);}}
.stat-card .sc-icon{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:14px;}
.sc-owed .sc-icon{background:rgba(16,185,129,.15); color:var(--success);}
.sc-owe .sc-icon{background:rgba(239,68,68,.15); color:var(--danger);}
.sc-net .sc-icon{background:rgba(124,58,237,.15); color:var(--primary);}
.sc-total .sc-icon{background:rgba(6,182,212,.15); color:var(--secondary);}
.sc-label{font-size:.82rem; color:var(--text-dim); font-weight:600;}
.sc-amount{font-family:var(--font-display); font-size:1.7rem; font-weight:800; margin:4px 0 8px;}
.sc-trend{font-size:.78rem; font-weight:700; color:var(--success);}
.sc-trend.down{color:var(--danger);}
.sc-spark{position:absolute; right:14px; bottom:14px; opacity:.5;}

.section-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px;
  backdrop-filter:blur(14px); box-shadow:var(--shadow-soft); margin-bottom:20px;
}
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.section-head h3{font-size:1.05rem;}

.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:18px;}

/* =========================================================
   Groups
   ========================================================= */
.group-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:18px;}
.group-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px;
  backdrop-filter:blur(14px); box-shadow:var(--shadow-soft); cursor:pointer; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); overflow:hidden;
  opacity:0; transform:translateY(14px); animation:cardIn .5s var(--ease) forwards;
}
.group-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift);}
.group-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-primary);}
.gc-top{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.gc-icon{width:46px; height:46px; border-radius:14px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.4rem;}
.gc-name{font-weight:700; font-family:var(--font-display); font-size:1.05rem;}
.gc-members{font-size:.78rem; color:var(--text-dim);}
.gc-stats{display:flex; justify-content:space-between; margin:14px 0;}
.gc-stat-label{font-size:.72rem; color:var(--text-faint); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.gc-stat-val{font-weight:700; font-family:var(--font-display);}
.gc-progress{height:6px; border-radius:999px; background:var(--border); overflow:hidden; margin:10px 0;}
.gc-progress-fill{height:100%; background:var(--grad-mint); border-radius:999px; transition:width 1s var(--ease);}
.gc-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.gc-avatars{display:flex;}
.gc-time{font-size:.72rem; color:var(--text-faint);}

/* =========================================================
   Expense list
   ========================================================= */
.filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.chip-filter{
  padding:8px 15px; border-radius:999px; border:1.5px solid var(--border); background:var(--card);
  cursor:pointer; font-weight:600; font-size:.82rem; color:var(--text-dim); transition:.2s;
}
.chip-filter.active{background:var(--grad-primary); color:#fff; border-color:transparent;}
.sort-select{margin-left:auto; padding:8px 12px; border-radius:10px; border:1.5px solid var(--border); background:var(--card); color:var(--text); font-weight:600; font-size:.82rem;}

.exp-row{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; margin-bottom:8px;
  background:var(--card); border:1px solid var(--border); backdrop-filter:blur(10px);
  transition:transform .2s var(--ease), background .2s; cursor:default;
  opacity:0; transform:translateX(-10px); animation:slideIn .4s var(--ease) forwards;
}
.exp-row:hover{transform:translateX(3px); background:var(--card-solid);}
@keyframes slideIn{to{opacity:1; transform:translateX(0);}}
.exp-emoji{width:42px; height:42px; border-radius:12px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0;}
.exp-info{flex:1; min-width:0;}
.exp-title{font-weight:700; font-size:.94rem;}
.exp-sub{font-size:.8rem; color:var(--text-dim); margin-top:2px;}
.exp-right{text-align:right; flex-shrink:0;}
.exp-amt{font-weight:700; font-family:var(--font-display);}
.exp-amt.owe{color:var(--danger);}
.exp-amt.owed{color:var(--success);}
.exp-amt.settled{color:var(--text-faint);}
.exp-time{font-size:.72rem; color:var(--text-faint); margin-top:2px;}
.exp-row-actions{display:flex; gap:4px; flex-shrink:0;}
@media (hover:hover){
  .exp-row-actions{opacity:0; transition:opacity .2s;}
  .exp-row:hover .exp-row-actions{opacity:1;}
}
.icon-btn-sm{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--bg);
  color:var(--text-dim); cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center;
  transition:transform .15s var(--ease), background .15s, color .15s;
}
.icon-btn-sm:hover{transform:translateY(-1px); background:var(--card-solid); color:var(--primary);}

/* =========================================================
   Members management
   ========================================================= */
.add-member-row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.add-member-row input{
  flex:1; min-width:120px; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.88rem; font-weight:500;
}
.add-member-row input:focus{outline:none; border-color:var(--primary);}
.member-edit-input{
  flex:1; padding:8px 10px; border-radius:8px; border:1.5px solid var(--primary); background:var(--bg);
  color:var(--text); font-weight:600; font-size:.88rem;
}

/* =========================================================
   Balances + How to settle
   ========================================================= */
.settlement-group-head{display:flex; align-items:center; gap:12px; margin:26px 0 14px;}
.settlement-group-head:first-child{margin-top:0;}
.settlement-group-head h2{font-size:1.15rem;}
.balance-list{display:flex; flex-direction:column; gap:8px;}
.balance-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:var(--card); border:1px solid var(--border);
}
.balance-info{flex:1; min-width:0;}
.balance-name{font-weight:700; font-size:.92rem;}
.balance-sub{font-size:.78rem; color:var(--text-dim); margin-top:2px;}
.balance-right{text-align:right; flex-shrink:0;}
.balance-amt{font-weight:800; font-family:var(--font-display); font-size:1.02rem;}
.balance-tag{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:1px;}
.settle-txn-list{display:flex; flex-direction:column; gap:8px;}
.settle-txn-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:var(--card); border:1px solid var(--border);
}
.txn-badge{
  width:38px; height:38px; border-radius:50%; background:var(--grad-warm); color:#fff; font-weight:800;
  font-size:.72rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:.02em;
}
.txn-info{flex:1; min-width:0;}
.txn-amt{font-weight:800; font-family:var(--font-display); font-size:.98rem;}
.txn-desc{font-size:.8rem; color:var(--text-dim); margin-top:2px;}
.txn-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.txn-pending{font-size:.72rem; font-weight:700; color:var(--warning); text-transform:uppercase; letter-spacing:.03em;}
.btn-sm{padding:8px 14px; font-size:.8rem;}

/* =========================================================
   Settlements
   ========================================================= */
.settle-list{display:flex; flex-direction:column; gap:10px;}
.settle-row{
  display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; background:var(--card);
  border:1px solid var(--border); backdrop-filter:blur(10px);
}
.settle-arrow{font-size:1.2rem; color:var(--text-faint);}
.settle-names{flex:1; font-weight:700;}
.settle-amt{font-weight:800; font-family:var(--font-display); font-size:1.05rem;}

/* =========================================================
   Analytics
   ========================================================= */
.chart-box{position:relative; height:220px;}
.donut-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.legend{display:flex; flex-direction:column; gap:8px; flex:1;}
.legend-item{display:flex; align-items:center; gap:8px; font-size:.85rem;}
.legend-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.legend-val{margin-left:auto; font-weight:700;}
.insight-card{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px;
  background:var(--card); border:1px solid var(--border); margin-bottom:10px; font-size:.88rem; font-weight:600;
}

/* =========================================================
   Activity
   ========================================================= */
.timeline{position:relative; padding-left:26px;}
.timeline::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--border);}
.tl-item{position:relative; padding-bottom:22px;}
.tl-dot{position:absolute; left:-26px; top:2px; width:18px; height:18px; border-radius:50%; background:var(--grad-primary); display:flex; align-items:center; justify-content:center; font-size:.6rem;}
.tl-text{font-weight:600; font-size:.92rem;}
.tl-time{font-size:.76rem; color:var(--text-faint); margin-top:2px;}

/* =========================================================
   Settings
   ========================================================= */
.settings-grid{display:grid; gap:18px;}
.settings-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border);}
.settings-row:last-child{border-bottom:none;}
.settings-row-label{font-weight:600; font-size:.92rem;}
.settings-row-sub{font-size:.78rem; color:var(--text-dim); margin-top:2px;}
.mode-switch{display:flex; gap:8px;}
.mode-opt{padding:8px 14px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); cursor:pointer; font-weight:600; font-size:.8rem; color:var(--text-dim);}
.mode-opt.active{background:var(--grad-primary); color:#fff; border-color:transparent;}
.toggle{position:relative; width:44px; height:26px; border-radius:999px; background:var(--border); cursor:pointer; border:none; flex-shrink:0;}
.toggle::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .25s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.2);}
.toggle.on{background:var(--grad-primary);}
.toggle.on::after{transform:translateX(18px);}

/* =========================================================
   Add expense internals
   ========================================================= */
.amount-row{display:flex; align-items:center; gap:8px; background:var(--bg); border:1.5px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:16px;}
.cur-sym{font-size:1.8rem; font-weight:800; color:var(--text-dim); font-family:var(--font-display);}
.amount-input{border:none; background:transparent; font-size:2.1rem; font-weight:800; font-family:var(--font-display); color:var(--text); width:100%; outline:none;}
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;}
.cat-opt{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 4px; border-radius:14px;
  border:1.5px solid var(--border); background:var(--bg); cursor:pointer; font-size:1.3rem; color:var(--text-dim);
  transition:.2s;
}
.cat-opt span{font-size:.68rem; font-weight:700;}
.cat-opt.selected{border-color:var(--primary); background:rgba(124,58,237,.1); color:var(--primary); transform:translateY(-2px);}
.split-tabs{display:flex; gap:6px; background:var(--bg); padding:4px; border-radius:999px; margin-bottom:14px;}
.split-tab{flex:1; padding:8px; border:none; background:transparent; border-radius:999px; cursor:pointer; font-weight:600; font-size:.8rem; color:var(--text-dim);}
.split-tab.active{background:var(--card-solid); color:var(--primary); box-shadow:var(--shadow-soft);}
.split-members{display:flex; flex-direction:column; gap:8px; margin-bottom:12px; max-height:220px; overflow-y:auto;}
.split-member-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--bg);}
.split-member-row input[type="checkbox"]{width:16px; height:16px;}
.split-member-row .sm-name{flex:1; font-weight:600; font-size:.88rem;}
.split-member-row input[type="number"]{width:78px; padding:6px 8px; border-radius:8px; border:1.5px solid var(--border); background:var(--card-solid); text-align:right; font-weight:700;}
.split-live{background:rgba(124,58,237,.08); border:1px dashed var(--primary-2); border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:.85rem; font-weight:600; color:var(--primary);}
.icon-picker{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.icon-opt{width:42px; height:42px; border-radius:12px; border:1.5px solid var(--border); background:var(--bg); font-size:1.2rem; cursor:pointer;}
.icon-opt.selected{border-color:var(--primary); background:rgba(124,58,237,.12); transform:scale(1.08);}
.chip-row{display:flex; flex-wrap:wrap; gap:6px; margin:-6px 0 14px;}
.chip{background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:.78rem; font-weight:600; display:flex; align-items:center; gap:6px; animation:chipIn .3s var(--ease);}
@keyframes chipIn{from{opacity:0; transform:scale(.7);}}
.chip button{background:none; border:none; cursor:pointer; color:var(--text-faint); font-size:.8rem;}
.method-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px;}
.method-opt{display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px; border-radius:14px; border:1.5px solid var(--border); background:var(--bg); cursor:pointer; font-size:1.2rem;}
.method-opt span{font-size:.68rem; font-weight:700; color:var(--text-dim);}
.method-opt.selected{border-color:var(--primary); background:rgba(124,58,237,.1);}
.copy-row{display:flex; gap:8px;}
.copy-row input{flex:1; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); color:var(--text-dim); font-size:.82rem;}
.invite-options{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0;}
.invite-opt{padding:12px 6px; border-radius:12px; border:1.5px solid var(--border); background:var(--bg); cursor:pointer; font-weight:600; font-size:.8rem;}
.divider-label{font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); margin:18px 0 6px; border-top:1px solid var(--border); padding-top:16px;}
.scan-status{background:rgba(6,182,212,.1); border:1px dashed var(--secondary); border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:.85rem; font-weight:600; color:var(--secondary);}

/* =========================================================
   Toasts
   ========================================================= */
.toast-stack{position:fixed; bottom:24px; right:24px; z-index:400; display:flex; flex-direction:column; gap:10px; max-width:320px;}
.toast{
  background:var(--card-solid); border:1px solid var(--border); border-radius:14px; padding:13px 16px;
  box-shadow:var(--shadow-lift); font-size:.86rem; font-weight:600; display:flex; align-items:center; gap:10px;
  animation:toastIn .35s var(--ease);
}
.toast.leaving{animation:toastOut .3s var(--ease) forwards;}
@keyframes toastIn{from{opacity:0; transform:translateX(40px);}}
@keyframes toastOut{to{opacity:0; transform:translateX(40px);}}

/* =========================================================
   Side panels (notifications / user menu)
   ========================================================= */
.side-panel{
  position:fixed; top:0; right:0; height:100vh; width:340px; max-width:90vw; background:var(--card-solid);
  border-left:1px solid var(--border); z-index:250; box-shadow:var(--shadow-lift); animation:panelIn .3s var(--ease);
  display:flex; flex-direction:column;
}
@keyframes panelIn{from{transform:translateX(100%);}}
.panel-head{display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--border);}
.panel-head h3{flex:1;}
.panel-head .modal-close{position:static;}
.panel-list{flex:1; overflow-y:auto; padding:12px;}
.notif-item{display:flex; gap:12px; padding:12px; border-radius:12px; margin-bottom:4px; cursor:pointer;}
.notif-item:hover{background:var(--bg);}
.notif-item.unread{background:rgba(124,58,237,.06);}
.notif-emoji{font-size:1.2rem;}
.notif-text{font-size:.86rem; font-weight:600;}
.notif-time{font-size:.72rem; color:var(--text-faint); margin-top:2px;}
.profile-mini{display:flex; align-items:center; gap:12px; padding:10px; margin-bottom:14px;}
.profile-name{font-weight:700;}
.profile-email{font-size:.8rem; color:var(--text-dim);}
.panel-row{display:block; width:100%; text-align:left; padding:12px; border-radius:12px; border:none; background:none; cursor:pointer; font-weight:600; font-size:.9rem; color:var(--text);}
.panel-row:hover{background:var(--bg);}

/* =========================================================
   Command palette
   ========================================================= */
.cmdk-box{width:100%; max-width:560px; background:var(--card-solid); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lift); overflow:hidden; animation:modalIn .25s var(--ease);}
.cmdk-input-row{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border);}
.cmdk-input-row input{flex:1; border:none; background:none; font-size:1rem; outline:none; color:var(--text);}
.cmdk-results{max-height:360px; overflow-y:auto; padding:8px;}
.cmdk-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; cursor:pointer; font-weight:600; font-size:.88rem;}
.cmdk-item:hover, .cmdk-item.active{background:var(--bg);}
.cmdk-group-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); padding:10px 12px 4px; font-weight:700;}

/* =========================================================
   Empty & skeleton
   ========================================================= */
.empty-state{text-align:center; padding:50px 20px; color:var(--text-dim);}
.empty-illo{font-size:2.6rem; margin-bottom:14px; opacity:.7;}
.empty-state h4{margin-bottom:8px; color:var(--text);}
.skeleton-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px;}
.sk-line{height:12px; border-radius:6px; margin-bottom:10px; background:linear-gradient(90deg, var(--border) 25%, rgba(124,58,237,.15) 50%, var(--border) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite;}
.sk-w60{width:60%;} .sk-w40{width:40%;} .sk-w80{width:80%;}
@keyframes shimmer{to{background-position:-200% 0;}}

/* =========================================================
   Bottom nav (mobile)
   ========================================================= */
.bottom-nav{display:none;}
.mobile-only{display:none;}

/* =========================================================
   View-only banner
   ========================================================= */
.view-only-banner{
  position:fixed; top:0; left:0; right:0; z-index:500; background:var(--grad-primary); color:#fff;
  padding:10px 20px; font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:10px; justify-content:center;
  text-align:center;
}
.dot-live{width:8px; height:8px; border-radius:50%; background:#fff; animation:pulseDot 1.6s infinite;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; text-align:center;}
  .hero-copy{order:1;}
  .hero-visual{order:0; height:340px;}
  .hero-ctas{justify-content:center;}
  .hero-sub{margin-left:auto; margin-right:auto;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
}

@media (max-width: 760px){
  .sidebar{display:none;}
  .app{grid-template-columns:1fr;}
  .mobile-only{display:flex;}
  .views{padding:18px 14px 100px;}
  .stat-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; height:64px; background:var(--card-solid);
    border-top:1px solid var(--border); z-index:150; align-items:center; padding:0 6px;
    box-shadow:0 -6px 20px rgba(0,0,0,.06);
  }
  .bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none;
    color:var(--text-faint); font-size:.66rem; font-weight:700; padding:8px 2px; cursor:pointer;
  }
  .bn-item span{font-size:1.15rem;}
  .bn-item.active{color:var(--primary);}
  .bn-fab{
    width:52px; height:52px; border-radius:50%; background:var(--grad-primary); color:#fff; border:none;
    font-size:1.6rem; margin-top:-30px; box-shadow:0 10px 24px rgba(124,58,237,.45); cursor:pointer;
  }
  .modal{max-height:92vh;}
  .field-row-2{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .donut-wrap{flex-direction:column;}
}

@media (max-width: 420px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .sc-amount{font-size:1.4rem;}
}